Token Spend Row

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 602,
  slug: 'token-spend-row',
  name: 'Token Spend Row',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'co',
  description: 'A single line in a per-spec budget ledger — spec id, tokens spent, share of ceiling.',
  spec: `## Intent
Roll multiple spec budgets up into a ledger. Each row is one spec's spend so a reviewer can scan a column of tokens-as-currency and spot the outliers.

## Acceptance Criteria
- [ ] Spec id, used tokens, share-of-ceiling rendered
- [ ] Inline mini-bar shows proportion within the row
- [ ] Tabular-nums for all numeric cells
- [ ] Negative: does NOT show absolute ceiling (only share)

## Constraints
- Single row, list-friendly
- Theme-aware`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 87, a11y: 'aa', themed: true, animated: false },
};

const row = { spec: 'SPEC-019', used: 42_300, sharePct: 70 };
const fmt = (n: number) => n.toLocaleString('en-US');
const fill = row.sharePct >= 95 ? 'bg-danger' : row.sharePct >= 75 ? 'bg-attention' : 'bg-co';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden">
  <div class="grid grid-cols-[auto_1fr_auto] items-center gap-3">
    <span class="font-mono text-[11px] uppercase tracking-widest font-black">{row.spec}</span>
    <div class="relative h-2.5 border-2 border-black bg-paper overflow-hidden" role="meter" aria-valuenow={row.sharePct} aria-valuemin={0} aria-valuemax={100} aria-label={`${row.spec} share of token ceiling`}>
      <div class:list={['h-full', fill]} style={`width: ${row.sharePct}%`}></div>
    </div>
    <span class="font-black tabular-nums text-[13px]">{fmt(row.used)}</span>
  </div>
  <div class="mt-2 flex items-baseline justify-between">
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60">spend · tokens</span>
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60 tabular-nums">{row.sharePct}% of ceiling</span>
  </div>
</div>