{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "budget-meter",
  "title": "BudgetMeter",
  "description": "Spend against a limit. It warns at 80% and flags going over.",
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json",
    "https://creance.pages.dev/r/progress-bar.json"
  ],
  "files": [
    {
      "path": "budget-meter/BudgetMeter.css",
      "content": ".cr-budget {\n  display: grid;\n  gap: var(--cr-space-1);\n  min-width: 160px;\n  font-size: var(--cr-font-size-xs);\n}\n\n.cr-budget__row {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--cr-space-2);\n}\n\n.cr-budget__label {\n  color: var(--cr-color-text-muted);\n}\n\n.cr-budget__value {\n  color: var(--cr-color-text-default);\n  font-variant-numeric: tabular-nums;\n}\n\n.cr-budget[data-tone='warning'] .cr-budget__value { color: var(--cr-color-status-blocked-fg); }\n.cr-budget[data-tone='danger'] .cr-budget__value  { color: var(--cr-color-status-failed-fg); font-weight: var(--cr-font-weight-semibold); }\n",
      "type": "registry:file",
      "target": "@components/creance/budget-meter/BudgetMeter.css"
    },
    {
      "path": "budget-meter/BudgetMeter.tsx",
      "content": "import { ProgressBar } from '@/components/creance/progress-bar/ProgressBar';\nimport { cx } from '@/lib/creance/cx';\nimport './BudgetMeter.css';\n\nexport interface BudgetMeterProps {\n  used: number;\n  limit: number;\n  unit: 'tokens' | 'usd';\n  /** Visible label. Defaults to \"Token budget\" or \"Cost budget\". */\n  label?: string;\n  className?: string;\n}\n\nconst compact = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 });\nconst usd = new Intl.NumberFormat('en', { style: 'currency', currency: 'USD' });\n\nexport function formatBudget(value: number, unit: BudgetMeterProps['unit']): string {\n  return unit === 'usd' ? usd.format(value) : compact.format(value);\n}\n\n/** Warns at 80% of the limit, turns to danger at 100%. */\nexport function BudgetMeter({ used, limit, unit, label, className }: BudgetMeterProps) {\n  const ratio = limit > 0 ? used / limit : 0;\n  const tone = ratio >= 1 ? 'danger' : ratio >= 0.8 ? 'warning' : 'default';\n  const name = label ?? (unit === 'usd' ? 'Cost budget' : 'Token budget');\n  const summary = `${formatBudget(used, unit)} / ${formatBudget(limit, unit)}${unit === 'tokens' ? ' tokens' : ''}`;\n  return (\n    <div className={cx('cr-budget', className)} data-tone={tone}>\n      <div className=\"cr-budget__row\">\n        <span className=\"cr-budget__label\">\n          {name}\n        </span>\n        <span className=\"cr-budget__value\">\n          {summary}\n          {tone === 'danger' && <span className=\"cr-budget__flag\"> · over limit</span>}\n        </span>\n      </div>\n      <ProgressBar label={`${name}: ${summary}`} value={used} max={limit} tone={tone} />\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/budget-meter/BudgetMeter.tsx"
    }
  ],
  "categories": [
    "molecule",
    "agent"
  ],
  "type": "registry:ui"
}