@arbidocs/blocks 0.4.118 → 0.4.120

package/dist/chunk-A7NCSZAP.cjs

@@ -0,0 +1,207 @@
+"use client";
+'use strict';
+
+var ui = require('@arbidocs/react/ui');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/components/UsageMeter.tsx
+function usageMeterState(used, allowance) {
+  if (allowance <= 0) return used > 0 ? "over" : "under";
+  const ratio = used / allowance;
+  return ratio >= 1 ? "over" : ratio >= 0.8 ? "near" : "under";
+}
+var STATE_TONE = {
+  under: "bg-primary",
+  near: "bg-yellow-500",
+  over: "bg-red-500"
+};
+var pctOf = (n, scale) => scale > 0 ? Math.max(0, Math.min(100, n / scale * 100)) : 0;
+var SWATCH = {
+  plan: "bg-muted-foreground/40",
+  topUps: "bg-primary/30",
+  autoRoom: "bg-muted"
+};
+var HATCH = {
+  backgroundImage: "repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 5px)"
+};
+function AllowanceBar({ allowance, label }) {
+  const { used, plan } = allowance;
+  const topUps = Math.max(0, allowance.topUps ?? 0);
+  const room = Math.max(0, allowance.autoRoom ?? 0);
+  const total = plan + topUps;
+  const scale = Math.max(total + room, used, Number.EPSILON);
+  const state = usageMeterState(used, total);
+  const usedPct = total > 0 ? Math.round(used / total * 100) : used > 0 ? 100 : 0;
+  const markPlan = plan > 0 && plan < scale && (topUps > 0 || room > 0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-2 overflow-hidden rounded-full bg-muted", "data-slot": "usage-meter-bar", children: [
+    topUps > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ui.cn("absolute inset-y-0", SWATCH.topUps),
+        style: { left: `${pctOf(plan, scale)}%`, width: `${pctOf(topUps, scale)}%` },
+        "data-slot": "usage-meter-topups"
+      }
+    ),
+    room > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 text-muted-foreground/35",
+        style: { left: `${pctOf(total, scale)}%`, width: `${pctOf(room, scale)}%`, ...HATCH },
+        "data-slot": "usage-meter-auto-room"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ui.cn(
+          "absolute inset-y-0 left-0 rounded-full transition-[width]",
+          STATE_TONE[state]
+        ),
+        style: { width: `${pctOf(Math.min(used, scale), scale)}%` },
+        role: "progressbar",
+        "aria-valuenow": Math.min(usedPct, 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        "data-state": state
+      }
+    ),
+    markPlan && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-foreground/70",
+        style: { left: `${pctOf(plan, scale)}%` },
+        "aria-hidden": true,
+        "data-slot": "usage-meter-plan-mark"
+      }
+    ),
+    room > 0 && total > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 w-px bg-foreground/40",
+        style: { left: `${pctOf(total, scale)}%` },
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+function UsageMeter({
+  icon: Icon,
+  label,
+  value,
+  pct = 0,
+  hint,
+  allowance,
+  legend,
+  details,
+  actions,
+  className,
+  testId
+}) {
+  const clamped = Math.max(0, Math.min(100, pct));
+  const tone = clamped >= 100 ? "bg-red-500" : clamped >= 50 ? "bg-yellow-500" : "bg-primary";
+  const state = allowance ? usageMeterState(allowance.used, allowance.plan + Math.max(0, allowance.topUps ?? 0)) : void 0;
+  const legendItems = legend ? [
+    ["plan", legend.plan],
+    ["topUps", legend.topUps],
+    ["autoRoom", legend.autoRoom]
+  ].filter(([, text]) => !!text) : [];
+  const meter = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: ui.cn(
+            "flex min-w-0 items-center gap-1.5",
+            allowance ? "font-medium text-foreground" : "text-muted-foreground"
+          ),
+          children: [
+            Icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
+              label,
+              hint ? ` (${hint})` : ""
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "shrink-0 font-medium tabular-nums text-foreground",
+          "data-slot": "usage-meter-value",
+          children: value
+        }
+      )
+    ] }),
+    allowance ? /* @__PURE__ */ jsxRuntime.jsx(AllowanceBar, { allowance, label }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: ui.cn("h-full rounded-full transition-[width]", tone),
+        style: { width: `${clamped}%` },
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label
+      }
+    ) }),
+    legendItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        className: "flex flex-wrap gap-x-4 gap-y-1 text-xs tabular-nums text-muted-foreground",
+        "data-slot": "usage-meter-legend",
+        children: legendItems.map(([key, text]) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "li",
+          {
+            className: "flex items-center gap-1.5",
+            "data-slot": `usage-meter-legend-${key}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: ui.cn(
+                    "inline-block size-2 rounded-sm",
+                    SWATCH[key],
+                    key === "autoRoom" && "text-muted-foreground/60"
+                  ),
+                  style: key === "autoRoom" ? HATCH : void 0,
+                  "aria-hidden": true
+                }
+              ),
+              text
+            ]
+          },
+          key
+        ))
+      }
+    ),
+    details && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1 text-xs text-muted-foreground", children: details })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: ui.cn(
+        actions ? "flex flex-wrap items-start gap-x-6 gap-y-3" : "space-y-1.5",
+        className
+      ),
+      "data-testid": testId,
+      "data-state": state,
+      children: [
+        meter,
+        actions && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "flex shrink-0 flex-col items-stretch gap-2 sm:w-64",
+            "data-slot": "usage-meter-actions",
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.UsageMeter = UsageMeter;
+exports.usageMeterState = usageMeterState;
+//# sourceMappingURL=chunk-A7NCSZAP.cjs.map
+//# sourceMappingURL=chunk-A7NCSZAP.cjs.map

package/dist/chunk-A7NCSZAP.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/UsageMeter.tsx"],"names":["jsxs","jsx","cn"],"mappings":"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","file":"chunk-A7NCSZAP.cjs","sourcesContent":["import type { ReactNode } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\n/**\n * What an allowance is made of, in the meter's own unit (£ of AI usage, GB, users): what was used, the plan's part\n * of the allowance, the top-ups on top of it, and how much more automatic top-ups may still add before a usage cap\n * (or budget) stops them.\n */\nexport interface UsageMeterAllowance {\n  used: number\n  /** The plan's part of the allowance (marked on the bar when top-ups or automatic room follow it). */\n  plan: number\n  /** Top-ups on top of the plan: the allowance now is `plan + topUps`. */\n  topUps?: number\n  /**\n   * Room automatic top-ups may still add before the cap stops them (drawn hatched after the allowance).\n   * `null` = no limit (nothing drawn: the room is unbounded); omitted = not applicable.\n   */\n  autoRoom?: number | null\n}\n\n/** Pressure on an allowance: under 80% used, 80% to under 100%, or at / over it. */\nexport type UsageMeterState = 'under' | 'near' | 'over'\n\n/** The allowance meter's pressure state for `used` of `allowance`. */\nexport function usageMeterState(used: number, allowance: number): UsageMeterState {\n  if (allowance <= 0) return used > 0 ? 'over' : 'under'\n  const ratio = used / allowance\n  return ratio >= 1 ? 'over' : ratio >= 0.8 ? 'near' : 'under'\n}\n\nconst STATE_TONE: Record<UsageMeterState, string> = {\n  under: 'bg-primary',\n  near: 'bg-yellow-500',\n  over: 'bg-red-500',\n}\n\nconst pctOf = (n: number, scale: number) =>\n  scale > 0 ? Math.max(0, Math.min(100, (n / scale) * 100)) : 0\n\n/** Legend swatches, matching the bar's segments. */\nconst SWATCH = {\n  plan: 'bg-muted-foreground/40',\n  topUps: 'bg-primary/30',\n  autoRoom: 'bg-muted',\n}\n\nconst HATCH = {\n  backgroundImage: 'repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 5px)',\n} as const\n\n/** The segmented bar of an allowance meter: used, the plan mark, top-ups, and the automatic room. */\nfunction AllowanceBar({ allowance, label }: { allowance: UsageMeterAllowance; label: string }) {\n  const { used, plan } = allowance\n  const topUps = Math.max(0, allowance.topUps ?? 0)\n  const room = Math.max(0, allowance.autoRoom ?? 0)\n  const total = plan + topUps\n  const scale = Math.max(total + room, used, Number.EPSILON)\n  const state = usageMeterState(used, total)\n  const usedPct = total > 0 ? Math.round((used / total) * 100) : used > 0 ? 100 : 0\n  const markPlan = plan > 0 && plan < scale && (topUps > 0 || room > 0)\n  return (\n    <div className=\"relative h-2 overflow-hidden rounded-full bg-muted\" data-slot=\"usage-meter-bar\">\n      {topUps > 0 && (\n        <div\n          className={cn('absolute inset-y-0', SWATCH.topUps)}\n          style={{ left: `${pctOf(plan, scale)}%`, width: `${pctOf(topUps, scale)}%` }}\n          data-slot=\"usage-meter-topups\"\n        />\n      )}\n      {room > 0 && (\n        <div\n          className=\"absolute inset-y-0 text-muted-foreground/35\"\n          style={{ left: `${pctOf(total, scale)}%`, width: `${pctOf(room, scale)}%`, ...HATCH }}\n          data-slot=\"usage-meter-auto-room\"\n        />\n      )}\n      <div\n        className={cn(\n          'absolute inset-y-0 left-0 rounded-full transition-[width]',\n          STATE_TONE[state]\n        )}\n        style={{ width: `${pctOf(Math.min(used, scale), scale)}%` }}\n        role=\"progressbar\"\n        aria-valuenow={Math.min(usedPct, 100)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={label}\n        data-state={state}\n      />\n      {markPlan && (\n        <div\n          className=\"absolute inset-y-0 w-0.5 -translate-x-1/2 bg-foreground/70\"\n          style={{ left: `${pctOf(plan, scale)}%` }}\n          aria-hidden\n          data-slot=\"usage-meter-plan-mark\"\n        />\n      )}\n      {room > 0 && total > 0 && (\n        <div\n          className=\"absolute inset-y-0 w-px bg-foreground/40\"\n          style={{ left: `${pctOf(total, scale)}%` }}\n          aria-hidden\n        />\n      )}\n    </div>\n  )\n}\n\n/**\n * One labelled quota meter: icon + label on the left, used-of-limit on the right, a thin bar underneath.\n *\n * Simple mode (`pct`): the bar's tone follows pressure with the shared green → yellow → red gradation — green while\n * there's room, yellow past the halfway mark, red at the limit — so a stack of meters reads at a glance which quota\n * is the one to think about.\n *\n * Allowance mode (`allowance`): the bar spans the allowance plus what automatic top-ups may still add; it marks the\n * plan's part, shades the top-ups, hatches the automatic room, and fills what was used (red at the allowance, yellow\n * from 80%). `legend` names the segments; `details` (next period, cap) sit under the bar and `actions` (+ / −) beside\n * it. The meter's `data-state` is `under` / `near` / `over`.\n */\nexport function UsageMeter({\n  icon: Icon,\n  label,\n  value,\n  pct = 0,\n  hint,\n  allowance,\n  legend,\n  details,\n  actions,\n  className,\n  testId,\n}: {\n  icon?: LucideIcon\n  label: string\n  /** Formatted used-of-limit text, e.g. \"1,200 / 25,000\" or \"40 / 500 MB\". */\n  value: string\n  /** Simple mode: fill percentage, 0–100 (values are clamped). Ignored with `allowance`. */\n  pct?: number\n  /** Inline parenthetical after the label, e.g. \"resets May 31, 2025\" —\n   *  same font as the label, so the meter never grows an extra row. */\n  hint?: string\n  /** Allowance mode: the allowance's parts, in the meter's unit. */\n  allowance?: UsageMeterAllowance\n  /** Formatted legend entries for the allowance's segments (each shown only when set). */\n  legend?: { plan?: string; topUps?: string; autoRoom?: string }\n  details?: ReactNode\n  actions?: ReactNode\n  className?: string\n  testId?: string\n}) {\n  const clamped = Math.max(0, Math.min(100, pct))\n  // Shared green → yellow → red gradation (same thresholds as the project-card\n  // quota badges): green with room, yellow past the halfway mark, red at limit.\n  const tone = clamped >= 100 ? 'bg-red-500' : clamped >= 50 ? 'bg-yellow-500' : 'bg-primary'\n  const state = allowance\n    ? usageMeterState(allowance.used, allowance.plan + Math.max(0, allowance.topUps ?? 0))\n    : undefined\n  const legendItems = legend\n    ? (\n        [\n          ['plan', legend.plan],\n          ['topUps', legend.topUps],\n          ['autoRoom', legend.autoRoom],\n        ] as const\n      ).filter(([, text]) => !!text)\n    : []\n\n  const meter = (\n    <div className=\"min-w-0 flex-1 space-y-1.5\">\n      <div className=\"flex items-center justify-between gap-3 text-sm\">\n        <span\n          className={cn(\n            'flex min-w-0 items-center gap-1.5',\n            allowance ? 'font-medium text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {Icon && <Icon className=\"size-3.5 shrink-0\" />}\n          <span className=\"truncate\">\n            {label}\n            {hint ? ` (${hint})` : ''}\n          </span>\n        </span>\n        <span\n          className=\"shrink-0 font-medium tabular-nums text-foreground\"\n          data-slot=\"usage-meter-value\"\n        >\n          {value}\n        </span>\n      </div>\n      {allowance ? (\n        <AllowanceBar allowance={allowance} label={label} />\n      ) : (\n        <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n          <div\n            className={cn('h-full rounded-full transition-[width]', tone)}\n            style={{ width: `${clamped}%` }}\n            role=\"progressbar\"\n            aria-valuenow={clamped}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-label={label}\n          />\n        </div>\n      )}\n      {legendItems.length > 0 && (\n        <ul\n          className=\"flex flex-wrap gap-x-4 gap-y-1 text-xs tabular-nums text-muted-foreground\"\n          data-slot=\"usage-meter-legend\"\n        >\n          {legendItems.map(([key, text]) => (\n            <li\n              key={key}\n              className=\"flex items-center gap-1.5\"\n              data-slot={`usage-meter-legend-${key}`}\n            >\n              <span\n                className={cn(\n                  'inline-block size-2 rounded-sm',\n                  SWATCH[key],\n                  key === 'autoRoom' && 'text-muted-foreground/60'\n                )}\n                style={key === 'autoRoom' ? HATCH : undefined}\n                aria-hidden\n              />\n              {text}\n            </li>\n          ))}\n        </ul>\n      )}\n      {details && <div className=\"space-y-1 text-xs text-muted-foreground\">{details}</div>}\n    </div>\n  )\n\n  return (\n    <div\n      className={cn(\n        actions ? 'flex flex-wrap items-start gap-x-6 gap-y-3' : 'space-y-1.5',\n        className\n      )}\n      data-testid={testId}\n      data-state={state}\n    >\n      {meter}\n      {actions && (\n        <div\n          className=\"flex shrink-0 flex-col items-stretch gap-2 sm:w-64\"\n          data-slot=\"usage-meter-actions\"\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/chunk-IBZJYCYM.js

@@ -0,0 +1,204 @@
+"use client";
+import { cn } from '@arbidocs/react/ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/UsageMeter.tsx
+function usageMeterState(used, allowance) {
+  if (allowance <= 0) return used > 0 ? "over" : "under";
+  const ratio = used / allowance;
+  return ratio >= 1 ? "over" : ratio >= 0.8 ? "near" : "under";
+}
+var STATE_TONE = {
+  under: "bg-primary",
+  near: "bg-yellow-500",
+  over: "bg-red-500"
+};
+var pctOf = (n, scale) => scale > 0 ? Math.max(0, Math.min(100, n / scale * 100)) : 0;
+var SWATCH = {
+  plan: "bg-muted-foreground/40",
+  topUps: "bg-primary/30",
+  autoRoom: "bg-muted"
+};
+var HATCH = {
+  backgroundImage: "repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 5px)"
+};
+function AllowanceBar({ allowance, label }) {
+  const { used, plan } = allowance;
+  const topUps = Math.max(0, allowance.topUps ?? 0);
+  const room = Math.max(0, allowance.autoRoom ?? 0);
+  const total = plan + topUps;
+  const scale = Math.max(total + room, used, Number.EPSILON);
+  const state = usageMeterState(used, total);
+  const usedPct = total > 0 ? Math.round(used / total * 100) : used > 0 ? 100 : 0;
+  const markPlan = plan > 0 && plan < scale && (topUps > 0 || room > 0);
+  return /* @__PURE__ */ jsxs("div", { className: "relative h-2 overflow-hidden rounded-full bg-muted", "data-slot": "usage-meter-bar", children: [
+    topUps > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("absolute inset-y-0", SWATCH.topUps),
+        style: { left: `${pctOf(plan, scale)}%`, width: `${pctOf(topUps, scale)}%` },
+        "data-slot": "usage-meter-topups"
+      }
+    ),
+    room > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 text-muted-foreground/35",
+        style: { left: `${pctOf(total, scale)}%`, width: `${pctOf(room, scale)}%`, ...HATCH },
+        "data-slot": "usage-meter-auto-room"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "absolute inset-y-0 left-0 rounded-full transition-[width]",
+          STATE_TONE[state]
+        ),
+        style: { width: `${pctOf(Math.min(used, scale), scale)}%` },
+        role: "progressbar",
+        "aria-valuenow": Math.min(usedPct, 100),
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label,
+        "data-state": state
+      }
+    ),
+    markPlan && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 w-0.5 -translate-x-1/2 bg-foreground/70",
+        style: { left: `${pctOf(plan, scale)}%` },
+        "aria-hidden": true,
+        "data-slot": "usage-meter-plan-mark"
+      }
+    ),
+    room > 0 && total > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-y-0 w-px bg-foreground/40",
+        style: { left: `${pctOf(total, scale)}%` },
+        "aria-hidden": true
+      }
+    )
+  ] });
+}
+function UsageMeter({
+  icon: Icon,
+  label,
+  value,
+  pct = 0,
+  hint,
+  allowance,
+  legend,
+  details,
+  actions,
+  className,
+  testId
+}) {
+  const clamped = Math.max(0, Math.min(100, pct));
+  const tone = clamped >= 100 ? "bg-red-500" : clamped >= 50 ? "bg-yellow-500" : "bg-primary";
+  const state = allowance ? usageMeterState(allowance.used, allowance.plan + Math.max(0, allowance.topUps ?? 0)) : void 0;
+  const legendItems = legend ? [
+    ["plan", legend.plan],
+    ["topUps", legend.topUps],
+    ["autoRoom", legend.autoRoom]
+  ].filter(([, text]) => !!text) : [];
+  const meter = /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1.5", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm", children: [
+      /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: cn(
+            "flex min-w-0 items-center gap-1.5",
+            allowance ? "font-medium text-foreground" : "text-muted-foreground"
+          ),
+          children: [
+            Icon && /* @__PURE__ */ jsx(Icon, { className: "size-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+              label,
+              hint ? ` (${hint})` : ""
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "shrink-0 font-medium tabular-nums text-foreground",
+          "data-slot": "usage-meter-value",
+          children: value
+        }
+      )
+    ] }),
+    allowance ? /* @__PURE__ */ jsx(AllowanceBar, { allowance, label }) : /* @__PURE__ */ jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("h-full rounded-full transition-[width]", tone),
+        style: { width: `${clamped}%` },
+        role: "progressbar",
+        "aria-valuenow": clamped,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": label
+      }
+    ) }),
+    legendItems.length > 0 && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        className: "flex flex-wrap gap-x-4 gap-y-1 text-xs tabular-nums text-muted-foreground",
+        "data-slot": "usage-meter-legend",
+        children: legendItems.map(([key, text]) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-center gap-1.5",
+            "data-slot": `usage-meter-legend-${key}`,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "inline-block size-2 rounded-sm",
+                    SWATCH[key],
+                    key === "autoRoom" && "text-muted-foreground/60"
+                  ),
+                  style: key === "autoRoom" ? HATCH : void 0,
+                  "aria-hidden": true
+                }
+              ),
+              text
+            ]
+          },
+          key
+        ))
+      }
+    ),
+    details && /* @__PURE__ */ jsx("div", { className: "space-y-1 text-xs text-muted-foreground", children: details })
+  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        actions ? "flex flex-wrap items-start gap-x-6 gap-y-3" : "space-y-1.5",
+        className
+      ),
+      "data-testid": testId,
+      "data-state": state,
+      children: [
+        meter,
+        actions && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex shrink-0 flex-col items-stretch gap-2 sm:w-64",
+            "data-slot": "usage-meter-actions",
+            children: actions
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { UsageMeter, usageMeterState };
+//# sourceMappingURL=chunk-IBZJYCYM.js.map
+//# sourceMappingURL=chunk-IBZJYCYM.js.map

package/dist/chunk-IBZJYCYM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/UsageMeter.tsx"],"names":[],"mappings":";;;;AA0BO,SAAS,eAAA,CAAgB,MAAc,SAAA,EAAoC;AAChF,EAAA,IAAI,SAAA,IAAa,CAAA,EAAG,OAAO,IAAA,GAAO,IAAI,MAAA,GAAS,OAAA;AAC/C,EAAA,MAAM,QAAQ,IAAA,GAAO,SAAA;AACrB,EAAA,OAAO,KAAA,IAAS,CAAA,GAAI,MAAA,GAAS,KAAA,IAAS,MAAM,MAAA,GAAS,OAAA;AACvD;AAEA,IAAM,UAAA,GAA8C;AAAA,EAClD,KAAA,EAAO,YAAA;AAAA,EACP,IAAA,EAAM,eAAA;AAAA,EACN,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,QAAQ,CAAC,CAAA,EAAW,KAAA,KACxB,KAAA,GAAQ,IAAI,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,IAAA,CAAK,IAAI,GAAA,EAAM,CAAA,GAAI,KAAA,GAAS,GAAG,CAAC,CAAA,GAAI,CAAA;AAG9D,IAAM,MAAA,GAAS;AAAA,EACb,IAAA,EAAM,wBAAA;AAAA,EACN,MAAA,EAAQ,eAAA;AAAA,EACR,QAAA,EAAU;AACZ,CAAA;AAEA,IAAM,KAAA,GAAQ;AAAA,EACZ,eAAA,EAAiB;AACnB,CAAA;AAGA,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,KAAA,EAAM,EAAsD;AAC7F,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAK,GAAI,SAAA;AACvB,EAAA,MAAM,SAAS,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,SAAA,CAAU,UAAU,CAAC,CAAA;AAChD,EAAA,MAAM,OAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,SAAA,CAAU,YAAY,CAAC,CAAA;AAChD,EAAA,MAAM,QAAQ,IAAA,GAAO,MAAA;AACrB,EAAA,MAAM,QAAQ,IAAA,CAAK,GAAA,CAAI,QAAQ,IAAA,EAAM,IAAA,EAAM,OAAO,OAAO,CAAA;AACzD,EAAA,MAAM,KAAA,GAAQ,eAAA,CAAgB,IAAA,EAAM,KAAK,CAAA;AACzC,EAAA,MAAM,OAAA,GAAU,KAAA,GAAQ,CAAA,GAAI,IAAA,CAAK,KAAA,CAAO,IAAA,GAAO,KAAA,GAAS,GAAG,CAAA,GAAI,IAAA,GAAO,CAAA,GAAI,GAAA,GAAM,CAAA;AAChF,EAAA,MAAM,WAAW,IAAA,GAAO,CAAA,IAAK,OAAO,KAAA,KAAU,MAAA,GAAS,KAAK,IAAA,GAAO,CAAA,CAAA;AACnE,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,oDAAA,EAAqD,aAAU,iBAAA,EAC3E,QAAA,EAAA;AAAA,IAAA,MAAA,GAAS,CAAA,oBACR,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,oBAAA,EAAsB,MAAA,CAAO,MAAM,CAAA;AAAA,QACjD,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,MAAM,IAAA,EAAM,KAAK,CAAC,CAAA,CAAA,CAAA,EAAK,OAAO,CAAA,EAAG,KAAA,CAAM,MAAA,EAAQ,KAAK,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,QAC3E,WAAA,EAAU;AAAA;AAAA,KACZ;AAAA,IAED,OAAO,CAAA,oBACN,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,6CAAA;AAAA,QACV,OAAO,EAAE,IAAA,EAAM,CAAA,EAAG,KAAA,CAAM,OAAO,KAAK,CAAC,CAAA,CAAA,CAAA,EAAK,KAAA,EAAO,GAAG,KAAA,CAAM,IAAA,EAAM,KAAK,CAAC,CAAA,CAAA,CAAA,EAAK,GAAG,KAAA,EAAM;AAAA,QACpF,WAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBAEF,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,2DAAA;AAAA,UACA,WAAW,KAAK;AAAA,SAClB;AAAA,QACA,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,KAAA,CAAM,IAAA,CAAK,GAAA,CAAI,IAAA,EAAM,KAAK,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,QAC1D,IAAA,EAAK,aAAA;AAAA,QACL,eAAA,EAAe,IAAA,CAAK,GAAA,CAAI,OAAA,EAAS,GAAG,CAAA;AAAA,QACpC,eAAA,EAAe,CAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,YAAA,EAAY,KAAA;AAAA,QACZ,YAAA,EAAY;AAAA;AAAA,KACd;AAAA,IACC,QAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,4DAAA;AAAA,QACV,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,MAAM,IAAA,EAAM,KAAK,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,QACxC,aAAA,EAAW,IAAA;AAAA,QACX,WAAA,EAAU;AAAA;AAAA,KACZ;AAAA,IAED,IAAA,GAAO,CAAA,IAAK,KAAA,GAAQ,CAAA,oBACnB,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,0CAAA;AAAA,QACV,KAAA,EAAO,EAAE,IAAA,EAAM,CAAA,EAAG,MAAM,KAAA,EAAO,KAAK,CAAC,CAAA,CAAA,CAAA,EAAI;AAAA,QACzC,aAAA,EAAW;AAAA;AAAA;AACb,GAAA,EAEJ,CAAA;AAEJ;AAcO,SAAS,UAAA,CAAW;AAAA,EACzB,IAAA,EAAM,IAAA;AAAA,EACN,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAA,GAAM,CAAA;AAAA,EACN,IAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAkBG;AACD,EAAA,MAAM,OAAA,GAAU,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,GAAA,CAAI,GAAA,EAAK,GAAG,CAAC,CAAA;AAG9C,EAAA,MAAM,OAAO,OAAA,IAAW,GAAA,GAAM,YAAA,GAAe,OAAA,IAAW,KAAK,eAAA,GAAkB,YAAA;AAC/E,EAAA,MAAM,KAAA,GAAQ,SAAA,GACV,eAAA,CAAgB,SAAA,CAAU,MAAM,SAAA,CAAU,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,CAAA,EAAG,SAAA,CAAU,MAAA,IAAU,CAAC,CAAC,CAAA,GACnF,MAAA;AACJ,EAAA,MAAM,cAAc,MAAA,GAEd;AAAA,IACE,CAAC,MAAA,EAAQ,MAAA,CAAO,IAAI,CAAA;AAAA,IACpB,CAAC,QAAA,EAAU,MAAA,CAAO,MAAM,CAAA;AAAA,IACxB,CAAC,UAAA,EAAY,MAAA,CAAO,QAAQ;AAAA,GAC9B,CACA,MAAA,CAAO,CAAC,GAAG,IAAI,CAAA,KAAM,CAAC,CAAC,IAAI,CAAA,GAC7B,EAAC;AAEL,EAAA,MAAM,KAAA,mBACJ,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACb,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,iDAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,mCAAA;AAAA,YACA,YAAY,6BAAA,GAAgC;AAAA,WAC9C;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,IAAA,oBAAQ,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAU,mBAAA,EAAoB,CAAA;AAAA,4BAC7C,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EACb,QAAA,EAAA;AAAA,cAAA,KAAA;AAAA,cACA,IAAA,GAAO,CAAA,EAAA,EAAK,IAAI,CAAA,CAAA,CAAA,GAAM;AAAA,aAAA,EACzB;AAAA;AAAA;AAAA,OACF;AAAA,sBACA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAU,mDAAA;AAAA,UACV,WAAA,EAAU,mBAAA;AAAA,UAET,QAAA,EAAA;AAAA;AAAA;AACH,KAAA,EACF,CAAA;AAAA,IACC,SAAA,uBACE,YAAA,EAAA,EAAa,SAAA,EAAsB,OAAc,CAAA,mBAElD,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA,CAAG,wCAAA,EAA0C,IAAI,CAAA;AAAA,QAC5D,KAAA,EAAO,EAAE,KAAA,EAAO,CAAA,EAAG,OAAO,CAAA,CAAA,CAAA,EAAI;AAAA,QAC9B,IAAA,EAAK,aAAA;AAAA,QACL,eAAA,EAAe,OAAA;AAAA,QACf,eAAA,EAAe,CAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,YAAA,EAAY;AAAA;AAAA,KACd,EACF,CAAA;AAAA,IAED,WAAA,CAAY,SAAS,CAAA,oBACpB,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAU,2EAAA;AAAA,QACV,WAAA,EAAU,oBAAA;AAAA,QAET,sBAAY,GAAA,CAAI,CAAC,CAAC,GAAA,EAAK,IAAI,CAAA,qBAC1B,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YAEC,SAAA,EAAU,2BAAA;AAAA,YACV,WAAA,EAAW,sBAAsB,GAAG,CAAA,CAAA;AAAA,YAEpC,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,SAAA,EAAW,EAAA;AAAA,oBACT,gCAAA;AAAA,oBACA,OAAO,GAAG,CAAA;AAAA,oBACV,QAAQ,UAAA,IAAc;AAAA,mBACxB;AAAA,kBACA,KAAA,EAAO,GAAA,KAAQ,UAAA,GAAa,KAAA,GAAQ,MAAA;AAAA,kBACpC,aAAA,EAAW;AAAA;AAAA,eACb;AAAA,cACC;AAAA;AAAA,WAAA;AAAA,UAbI;AAAA,SAeR;AAAA;AAAA,KACH;AAAA,IAED,OAAA,oBAAW,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAA2C,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAChF,CAAA;AAGF,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,UAAU,4CAAA,GAA+C,aAAA;AAAA,QACzD;AAAA,OACF;AAAA,MACA,aAAA,EAAa,MAAA;AAAA,MACb,YAAA,EAAY,KAAA;AAAA,MAEX,QAAA,EAAA;AAAA,QAAA,KAAA;AAAA,QACA,OAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,oDAAA;AAAA,YACV,WAAA,EAAU,qBAAA;AAAA,YAET,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ","file":"chunk-IBZJYCYM.js","sourcesContent":["import type { ReactNode } from 'react'\nimport type { LucideIcon } from 'lucide-react'\nimport { cn } from '@arbidocs/react/ui'\n\n/**\n * What an allowance is made of, in the meter's own unit (£ of AI usage, GB, users): what was used, the plan's part\n * of the allowance, the top-ups on top of it, and how much more automatic top-ups may still add before a usage cap\n * (or budget) stops them.\n */\nexport interface UsageMeterAllowance {\n  used: number\n  /** The plan's part of the allowance (marked on the bar when top-ups or automatic room follow it). */\n  plan: number\n  /** Top-ups on top of the plan: the allowance now is `plan + topUps`. */\n  topUps?: number\n  /**\n   * Room automatic top-ups may still add before the cap stops them (drawn hatched after the allowance).\n   * `null` = no limit (nothing drawn: the room is unbounded); omitted = not applicable.\n   */\n  autoRoom?: number | null\n}\n\n/** Pressure on an allowance: under 80% used, 80% to under 100%, or at / over it. */\nexport type UsageMeterState = 'under' | 'near' | 'over'\n\n/** The allowance meter's pressure state for `used` of `allowance`. */\nexport function usageMeterState(used: number, allowance: number): UsageMeterState {\n  if (allowance <= 0) return used > 0 ? 'over' : 'under'\n  const ratio = used / allowance\n  return ratio >= 1 ? 'over' : ratio >= 0.8 ? 'near' : 'under'\n}\n\nconst STATE_TONE: Record<UsageMeterState, string> = {\n  under: 'bg-primary',\n  near: 'bg-yellow-500',\n  over: 'bg-red-500',\n}\n\nconst pctOf = (n: number, scale: number) =>\n  scale > 0 ? Math.max(0, Math.min(100, (n / scale) * 100)) : 0\n\n/** Legend swatches, matching the bar's segments. */\nconst SWATCH = {\n  plan: 'bg-muted-foreground/40',\n  topUps: 'bg-primary/30',\n  autoRoom: 'bg-muted',\n}\n\nconst HATCH = {\n  backgroundImage: 'repeating-linear-gradient(135deg, currentColor 0 1.5px, transparent 1.5px 5px)',\n} as const\n\n/** The segmented bar of an allowance meter: used, the plan mark, top-ups, and the automatic room. */\nfunction AllowanceBar({ allowance, label }: { allowance: UsageMeterAllowance; label: string }) {\n  const { used, plan } = allowance\n  const topUps = Math.max(0, allowance.topUps ?? 0)\n  const room = Math.max(0, allowance.autoRoom ?? 0)\n  const total = plan + topUps\n  const scale = Math.max(total + room, used, Number.EPSILON)\n  const state = usageMeterState(used, total)\n  const usedPct = total > 0 ? Math.round((used / total) * 100) : used > 0 ? 100 : 0\n  const markPlan = plan > 0 && plan < scale && (topUps > 0 || room > 0)\n  return (\n    <div className=\"relative h-2 overflow-hidden rounded-full bg-muted\" data-slot=\"usage-meter-bar\">\n      {topUps > 0 && (\n        <div\n          className={cn('absolute inset-y-0', SWATCH.topUps)}\n          style={{ left: `${pctOf(plan, scale)}%`, width: `${pctOf(topUps, scale)}%` }}\n          data-slot=\"usage-meter-topups\"\n        />\n      )}\n      {room > 0 && (\n        <div\n          className=\"absolute inset-y-0 text-muted-foreground/35\"\n          style={{ left: `${pctOf(total, scale)}%`, width: `${pctOf(room, scale)}%`, ...HATCH }}\n          data-slot=\"usage-meter-auto-room\"\n        />\n      )}\n      <div\n        className={cn(\n          'absolute inset-y-0 left-0 rounded-full transition-[width]',\n          STATE_TONE[state]\n        )}\n        style={{ width: `${pctOf(Math.min(used, scale), scale)}%` }}\n        role=\"progressbar\"\n        aria-valuenow={Math.min(usedPct, 100)}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={label}\n        data-state={state}\n      />\n      {markPlan && (\n        <div\n          className=\"absolute inset-y-0 w-0.5 -translate-x-1/2 bg-foreground/70\"\n          style={{ left: `${pctOf(plan, scale)}%` }}\n          aria-hidden\n          data-slot=\"usage-meter-plan-mark\"\n        />\n      )}\n      {room > 0 && total > 0 && (\n        <div\n          className=\"absolute inset-y-0 w-px bg-foreground/40\"\n          style={{ left: `${pctOf(total, scale)}%` }}\n          aria-hidden\n        />\n      )}\n    </div>\n  )\n}\n\n/**\n * One labelled quota meter: icon + label on the left, used-of-limit on the right, a thin bar underneath.\n *\n * Simple mode (`pct`): the bar's tone follows pressure with the shared green → yellow → red gradation — green while\n * there's room, yellow past the halfway mark, red at the limit — so a stack of meters reads at a glance which quota\n * is the one to think about.\n *\n * Allowance mode (`allowance`): the bar spans the allowance plus what automatic top-ups may still add; it marks the\n * plan's part, shades the top-ups, hatches the automatic room, and fills what was used (red at the allowance, yellow\n * from 80%). `legend` names the segments; `details` (next period, cap) sit under the bar and `actions` (+ / −) beside\n * it. The meter's `data-state` is `under` / `near` / `over`.\n */\nexport function UsageMeter({\n  icon: Icon,\n  label,\n  value,\n  pct = 0,\n  hint,\n  allowance,\n  legend,\n  details,\n  actions,\n  className,\n  testId,\n}: {\n  icon?: LucideIcon\n  label: string\n  /** Formatted used-of-limit text, e.g. \"1,200 / 25,000\" or \"40 / 500 MB\". */\n  value: string\n  /** Simple mode: fill percentage, 0–100 (values are clamped). Ignored with `allowance`. */\n  pct?: number\n  /** Inline parenthetical after the label, e.g. \"resets May 31, 2025\" —\n   *  same font as the label, so the meter never grows an extra row. */\n  hint?: string\n  /** Allowance mode: the allowance's parts, in the meter's unit. */\n  allowance?: UsageMeterAllowance\n  /** Formatted legend entries for the allowance's segments (each shown only when set). */\n  legend?: { plan?: string; topUps?: string; autoRoom?: string }\n  details?: ReactNode\n  actions?: ReactNode\n  className?: string\n  testId?: string\n}) {\n  const clamped = Math.max(0, Math.min(100, pct))\n  // Shared green → yellow → red gradation (same thresholds as the project-card\n  // quota badges): green with room, yellow past the halfway mark, red at limit.\n  const tone = clamped >= 100 ? 'bg-red-500' : clamped >= 50 ? 'bg-yellow-500' : 'bg-primary'\n  const state = allowance\n    ? usageMeterState(allowance.used, allowance.plan + Math.max(0, allowance.topUps ?? 0))\n    : undefined\n  const legendItems = legend\n    ? (\n        [\n          ['plan', legend.plan],\n          ['topUps', legend.topUps],\n          ['autoRoom', legend.autoRoom],\n        ] as const\n      ).filter(([, text]) => !!text)\n    : []\n\n  const meter = (\n    <div className=\"min-w-0 flex-1 space-y-1.5\">\n      <div className=\"flex items-center justify-between gap-3 text-sm\">\n        <span\n          className={cn(\n            'flex min-w-0 items-center gap-1.5',\n            allowance ? 'font-medium text-foreground' : 'text-muted-foreground'\n          )}\n        >\n          {Icon && <Icon className=\"size-3.5 shrink-0\" />}\n          <span className=\"truncate\">\n            {label}\n            {hint ? ` (${hint})` : ''}\n          </span>\n        </span>\n        <span\n          className=\"shrink-0 font-medium tabular-nums text-foreground\"\n          data-slot=\"usage-meter-value\"\n        >\n          {value}\n        </span>\n      </div>\n      {allowance ? (\n        <AllowanceBar allowance={allowance} label={label} />\n      ) : (\n        <div className=\"h-1.5 overflow-hidden rounded-full bg-muted\">\n          <div\n            className={cn('h-full rounded-full transition-[width]', tone)}\n            style={{ width: `${clamped}%` }}\n            role=\"progressbar\"\n            aria-valuenow={clamped}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            aria-label={label}\n          />\n        </div>\n      )}\n      {legendItems.length > 0 && (\n        <ul\n          className=\"flex flex-wrap gap-x-4 gap-y-1 text-xs tabular-nums text-muted-foreground\"\n          data-slot=\"usage-meter-legend\"\n        >\n          {legendItems.map(([key, text]) => (\n            <li\n              key={key}\n              className=\"flex items-center gap-1.5\"\n              data-slot={`usage-meter-legend-${key}`}\n            >\n              <span\n                className={cn(\n                  'inline-block size-2 rounded-sm',\n                  SWATCH[key],\n                  key === 'autoRoom' && 'text-muted-foreground/60'\n                )}\n                style={key === 'autoRoom' ? HATCH : undefined}\n                aria-hidden\n              />\n              {text}\n            </li>\n          ))}\n        </ul>\n      )}\n      {details && <div className=\"space-y-1 text-xs text-muted-foreground\">{details}</div>}\n    </div>\n  )\n\n  return (\n    <div\n      className={cn(\n        actions ? 'flex flex-wrap items-start gap-x-6 gap-y-3' : 'space-y-1.5',\n        className\n      )}\n      data-testid={testId}\n      data-state={state}\n    >\n      {meter}\n      {actions && (\n        <div\n          className=\"flex shrink-0 flex-col items-stretch gap-2 sm:w-64\"\n          data-slot=\"usage-meter-actions\"\n        >\n          {actions}\n        </div>\n      )}\n    </div>\n  )\n}\n"]}

package/dist/components/UsageMeter.d.ts

@@ -1,21 +1,58 @@
+import type { ReactNode } from 'react';
 import type { LucideIcon } from 'lucide-react';
 /**
- * One labelled quota meter: icon + label on the left, used-of-limit on the
- * right, a thin bar underneath. The bar's tone follows pressure with the shared
- * green → yellow → red gradation — green while there's room, yellow past the
- * halfway mark, red at the limit — so a stack of meters reads at a glance which
- * quota is the one to think about.
+ * What an allowance is made of, in the meter's own unit (£ of AI usage, GB, users): what was used, the plan's part
+ * of the allowance, the top-ups on top of it, and how much more automatic top-ups may still add before a usage cap
+ * (or budget) stops them.
  */
-export declare function UsageMeter({ icon: Icon, label, value, pct, hint, className, testId, }: {
+export interface UsageMeterAllowance {
+    used: number;
+    /** The plan's part of the allowance (marked on the bar when top-ups or automatic room follow it). */
+    plan: number;
+    /** Top-ups on top of the plan: the allowance now is `plan + topUps`. */
+    topUps?: number;
+    /**
+     * Room automatic top-ups may still add before the cap stops them (drawn hatched after the allowance).
+     * `null` = no limit (nothing drawn: the room is unbounded); omitted = not applicable.
+     */
+    autoRoom?: number | null;
+}
+/** Pressure on an allowance: under 80% used, 80% to under 100%, or at / over it. */
+export type UsageMeterState = 'under' | 'near' | 'over';
+/** The allowance meter's pressure state for `used` of `allowance`. */
+export declare function usageMeterState(used: number, allowance: number): UsageMeterState;
+/**
+ * One labelled quota meter: icon + label on the left, used-of-limit on the right, a thin bar underneath.
+ *
+ * Simple mode (`pct`): the bar's tone follows pressure with the shared green → yellow → red gradation — green while
+ * there's room, yellow past the halfway mark, red at the limit — so a stack of meters reads at a glance which quota
+ * is the one to think about.
+ *
+ * Allowance mode (`allowance`): the bar spans the allowance plus what automatic top-ups may still add; it marks the
+ * plan's part, shades the top-ups, hatches the automatic room, and fills what was used (red at the allowance, yellow
+ * from 80%). `legend` names the segments; `details` (next period, cap) sit under the bar and `actions` (+ / −) beside
+ * it. The meter's `data-state` is `under` / `near` / `over`.
+ */
+export declare function UsageMeter({ icon: Icon, label, value, pct, hint, allowance, legend, details, actions, className, testId, }: {
     icon?: LucideIcon;
     label: string;
     /** Formatted used-of-limit text, e.g. "1,200 / 25,000" or "40 / 500 MB". */
     value: string;
-    /** Fill percentage, 0–100 (values are clamped). */
-    pct: number;
+    /** Simple mode: fill percentage, 0–100 (values are clamped). Ignored with `allowance`. */
+    pct?: number;
     /** Inline parenthetical after the label, e.g. "resets May 31, 2025" —
      *  same font as the label, so the meter never grows an extra row. */
     hint?: string;
+    /** Allowance mode: the allowance's parts, in the meter's unit. */
+    allowance?: UsageMeterAllowance;
+    /** Formatted legend entries for the allowance's segments (each shown only when set). */
+    legend?: {
+        plan?: string;
+        topUps?: string;
+        autoRoom?: string;
+    };
+    details?: ReactNode;
+    actions?: ReactNode;
     className?: string;
     testId?: string;
 }): import("react").JSX.Element;