@dowel-ui/react 0.5.0 → 0.8.0

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ai-tool.js","names":["CollapsiblePrimitive"],"sources":["../../../src/components/ai-tool/ai-tool.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A tool the model called, and what came back.\n *\n * Collapsed by default: a tool call is provenance, not the answer. Someone\n * checking why a response says what it does needs to open it; everybody else\n * needs it to stay out of the way.\n *\n * The status is the whole point of the header, so it is text, never a coloured\n * dot alone.\n */\n\nexport type ToolStatus = \"pending\" | \"running\" | \"success\" | \"error\";\n\nconst STATUS_LABEL: Record<ToolStatus, string> = {\n  pending: \"Queued\",\n  running: \"Running\",\n  success: \"Completed\",\n  error: \"Failed\",\n};\n\nconst toolVariants = cva(\"overflow-hidden rounded-lg border text-sm\", {\n  variants: {\n    status: {\n      pending: \"border-border bg-muted/30\",\n      running: \"border-info/30 bg-info/5\",\n      success: \"border-border bg-muted/30\",\n      error: \"border-destructive/30 bg-destructive/5\",\n    },\n  },\n  defaultVariants: {\n    status: \"pending\",\n  },\n});\n\nexport interface ToolProps\n  extends\n    ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>,\n    VariantProps<typeof toolVariants> {\n  status?: ToolStatus;\n}\n\nexport function Tool({ className, status = \"pending\", ...props }: ToolProps) {\n  return (\n    <CollapsiblePrimitive.Root\n      data-slot=\"tool\"\n      data-status={status}\n      className={cn(toolVariants({ status }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ToolHeaderProps extends ComponentPropsWithRef<\n  typeof CollapsiblePrimitive.Trigger\n> {\n  /** The tool's name, as the model called it. */\n  name: string;\n  status?: ToolStatus;\n  /** Overrides the status wording. */\n  statusLabel?: string;\n  icon?: ReactNode;\n}\n\nexport function ToolHeader({\n  className,\n  name,\n  status = \"pending\",\n  statusLabel,\n  icon,\n  ...props\n}: ToolHeaderProps) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"tool-header\"\n      className={cn(\n        \"flex w-full items-center gap-2 px-3 py-2 text-left\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent/50\",\n        \"[&[data-state=open]>svg:last-child]:rotate-180\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {icon ?? <ToolIcon status={status} />}\n      <span className=\"font-mono text-xs font-medium\">{name}</span>\n      {/* Status in words. A coloured dot alone says nothing to a screen reader\n          and nothing to anyone who cannot distinguish the colours. */}\n      <span\n        data-slot=\"tool-status\"\n        className={cn(\n          \"ml-auto text-xs\",\n          status === \"error\" ? \"text-destructive\" : \"text-muted-foreground\",\n        )}\n      >\n        {statusLabel ?? STATUS_LABEL[status]}\n      </span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)]\"\n      >\n        <path\n          d=\"m6 9 6 6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nfunction ToolIcon({ status }: { status: ToolStatus }) {\n  if (status === \"running\") {\n    return (\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 animate-spin text-info\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.25\" />\n        <path\n          d=\"M12 3a9 9 0 0 1 9 9\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-3.5 shrink-0\",\n        status === \"error\" ? \"text-destructive\" : \"text-muted-foreground\",\n      )}\n    >\n      <path\n        d={\n          status === \"success\"\n            ? \"m5 13 4 4L19 7\"\n            : status === \"error\"\n              ? \"M12 8v5m0 3h.01M10.3 4.3 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z\"\n              : \"M14.7 6.3a4 4 0 0 1-5 5L5 16v3h3l4.7-4.7a4 4 0 0 1 5-5l-2.3 2.3\"\n        }\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nexport function ToolContent({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"tool-content\"\n      className={cn(\n        \"overflow-hidden border-t border-border\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface ToolSectionProps extends ComponentPropsWithRef<\"div\"> {\n  label: string;\n}\n\n/** A labelled block inside the disclosure: the arguments, or the result. */\nexport function ToolSection({ className, label, children, ...props }: ToolSectionProps) {\n  return (\n    <div\n      data-slot=\"tool-section\"\n      className={cn(\"border-b border-border/60 px-3 py-2 last:border-b-0\", className)}\n      {...props}\n    >\n      <p className=\"mb-1 text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Serialised arguments or output.\n *\n * A `<pre>` with a tabindex, because JSON of any size scrolls and a scrollable\n * box that cannot be focused is unreachable by keyboard.\n */\nexport interface ToolPayloadProps extends ComponentPropsWithRef<\"pre\"> {\n  label?: string;\n}\n\nexport function ToolPayload({ className, label = \"Payload\", ...props }: ToolPayloadProps) {\n  return (\n    <pre\n      data-slot=\"tool-payload\"\n      tabIndex={0}\n      role=\"region\"\n      aria-label={label}\n      className={cn(\n        \"max-h-56 overflow-auto rounded-md bg-muted/60 p-2 font-mono text-xs leading-relaxed\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { toolVariants };\n"],"mappings":";;;;;;;AAsBA,MAAM,eAA2C;CAC/C,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,eAAe,IAAI,6CAA6C;CACpE,UAAU,EACR,QAAQ;EACN,SAAS;EACT,SAAS;EACT,SAAS;EACT,OAAO;CACT,EACF;CACA,iBAAiB,EACf,QAAQ,UACV;AACF,CAAC;AASD,SAAgB,KAAK,EAAE,WAAW,SAAS,WAAW,GAAG,SAAoB;CAC3E,OACE,oBAACA,YAAqB,MAAtB;EACE,aAAU;EACV,eAAa;EACb,WAAW,GAAG,aAAa,EAAE,OAAO,CAAC,GAAG,SAAS;EACjD,GAAI;CACL,CAAA;AAEL;AAaA,SAAgB,WAAW,EACzB,WACA,MACA,SAAS,WACT,aACA,MACA,GAAG,SACe;CAClB,OACE,qBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,sDACA,wEACA,kDACA,WACA,SACF;EACA,GAAI;EATN,UAAA;GAWG,QAAQ,oBAAC,UAAD,EAAkB,OAAS,CAAA;GACpC,oBAAC,QAAD;IAAM,WAAU;IAAiC,UAAA;GAAW,CAAA;GAG5D,oBAAC,QAAD;IACE,aAAU;IACV,WAAW,GACT,mBACA,WAAW,UAAU,qBAAqB,uBAC5C;IAEC,UAAA,eAAe,aAAa;GACzB,CAAA;GACN,oBAAC,OAAD;IACE,SAAQ;IACR,MAAK;IACL,eAAY;IACZ,WAAU;IAEV,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA;EACuB;;AAElC;AAEA,SAAS,SAAS,EAAE,UAAkC;CACpD,IAAI,WAAW,WACb,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,eAAY;EACZ,WAAU;EAJZ,UAAA,CAME,oBAAC,UAAD;GAAQ,IAAG;GAAK,IAAG;GAAK,GAAE;GAAI,QAAO;GAAe,aAAY;GAAM,SAAQ;EAAQ,CAAA,GACtF,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;EACf,CAAA,CACE;;CAIT,OACE,oBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,eAAY;EACZ,WAAW,GACT,qBACA,WAAW,UAAU,qBAAqB,uBAC5C;EAEA,UAAA,oBAAC,QAAD;GACE,GACE,WAAW,YACP,mBACA,WAAW,UACT,mGACA;GAER,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;EAChB,CAAA;CACE,CAAA;AAET;AAEA,SAAgB,YAAY,EAC1B,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,0CACA,wFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAOA,SAAgB,YAAY,EAAE,WAAW,OAAO,UAAU,GAAG,SAA2B;CACtF,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uDAAuD,SAAS;EAC9E,GAAI;EAHN,UAAA,CAKE,oBAAC,KAAD;GAAG,WAAU;GACV,UAAA;EACA,CAAA,GACF,QACE;;AAET;AAYA,SAAgB,YAAY,EAAE,WAAW,QAAQ,WAAW,GAAG,SAA2B;CACxF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,UAAU;EACV,MAAK;EACL,cAAY;EACZ,WAAW,GACT,uFACA,WACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"ai-tool.js","names":["CollapsiblePrimitive"],"sources":["../../../src/components/ai-tool/ai-tool.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Tool Call (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A tool the model called, and what came back.\n *\n * Collapsed by default: a tool call is provenance, not the answer. Someone\n * checking why a response says what it does needs to open it; everybody else\n * needs it to stay out of the way.\n *\n * The status is the whole point of the header, so it is text, never a coloured\n * dot alone.\n */\n\nexport type ToolStatus = \"pending\" | \"running\" | \"success\" | \"error\";\n\nconst STATUS_LABEL: Record<ToolStatus, string> = {\n  pending: \"Queued\",\n  running: \"Running\",\n  success: \"Completed\",\n  error: \"Failed\",\n};\n\nconst toolVariants = cva(\"overflow-hidden rounded-lg border text-sm\", {\n  variants: {\n    status: {\n      pending: \"border-border bg-muted/30\",\n      running: \"border-info/30 bg-info/5\",\n      success: \"border-border bg-muted/30\",\n      error: \"border-destructive/30 bg-destructive/5\",\n    },\n  },\n  defaultVariants: {\n    status: \"pending\",\n  },\n});\n\nexport interface ToolProps\n  extends\n    ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>,\n    VariantProps<typeof toolVariants> {\n  status?: ToolStatus;\n}\n\nexport function Tool({ className, status = \"pending\", ...props }: ToolProps) {\n  return (\n    <CollapsiblePrimitive.Root\n      data-slot=\"tool\"\n      data-status={status}\n      className={cn(toolVariants({ status }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ToolHeaderProps extends ComponentPropsWithRef<\n  typeof CollapsiblePrimitive.Trigger\n> {\n  /** The tool's name, as the model called it. */\n  name: string;\n  status?: ToolStatus;\n  /** Overrides the status wording. */\n  statusLabel?: string;\n  icon?: ReactNode;\n  /**\n   * Status mark style. `icon` is a glyph per status; `ring` is one ring that\n   * breathes while queued, spins with a gap while running, and draws a check\n   * or a cross when done. `icon` wins over both.\n   */\n  indicator?: \"icon\" | \"ring\";\n  /**\n   * A short note before the status — \"3 sources\", \"1.2s\". It is part of the\n   * trigger's accessible name, so keep it short.\n   */\n  summary?: ReactNode;\n}\n\nexport function ToolHeader({\n  className,\n  name,\n  status = \"pending\",\n  statusLabel,\n  icon,\n  indicator = \"icon\",\n  summary,\n  ...props\n}: ToolHeaderProps) {\n  const hasSummary = summary !== undefined && summary !== null;\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"tool-header\"\n      className={cn(\n        \"flex w-full items-center gap-2 px-3 py-2 text-start\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent/50\",\n        \"[&[data-state=open]>svg:last-child]:rotate-180\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {icon ??\n        (indicator === \"ring\" ? <ToolRing status={status} /> : <ToolIcon status={status} />)}\n      <span className=\"font-mono text-xs font-medium\">{name}</span>\n      {hasSummary ? (\n        <span\n          data-slot=\"tool-summary\"\n          className=\"ms-auto shrink-0 text-xs text-muted-foreground tabular-nums\"\n        >\n          {summary}\n        </span>\n      ) : null}\n      {/* Status in words. A coloured dot alone says nothing to a screen reader\n          and nothing to anyone who cannot distinguish the colours. */}\n      <span\n        data-slot=\"tool-status\"\n        className={cn(\n          !hasSummary && \"ms-auto\",\n          \"text-xs\",\n          status === \"error\" ? \"text-destructive\" : \"text-muted-foreground\",\n        )}\n      >\n        {statusLabel ?? STATUS_LABEL[status]}\n      </span>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 text-muted-foreground transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n      >\n        <path\n          d=\"m6 9 6 6 6-6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </CollapsiblePrimitive.Trigger>\n  );\n}\n\nfunction ToolIcon({ status }: { status: ToolStatus }) {\n  if (status === \"running\") {\n    return (\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 animate-spin text-info\"\n      >\n        <circle cx=\"12\" cy=\"12\" r=\"9\" stroke=\"currentColor\" strokeWidth=\"2.5\" opacity=\"0.25\" />\n        <path\n          d=\"M12 3a9 9 0 0 1 9 9\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2.5\"\n          strokeLinecap=\"round\"\n        />\n      </svg>\n    );\n  }\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"size-3.5 shrink-0\",\n        status === \"error\" ? \"text-destructive\" : \"text-muted-foreground\",\n      )}\n    >\n      <path\n        d={\n          status === \"success\"\n            ? \"m5 13 4 4L19 7\"\n            : status === \"error\"\n              ? \"M12 8v5m0 3h.01M10.3 4.3 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.3a2 2 0 0 0-3.4 0Z\"\n              : \"M14.7 6.3a4 4 0 0 1-5 5L5 16v3h3l4.7-4.7a4 4 0 0 1 5-5l-2.3 2.3\"\n        }\n        stroke=\"currentColor\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  );\n}\n\nconst PREFIX = \"dowel-ai-tool\";\n\n/*\n * One ring for the whole lifecycle. The gap is a transitioned dash array, the\n * spin and breathe are loops, and the check and cross draw once when they\n * mount. None of it is an indicator: the status word already says \"Running\",\n * so under reduced motion the ring settles instead of moving.\n */\nconst STYLES = `\n@keyframes ${PREFIX}-ring-spin{to{rotate:360deg}}\n@keyframes ${PREFIX}-ring-breathe{0%,100%{stroke-opacity:1}50%{stroke-opacity:.35}}\n@keyframes ${PREFIX}-ring-draw{from{stroke-dashoffset:1}}\n[data-slot=tool-ring] [data-part=track]{stroke-dasharray:1 0;transition:stroke-dasharray calc(250ms * var(--motion-scale,1)) var(--ease-out-quint)}\n[data-slot=tool-ring][data-status=running] [data-part=track]{stroke-dasharray:.68 .32}\n[data-slot=tool-ring] [data-part=spin]{transform-box:view-box;transform-origin:center}\n[data-slot=tool-ring][data-status=running] [data-part=spin]{animation:${PREFIX}-ring-spin calc(900ms * var(--motion-scale,1)) linear infinite}\n[data-slot=tool-ring][data-status=pending] [data-part=track]{animation:${PREFIX}-ring-breathe calc(1600ms * var(--motion-scale,1)) ease-in-out infinite}\n[data-slot=tool-ring] [data-part=glyph]{stroke-dasharray:1 1;animation:${PREFIX}-ring-draw calc(220ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n[data-slot=tool-ring] [data-part=glyph][data-stroke=cross]{animation-duration:calc(160ms * var(--motion-scale,1))}\n[data-slot=tool-ring] [data-part=glyph][data-stroke=cross]+[data-stroke=cross]{animation-delay:calc(60ms * var(--motion-scale,1))}\n`;\n\nconst RING_TONE: Record<ToolStatus, string> = {\n  pending: \"text-muted-foreground\",\n  running: \"text-info\",\n  success: \"text-success\",\n  error: \"text-destructive\",\n};\n\nconst CHECK_PATH = \"M 8.5 12.2 L 11 14.8 L 15.8 9.6\";\nconst CROSS_PATHS = [\"M 9 9 L 15 15\", \"M 15 9 L 9 15\"] as const;\n\n/** The `indicator=\"ring\"` mark. It never unmounts, so its changes transition. */\nfunction ToolRing({ status }: { status: ToolStatus }) {\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        data-slot=\"tool-ring\"\n        data-status={status}\n        className={cn(\n          \"size-4 shrink-0 transition-colors duration-[calc(250ms*var(--motion-scale))] ease-[var(--ease-out-quint)]\",\n          RING_TONE[status],\n        )}\n      >\n        <g data-part=\"spin\">\n          <circle\n            data-part=\"track\"\n            cx=\"12\"\n            cy=\"12\"\n            r=\"8\"\n            pathLength={1}\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n          />\n        </g>\n        {/* Keyed by status, so a glyph mounts — and draws — on the change. */}\n        {status === \"success\" ? (\n          <path\n            key=\"success\"\n            data-part=\"glyph\"\n            data-stroke=\"check\"\n            d={CHECK_PATH}\n            pathLength={1}\n            stroke=\"currentColor\"\n            strokeWidth=\"2.2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        ) : null}\n        {status === \"error\"\n          ? CROSS_PATHS.map((d) => (\n              <path\n                key={d}\n                data-part=\"glyph\"\n                data-stroke=\"cross\"\n                d={d}\n                pathLength={1}\n                stroke=\"currentColor\"\n                strokeWidth=\"2.2\"\n                strokeLinecap=\"round\"\n              />\n            ))\n          : null}\n      </svg>\n    </>\n  );\n}\n\nexport function ToolContent({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"tool-content\"\n      className={cn(\n        \"overflow-hidden border-t border-border\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport interface ToolSectionProps extends ComponentPropsWithRef<\"div\"> {\n  label: string;\n}\n\n/** A labelled block inside the disclosure: the arguments, or the result. */\nexport function ToolSection({ className, label, children, ...props }: ToolSectionProps) {\n  return (\n    <div\n      data-slot=\"tool-section\"\n      className={cn(\"border-b border-border/60 px-3 py-2 last:border-b-0\", className)}\n      {...props}\n    >\n      <p className=\"mb-1 text-2xs font-medium tracking-wide text-muted-foreground uppercase\">\n        {label}\n      </p>\n      {children}\n    </div>\n  );\n}\n\n/**\n * Serialised arguments or output.\n *\n * A `<pre>` with a tabindex, because JSON of any size scrolls and a scrollable\n * box that cannot be focused is unreachable by keyboard.\n */\nexport interface ToolPayloadProps extends ComponentPropsWithRef<\"pre\"> {\n  label?: string;\n}\n\nexport function ToolPayload({ className, label = \"Payload\", ...props }: ToolPayloadProps) {\n  return (\n    <pre\n      data-slot=\"tool-payload\"\n      tabIndex={0}\n      role=\"region\"\n      aria-label={label}\n      className={cn(\n        \"max-h-56 overflow-auto rounded-md bg-muted/60 p-2 font-mono text-xs leading-relaxed\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { toolVariants };\n"],"mappings":"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"}

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

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["ai-tool.tsx"],
-	a11y: "A disclosure: the trigger exposes aria-expanded and controls the panel. Status is stated in words, not by a coloured dot — colour alone is unavailable to a screen reader and to anyone who cannot distinguish it. Payload blocks are focusable named regions, since JSON scrolls and an unfocusable scroll box is unreachable by keyboard."
+	a11y: "A disclosure: the trigger exposes aria-expanded and controls the panel. Status is stated in words, not by a coloured dot — colour alone is unavailable to a screen reader and to anyone who cannot distinguish it. Payload blocks are focusable named regions, since JSON scrolls and an unfocusable scroll box is unreachable by keyboard. The optional ring indicator is decorative and hidden; the status word stays visible, and the ring stops moving under reduced motion. A summary note is part of the trigger's name, so keep it short."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-tool/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-tool\",\n  title: \"AI Tool Call\",\n  description: \"A collapsible record of a tool the model called, its arguments and its result.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-tool.tsx\"],\n  a11y:\n    \"A disclosure: the trigger exposes aria-expanded and controls the panel. Status is stated in \" +\n    \"words, not by a coloured dot — colour alone is unavailable to a screen reader and to anyone \" +\n    \"who cannot distinguish it. Payload blocks are focusable named regions, since JSON scrolls \" +\n    \"and an unfocusable scroll box is unreachable by keyboard.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-tool/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-tool\",\n  title: \"AI Tool Call\",\n  description: \"A collapsible record of a tool the model called, its arguments and its result.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-tool.tsx\"],\n  a11y:\n    \"A disclosure: the trigger exposes aria-expanded and controls the panel. Status is stated in \" +\n    \"words, not by a coloured dot — colour alone is unavailable to a screen reader and to anyone \" +\n    \"who cannot distinguish it. Payload blocks are focusable named regions, since JSON scrolls \" +\n    \"and an unfocusable scroll box is unreachable by keyboard. The optional ring indicator is \" +\n    \"decorative and hidden; the status word stays visible, and the ring stops moving under \" +\n    \"reduced motion. A summary note is part of the trigger's name, so keep it short.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAMJ,CAAC"}

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?: "success" | "warning" | "destructive" | "default" | "info" | null | undefined;
+  variant?: "default" | "success" | "warning" | "destructive" | "info" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * How urgently the alert should interrupt a screen reader.

package/dist/components/animated-checklist/animated-checklist.d.ts

@@ -0,0 +1,40 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/animated-checklist/animated-checklist.d.ts
+declare const animatedChecklistVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ChecklistItem {
+  id: string;
+  label: string;
+  done?: boolean;
+}
+interface AnimatedChecklistProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange">, VariantProps<typeof animatedChecklistVariants> {
+  /** Controlled tasks. */
+  items?: ChecklistItem[];
+  /** Initial tasks when uncontrolled. */
+  defaultItems?: ChecklistItem[];
+  /** Called with the new list whenever a task is checked, added or removed. */
+  onItemsChange?: (items: ChecklistItem[]) => void;
+  /** Show the "Add new task" row. */
+  allowAdd?: boolean;
+  /** The add row hides once the list reaches this many tasks. */
+  maxItems?: number;
+  /** Show a remove button on each task. */
+  removable?: boolean;
+  addLabel?: string;
+  placeholder?: string;
+  /** Longest task label, in characters. */
+  maxLength?: number;
+  /** Fill overshoot, 0–100. */
+  bounce?: number;
+  /** Checkbox size in pixels. The corner stays 32% of it. */
+  boxSize?: number;
+  /** Card corner radius in pixels. Defaults to 18. */
+  radius?: number;
+}
+/** A task list with bouncing checkboxes, drawn ticks and struck-through done tasks. */
+declare function AnimatedChecklist({ className, stroke, items: itemsProp, defaultItems, onItemsChange, allowAdd, maxItems, removable, addLabel, placeholder, maxLength, bounce, boxSize, radius, style, ...props }: AnimatedChecklistProps): import("react").JSX.Element;
+//#endregion
+export { AnimatedChecklist, AnimatedChecklistProps, ChecklistItem, animatedChecklistVariants };
+//# sourceMappingURL=animated-checklist.d.ts.map

package/dist/components/animated-checklist/animated-checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-checklist.d.ts","names":[],"sources":["../../../src/components/animated-checklist/animated-checklist.tsx"],"mappings":";;;cAiCM,4BAAyB;;6CAY9B;UAWgB;EACf;EACA;EACA;;UAGe,+BAEb,KAAK,4DACL,oBAAoB;;EAEtB,QAAQ;;EAER,eAAe;;EAEf,iBAAiB,OAAO;;EAExB;;EAEA;;EAEA;EACA;EACA;;EAEA;;EAEA;;EAEA;;EAEA;;;iBAIc,oBACd,WACA,QACA,OAAO,WACP,cACA,eACA,UACA,UACA,WACA,UACA,aACA,WACA,QACA,SACA,QACA,UACG,SACF,yCAAsB,IAAA"}

package/dist/components/animated-checklist/animated-checklist.js

@@ -0,0 +1,198 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Checkbox } from "../checkbox/checkbox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/animated-checklist/animated-checklist.tsx
+const animatedChecklistVariants = cva("flex w-[18.75rem] max-w-full flex-col rounded-[1.125rem] bg-card px-3.5 py-0.75 text-card-foreground", {
+	variants: { 
+	/** A hairline ring — the source's Stroke switch. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: false }
+});
+/** Dowel's Checkbox, restyled: an outline box that fills from the centre. */
+const box = cn("relative size-[var(--animated-checklist-box)] overflow-hidden rounded-[32%] border-[1.5px] border-foreground/28 bg-transparent shadow-none", "before:absolute before:inset-0 before:scale-0 before:rounded-[inherit] before:bg-foreground before:content-['']", "before:transition-[scale] before:duration-[var(--duration-slower)] before:ease-[var(--animated-checklist-ease)]", "data-[state=checked]:border-transparent data-[state=checked]:bg-transparent data-[state=checked]:text-card data-[state=checked]:before:scale-100", "[&_svg]:size-[68%] [&>[data-slot=checkbox-indicator]]:relative");
+/** A task list with bouncing checkboxes, drawn ticks and struck-through done tasks. */
+function AnimatedChecklist({ className, stroke, items: itemsProp, defaultItems = [], onItemsChange, allowAdd = true, maxItems = Number.POSITIVE_INFINITY, removable = false, addLabel = "Add new task", placeholder = "New task", maxLength = 40, bounce = 50, boxSize = 18, radius, style, ...props }) {
+	const uid = useId();
+	const [uncontrolled, setUncontrolled] = useState(defaultItems);
+	const items = itemsProp ?? uncontrolled;
+	const [adding, setAdding] = useState(false);
+	const [draft, setDraft] = useState("");
+	const [announced, setAnnounced] = useState("");
+	const created = useRef(0);
+	const addRef = useRef(null);
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const pendingFocus = useRef(null);
+	const full = items.length >= maxItems;
+	useEffect(() => {
+		if (adding) inputRef.current?.focus();
+	}, [adding]);
+	useEffect(() => {
+		const target = pendingFocus.current;
+		if (target === null) return;
+		pendingFocus.current = null;
+		if (target === "add") {
+			addRef.current?.focus();
+			return;
+		}
+		[...listRef.current?.querySelectorAll("[data-item]") ?? []].find((element) => element.dataset.item === target)?.querySelector("[role=checkbox]")?.focus();
+	});
+	function commit(next) {
+		if (itemsProp === void 0) setUncontrolled(next);
+		onItemsChange?.(next);
+	}
+	function toggle(id, done) {
+		commit(items.map((item) => item.id === id ? {
+			...item,
+			done
+		} : item));
+	}
+	function add() {
+		const label = draft.trim();
+		if (!label) return;
+		created.current += 1;
+		const item = {
+			id: `${uid}-${String(created.current)}`,
+			label,
+			done: false
+		};
+		const next = [...items, item];
+		commit(next);
+		setDraft("");
+		setAnnounced(`Added: ${label}`);
+		if (next.length >= maxItems) {
+			setAdding(false);
+			pendingFocus.current = item.id;
+		}
+	}
+	function remove(index) {
+		const item = items[index];
+		if (!item) return;
+		const next = items.filter((_, position) => position !== index);
+		commit(next);
+		setAnnounced(`Removed: ${item.label}`);
+		const neighbour = next[index] ?? next[index - 1];
+		pendingFocus.current = neighbour ? neighbour.id : "add";
+	}
+	function handleInputKeyDown(event) {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			add();
+		} else if (event.key === "Escape") {
+			event.preventDefault();
+			setDraft("");
+			setAdding(false);
+			pendingFocus.current = "add";
+		}
+	}
+	const ease = `cubic-bezier(0.34, ${String(1 + bounce / 100 * 1.1)}, 0.64, 1)`;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"data-slot": "animated-checklist",
+		className: cn(animatedChecklistVariants({ stroke }), className),
+		style: {
+			...radius === void 0 ? {} : { borderRadius: `${String(radius)}px` },
+			"--animated-checklist-box": `${String(boxSize)}px`,
+			"--animated-checklist-ease": ease,
+			...style
+		},
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("ul", {
+				ref: listRef,
+				"data-slot": "animated-checklist-list",
+				className: "flex flex-col",
+				children: items.map((item, index) => /* @__PURE__ */ jsxs("li", {
+					"data-item": item.id,
+					"data-done": item.done || void 0,
+					className: cn("group/row flex h-10 items-center gap-1 rounded-xl", "transition-[opacity,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "starting:-translate-y-1 starting:opacity-0"),
+					children: [/* @__PURE__ */ jsxs("label", {
+						className: "flex h-full min-w-0 flex-1 cursor-pointer items-center gap-3",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							checked: item.done ?? false,
+							onCheckedChange: (checked) => {
+								toggle(item.id, checked === true);
+							},
+							className: box
+						}), /* @__PURE__ */ jsxs("span", {
+							"data-slot": "animated-checklist-text",
+							className: cn("relative min-w-0 truncate text-sm leading-tight font-[450] tracking-[-0.01em]", "transition-opacity duration-[var(--duration-normal)] group-data-[done]/row:opacity-42"),
+							children: [item.label, /* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								"data-slot": "animated-checklist-rule",
+								className: cn("absolute inset-x-0 top-[46%] h-[1.5px] origin-left scale-x-0 rounded-sm bg-current rtl:origin-right", "transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", "group-data-[done]/row:scale-x-100")
+							})]
+						})]
+					}), removable ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": `Remove ${item.label}`,
+						"data-slot": "animated-checklist-remove",
+						className: cn("grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground opacity-0", "transition-opacity duration-[var(--duration-fast)] group-hover/row:opacity-100 focus-visible:opacity-100", "hover:bg-foreground/6 hover:text-foreground", focusRing),
+						onClick: () => {
+							remove(index);
+						},
+						children: /* @__PURE__ */ jsx("svg", {
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							"aria-hidden": "true",
+							className: "size-3.5",
+							children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" })
+						})
+					}) : null]
+				}, item.id))
+			}),
+			allowAdd && !full ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "animated-checklist-add",
+				className: "flex h-10 items-center gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "size-[var(--animated-checklist-box)] shrink-0 rounded-[32%] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--color-foreground)_16%,transparent)]"
+				}), adding ? /* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					"aria-label": placeholder,
+					placeholder,
+					maxLength,
+					value: draft,
+					"data-slot": "animated-checklist-input",
+					className: "h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-foreground/34",
+					onChange: (event) => {
+						setDraft(event.target.value);
+					},
+					onKeyDown: handleInputKeyDown,
+					onBlur: () => {
+						if (!draft.trim()) setAdding(false);
+					}
+				}) : /* @__PURE__ */ jsx("button", {
+					ref: addRef,
+					type: "button",
+					"data-slot": "animated-checklist-new",
+					className: cn("rounded-sm text-sm opacity-34 transition-opacity duration-[var(--duration-fast)] hover:opacity-62", focusRing, "focus-visible:opacity-62"),
+					onClick: () => {
+						setAdding(true);
+					},
+					children: addLabel
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: announced
+			})
+		]
+	});
+}
+//#endregion
+export { AnimatedChecklist, animatedChecklistVariants };
+
+//# sourceMappingURL=animated-checklist.js.map

package/dist/components/animated-checklist/animated-checklist.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-checklist.js","names":[],"sources":["../../../src/components/animated-checklist/animated-checklist.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Checklist (MIT, © 2026 Lorenzo Cabra). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { Checkbox } from \"@/components/checkbox\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A small task list whose boxes fill with a bounce, whose ticks draw in, and\n * whose done tasks fade and are struck through.\n *\n * Every row is Dowel's Checkbox inside a <label>, so the whole row toggles and\n * the checkbox semantics, focus ring and tick-drawing are the Checkbox's own.\n * This component only restyles the box — a fill that scales in from the centre\n * with an overshoot (the source's JS spring, as a CSS transition whose bezier\n * takes the `bounce` amount) — and adds the strike, the list and the add row.\n *\n * Added over the source, which lists them as missing: a labelled group and a\n * real list, Escape to cancel adding (focus returns to \"Add new task\"),\n * optional removal, and polite announcements when a task is added or removed.\n */\n\nconst animatedChecklistVariants = cva(\n  \"flex w-[18.75rem] max-w-full flex-col rounded-[1.125rem] bg-card px-3.5 py-0.75 text-card-foreground\",\n  {\n    variants: {\n      /** A hairline ring — the source's Stroke switch. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: false },\n  },\n);\n\n/** Dowel's Checkbox, restyled: an outline box that fills from the centre. */\nconst box = cn(\n  \"relative size-[var(--animated-checklist-box)] overflow-hidden rounded-[32%] border-[1.5px] border-foreground/28 bg-transparent shadow-none\",\n  \"before:absolute before:inset-0 before:scale-0 before:rounded-[inherit] before:bg-foreground before:content-['']\",\n  \"before:transition-[scale] before:duration-[var(--duration-slower)] before:ease-[var(--animated-checklist-ease)]\",\n  \"data-[state=checked]:border-transparent data-[state=checked]:bg-transparent data-[state=checked]:text-card data-[state=checked]:before:scale-100\",\n  \"[&_svg]:size-[68%] [&>[data-slot=checkbox-indicator]]:relative\",\n);\n\nexport interface ChecklistItem {\n  id: string;\n  label: string;\n  done?: boolean;\n}\n\nexport interface AnimatedChecklistProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof animatedChecklistVariants> {\n  /** Controlled tasks. */\n  items?: ChecklistItem[];\n  /** Initial tasks when uncontrolled. */\n  defaultItems?: ChecklistItem[];\n  /** Called with the new list whenever a task is checked, added or removed. */\n  onItemsChange?: (items: ChecklistItem[]) => void;\n  /** Show the \"Add new task\" row. */\n  allowAdd?: boolean;\n  /** The add row hides once the list reaches this many tasks. */\n  maxItems?: number;\n  /** Show a remove button on each task. */\n  removable?: boolean;\n  addLabel?: string;\n  placeholder?: string;\n  /** Longest task label, in characters. */\n  maxLength?: number;\n  /** Fill overshoot, 0–100. */\n  bounce?: number;\n  /** Checkbox size in pixels. The corner stays 32% of it. */\n  boxSize?: number;\n  /** Card corner radius in pixels. Defaults to 18. */\n  radius?: number;\n}\n\n/** A task list with bouncing checkboxes, drawn ticks and struck-through done tasks. */\nexport function AnimatedChecklist({\n  className,\n  stroke,\n  items: itemsProp,\n  defaultItems = [],\n  onItemsChange,\n  allowAdd = true,\n  maxItems = Number.POSITIVE_INFINITY,\n  removable = false,\n  addLabel = \"Add new task\",\n  placeholder = \"New task\",\n  maxLength = 40,\n  bounce = 50,\n  boxSize = 18,\n  radius,\n  style,\n  ...props\n}: AnimatedChecklistProps) {\n  const uid = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultItems);\n  const items = itemsProp ?? uncontrolled;\n  const [adding, setAdding] = useState(false);\n  const [draft, setDraft] = useState(\"\");\n  const [announced, setAnnounced] = useState(\"\");\n  const created = useRef(0);\n  const addRef = useRef<HTMLButtonElement | null>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const listRef = useRef<HTMLUListElement | null>(null);\n  const pendingFocus = useRef<string | null>(null);\n  const full = items.length >= maxItems;\n\n  useEffect(() => {\n    if (adding) inputRef.current?.focus();\n  }, [adding]);\n\n  // Focus that has to wait for the list to re-render: after a removal, or\n  // after an add that filled the list.\n  useEffect(() => {\n    const target = pendingFocus.current;\n    if (target === null) return;\n    pendingFocus.current = null;\n    if (target === \"add\") {\n      addRef.current?.focus();\n      return;\n    }\n    const rows = listRef.current?.querySelectorAll<HTMLElement>(\"[data-item]\") ?? [];\n    const row = [...rows].find((element) => element.dataset.item === target);\n    row?.querySelector<HTMLElement>(\"[role=checkbox]\")?.focus();\n  });\n\n  function commit(next: ChecklistItem[]) {\n    if (itemsProp === undefined) setUncontrolled(next);\n    onItemsChange?.(next);\n  }\n\n  function toggle(id: string, done: boolean) {\n    commit(items.map((item) => (item.id === id ? { ...item, done } : item)));\n  }\n\n  function add() {\n    const label = draft.trim();\n    if (!label) return;\n    created.current += 1;\n    const item = { id: `${uid}-${String(created.current)}`, label, done: false };\n    const next = [...items, item];\n    commit(next);\n    setDraft(\"\");\n    setAnnounced(`Added: ${label}`);\n    if (next.length >= maxItems) {\n      setAdding(false);\n      pendingFocus.current = item.id;\n    }\n  }\n\n  function remove(index: number) {\n    const item = items[index];\n    if (!item) return;\n    const next = items.filter((_, position) => position !== index);\n    commit(next);\n    setAnnounced(`Removed: ${item.label}`);\n    const neighbour = next[index] ?? next[index - 1];\n    pendingFocus.current = neighbour ? neighbour.id : \"add\";\n  }\n\n  function handleInputKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      add();\n    } else if (event.key === \"Escape\") {\n      event.preventDefault();\n      setDraft(\"\");\n      setAdding(false);\n      pendingFocus.current = \"add\";\n    }\n  }\n\n  const ease = `cubic-bezier(0.34, ${String(1 + (bounce / 100) * 1.1)}, 0.64, 1)`;\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"animated-checklist\"\n      className={cn(animatedChecklistVariants({ stroke }), className)}\n      style={\n        {\n          ...(radius === undefined ? {} : { borderRadius: `${String(radius)}px` }),\n          \"--animated-checklist-box\": `${String(boxSize)}px`,\n          \"--animated-checklist-ease\": ease,\n          ...style,\n        } as CSSProperties\n      }\n      {...props}\n    >\n      <ul ref={listRef} data-slot=\"animated-checklist-list\" className=\"flex flex-col\">\n        {items.map((item, index) => (\n          <li\n            key={item.id}\n            data-item={item.id}\n            data-done={item.done || undefined}\n            className={cn(\n              \"group/row flex h-10 items-center gap-1 rounded-xl\",\n              \"transition-[opacity,translate] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n              \"starting:-translate-y-1 starting:opacity-0\",\n            )}\n          >\n            <label className=\"flex h-full min-w-0 flex-1 cursor-pointer items-center gap-3\">\n              <Checkbox\n                checked={item.done ?? false}\n                onCheckedChange={(checked) => {\n                  toggle(item.id, checked === true);\n                }}\n                className={box}\n              />\n              <span\n                data-slot=\"animated-checklist-text\"\n                className={cn(\n                  \"relative min-w-0 truncate text-sm leading-tight font-[450] tracking-[-0.01em]\",\n                  \"transition-opacity duration-[var(--duration-normal)] group-data-[done]/row:opacity-42\",\n                )}\n              >\n                {item.label}\n                <span\n                  aria-hidden=\"true\"\n                  data-slot=\"animated-checklist-rule\"\n                  className={cn(\n                    \"absolute inset-x-0 top-[46%] h-[1.5px] origin-left scale-x-0 rounded-sm bg-current rtl:origin-right\",\n                    \"transition-[scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                    \"group-data-[done]/row:scale-x-100\",\n                  )}\n                />\n              </span>\n            </label>\n            {removable ? (\n              <button\n                type=\"button\"\n                aria-label={`Remove ${item.label}`}\n                data-slot=\"animated-checklist-remove\"\n                className={cn(\n                  \"grid size-7 shrink-0 place-items-center rounded-md text-muted-foreground opacity-0\",\n                  \"transition-opacity duration-[var(--duration-fast)] group-hover/row:opacity-100 focus-visible:opacity-100\",\n                  \"hover:bg-foreground/6 hover:text-foreground\",\n                  focusRing,\n                )}\n                onClick={() => {\n                  remove(index);\n                }}\n              >\n                <svg\n                  viewBox=\"0 0 24 24\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  strokeWidth=\"2\"\n                  strokeLinecap=\"round\"\n                  aria-hidden=\"true\"\n                  className=\"size-3.5\"\n                >\n                  <path d=\"M18 6 6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            ) : null}\n          </li>\n        ))}\n      </ul>\n      {allowAdd && !full ? (\n        <div data-slot=\"animated-checklist-add\" className=\"flex h-10 items-center gap-3\">\n          <span\n            aria-hidden=\"true\"\n            className=\"size-[var(--animated-checklist-box)] shrink-0 rounded-[32%] shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--color-foreground)_16%,transparent)]\"\n          />\n          {adding ? (\n            <input\n              ref={inputRef}\n              aria-label={placeholder}\n              placeholder={placeholder}\n              maxLength={maxLength}\n              value={draft}\n              data-slot=\"animated-checklist-input\"\n              className=\"h-full min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-foreground/34\"\n              onChange={(event) => {\n                setDraft(event.target.value);\n              }}\n              onKeyDown={handleInputKeyDown}\n              onBlur={() => {\n                if (!draft.trim()) setAdding(false);\n              }}\n            />\n          ) : (\n            <button\n              ref={addRef}\n              type=\"button\"\n              data-slot=\"animated-checklist-new\"\n              className={cn(\n                \"rounded-sm text-sm opacity-34 transition-opacity duration-[var(--duration-fast)] hover:opacity-62\",\n                focusRing,\n                \"focus-visible:opacity-62\",\n              )}\n              onClick={() => {\n                setAdding(true);\n              }}\n            >\n              {addLabel}\n            </button>\n          )}\n        </div>\n      ) : null}\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {announced}\n      </span>\n    </div>\n  );\n}\n\nexport { animatedChecklistVariants };\n"],"mappings":"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"}

package/dist/components/animated-checklist/index.d.ts

@@ -0,0 +1,2 @@
+import { AnimatedChecklist, AnimatedChecklistProps, ChecklistItem, animatedChecklistVariants } from "./animated-checklist.js";
+export { AnimatedChecklist, type AnimatedChecklistProps, type ChecklistItem, animatedChecklistVariants };

package/dist/components/animated-checklist/index.js

@@ -0,0 +1,2 @@
+import { AnimatedChecklist, animatedChecklistVariants } from "./animated-checklist.js";
+export { AnimatedChecklist, animatedChecklistVariants };

package/dist/components/animated-checklist/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/animated-checklist/meta.ts
+const meta = defineMeta({
+	name: "animated-checklist",
+	title: "Animated Checklist",
+	description: "A task list whose boxes fill with a bounce and whose done tasks fade and strike through, with an add row.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["checkbox"],
+	files: ["animated-checklist.tsx"],
+	a11y: "A labelled group holding a real list. Each row is Dowel's Checkbox inside a <label>, so the whole row toggles with a click and the box with Space. The add row is a button that becomes a text field: Enter adds, Escape cancels and returns focus to \"Add new task\". Optional remove buttons are named per task and move focus to a neighbour. Additions and removals are announced politely. Name the group with aria-label."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/animated-checklist/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/animated-checklist/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"animated-checklist\",\n  title: \"Animated Checklist\",\n  description:\n    \"A task list whose boxes fill with a bounce and whose done tasks fade and strike through, with an add row.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"checkbox\"],\n  files: [\"animated-checklist.tsx\"],\n  a11y:\n    \"A labelled group holding a real list. Each row is Dowel's Checkbox inside a <label>, so the whole row \" +\n    \"toggles with a click and the box with Space. The add row is a button that becomes a text field: Enter \" +\n    'adds, Escape cancels and returns focus to \"Add new task\". Optional remove buttons are named per task and ' +\n    \"move focus to a neighbour. Additions and removals are announced politely. Name the group with aria-label.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,UAAU;CACjC,OAAO,CAAC,wBAAwB;CAChC,MACE;AAIJ,CAAC"}

package/dist/components/app-stack/app-stack.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/app-stack/app-stack.d.ts
+declare const appStackTileVariants: (props?: ({
+  selected?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface AppStackItem {
+  id: string;
+  /** The app's name: the tile's label and the toggle's accessible name. */
+  name: string;
+  /** An image URL, or any node (an inline SVG, an icon component). Decorative. */
+  icon: string | ReactNode;
+}
+type AppStackStatus = "idle" | "downloading" | "complete";
+interface AppStackProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  apps: AppStackItem[];
+  /** The picker's heading, e.g. "Starter Mac". */
+  title?: string;
+  /** Accessible name of the collapsed stack. Defaults to "Choose from {title}". */
+  triggerLabel?: string;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Controlled selection, by app id. */
+  selected?: string[];
+  defaultSelected?: string[];
+  onSelectedChange?: (selected: string[]) => void;
+  /** Called with the selected ids. Return a promise to show progress until it settles. */
+  onDownload?: (selected: string[]) => void | Promise<unknown>;
+  /** Milliseconds the completed state shows before resetting. */
+  resetAfter?: number;
+  downloadLabel?: string;
+  downloadingLabel?: string;
+  completeLabel?: string;
+  failedLabel?: string;
+}
+/** Stacked app icons that fan out and open into a multi-select download picker. */
+declare function AppStack({ className, apps, title, triggerLabel, expanded: expandedProp, defaultExpanded, onExpandedChange, selected: selectedProp, defaultSelected, onSelectedChange, onDownload, resetAfter, downloadLabel, downloadingLabel, completeLabel, failedLabel, ...props }: AppStackProps): import("react").JSX.Element;
+//#endregion
+export { AppStack, AppStackItem, AppStackProps, AppStackStatus, appStackTileVariants };
+//# sourceMappingURL=app-stack.d.ts.map

package/dist/components/app-stack/app-stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-stack.d.ts","names":[],"sources":["../../../src/components/app-stack/app-stack.tsx"],"mappings":";;cA8CM,uBAAoB;;6CAezB;UAEgB;EACf;;EAEA;;EAEA,eAAe;;KAGL;UAEK,sBAAsB,KAAK;EAC1C,MAAM;;EAEN;;EAEA;EACA;EACA;EACA,oBAAoB;;EAEpB;EACA;EACA,oBAAoB;;EAEpB,cAAc,8BAA8B;;EAE5C;EACA;EACA;EACA;EACA;;;iBAgDc,WACd,WACA,MACA,OACA,cACA,UAAU,cACV,iBACA,kBACA,UAAU,cACV,iBACA,kBACA,YACA,YACA,eACA,kBACA,eACA,gBACG,SACF,gCAAa,IAAA"}