{
  "name": "token-meter",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "token-meter.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme } from \"@yugnex/core\";\r\nimport type { HTMLAttributes } from \"react\";\r\n\r\nconst rootClass = css({\r\n  display: \"flex\",\r\n  flexDirection: \"column\",\r\n  gap: theme.space[1.5],\r\n  width: \"100%\",\r\n  fontFamily: theme.fontFamily.sans,\r\n});\r\n\r\nconst headerClass = css({\r\n  display: \"flex\",\r\n  alignItems: \"baseline\",\r\n  justifyContent: \"space-between\",\r\n  gap: theme.space[2],\r\n  fontSize: theme.fontSize.xs,\r\n});\r\n\r\nconst labelClass = css({ color: theme.color.mutedForeground });\r\n\r\nconst valueClass = css({\r\n  fontFamily: theme.fontFamily.mono,\r\n  fontVariantNumeric: \"tabular-nums\",\r\n  color: theme.color.foreground,\r\n});\r\n\r\nconst trackClass = css({\r\n  position: \"relative\",\r\n  height: \"6px\",\r\n  width: \"100%\",\r\n  borderRadius: \"9999px\",\r\n  backgroundColor: theme.color.muted,\r\n  overflow: \"hidden\",\r\n});\r\n\r\nconst fillClass = css({\r\n  height: \"100%\",\r\n  borderRadius: \"9999px\",\r\n  transitionProperty: \"width, background-color\",\r\n  transitionDuration: theme.duration.slow,\r\n  transitionTimingFunction: theme.easing.decelerate,\r\n});\r\n\r\nfunction formatCompact(value: number): string {\r\n  if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(value % 1_000_000 === 0 ? 0 : 1)}M`;\r\n  if (value >= 1_000) return `${(value / 1_000).toFixed(value % 1_000 === 0 ? 0 : 1)}k`;\r\n  return String(value);\r\n}\r\n\r\nexport interface TokenMeterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\r\n  /** Tokens consumed so far. */\r\n  used: number;\r\n  /** Total context window / budget. */\r\n  total: number;\r\n  label?: string;\r\n  /** Fraction (0-1) at which the bar turns warning-colored. */\r\n  warnAt?: number;\r\n  /** Fraction (0-1) at which the bar turns destructive-colored. */\r\n  dangerAt?: number;\r\n  /** Render exact numbers instead of compact (1.2k) form. */\r\n  exact?: boolean;\r\n}\r\n\r\n/**\r\n * A context-window budget meter: how much of the model's window a conversation\r\n * has consumed, shifting from primary to warning to destructive as it fills.\r\n * Exposed as a real progressbar so the ratio is available to assistive tech.\r\n */\r\nexport function TokenMeter({\r\n  used,\r\n  total,\r\n  label = \"Context used\",\r\n  warnAt = 0.75,\r\n  dangerAt = 0.9,\r\n  exact = false,\r\n  className,\r\n  ...props\r\n}: TokenMeterProps) {\r\n  const safeTotal = total > 0 ? total : 1;\r\n  const ratio = Math.min(Math.max(used / safeTotal, 0), 1);\r\n  const percent = Math.round(ratio * 100);\r\n\r\n  const color =\r\n    ratio >= dangerAt ? theme.color.destructive : ratio >= warnAt ? theme.color.warning : theme.color.primary;\r\n\r\n  const format = exact ? (n: number) => n.toLocaleString() : formatCompact;\r\n\r\n  return (\r\n    <div className={className ? `${rootClass} ${className}` : rootClass} {...props}>\r\n      <div className={headerClass}>\r\n        <span className={labelClass}>{label}</span>\r\n        <span className={valueClass}>\r\n          {format(used)} / {format(total)} ({percent}%)\r\n        </span>\r\n      </div>\r\n      <div\r\n        className={trackClass}\r\n        role=\"progressbar\"\r\n        aria-valuenow={used}\r\n        aria-valuemin={0}\r\n        aria-valuemax={total}\r\n        aria-label={label}\r\n        aria-valuetext={`${percent}% of context used`}\r\n      >\r\n        <div className={fillClass} style={{ width: `${percent}%`, backgroundColor: color }} />\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n",
      "type": "registry:component"
    }
  ]
}