@inui/design-system 0.0.0-stage → 1.22.0

package/dist/components/ui/ai-label.d.ts

@@ -0,0 +1,118 @@
+/**
+ * AILabel — the accessible entry point into an AI explanation.
+ *
+ * A thin composite over Popover: `AILabelTrigger` is a real, labelled
+ * `Button` — a transparent `variant="ghost"` button with a visible
+ * `[sparkle] AI` label, not `AISparkle` alone (which is `aria-hidden` and
+ * purely a brand mark — see its own file) and not an icon-only button
+ * either. Deliberately `ghost`, not `variant="ai"`'s filled AI Chip look
+ * (Button's own AI Chip recipe) — the two need to read apart: the Chip is
+ * an action, this is a marker/explainability trigger, and a filled pill
+ * here would make them visually indistinguishable. The marker has visible
+ * "AI" text, not just an accessible name, so the tag itself is the
+ * explainability entry point a sighted user can find without hovering.
+ * Opens `AILabelContent`, a Popover panel holding a short,
+ * first-layer explanation.
+ *
+ * Marks genuine AI involvement only, never decoration — see manifest.json's
+ * `ai_presence` convention for the full rule and every current AI-treatment
+ * recipe. This is specifically the "why am I seeing this" affordance; other
+ * recipes (Button variant="ai", the AI Card outline, DataTable's row tint)
+ * mark AI presence visually but don't need to explain anything on their own.
+ */
+import * as React from "react";
+import { Button } from "../../components/ui/button";
+import { Popover, PopoverContent } from "../../components/ui/popover";
+declare function AILabel({ edited, onRevert, revertLabel, ...props }: React.ComponentProps<typeof Popover> & {
+    /** True once the user has changed the AI-filled value away from what AI produced. Morphs AILabelTrigger into a ghost undo button (calling `onRevert`) and hides AILabelContent — one slot, two states. */
+    edited?: boolean;
+    /** Restores the original AI-filled value. Required for the undo button to render; without it `edited` just hides the marker. */
+    onRevert?: () => void;
+    /** Accessible name of the undo button; make it specific when there's more than one AI-filled field on the page. */
+    revertLabel?: string;
+}): React.JSX.Element;
+type AILabelTriggerBaseProps = Omit<React.ComponentProps<typeof Button>, "variant" | "size" | "children" | "asChild" | "aria-label">;
+type AILabelTriggerSize = "default" | "sm";
+type AILabelTriggerProps = AILabelTriggerBaseProps & {
+    size?: AILabelTriggerSize;
+} & ({
+    iconOnly: true;
+    "aria-label": string;
+} | {
+    iconOnly?: false;
+    "aria-label"?: string;
+});
+declare function AILabelTrigger({ className, size, iconOnly, ...props }: AILabelTriggerProps): React.JSX.Element | null;
+declare function AILabelContent({ className, ...props }: React.ComponentProps<typeof PopoverContent>): React.JSX.Element | null;
+export { AILabel, AILabelTrigger, AILabelContent };
+/**
+ * WHEN TO USE
+ * - Any specific AI-generated content or suggestion where a user might reasonably ask "why am I seeing this" — a DataTable AI-tinted row, an AI Card summary, an inline AI suggestion in a form
+ * - As the accessible explainability entry point required alongside any other AI-presence styling (Button variant="ai", the AI Card outline, DataTable's row tint) — those mark presence, this explains it
+ *
+ * NOT WHEN
+ * - Marking AI presence with no explanation to give — use plain AISparkle or Button variant="ai" instead; don't add AILabel just to decorate something as AI-flavored
+ * - A full walkthrough or multi-step explanation — use a Dialog instead; AILabel's popover is for a short, first-layer summary, not a document
+ *
+ * KEY RULES
+ * - size: "default" | "sm" (default) — the marker's height step, matched to the surrounding size/density; both
+ *   render the visible `[sparkle] AI` text at Button's matching text size. These are the only two to pick from by default.
+ * - iconOnly: drops the "AI" text and leaves just the sparkle, square, at that same size step. OPT-IN ONLY — use it
+ *   solely when a designer explicitly asks for an icon-only marker, never as an automatic "tight space" fallback
+ *   (DataTable keeps the visible text at every density). Icon-only is a shape, not a size — same two-axis split as
+ *   Button's own `size` + `iconOnly`.
+ * - Without `iconOnly` no `aria-label` is needed — the visible "AI" text is the accessible name; pass one yourself only
+ *   for a more specific name. With `iconOnly` there's no visible text, so `aria-label` is required — enforced at the
+ *   type level, same as Button.
+ * - AISparkle inside the trigger stays `aria-hidden` (its own default) — the chip's visible "AI" text is what's
+ *   announced, or with `iconOnly` the required `aria-label`.
+ * - An AI-filled value the user can override is the `edited`/`onRevert` pair on AILabel itself,
+ *   not a hand-rolled swap: pass `edited={value !== aiValue}` and `onRevert={() => setValue(aiValue)}`,
+ *   and while edited the trigger morphs into a ghost `Undo2Icon` button at the matching icon size
+ *   (same footprint, no layout shift) that restores the AI value, and AILabelContent stops
+ *   rendering — nothing left to explain, only something to restore. `revertLabel` names the undo
+ *   button (default "Undo edit, restore AI value"); make it specific with several AI-filled fields
+ *   on one page. Input and Textarea (in the label row, beside FieldLabel), Select (beside the trigger)
+ *   and Checkbox/RadioGroup (beside the option or legend) all use exactly this — see the AI/* stories.
+ * - For a second, deeper layer of explanation, nest Collapsible/CollapsibleTrigger/CollapsibleContent inside AILabelContent (e.g. a "Show more" link) rather than opening a second popover — keep the deeper detail inside the same explanation surface, revealed only on request
+ * - PopoverTitle/PopoverDescription inside AILabelContent wire up aria-labelledby/aria-describedby automatically, same as any other Popover
+ *
+ * USAGE
+ * <AILabel>
+ *   <AILabelTrigger />
+ *   <AILabelContent>
+ *     <PopoverHeader>
+ *       <PopoverTitle>Why you're seeing this</PopoverTitle>
+ *     </PopoverHeader>
+ *     <PopoverDescription>
+ *       Flagged because this patient's last visit was over 90 days ago.
+ *     </PopoverDescription>
+ *   </AILabelContent>
+ * </AILabel>
+ *
+ * // Icon-only — only when a designer explicitly asks for it; aria-label required
+ * <AILabelTrigger iconOnly aria-label="AI-suggested row" />
+ *
+ * // AI-filled value the user can override: marker while untouched, undo once edited
+ * <AILabel edited={value !== AI_VALUE} onRevert={() => setValue(AI_VALUE)}>
+ *   <AILabelTrigger aria-label="AI-filled: why this value?" />
+ *   <AILabelContent>...</AILabelContent>
+ * </AILabel>
+ *
+ * // With a second, deeper explanation layer
+ * <AILabelContent>
+ *   <PopoverHeader>
+ *     <PopoverTitle>Why you're seeing this</PopoverTitle>
+ *   </PopoverHeader>
+ *   <PopoverDescription>Flagged for overdue follow-up.</PopoverDescription>
+ *   <Collapsible>
+ *     <CollapsibleTrigger asChild>
+ *       <Button variant="link" size="sm">Show more</Button>
+ *     </CollapsibleTrigger>
+ *     <CollapsibleContent className="text-sm text-muted-foreground">
+ *       Based on the care-gap model, last-visit date, and current risk score.
+ *     </CollapsibleContent>
+ *   </Collapsible>
+ * </AILabelContent>
+ */
+//# sourceMappingURL=ai-label.d.ts.map

package/dist/components/ui/ai-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-label.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ai-label.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAA;AAC/C,OAAO,EACL,OAAO,EACP,cAAc,EAEf,MAAM,yBAAyB,CAAA;AAchC,iBAAS,OAAO,CAAC,EACf,MAAc,EACd,QAAQ,EACR,WAA2C,EAC3C,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,GAAG;IACxC,0MAA0M;IAC1M,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,gIAAgI;IAChI,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mHAAmH;IACnH,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,qBAUA;AAED,KAAK,uBAAuB,GAAG,IAAI,CACjC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EACnC,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,SAAS,GAAG,YAAY,CAC3D,CAAA;AAsBD,KAAK,kBAAkB,GAAG,SAAS,GAAG,IAAI,CAAA;AAK1C,KAAK,mBAAmB,GAAG,uBAAuB,GAAG;IACnD,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,GAAG,CACE;IAAE,QAAQ,EAAE,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,CAAA;CAAE,GACxC;IAAE,QAAQ,CAAC,EAAE,KAAK,CAAC;IAAC,YAAY,CAAC,EAAE,MAAM,CAAA;CAAE,CAC9C,CAAA;AAKH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,IAAW,EACX,QAAgB,EAChB,GAAG,KAAK,EACT,EAAE,mBAAmB,4BAiFrB;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,4BAW7C;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,CAAA;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEG"}

package/dist/components/ui/ai-label.js

@@ -0,0 +1,184 @@
+import { cn } from "../../lib/utils.js";
+import { AISparkle } from "./ai-sparkle.js";
+import { Button } from "./button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import * as React from "react";
+import { Undo2Icon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/ai-label.tsx
+/**
+* AILabel — the accessible entry point into an AI explanation.
+*
+* A thin composite over Popover: `AILabelTrigger` is a real, labelled
+* `Button` — a transparent `variant="ghost"` button with a visible
+* `[sparkle] AI` label, not `AISparkle` alone (which is `aria-hidden` and
+* purely a brand mark — see its own file) and not an icon-only button
+* either. Deliberately `ghost`, not `variant="ai"`'s filled AI Chip look
+* (Button's own AI Chip recipe) — the two need to read apart: the Chip is
+* an action, this is a marker/explainability trigger, and a filled pill
+* here would make them visually indistinguishable. The marker has visible
+* "AI" text, not just an accessible name, so the tag itself is the
+* explainability entry point a sighted user can find without hovering.
+* Opens `AILabelContent`, a Popover panel holding a short,
+* first-layer explanation.
+*
+* Marks genuine AI involvement only, never decoration — see manifest.json's
+* `ai_presence` convention for the full rule and every current AI-treatment
+* recipe. This is specifically the "why am I seeing this" affordance; other
+* recipes (Button variant="ai", the AI Card outline, DataTable's row tint)
+* mark AI presence visually but don't need to explain anything on their own.
+*/
+var AILabelContext = React.createContext({
+	edited: false,
+	revertLabel: "Undo edit, restore AI value"
+});
+function AILabel({ edited = false, onRevert, revertLabel = "Undo edit, restore AI value", ...props }) {
+	const context = React.useMemo(() => ({
+		edited,
+		onRevert,
+		revertLabel
+	}), [
+		edited,
+		onRevert,
+		revertLabel
+	]);
+	return /* @__PURE__ */ jsx(AILabelContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx(Popover, {
+			"data-slot": "ai-label",
+			...props
+		})
+	});
+}
+var BUTTON_SIZE_BY_AILABEL_TRIGGER_SIZE = {
+	default: "default",
+	sm: "xs"
+};
+function AILabelTrigger({ className, size = "sm", iconOnly = false, ...props }) {
+	const { edited, onRevert, revertLabel } = React.useContext(AILabelContext);
+	const buttonSize = BUTTON_SIZE_BY_AILABEL_TRIGGER_SIZE[size];
+	if (edited) {
+		if (!onRevert) return null;
+		const rest = Object.fromEntries(Object.entries(props).filter(([key]) => key !== "aria-label"));
+		return /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "ghost",
+			size: buttonSize,
+			iconOnly: true,
+			"aria-label": revertLabel,
+			"data-slot": "ai-label-revert",
+			className,
+			onClick: onRevert,
+			...rest,
+			children: /* @__PURE__ */ jsx(Undo2Icon, {})
+		});
+	}
+	if (iconOnly) {
+		const { "aria-label": ariaLabel, ...rest } = props;
+		return /* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				size: buttonSize,
+				iconOnly: true,
+				"aria-label": ariaLabel,
+				className,
+				...rest,
+				children: /* @__PURE__ */ jsx(AISparkle, {})
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(PopoverTrigger, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs(Button, {
+			variant: "ghost",
+			size: buttonSize,
+			className,
+			...props,
+			children: [/* @__PURE__ */ jsx(AISparkle, { "data-icon": "inline-start" }), "AI"]
+		})
+	});
+}
+function AILabelContent({ className, ...props }) {
+	const { edited } = React.useContext(AILabelContext);
+	if (edited) return null;
+	return /* @__PURE__ */ jsx(PopoverContent, {
+		"data-slot": "ai-label-content",
+		className: cn("w-80", className),
+		...props
+	});
+}
+/**
+* WHEN TO USE
+* - Any specific AI-generated content or suggestion where a user might reasonably ask "why am I seeing this" — a DataTable AI-tinted row, an AI Card summary, an inline AI suggestion in a form
+* - As the accessible explainability entry point required alongside any other AI-presence styling (Button variant="ai", the AI Card outline, DataTable's row tint) — those mark presence, this explains it
+*
+* NOT WHEN
+* - Marking AI presence with no explanation to give — use plain AISparkle or Button variant="ai" instead; don't add AILabel just to decorate something as AI-flavored
+* - A full walkthrough or multi-step explanation — use a Dialog instead; AILabel's popover is for a short, first-layer summary, not a document
+*
+* KEY RULES
+* - size: "default" | "sm" (default) — the marker's height step, matched to the surrounding size/density; both
+*   render the visible `[sparkle] AI` text at Button's matching text size. These are the only two to pick from by default.
+* - iconOnly: drops the "AI" text and leaves just the sparkle, square, at that same size step. OPT-IN ONLY — use it
+*   solely when a designer explicitly asks for an icon-only marker, never as an automatic "tight space" fallback
+*   (DataTable keeps the visible text at every density). Icon-only is a shape, not a size — same two-axis split as
+*   Button's own `size` + `iconOnly`.
+* - Without `iconOnly` no `aria-label` is needed — the visible "AI" text is the accessible name; pass one yourself only
+*   for a more specific name. With `iconOnly` there's no visible text, so `aria-label` is required — enforced at the
+*   type level, same as Button.
+* - AISparkle inside the trigger stays `aria-hidden` (its own default) — the chip's visible "AI" text is what's
+*   announced, or with `iconOnly` the required `aria-label`.
+* - An AI-filled value the user can override is the `edited`/`onRevert` pair on AILabel itself,
+*   not a hand-rolled swap: pass `edited={value !== aiValue}` and `onRevert={() => setValue(aiValue)}`,
+*   and while edited the trigger morphs into a ghost `Undo2Icon` button at the matching icon size
+*   (same footprint, no layout shift) that restores the AI value, and AILabelContent stops
+*   rendering — nothing left to explain, only something to restore. `revertLabel` names the undo
+*   button (default "Undo edit, restore AI value"); make it specific with several AI-filled fields
+*   on one page. Input and Textarea (in the label row, beside FieldLabel), Select (beside the trigger)
+*   and Checkbox/RadioGroup (beside the option or legend) all use exactly this — see the AI/* stories.
+* - For a second, deeper layer of explanation, nest Collapsible/CollapsibleTrigger/CollapsibleContent inside AILabelContent (e.g. a "Show more" link) rather than opening a second popover — keep the deeper detail inside the same explanation surface, revealed only on request
+* - PopoverTitle/PopoverDescription inside AILabelContent wire up aria-labelledby/aria-describedby automatically, same as any other Popover
+*
+* USAGE
+* <AILabel>
+*   <AILabelTrigger />
+*   <AILabelContent>
+*     <PopoverHeader>
+*       <PopoverTitle>Why you're seeing this</PopoverTitle>
+*     </PopoverHeader>
+*     <PopoverDescription>
+*       Flagged because this patient's last visit was over 90 days ago.
+*     </PopoverDescription>
+*   </AILabelContent>
+* </AILabel>
+*
+* // Icon-only — only when a designer explicitly asks for it; aria-label required
+* <AILabelTrigger iconOnly aria-label="AI-suggested row" />
+*
+* // AI-filled value the user can override: marker while untouched, undo once edited
+* <AILabel edited={value !== AI_VALUE} onRevert={() => setValue(AI_VALUE)}>
+*   <AILabelTrigger aria-label="AI-filled: why this value?" />
+*   <AILabelContent>...</AILabelContent>
+* </AILabel>
+*
+* // With a second, deeper explanation layer
+* <AILabelContent>
+*   <PopoverHeader>
+*     <PopoverTitle>Why you're seeing this</PopoverTitle>
+*   </PopoverHeader>
+*   <PopoverDescription>Flagged for overdue follow-up.</PopoverDescription>
+*   <Collapsible>
+*     <CollapsibleTrigger asChild>
+*       <Button variant="link" size="sm">Show more</Button>
+*     </CollapsibleTrigger>
+*     <CollapsibleContent className="text-sm text-muted-foreground">
+*       Based on the care-gap model, last-visit date, and current risk score.
+*     </CollapsibleContent>
+*   </Collapsible>
+* </AILabelContent>
+*/
+//#endregion
+export { AILabel, AILabelContent, AILabelTrigger };
+
+//# sourceMappingURL=ai-label.js.map

package/dist/components/ui/ai-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-label.js","names":[],"sources":["../../../src/components/ui/ai-label.tsx"],"sourcesContent":["/**\n * AILabel — the accessible entry point into an AI explanation.\n *\n * A thin composite over Popover: `AILabelTrigger` is a real, labelled\n * `Button` — a transparent `variant=\"ghost\"` button with a visible\n * `[sparkle] AI` label, not `AISparkle` alone (which is `aria-hidden` and\n * purely a brand mark — see its own file) and not an icon-only button\n * either. Deliberately `ghost`, not `variant=\"ai\"`'s filled AI Chip look\n * (Button's own AI Chip recipe) — the two need to read apart: the Chip is\n * an action, this is a marker/explainability trigger, and a filled pill\n * here would make them visually indistinguishable. The marker has visible\n * \"AI\" text, not just an accessible name, so the tag itself is the\n * explainability entry point a sighted user can find without hovering.\n * Opens `AILabelContent`, a Popover panel holding a short,\n * first-layer explanation.\n *\n * Marks genuine AI involvement only, never decoration — see manifest.json's\n * `ai_presence` convention for the full rule and every current AI-treatment\n * recipe. This is specifically the \"why am I seeing this\" affordance; other\n * recipes (Button variant=\"ai\", the AI Card outline, DataTable's row tint)\n * mark AI presence visually but don't need to explain anything on their own.\n */\n\nimport * as React from \"react\"\nimport { Undo2Icon } from \"lucide-react\"\n\nimport { AISparkle } from \"@/components/ui/ai-sparkle\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { cn } from \"@/lib/utils\"\n\n// `edited`/`onRevert` live on the root, not the trigger, so the trigger\n// AND the content both react from one place: while `edited`, the trigger\n// morphs into a ghost undo button and the content stops rendering — the\n// explanation is for AI's value, and once the user has overridden it there\n// is nothing left to explain, only something to restore.\nconst AILabelContext = React.createContext<{\n  edited: boolean\n  onRevert?: () => void\n  revertLabel: string\n}>({ edited: false, revertLabel: \"Undo edit, restore AI value\" })\n\nfunction AILabel({\n  edited = false,\n  onRevert,\n  revertLabel = \"Undo edit, restore AI value\",\n  ...props\n}: React.ComponentProps<typeof Popover> & {\n  /** True once the user has changed the AI-filled value away from what AI produced. Morphs AILabelTrigger into a ghost undo button (calling `onRevert`) and hides AILabelContent — one slot, two states. */\n  edited?: boolean\n  /** Restores the original AI-filled value. Required for the undo button to render; without it `edited` just hides the marker. */\n  onRevert?: () => void\n  /** Accessible name of the undo button; make it specific when there's more than one AI-filled field on the page. */\n  revertLabel?: string\n}) {\n  const context = React.useMemo(\n    () => ({ edited, onRevert, revertLabel }),\n    [edited, onRevert, revertLabel]\n  )\n  return (\n    <AILabelContext.Provider value={context}>\n      <Popover data-slot=\"ai-label\" {...props} />\n    </AILabelContext.Provider>\n  )\n}\n\ntype AILabelTriggerBaseProps = Omit<\n  React.ComponentProps<typeof Button>,\n  \"variant\" | \"size\" | \"children\" | \"asChild\" | \"aria-label\"\n>\n\n// Two axes, same as Button: `size` (\"default\" | \"sm\") is how tall the\n// marker is; `iconOnly` drops the visible \"AI\" text and leaves just the\n// sparkle, square, at that same size step. Icon-only is opt-in only — for\n// when a designer explicitly asks for it; the visible-text marker is the\n// default at every density. Like Button's own `iconOnly`, it needs an\n// `aria-label` since there's no text left for a screen reader to fall back\n// on; with the visible \"AI\" text, `aria-label` stays optional (only for a\n// more specific name than \"AI\").\n//\n// `sm` renders at Button's `xs` step (24px, h-6), not Button's own `sm`\n// (28px, h-7) — AILabelTrigger's \"sm\" is its own size name, not a literal\n// passthrough of Button's. 24px is a deliberate floor, not a shrink for\n// its own sake: it's the exact minimum WCAG 2.5.8 (AA) requires (24×24 CSS\n// px), which the marker clears on both axes since the visible \"AI\" text\n// keeps its rendered width well over 24px regardless of height — so this\n// is legal at every step down to here, just with no margin left below it.\n// Matching this to the fixed-height label row in Field/FieldLabel and\n// Field/FieldLegend (their own `aiLabel` slot) is exactly why this exists:\n// one component-level default instead of a `className=\"h-6\"` override at\n// every call site.\ntype AILabelTriggerSize = \"default\" | \"sm\"\nconst BUTTON_SIZE_BY_AILABEL_TRIGGER_SIZE = {\n  default: \"default\",\n  sm: \"xs\",\n} as const\ntype AILabelTriggerProps = AILabelTriggerBaseProps & {\n  size?: AILabelTriggerSize\n} & (\n    | { iconOnly: true; \"aria-label\": string }\n    | { iconOnly?: false; \"aria-label\"?: string }\n  )\n\n// The undo button is the same size step as the marker it replaces, just\n// square (`iconOnly`) — so the slot keeps its footprint when they swap.\n\nfunction AILabelTrigger({\n  className,\n  size = \"sm\",\n  iconOnly = false,\n  ...props\n}: AILabelTriggerProps) {\n  const { edited, onRevert, revertLabel } = React.useContext(AILabelContext)\n  const buttonSize = BUTTON_SIZE_BY_AILABEL_TRIGGER_SIZE[size]\n\n  // Overridden by the user: same slot, same footprint (the matching icon-*\n  // size, so the row doesn't shift when the two states swap), but a plain\n  // ghost undo button instead of the marker — and NOT a PopoverTrigger, so\n  // there's no popover to open. `onRevert` is what makes this an undo;\n  // without it there's nothing to restore, so the slot just renders empty.\n  if (edited) {\n    if (!onRevert) return null\n    // Drop the marker's own aria-label — the undo button has its own name.\n    const rest = Object.fromEntries(\n      Object.entries(props).filter(([key]) => key !== \"aria-label\")\n    )\n    return (\n      <Button\n        type=\"button\"\n        variant=\"ghost\"\n        size={buttonSize}\n        iconOnly\n        aria-label={revertLabel}\n        data-slot=\"ai-label-revert\"\n        className={className}\n        onClick={onRevert}\n        {...(rest as Omit<\n          React.ComponentProps<typeof Button>,\n          \"size\" | \"aria-label\"\n        >)}\n      >\n        <Undo2Icon />\n      </Button>\n    )\n  }\n\n  // variant=\"ghost\", not \"ai\" — a filled AI Chip (Button's own AI Chip\n  // recipe: variant=\"ai\" rounded-full) is visually near-identical to this,\n  // and the two need to read apart: the Chip is an action, this is a\n  // marker/explainability trigger. Visible \"AI\" text is the accessible\n  // name (WCAG 2.5.3 label-in-name) — pass aria-label yourself only to say\n  // something more specific than \"AI\". With `iconOnly` there's no visible\n  // text at all (just the sparkle), so `aria-label` is required the same\n  // way Button's own `iconOnly` requires it. Two explicit branches (not a\n  // single computed `iconOnly`) because Button's prop type is a\n  // discriminated union keyed on the literal, which a boolean can't satisfy.\n  if (iconOnly) {\n    const { \"aria-label\": ariaLabel, ...rest } = props as {\n      \"aria-label\": string\n    }\n    return (\n      <PopoverTrigger asChild>\n        <Button\n          variant=\"ghost\"\n          size={buttonSize}\n          iconOnly\n          aria-label={ariaLabel}\n          className={className}\n          {...rest}\n        >\n          <AISparkle />\n        </Button>\n      </PopoverTrigger>\n    )\n  }\n\n  return (\n    <PopoverTrigger asChild>\n      <Button\n        variant=\"ghost\"\n        size={buttonSize}\n        className={className}\n        {...(props as Omit<\n          React.ComponentProps<typeof Button>,\n          \"size\" | \"iconOnly\" | \"asChild\"\n        >)}\n      >\n        <AISparkle data-icon=\"inline-start\" />\n        AI\n      </Button>\n    </PopoverTrigger>\n  )\n}\n\nfunction AILabelContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof PopoverContent>) {\n  const { edited } = React.useContext(AILabelContext)\n  // Nothing to explain once the user has overridden the value.\n  if (edited) return null\n  return (\n    <PopoverContent\n      data-slot=\"ai-label-content\"\n      className={cn(\"w-80\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { AILabel, AILabelTrigger, AILabelContent }\n\n/**\n * WHEN TO USE\n * - Any specific AI-generated content or suggestion where a user might reasonably ask \"why am I seeing this\" — a DataTable AI-tinted row, an AI Card summary, an inline AI suggestion in a form\n * - As the accessible explainability entry point required alongside any other AI-presence styling (Button variant=\"ai\", the AI Card outline, DataTable's row tint) — those mark presence, this explains it\n *\n * NOT WHEN\n * - Marking AI presence with no explanation to give — use plain AISparkle or Button variant=\"ai\" instead; don't add AILabel just to decorate something as AI-flavored\n * - A full walkthrough or multi-step explanation — use a Dialog instead; AILabel's popover is for a short, first-layer summary, not a document\n *\n * KEY RULES\n * - size: \"default\" | \"sm\" (default) — the marker's height step, matched to the surrounding size/density; both\n *   render the visible `[sparkle] AI` text at Button's matching text size. These are the only two to pick from by default.\n * - iconOnly: drops the \"AI\" text and leaves just the sparkle, square, at that same size step. OPT-IN ONLY — use it\n *   solely when a designer explicitly asks for an icon-only marker, never as an automatic \"tight space\" fallback\n *   (DataTable keeps the visible text at every density). Icon-only is a shape, not a size — same two-axis split as\n *   Button's own `size` + `iconOnly`.\n * - Without `iconOnly` no `aria-label` is needed — the visible \"AI\" text is the accessible name; pass one yourself only\n *   for a more specific name. With `iconOnly` there's no visible text, so `aria-label` is required — enforced at the\n *   type level, same as Button.\n * - AISparkle inside the trigger stays `aria-hidden` (its own default) — the chip's visible \"AI\" text is what's\n *   announced, or with `iconOnly` the required `aria-label`.\n * - An AI-filled value the user can override is the `edited`/`onRevert` pair on AILabel itself,\n *   not a hand-rolled swap: pass `edited={value !== aiValue}` and `onRevert={() => setValue(aiValue)}`,\n *   and while edited the trigger morphs into a ghost `Undo2Icon` button at the matching icon size\n *   (same footprint, no layout shift) that restores the AI value, and AILabelContent stops\n *   rendering — nothing left to explain, only something to restore. `revertLabel` names the undo\n *   button (default \"Undo edit, restore AI value\"); make it specific with several AI-filled fields\n *   on one page. Input and Textarea (in the label row, beside FieldLabel), Select (beside the trigger)\n *   and Checkbox/RadioGroup (beside the option or legend) all use exactly this — see the AI/* stories.\n * - For a second, deeper layer of explanation, nest Collapsible/CollapsibleTrigger/CollapsibleContent inside AILabelContent (e.g. a \"Show more\" link) rather than opening a second popover — keep the deeper detail inside the same explanation surface, revealed only on request\n * - PopoverTitle/PopoverDescription inside AILabelContent wire up aria-labelledby/aria-describedby automatically, same as any other Popover\n *\n * USAGE\n * <AILabel>\n *   <AILabelTrigger />\n *   <AILabelContent>\n *     <PopoverHeader>\n *       <PopoverTitle>Why you're seeing this</PopoverTitle>\n *     </PopoverHeader>\n *     <PopoverDescription>\n *       Flagged because this patient's last visit was over 90 days ago.\n *     </PopoverDescription>\n *   </AILabelContent>\n * </AILabel>\n *\n * // Icon-only — only when a designer explicitly asks for it; aria-label required\n * <AILabelTrigger iconOnly aria-label=\"AI-suggested row\" />\n *\n * // AI-filled value the user can override: marker while untouched, undo once edited\n * <AILabel edited={value !== AI_VALUE} onRevert={() => setValue(AI_VALUE)}>\n *   <AILabelTrigger aria-label=\"AI-filled: why this value?\" />\n *   <AILabelContent>...</AILabelContent>\n * </AILabel>\n *\n * // With a second, deeper explanation layer\n * <AILabelContent>\n *   <PopoverHeader>\n *     <PopoverTitle>Why you're seeing this</PopoverTitle>\n *   </PopoverHeader>\n *   <PopoverDescription>Flagged for overdue follow-up.</PopoverDescription>\n *   <Collapsible>\n *     <CollapsibleTrigger asChild>\n *       <Button variant=\"link\" size=\"sm\">Show more</Button>\n *     </CollapsibleTrigger>\n *     <CollapsibleContent className=\"text-sm text-muted-foreground\">\n *       Based on the care-gap model, last-visit date, and current risk score.\n *     </CollapsibleContent>\n *   </Collapsible>\n * </AILabelContent>\n */\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCA,IAAM,iBAAiB,MAAM,cAI1B;CAAE,QAAQ;CAAO,aAAa;AAA8B,CAAC;AAEhE,SAAS,QAAQ,EACf,SAAS,OACT,UACA,cAAc,+BACd,GAAG,SAQF;CACD,MAAM,UAAU,MAAM,eACb;EAAE;EAAQ;EAAU;CAAY,IACvC;EAAC;EAAQ;EAAU;CAAW,CAChC;CACA,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;EAC9B,UAAA,oBAAC,SAAD;GAAS,aAAU;GAAW,GAAI;EAAQ,CAAA;CACnB,CAAA;AAE7B;AA4BA,IAAM,sCAAsC;CAC1C,SAAS;CACT,IAAI;AACN;AAWA,SAAS,eAAe,EACtB,WACA,OAAO,MACP,WAAW,OACX,GAAG,SACmB;CACtB,MAAM,EAAE,QAAQ,UAAU,gBAAgB,MAAM,WAAW,cAAc;CACzE,MAAM,aAAa,oCAAoC;CAOvD,IAAI,QAAQ;EACV,IAAI,CAAC,UAAU,OAAO;EAEtB,MAAM,OAAO,OAAO,YAClB,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAQ,CAAC,SAAS,QAAQ,YAAY,CAC9D;EACA,OACE,oBAAC,QAAD;GACE,MAAK;GACL,SAAQ;GACR,MAAM;GACN,UAAA;GACA,cAAY;GACZ,aAAU;GACC;GACX,SAAS;GACT,GAAK;GAKL,UAAA,oBAAC,WAAD,CAAY,CAAA;EACN,CAAA;CAEZ;CAYA,IAAI,UAAU;EACZ,MAAM,EAAE,cAAc,WAAW,GAAG,SAAS;EAG7C,OACE,oBAAC,gBAAD;GAAgB,SAAA;GACd,UAAA,oBAAC,QAAD;IACE,SAAQ;IACR,MAAM;IACN,UAAA;IACA,cAAY;IACD;IACX,GAAI;IAEJ,UAAA,oBAAC,WAAD,CAAY,CAAA;GACN,CAAA;EACM,CAAA;CAEpB;CAEA,OACE,oBAAC,gBAAD;EAAgB,SAAA;EACd,UAAA,qBAAC,QAAD;GACE,SAAQ;GACR,MAAM;GACK;GACX,GAAK;GAJP,UAAA,CASE,oBAAC,WAAD,EAAW,aAAU,eAAgB,CAAA,GAAC,IAEhC;;CACM,CAAA;AAEpB;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SAC2C;CAC9C,MAAM,EAAE,WAAW,MAAM,WAAW,cAAc;CAElD,IAAI,QAAQ,OAAO;CACnB,OACE,oBAAC,gBAAD;EACE,aAAU;EACV,WAAW,GAAG,QAAQ,SAAS;EAC/B,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ui/ai-sparkle.d.ts

@@ -0,0 +1,91 @@
+/**
+ * AISparkle — the single AI-identity mark ("Sara") for all AI-generated
+ * content and affordances: one gradient 4-pointed star (pink→orange, washed
+ * with yellow), per the AI Identity tokens in theme.css. Path/gradient/shine
+ * geometry is a hand-authored SVG — not lucide-react, since the two-layer
+ * gradient fill and animated states aren't expressible with a plain stroked
+ * icon.
+ *
+ * `size` is optional by design rather than a fixed pixel width/height —
+ * omit it to inherit whatever ambient icon sizing applies (e.g. a Button's
+ * `[&_svg]` rule), or set it for a token-derived size when used standalone.
+ *
+ * Purely a brand/identity mark — `aria-hidden` by default (see below) — not
+ * an accessible trigger for anything. It marks genuine AI involvement only,
+ * never decoration; see manifest.json's `ai_presence` convention for the
+ * full rule and every current AI-treatment recipe. When the surface needs
+ * an actual accessible entry point into an explanation (not just a visual
+ * marker), that's AILabel's job, not this icon's.
+ */
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const aiSparkleSizeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const aiSparkleStateVariants: (props?: ({
+    state?: "default" | "listening" | "short-processing" | "long-processing" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AISparkle({ className, size, state, tone, ...props }: React.ComponentProps<"svg"> & VariantProps<typeof aiSparkleSizeVariants> & VariantProps<typeof aiSparkleStateVariants> & {
+    /**
+     * "gradient" (default) — the branded two-layer pink/orange/yellow fill.
+     * "mono" — a flat `fill="currentColor"` star, no gradient defs, no
+     * long-processing shine (that needs the gradient's own white-wash
+     * layer). For placing the mark on top of an already-colored surface
+     * (e.g. AIAvatar's gradient background) where the full brand gradient
+     * would read as muddy — set the icon's own text color instead.
+     */
+    tone?: "gradient" | "mono";
+}): React.JSX.Element;
+export { AISparkle, aiSparkleSizeVariants, aiSparkleStateVariants };
+/**
+ * WHEN TO USE
+ * - AI message avatars, empty-state headers, agent badges, copilot-assisted
+ *   actions, AI-generated content markers.
+ * - Compose it as a Button's leading icon (`data-icon="inline-start"`) or a
+ *   small corner accent on an icon-only trigger.
+ *
+ * NOT WHEN
+ * - Generic decorative sparkle unrelated to AI — use lucide's `Sparkles`.
+ * - A loading spinner — use Spinner; AISparkle's `state` communicates AI
+ *   activity specifically, not generic async work.
+ * - Animated backgrounds or large decorative use — this is an identity mark,
+ *   not a motion asset.
+ *
+ * KEY RULES
+ * - size: sm | md | lg — optional. Leave it unset when composing inside Button
+ *   (its `[&_svg]` sizing takes over, same as any other icon) so it inherits
+ *   the ambient icon size; set it explicitly for a token-derived size
+ *   (size-4/5/6) when used standalone.
+ * - state: default | listening | short-processing | long-processing (default
+ *   "default") — each maps to its own keyframe animation in
+ *   src/styles/ai-sparkle.css (imported once via index.css, not per-usage):
+ *   listening bobs vertically, short-processing does one full rotation then
+ *   holds, long-processing pulses in scale AND sweeps a diagonal shine
+ *   across the star, clipped to its silhouette. These are custom keyframes,
+ *   not Tailwind's animate-bounce/spin/pulse — the motion curves and hold
+ *   points are specific to this mark. The shine's -50px..50px translate is
+ *   calibrated directly for this component's own 80x80 viewBox + 120x120
+ *   rect — no extra scaling wrapper needed. All three loop `infinite` for as
+ *   long as the state is active (not just long-processing — a slow
+ *   short-processing step or a long listening session runs past 5s just as
+ *   easily), so `ai-sparkle.css` falls every one of them back to the static
+ *   resting mark under `prefers-reduced-motion` (SC 2.2.2, Level A).
+ * - tone: gradient (default) | mono — gradient is the fixed brand fill, driven
+ *   by the `--color-ai-grad-*` / `--color-ai-wash*` tokens in theme.css, no
+ *   color props of its own. mono drops to a flat `fill="currentColor"` star
+ *   (no gradient defs, no long-processing shine) — set the icon's own text
+ *   color instead when it needs to sit on top of an already-colored surface
+ *   (e.g. AIAvatar's gradient background) where the full brand gradient
+ *   would read as muddy.
+ * - `aria-hidden` by default, matching every other decorative icon in this
+ *   system — pair it with real text, not as a standalone control.
+ *
+ * USAGE
+ * <Button variant="ai">
+ *   <AISparkle data-icon="inline-start" />
+ *   Summarize
+ * </Button>
+ *
+ * <AISparkle size="lg" state="short-processing" />
+ */
+//# sourceMappingURL=ai-sparkle.d.ts.map

package/dist/components/ui/ai-sparkle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-sparkle.d.ts","sourceRoot":"","sources":["../../../src/components/ui/ai-sparkle.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,QAAA,MAAM,qBAAqB;;8EAQzB,CAAA;AAEF,QAAA,MAAM,sBAAsB;;8EAY1B,CAAA;AAEF,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,IAAI,EACJ,KAAiB,EACjB,IAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAC5B,YAAY,CAAC,OAAO,qBAAqB,CAAC,GAC1C,YAAY,CAAC,OAAO,sBAAsB,CAAC,GAAG;IAC5C;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAA;CAC3B,qBA0FF;AAED,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG"}

package/dist/components/ui/ai-sparkle.js

@@ -0,0 +1,200 @@
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/ai-sparkle.tsx
+/**
+* AISparkle — the single AI-identity mark ("Sara") for all AI-generated
+* content and affordances: one gradient 4-pointed star (pink→orange, washed
+* with yellow), per the AI Identity tokens in theme.css. Path/gradient/shine
+* geometry is a hand-authored SVG — not lucide-react, since the two-layer
+* gradient fill and animated states aren't expressible with a plain stroked
+* icon.
+*
+* `size` is optional by design rather than a fixed pixel width/height —
+* omit it to inherit whatever ambient icon sizing applies (e.g. a Button's
+* `[&_svg]` rule), or set it for a token-derived size when used standalone.
+*
+* Purely a brand/identity mark — `aria-hidden` by default (see below) — not
+* an accessible trigger for anything. It marks genuine AI involvement only,
+* never decoration; see manifest.json's `ai_presence` convention for the
+* full rule and every current AI-treatment recipe. When the surface needs
+* an actual accessible entry point into an explanation (not just a visual
+* marker), that's AILabel's job, not this icon's.
+*/
+var STAR_PATH = "M40 5C40 24.33 55.67 40 75 40C55.67 40 40 55.67 40 75C40 55.67 24.33 40 5 40C24.33 40 40 24.33 40 5Z";
+var aiSparkleSizeVariants = cva("", { variants: { size: {
+	sm: "size-4",
+	md: "size-5",
+	lg: "size-6"
+} } });
+var aiSparkleStateVariants = cva("", {
+	variants: { state: {
+		default: "",
+		listening: "mmds-ai-sparkle-listening",
+		"short-processing": "mmds-ai-sparkle-short-processing",
+		"long-processing": "mmds-ai-sparkle-long-processing"
+	} },
+	defaultVariants: { state: "default" }
+});
+function AISparkle({ className, size, state = "default", tone = "gradient", ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsx("svg", {
+		"data-slot": "ai-sparkle",
+		"data-state": state,
+		"data-tone": tone,
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 80 80",
+		fill: "none",
+		className: cn("shrink-0", size && aiSparkleSizeVariants({ size }), aiSparkleStateVariants({ state }), className),
+		"aria-hidden": "true",
+		...props,
+		children: tone === "mono" ? /* @__PURE__ */ jsx("path", {
+			d: STAR_PATH,
+			fill: "currentColor"
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsxs("defs", { children: [
+				/* @__PURE__ */ jsxs("linearGradient", {
+					id: `${id}-grad`,
+					x1: "17.1875",
+					y1: "12.1875",
+					x2: "62.0313",
+					y2: "65",
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ jsx("stop", {
+						stopColor: "var(--color-ai-grad-from)",
+						stopOpacity: "var(--color-ai-grad-from-alpha)"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: "var(--color-ai-grad-to)"
+					})]
+				}),
+				/* @__PURE__ */ jsxs("linearGradient", {
+					id: `${id}-wash`,
+					x1: "17.1875",
+					y1: "12.1875",
+					x2: "62.0313",
+					y2: "65",
+					gradientUnits: "userSpaceOnUse",
+					children: [/* @__PURE__ */ jsx("stop", {
+						stopColor: "var(--color-ai-wash)",
+						stopOpacity: "0"
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "1",
+						stopColor: "var(--color-ai-wash)"
+					})]
+				}),
+				state === "long-processing" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("clipPath", {
+					id: `${id}-clip`,
+					children: /* @__PURE__ */ jsx("path", { d: STAR_PATH })
+				}), /* @__PURE__ */ jsxs("linearGradient", {
+					id: `${id}-shine`,
+					x1: "0",
+					y1: "0",
+					x2: "1",
+					y2: "1",
+					children: [
+						/* @__PURE__ */ jsx("stop", {
+							offset: "0",
+							stopColor: "#fff",
+							stopOpacity: "0"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "0.4",
+							stopColor: "#fff",
+							stopOpacity: "0"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "0.5",
+							stopColor: "#fff",
+							stopOpacity: "0.55"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "0.6",
+							stopColor: "#fff",
+							stopOpacity: "0"
+						}),
+						/* @__PURE__ */ jsx("stop", {
+							offset: "1",
+							stopColor: "#fff",
+							stopOpacity: "0"
+						})
+					]
+				})] })
+			] }),
+			/* @__PURE__ */ jsx("path", {
+				d: STAR_PATH,
+				fill: `url(#${id}-grad)`
+			}),
+			/* @__PURE__ */ jsx("path", {
+				d: STAR_PATH,
+				fill: `url(#${id}-wash)`,
+				opacity: "var(--color-ai-wash-alpha)"
+			}),
+			state === "long-processing" && /* @__PURE__ */ jsx("rect", {
+				x: "-20",
+				y: "-20",
+				width: "120",
+				height: "120",
+				fill: `url(#${id}-shine)`,
+				clipPath: `url(#${id}-clip)`,
+				className: "mmds-ai-sparkle-shine"
+			})
+		] })
+	});
+}
+/**
+* WHEN TO USE
+* - AI message avatars, empty-state headers, agent badges, copilot-assisted
+*   actions, AI-generated content markers.
+* - Compose it as a Button's leading icon (`data-icon="inline-start"`) or a
+*   small corner accent on an icon-only trigger.
+*
+* NOT WHEN
+* - Generic decorative sparkle unrelated to AI — use lucide's `Sparkles`.
+* - A loading spinner — use Spinner; AISparkle's `state` communicates AI
+*   activity specifically, not generic async work.
+* - Animated backgrounds or large decorative use — this is an identity mark,
+*   not a motion asset.
+*
+* KEY RULES
+* - size: sm | md | lg — optional. Leave it unset when composing inside Button
+*   (its `[&_svg]` sizing takes over, same as any other icon) so it inherits
+*   the ambient icon size; set it explicitly for a token-derived size
+*   (size-4/5/6) when used standalone.
+* - state: default | listening | short-processing | long-processing (default
+*   "default") — each maps to its own keyframe animation in
+*   src/styles/ai-sparkle.css (imported once via index.css, not per-usage):
+*   listening bobs vertically, short-processing does one full rotation then
+*   holds, long-processing pulses in scale AND sweeps a diagonal shine
+*   across the star, clipped to its silhouette. These are custom keyframes,
+*   not Tailwind's animate-bounce/spin/pulse — the motion curves and hold
+*   points are specific to this mark. The shine's -50px..50px translate is
+*   calibrated directly for this component's own 80x80 viewBox + 120x120
+*   rect — no extra scaling wrapper needed. All three loop `infinite` for as
+*   long as the state is active (not just long-processing — a slow
+*   short-processing step or a long listening session runs past 5s just as
+*   easily), so `ai-sparkle.css` falls every one of them back to the static
+*   resting mark under `prefers-reduced-motion` (SC 2.2.2, Level A).
+* - tone: gradient (default) | mono — gradient is the fixed brand fill, driven
+*   by the `--color-ai-grad-*` / `--color-ai-wash*` tokens in theme.css, no
+*   color props of its own. mono drops to a flat `fill="currentColor"` star
+*   (no gradient defs, no long-processing shine) — set the icon's own text
+*   color instead when it needs to sit on top of an already-colored surface
+*   (e.g. AIAvatar's gradient background) where the full brand gradient
+*   would read as muddy.
+* - `aria-hidden` by default, matching every other decorative icon in this
+*   system — pair it with real text, not as a standalone control.
+*
+* USAGE
+* <Button variant="ai">
+*   <AISparkle data-icon="inline-start" />
+*   Summarize
+* </Button>
+*
+* <AISparkle size="lg" state="short-processing" />
+*/
+//#endregion
+export { AISparkle, aiSparkleSizeVariants, aiSparkleStateVariants };
+
+//# sourceMappingURL=ai-sparkle.js.map