@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/ai-suggestions/ai-suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-suggestions.js","names":[],"sources":["../../../src/components/ai-suggestions/ai-suggestions.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI AI Suggestions (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { useId, type ComponentPropsWithRef, type CSSProperties } from \"react\";\n\nimport { Button } from \"@/components/button\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * Prompt suggestion chips: the empty state of a chat, and the follow-up row\n * after an answer. They are alternatives of equal weight, so they arrive\n * radiating from the centre of the row rather than sweeping in reading order,\n * which would imply the first chip matters most.\n *\n * The entrance is a CSS keyframe keyed to each chip's distance from the middle.\n * Swapping the set re-keys the list, so the new chips replay it. SmoothUI's\n * exit and layout reflow (Motion's AnimatePresence + layout) are not ported:\n * a chip set is replaced wholesale, and the outgoing set gets no attention\n * worth a dependency. Under reduced motion the chips simply appear.\n */\n\nconst PREFIX = \"dowel-ai-suggestions\";\nconst STAGGER_MS = 45;\n\nconst STYLES = `\n[data-slot=suggestions-item]{animation:${PREFIX}-in var(--duration-normal) var(--ease-overshoot) backwards;animation-delay:calc(var(--stagger) * var(--motion-scale, 1))}\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(6px) scale(.94)}}\n`;\n\nexport interface SuggestionItem {\n  id: string;\n  label: string;\n}\n\nconst suggestionsVariants = cva(\"rounded-full font-normal active:scale-[0.97]\", {\n  variants: {\n    variant: {\n      outline: \"\",\n      soft: \"border-transparent bg-muted text-foreground hover:bg-accent\",\n    },\n  },\n  defaultVariants: {\n    variant: \"outline\",\n  },\n});\n\n/** Distance from the middle of the row, so the stagger radiates outwards. */\nfunction centreOut(index: number, count: number): number {\n  return Math.abs(index - (count - 1) / 2);\n}\n\nexport interface SuggestionsProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"onSelect\">,\n    VariantProps<typeof suggestionsVariants> {\n  suggestions: SuggestionItem[];\n  /** Called with the whole suggestion. Prefer filling the composer over sending. */\n  onSelect?: (suggestion: SuggestionItem) => void;\n  /** Visible heading, e.g. \"Follow-ups\". Also names the list. */\n  label?: string;\n  /** Disables every chip, e.g. while a response streams. */\n  disabled?: boolean;\n}\n\n/** A row of prompt suggestion chips. */\nexport function Suggestions({\n  className,\n  suggestions,\n  onSelect,\n  label,\n  variant,\n  disabled = false,\n  ...props\n}: SuggestionsProps) {\n  const labelId = useId();\n  // Re-keying on the set replays the entrance when the suggestions change.\n  const setKey = suggestions.map((suggestion) => suggestion.id).join(\"|\");\n\n  return (\n    <div\n      data-slot=\"suggestions\"\n      className={cn(\"flex w-full flex-col gap-2\", className)}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {label ? (\n        <p id={labelId} className=\"text-xs tracking-wide text-muted-foreground uppercase\">\n          {label}\n        </p>\n      ) : null}\n      <ul\n        key={setKey}\n        aria-labelledby={label ? labelId : undefined}\n        aria-label={label ? undefined : \"Suggestions\"}\n        className=\"flex flex-wrap gap-2\"\n      >\n        {suggestions.map((suggestion, index) => (\n          <li\n            key={suggestion.id}\n            data-slot=\"suggestions-item\"\n            style={\n              {\n                \"--stagger\": `${String(centreOut(index, suggestions.length) * STAGGER_MS)}ms`,\n              } as CSSProperties\n            }\n          >\n            <Button\n              type=\"button\"\n              variant=\"outline\"\n              size=\"sm\"\n              disabled={disabled}\n              className={cn(\n                \"h-auto min-h-8 py-1.5 text-start whitespace-normal\",\n                suggestionsVariants({ variant }),\n              )}\n              onClick={() => onSelect?.(suggestion)}\n            >\n              {suggestion.label}\n            </Button>\n          </li>\n        ))}\n      </ul>\n    </div>\n  );\n}\n\nexport { suggestionsVariants };\n"],"mappings":";;;;;;;AAsBA,MAAM,SAAS;AACf,MAAM,aAAa;AAEnB,MAAM,SAAS;yCAC0B,OAAO;aACnC,OAAO;;AAQpB,MAAM,sBAAsB,IAAI,gDAAgD;CAC9E,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CAAC;;AAGD,SAAS,UAAU,OAAe,OAAuB;CACvD,OAAO,KAAK,IAAI,SAAS,QAAQ,KAAK,CAAC;AACzC;;AAgBA,SAAgB,YAAY,EAC1B,WACA,aACA,UACA,OACA,SACA,WAAW,OACX,GAAG,SACgB;CACnB,MAAM,UAAU,MAAM;CAEtB,MAAM,SAAS,YAAY,KAAK,eAAe,WAAW,EAAE,CAAC,CAAC,KAAK,GAAG;CAEtE,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;EAHN,UAAA;GAKE,oBAAC,SAAD;IAAO,MAAM;IAAQ,YAAW;IAC7B,UAAA;GACI,CAAA;GACN,QACC,oBAAC,KAAD;IAAG,IAAI;IAAS,WAAU;IACvB,UAAA;GACA,CAAA,IACD;GACJ,oBAAC,MAAD;IAEE,mBAAiB,QAAQ,UAAU,KAAA;IACnC,cAAY,QAAQ,KAAA,IAAY;IAChC,WAAU;IAET,UAAA,YAAY,KAAK,YAAY,UAC5B,oBAAC,MAAD;KAEE,aAAU;KACV,OACE,EACE,aAAa,GAAG,OAAO,UAAU,OAAO,YAAY,MAAM,IAAI,UAAU,EAAE,IAC5E;KAGF,UAAA,oBAAC,QAAD;MACE,MAAK;MACL,SAAQ;MACR,MAAK;MACK;MACV,WAAW,GACT,sDACA,oBAAoB,EAAE,QAAQ,CAAC,CACjC;MACA,eAAe,WAAW,UAAU;MAEnC,UAAA,WAAW;KACN,CAAA;IACN,GArBG,WAAW,EAqBd,CACL;GACC,GA9BG,MA8BH;EACD;;AAET"}

package/dist/components/ai-suggestions/index.d.ts

@@ -0,0 +1,2 @@
+import { SuggestionItem, Suggestions, SuggestionsProps, suggestionsVariants } from "./ai-suggestions.js";
+export { type SuggestionItem, Suggestions, type SuggestionsProps, suggestionsVariants };

package/dist/components/ai-suggestions/index.js

@@ -0,0 +1,2 @@
+import { Suggestions, suggestionsVariants } from "./ai-suggestions.js";
+export { Suggestions, suggestionsVariants };

package/dist/components/ai-suggestions/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-suggestions/meta.ts
+const meta = defineMeta({
+	name: "ai-suggestions",
+	title: "Suggestions",
+	description: "Prompt suggestion chips for a chat's empty state or follow-ups, arriving from the centre of the row outwards.",
+	category: "ai",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["button"],
+	files: ["ai-suggestions.tsx"],
+	a11y: "A list of real buttons, named by the visible heading (aria-labelledby) or \"Suggestions\". Every chip is in the tab order with the shared focus ring. The entrance stagger is decoration and does not run under reduced motion. Selecting hands the suggestion back; filling the composer rather than sending keeps it editable."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-suggestions/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-suggestions/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-suggestions\",\n  title: \"Suggestions\",\n  description:\n    \"Prompt suggestion chips for a chat's empty state or follow-ups, arriving from the centre of the row outwards.\",\n  category: \"ai\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"button\"],\n  files: [\"ai-suggestions.tsx\"],\n  a11y:\n    'A list of real buttons, named by the visible heading (aria-labelledby) or \"Suggestions\". Every chip is in ' +\n    \"the tab order with the shared focus ring. The entrance stagger is decoration and does not run under reduced \" +\n    \"motion. Selecting hands the suggestion back; filling the composer rather than sending keeps it editable.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAGJ,CAAC"}

package/dist/components/ai-token-usage/ai-token-usage.d.ts

@@ -10,6 +10,12 @@ import { ComponentPropsWithRef } from "react";
  * The numbers are the message; the bar is a summary of them. Both are present,
  * and the numbers are what a screen reader gets.
  */
+interface TokenUsageBreakdownItem {
+  label: string;
+  tokens: number;
+}
+/** How numbers are written when no `format` is given. */
+type TokenNotation = "standard" | "compact";
 interface TokenUsageProps extends ComponentPropsWithRef<"div"> {
   /** Tokens used so far. */
   used: number;
@@ -20,15 +26,46 @@ interface TokenUsageProps extends ComponentPropsWithRef<"div"> {
   warnAt?: number;
   /** Formats the numbers. Defaults to the runtime locale's grouping. */
   format?: (value: number) => string;
+  /**
+   * `bar` is a labelled bar. `ring` is a compact inline gauge for toolbars: it
+   * changes hue as it fills, never size, since growth would read as health.
+   */
+  variant?: "bar" | "ring";
+  /**
+   * Number style when `format` is not given. `compact` writes 48000 as "48K".
+   * Defaults to `standard`, or to `compact` in the ring variant.
+   */
+  notation?: TokenNotation;
+  /** Fraction past which the gauge reads as critical, before the limit itself. */
+  dangerAt?: number;
+  /**
+   * What is filling the window. Listed under the bar; in the ring variant, in
+   * a popover from the gauge.
+   */
+  breakdown?: TokenUsageBreakdownItem[];
+}
+/**
+ * Compact token counts, locale-aware: 1800 → "1.8K", 48000 → "48K",
+ * 1500000 → "1.5M". Below two integer digits it keeps one decimal, so 1,800
+ * is never rounded to a misleading "2K".
+ */
+declare function formatTokensCompact(value: number, locales?: Intl.LocalesArgument): string;
+declare function TokenUsage({ className, used, limit, label, warnAt, format, variant, notation, dangerAt, breakdown, ...props }: TokenUsageProps): import("react").JSX.Element;
+interface TokenUsageBreakdownProps extends ComponentPropsWithRef<"dl"> {
+  items: TokenUsageBreakdownItem[];
+  format?: (value: number) => string;
 }
-declare function TokenUsage({ className, used, limit, label, warnAt, format, ...props }: TokenUsageProps): import("react").JSX.Element;
+/** What is filling the window, as a description list of label and count. */
+declare function TokenUsageBreakdown({ className, items, format, ...props }: TokenUsageBreakdownProps): import("react").JSX.Element;
 interface TokenCountProps extends ComponentPropsWithRef<"span"> {
   value: number;
   label?: string;
   format?: (value: number) => string;
+  /** Number style when `format` is not given. */
+  notation?: TokenNotation;
 }
 /** A bare token count, for a message footer or a toolbar. */
-declare function TokenCount({ className, value, label, format, ...props }: TokenCountProps): import("react").JSX.Element;
+declare function TokenCount({ className, value, label, format, notation, ...props }: TokenCountProps): import("react").JSX.Element;
 //#endregion
-export { TokenCount, TokenCountProps, TokenUsage, TokenUsageProps };
+export { TokenCount, TokenCountProps, TokenNotation, TokenUsage, TokenUsageBreakdown, TokenUsageBreakdownItem, TokenUsageBreakdownProps, TokenUsageProps, formatTokensCompact };
 //# sourceMappingURL=ai-token-usage.d.ts.map

package/dist/components/ai-token-usage/ai-token-usage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-token-usage.d.ts","names":[],"sources":["../../../src/components/ai-token-usage/ai-token-usage.tsx"],"mappings":";;;;;;;;;;;;UAiBiB,wBAAwB;;EAEvC;;EAEA;EACA;;EAEA;;EAEA,UAAU;;iBAOI,aACd,WACA,MACA,OACA,OACA,QACA,WACG,SACF,kCAAe,IAAA;UAwCD,wBAAwB;EACvC;EACA;EACA,UAAU;;;iBAII,aACd,WACA,OACA,OACA,WACG,SACF,kCAAe,IAAA"}
+{"version":3,"file":"ai-token-usage.d.ts","names":[],"sources":["../../../src/components/ai-token-usage/ai-token-usage.tsx"],"mappings":";;;;;;;;;;;;UA2BiB;EACf;EACA;;;KAIU;UAEK,wBAAwB;;EAEvC;;EAEA;EACA;;EAEA;;EAEA,UAAU;;;;;EAKV;;;;;EAKA,WAAW;;EAEX;;;;;EAKA,YAAY;;;;;;;iBAcE,oBAAoB,eAAe,UAAU,KAAK;iBAkBlD,aACd,WACA,MACA,OACA,OACA,QACA,QACA,SACA,UACA,UACA,cACG,SACF,kCAAe,IAAA;UA2ND,iCAAiC;EAChD,OAAO;EACP,UAAU;;;iBAII,sBACd,WACA,OACA,WACG,SACF,2CAAwB,IAAA;UAiBV,wBAAwB;EACvC;EACA;EACA,UAAU;;EAEV,WAAW;;;iBAIG,aACd,WACA,OACA,OACA,QACA,aACG,SACF,kCAAe,IAAA"}

package/dist/components/ai-token-usage/ai-token-usage.js

@@ -1,58 +1,235 @@
 "use client";
+import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover/popover.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 //#region src/components/ai-token-usage/ai-token-usage.tsx
 function defaultFormat(value) {
 	return new Intl.NumberFormat().format(value);
 }
-function TokenUsage({ className, used, limit, label = "Context used", warnAt = .85, format = defaultFormat, ...props }) {
+const compactFormatters = /* @__PURE__ */ new Map();
+/**
+* Compact token counts, locale-aware: 1800 → "1.8K", 48000 → "48K",
+* 1500000 → "1.5M". Below two integer digits it keeps one decimal, so 1,800
+* is never rounded to a misleading "2K".
+*/
+function formatTokensCompact(value, locales) {
+	const key = JSON.stringify(locales ?? null);
+	let formatter = compactFormatters.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locales, { notation: "compact" });
+		compactFormatters.set(key, formatter);
+	}
+	return formatter.format(value);
+}
+function formatterFor(format, notation) {
+	if (format) return format;
+	return notation === "compact" ? (value) => formatTokensCompact(value) : defaultFormat;
+}
+function TokenUsage({ className, used, limit, label = "Context used", warnAt = .85, format, variant = "bar", notation, dangerAt, breakdown, ...props }) {
 	const fraction = limit > 0 ? Math.min(1, Math.max(0, used / limit)) : 0;
 	const percent = Math.round(fraction * 100);
 	const warning = fraction >= warnAt;
 	const over = used > limit;
-	return /* @__PURE__ */ jsxs("div", {
-		"data-slot": "token-usage",
+	const danger = !over && dangerAt !== void 0 && fraction >= dangerAt;
+	const critical = over || danger;
+	const show = formatterFor(format, notation ?? (variant === "ring" ? "compact" : "standard"));
+	const tone = critical ? "text-destructive" : warning ? "text-warning" : "text-muted-foreground";
+	const state = {
 		"data-warning": warning || void 0,
 		"data-over": over || void 0,
+		"data-danger": danger || void 0
+	};
+	if (variant === "ring") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "token-usage",
+		"data-variant": "ring",
+		...state,
+		className: cn("inline-flex items-center gap-1.5 text-xs", className),
+		...props,
+		children: /* @__PURE__ */ jsx(TokenRing, {
+			fraction,
+			tone,
+			stroke: critical ? "stroke-destructive" : warning ? "stroke-warning" : "stroke-primary",
+			text: `${show(used)}/${show(limit)}`,
+			sentence: `${label}: ${defaultFormat(used)} of ${defaultFormat(limit)} tokens, ${String(percent)}%` + (over ? ", over the limit" : danger ? ", nearly full" : ""),
+			breakdown,
+			format: format ?? defaultFormat
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "token-usage",
+		...state,
 		className: cn("flex w-full flex-col gap-1", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex items-baseline justify-between gap-2 text-xs",
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground",
-				children: label
-			}), /* @__PURE__ */ jsxs("span", {
-				className: cn("tabular-nums", over ? "text-destructive" : warning ? "text-warning" : "text-muted-foreground"),
-				children: [
-					format(used),
-					" / ",
-					format(limit)
-				]
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-baseline justify-between gap-2 text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground",
+					children: label
+				}), /* @__PURE__ */ jsxs("span", {
+					className: cn("tabular-nums", tone),
+					children: [
+						show(used),
+						" / ",
+						show(limit)
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				"aria-hidden": "true",
+				className: "h-1 w-full overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("h-full rounded-full transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", critical ? "bg-destructive" : warning ? "bg-warning" : "bg-primary"),
+					style: { width: `${String(percent)}%` }
+				})
+			}),
+			breakdown && breakdown.length > 0 ? /* @__PURE__ */ jsx(TokenUsageBreakdown, {
+				items: breakdown,
+				format: format ?? defaultFormat,
+				className: "mt-1"
+			}) : null
+		]
+	});
+}
+/** Close grace for a hover-opened breakdown, so the pointer can cross the gap. */
+const HOVER_CLOSE_DELAY = 120;
+function TokenRing({ fraction, tone, stroke, text, sentence, breakdown, format }) {
+	const [open, setOpen] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const closeTimer = useRef(null);
+	useEffect(() => () => {
+		if (closeTimer.current) clearTimeout(closeTimer.current);
+	}, []);
+	function cancelClose() {
+		if (closeTimer.current) clearTimeout(closeTimer.current);
+		closeTimer.current = null;
+	}
+	function hoverIn(event) {
+		if (event.pointerType !== "mouse") return;
+		cancelClose();
+		if (!open) {
+			setHovered(true);
+			setOpen(true);
+		}
+	}
+	function hoverOut(event) {
+		if (event.pointerType !== "mouse" || !hovered) return;
+		cancelClose();
+		closeTimer.current = setTimeout(() => {
+			setOpen(false);
+			setHovered(false);
+		}, HOVER_CLOSE_DELAY);
+	}
+	const gauge = /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs("svg", {
+			viewBox: "0 0 32 32",
+			fill: "none",
+			"aria-hidden": "true",
+			className: "size-4 shrink-0 -rotate-90 text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("circle", {
+				cx: "16",
+				cy: "16",
+				r: "13",
+				strokeWidth: "3",
+				className: "stroke-current opacity-20"
+			}), /* @__PURE__ */ jsx("circle", {
+				"data-part": "arc",
+				cx: "16",
+				cy: "16",
+				r: "13",
+				strokeWidth: "3",
+				pathLength: 1,
+				strokeLinecap: fraction > 0 ? "round" : "butt",
+				className: cn("transition-[stroke-dasharray,stroke] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", stroke),
+				style: { strokeDasharray: `${String(fraction)} ${String(1 - fraction)}` }
 			})]
-		}), /* @__PURE__ */ jsx("div", {
+		}),
+		/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
-			className: "h-1 w-full overflow-hidden rounded-full bg-muted",
-			children: /* @__PURE__ */ jsx("div", {
-				className: cn("h-full rounded-full transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", over ? "bg-destructive" : warning ? "bg-warning" : "bg-primary"),
-				style: { width: `${String(percent)}%` }
+			className: cn("tabular-nums", tone),
+			children: text
+		}),
+		/* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: sentence
+		})
+	] });
+	if (!breakdown || breakdown.length === 0) return gauge;
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: (next) => {
+			cancelClose();
+			setHovered(false);
+			setOpen(next);
+		},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "token-usage-trigger",
+				onPointerEnter: hoverIn,
+				onPointerLeave: hoverOut,
+				onClick: (event) => {
+					if (open && hovered) {
+						event.preventDefault();
+						cancelClose();
+						setHovered(false);
+					}
+				},
+				className: cn("inline-flex items-center gap-1.5 rounded-md", focusRing),
+				children: gauge
+			})
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			side: "top",
+			align: "start",
+			"aria-label": "Context breakdown",
+			className: "w-56 p-2.5",
+			onPointerEnter: hoverIn,
+			onPointerLeave: hoverOut,
+			onOpenAutoFocus: (event) => {
+				if (hovered) event.preventDefault();
+			},
+			children: /* @__PURE__ */ jsx(TokenUsageBreakdown, {
+				items: breakdown,
+				format
 			})
 		})]
 	});
 }
+/** What is filling the window, as a description list of label and count. */
+function TokenUsageBreakdown({ className, items, format = defaultFormat, ...props }) {
+	return /* @__PURE__ */ jsx("dl", {
+		"data-slot": "token-usage-breakdown",
+		className: cn("flex flex-col gap-1 text-xs", className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("div", {
+			className: "flex items-baseline justify-between gap-3",
+			children: [/* @__PURE__ */ jsx("dt", {
+				className: "text-muted-foreground",
+				children: item.label
+			}), /* @__PURE__ */ jsx("dd", {
+				className: "text-foreground tabular-nums",
+				children: format(item.tokens)
+			})]
+		}, item.label))
+	});
+}
 /** A bare token count, for a message footer or a toolbar. */
-function TokenCount({ className, value, label = "tokens", format = defaultFormat, ...props }) {
+function TokenCount({ className, value, label = "tokens", format, notation = "standard", ...props }) {
 	return /* @__PURE__ */ jsxs("span", {
 		"data-slot": "token-count",
 		className: cn("text-2xs text-muted-foreground tabular-nums", className),
 		...props,
 		children: [
-			format(value),
+			formatterFor(format, notation)(value),
 			" ",
 			label
 		]
 	});
 }
 //#endregion
-export { TokenCount, TokenUsage };
+export { TokenCount, TokenUsage, TokenUsageBreakdown, formatTokensCompact };
 
 //# sourceMappingURL=ai-token-usage.js.map

package/dist/components/ai-token-usage/ai-token-usage.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-token-usage.js","names":[],"sources":["../../../src/components/ai-token-usage/ai-token-usage.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * How much of the context window a conversation has used.\n *\n * Worth showing because running out of context is a cliff, not a slope: the\n * conversation stops behaving the way it did, and without a gauge that looks\n * like the model getting worse rather than a limit being reached.\n *\n * The numbers are the message; the bar is a summary of them. Both are present,\n * and the numbers are what a screen reader gets.\n */\n\nexport interface TokenUsageProps extends ComponentPropsWithRef<\"div\"> {\n  /** Tokens used so far. */\n  used: number;\n  /** The context window. */\n  limit: number;\n  label?: string;\n  /** Fraction of the limit past which the gauge warns. */\n  warnAt?: number;\n  /** Formats the numbers. Defaults to the runtime locale's grouping. */\n  format?: (value: number) => string;\n}\n\nfunction defaultFormat(value: number): string {\n  return new Intl.NumberFormat().format(value);\n}\n\nexport function TokenUsage({\n  className,\n  used,\n  limit,\n  label = \"Context used\",\n  warnAt = 0.85,\n  format = defaultFormat,\n  ...props\n}: TokenUsageProps) {\n  const fraction = limit > 0 ? Math.min(1, Math.max(0, used / limit)) : 0;\n  const percent = Math.round(fraction * 100);\n  const warning = fraction >= warnAt;\n  const over = used > limit;\n\n  return (\n    <div\n      data-slot=\"token-usage\"\n      data-warning={warning || undefined}\n      data-over={over || undefined}\n      className={cn(\"flex w-full flex-col gap-1\", className)}\n      {...props}\n    >\n      <div className=\"flex items-baseline justify-between gap-2 text-xs\">\n        <span className=\"text-muted-foreground\">{label}</span>\n        <span\n          className={cn(\n            \"tabular-nums\",\n            over ? \"text-destructive\" : warning ? \"text-warning\" : \"text-muted-foreground\",\n          )}\n        >\n          {format(used)} / {format(limit)}\n        </span>\n      </div>\n      {/* The bar summarises what the numbers above already say, so it is\n          decorative rather than a second progressbar to read through. */}\n      <div aria-hidden=\"true\" className=\"h-1 w-full overflow-hidden rounded-full bg-muted\">\n        <div\n          className={cn(\n            \"h-full rounded-full transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n            over ? \"bg-destructive\" : warning ? \"bg-warning\" : \"bg-primary\",\n          )}\n          style={{ width: `${String(percent)}%` }}\n        />\n      </div>\n    </div>\n  );\n}\n\nexport interface TokenCountProps extends ComponentPropsWithRef<\"span\"> {\n  value: number;\n  label?: string;\n  format?: (value: number) => string;\n}\n\n/** A bare token count, for a message footer or a toolbar. */\nexport function TokenCount({\n  className,\n  value,\n  label = \"tokens\",\n  format = defaultFormat,\n  ...props\n}: TokenCountProps) {\n  return (\n    <span\n      data-slot=\"token-count\"\n      className={cn(\"text-2xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    >\n      {format(value)} {label}\n    </span>\n  );\n}\n"],"mappings":";;;;AA6BA,SAAS,cAAc,OAAuB;CAC5C,OAAO,IAAI,KAAK,aAAa,CAAC,CAAC,OAAO,KAAK;AAC7C;AAEA,SAAgB,WAAW,EACzB,WACA,MACA,OACA,QAAQ,gBACR,SAAS,KACT,SAAS,eACT,GAAG,SACe;CAClB,MAAM,WAAW,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI;CACtE,MAAM,UAAU,KAAK,MAAM,WAAW,GAAG;CACzC,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,OAAO;CAEpB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,aAAW,QAAQ,KAAA;EACnB,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;EALN,UAAA,CAOE,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,oBAAC,QAAD;IAAM,WAAU;IAAyB,UAAA;GAAY,CAAA,GACrD,qBAAC,QAAD;IACE,WAAW,GACT,gBACA,OAAO,qBAAqB,UAAU,iBAAiB,uBACzD;IAJF,UAAA;KAMG,OAAO,IAAI;KAAE;KAAI,OAAO,KAAK;IAC1B;GACH,CAAA,CAAA;EAGL,CAAA,GAAA,oBAAC,OAAD;GAAK,eAAY;GAAO,WAAU;GAChC,UAAA,oBAAC,OAAD;IACE,WAAW,GACT,uGACA,OAAO,mBAAmB,UAAU,eAAe,YACrD;IACA,OAAO,EAAE,OAAO,GAAG,OAAO,OAAO,EAAE,GAAG;GACvC,CAAA;EACE,CAAA,CACF;;AAET;;AASA,SAAgB,WAAW,EACzB,WACA,OACA,QAAQ,UACR,SAAS,eACT,GAAG,SACe;CAClB,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,+CAA+C,SAAS;EACtE,GAAI;EAHN,UAAA;GAKG,OAAO,KAAK;GAAE;GAAE;EACb;;AAEV"}
+{"version":3,"file":"ai-token-usage.js","names":[],"sources":["../../../src/components/ai-token-usage/ai-token-usage.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Context Meter (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type PointerEvent as ReactPointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/components/popover\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * How much of the context window a conversation has used.\n *\n * Worth showing because running out of context is a cliff, not a slope: the\n * conversation stops behaving the way it did, and without a gauge that looks\n * like the model getting worse rather than a limit being reached.\n *\n * The numbers are the message; the bar is a summary of them. Both are present,\n * and the numbers are what a screen reader gets.\n */\n\nexport interface TokenUsageBreakdownItem {\n  label: string;\n  tokens: number;\n}\n\n/** How numbers are written when no `format` is given. */\nexport type TokenNotation = \"standard\" | \"compact\";\n\nexport interface TokenUsageProps extends ComponentPropsWithRef<\"div\"> {\n  /** Tokens used so far. */\n  used: number;\n  /** The context window. */\n  limit: number;\n  label?: string;\n  /** Fraction of the limit past which the gauge warns. */\n  warnAt?: number;\n  /** Formats the numbers. Defaults to the runtime locale's grouping. */\n  format?: (value: number) => string;\n  /**\n   * `bar` is a labelled bar. `ring` is a compact inline gauge for toolbars: it\n   * changes hue as it fills, never size, since growth would read as health.\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * Number style when `format` is not given. `compact` writes 48000 as \"48K\".\n   * Defaults to `standard`, or to `compact` in the ring variant.\n   */\n  notation?: TokenNotation;\n  /** Fraction past which the gauge reads as critical, before the limit itself. */\n  dangerAt?: number;\n  /**\n   * What is filling the window. Listed under the bar; in the ring variant, in\n   * a popover from the gauge.\n   */\n  breakdown?: TokenUsageBreakdownItem[];\n}\n\nfunction defaultFormat(value: number): string {\n  return new Intl.NumberFormat().format(value);\n}\n\nconst compactFormatters = new Map<string, Intl.NumberFormat>();\n\n/**\n * Compact token counts, locale-aware: 1800 → \"1.8K\", 48000 → \"48K\",\n * 1500000 → \"1.5M\". Below two integer digits it keeps one decimal, so 1,800\n * is never rounded to a misleading \"2K\".\n */\nexport function formatTokensCompact(value: number, locales?: Intl.LocalesArgument): string {\n  const key = JSON.stringify(locales ?? null);\n  let formatter = compactFormatters.get(key);\n  if (!formatter) {\n    formatter = new Intl.NumberFormat(locales, { notation: \"compact\" });\n    compactFormatters.set(key, formatter);\n  }\n  return formatter.format(value);\n}\n\nfunction formatterFor(\n  format: ((value: number) => string) | undefined,\n  notation: TokenNotation,\n): (value: number) => string {\n  if (format) return format;\n  return notation === \"compact\" ? (value) => formatTokensCompact(value) : defaultFormat;\n}\n\nexport function TokenUsage({\n  className,\n  used,\n  limit,\n  label = \"Context used\",\n  warnAt = 0.85,\n  format,\n  variant = \"bar\",\n  notation,\n  dangerAt,\n  breakdown,\n  ...props\n}: TokenUsageProps) {\n  const fraction = limit > 0 ? Math.min(1, Math.max(0, used / limit)) : 0;\n  const percent = Math.round(fraction * 100);\n  const warning = fraction >= warnAt;\n  const over = used > limit;\n  const danger = !over && dangerAt !== undefined && fraction >= dangerAt;\n  const critical = over || danger;\n  const show = formatterFor(format, notation ?? (variant === \"ring\" ? \"compact\" : \"standard\"));\n  const tone = critical\n    ? \"text-destructive\"\n    : warning\n      ? \"text-warning\"\n      : \"text-muted-foreground\";\n\n  const state = {\n    \"data-warning\": warning || undefined,\n    \"data-over\": over || undefined,\n    \"data-danger\": danger || undefined,\n  };\n\n  if (variant === \"ring\") {\n    return (\n      <div\n        data-slot=\"token-usage\"\n        data-variant=\"ring\"\n        {...state}\n        className={cn(\"inline-flex items-center gap-1.5 text-xs\", className)}\n        {...props}\n      >\n        <TokenRing\n          fraction={fraction}\n          tone={tone}\n          stroke={\n            critical ? \"stroke-destructive\" : warning ? \"stroke-warning\" : \"stroke-primary\"\n          }\n          text={`${show(used)}/${show(limit)}`}\n          // Full figures for assistive technology: never abbreviated.\n          sentence={\n            `${label}: ${defaultFormat(used)} of ${defaultFormat(limit)} tokens, ${String(percent)}%` +\n            (over ? \", over the limit\" : danger ? \", nearly full\" : \"\")\n          }\n          breakdown={breakdown}\n          format={format ?? defaultFormat}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div\n      data-slot=\"token-usage\"\n      {...state}\n      className={cn(\"flex w-full flex-col gap-1\", className)}\n      {...props}\n    >\n      <div className=\"flex items-baseline justify-between gap-2 text-xs\">\n        <span className=\"text-muted-foreground\">{label}</span>\n        <span className={cn(\"tabular-nums\", tone)}>\n          {show(used)} / {show(limit)}\n        </span>\n      </div>\n      {/* The bar summarises what the numbers above already say, so it is\n          decorative rather than a second progressbar to read through. */}\n      <div aria-hidden=\"true\" className=\"h-1 w-full overflow-hidden rounded-full bg-muted\">\n        <div\n          className={cn(\n            \"h-full rounded-full transition-[width] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n            critical ? \"bg-destructive\" : warning ? \"bg-warning\" : \"bg-primary\",\n          )}\n          style={{ width: `${String(percent)}%` }}\n        />\n      </div>\n      {breakdown && breakdown.length > 0 ? (\n        <TokenUsageBreakdown\n          items={breakdown}\n          format={format ?? defaultFormat}\n          className=\"mt-1\"\n        />\n      ) : null}\n    </div>\n  );\n}\n\n/** Close grace for a hover-opened breakdown, so the pointer can cross the gap. */\nconst HOVER_CLOSE_DELAY = 120;\n\nfunction TokenRing({\n  fraction,\n  tone,\n  stroke,\n  text,\n  sentence,\n  breakdown,\n  format,\n}: {\n  fraction: number;\n  tone: string;\n  stroke: string;\n  text: string;\n  sentence: string;\n  breakdown?: TokenUsageBreakdownItem[];\n  format: (value: number) => string;\n}) {\n  const [open, setOpen] = useState(false);\n  // Opened by a mouse hovering, rather than by a click or a key.\n  const [hovered, setHovered] = useState(false);\n  const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (closeTimer.current) clearTimeout(closeTimer.current);\n    },\n    [],\n  );\n\n  function cancelClose() {\n    if (closeTimer.current) clearTimeout(closeTimer.current);\n    closeTimer.current = null;\n  }\n\n  function hoverIn(event: ReactPointerEvent) {\n    if (event.pointerType !== \"mouse\") return;\n    cancelClose();\n    if (!open) {\n      setHovered(true);\n      setOpen(true);\n    }\n  }\n\n  function hoverOut(event: ReactPointerEvent) {\n    if (event.pointerType !== \"mouse\" || !hovered) return;\n    cancelClose();\n    closeTimer.current = setTimeout(() => {\n      setOpen(false);\n      setHovered(false);\n    }, HOVER_CLOSE_DELAY);\n  }\n\n  // Geometry never changes with state: only the arc's length and hue do.\n  const gauge: ReactNode = (\n    <>\n      <svg\n        viewBox=\"0 0 32 32\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-4 shrink-0 -rotate-90 text-muted-foreground\"\n      >\n        <circle cx=\"16\" cy=\"16\" r=\"13\" strokeWidth=\"3\" className=\"stroke-current opacity-20\" />\n        <circle\n          data-part=\"arc\"\n          cx=\"16\"\n          cy=\"16\"\n          r=\"13\"\n          strokeWidth=\"3\"\n          pathLength={1}\n          strokeLinecap={fraction > 0 ? \"round\" : \"butt\"}\n          className={cn(\n            \"transition-[stroke-dasharray,stroke] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n            stroke,\n          )}\n          style={{ strokeDasharray: `${String(fraction)} ${String(1 - fraction)}` }}\n        />\n      </svg>\n      <span aria-hidden=\"true\" className={cn(\"tabular-nums\", tone)}>\n        {text}\n      </span>\n      <span className=\"sr-only\">{sentence}</span>\n    </>\n  );\n\n  if (!breakdown || breakdown.length === 0) return gauge;\n\n  return (\n    <Popover\n      open={open}\n      onOpenChange={(next) => {\n        cancelClose();\n        setHovered(false);\n        setOpen(next);\n      }}\n    >\n      <PopoverTrigger asChild>\n        <button\n          type=\"button\"\n          data-slot=\"token-usage-trigger\"\n          onPointerEnter={hoverIn}\n          onPointerLeave={hoverOut}\n          onClick={(event) => {\n            // A click on a hover-opened breakdown pins it rather than closing\n            // it — otherwise the first click a mouse user makes does nothing.\n            if (open && hovered) {\n              event.preventDefault();\n              cancelClose();\n              setHovered(false);\n            }\n          }}\n          className={cn(\"inline-flex items-center gap-1.5 rounded-md\", focusRing)}\n        >\n          {gauge}\n        </button>\n      </PopoverTrigger>\n      <PopoverContent\n        side=\"top\"\n        align=\"start\"\n        aria-label=\"Context breakdown\"\n        className=\"w-56 p-2.5\"\n        onPointerEnter={hoverIn}\n        onPointerLeave={hoverOut}\n        onOpenAutoFocus={(event) => {\n          // Hovering never moves focus.\n          if (hovered) event.preventDefault();\n        }}\n      >\n        <TokenUsageBreakdown items={breakdown} format={format} />\n      </PopoverContent>\n    </Popover>\n  );\n}\n\nexport interface TokenUsageBreakdownProps extends ComponentPropsWithRef<\"dl\"> {\n  items: TokenUsageBreakdownItem[];\n  format?: (value: number) => string;\n}\n\n/** What is filling the window, as a description list of label and count. */\nexport function TokenUsageBreakdown({\n  className,\n  items,\n  format = defaultFormat,\n  ...props\n}: TokenUsageBreakdownProps) {\n  return (\n    <dl\n      data-slot=\"token-usage-breakdown\"\n      className={cn(\"flex flex-col gap-1 text-xs\", className)}\n      {...props}\n    >\n      {items.map((item) => (\n        <div key={item.label} className=\"flex items-baseline justify-between gap-3\">\n          <dt className=\"text-muted-foreground\">{item.label}</dt>\n          <dd className=\"text-foreground tabular-nums\">{format(item.tokens)}</dd>\n        </div>\n      ))}\n    </dl>\n  );\n}\n\nexport interface TokenCountProps extends ComponentPropsWithRef<\"span\"> {\n  value: number;\n  label?: string;\n  format?: (value: number) => string;\n  /** Number style when `format` is not given. */\n  notation?: TokenNotation;\n}\n\n/** A bare token count, for a message footer or a toolbar. */\nexport function TokenCount({\n  className,\n  value,\n  label = \"tokens\",\n  format,\n  notation = \"standard\",\n  ...props\n}: TokenCountProps) {\n  return (\n    <span\n      data-slot=\"token-count\"\n      className={cn(\"text-2xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    >\n      {formatterFor(format, notation)(value)} {label}\n    </span>\n  );\n}\n"],"mappings":";;;;;;;AAgEA,SAAS,cAAc,OAAuB;CAC5C,OAAO,IAAI,KAAK,aAAa,CAAC,CAAC,OAAO,KAAK;AAC7C;AAEA,MAAM,oCAAoB,IAAI,IAA+B;;;;;;AAO7D,SAAgB,oBAAoB,OAAe,SAAwC;CACzF,MAAM,MAAM,KAAK,UAAU,WAAW,IAAI;CAC1C,IAAI,YAAY,kBAAkB,IAAI,GAAG;CACzC,IAAI,CAAC,WAAW;EACd,YAAY,IAAI,KAAK,aAAa,SAAS,EAAE,UAAU,UAAU,CAAC;EAClE,kBAAkB,IAAI,KAAK,SAAS;CACtC;CACA,OAAO,UAAU,OAAO,KAAK;AAC/B;AAEA,SAAS,aACP,QACA,UAC2B;CAC3B,IAAI,QAAQ,OAAO;CACnB,OAAO,aAAa,aAAa,UAAU,oBAAoB,KAAK,IAAI;AAC1E;AAEA,SAAgB,WAAW,EACzB,WACA,MACA,OACA,QAAQ,gBACR,SAAS,KACT,QACA,UAAU,OACV,UACA,UACA,WACA,GAAG,SACe;CAClB,MAAM,WAAW,QAAQ,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI;CACtE,MAAM,UAAU,KAAK,MAAM,WAAW,GAAG;CACzC,MAAM,UAAU,YAAY;CAC5B,MAAM,OAAO,OAAO;CACpB,MAAM,SAAS,CAAC,QAAQ,aAAa,KAAA,KAAa,YAAY;CAC9D,MAAM,WAAW,QAAQ;CACzB,MAAM,OAAO,aAAa,QAAQ,aAAa,YAAY,SAAS,YAAY,WAAW;CAC3F,MAAM,OAAO,WACT,qBACA,UACE,iBACA;CAEN,MAAM,QAAQ;EACZ,gBAAgB,WAAW,KAAA;EAC3B,aAAa,QAAQ,KAAA;EACrB,eAAe,UAAU,KAAA;CAC3B;CAEA,IAAI,YAAY,QACd,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAa;EACb,GAAI;EACJ,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;EAEJ,UAAA,oBAAC,WAAD;GACY;GACJ;GACN,QACE,WAAW,uBAAuB,UAAU,mBAAmB;GAEjE,MAAM,GAAG,KAAK,IAAI,EAAE,GAAG,KAAK,KAAK;GAEjC,UACE,GAAG,MAAM,IAAI,cAAc,IAAI,EAAE,MAAM,cAAc,KAAK,EAAE,WAAW,OAAO,OAAO,EAAE,MACtF,OAAO,qBAAqB,SAAS,kBAAkB;GAE/C;GACX,QAAQ,UAAU;EACnB,CAAA;CACE,CAAA;CAIT,OACE,qBAAC,OAAD;EACE,aAAU;EACV,GAAI;EACJ,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;EAJN,UAAA;GAME,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,QAAD;KAAM,WAAU;KAAyB,UAAA;IAAY,CAAA,GACrD,qBAAC,QAAD;KAAM,WAAW,GAAG,gBAAgB,IAAI;KAAxC,UAAA;MACG,KAAK,IAAI;MAAE;MAAI,KAAK,KAAK;KACtB;IACH,CAAA,CAAA;;GAGL,oBAAC,OAAD;IAAK,eAAY;IAAO,WAAU;IAChC,UAAA,oBAAC,OAAD;KACE,WAAW,GACT,uGACA,WAAW,mBAAmB,UAAU,eAAe,YACzD;KACA,OAAO,EAAE,OAAO,GAAG,OAAO,OAAO,EAAE,GAAG;IACvC,CAAA;GACE,CAAA;GACJ,aAAa,UAAU,SAAS,IAC/B,oBAAC,qBAAD;IACE,OAAO;IACP,QAAQ,UAAU;IAClB,WAAU;GACX,CAAA,IACC;EACD;;AAET;;AAGA,MAAM,oBAAoB;AAE1B,SAAS,UAAU,EACjB,UACA,MACA,QACA,MACA,UACA,WACA,UASC;CACD,MAAM,CAAC,MAAM,WAAW,SAAS,KAAK;CAEtC,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,aAAa,OAA6C,IAAI;CAEpE,sBACc;EACV,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;CACzD,GACA,CAAC,CACH;CAEA,SAAS,cAAc;EACrB,IAAI,WAAW,SAAS,aAAa,WAAW,OAAO;EACvD,WAAW,UAAU;CACvB;CAEA,SAAS,QAAQ,OAA0B;EACzC,IAAI,MAAM,gBAAgB,SAAS;EACnC,YAAY;EACZ,IAAI,CAAC,MAAM;GACT,WAAW,IAAI;GACf,QAAQ,IAAI;EACd;CACF;CAEA,SAAS,SAAS,OAA0B;EAC1C,IAAI,MAAM,gBAAgB,WAAW,CAAC,SAAS;EAC/C,YAAY;EACZ,WAAW,UAAU,iBAAiB;GACpC,QAAQ,KAAK;GACb,WAAW,KAAK;EAClB,GAAG,iBAAiB;CACtB;CAGA,MAAM,QACJ,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,eAAY;GACZ,WAAU;GAJZ,UAAA,CAME,oBAAC,UAAD;IAAQ,IAAG;IAAK,IAAG;IAAK,GAAE;IAAK,aAAY;IAAI,WAAU;GAA6B,CAAA,GACtF,oBAAC,UAAD;IACE,aAAU;IACV,IAAG;IACH,IAAG;IACH,GAAE;IACF,aAAY;IACZ,YAAY;IACZ,eAAe,WAAW,IAAI,UAAU;IACxC,WAAW,GACT,qGACA,MACF;IACA,OAAO,EAAE,iBAAiB,GAAG,OAAO,QAAQ,EAAE,GAAG,OAAO,IAAI,QAAQ,IAAI;GACzE,CAAA,CACE;;EACL,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAW,GAAG,gBAAgB,IAAI;GACxD,UAAA;EACG,CAAA;EACN,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAe,CAAA;CAC1C,EAAA,CAAA;CAGJ,IAAI,CAAC,aAAa,UAAU,WAAW,GAAG,OAAO;CAEjD,OACE,qBAAC,SAAD;EACQ;EACN,eAAe,SAAS;GACtB,YAAY;GACZ,WAAW,KAAK;GAChB,QAAQ,IAAI;EACd;EANF,UAAA,CAQE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,gBAAgB;IAChB,gBAAgB;IAChB,UAAU,UAAU;KAGlB,IAAI,QAAQ,SAAS;MACnB,MAAM,eAAe;MACrB,YAAY;MACZ,WAAW,KAAK;KAClB;IACF;IACA,WAAW,GAAG,+CAA+C,SAAS;IAErE,UAAA;GACK,CAAA;EACM,CAAA,GAChB,oBAAC,gBAAD;GACE,MAAK;GACL,OAAM;GACN,cAAW;GACX,WAAU;GACV,gBAAgB;GAChB,gBAAgB;GAChB,kBAAkB,UAAU;IAE1B,IAAI,SAAS,MAAM,eAAe;GACpC;GAEA,UAAA,oBAAC,qBAAD;IAAqB,OAAO;IAAmB;GAAS,CAAA;EAC1C,CAAA,CACT;;AAEb;;AAQA,SAAgB,oBAAoB,EAClC,WACA,OACA,SAAS,eACT,GAAG,SACwB;CAC3B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;EAEH,UAAA,MAAM,KAAK,SACV,qBAAC,OAAD;GAAsB,WAAU;GAAhC,UAAA,CACE,oBAAC,MAAD;IAAI,WAAU;IAAyB,UAAA,KAAK;GAAU,CAAA,GACtD,oBAAC,MAAD;IAAI,WAAU;IAAgC,UAAA,OAAO,KAAK,MAAM;GAAM,CAAA,CACnE;EAHK,GAAA,KAAK,KAGV,CACN;CACC,CAAA;AAER;;AAWA,SAAgB,WAAW,EACzB,WACA,OACA,QAAQ,UACR,QACA,WAAW,YACX,GAAG,SACe;CAClB,OACE,qBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,+CAA+C,SAAS;EACtE,GAAI;EAHN,UAAA;GAKG,aAAa,QAAQ,QAAQ,CAAC,CAAC,KAAK;GAAE;GAAE;EACrC;;AAEV"}

package/dist/components/ai-token-usage/index.d.ts

@@ -1,2 +1,2 @@
-import { TokenCount, TokenCountProps, TokenUsage, TokenUsageProps } from "./ai-token-usage.js";
-export { TokenCount, type TokenCountProps, TokenUsage, type TokenUsageProps };
+import { TokenCount, TokenCountProps, TokenNotation, TokenUsage, TokenUsageBreakdown, TokenUsageBreakdownItem, TokenUsageBreakdownProps, TokenUsageProps, formatTokensCompact } from "./ai-token-usage.js";
+export { TokenCount, type TokenCountProps, type TokenNotation, TokenUsage, TokenUsageBreakdown, type TokenUsageBreakdownItem, type TokenUsageBreakdownProps, type TokenUsageProps, formatTokensCompact };

package/dist/components/ai-token-usage/index.js

@@ -1,2 +1,2 @@
-import { TokenCount, TokenUsage } from "./ai-token-usage.js";
-export { TokenCount, TokenUsage };
+import { TokenCount, TokenUsage, TokenUsageBreakdown, formatTokensCompact } from "./ai-token-usage.js";
+export { TokenCount, TokenUsage, TokenUsageBreakdown, formatTokensCompact };

package/dist/components/ai-token-usage/meta.js

@@ -7,9 +7,9 @@ const meta = defineMeta({
 	category: "ai",
 	status: "stable",
 	dependencies: [],
-	registryDependencies: [],
+	registryDependencies: ["popover"],
 	files: ["ai-token-usage.tsx"],
-	a11y: "The numbers are the content and the bar only summarises them, so the bar is aria-hidden rather than a second progressbar to read past. Counts are formatted for the locale. Warning and over-limit states change the wording's colour but never remove the figures."
+	a11y: "The numbers are the content and the bar only summarises them, so the bar is aria-hidden rather than a second progressbar to read past. Counts are formatted for the locale. Warning and over-limit states change the wording's colour but never remove the figures. The ring variant abbreviates its visible figures, so it carries a visually hidden sentence with the full numbers and percent. Its breakdown trigger is a real, never-disabled button: click, Enter or Space open it and Escape closes it; a mouse hover also opens it without moving focus, and focus alone never does."
 });
 //#endregion
 export { meta };

package/dist/components/ai-token-usage/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-token-usage/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-token-usage\",\n  title: \"AI Token Usage\",\n  description: \"A gauge showing how much of the context window a conversation has used.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-token-usage.tsx\"],\n  a11y:\n    \"The numbers are the content and the bar only summarises them, so the bar is aria-hidden \" +\n    \"rather than a second progressbar to read past. Counts are formatted for the locale. Warning \" +\n    \"and over-limit states change the wording's colour but never remove the figures.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAGJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-token-usage/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-token-usage\",\n  title: \"AI Token Usage\",\n  description: \"A gauge showing how much of the context window a conversation has used.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [\"popover\"],\n  files: [\"ai-token-usage.tsx\"],\n  a11y:\n    \"The numbers are the content and the bar only summarises them, so the bar is aria-hidden \" +\n    \"rather than a second progressbar to read past. Counts are formatted for the locale. Warning \" +\n    \"and over-limit states change the wording's colour but never remove the figures. The ring \" +\n    \"variant abbreviates its visible figures, so it carries a visually hidden sentence with the \" +\n    \"full numbers and percent. Its breakdown trigger is a real, never-disabled button: click, \" +\n    \"Enter or Space open it and Escape closes it; a mouse hover also opens it without moving \" +\n    \"focus, and focus alone never does.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC,SAAS;CAChC,OAAO,CAAC,oBAAoB;CAC5B,MACE;AAOJ,CAAC"}

package/dist/components/ai-tool/ai-tool.d.ts

@@ -27,8 +27,19 @@ interface ToolHeaderProps extends ComponentPropsWithRef<typeof Collapsible.Trigg
   /** Overrides the status wording. */
   statusLabel?: string;
   icon?: ReactNode;
+  /**
+   * Status mark style. `icon` is a glyph per status; `ring` is one ring that
+   * breathes while queued, spins with a gap while running, and draws a check
+   * or a cross when done. `icon` wins over both.
+   */
+  indicator?: "icon" | "ring";
+  /**
+   * A short note before the status — "3 sources", "1.2s". It is part of the
+   * trigger's accessible name, so keep it short.
+   */
+  summary?: ReactNode;
 }
-declare function ToolHeader({ className, name, status, statusLabel, icon, ...props }: ToolHeaderProps): import("react").JSX.Element;
+declare function ToolHeader({ className, name, status, statusLabel, icon, indicator, summary, ...props }: ToolHeaderProps): import("react").JSX.Element;
 declare function ToolContent({ className, ...props }: ComponentPropsWithRef<typeof Collapsible.Content>): import("react").JSX.Element;
 interface ToolSectionProps extends ComponentPropsWithRef<"div"> {
   label: string;

package/dist/components/ai-tool/ai-tool.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-tool.d.ts","names":[],"sources":["../../../src/components/ai-tool/ai-tool.tsx"],"mappings":";;;;;;;;;;;;;;KAoBY;cASN,eAAY;;6CAYhB;UAEe,kBAEb,6BAA6B,YAAqB,OAClD,oBAAoB;EACtB,SAAS;;iBAGK,OAAO,WAAW,WAAuB,SAAS,4BAAS,IAAA;UAW1D,wBAAwB,6BAChC,YAAqB;;EAG5B;EACA,SAAS;;EAET;EACA,OAAO;;iBAGO,aACd,WACA,MACA,QACA,aACA,SACG,SACF,kCAAe,IAAA;iBA2FF,cACd,cACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA;UAc5C,yBAAyB;EACxC;;;iBAIc,cAAc,WAAW,OAAO,aAAa,SAAS,mCAAgB,IAAA;;;;;;;UAqBrE,yBAAyB;EACxC;;iBAGc,cAAc,WAAW,UAAsB,SAAS,mCAAgB,IAAA"}
+{"version":3,"file":"ai-tool.d.ts","names":[],"sources":["../../../src/components/ai-tool/ai-tool.tsx"],"mappings":";;;;;;;;;;;;;;KAqBY;cASN,eAAY;;6CAYhB;UAEe,kBAEb,6BAA6B,YAAqB,OAClD,oBAAoB;EACtB,SAAS;;iBAGK,OAAO,WAAW,WAAuB,SAAS,4BAAS,IAAA;UAW1D,wBAAwB,6BAChC,YAAqB;;EAG5B;EACA,SAAS;;EAET;EACA,OAAO;;;;;;EAMP;;;;;EAKA,UAAU;;iBAGI,aACd,WACA,MACA,QACA,aACA,MACA,WACA,YACG,SACF,kCAAe,IAAA;iBAsMF,cACd,cACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA;UAc5C,yBAAyB;EACxC;;;iBAIc,cAAc,WAAW,OAAO,aAAa,SAAS,mCAAgB,IAAA;;;;;;;UAqBrE,yBAAyB;EACxC;;iBAGc,cAAc,WAAW,UAAsB,SAAS,mCAAgB,IAAA"}

package/dist/components/ai-tool/ai-tool.js

@@ -2,7 +2,7 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Collapsible } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/ai-tool/ai-tool.tsx
 const STATUS_LABEL = {
@@ -28,27 +28,33 @@ function Tool({ className, status = "pending", ...props }) {
 		...props
 	});
 }
-function ToolHeader({ className, name, status = "pending", statusLabel, icon, ...props }) {
+function ToolHeader({ className, name, status = "pending", statusLabel, icon, indicator = "icon", summary, ...props }) {
+	const hasSummary = summary !== void 0 && summary !== null;
 	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		"data-slot": "tool-header",
 		className: cn("flex w-full items-center gap-2 px-3 py-2 text-start", "transition-colors duration-[var(--duration-fast)] hover:bg-accent/50", "[&[data-state=open]>svg:last-child]:rotate-180", focusRing, className),
 		...props,
 		children: [
-			icon ?? /* @__PURE__ */ jsx(ToolIcon, { status }),
+			icon ?? (indicator === "ring" ? /* @__PURE__ */ jsx(ToolRing, { status }) : /* @__PURE__ */ jsx(ToolIcon, { status })),
 			/* @__PURE__ */ jsx("span", {
 				className: "font-mono text-xs font-medium",
 				children: name
 			}),
+			hasSummary ? /* @__PURE__ */ jsx("span", {
+				"data-slot": "tool-summary",
+				className: "ms-auto shrink-0 text-xs text-muted-foreground tabular-nums",
+				children: summary
+			}) : null,
 			/* @__PURE__ */ jsx("span", {
 				"data-slot": "tool-status",
-				className: cn("ms-auto text-xs", status === "error" ? "text-destructive" : "text-muted-foreground"),
+				className: cn(!hasSummary && "ms-auto", "text-xs", status === "error" ? "text-destructive" : "text-muted-foreground"),
 				children: statusLabel ?? STATUS_LABEL[status]
 			}),
 			/* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
 				"aria-hidden": "true",
-				className: "size-3.5 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)]",
+				className: "size-3.5 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
 				children: /* @__PURE__ */ jsx("path", {
 					d: "m6 9 6 6 6-6",
 					stroke: "currentColor",
@@ -94,6 +100,77 @@ function ToolIcon({ status }) {
 		})
 	});
 }
+const PREFIX = "dowel-ai-tool";
+const STYLES = `
+@keyframes ${PREFIX}-ring-spin{to{rotate:360deg}}
+@keyframes ${PREFIX}-ring-breathe{0%,100%{stroke-opacity:1}50%{stroke-opacity:.35}}
+@keyframes ${PREFIX}-ring-draw{from{stroke-dashoffset:1}}
+[data-slot=tool-ring] [data-part=track]{stroke-dasharray:1 0;transition:stroke-dasharray calc(250ms * var(--motion-scale,1)) var(--ease-out-quint)}
+[data-slot=tool-ring][data-status=running] [data-part=track]{stroke-dasharray:.68 .32}
+[data-slot=tool-ring] [data-part=spin]{transform-box:view-box;transform-origin:center}
+[data-slot=tool-ring][data-status=running] [data-part=spin]{animation:${PREFIX}-ring-spin calc(900ms * var(--motion-scale,1)) linear infinite}
+[data-slot=tool-ring][data-status=pending] [data-part=track]{animation:${PREFIX}-ring-breathe calc(1600ms * var(--motion-scale,1)) ease-in-out infinite}
+[data-slot=tool-ring] [data-part=glyph]{stroke-dasharray:1 1;animation:${PREFIX}-ring-draw calc(220ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+[data-slot=tool-ring] [data-part=glyph][data-stroke=cross]{animation-duration:calc(160ms * var(--motion-scale,1))}
+[data-slot=tool-ring] [data-part=glyph][data-stroke=cross]+[data-stroke=cross]{animation-delay:calc(60ms * var(--motion-scale,1))}
+`;
+const RING_TONE = {
+	pending: "text-muted-foreground",
+	running: "text-info",
+	success: "text-success",
+	error: "text-destructive"
+};
+const CHECK_PATH = "M 8.5 12.2 L 11 14.8 L 15.8 9.6";
+const CROSS_PATHS = ["M 9 9 L 15 15", "M 15 9 L 9 15"];
+/** The `indicator="ring"` mark. It never unmounts, so its changes transition. */
+function ToolRing({ status }) {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}), /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		"data-slot": "tool-ring",
+		"data-status": status,
+		className: cn("size-4 shrink-0 transition-colors duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)]", RING_TONE[status]),
+		children: [
+			/* @__PURE__ */ jsx("g", {
+				"data-part": "spin",
+				children: /* @__PURE__ */ jsx("circle", {
+					"data-part": "track",
+					cx: "12",
+					cy: "12",
+					r: "8",
+					pathLength: 1,
+					stroke: "currentColor",
+					strokeWidth: "2",
+					strokeLinecap: "round"
+				})
+			}),
+			status === "success" ? /* @__PURE__ */ jsx("path", {
+				"data-part": "glyph",
+				"data-stroke": "check",
+				d: CHECK_PATH,
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeWidth: "2.2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			}, "success") : null,
+			status === "error" ? CROSS_PATHS.map((d) => /* @__PURE__ */ jsx("path", {
+				"data-part": "glyph",
+				"data-stroke": "cross",
+				d,
+				pathLength: 1,
+				stroke: "currentColor",
+				strokeWidth: "2.2",
+				strokeLinecap: "round"
+			}, d)) : null
+		]
+	})] });
+}
 function ToolContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Collapsible.Content, {
 		"data-slot": "tool-content",