@dowel-ui/react 0.2.0 → 0.3.0

package/dist/components/ai-approval-request/ai-approval-request.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-approval-request.js","names":[],"sources":["../../../src/components/ai-approval-request/ai-approval-request.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId, useMemo, useState, type ComponentPropsWithRef, type ReactNode } from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The gate between an agent deciding to act and it acting.\n *\n * Two things separate this from the confirmations that already exist.\n *\n * The first is that the proposed arguments are editable. Every implementation\n * surveyed returns a boolean over a read-only payload, which forces a false\n * choice: approve a call whose recipient is wrong, or deny it and make the\n * model try again. \"Approve this, but fix the address first\" is the answer\n * people actually want, and it is only possible if the arguments are fields.\n * Edited values come back in the decision, and are marked as changed so an\n * audit trail can tell the model's proposal from the human's correction.\n *\n * The second is that it renders while the arguments are still arriving. The\n * common implementation returns null until the tool input is complete, which\n * means nothing is on screen at the moment approval becomes relevant and the\n * request appears abruptly, fully formed. Here the request is visible as it\n * forms, with the decision held until there is something whole to decide on.\n */\n\nexport type ApprovalScope = \"once\" | \"always\";\n\nexport type ApprovalDecision =\n  | {\n      approved: true;\n      scope: ApprovalScope;\n      arguments: Record<string, string>;\n      edited: string[];\n    }\n  | { approved: false; reason?: string };\n\nexport interface ApprovalField {\n  name: string;\n  label: string;\n  /** A textarea instead of a single line. For message bodies and prompts. */\n  multiline?: boolean;\n  /** Locked arguments are shown but not editable — an id, a resolved amount. */\n  readOnly?: boolean;\n}\n\nexport interface ApprovalRequestProps extends Omit<\n  ComponentPropsWithRef<\"section\">,\n  \"onSubmit\" | \"children\"\n> {\n  /** The tool the model wants to call, as it named it. */\n  tool: string;\n  /** What the call will do, in the reader's language rather than the API's. */\n  summary: string;\n  /** Proposed arguments. Missing keys are treated as still arriving. */\n  arguments: Record<string, string>;\n  /** Which arguments to show, in order, and which may be changed. */\n  fields: ApprovalField[];\n  onDecision: (decision: ApprovalDecision) => void;\n  /**\n   * True while the model is still producing the arguments. The request renders\n   * anyway; only the decision waits.\n   */\n  streaming?: boolean;\n  /**\n   * Said plainly above the controls when the call cannot be taken back. Not a\n   * severity colour — the sentence is the warning.\n   */\n  irreversible?: string;\n  /** Set once decided, to render the outcome instead of the controls. */\n  decision?: ApprovalDecision;\n  children?: ReactNode;\n}\n\nexport function ApprovalRequest({\n  className,\n  tool,\n  summary,\n  arguments: proposed,\n  fields,\n  onDecision,\n  streaming = false,\n  irreversible,\n  decision,\n  children,\n  ...props\n}: ApprovalRequestProps) {\n  const headingId = useId();\n  const [edits, setEdits] = useState<Record<string, string>>({});\n  const [denying, setDenying] = useState(false);\n  const [reason, setReason] = useState(\"\");\n\n  // The model's proposal with the human's corrections applied on top. Keeping\n  // them apart is what lets the component say which is which.\n  const values = useMemo(() => ({ ...proposed, ...edits }), [proposed, edits]);\n\n  const edited = useMemo(\n    () => Object.keys(edits).filter((name) => edits[name] !== proposed[name]),\n    [edits, proposed],\n  );\n\n  const missing = fields.filter((field) => proposed[field.name] === undefined);\n  const settled = !streaming && missing.length === 0;\n\n  if (decision) {\n    return (\n      <section\n        data-slot=\"approval-request\"\n        data-state={decision.approved ? \"approved\" : \"denied\"}\n        aria-labelledby={headingId}\n        className={cn(\n          \"rounded-lg border p-4 text-sm\",\n          decision.approved ? \"border-border bg-muted/40\" : \"border-border bg-muted/40\",\n          className,\n        )}\n        {...props}\n      >\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {summary}\n        </h3>\n        <p data-slot=\"approval-outcome\" className=\"mt-1 text-xs text-muted-foreground\">\n          {decision.approved\n            ? `Approved ${decision.scope === \"always\" ? \"for every call to this tool\" : \"once\"}` +\n              (decision.edited.length > 0\n                ? `, with ${String(decision.edited.length)} argument${decision.edited.length === 1 ? \"\" : \"s\"} corrected`\n                : \"\")\n            : `Denied${decision.reason ? `: ${decision.reason}` : \"\"}`}\n        </p>\n      </section>\n    );\n  }\n\n  return (\n    <section\n      data-slot=\"approval-request\"\n      data-state={settled ? \"pending\" : \"forming\"}\n      aria-labelledby={headingId}\n      // Busy while the arguments are still arriving, so a reader is told the\n      // request is not yet whole rather than acting on half of it.\n      aria-busy={!settled}\n      className={cn(\"rounded-lg border border-border bg-card p-4\", className)}\n      {...props}\n    >\n      <div className=\"flex flex-wrap items-baseline justify-between gap-2\">\n        <h3 id={headingId} className=\"text-sm font-medium\">\n          {summary}\n        </h3>\n        <code className=\"rounded bg-muted px-1.5 py-0.5 font-mono text-2xs text-muted-foreground\">\n          {tool}\n        </code>\n      </div>\n\n      <dl className=\"mt-3 flex flex-col gap-2.5\">\n        {fields.map((field) => {\n          const arrived = proposed[field.name] !== undefined;\n          const changed = edited.includes(field.name);\n\n          return (\n            <ApprovalArgument\n              key={field.name}\n              field={field}\n              value={values[field.name] ?? \"\"}\n              arrived={arrived}\n              changed={changed}\n              onChange={(next) => {\n                setEdits((current) => ({ ...current, [field.name]: next }));\n              }}\n            />\n          );\n        })}\n      </dl>\n\n      {children}\n\n      {irreversible ? (\n        <p data-slot=\"approval-warning\" className=\"mt-3 text-xs text-destructive\">\n          {irreversible}\n        </p>\n      ) : null}\n\n      {denying ? (\n        <div className=\"mt-3 flex flex-col gap-2\">\n          <label htmlFor={`${headingId}-reason`} className=\"text-xs text-muted-foreground\">\n            Why not? The model sees this.\n          </label>\n          <textarea\n            id={`${headingId}-reason`}\n            rows={2}\n            value={reason}\n            onChange={(event) => {\n              setReason(event.target.value);\n            }}\n            className={cn(\n              \"w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 text-sm\",\n              focusRing,\n            )}\n          />\n          <div className=\"flex flex-wrap gap-2\">\n            <Action\n              variant=\"destructive\"\n              onClick={() => {\n                onDecision({ approved: false, reason: reason.trim() || undefined });\n              }}\n            >\n              Deny\n            </Action>\n            <Action\n              onClick={() => {\n                setDenying(false);\n              }}\n            >\n              Back\n            </Action>\n          </div>\n        </div>\n      ) : (\n        <div className=\"mt-4 flex flex-wrap items-center gap-2\">\n          <Action\n            variant=\"primary\"\n            disabled={!settled}\n            onClick={() => {\n              onDecision({ approved: true, scope: \"once\", arguments: values, edited });\n            }}\n          >\n            {edited.length > 0 ? \"Approve with changes\" : \"Approve once\"}\n          </Action>\n\n          {/* Scope is a separate decision from approval, and blanket consent\n              should never be the easiest button to reach. */}\n          <Action\n            disabled={!settled}\n            onClick={() => {\n              onDecision({ approved: true, scope: \"always\", arguments: values, edited });\n            }}\n          >\n            Always allow {tool}\n          </Action>\n\n          <Action\n            onClick={() => {\n              setDenying(true);\n            }}\n          >\n            Deny…\n          </Action>\n\n          {!settled ? (\n            <span aria-live=\"polite\" className=\"text-xs text-muted-foreground\">\n              Waiting for the model to finish the request\n            </span>\n          ) : null}\n        </div>\n      )}\n    </section>\n  );\n}\n\nfunction ApprovalArgument({\n  field,\n  value,\n  arrived,\n  changed,\n  onChange,\n}: {\n  field: ApprovalField;\n  value: string;\n  arrived: boolean;\n  changed: boolean;\n  onChange: (value: string) => void;\n}) {\n  const id = useId();\n  const changedId = useId();\n  const editable = !field.readOnly && arrived;\n\n  return (\n    <div\n      data-slot=\"approval-argument\"\n      data-changed={changed || undefined}\n      className=\"flex flex-col gap-1\"\n    >\n      <dt className=\"flex items-baseline gap-1\">\n        <label htmlFor={editable ? id : undefined} className=\"text-xs text-muted-foreground\">\n          {field.label}\n        </label>\n        {/* Outside the label, and attached as a description instead. Inside it,\n            editing a field would rename the field — a screen reader user would\n            hear its accessible name change under them mid-edit. Marked in text\n            rather than by border colour alone, because an audit trail has to\n            tell the model's proposal from the human's correction. */}\n        {changed ? (\n          <span id={changedId} className=\"text-xs text-warning\">\n            · changed from the model&rsquo;s proposal\n          </span>\n        ) : null}\n      </dt>\n      <dd className=\"m-0\">\n        {!arrived ? (\n          <span\n            aria-hidden=\"true\"\n            className=\"block h-8 w-full animate-pulse-soft rounded-md bg-muted\"\n          />\n        ) : editable ? (\n          field.multiline ? (\n            <textarea\n              id={id}\n              aria-describedby={changed ? changedId : undefined}\n              rows={3}\n              value={value}\n              onChange={(event) => {\n                onChange(event.target.value);\n              }}\n              className={cn(\n                \"w-full resize-none rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs\",\n                changed && \"border-warning\",\n                focusRing,\n              )}\n            />\n          ) : (\n            <input\n              id={id}\n              type=\"text\"\n              aria-describedby={changed ? changedId : undefined}\n              value={value}\n              onChange={(event) => {\n                onChange(event.target.value);\n              }}\n              className={cn(\n                \"w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-xs\",\n                changed && \"border-warning\",\n                focusRing,\n              )}\n            />\n          )\n        ) : (\n          <p className=\"rounded-md bg-muted px-2 py-1.5 font-mono text-xs break-words\">\n            {value}\n          </p>\n        )}\n      </dd>\n    </div>\n  );\n}\n\nfunction Action({\n  className,\n  variant = \"default\",\n  ...props\n}: ComponentPropsWithRef<\"button\"> & { variant?: \"default\" | \"primary\" | \"destructive\" }) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border px-2.5 py-1 text-xs font-medium transition-colors\",\n        variant === \"primary\" &&\n          \"border-primary bg-primary text-primary-foreground hover:bg-primary-hover\",\n        variant === \"destructive\" &&\n          \"border-destructive bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        variant === \"default\" &&\n          \"border-input bg-background hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";;;;;;AA2EA,SAAgB,gBAAgB,EAC9B,WACA,MACA,SACA,WAAW,UACX,QACA,YACA,YAAY,OACZ,cACA,UACA,UACA,GAAG,SACoB;CACvB,MAAM,YAAY,MAAM;CACxB,MAAM,CAAC,OAAO,YAAY,SAAiC,CAAC,CAAC;CAC7D,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CAIvC,MAAM,SAAS,eAAe;EAAE,GAAG;EAAU,GAAG;CAAM,IAAI,CAAC,UAAU,KAAK,CAAC;CAE3E,MAAM,SAAS,cACP,OAAO,KAAK,KAAK,CAAC,CAAC,QAAQ,SAAS,MAAM,UAAU,SAAS,KAAK,GACxE,CAAC,OAAO,QAAQ,CAClB;CAEA,MAAM,UAAU,OAAO,QAAQ,UAAU,SAAS,MAAM,UAAU,KAAA,CAAS;CAC3E,MAAM,UAAU,CAAC,aAAa,QAAQ,WAAW;CAEjD,IAAI,UACF,OACE,qBAAC,WAAD;EACE,aAAU;EACV,cAAY,SAAS,WAAW,aAAa;EAC7C,mBAAiB;EACjB,WAAW,GACT,iCACA,SAAS,WAAW,8BAA8B,6BAClD,SACF;EACA,GAAI;EATN,UAAA,CAWE,oBAAC,MAAD;GAAI,IAAI;GAAW,WAAU;GAC1B,UAAA;EACC,CAAA,GACJ,oBAAC,KAAD;GAAG,aAAU;GAAmB,WAAU;GACvC,UAAA,SAAS,WACN,YAAY,SAAS,UAAU,WAAW,gCAAgC,YACzE,SAAS,OAAO,SAAS,IACtB,UAAU,OAAO,SAAS,OAAO,MAAM,EAAE,WAAW,SAAS,OAAO,WAAW,IAAI,KAAK,IAAI,cAC5F,MACJ,SAAS,SAAS,SAAS,KAAK,SAAS,WAAW;EACvD,CAAA,CACI;;CAIb,OACE,qBAAC,WAAD;EACE,aAAU;EACV,cAAY,UAAU,YAAY;EAClC,mBAAiB;EAGjB,aAAW,CAAC;EACZ,WAAW,GAAG,+CAA+C,SAAS;EACtE,GAAI;EARN,UAAA;GAUE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,MAAD;KAAI,IAAI;KAAW,WAAU;KAC1B,UAAA;IACC,CAAA,GACJ,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,CACH;;GAEL,oBAAC,MAAD;IAAI,WAAU;IACX,UAAA,OAAO,KAAK,UAAU;KACrB,MAAM,UAAU,SAAS,MAAM,UAAU,KAAA;KACzC,MAAM,UAAU,OAAO,SAAS,MAAM,IAAI;KAE1C,OACE,oBAAC,kBAAD;MAES;MACP,OAAO,OAAO,MAAM,SAAS;MACpB;MACA;MACT,WAAW,SAAS;OAClB,UAAU,aAAa;QAAE,GAAG;SAAU,MAAM,OAAO;OAAK,EAAE;MAC5D;KACD,GARM,MAAM,IAQZ;IAEL,CAAC;GACC,CAAA;GAEH;GAEA,eACC,oBAAC,KAAD;IAAG,aAAU;IAAmB,WAAU;IACvC,UAAA;GACA,CAAA,IACD;GAEH,UACC,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,SAAD;MAAO,SAAS,GAAG,UAAU;MAAU,WAAU;MAAgC,UAAA;KAE1E,CAAA;KACP,oBAAC,YAAD;MACE,IAAI,GAAG,UAAU;MACjB,MAAM;MACN,OAAO;MACP,WAAW,UAAU;OACnB,UAAU,MAAM,OAAO,KAAK;MAC9B;MACA,WAAW,GACT,uFACA,SACF;KACD,CAAA;KACD,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OACE,SAAQ;OACR,eAAe;QACb,WAAW;SAAE,UAAU;SAAO,QAAQ,OAAO,KAAK,KAAK,KAAA;QAAU,CAAC;OACpE;OACD,UAAA;MAEO,CAAA,GACR,oBAAC,QAAD;OACE,eAAe;QACb,WAAW,KAAK;OAClB;OACD,UAAA;MAEO,CAAA,CACL;;IACF;GAEL,CAAA,IAAA,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,oBAAC,QAAD;MACE,SAAQ;MACR,UAAU,CAAC;MACX,eAAe;OACb,WAAW;QAAE,UAAU;QAAM,OAAO;QAAQ,WAAW;QAAQ;OAAO,CAAC;MACzE;MAEC,UAAA,OAAO,SAAS,IAAI,yBAAyB;KACxC,CAAA;KAIR,qBAAC,QAAD;MACE,UAAU,CAAC;MACX,eAAe;OACb,WAAW;QAAE,UAAU;QAAM,OAAO;QAAU,WAAW;QAAQ;OAAO,CAAC;MAC3E;MAJF,UAAA,CAKC,iBACe,IACR;;KAER,oBAAC,QAAD;MACE,eAAe;OACb,WAAW,IAAI;MACjB;MACD,UAAA;KAEO,CAAA;KAEP,CAAC,UACA,oBAAC,QAAD;MAAM,aAAU;MAAS,WAAU;MAAgC,UAAA;KAE7D,CAAA,IACJ;IACD;;EAEA;;AAEb;AAEA,SAAS,iBAAiB,EACxB,OACA,OACA,SACA,SACA,YAOC;CACD,MAAM,KAAK,MAAM;CACjB,MAAM,YAAY,MAAM;CACxB,MAAM,WAAW,CAAC,MAAM,YAAY;CAEpC,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,WAAU;EAHZ,UAAA,CAKE,qBAAC,MAAD;GAAI,WAAU;GAAd,UAAA,CACE,oBAAC,SAAD;IAAO,SAAS,WAAW,KAAK,KAAA;IAAW,WAAU;IAClD,UAAA,MAAM;GACF,CAAA,GAMN,UACC,oBAAC,QAAD;IAAM,IAAI;IAAW,WAAU;IAAuB,UAAA;GAEhD,CAAA,IACJ,IACF;EACJ,CAAA,GAAA,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA,CAAC,UACA,oBAAC,QAAD;IACE,eAAY;IACZ,WAAU;GACX,CAAA,IACC,WACF,MAAM,YACJ,oBAAC,YAAD;IACM;IACJ,oBAAkB,UAAU,YAAY,KAAA;IACxC,MAAM;IACC;IACP,WAAW,UAAU;KACnB,SAAS,MAAM,OAAO,KAAK;IAC7B;IACA,WAAW,GACT,iGACA,WAAW,kBACX,SACF;GACD,CAAA,IAED,oBAAC,SAAD;IACM;IACJ,MAAK;IACL,oBAAkB,UAAU,YAAY,KAAA;IACjC;IACP,WAAW,UAAU;KACnB,SAAS,MAAM,OAAO,KAAK;IAC7B;IACA,WAAW,GACT,qFACA,WAAW,kBACX,SACF;GACD,CAAA,IAGH,oBAAC,KAAD;IAAG,WAAU;IACV,UAAA;GACA,CAAA;EAEH,CAAA,CACD;;AAET;AAEA,SAAS,OAAO,EACd,WACA,UAAU,WACV,GAAG,SACqF;CACxF,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,GACT,uEACA,YAAY,aACV,4EACF,YAAY,iBACV,yFACF,YAAY,aACV,2EACF,WACA,gBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/ai-approval-request/index.d.ts

@@ -0,0 +1,2 @@
+import { ApprovalDecision, ApprovalField, ApprovalRequest, ApprovalRequestProps, ApprovalScope } from "./ai-approval-request.js";
+export { type ApprovalDecision, type ApprovalField, ApprovalRequest, type ApprovalRequestProps, type ApprovalScope };

package/dist/components/ai-approval-request/index.js

@@ -0,0 +1,2 @@
+import { ApprovalRequest } from "./ai-approval-request.js";
+export { ApprovalRequest };

package/dist/components/ai-approval-request/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/ai-approval-request/meta.ts
+const meta = defineMeta({
+	name: "ai-approval-request",
+	title: "AI Approval Request",
+	description: "Approve a tool call — after correcting the arguments the model got wrong.",
+	category: "ai",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["ai-approval-request.tsx"],
+	a11y: "The proposed arguments are a description list of real labelled form controls, so each value is associated with its name and editable ones are reachable by keyboard. A corrected argument is marked in text rather than by border colour alone, because an audit trail has to distinguish the model's proposal from the human's edit. The request is aria-busy while arguments are still arriving and the decision controls stay disabled until it is whole — rendering nothing until then, as the common implementation does, means nothing is on screen at the moment approval becomes relevant. Irreversibility is stated as a sentence, never as a severity colour."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/ai-approval-request/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-approval-request/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-approval-request\",\n  title: \"AI Approval Request\",\n  description: \"Approve a tool call — after correcting the arguments the model got wrong.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"ai-approval-request.tsx\"],\n  a11y:\n    \"The proposed arguments are a description list of real labelled form controls, so each value \" +\n    \"is associated with its name and editable ones are reachable by keyboard. A corrected \" +\n    \"argument is marked in text rather than by border colour alone, because an audit trail has \" +\n    \"to distinguish the model's proposal from the human's edit. The request is aria-busy while \" +\n    \"arguments are still arriving and the decision controls stay disabled until it is whole — \" +\n    \"rendering nothing until then, as the common implementation does, means nothing is on screen \" +\n    \"at the moment approval becomes relevant. Irreversibility is stated as a sentence, never as a \" +\n    \"severity colour.\",\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,yBAAyB;CACjC,MACE;AAQJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ai-response.d.ts","names":[],"sources":["../../../src/components/ai-response/ai-response.tsx"],"mappings":";;;;;;;;;;;;;;UAkBiB,sBAAsB;;EAErC;;iBAGc,WAAW,WAAW,WAAW,aAAa,SAAS,gCAAa,IAAA;;;iBAwBpE,gBAAgB,cAAc,SAAS,gDAA6B,IAAA;;;;;;;;UAqBnE,+BAA+B;EAC9C;;iBAGc,oBACd,WACA,UACG,SACF,yCAAsB,IAAA"}
+{"version":3,"file":"ai-response.d.ts","names":[],"sources":["../../../src/components/ai-response/ai-response.tsx"],"mappings":";;;;;;;;;;;;;;UAkBiB,sBAAsB;;EAErC;;iBAGc,WAAW,WAAW,WAAW,aAAa,SAAS,gCAAa,IAAA;;;iBAwBpE,gBAAgB,cAAc,SAAS,gDAA6B,IAAA;;;;;;;;UAsBnE,+BAA+B;EAC9C;;iBAGc,oBACd,WACA,UACG,SACF,yCAAsB,IAAA"}

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

@@ -17,6 +17,7 @@ function ResponseCaret({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "response-caret",
 		"aria-hidden": "true",
+		"data-motion": "indicator",
 		className: cn("ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] animate-caret bg-current align-baseline", className),
 		...props
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"ai-response.js","names":[],"sources":["../../../src/components/ai-response/ai-response.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The text of an assistant response.\n *\n * Renders plain text with paragraph whitespace preserved. Markdown is\n * deliberately not parsed here: a Markdown renderer is a dependency, a security\n * decision about raw HTML, and a styling surface all at once, and every product\n * makes those differently. Pass already-rendered content as children when you\n * need it — the prose styling below applies either way.\n *\n * Not a live region, and not by omission. See the note on `Conversation`:\n * announcing streamed text token by token is unusable with a screen reader.\n */\nexport interface ResponseProps extends ComponentPropsWithRef<\"div\"> {\n  /** Shows the caret. Purely visual — it carries no announcement. */\n  streaming?: boolean;\n}\n\nexport function Response({ className, streaming, children, ...props }: ResponseProps) {\n  return (\n    <div\n      data-slot=\"response\"\n      data-streaming={streaming || undefined}\n      className={cn(\n        \"text-sm leading-relaxed whitespace-pre-wrap text-foreground\",\n        // Minimal prose styling for consumers who pass rendered Markdown.\n        \"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4\",\n        \"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em]\",\n        \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5\",\n        \"[&_p+p]:mt-3\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {streaming ? <ResponseCaret /> : null}\n    </div>\n  );\n}\n\n/** The trailing cursor. Decorative — the streaming state is announced, if at\n * all, through ConversationStatus. */\nexport function ResponseCaret({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"response-caret\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] animate-caret bg-current align-baseline\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Shown while waiting for the first token.\n *\n * A distinct state from streaming: nothing has arrived yet, so there is no text\n * to show a caret after. Labelled for assistive technology because, unlike the\n * caret, this is the only thing on screen.\n */\nexport interface ThinkingIndicatorProps extends ComponentPropsWithRef<\"div\"> {\n  label?: string;\n}\n\nexport function ThinkingIndicator({\n  className,\n  label = \"Thinking\",\n  ...props\n}: ThinkingIndicatorProps) {\n  return (\n    <div\n      data-slot=\"thinking-indicator\"\n      className={cn(\"flex items-center gap-1.5 text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          aria-hidden=\"true\"\n          className=\"size-1.5 animate-pulse-soft rounded-full bg-current\"\n          style={{ animationDelay: `${String(index * 160)}ms` }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAuBA,SAAgB,SAAS,EAAE,WAAW,WAAW,UAAU,GAAG,SAAwB;CACpF,OACE,qBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa,KAAA;EAC7B,WAAW,GACT,+DAEA,+DACA,6GACA,wFACA,gBACA,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACA,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,IAC9B;;AAET;;;AAIA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAwC;CACpF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAaA,SAAgB,kBAAkB,EAChC,WACA,QAAQ,YACR,GAAG,SACsB;CACzB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;EAHN,UAAA,CAKE,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,GACtC;GAAC;GAAG;GAAG;EAAC,CAAC,CAAC,KAAK,UACd,oBAAC,QAAD;GAEE,eAAY;GACZ,WAAU;GACV,OAAO,EAAE,gBAAgB,GAAG,OAAO,QAAQ,GAAG,EAAE,IAAI;EACrD,GAJM,KAIN,CACF,CACE;;AAET"}
+{"version":3,"file":"ai-response.js","names":[],"sources":["../../../src/components/ai-response/ai-response.tsx"],"sourcesContent":["\"use client\";\n\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The text of an assistant response.\n *\n * Renders plain text with paragraph whitespace preserved. Markdown is\n * deliberately not parsed here: a Markdown renderer is a dependency, a security\n * decision about raw HTML, and a styling surface all at once, and every product\n * makes those differently. Pass already-rendered content as children when you\n * need it — the prose styling below applies either way.\n *\n * Not a live region, and not by omission. See the note on `Conversation`:\n * announcing streamed text token by token is unusable with a screen reader.\n */\nexport interface ResponseProps extends ComponentPropsWithRef<\"div\"> {\n  /** Shows the caret. Purely visual — it carries no announcement. */\n  streaming?: boolean;\n}\n\nexport function Response({ className, streaming, children, ...props }: ResponseProps) {\n  return (\n    <div\n      data-slot=\"response\"\n      data-streaming={streaming || undefined}\n      className={cn(\n        \"text-sm leading-relaxed whitespace-pre-wrap text-foreground\",\n        // Minimal prose styling for consumers who pass rendered Markdown.\n        \"[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4\",\n        \"[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em]\",\n        \"[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5\",\n        \"[&_p+p]:mt-3\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      {streaming ? <ResponseCaret /> : null}\n    </div>\n  );\n}\n\n/** The trailing cursor. Decorative — the streaming state is announced, if at\n * all, through ConversationStatus. */\nexport function ResponseCaret({ className, ...props }: ComponentPropsWithRef<\"span\">) {\n  return (\n    <span\n      data-slot=\"response-caret\"\n      aria-hidden=\"true\"\n      data-motion=\"indicator\"\n      className={cn(\n        \"ml-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] animate-caret bg-current align-baseline\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Shown while waiting for the first token.\n *\n * A distinct state from streaming: nothing has arrived yet, so there is no text\n * to show a caret after. Labelled for assistive technology because, unlike the\n * caret, this is the only thing on screen.\n */\nexport interface ThinkingIndicatorProps extends ComponentPropsWithRef<\"div\"> {\n  label?: string;\n}\n\nexport function ThinkingIndicator({\n  className,\n  label = \"Thinking\",\n  ...props\n}: ThinkingIndicatorProps) {\n  return (\n    <div\n      data-slot=\"thinking-indicator\"\n      className={cn(\"flex items-center gap-1.5 text-sm text-muted-foreground\", className)}\n      {...props}\n    >\n      <span className=\"sr-only\">{label}</span>\n      {[0, 1, 2].map((index) => (\n        <span\n          key={index}\n          aria-hidden=\"true\"\n          className=\"size-1.5 animate-pulse-soft rounded-full bg-current\"\n          style={{ animationDelay: `${String(index * 160)}ms` }}\n        />\n      ))}\n    </div>\n  );\n}\n"],"mappings":";;;;AAuBA,SAAgB,SAAS,EAAE,WAAW,WAAW,UAAU,GAAG,SAAwB;CACpF,OACE,qBAAC,OAAD;EACE,aAAU;EACV,kBAAgB,aAAa,KAAA;EAC7B,WAAW,GACT,+DAEA,+DACA,6GACA,wFACA,gBACA,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACA,YAAY,oBAAC,eAAD,CAAgB,CAAA,IAAI,IAC9B;;AAET;;;AAIA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAwC;CACpF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,eAAY;EACZ,eAAY;EACZ,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAaA,SAAgB,kBAAkB,EAChC,WACA,QAAQ,YACR,GAAG,SACsB;CACzB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;EAHN,UAAA,CAKE,oBAAC,QAAD;GAAM,WAAU;GAAW,UAAA;EAAY,CAAA,GACtC;GAAC;GAAG;GAAG;EAAC,CAAC,CAAC,KAAK,UACd,oBAAC,QAAD;GAEE,eAAY;GACZ,WAAU;GACV,OAAO,EAAE,gBAAgB,GAAG,OAAO,QAAQ,GAAG,EAAE,IAAI;EACrD,GAJM,KAIN,CACF,CACE;;AAET"}

package/dist/components/ai-structured-output/ai-structured-output.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-structured-output.d.ts","names":[],"sources":["../../../src/components/ai-structured-output/ai-structured-output.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;KA+BY;UAEK;;EAEf;EACA;;EAEA;;UA6Be,8BAA8B,KAAK;;EAElD,QAAQ;;EAER,OAAO;;;;;EAKP;;;;;EAKA;;EAEA,SAAS;EACT,eAAe,gBAAgB;EAC/B,WAAW;;iBAGG,mBACd,WACA,QACA,OACA,WACA,SACA,QACA,aACA,aACG,SACF,wCAAqB,IAAA;UAiDP,6BAA6B,KAAK;EACjD;EACA,WAAW;;;;;;;;iBASG,kBAAkB,WAAW,MAAM,aAAa,SAAS,uCAAoB,IAAA;;;;;;;iBAoD7E,uBACd,WACA,OAAO,YACP,aACG,SACF;EAA+B;EAAe;oBAAmB,IAAA;;iBAoBpD,uBAAuB,cAAc,SAAS,6CAA0B,IAAA"}
+{"version":3,"file":"ai-structured-output.d.ts","names":[],"sources":["../../../src/components/ai-structured-output/ai-structured-output.tsx"],"mappings":";;;;;;;;;;;;;;;;;;;;KAgCY;UAEK;;EAEf;EACA;;EAEA;;UA6Be,8BAA8B,KAAK;;EAElD,QAAQ;;EAER,OAAO;;;;;EAKP;;;;;EAKA;;EAEA,SAAS;EACT,eAAe,gBAAgB;EAC/B,WAAW;;iBAGG,mBACd,WACA,QACA,OACA,WACA,SACA,QACA,aACA,aACG,SACF,wCAAqB,IAAA;UAiDP,6BAA6B,KAAK;EACjD;EACA,WAAW;;;;;;;;iBASG,kBAAkB,WAAW,MAAM,aAAa,SAAS,uCAAoB,IAAA;;;;;;;iBA2E7E,uBACd,WACA,OAAO,YACP,aACG,SACF;EAA+B;EAAe;oBAAmB,IAAA;;iBAoBpD,uBAAuB,cAAc,SAAS,6CAA0B,IAAA"}

package/dist/components/ai-structured-output/ai-structured-output.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../../lib/utils.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useMemo } from "react";
+import { createContext, useContext, useMemo, useState } from "react";
 //#region src/components/ai-structured-output/ai-structured-output.tsx
 const StructuredOutputContext = createContext(null);
 function useStructuredOutputContext(component) {
@@ -72,9 +72,16 @@ function StructuredField({ className, name, children, ...props }) {
 	if (!field) throw new Error(`StructuredField "${name}" is not declared in the fields prop.`);
 	const state = stateOf(name);
 	const raw = value[name];
+	const [seenState, setSeenState] = useState(state);
+	const [hasSettled, setHasSettled] = useState(false);
+	if (seenState !== state) {
+		setSeenState(state);
+		if (state === "settled" && seenState !== "settled") setHasSettled(true);
+	}
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "structured-field",
 		"data-state": state,
+		"data-settled": hasSettled || void 0,
 		"data-field": name,
 		className: cn("flex flex-col gap-1", className),
 		...props,
@@ -88,7 +95,11 @@ function StructuredField({ className, name, children, ...props }) {
 				"data-slot": "structured-field-placeholder",
 				"aria-hidden": "true",
 				className: "block h-4 w-24 animate-pulse-soft rounded bg-muted"
-			}) : children ?? formatValue(raw, name)
+			}) : /* @__PURE__ */ jsx("span", {
+				"data-slot": "structured-field-value",
+				className: cn(hasSettled && "inline-block animate-settle"),
+				children: children ?? formatValue(raw, name)
+			})
 		})]
 	});
 }

package/dist/components/ai-structured-output/ai-structured-output.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-structured-output.js","names":[],"sources":["../../../src/components/ai-structured-output/ai-structured-output.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * An object arriving field by field from the model.\n *\n * Most AI features inside real software are not chatbots. They are invoice\n * extraction, CRM enrichment, resume parsing, form autofill — a schema goes in\n * and a filled object comes back. Every one of them streams a partial object\n * into a layout, and almost every one reflows on each token because the fields\n * appear as they arrive.\n *\n * The honest limitation, stated here rather than discovered later: there is no\n * per-field completion signal anywhere in the stack. A streaming API hands you\n * successive partial snapshots, and a string that has stopped growing is\n * indistinguishable from one still arriving. So this component does not pretend\n * to know. It takes the field list up front, reserves the layout from it, and\n * lets the caller say which fields are settled — defaulting to the rule that a\n * field is settled once a later field has appeared, which is true of\n * depth-first JSON streaming and is documented rather than assumed silently.\n */\n\nexport type FieldState = \"pending\" | \"streaming\" | \"settled\" | \"error\";\n\nexport interface OutputField {\n  /** Key in the streamed object. */\n  name: string;\n  label: string;\n  /** Rough height reserved before the value arrives, in lines. */\n  lines?: number;\n}\n\ninterface StructuredOutputContextValue {\n  fields: OutputField[];\n  value: Record<string, unknown>;\n  stateOf: (name: string) => FieldState;\n  formatValue: (value: unknown, name: string) => string;\n}\n\nconst StructuredOutputContext = createContext<StructuredOutputContextValue | null>(null);\n\nfunction useStructuredOutputContext(component: string): StructuredOutputContextValue {\n  const context = useContext(StructuredOutputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <StructuredOutput>.`);\n  }\n  return context;\n}\n\nfunction defaultFormat(value: unknown): string {\n  if (value === null || value === undefined) return \"\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (typeof value === \"boolean\") return value ? \"Yes\" : \"No\";\n  if (Array.isArray(value)) return value.map(defaultFormat).join(\", \");\n  return JSON.stringify(value);\n}\n\nexport interface StructuredOutputProps extends Omit<ComponentPropsWithRef<\"dl\">, \"children\"> {\n  /** Declared up front, so layout is reserved before anything arrives. */\n  fields: OutputField[];\n  /** The latest partial snapshot. */\n  value: Record<string, unknown>;\n  /**\n   * True while more of the object is still expected. When false every present\n   * field is settled, which is the only completion signal that is ever certain.\n   */\n  streaming?: boolean;\n  /**\n   * Fields the caller knows are finished. Supply this when the API gives a\n   * real signal; otherwise the default rule applies.\n   */\n  settled?: string[];\n  /** Fields that failed to extract, with the reason shown in place. */\n  errors?: Record<string, string>;\n  formatValue?: (value: unknown, name: string) => string;\n  children?: ReactNode;\n}\n\nexport function StructuredOutput({\n  className,\n  fields,\n  value,\n  streaming = false,\n  settled,\n  errors,\n  formatValue = defaultFormat,\n  children,\n  ...props\n}: StructuredOutputProps) {\n  const stateOf = useMemo(() => {\n    const explicit = settled ? new Set(settled) : null;\n    const lastPresentIndex = fields.reduce(\n      (last, field, index) => (value[field.name] !== undefined ? index : last),\n      -1,\n    );\n\n    return (name: string): FieldState => {\n      if (errors?.[name]) return \"error\";\n\n      const index = fields.findIndex((field) => field.name === name);\n      const present = value[name] !== undefined;\n\n      if (!present) return \"pending\";\n      if (explicit) return explicit.has(name) ? \"settled\" : \"streaming\";\n      // No explicit signal. Once a later field has appeared this one cannot\n      // still be growing, which holds for depth-first JSON streaming. The last\n      // present field stays \"streaming\" until the caller says streaming ended.\n      if (!streaming) return \"settled\";\n      return index < lastPresentIndex ? \"settled\" : \"streaming\";\n    };\n  }, [fields, value, streaming, settled, errors]);\n\n  const context = useMemo<StructuredOutputContextValue>(\n    () => ({ fields, value, stateOf, formatValue }),\n    [fields, value, stateOf, formatValue],\n  );\n\n  return (\n    <StructuredOutputContext.Provider value={context}>\n      <dl\n        data-slot=\"structured-output\"\n        data-streaming={streaming || undefined}\n        // Fields arrive one at a time and each is a small, self-contained fact,\n        // so the region is polite and additive rather than re-reading the whole\n        // object on every token.\n        aria-live=\"polite\"\n        aria-busy={streaming}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {children ??\n          fields.map((field) => <StructuredField key={field.name} name={field.name} />)}\n      </dl>\n    </StructuredOutputContext.Provider>\n  );\n}\n\nexport interface StructuredFieldProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  name: string;\n  children?: ReactNode;\n}\n\n/**\n * One field: its label, its value, and the space it will occupy before it has\n * one.\n *\n * The reserved height is what stops the layout jumping as the object fills in.\n */\nexport function StructuredField({ className, name, children, ...props }: StructuredFieldProps) {\n  const { fields, value, stateOf, formatValue } = useStructuredOutputContext(\"StructuredField\");\n\n  const field = fields.find((candidate) => candidate.name === name);\n  if (!field) {\n    throw new Error(`StructuredField \"${name}\" is not declared in the fields prop.`);\n  }\n\n  const state = stateOf(name);\n  const raw = value[name];\n\n  return (\n    <div\n      data-slot=\"structured-field\"\n      data-state={state}\n      data-field={name}\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    >\n      <dt className=\"text-xs text-muted-foreground\">{field.label}</dt>\n      <dd\n        className={cn(\n          \"m-0 text-sm\",\n          state === \"pending\" && \"text-muted-foreground\",\n          state === \"error\" && \"text-destructive\",\n        )}\n        // Height is reserved from the declared line count so the value lands in\n        // space already set aside for it rather than pushing the page down.\n        // Computed rather than left to calc() so the reserved height is a plain\n        // value that can be asserted and reasoned about.\n        style={{ minHeight: `${String((field.lines ?? 1) * 1.25)}rem` }}\n      >\n        {state === \"pending\" ? (\n          <span\n            data-slot=\"structured-field-placeholder\"\n            aria-hidden=\"true\"\n            className=\"block h-4 w-24 animate-pulse-soft rounded bg-muted\"\n          />\n        ) : (\n          (children ?? formatValue(raw, name))\n        )}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * A confidence score for one field.\n *\n * Rendered as text with the number, never as a bare colour, because \"how much\n * should I trust this\" is exactly the thing a colour cannot answer.\n */\nexport function StructuredConfidence({\n  className,\n  value: confidence,\n  lowBelow = 0.7,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & { value: number; lowBelow?: number }) {\n  const low = confidence < lowBelow;\n  const percent = new Intl.NumberFormat(undefined, {\n    style: \"percent\",\n    maximumFractionDigits: 0,\n  }).format(confidence);\n\n  return (\n    <p\n      data-slot=\"structured-confidence\"\n      data-low={low || undefined}\n      className={cn(\"text-xs\", low ? \"text-warning\" : \"text-muted-foreground\", className)}\n      {...props}\n    >\n      {low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`}\n    </p>\n  );\n}\n\n/** The reason a field could not be extracted, shown where the value would be. */\nexport function StructuredFieldError({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  return (\n    <p\n      data-slot=\"structured-field-error\"\n      className={cn(\"text-xs text-destructive\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ai-structured-output.js","names":[],"sources":["../../../src/components/ai-structured-output/ai-structured-output.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useMemo,\n  useState,\n  type ComponentPropsWithRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * An object arriving field by field from the model.\n *\n * Most AI features inside real software are not chatbots. They are invoice\n * extraction, CRM enrichment, resume parsing, form autofill — a schema goes in\n * and a filled object comes back. Every one of them streams a partial object\n * into a layout, and almost every one reflows on each token because the fields\n * appear as they arrive.\n *\n * The honest limitation, stated here rather than discovered later: there is no\n * per-field completion signal anywhere in the stack. A streaming API hands you\n * successive partial snapshots, and a string that has stopped growing is\n * indistinguishable from one still arriving. So this component does not pretend\n * to know. It takes the field list up front, reserves the layout from it, and\n * lets the caller say which fields are settled — defaulting to the rule that a\n * field is settled once a later field has appeared, which is true of\n * depth-first JSON streaming and is documented rather than assumed silently.\n */\n\nexport type FieldState = \"pending\" | \"streaming\" | \"settled\" | \"error\";\n\nexport interface OutputField {\n  /** Key in the streamed object. */\n  name: string;\n  label: string;\n  /** Rough height reserved before the value arrives, in lines. */\n  lines?: number;\n}\n\ninterface StructuredOutputContextValue {\n  fields: OutputField[];\n  value: Record<string, unknown>;\n  stateOf: (name: string) => FieldState;\n  formatValue: (value: unknown, name: string) => string;\n}\n\nconst StructuredOutputContext = createContext<StructuredOutputContextValue | null>(null);\n\nfunction useStructuredOutputContext(component: string): StructuredOutputContextValue {\n  const context = useContext(StructuredOutputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <StructuredOutput>.`);\n  }\n  return context;\n}\n\nfunction defaultFormat(value: unknown): string {\n  if (value === null || value === undefined) return \"\";\n  if (typeof value === \"string\") return value;\n  if (typeof value === \"number\" || typeof value === \"bigint\") return String(value);\n  if (typeof value === \"boolean\") return value ? \"Yes\" : \"No\";\n  if (Array.isArray(value)) return value.map(defaultFormat).join(\", \");\n  return JSON.stringify(value);\n}\n\nexport interface StructuredOutputProps extends Omit<ComponentPropsWithRef<\"dl\">, \"children\"> {\n  /** Declared up front, so layout is reserved before anything arrives. */\n  fields: OutputField[];\n  /** The latest partial snapshot. */\n  value: Record<string, unknown>;\n  /**\n   * True while more of the object is still expected. When false every present\n   * field is settled, which is the only completion signal that is ever certain.\n   */\n  streaming?: boolean;\n  /**\n   * Fields the caller knows are finished. Supply this when the API gives a\n   * real signal; otherwise the default rule applies.\n   */\n  settled?: string[];\n  /** Fields that failed to extract, with the reason shown in place. */\n  errors?: Record<string, string>;\n  formatValue?: (value: unknown, name: string) => string;\n  children?: ReactNode;\n}\n\nexport function StructuredOutput({\n  className,\n  fields,\n  value,\n  streaming = false,\n  settled,\n  errors,\n  formatValue = defaultFormat,\n  children,\n  ...props\n}: StructuredOutputProps) {\n  const stateOf = useMemo(() => {\n    const explicit = settled ? new Set(settled) : null;\n    const lastPresentIndex = fields.reduce(\n      (last, field, index) => (value[field.name] !== undefined ? index : last),\n      -1,\n    );\n\n    return (name: string): FieldState => {\n      if (errors?.[name]) return \"error\";\n\n      const index = fields.findIndex((field) => field.name === name);\n      const present = value[name] !== undefined;\n\n      if (!present) return \"pending\";\n      if (explicit) return explicit.has(name) ? \"settled\" : \"streaming\";\n      // No explicit signal. Once a later field has appeared this one cannot\n      // still be growing, which holds for depth-first JSON streaming. The last\n      // present field stays \"streaming\" until the caller says streaming ended.\n      if (!streaming) return \"settled\";\n      return index < lastPresentIndex ? \"settled\" : \"streaming\";\n    };\n  }, [fields, value, streaming, settled, errors]);\n\n  const context = useMemo<StructuredOutputContextValue>(\n    () => ({ fields, value, stateOf, formatValue }),\n    [fields, value, stateOf, formatValue],\n  );\n\n  return (\n    <StructuredOutputContext.Provider value={context}>\n      <dl\n        data-slot=\"structured-output\"\n        data-streaming={streaming || undefined}\n        // Fields arrive one at a time and each is a small, self-contained fact,\n        // so the region is polite and additive rather than re-reading the whole\n        // object on every token.\n        aria-live=\"polite\"\n        aria-busy={streaming}\n        className={cn(\"flex flex-col gap-3\", className)}\n        {...props}\n      >\n        {children ??\n          fields.map((field) => <StructuredField key={field.name} name={field.name} />)}\n      </dl>\n    </StructuredOutputContext.Provider>\n  );\n}\n\nexport interface StructuredFieldProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\"> {\n  name: string;\n  children?: ReactNode;\n}\n\n/**\n * One field: its label, its value, and the space it will occupy before it has\n * one.\n *\n * The reserved height is what stops the layout jumping as the object fills in.\n */\nexport function StructuredField({ className, name, children, ...props }: StructuredFieldProps) {\n  const { fields, value, stateOf, formatValue } = useStructuredOutputContext(\"StructuredField\");\n\n  const field = fields.find((candidate) => candidate.name === name);\n  if (!field) {\n    throw new Error(`StructuredField \"${name}\" is not declared in the fields prop.`);\n  }\n\n  const state = stateOf(name);\n  const raw = value[name];\n\n  // \"A token arrived\" and \"this field is final\" are different facts, and in a\n  // streamed object they look identical. The settle makes that distinction\n  // visible — so it plays on the transition into settled, and never on a field\n  // that was already final when the component mounted.\n  //\n  // State adjusted during render rather than tracked in a ref: reading a ref\n  // while rendering is unsafe under concurrent rendering, and an effect would\n  // paint the plain value first and animate a frame later. React re-renders\n  // immediately here and discards the intermediate pass.\n  const [seenState, setSeenState] = useState<FieldState>(state);\n  const [hasSettled, setHasSettled] = useState(false);\n\n  if (seenState !== state) {\n    setSeenState(state);\n    if (state === \"settled\" && seenState !== \"settled\") setHasSettled(true);\n  }\n\n  return (\n    <div\n      data-slot=\"structured-field\"\n      data-state={state}\n      data-settled={hasSettled || undefined}\n      data-field={name}\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    >\n      <dt className=\"text-xs text-muted-foreground\">{field.label}</dt>\n      <dd\n        className={cn(\n          \"m-0 text-sm\",\n          state === \"pending\" && \"text-muted-foreground\",\n          state === \"error\" && \"text-destructive\",\n        )}\n        // Height is reserved from the declared line count so the value lands in\n        // space already set aside for it rather than pushing the page down.\n        // Computed rather than left to calc() so the reserved height is a plain\n        // value that can be asserted and reasoned about.\n        style={{ minHeight: `${String((field.lines ?? 1) * 1.25)}rem` }}\n      >\n        {state === \"pending\" ? (\n          <span\n            data-slot=\"structured-field-placeholder\"\n            aria-hidden=\"true\"\n            className=\"block h-4 w-24 animate-pulse-soft rounded bg-muted\"\n          />\n        ) : (\n          <span\n            data-slot=\"structured-field-value\"\n            className={cn(hasSettled && \"inline-block animate-settle\")}\n          >\n            {children ?? formatValue(raw, name)}\n          </span>\n        )}\n      </dd>\n    </div>\n  );\n}\n\n/**\n * A confidence score for one field.\n *\n * Rendered as text with the number, never as a bare colour, because \"how much\n * should I trust this\" is exactly the thing a colour cannot answer.\n */\nexport function StructuredConfidence({\n  className,\n  value: confidence,\n  lowBelow = 0.7,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & { value: number; lowBelow?: number }) {\n  const low = confidence < lowBelow;\n  const percent = new Intl.NumberFormat(undefined, {\n    style: \"percent\",\n    maximumFractionDigits: 0,\n  }).format(confidence);\n\n  return (\n    <p\n      data-slot=\"structured-confidence\"\n      data-low={low || undefined}\n      className={cn(\"text-xs\", low ? \"text-warning\" : \"text-muted-foreground\", className)}\n      {...props}\n    >\n      {low ? `Low confidence, ${percent} — worth checking` : `${percent} confidence`}\n    </p>\n  );\n}\n\n/** The reason a field could not be extracted, shown where the value would be. */\nexport function StructuredFieldError({ className, ...props }: ComponentPropsWithRef<\"p\">) {\n  return (\n    <p\n      data-slot=\"structured-field-error\"\n      className={cn(\"text-xs text-destructive\", className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

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

@@ -14,7 +14,7 @@ import { ComponentPropsWithRef, ReactNode } from "react";
  */
 type ToolStatus = "pending" | "running" | "success" | "error";
 declare const toolVariants: (props?: ({
-  status?: "success" | "error" | "pending" | "running" | null | undefined;
+  status?: "success" | "pending" | "running" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ToolProps extends ComponentPropsWithRef<typeof Collapsible.Root>, VariantProps<typeof toolVariants> {
   status?: ToolStatus;

package/dist/components/alert/alert.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/alert/alert.d.ts
 declare const alertVariants: (props?: ({
-  variant?: "destructive" | "default" | "success" | "warning" | "info" | null | undefined;
+  variant?: "default" | "destructive" | "success" | "warning" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * How urgently the alert should interrupt a screen reader.

package/dist/components/badge/badge.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/badge/badge.d.ts
 declare const badgeVariants: (props?: ({
-  variant?: "secondary" | "outline" | "destructive" | "default" | "success" | "warning" | "info" | null | undefined;
+  variant?: "default" | "secondary" | "outline" | "destructive" | "success" | "warning" | "info" | null | undefined;
   size?: "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface BadgeProps extends ComponentPropsWithRef<"span">, VariantProps<typeof badgeVariants> {

package/dist/components/button/button.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from "class-variance-authority";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/button/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "link" | "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+  variant?: "link" | "secondary" | "outline" | "destructive" | "primary" | "ghost" | null | undefined;
   size?: "sm" | "md" | "lg" | "icon" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends ComponentPropsWithRef<"button">, VariantProps<typeof buttonVariants> {

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,46 @@
+import { QueuedFile } from "./upload-queue.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/file-upload/file-upload.d.ts
+interface FileUploadProps extends Omit<ComponentPropsWithRef<"div">, "onDrop"> {
+  /** Names the control. */
+  label: string;
+  onFiles: (files: File[]) => void;
+  accept?: string;
+  multiple?: boolean;
+  disabled?: boolean;
+  /** Shown under the prompt: accepted types, size limit. */
+  hint?: ReactNode;
+  children?: ReactNode;
+}
+declare function FileUpload({ className, label, onFiles, accept, multiple, disabled, hint, children, ...props }: FileUploadProps): import("react").JSX.Element;
+interface FileUploadListProps extends ComponentPropsWithRef<"ul"> {
+  files: QueuedFile[];
+  onCancel?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onRemove?: (id: string) => void;
+}
+declare function FileUploadList({ className, files, onCancel, onRetry, onRemove, ...props }: FileUploadListProps): import("react").JSX.Element | null;
+interface FileUploadItemProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
+  entry: QueuedFile;
+  onCancel?: (id: string) => void;
+  onRetry?: (id: string) => void;
+  onRemove?: (id: string) => void;
+}
+declare function FileUploadItem({ className, entry, onCancel, onRetry, onRemove, ...props }: FileUploadItemProps): import("react").JSX.Element;
+/**
+ * One sentence covering the whole queue, announced politely.
+ *
+ * Per-file live regions would talk over each other the moment two uploads run
+ * at once; one summary of the set is readable where six competing ones are not.
+ */
+declare function FileUploadStatus({ className, stats, ...props }: ComponentPropsWithRef<"p"> & {
+  stats: {
+    total: number;
+    active: number;
+    done: number;
+    failed: number;
+  };
+}): import("react").JSX.Element;
+//#endregion
+export { FileUpload, FileUploadItem, FileUploadItemProps, FileUploadList, FileUploadListProps, FileUploadProps, FileUploadStatus };
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/file-upload/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"mappings":";;;UAqCiB,wBAAwB,KAAK;;EAE5C;EACA,UAAU,OAAO;EACjB;EACA;EACA;;EAEA,OAAO;EACP,WAAW;;iBAGG,aACd,WACA,OACA,SACA,QACA,UACA,UACA,MACA,aACG,SACF,kCAAe,IAAA;UAsFD,4BAA4B;EAC3C,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;UAsBL,4BAA4B,KAAK;EAChD,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;;;;;;;iBA+FN,mBACd,WACA,UACG,SACF;EACD;IAAS;IAAe;IAAgB;IAAc;;oBACvD,IAAA"}

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,204 @@
+"use client";
+import { disabledStyles, focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { formatBytes } from "./upload-queue.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+//#region src/components/file-upload/file-upload.tsx
+/**
+* The visible half of uploading. The queue is in `upload-queue.ts` and is the
+* part worth owning.
+*
+* There is no dropzone pattern in the WAI-ARIA APG, and inventing one is the
+* usual failure: a `div` with `role="button"`, a keydown handler, and a file
+* picker that keyboard users can never reach. So the control here is a real
+* `<input type="file">` with a real `<label>`. That is already operable by
+* keyboard, already announces itself, already opens the picker on Enter and
+* Space, and needs nothing added. Drag and drop is layered on top as a pointer
+* convenience, and every drop can also be done from the input.
+*/
+const STATUS_LABEL = {
+	queued: "Waiting",
+	uploading: "Uploading",
+	done: "Uploaded",
+	failed: "Failed",
+	cancelled: "Cancelled"
+};
+function FileUpload({ className, label, onFiles, accept, multiple = true, disabled = false, hint, children, ...props }) {
+	const inputId = useId();
+	const hintId = useId();
+	const [dragging, setDragging] = useState(false);
+	const depth = useRef(0);
+	function handleDrop(event) {
+		event.preventDefault();
+		depth.current = 0;
+		setDragging(false);
+		if (disabled) return;
+		const dropped = [...event.dataTransfer.files];
+		if (dropped.length > 0) onFiles(multiple ? dropped : dropped.slice(0, 1));
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload",
+		className: cn("flex flex-col gap-3", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			"data-slot": "file-upload-dropzone",
+			"data-dragging": dragging || void 0,
+			onDragEnter: (event) => {
+				event.preventDefault();
+				depth.current += 1;
+				if (!disabled) setDragging(true);
+			},
+			onDragLeave: () => {
+				depth.current -= 1;
+				if (depth.current <= 0) setDragging(false);
+			},
+			onDragOver: (event) => {
+				event.preventDefault();
+			},
+			onDrop: handleDrop,
+			className: cn("rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center", "transition-colors duration-[var(--duration-fast)]", dragging && "border-primary bg-primary/5", disabled && "pointer-events-none opacity-55"),
+			children: [/* @__PURE__ */ jsxs("label", {
+				htmlFor: inputId,
+				className: cn("inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm", "focus-within:ring-2 focus-within:ring-ring/55"),
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "font-medium",
+						children: label
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "text-xs text-muted-foreground",
+						children: [
+							"Drop ",
+							multiple ? "files" : "a file",
+							" here, or choose from your device"
+						]
+					}),
+					/* @__PURE__ */ jsx("input", {
+						id: inputId,
+						type: "file",
+						accept,
+						multiple,
+						disabled,
+						"aria-describedby": hint ? hintId : void 0,
+						onChange: (event) => {
+							const chosen = [...event.target.files ?? []];
+							if (chosen.length > 0) onFiles(chosen);
+							event.target.value = "";
+						},
+						className: "sr-only"
+					})
+				]
+			}), hint ? /* @__PURE__ */ jsx("p", {
+				id: hintId,
+				className: "mt-2 text-xs text-muted-foreground",
+				children: hint
+			}) : null]
+		}), children]
+	});
+}
+function FileUploadList({ className, files, onCancel, onRetry, onRemove, ...props }) {
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "file-upload-list",
+		className: cn("flex list-none flex-col gap-2", className),
+		...props,
+		children: files.map((entry) => /* @__PURE__ */ jsx(FileUploadItem, {
+			entry,
+			onCancel,
+			onRetry,
+			onRemove
+		}, entry.id))
+	});
+}
+function FileUploadItem({ className, entry, onCancel, onRetry, onRemove, ...props }) {
+	const { id, file, status, progress, error } = entry;
+	const percent = progress === null ? null : Math.round(progress * 100);
+	return /* @__PURE__ */ jsxs("li", {
+		"data-slot": "file-upload-item",
+		"data-status": status,
+		className: cn("flex items-center gap-3 rounded-lg border px-3 py-2 text-sm", status === "failed" ? "border-destructive/40 bg-destructive/5" : "border-border bg-card", className),
+		...props,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex min-w-0 flex-1 flex-col gap-1",
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex items-baseline justify-between gap-2",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "truncate font-medium",
+						children: file.name
+					}), /* @__PURE__ */ jsx("span", {
+						className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+						children: formatBytes(file.size)
+					})]
+				}),
+				/* @__PURE__ */ jsxs("p", {
+					className: cn("text-xs", status === "failed" ? "text-destructive" : "text-muted-foreground"),
+					children: [
+						STATUS_LABEL[status],
+						status === "uploading" && percent !== null ? ` · ${String(percent)}%` : null,
+						error ? ` · ${error}` : null
+					]
+				}),
+				status === "uploading" ? /* @__PURE__ */ jsx("div", {
+					role: "progressbar",
+					"aria-label": `Uploading ${file.name}`,
+					"aria-valuenow": percent ?? void 0,
+					"aria-valuemin": 0,
+					"aria-valuemax": 100,
+					className: "h-1 w-full overflow-hidden rounded-full bg-muted",
+					children: /* @__PURE__ */ jsx("div", {
+						"data-slot": "file-upload-progress",
+						className: "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+						style: { width: `${String(percent ?? 0)}%` }
+					})
+				}) : null
+			]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex shrink-0 items-center gap-1",
+			children: [
+				status === "uploading" && onCancel ? /* @__PURE__ */ jsx(ItemButton, {
+					onClick: () => onCancel(id),
+					children: "Cancel"
+				}) : null,
+				(status === "failed" || status === "cancelled") && onRetry ? /* @__PURE__ */ jsx(ItemButton, {
+					onClick: () => onRetry(id),
+					children: "Retry"
+				}) : null,
+				onRemove ? /* @__PURE__ */ jsx(ItemButton, {
+					onClick: () => onRemove(id),
+					"aria-label": `Remove ${file.name}`,
+					children: "Remove"
+				}) : null
+			]
+		})]
+	});
+}
+function ItemButton({ className, ...props }) {
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cn("rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium", "transition-colors hover:bg-accent hover:text-accent-foreground", focusRing, disabledStyles, className),
+		...props
+	});
+}
+/**
+* One sentence covering the whole queue, announced politely.
+*
+* Per-file live regions would talk over each other the moment two uploads run
+* at once; one summary of the set is readable where six competing ones are not.
+*/
+function FileUploadStatus({ className, stats, ...props }) {
+	const { total, active, done, failed } = stats;
+	const message = total === 0 ? "" : active > 0 ? `${String(done)} of ${String(total)} uploaded` : failed > 0 ? `${String(done)} uploaded, ${String(failed)} failed` : `${String(done)} uploaded`;
+	return /* @__PURE__ */ jsx("p", {
+		"data-slot": "file-upload-status",
+		"aria-live": "polite",
+		className: cn("text-xs text-muted-foreground", className),
+		...props,
+		children: message
+	});
+}
+//#endregion
+export { FileUpload, FileUploadItem, FileUploadList, FileUploadStatus };
+
+//# sourceMappingURL=file-upload.js.map

package/dist/components/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { formatBytes, type QueuedFile, type UploadStatus } from \"./upload-queue\";\n\n/**\n * The visible half of uploading. The queue is in `upload-queue.ts` and is the\n * part worth owning.\n *\n * There is no dropzone pattern in the WAI-ARIA APG, and inventing one is the\n * usual failure: a `div` with `role=\"button\"`, a keydown handler, and a file\n * picker that keyboard users can never reach. So the control here is a real\n * `<input type=\"file\">` with a real `<label>`. That is already operable by\n * keyboard, already announces itself, already opens the picker on Enter and\n * Space, and needs nothing added. Drag and drop is layered on top as a pointer\n * convenience, and every drop can also be done from the input.\n */\n\nconst STATUS_LABEL: Record<UploadStatus, string> = {\n  queued: \"Waiting\",\n  uploading: \"Uploading\",\n  done: \"Uploaded\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface FileUploadProps extends Omit<ComponentPropsWithRef<\"div\">, \"onDrop\"> {\n  /** Names the control. */\n  label: string;\n  onFiles: (files: File[]) => void;\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shown under the prompt: accepted types, size limit. */\n  hint?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function FileUpload({\n  className,\n  label,\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  hint,\n  children,\n  ...props\n}: FileUploadProps) {\n  const inputId = useId();\n  const hintId = useId();\n  const [dragging, setDragging] = useState(false);\n  const depth = useRef(0);\n\n  function handleDrop(event: DragEvent<HTMLDivElement>) {\n    event.preventDefault();\n    depth.current = 0;\n    setDragging(false);\n    if (disabled) return;\n\n    const dropped = [...event.dataTransfer.files];\n    if (dropped.length > 0) onFiles(multiple ? dropped : dropped.slice(0, 1));\n  }\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      {/* dragenter/dragleave fire for every child element, so a plain boolean\n          flickers as the pointer crosses the prompt text. Counting depth is\n          what makes the highlight steady. */}\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-dragging={dragging || undefined}\n        onDragEnter={(event) => {\n          event.preventDefault();\n          depth.current += 1;\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => {\n          depth.current -= 1;\n          if (depth.current <= 0) setDragging(false);\n        }}\n        onDragOver={(event) => {\n          event.preventDefault();\n        }}\n        onDrop={handleDrop}\n        className={cn(\n          \"rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center\",\n          \"transition-colors duration-[var(--duration-fast)]\",\n          dragging && \"border-primary bg-primary/5\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {/* The label is the control. Clicking it opens the picker, Enter and\n            Space activate it, and assistive technology already describes it. */}\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm\",\n            \"focus-within:ring-2 focus-within:ring-ring/55\",\n          )}\n        >\n          <span className=\"font-medium\">{label}</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Drop {multiple ? \"files\" : \"a file\"} here, or choose from your device\n          </span>\n          <input\n            id={inputId}\n            type=\"file\"\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            aria-describedby={hint ? hintId : undefined}\n            onChange={(event) => {\n              const chosen = [...(event.target.files ?? [])];\n              if (chosen.length > 0) onFiles(chosen);\n              // Reset, so choosing the same file twice fires change twice.\n              event.target.value = \"\";\n            }}\n            className=\"sr-only\"\n          />\n        </label>\n\n        {hint ? (\n          <p id={hintId} className=\"mt-2 text-xs text-muted-foreground\">\n            {hint}\n          </p>\n        ) : null}\n      </div>\n\n      {children}\n    </div>\n  );\n}\n\nexport interface FileUploadListProps extends ComponentPropsWithRef<\"ul\"> {\n  files: QueuedFile[];\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadList({\n  className,\n  files,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadListProps) {\n  if (files.length === 0) return null;\n\n  return (\n    <ul\n      data-slot=\"file-upload-list\"\n      className={cn(\"flex list-none flex-col gap-2\", className)}\n      {...props}\n    >\n      {files.map((entry) => (\n        <FileUploadItem\n          key={entry.id}\n          entry={entry}\n          onCancel={onCancel}\n          onRetry={onRetry}\n          onRemove={onRemove}\n        />\n      ))}\n    </ul>\n  );\n}\n\nexport interface FileUploadItemProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  entry: QueuedFile;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadItem({\n  className,\n  entry,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadItemProps) {\n  const { id, file, status, progress, error } = entry;\n  const percent = progress === null ? null : Math.round(progress * 100);\n\n  return (\n    <li\n      data-slot=\"file-upload-item\"\n      data-status={status}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border px-3 py-2 text-sm\",\n        status === \"failed\"\n          ? \"border-destructive/40 bg-destructive/5\"\n          : \"border-border bg-card\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <span className=\"truncate font-medium\">{file.name}</span>\n          <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n            {formatBytes(file.size)}\n          </span>\n        </div>\n\n        {/* Status in words, always. A bar at 60% with a red tint does not say\n            whether it is uploading, stalled or failed. */}\n        <p\n          className={cn(\n            \"text-xs\",\n            status === \"failed\" ? \"text-destructive\" : \"text-muted-foreground\",\n          )}\n        >\n          {STATUS_LABEL[status]}\n          {status === \"uploading\" && percent !== null ? ` · ${String(percent)}%` : null}\n          {error ? ` · ${error}` : null}\n        </p>\n\n        {status === \"uploading\" ? (\n          <div\n            role=\"progressbar\"\n            aria-label={`Uploading ${file.name}`}\n            aria-valuenow={percent ?? undefined}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            className=\"h-1 w-full overflow-hidden rounded-full bg-muted\"\n          >\n            <div\n              data-slot=\"file-upload-progress\"\n              className=\"h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n              style={{ width: `${String(percent ?? 0)}%` }}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {status === \"uploading\" && onCancel ? (\n          <ItemButton onClick={() => onCancel(id)}>Cancel</ItemButton>\n        ) : null}\n        {(status === \"failed\" || status === \"cancelled\") && onRetry ? (\n          <ItemButton onClick={() => onRetry(id)}>Retry</ItemButton>\n        ) : null}\n        {onRemove ? (\n          <ItemButton onClick={() => onRemove(id)} aria-label={`Remove ${file.name}`}>\n            Remove\n          </ItemButton>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nfunction ItemButton({ className, ...props }: ComponentPropsWithRef<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n        \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * One sentence covering the whole queue, announced politely.\n *\n * Per-file live regions would talk over each other the moment two uploads run\n * at once; one summary of the set is readable where six competing ones are not.\n */\nexport function FileUploadStatus({\n  className,\n  stats,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & {\n  stats: { total: number; active: number; done: number; failed: number };\n}) {\n  const { total, active, done, failed } = stats;\n\n  // Progress through the set, not a count of what happens to be in flight.\n  // \"3 of 5 uploading\" is wrong the moment a concurrency limit holds two back,\n  // and it never tells the reader how much of the job is left.\n  const message =\n    total === 0\n      ? \"\"\n      : active > 0\n        ? `${String(done)} of ${String(total)} uploaded`\n        : failed > 0\n          ? `${String(done)} uploaded, ${String(failed)} failed`\n          : `${String(done)} uploaded`;\n\n  return (\n    <p\n      data-slot=\"file-upload-status\"\n      aria-live=\"polite\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n"],"mappings":"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"}

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,3 @@
+import { QueuedFile, UploadContext, UploadFn, UploadQueueOptions, UploadStatus, formatBytes, matchesAccept, useUploadQueue, xhrUpload } from "./upload-queue.js";
+import { FileUpload, FileUploadItem, FileUploadItemProps, FileUploadList, FileUploadListProps, FileUploadProps, FileUploadStatus } from "./file-upload.js";
+export { FileUpload, FileUploadItem, type FileUploadItemProps, FileUploadList, type FileUploadListProps, type FileUploadProps, FileUploadStatus, type QueuedFile, type UploadContext, type UploadFn, type UploadQueueOptions, type UploadStatus, formatBytes, matchesAccept, useUploadQueue, xhrUpload };

package/dist/components/file-upload/index.js

@@ -0,0 +1,3 @@
+import { formatBytes, matchesAccept, useUploadQueue, xhrUpload } from "./upload-queue.js";
+import { FileUpload, FileUploadItem, FileUploadList, FileUploadStatus } from "./file-upload.js";
+export { FileUpload, FileUploadItem, FileUploadList, FileUploadStatus, formatBytes, matchesAccept, useUploadQueue, xhrUpload };

package/dist/components/file-upload/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/file-upload/meta.ts
+const meta = defineMeta({
+	name: "file-upload",
+	title: "File Upload",
+	description: "A dropzone over a real file input, plus the upload queue nobody ships.",
+	category: "form",
+	status: "stable",
+	dependencies: [],
+	registryDependencies: [],
+	files: ["upload-queue.ts", "file-upload.tsx"],
+	a11y: "The APG has no dropzone pattern, and inventing one is the usual failure — a div with role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here is a real input[type=file] with a real label, which is already operable, already announced, and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer convenience layered on top; every drop can also be done from the input. Each uploading file gets a progressbar named after it, status is always stated in words as well as drawn, and one polite live region summarises the whole queue rather than six per-file regions talking over each other."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/file-upload/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/file-upload/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"file-upload\",\n  title: \"File Upload\",\n  description: \"A dropzone over a real file input, plus the upload queue nobody ships.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"upload-queue.ts\", \"file-upload.tsx\"],\n  a11y:\n    \"The APG has no dropzone pattern, and inventing one is the usual failure — a div with \" +\n    'role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here ' +\n    \"is a real input[type=file] with a real label, which is already operable, already announced, \" +\n    \"and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer \" +\n    \"convenience layered on top; every drop can also be done from the input. Each uploading file \" +\n    \"gets a progressbar named after it, status is always stated in words as well as drawn, and \" +\n    \"one polite live region summarises the whole queue rather than six per-file regions talking \" +\n    \"over each other.\",\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,mBAAmB,iBAAiB;CAC5C,MACE;AAQJ,CAAC"}