@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"ai-message.js","names":[],"sources":["../../../src/components/ai-message/ai-message.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * One turn in a conversation.\n *\n * The role is stated in text, not only in layout. Alignment and colour are how\n * a sighted reader tells a question from an answer; a screen reader user gets\n * nothing from either, so every message carries a visually hidden label naming\n * who is speaking.\n */\n\nconst messageVariants = cva(\"group/message flex w-full gap-3\", {\n  variants: {\n    role: {\n      user: \"flex-row-reverse\",\n      assistant: \"flex-row\",\n      system: \"flex-row\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nconst messageBodyVariants = cva(\"min-w-0 rounded-xl px-4 py-3 text-sm\", {\n  variants: {\n    role: {\n      user: \"max-w-[85%] bg-primary text-primary-foreground\",\n      assistant: \"w-full bg-transparent px-0 py-0 text-foreground\",\n      system:\n        \"w-full border border-dashed border-border bg-muted/40 text-xs text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nexport interface MessageProps\n  extends ComponentPropsWithRef<\"li\">, Omit<VariantProps<typeof messageVariants>, \"role\"> {\n  /**\n   * Who is speaking.\n   *\n   * Named `from` rather than `role` on purpose. `role` is a global HTML\n   * attribute, and a component prop that shadows it cannot be told apart from\n   * the real thing by static analysis — every consumer's accessibility linter\n   * would flag ordinary usage of this component. The values are still the\n   * familiar conversation roles.\n   */\n  from?: MessageRole;\n  /** Overrides the visually hidden speaker label. */\n  fromLabel?: string;\n}\n\nconst DEFAULT_ROLE_LABELS: Record<MessageRole, string> = {\n  user: \"You said\",\n  assistant: \"Assistant said\",\n  system: \"System\",\n};\n\nexport function Message({\n  className,\n  from = \"assistant\",\n  fromLabel,\n  children,\n  ...props\n}: MessageProps) {\n  return (\n    <li\n      data-slot=\"message\"\n      data-from={from}\n      className={cn(messageVariants({ role: from }), className)}\n      {...props}\n    >\n      {/* Names the speaker for anyone who cannot see the layout. */}\n      <span className=\"sr-only\">{fromLabel ?? DEFAULT_ROLE_LABELS[from]}:</span>\n      {children}\n    </li>\n  );\n}\n\nexport interface MessageBodyProps\n  extends ComponentPropsWithRef<\"div\">, Omit<VariantProps<typeof messageBodyVariants>, \"role\"> {\n  /** Who is speaking. See the note on MessageProps for why not `role`. */\n  from?: MessageRole;\n}\n\nexport function MessageBody({ className, from = \"assistant\", ...props }: MessageBodyProps) {\n  return (\n    <div\n      data-slot=\"message-body\"\n      className={cn(messageBodyVariants({ role: from }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface MessageAvatarProps extends ComponentPropsWithRef<\"div\"> {\n  asChild?: boolean;\n}\n\n/** Decorative: the speaker is already named by the hidden label on Message. */\nexport function MessageAvatar({ className, asChild, ...props }: MessageAvatarProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      data-slot=\"message-avatar\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"grid size-7 shrink-0 place-items-center rounded-full border border-border bg-muted\",\n        \"text-xs font-medium text-muted-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * Per-message controls: copy, regenerate, feedback.\n *\n * Revealed on hover for pointer users but always present in the DOM and in the\n * tab order — hiding controls behind hover makes them unreachable by keyboard\n * and invisible on touch.\n */\nexport function MessageActions({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-actions\"\n      className={cn(\n        \"mt-1.5 flex items-center gap-1\",\n        \"opacity-0 transition-opacity duration-[var(--duration-fast)]\",\n        \"group-focus-within/message:opacity-100 group-hover/message:opacity-100\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Attachments, citations and other content that hangs off a message. */\nexport function MessageFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\"mt-2 flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { messageBodyVariants, messageVariants };\n"],"mappings":";;;;;;;;;;;;;;AAiBA,MAAM,kBAAkB,IAAI,mCAAmC;CAC7D,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,wCAAwC;CACtE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QACE;CACJ,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAoBD,MAAM,sBAAmD;CACvD,MAAM;CACN,WAAW;CACX,QAAQ;AACV;AAEA,SAAgB,QAAQ,EACtB,WACA,OAAO,aACP,WACA,UACA,GAAG,SACY;CACf,OACE,qBAAC,MAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,gBAAgB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EACxD,GAAI;EAJN,UAAA,CAOE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA2B,aAAa,oBAAoB,OAAM,GAAO;EACxE,CAAA,GAAA,QACC;;AAER;AAQA,SAAgB,YAAY,EAAE,WAAW,OAAO,aAAa,GAAG,SAA2B;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAOA,SAAgB,cAAc,EAAE,WAAW,SAAS,GAAG,SAA6B;CAClF,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,sFACA,6CACA,0CACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;;AASA,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAuC;CACpF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kCACA,gEACA,0EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"ai-message.js","names":[],"sources":["../../../src/components/ai-message/ai-message.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Message (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\n/**\n * One turn in a conversation.\n *\n * The role is stated in text, not only in layout. Alignment and colour are how\n * a sighted reader tells a question from an answer; a screen reader user gets\n * nothing from either, so every message carries a visually hidden label naming\n * who is speaking.\n */\n\nconst messageVariants = cva(\"group/message flex w-full gap-3\", {\n  variants: {\n    role: {\n      user: \"flex-row-reverse\",\n      assistant: \"flex-row\",\n      system: \"flex-row\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nconst messageBodyVariants = cva(\"min-w-0 rounded-xl px-4 py-3 text-sm\", {\n  variants: {\n    role: {\n      user: \"max-w-[85%] bg-primary text-primary-foreground\",\n      assistant: \"w-full bg-transparent px-0 py-0 text-foreground\",\n      system:\n        \"w-full border border-dashed border-border bg-muted/40 text-xs text-muted-foreground\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nexport interface MessageProps\n  extends ComponentPropsWithRef<\"li\">, Omit<VariantProps<typeof messageVariants>, \"role\"> {\n  /**\n   * Who is speaking.\n   *\n   * Named `from` rather than `role` on purpose. `role` is a global HTML\n   * attribute, and a component prop that shadows it cannot be told apart from\n   * the real thing by static analysis — every consumer's accessibility linter\n   * would flag ordinary usage of this component. The values are still the\n   * familiar conversation roles.\n   */\n  from?: MessageRole;\n  /** Overrides the visually hidden speaker label. */\n  fromLabel?: string;\n}\n\nconst DEFAULT_ROLE_LABELS: Record<MessageRole, string> = {\n  user: \"You said\",\n  assistant: \"Assistant said\",\n  system: \"System\",\n};\n\nexport function Message({\n  className,\n  from = \"assistant\",\n  fromLabel,\n  children,\n  ...props\n}: MessageProps) {\n  return (\n    <li\n      data-slot=\"message\"\n      data-from={from}\n      className={cn(messageVariants({ role: from }), className)}\n      {...props}\n    >\n      {/* Names the speaker for anyone who cannot see the layout. */}\n      <span className=\"sr-only\">{fromLabel ?? DEFAULT_ROLE_LABELS[from]}:</span>\n      {children}\n    </li>\n  );\n}\n\nexport interface MessageBodyProps\n  extends ComponentPropsWithRef<\"div\">, Omit<VariantProps<typeof messageBodyVariants>, \"role\"> {\n  /** Who is speaking. See the note on MessageProps for why not `role`. */\n  from?: MessageRole;\n}\n\nexport function MessageBody({ className, from = \"assistant\", ...props }: MessageBodyProps) {\n  return (\n    <div\n      data-slot=\"message-body\"\n      className={cn(messageBodyVariants({ role: from }), className)}\n      {...props}\n    />\n  );\n}\n\nexport interface MessageAvatarProps extends ComponentPropsWithRef<\"div\"> {\n  asChild?: boolean;\n}\n\n/** Decorative: the speaker is already named by the hidden label on Message. */\nexport function MessageAvatar({ className, asChild, ...props }: MessageAvatarProps) {\n  const Comp = asChild ? Slot.Root : \"div\";\n\n  return (\n    <Comp\n      data-slot=\"message-avatar\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"grid size-7 shrink-0 place-items-center rounded-full border border-border bg-muted\",\n        \"text-xs font-medium text-muted-foreground\",\n        \"[&_svg:not([class*='size-'])]:size-3.5\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst PREFIX = \"dowel-ai-message\";\n\n/*\n * Only a private custom property lives here: which way the actions slide in.\n * They come out of the bubble's own edge — the inline start for the assistant,\n * the inline end for the user — and the sign flips in RTL. Everything visible\n * is a layered utility on the container, so a consumer className still wins.\n */\nconst STYLES = `\n[data-slot=message-actions]{--dowel-message-slide:-6px}\n[data-from=user] [data-slot=message-actions]{--dowel-message-slide:6px}\n[data-slot=message-actions]:dir(rtl){--dowel-message-slide:6px}\n[data-from=user] [data-slot=message-actions]:dir(rtl){--dowel-message-slide:-6px}\n`;\n\n/**\n * Per-message controls: copy, regenerate, feedback.\n *\n * Revealed on hover for pointer users but always present in the DOM and in the\n * tab order — hiding controls behind hover makes them unreachable by keyboard\n * and invisible on touch. On devices that cannot hover they are always shown.\n */\nexport function MessageActions({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <>\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <div\n        data-slot=\"message-actions\"\n        className={cn(\n          \"mt-1.5 flex items-center gap-1\",\n          \"translate-x-(--dowel-message-slide) scale-90 opacity-0\",\n          \"transition-[opacity,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          \"group-focus-within/message:translate-x-0 group-focus-within/message:scale-100 group-focus-within/message:opacity-100\",\n          \"group-hover/message:translate-x-0 group-hover/message:scale-100 group-hover/message:opacity-100\",\n          \"[@media(hover:none)]:translate-x-0 [@media(hover:none)]:scale-100 [@media(hover:none)]:opacity-100\",\n          className,\n        )}\n        {...props}\n      />\n    </>\n  );\n}\n\nexport interface MessageTimestampProps extends ComponentPropsWithRef<\"time\"> {\n  /** Machine-readable value for `dateTime`. Children are the display text. */\n  dateTime?: string;\n}\n\n/**\n * When the message was sent.\n *\n * A real `<time>`, so the display text can be relative (\"2 min ago\") while the\n * machine-readable value stays exact.\n */\nexport function MessageTimestamp({ className, ...props }: MessageTimestampProps) {\n  return (\n    <time\n      data-slot=\"message-timestamp\"\n      className={cn(\"text-xs text-muted-foreground tabular-nums\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Attachments, citations and other content that hangs off a message. */\nexport function MessageFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"message-footer\"\n      className={cn(\"mt-2 flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { messageBodyVariants, messageVariants };\n"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAM,kBAAkB,IAAI,mCAAmC;CAC7D,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAED,MAAM,sBAAsB,IAAI,wCAAwC;CACtE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,WAAW;EACX,QACE;CACJ,EACF;CACA,iBAAiB,EACf,MAAM,YACR;AACF,CAAC;AAoBD,MAAM,sBAAmD;CACvD,MAAM;CACN,WAAW;CACX,QAAQ;AACV;AAEA,SAAgB,QAAQ,EACtB,WACA,OAAO,aACP,WACA,UACA,GAAG,SACY;CACf,OACE,qBAAC,MAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,gBAAgB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EACxD,GAAI;EAJN,UAAA,CAOE,qBAAC,QAAD;GAAM,WAAU;GAAhB,UAAA,CAA2B,aAAa,oBAAoB,OAAM,GAAO;EACxE,CAAA,GAAA,QACC;;AAER;AAQA,SAAgB,YAAY,EAAE,WAAW,OAAO,aAAa,GAAG,SAA2B;CACzF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oBAAoB,EAAE,MAAM,KAAK,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;AAOA,SAAgB,cAAc,EAAE,WAAW,SAAS,GAAG,SAA6B;CAClF,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GACT,sFACA,6CACA,0CACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,SAAS;AAQf,MAAM,SAAS;;;;;;;;;;;;;AAcf,SAAgB,eAAe,EAAE,WAAW,GAAG,SAAuC;CACpF,OACE,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,SAAD;EAAO,MAAM;EAAQ,YAAW;EAC7B,UAAA;CACI,CAAA,GACP,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kCACA,0DACA,uGACA,wHACA,mGACA,sGACA,SACF;EACA,GAAI;CACL,CAAA,CACD,EAAA,CAAA;AAEN;;;;;;;AAaA,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;CAC/E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,cAAc,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,0CAA0C,SAAS;EACjE,GAAI;CACL,CAAA;AAEL"}

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

@@ -1,2 +1,2 @@
-import { Message, MessageActions, MessageAvatar, MessageAvatarProps, MessageBody, MessageBodyProps, MessageFooter, MessageProps, MessageRole, messageBodyVariants, messageVariants } from "./ai-message.js";
-export { Message, MessageActions, MessageAvatar, type MessageAvatarProps, MessageBody, type MessageBodyProps, MessageFooter, type MessageProps, type MessageRole, messageBodyVariants, messageVariants };
+import { Message, MessageActions, MessageAvatar, MessageAvatarProps, MessageBody, MessageBodyProps, MessageFooter, MessageProps, MessageRole, MessageTimestamp, MessageTimestampProps, messageBodyVariants, messageVariants } from "./ai-message.js";
+export { Message, MessageActions, MessageAvatar, type MessageAvatarProps, MessageBody, type MessageBodyProps, MessageFooter, type MessageProps, type MessageRole, MessageTimestamp, type MessageTimestampProps, messageBodyVariants, messageVariants };

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

@@ -1,2 +1,2 @@
-import { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, messageBodyVariants, messageVariants } from "./ai-message.js";
-export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, messageBodyVariants, messageVariants };
+import { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, MessageTimestamp, messageBodyVariants, messageVariants } from "./ai-message.js";
+export { Message, MessageActions, MessageAvatar, MessageBody, MessageFooter, MessageTimestamp, messageBodyVariants, messageVariants };

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

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["ai-message.tsx"],
-	a11y: "Every message carries a visually hidden label naming the speaker. Alignment and colour tell a sighted reader who is talking and tell a screen reader user nothing, so the role is always in text. Message actions fade in on hover but stay in the DOM and in the tab order — a control that only exists on hover is unreachable by keyboard and invisible on touch."
+	a11y: "Every message carries a visually hidden label naming the speaker. Alignment and colour tell a sighted reader who is talking and tell a screen reader user nothing, so the role is always in text. Message actions fade in on hover but stay in the DOM and in the tab order — a control that only exists on hover is unreachable by keyboard and invisible on touch — and on devices that cannot hover they are always shown. MessageTimestamp is a real <time>."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-message/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-message\",\n  title: \"AI Message\",\n  description: \"One turn in a conversation, with role, avatar, actions and footer slots.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-message.tsx\"],\n  a11y:\n    \"Every message carries a visually hidden label naming the speaker. Alignment and colour tell \" +\n    \"a sighted reader who is talking and tell a screen reader user nothing, so the role is always \" +\n    \"in text. Message actions fade in on hover but stay in the DOM and in the tab order — a \" +\n    \"control that only exists on hover is unreachable by keyboard and invisible on touch.\",\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,gBAAgB;CACxB,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-message/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-message\",\n  title: \"AI Message\",\n  description: \"One turn in a conversation, with role, avatar, actions and footer slots.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-message.tsx\"],\n  a11y:\n    \"Every message carries a visually hidden label naming the speaker. Alignment and colour tell \" +\n    \"a sighted reader who is talking and tell a screen reader user nothing, so the role is always \" +\n    \"in text. Message actions fade in on hover but stay in the DOM and in the tab order — a \" +\n    \"control that only exists on hover is unreachable by keyboard and invisible on touch — and \" +\n    \"on devices that cannot hover they are always shown. MessageTimestamp is a real <time>.\",\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,gBAAgB;CACxB,MACE;AAKJ,CAAC"}

package/dist/components/ai-prompt-input/ai-prompt-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-prompt-input.d.ts","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"mappings":";;UA2CiB,yBAAyB,KAAK;EAC7C,YAAY,OAAO,UAAU;;EAE7B;;EAEA;;iBAGc,cACd,WACA,UACA,UACA,MACA,aACG,SACF,mCAAgB,IAAA;UA+CF,iCAAiC,KAChD;EAGA;;;;;;;EAOA;;iBAGc,sBACd,WACA,SACA,eACA,WACA,aACG,SACF,2CAAwB,IAAA;;iBAuDX,qBAAqB,cAAc,SAAS,+CAA4B,IAAA;UAUvE,+BAA+B;;EAE9C;;EAEA;;EAEA;;;;;;;;;iBAUc,oBACd,WACA,OACA,WACA,WACG,SACF,yCAAsB,IAAA;UAsCR,gCAAgC;EAC/C;EACA;;EAEA;;;;;;;;;;;;;;iBAec,qBACd,WACA,OACA,KACA,WACG,SACF,0CAAuB,IAAA"}
+{"version":3,"file":"ai-prompt-input.d.ts","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"mappings":";;UA4CiB,yBAAyB,KAAK;EAC7C,YAAY,OAAO,UAAU;;EAE7B;;EAEA;;iBAGc,cACd,WACA,UACA,UACA,MACA,aACG,SACF,mCAAgB,IAAA;UA+CF,iCAAiC,KAChD;EAGA;;;;;;;EAOA;;iBAGc,sBACd,WACA,SACA,eACA,WACA,aACG,SACF,2CAAwB,IAAA;;iBAuDX,qBAAqB,cAAc,SAAS,+CAA4B,IAAA;UAUvE,+BAA+B;;EAE9C;;EAEA;;EAEA;;;;;;;;;iBAUc,oBACd,WACA,OACA,WACA,WACG,SACF,yCAAsB,IAAA;UAgER,gCAAgC;EAC/C;EACA;;EAEA;;;;;;;;;;;;;;iBAec,qBACd,WACA,OACA,KACA,WACG,SACF,0CAAuB,IAAA"}

package/dist/components/ai-prompt-input/ai-prompt-input.js

@@ -95,19 +95,35 @@ function PromptInputToolbar({ className, ...props }) {
 */
 function PromptInputSubmit({ className, label = "Send message", stopLabel = "Stop generating", onStop, ...props }) {
 	const { busy, disabled } = usePromptInput("PromptInputSubmit");
-	return /* @__PURE__ */ jsx("button", {
+	const glyph = "col-start-1 row-start-1 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]";
+	return /* @__PURE__ */ jsxs("button", {
 		type: busy ? "button" : "submit",
 		"data-slot": "prompt-input-submit",
+		"data-state": busy ? "stop" : "send",
 		"aria-label": busy ? stopLabel : label,
 		disabled,
 		onClick: busy ? onStop : void 0,
-		className: cn("ml-auto grid size-8 shrink-0 place-items-center rounded-lg", "bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]", "hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55", focusRing, className),
+		className: cn("ms-auto grid size-8 shrink-0 place-items-center rounded-lg", "bg-primary text-primary-foreground", "transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:scale-105 hover:bg-primary-hover active:scale-95", "disabled:pointer-events-none disabled:scale-100 disabled:opacity-55", focusRing, className),
 		...props,
-		children: busy ? /* @__PURE__ */ jsx("svg", {
+		children: [/* @__PURE__ */ jsx("svg", {
 			viewBox: "0 0 24 24",
 			fill: "none",
 			"aria-hidden": "true",
-			className: "size-3.5",
+			"data-glyph": "send",
+			className: cn(glyph, "size-4", busy ? "scale-60 opacity-0" : "scale-100 opacity-100"),
+			children: /* @__PURE__ */ jsx("path", {
+				d: "M12 19V5m0 0-6 6m6-6 6 6",
+				stroke: "currentColor",
+				strokeWidth: "2",
+				strokeLinecap: "round",
+				strokeLinejoin: "round"
+			})
+		}), /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			"aria-hidden": "true",
+			"data-glyph": "stop",
+			className: cn(glyph, "size-3.5", busy ? "scale-100 opacity-100" : "scale-60 opacity-0"),
 			children: /* @__PURE__ */ jsx("rect", {
 				x: "6",
 				y: "6",
@@ -116,21 +132,14 @@ function PromptInputSubmit({ className, label = "Send message", stopLabel = "Sto
 				rx: "2",
 				fill: "currentColor"
 			})
-		}) : /* @__PURE__ */ jsx("svg", {
-			viewBox: "0 0 24 24",
-			fill: "none",
-			"aria-hidden": "true",
-			className: "size-4",
-			children: /* @__PURE__ */ jsx("path", {
-				d: "M12 19V5m0 0-6 6m6-6 6 6",
-				stroke: "currentColor",
-				strokeWidth: "2",
-				strokeLinecap: "round",
-				strokeLinejoin: "round"
-			})
-		})
+		})]
 	});
 }
+const PREFIX = "dowel-ai-prompt-input";
+const STYLES = `
+@keyframes ${PREFIX}-counter-in{from{opacity:0;translate:0 4px}}
+[data-slot=prompt-input-counter-value][data-warning]{display:inline-block;animation:${PREFIX}-counter-in calc(200ms * var(--motion-scale,1)) var(--ease-out-quint) both}
+`;
 /**
 * Characters used against a limit.
 *
@@ -153,15 +162,25 @@ function PromptInputCounter({ className, value, max, warnAt = .9, ...props }) {
 		"data-over": over || void 0,
 		className: cn("text-xs tabular-nums", over ? "text-destructive" : warning ? "text-warning" : "text-muted-foreground", className),
 		...props,
-		children: [/* @__PURE__ */ jsx("span", {
-			"aria-hidden": "true",
-			children: warning ? `${String(value)} / ${String(max)}` : String(value)
-		}), /* @__PURE__ */ jsx("span", {
-			role: "status",
-			"aria-live": "polite",
-			className: "sr-only",
-			children: over ? `Over the limit by ${String(-remaining)} characters` : warning ? `${String(remaining)} characters remaining` : ""
-		})]
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				"data-slot": "prompt-input-counter-value",
+				"data-warning": warning || void 0,
+				children: warning ? `${String(value)} / ${String(max)}` : String(value)
+			}, warning ? "limit" : "count"),
+			/* @__PURE__ */ jsx("span", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: over ? `Over the limit by ${String(-remaining)} characters` : warning ? `${String(remaining)} characters remaining` : ""
+			})
+		]
 	});
 }
 //#endregion

package/dist/components/ai-prompt-input/ai-prompt-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-prompt-input.js","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\n\nimport { focusRing, focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The composer.\n *\n * Handles the parts of a chat input that are easy to get subtly wrong:\n * auto-growing to fit the text up to a ceiling, sending on Enter without\n * breaking multi-line input, and — the one almost everybody misses —\n * not sending mid-composition when someone is typing with an IME.\n */\n\ninterface PromptInputContextValue {\n  textareaId: string;\n  submit: () => void;\n  disabled: boolean;\n  busy: boolean;\n}\n\nconst PromptInputContext = createContext<PromptInputContextValue | null>(null);\n\nfunction usePromptInput(component: string): PromptInputContextValue {\n  const context = useContext(PromptInputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <PromptInput>.`);\n  }\n  return context;\n}\n\nexport interface PromptInputProps extends Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\"> {\n  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;\n  /** Blocks submission and dims the composer. */\n  disabled?: boolean;\n  /** A response is in flight: submission is blocked and Stop is shown instead. */\n  busy?: boolean;\n}\n\nexport function PromptInput({\n  className,\n  onSubmit,\n  disabled = false,\n  busy = false,\n  children,\n  ...props\n}: PromptInputProps) {\n  const uid = useId();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const context = useMemo<PromptInputContextValue>(\n    () => ({\n      textareaId: `${uid}-textarea`,\n      disabled,\n      busy,\n      submit: () => {\n        formRef.current?.requestSubmit();\n      },\n    }),\n    [uid, disabled, busy],\n  );\n\n  return (\n    <PromptInputContext.Provider value={context}>\n      <form\n        ref={formRef}\n        data-slot=\"prompt-input\"\n        data-busy={busy || undefined}\n        onSubmit={(event) => {\n          if (disabled || busy) {\n            event.preventDefault();\n            return;\n          }\n          onSubmit?.(event);\n        }}\n        className={cn(\n          \"rounded-xl border border-input bg-background shadow-xs\",\n          \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </form>\n    </PromptInputContext.Provider>\n  );\n}\n\n/** Rows the textarea will grow to before it starts scrolling. */\nconst DEFAULT_MAX_ROWS = 8;\n\nexport interface PromptInputTextareaProps extends Omit<\n  ComponentPropsWithRef<\"textarea\">,\n  \"rows\"\n> {\n  maxRows?: number;\n  /**\n   * Send on Enter, newline on Shift+Enter.\n   *\n   * Turn it off for a composer where Enter should always insert a newline and\n   * sending is only ever an explicit button press.\n   */\n  submitOnEnter?: boolean;\n}\n\nexport function PromptInputTextarea({\n  className,\n  maxRows = DEFAULT_MAX_ROWS,\n  submitOnEnter = true,\n  onKeyDown,\n  onChange,\n  ...props\n}: PromptInputTextareaProps) {\n  const { textareaId, submit, disabled, busy } = usePromptInput(\"PromptInputTextarea\");\n  const ref = useRef<HTMLTextAreaElement | null>(null);\n\n  // Grows with the content up to maxRows, then scrolls. Measured after layout\n  // so the height is right on the first paint rather than one frame late.\n  useLayoutEffect(() => {\n    const textarea = ref.current;\n    if (!textarea) return;\n\n    textarea.style.height = \"auto\";\n    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n    const maxHeight = lineHeight * maxRows;\n    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;\n    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n  });\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLTextAreaElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !submitOnEnter) return;\n    if (event.key !== \"Enter\" || event.shiftKey) return;\n\n    // Mid-composition Enter confirms the candidate an IME is offering — for\n    // Japanese, Chinese, Korean and others it is part of typing a word, not a\n    // request to send. Sending here truncates the sentence and is the single\n    // most common way a chat composer breaks for those users.\n    if (event.nativeEvent.isComposing) return;\n\n    event.preventDefault();\n    submit();\n  }\n\n  return (\n    <textarea\n      ref={ref}\n      id={textareaId}\n      data-slot=\"prompt-input-textarea\"\n      rows={1}\n      disabled={disabled}\n      aria-disabled={busy || undefined}\n      onKeyDown={handleKeyDown}\n      onChange={onChange}\n      className={cn(\n        \"block w-full resize-none bg-transparent px-4 py-3 text-sm outline-none\",\n        \"placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n        focusRingInset,\n        \"focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The row beneath the textarea: attachments, model picker, send. */\nexport function PromptInputToolbar({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"prompt-input-toolbar\"\n      className={cn(\"flex items-center gap-2 px-2 pb-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface PromptInputSubmitProps extends ComponentPropsWithRef<\"button\"> {\n  /** Label while idle. */\n  label?: string;\n  /** Label while a response is streaming. */\n  stopLabel?: string;\n  /** Called instead of submitting when busy. */\n  onStop?: () => void;\n}\n\n/**\n * Send, or stop.\n *\n * One control with two jobs, because that is what the space affords and what\n * people expect. The accessible name changes with the state, so it is never\n * \"Send\" while it actually stops.\n */\nexport function PromptInputSubmit({\n  className,\n  label = \"Send message\",\n  stopLabel = \"Stop generating\",\n  onStop,\n  ...props\n}: PromptInputSubmitProps) {\n  const { busy, disabled } = usePromptInput(\"PromptInputSubmit\");\n\n  return (\n    <button\n      type={busy ? \"button\" : \"submit\"}\n      data-slot=\"prompt-input-submit\"\n      aria-label={busy ? stopLabel : label}\n      disabled={disabled}\n      onClick={busy ? onStop : undefined}\n      className={cn(\n        \"ml-auto grid size-8 shrink-0 place-items-center rounded-lg\",\n        \"bg-primary text-primary-foreground transition-colors duration-[var(--duration-fast)]\",\n        \"hover:bg-primary-hover disabled:pointer-events-none disabled:opacity-55\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      {busy ? (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n          <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\" />\n        </svg>\n      ) : (\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4\">\n          <path\n            d=\"M12 19V5m0 0-6 6m6-6 6 6\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      )}\n    </button>\n  );\n}\n\nexport interface PromptInputCounterProps extends ComponentPropsWithRef<\"div\"> {\n  value: number;\n  max: number;\n  /** Fraction of the limit past which the counter starts warning. */\n  warnAt?: number;\n}\n\n/**\n * Characters used against a limit.\n *\n * The visible count updates on every keystroke; the live region does not.\n *\n * The naive version toggles `aria-live` on once the count matters, but a region\n * only announces changes that happen *while* it is live — switching it on at\n * the same moment the content changes means the one update worth hearing is the\n * one that is missed. So the region is live from the start and simply has\n * nothing in it until the limit is close, which is also what keeps ordinary\n * typing silent.\n */\nexport function PromptInputCounter({\n  className,\n  value,\n  max,\n  warnAt = 0.9,\n  ...props\n}: PromptInputCounterProps) {\n  const warning = value >= max * warnAt;\n  const over = value > max;\n  const remaining = max - value;\n\n  return (\n    <div\n      data-slot=\"prompt-input-counter\"\n      data-warning={warning || undefined}\n      data-over={over || undefined}\n      className={cn(\n        \"text-xs tabular-nums\",\n        over ? \"text-destructive\" : warning ? \"text-warning\" : \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden=\"true\">\n        {warning ? `${String(value)} / ${String(max)}` : String(value)}\n      </span>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {over\n          ? `Over the limit by ${String(-remaining)} characters`\n          : warning\n            ? `${String(remaining)} characters remaining`\n            : \"\"}\n      </span>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAiCA,MAAM,qBAAqB,cAA8C,IAAI;AAE7E,SAAS,eAAe,WAA4C;CAClE,MAAM,UAAU,WAAW,kBAAkB;CAC7C,IAAI,CAAC,SACH,MAAM,IAAI,MAAM,GAAG,UAAU,wCAAwC;CAEvE,OAAO;AACT;AAUA,SAAgB,YAAY,EAC1B,WACA,UACA,WAAW,OACX,OAAO,OACP,UACA,GAAG,SACgB;CACnB,MAAM,MAAM,MAAM;CAClB,MAAM,UAAU,OAA+B,IAAI;CAEnD,MAAM,UAAU,eACP;EACL,YAAY,GAAG,IAAI;EACnB;EACA;EACA,cAAc;GACZ,QAAQ,SAAS,cAAc;EACjC;CACF,IACA;EAAC;EAAK;EAAU;CAAI,CACtB;CAEA,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;EAClC,UAAA,oBAAC,QAAD;GACE,KAAK;GACL,aAAU;GACV,aAAW,QAAQ,KAAA;GACnB,WAAW,UAAU;IACnB,IAAI,YAAY,MAAM;KACpB,MAAM,eAAe;KACrB;IACF;IACA,WAAW,KAAK;GAClB;GACA,WAAW,GACT,0DACA,wEACA,0EACA,YAAY,cACZ,SACF;GACA,GAAI;GAEH;EACG,CAAA;CACqB,CAAA;AAEjC;;AAGA,MAAM,mBAAmB;AAgBzB,SAAgB,oBAAoB,EAClC,WACA,UAAU,kBACV,gBAAgB,MAChB,WACA,UACA,GAAG,SACwB;CAC3B,MAAM,EAAE,YAAY,QAAQ,UAAU,SAAS,eAAe,qBAAqB;CACnF,MAAM,MAAM,OAAmC,IAAI;CAInD,sBAAsB;EACpB,MAAM,WAAW,IAAI;EACrB,IAAI,CAAC,UAAU;EAEf,SAAS,MAAM,SAAS;EAExB,MAAM,aADa,OAAO,WAAW,iBAAiB,QAAQ,CAAC,CAAC,UAAU,KAAK,MAChD;EAC/B,SAAS,MAAM,SAAS,GAAG,OAAO,KAAK,IAAI,SAAS,cAAc,SAAS,CAAC,EAAE;EAC9E,SAAS,MAAM,YAAY,SAAS,eAAe,YAAY,SAAS;CAC1E,CAAC;CAED,SAAS,cAAc,OAAgD;EACrE,YAAY,KAAK;EACjB,IAAI,MAAM,oBAAoB,CAAC,eAAe;EAC9C,IAAI,MAAM,QAAQ,WAAW,MAAM,UAAU;EAM7C,IAAI,MAAM,YAAY,aAAa;EAEnC,MAAM,eAAe;EACrB,OAAO;CACT;CAEA,OACE,oBAAC,YAAD;EACO;EACL,IAAI;EACJ,aAAU;EACV,MAAM;EACI;EACV,iBAAe,QAAQ,KAAA;EACvB,WAAW;EACD;EACV,WAAW,GACT,0EACA,iEACA,gBACA,wBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAgB,mBAAmB,EAAE,WAAW,GAAG,SAAuC;CACxF,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;;;;;;;;AAkBA,SAAgB,kBAAkB,EAChC,WACA,QAAQ,gBACR,YAAY,mBACZ,QACA,GAAG,SACsB;CACzB,MAAM,EAAE,MAAM,aAAa,eAAe,mBAAmB;CAE7D,OACE,oBAAC,UAAD;EACE,MAAM,OAAO,WAAW;EACxB,aAAU;EACV,cAAY,OAAO,YAAY;EACrB;EACV,SAAS,OAAO,SAAS,KAAA;EACzB,WAAW,GACT,8DACA,wFACA,2EACA,WACA,SACF;EACA,GAAI;EAEH,UAAA,OACC,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IAAM,GAAE;IAAI,GAAE;IAAI,OAAM;IAAK,QAAO;IAAK,IAAG;IAAI,MAAK;GAAgB,CAAA;EAClE,CAAA,IAEL,oBAAC,OAAD;GAAK,SAAQ;GAAY,MAAK;GAAO,eAAY;GAAO,WAAU;GAChE,UAAA,oBAAC,QAAD;IACE,GAAE;IACF,QAAO;IACP,aAAY;IACZ,eAAc;IACd,gBAAe;GAChB,CAAA;EACE,CAAA;CAED,CAAA;AAEZ;;;;;;;;;;;;;AAqBA,SAAgB,mBAAmB,EACjC,WACA,OACA,KACA,SAAS,IACT,GAAG,SACuB;CAC1B,MAAM,UAAU,SAAS,MAAM;CAC/B,MAAM,OAAO,QAAQ;CACrB,MAAM,YAAY,MAAM;CAExB,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW,KAAA;EACzB,aAAW,QAAQ,KAAA;EACnB,WAAW,GACT,wBACA,OAAO,qBAAqB,UAAU,iBAAiB,yBACvD,SACF;EACA,GAAI;EATN,UAAA,CAWE,oBAAC,QAAD;GAAM,eAAY;GACf,UAAA,UAAU,GAAG,OAAO,KAAK,EAAE,KAAK,OAAO,GAAG,MAAM,OAAO,KAAK;EACzD,CAAA,GACN,oBAAC,QAAD;GAAM,MAAK;GAAS,aAAU;GAAS,WAAU;GAC9C,UAAA,OACG,qBAAqB,OAAO,CAAC,SAAS,EAAE,eACxC,UACE,GAAG,OAAO,SAAS,EAAE,yBACrB;EACF,CAAA,CACH;;AAET"}
+{"version":3,"file":"ai-prompt-input.js","names":[],"sources":["../../../src/components/ai-prompt-input/ai-prompt-input.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Prompt Input (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport {\n  createContext,\n  useContext,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  type ComponentPropsWithRef,\n  type FormEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n} from \"react\";\n\nimport { focusRing, focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The composer.\n *\n * Handles the parts of a chat input that are easy to get subtly wrong:\n * auto-growing to fit the text up to a ceiling, sending on Enter without\n * breaking multi-line input, and — the one almost everybody misses —\n * not sending mid-composition when someone is typing with an IME.\n */\n\ninterface PromptInputContextValue {\n  textareaId: string;\n  submit: () => void;\n  disabled: boolean;\n  busy: boolean;\n}\n\nconst PromptInputContext = createContext<PromptInputContextValue | null>(null);\n\nfunction usePromptInput(component: string): PromptInputContextValue {\n  const context = useContext(PromptInputContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <PromptInput>.`);\n  }\n  return context;\n}\n\nexport interface PromptInputProps extends Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\"> {\n  onSubmit?: (event: FormEvent<HTMLFormElement>) => void;\n  /** Blocks submission and dims the composer. */\n  disabled?: boolean;\n  /** A response is in flight: submission is blocked and Stop is shown instead. */\n  busy?: boolean;\n}\n\nexport function PromptInput({\n  className,\n  onSubmit,\n  disabled = false,\n  busy = false,\n  children,\n  ...props\n}: PromptInputProps) {\n  const uid = useId();\n  const formRef = useRef<HTMLFormElement | null>(null);\n\n  const context = useMemo<PromptInputContextValue>(\n    () => ({\n      textareaId: `${uid}-textarea`,\n      disabled,\n      busy,\n      submit: () => {\n        formRef.current?.requestSubmit();\n      },\n    }),\n    [uid, disabled, busy],\n  );\n\n  return (\n    <PromptInputContext.Provider value={context}>\n      <form\n        ref={formRef}\n        data-slot=\"prompt-input\"\n        data-busy={busy || undefined}\n        onSubmit={(event) => {\n          if (disabled || busy) {\n            event.preventDefault();\n            return;\n          }\n          onSubmit?.(event);\n        }}\n        className={cn(\n          \"rounded-xl border border-input bg-background shadow-xs\",\n          \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n          \"focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/55\",\n          disabled && \"opacity-60\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </form>\n    </PromptInputContext.Provider>\n  );\n}\n\n/** Rows the textarea will grow to before it starts scrolling. */\nconst DEFAULT_MAX_ROWS = 8;\n\nexport interface PromptInputTextareaProps extends Omit<\n  ComponentPropsWithRef<\"textarea\">,\n  \"rows\"\n> {\n  maxRows?: number;\n  /**\n   * Send on Enter, newline on Shift+Enter.\n   *\n   * Turn it off for a composer where Enter should always insert a newline and\n   * sending is only ever an explicit button press.\n   */\n  submitOnEnter?: boolean;\n}\n\nexport function PromptInputTextarea({\n  className,\n  maxRows = DEFAULT_MAX_ROWS,\n  submitOnEnter = true,\n  onKeyDown,\n  onChange,\n  ...props\n}: PromptInputTextareaProps) {\n  const { textareaId, submit, disabled, busy } = usePromptInput(\"PromptInputTextarea\");\n  const ref = useRef<HTMLTextAreaElement | null>(null);\n\n  // Grows with the content up to maxRows, then scrolls. Measured after layout\n  // so the height is right on the first paint rather than one frame late.\n  useLayoutEffect(() => {\n    const textarea = ref.current;\n    if (!textarea) return;\n\n    textarea.style.height = \"auto\";\n    const lineHeight = Number.parseFloat(getComputedStyle(textarea).lineHeight) || 20;\n    const maxHeight = lineHeight * maxRows;\n    textarea.style.height = `${String(Math.min(textarea.scrollHeight, maxHeight))}px`;\n    textarea.style.overflowY = textarea.scrollHeight > maxHeight ? \"auto\" : \"hidden\";\n  });\n\n  function handleKeyDown(event: ReactKeyboardEvent<HTMLTextAreaElement>) {\n    onKeyDown?.(event);\n    if (event.defaultPrevented || !submitOnEnter) return;\n    if (event.key !== \"Enter\" || event.shiftKey) return;\n\n    // Mid-composition Enter confirms the candidate an IME is offering — for\n    // Japanese, Chinese, Korean and others it is part of typing a word, not a\n    // request to send. Sending here truncates the sentence and is the single\n    // most common way a chat composer breaks for those users.\n    if (event.nativeEvent.isComposing) return;\n\n    event.preventDefault();\n    submit();\n  }\n\n  return (\n    <textarea\n      ref={ref}\n      id={textareaId}\n      data-slot=\"prompt-input-textarea\"\n      rows={1}\n      disabled={disabled}\n      aria-disabled={busy || undefined}\n      onKeyDown={handleKeyDown}\n      onChange={onChange}\n      className={cn(\n        \"block w-full resize-none bg-transparent px-4 py-3 text-sm outline-none\",\n        \"placeholder:text-muted-foreground disabled:cursor-not-allowed\",\n        focusRingInset,\n        \"focus-visible:ring-0\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** The row beneath the textarea: attachments, model picker, send. */\nexport function PromptInputToolbar({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"prompt-input-toolbar\"\n      className={cn(\"flex items-center gap-2 px-2 pb-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface PromptInputSubmitProps extends ComponentPropsWithRef<\"button\"> {\n  /** Label while idle. */\n  label?: string;\n  /** Label while a response is streaming. */\n  stopLabel?: string;\n  /** Called instead of submitting when busy. */\n  onStop?: () => void;\n}\n\n/**\n * Send, or stop.\n *\n * One control with two jobs, because that is what the space affords and what\n * people expect. The accessible name changes with the state, so it is never\n * \"Send\" while it actually stops.\n */\nexport function PromptInputSubmit({\n  className,\n  label = \"Send message\",\n  stopLabel = \"Stop generating\",\n  onStop,\n  ...props\n}: PromptInputSubmitProps) {\n  const { busy, disabled } = usePromptInput(\"PromptInputSubmit\");\n\n  // Both glyphs stay mounted in one grid cell and cross-fade, so the swap is a\n  // scale-and-fade rather than a jump. The accessible name carries the state;\n  // the glyphs are decoration.\n  const glyph =\n    \"col-start-1 row-start-1 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\";\n\n  return (\n    <button\n      type={busy ? \"button\" : \"submit\"}\n      data-slot=\"prompt-input-submit\"\n      data-state={busy ? \"stop\" : \"send\"}\n      aria-label={busy ? stopLabel : label}\n      disabled={disabled}\n      onClick={busy ? onStop : undefined}\n      className={cn(\n        \"ms-auto grid size-8 shrink-0 place-items-center rounded-lg\",\n        \"bg-primary text-primary-foreground\",\n        \"transition-[color,background-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n        \"hover:scale-105 hover:bg-primary-hover active:scale-95\",\n        \"disabled:pointer-events-none disabled:scale-100 disabled:opacity-55\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        data-glyph=\"send\"\n        className={cn(glyph, \"size-4\", busy ? \"scale-60 opacity-0\" : \"scale-100 opacity-100\")}\n      >\n        <path\n          d=\"M12 19V5m0 0-6 6m6-6 6 6\"\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        data-glyph=\"stop\"\n        className={cn(glyph, \"size-3.5\", busy ? \"scale-100 opacity-100\" : \"scale-60 opacity-0\")}\n      >\n        <rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\" fill=\"currentColor\" />\n      </svg>\n    </button>\n  );\n}\n\nconst PREFIX = \"dowel-ai-prompt-input\";\n\n/* The \"value / max\" reading rises in once, when the limit first matters. */\nconst STYLES = `\n@keyframes ${PREFIX}-counter-in{from{opacity:0;translate:0 4px}}\n[data-slot=prompt-input-counter-value][data-warning]{display:inline-block;animation:${PREFIX}-counter-in calc(200ms * var(--motion-scale,1)) var(--ease-out-quint) both}\n`;\n\nexport interface PromptInputCounterProps extends ComponentPropsWithRef<\"div\"> {\n  value: number;\n  max: number;\n  /** Fraction of the limit past which the counter starts warning. */\n  warnAt?: number;\n}\n\n/**\n * Characters used against a limit.\n *\n * The visible count updates on every keystroke; the live region does not.\n *\n * The naive version toggles `aria-live` on once the count matters, but a region\n * only announces changes that happen *while* it is live — switching it on at\n * the same moment the content changes means the one update worth hearing is the\n * one that is missed. So the region is live from the start and simply has\n * nothing in it until the limit is close, which is also what keeps ordinary\n * typing silent.\n */\nexport function PromptInputCounter({\n  className,\n  value,\n  max,\n  warnAt = 0.9,\n  ...props\n}: PromptInputCounterProps) {\n  const warning = value >= max * warnAt;\n  const over = value > max;\n  const remaining = max - value;\n\n  return (\n    <div\n      data-slot=\"prompt-input-counter\"\n      data-warning={warning || undefined}\n      data-over={over || undefined}\n      className={cn(\n        \"text-xs tabular-nums\",\n        over ? \"text-destructive\" : warning ? \"text-warning\" : \"text-muted-foreground\",\n        className,\n      )}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      {/* Keyed so crossing the threshold remounts the visible reading, which is\n          what plays its entrance. Never key the status span below: it has to\n          stay the same live region from first paint (ADR 0009). */}\n      <span\n        key={warning ? \"limit\" : \"count\"}\n        aria-hidden=\"true\"\n        data-slot=\"prompt-input-counter-value\"\n        data-warning={warning || undefined}\n      >\n        {warning ? `${String(value)} / ${String(max)}` : String(value)}\n      </span>\n      <span role=\"status\" aria-live=\"polite\" className=\"sr-only\">\n        {over\n          ? `Over the limit by ${String(-remaining)} characters`\n          : warning\n            ? `${String(remaining)} characters remaining`\n            : \"\"}\n      </span>\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,24 +1,52 @@
 import { Collapsible } from "radix-ui";
 import { ComponentPropsWithRef } from "react";
 //#region src/components/ai-reasoning/ai-reasoning.d.ts
+interface ReasoningProps extends Omit<ComponentPropsWithRef<typeof Collapsible.Root>, "onOpenChange"> {
+  /** Called when the reader opens or closes the trace. */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Reasoning is still arriving. Feeds the trigger's default label and the
+   * auto behaviours below.
+   */
+  streaming?: boolean;
+  /**
+   * Open when `streaming` turns true, until the reader toggles it themselves.
+   *
+   * Off by default (ADR 0009): an open trace gives reasoning the same weight
+   * as the answer while it streams. Ignored when `open` is controlled.
+   */
+  autoOpen?: boolean;
+  /**
+   * Close after streaming ends, unless the reader has toggled it; a number is
+   * the delay in milliseconds. Never closes while focus or the pointer is
+   * inside the trace. Ignored when `open` is controlled.
+   */
+  autoCollapse?: boolean | number;
+}
+declare function Reasoning({ className, streaming, autoOpen, autoCollapse, open, defaultOpen, onOpenChange, ref, ...props }: ReasoningProps): import("react").JSX.Element;
 /**
- * The model's reasoning, tucked away.
- *
- * Collapsed by default and deliberately understated. Reasoning is supporting
- * material — surfacing it at the same weight as the answer buries the answer,
- * and most readers never want it. It stays one keystroke away for the people
- * who do.
+ * Seconds between `active` turning true and turning false, for "Thought for
+ * 4.2s". `null` until the first run ends; a new run keeps the last value
+ * until it, too, ends.
  */
-type ReasoningProps = ComponentPropsWithRef<typeof Collapsible.Root>;
-declare function Reasoning({ className, ...props }: ReasoningProps): import("react").JSX.Element;
+declare function useElapsedSeconds(active: boolean): number | null;
 interface ReasoningTriggerProps extends ComponentPropsWithRef<typeof Collapsible.Trigger> {
-  /** Shown while reasoning is still arriving. */
+  /** Shown while reasoning is still arriving. Defaults to the root's `streaming`. */
   streaming?: boolean;
   label?: string;
   streamingLabel?: string;
+  /**
+   * Seconds spent reasoning. When set and not streaming, the label becomes
+   * `durationLabel(duration)`. Pair it with `useElapsedSeconds`.
+   */
+  duration?: number;
+  /** Words for a duration. */
+  durationLabel?: (seconds: number) => string;
+  /** Shimmer the label while streaming. Decoration: it stops under reduced motion. */
+  shimmer?: boolean;
 }
-declare function ReasoningTrigger({ className, streaming, label, streamingLabel, children, ...props }: ReasoningTriggerProps): import("react").JSX.Element;
+declare function ReasoningTrigger({ className, streaming: streamingProp, label, streamingLabel, duration, durationLabel, shimmer, children, ...props }: ReasoningTriggerProps): import("react").JSX.Element;
 declare function ReasoningContent({ className, children, ...props }: ComponentPropsWithRef<typeof Collapsible.Content>): import("react").JSX.Element;
 //#endregion
-export { Reasoning, ReasoningContent, ReasoningProps, ReasoningTrigger, ReasoningTriggerProps };
+export { Reasoning, ReasoningContent, ReasoningProps, ReasoningTrigger, ReasoningTriggerProps, useElapsedSeconds };
 //# sourceMappingURL=ai-reasoning.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ai-reasoning.d.ts","names":[],"sources":["../../../src/components/ai-reasoning/ai-reasoning.tsx"],"mappings":";;;;;;;;;;;KAgBY,iBAAiB,6BAA6B,YAAqB;iBAE/D,YAAY,cAAc,SAAS,iCAAc,IAAA;UAUhD,8BAA8B,6BACtC,YAAqB;;EAG5B;EACA;EACA;;iBAGc,mBACd,WACA,WACA,OACA,gBACA,aACG,SACF,wCAAqB,IAAA;iBAyCR,mBACd,WACA,aACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA"}
+{"version":3,"file":"ai-reasoning.d.ts","names":[],"sources":["../../../src/components/ai-reasoning/ai-reasoning.tsx"],"mappings":";;;UAmCiB,uBAAuB,KACtC,6BAA6B,YAAqB;;EAIlD,gBAAgB;;;;;EAKhB;;;;;;;EAOA;;;;;;EAMA;;iBAGc,YACd,WACA,WACA,UACA,cACA,MACA,aACA,cACA,QACG,SACF,iCAAc,IAAA;;;;;;iBAuFD,kBAAkB;UAkBjB,8BAA8B,6BACtC,YAAqB;;EAG5B;EACA;EACA;;;;;EAKA;;EAEA,iBAAiB;;EAEjB;;iBAOc,mBACd,WACA,WAAW,eACX,OACA,gBACA,UACA,eACA,SACA,aACG,SACF,wCAAqB,IAAA;iBAwDR,mBACd,WACA,aACG,SACF,6BAA6B,YAAqB,2BAAQ,IAAA"}

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

@@ -1,17 +1,117 @@
 "use client";
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
+import { ShimmerText } from "../shimmer-text/shimmer-text.js";
 import { Collapsible } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 //#region src/components/ai-reasoning/ai-reasoning.tsx
-function Reasoning({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Collapsible.Root, {
-		"data-slot": "reasoning",
-		className: cn("text-sm", className),
-		...props
+/**
+* The model's reasoning, tucked away.
+*
+* Collapsed by default and deliberately understated. Reasoning is supporting
+* material — surfacing it at the same weight as the answer buries the answer,
+* and most readers never want it. It stays one keystroke away for the people
+* who do.
+*/
+/** Delay before `autoCollapse={true}` closes the trace, in milliseconds. */
+const AUTO_COLLAPSE_DELAY = 600;
+const ReasoningContext = createContext({ streaming: void 0 });
+function Reasoning({ className, streaming, autoOpen = false, autoCollapse = false, open, defaultOpen, onOpenChange, ref, ...props }) {
+	const controlled = open !== void 0;
+	const automatic = !controlled && (autoOpen || autoCollapse !== false);
+	const collapseDelay = typeof autoCollapse === "number" ? autoCollapse : autoCollapse ? AUTO_COLLAPSE_DELAY : null;
+	const rootRef = useRef(null);
+	const [internalOpen, setInternalOpen] = useState(() => defaultOpen ?? (automatic && autoOpen && streaming === true));
+	const [userToggled, setUserToggled] = useState(false);
+	const [previousStreaming, setPreviousStreaming] = useState(streaming);
+	const [pendingCollapse, setPendingCollapse] = useState(false);
+	if (streaming !== previousStreaming) {
+		setPreviousStreaming(streaming);
+		if (automatic && !userToggled) {
+			if (streaming) {
+				setPendingCollapse(false);
+				if (autoOpen) setInternalOpen(true);
+			} else if (previousStreaming && collapseDelay !== null) setPendingCollapse(true);
+		}
+	}
+	useEffect(() => {
+		if (!pendingCollapse || collapseDelay === null) return;
+		const timer = setTimeout(() => {
+			setPendingCollapse(false);
+			const content = rootRef.current?.querySelector("[data-slot='reasoning-content']");
+			if (content?.contains(document.activeElement) || content?.matches(":hover")) return;
+			setInternalOpen(false);
+		}, collapseDelay);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [pendingCollapse, collapseDelay]);
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (!controlled || !autoOpen && autoCollapse === false) return;
+		console.warn("Reasoning: `autoOpen` and `autoCollapse` are ignored when `open` is controlled. Drive `open` from `streaming` yourself, or drop `open`.");
+	}, [
+		controlled,
+		autoOpen,
+		autoCollapse
+	]);
+	const openProps = automatic ? {
+		open: internalOpen,
+		onOpenChange: (next) => {
+			setUserToggled(true);
+			setPendingCollapse(false);
+			setInternalOpen(next);
+			onOpenChange?.(next);
+		}
+	} : {
+		open,
+		defaultOpen,
+		onOpenChange
+	};
+	return /* @__PURE__ */ jsx(ReasoningContext.Provider, {
+		value: { streaming },
+		children: /* @__PURE__ */ jsx(Collapsible.Root, {
+			ref: (node) => {
+				rootRef.current = node;
+				if (typeof ref === "function") return ref(node);
+				if (ref) ref.current = node;
+			},
+			"data-slot": "reasoning",
+			"data-streaming": streaming || void 0,
+			className: cn("text-sm", className),
+			...openProps,
+			...props
+		})
 	});
 }
-function ReasoningTrigger({ className, streaming, label = "Reasoning", streamingLabel = "Thinking…", children, ...props }) {
+/**
+* Seconds between `active` turning true and turning false, for "Thought for
+* 4.2s". `null` until the first run ends; a new run keeps the last value
+* until it, too, ends.
+*/
+function useElapsedSeconds(active) {
+	const startedAt = useRef(null);
+	const [elapsed, setElapsed] = useState(null);
+	useEffect(() => {
+		if (active) {
+			startedAt.current = performance.now();
+			return;
+		}
+		const start = startedAt.current;
+		if (start === null) return;
+		startedAt.current = null;
+		setElapsed((performance.now() - start) / 1e3);
+	}, [active]);
+	return elapsed;
+}
+function defaultDurationLabel(seconds) {
+	return `Thought for ${seconds.toFixed(1)}s`;
+}
+function ReasoningTrigger({ className, streaming: streamingProp, label = "Reasoning", streamingLabel = "Thinking…", duration, durationLabel = defaultDurationLabel, shimmer = false, children, ...props }) {
+	const context = useContext(ReasoningContext);
+	const streaming = streamingProp ?? context.streaming;
+	const idleLabel = duration === void 0 ? label : durationLabel(duration);
 	return /* @__PURE__ */ jsxs(Collapsible.Trigger, {
 		"data-slot": "reasoning-trigger",
 		className: cn("flex items-center gap-1.5 rounded-md text-xs text-muted-foreground", "transition-colors duration-[var(--duration-fast)] hover:text-foreground", "[&[data-state=open]>svg:last-child]:rotate-180", focusRing, className),
@@ -30,12 +130,16 @@ function ReasoningTrigger({ className, streaming, label = "Reasoning", streaming
 					strokeLinejoin: "round"
 				})
 			}),
-			children ?? (streaming ? streamingLabel : label),
+			children ?? (streaming ? shimmer ? /* @__PURE__ */ jsx(ShimmerText, {
+				duration: 1800,
+				repeatDelay: 0,
+				children: streamingLabel
+			}) : streamingLabel : idleLabel),
 			/* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
 				"aria-hidden": "true",
-				className: "size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)]",
+				className: "size-3.5 shrink-0 transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
 				children: /* @__PURE__ */ jsx("path", {
 					d: "m6 9 6 6 6-6",
 					stroke: "currentColor",
@@ -53,12 +157,12 @@ function ReasoningContent({ className, children, ...props }) {
 		className: cn("overflow-hidden", "data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open", className),
 		...props,
 		children: /* @__PURE__ */ jsx("div", {
-			className: "mt-2 border-l-2 border-border pl-3 text-sm whitespace-pre-wrap text-muted-foreground",
+			className: "mt-2 border-s-2 border-border ps-3 text-sm whitespace-pre-wrap text-muted-foreground",
 			children
 		})
 	});
 }
 //#endregion
-export { Reasoning, ReasoningContent, ReasoningTrigger };
+export { Reasoning, ReasoningContent, ReasoningTrigger, useElapsedSeconds };
 
 //# sourceMappingURL=ai-reasoning.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ai-reasoning.js","names":["CollapsiblePrimitive"],"sources":["../../../src/components/ai-reasoning/ai-reasoning.tsx"],"sourcesContent":["\"use client\";\n\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef } from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The model's reasoning, tucked away.\n *\n * Collapsed by default and deliberately understated. Reasoning is supporting\n * material — surfacing it at the same weight as the answer buries the answer,\n * and most readers never want it. It stays one keystroke away for the people\n * who do.\n */\nexport type ReasoningProps = ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>;\n\nexport function Reasoning({ className, ...props }: ReasoningProps) {\n  return (\n    <CollapsiblePrimitive.Root\n      data-slot=\"reasoning\"\n      className={cn(\"text-sm\", className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ReasoningTriggerProps extends ComponentPropsWithRef<\n  typeof CollapsiblePrimitive.Trigger\n> {\n  /** Shown while reasoning is still arriving. */\n  streaming?: boolean;\n  label?: string;\n  streamingLabel?: string;\n}\n\nexport function ReasoningTrigger({\n  className,\n  streaming,\n  label = \"Reasoning\",\n  streamingLabel = \"Thinking…\",\n  children,\n  ...props\n}: ReasoningTriggerProps) {\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"reasoning-trigger\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-md text-xs text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:text-foreground\",\n        \"[&[data-state=open]>svg:last-child]:rotate-180\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5 shrink-0\">\n        <path\n          d=\"M9.5 21h5M12 3a6 6 0 0 1 3.6 10.8c-.6.5-.9 1.1-1 1.7l-.1.5h-5l-.1-.5c-.1-.6-.4-1.2-1-1.7A6 6 0 0 1 12 3Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      {children ?? (streaming ? streamingLabel : label)}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 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\nexport function ReasoningContent({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"reasoning-content\"\n      className={cn(\n        \"overflow-hidden\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"mt-2 border-l-2 border-border pl-3 text-sm whitespace-pre-wrap text-muted-foreground\">\n        {children}\n      </div>\n    </CollapsiblePrimitive.Content>\n  );\n}\n"],"mappings":";;;;;;AAkBA,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;CACjE,OACE,oBAACA,YAAqB,MAAtB;EACE,aAAU;EACV,WAAW,GAAG,WAAW,SAAS;EAClC,GAAI;CACL,CAAA;AAEL;AAWA,SAAgB,iBAAiB,EAC/B,WACA,WACA,QAAQ,aACR,iBAAiB,aACjB,UACA,GAAG,SACqB;CACxB,OACE,qBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,sEACA,2EACA,kDACA,WACA,SACF;EACA,GAAI;EATN,UAAA;GAWE,oBAAC,OAAD;IAAK,SAAQ;IAAY,MAAK;IAAO,eAAY;IAAO,WAAU;IAChE,UAAA,oBAAC,QAAD;KACE,GAAE;KACF,QAAO;KACP,aAAY;KACZ,eAAc;KACd,gBAAe;IAChB,CAAA;GACE,CAAA;GACJ,aAAa,YAAY,iBAAiB;GAC3C,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,SAAgB,iBAAiB,EAC/B,WACA,UACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,YAAqB,SAAtB;EACE,aAAU;EACV,WAAW,GACT,mBACA,wFACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAU;GACZ;EACE,CAAA;CACuB,CAAA;AAElC"}
+{"version":3,"file":"ai-reasoning.js","names":["CollapsiblePrimitive"],"sources":["../../../src/components/ai-reasoning/ai-reasoning.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AI Reasoning (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Collapsible as CollapsiblePrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n} from \"react\";\n\nimport { ShimmerText } from \"@/components/shimmer-text\";\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * The model's reasoning, tucked away.\n *\n * Collapsed by default and deliberately understated. Reasoning is supporting\n * material — surfacing it at the same weight as the answer buries the answer,\n * and most readers never want it. It stays one keystroke away for the people\n * who do.\n */\n\n/** Delay before `autoCollapse={true}` closes the trace, in milliseconds. */\nconst AUTO_COLLAPSE_DELAY = 600;\n\ninterface ReasoningContextValue {\n  streaming: boolean | undefined;\n}\n\nconst ReasoningContext = createContext<ReasoningContextValue>({ streaming: undefined });\n\nexport interface ReasoningProps extends Omit<\n  ComponentPropsWithRef<typeof CollapsiblePrimitive.Root>,\n  \"onOpenChange\"\n> {\n  /** Called when the reader opens or closes the trace. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Reasoning is still arriving. Feeds the trigger's default label and the\n   * auto behaviours below.\n   */\n  streaming?: boolean;\n  /**\n   * Open when `streaming` turns true, until the reader toggles it themselves.\n   *\n   * Off by default (ADR 0009): an open trace gives reasoning the same weight\n   * as the answer while it streams. Ignored when `open` is controlled.\n   */\n  autoOpen?: boolean;\n  /**\n   * Close after streaming ends, unless the reader has toggled it; a number is\n   * the delay in milliseconds. Never closes while focus or the pointer is\n   * inside the trace. Ignored when `open` is controlled.\n   */\n  autoCollapse?: boolean | number;\n}\n\nexport function Reasoning({\n  className,\n  streaming,\n  autoOpen = false,\n  autoCollapse = false,\n  open,\n  defaultOpen,\n  onOpenChange,\n  ref,\n  ...props\n}: ReasoningProps) {\n  const controlled = open !== undefined;\n  const automatic = !controlled && (autoOpen || autoCollapse !== false);\n  const collapseDelay =\n    typeof autoCollapse === \"number\" ? autoCollapse : autoCollapse ? AUTO_COLLAPSE_DELAY : null;\n\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // A trace mounted mid-stream opens straight away under autoOpen.\n  const [internalOpen, setInternalOpen] = useState(\n    () => defaultOpen ?? (automatic && autoOpen && streaming === true),\n  );\n  // Once the reader has toggled it, the component stops deciding for them.\n  const [userToggled, setUserToggled] = useState(false);\n  const [previousStreaming, setPreviousStreaming] = useState(streaming);\n  const [pendingCollapse, setPendingCollapse] = useState(false);\n\n  // Streaming edges, adjusted during render so there is no frame in between.\n  if (streaming !== previousStreaming) {\n    setPreviousStreaming(streaming);\n    if (automatic && !userToggled) {\n      if (streaming) {\n        setPendingCollapse(false);\n        if (autoOpen) setInternalOpen(true);\n      } else if (previousStreaming && collapseDelay !== null) {\n        setPendingCollapse(true);\n      }\n    }\n  }\n\n  useEffect(() => {\n    if (!pendingCollapse || collapseDelay === null) return;\n    const timer = setTimeout(() => {\n      setPendingCollapse(false);\n      // Never yank the trace out from under someone reading or tabbing in it.\n      const content = rootRef.current?.querySelector(\"[data-slot='reasoning-content']\");\n      if (content?.contains(document.activeElement) || content?.matches(\":hover\")) return;\n      setInternalOpen(false);\n    }, collapseDelay);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [pendingCollapse, collapseDelay]);\n\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    if (!controlled || (!autoOpen && autoCollapse === false)) return;\n    console.warn(\n      \"Reasoning: `autoOpen` and `autoCollapse` are ignored when `open` is controlled. \" +\n        \"Drive `open` from `streaming` yourself, or drop `open`.\",\n    );\n  }, [controlled, autoOpen, autoCollapse]);\n\n  const openProps = automatic\n    ? {\n        open: internalOpen,\n        onOpenChange: (next: boolean) => {\n          setUserToggled(true);\n          setPendingCollapse(false);\n          setInternalOpen(next);\n          onOpenChange?.(next);\n        },\n      }\n    : { open, defaultOpen, onOpenChange };\n\n  return (\n    <ReasoningContext.Provider value={{ streaming }}>\n      <CollapsiblePrimitive.Root\n        ref={(node: HTMLDivElement | null) => {\n          rootRef.current = node;\n          if (typeof ref === \"function\") return ref(node);\n          if (ref) ref.current = node;\n        }}\n        data-slot=\"reasoning\"\n        data-streaming={streaming || undefined}\n        className={cn(\"text-sm\", className)}\n        {...openProps}\n        {...props}\n      />\n    </ReasoningContext.Provider>\n  );\n}\n\n/**\n * Seconds between `active` turning true and turning false, for \"Thought for\n * 4.2s\". `null` until the first run ends; a new run keeps the last value\n * until it, too, ends.\n */\nexport function useElapsedSeconds(active: boolean): number | null {\n  const startedAt = useRef<number | null>(null);\n  const [elapsed, setElapsed] = useState<number | null>(null);\n\n  useEffect(() => {\n    if (active) {\n      startedAt.current = performance.now();\n      return;\n    }\n    const start = startedAt.current;\n    if (start === null) return;\n    startedAt.current = null;\n    setElapsed((performance.now() - start) / 1000);\n  }, [active]);\n\n  return elapsed;\n}\n\nexport interface ReasoningTriggerProps extends ComponentPropsWithRef<\n  typeof CollapsiblePrimitive.Trigger\n> {\n  /** Shown while reasoning is still arriving. Defaults to the root's `streaming`. */\n  streaming?: boolean;\n  label?: string;\n  streamingLabel?: string;\n  /**\n   * Seconds spent reasoning. When set and not streaming, the label becomes\n   * `durationLabel(duration)`. Pair it with `useElapsedSeconds`.\n   */\n  duration?: number;\n  /** Words for a duration. */\n  durationLabel?: (seconds: number) => string;\n  /** Shimmer the label while streaming. Decoration: it stops under reduced motion. */\n  shimmer?: boolean;\n}\n\nfunction defaultDurationLabel(seconds: number): string {\n  return `Thought for ${seconds.toFixed(1)}s`;\n}\n\nexport function ReasoningTrigger({\n  className,\n  streaming: streamingProp,\n  label = \"Reasoning\",\n  streamingLabel = \"Thinking…\",\n  duration,\n  durationLabel = defaultDurationLabel,\n  shimmer = false,\n  children,\n  ...props\n}: ReasoningTriggerProps) {\n  const context = useContext(ReasoningContext);\n  const streaming = streamingProp ?? context.streaming;\n  const idleLabel = duration === undefined ? label : durationLabel(duration);\n\n  return (\n    <CollapsiblePrimitive.Trigger\n      data-slot=\"reasoning-trigger\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-md text-xs text-muted-foreground\",\n        \"transition-colors duration-[var(--duration-fast)] hover:text-foreground\",\n        \"[&[data-state=open]>svg:last-child]:rotate-180\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5 shrink-0\">\n        <path\n          d=\"M9.5 21h5M12 3a6 6 0 0 1 3.6 10.8c-.6.5-.9 1.1-1 1.7l-.1.5h-5l-.1-.5c-.1-.6-.4-1.2-1-1.7A6 6 0 0 1 12 3Z\"\n          stroke=\"currentColor\"\n          strokeWidth=\"1.75\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n      {children ??\n        (streaming ? (\n          shimmer ? (\n            <ShimmerText duration={1800} repeatDelay={0}>\n              {streamingLabel}\n            </ShimmerText>\n          ) : (\n            streamingLabel\n          )\n        ) : (\n          idleLabel\n        ))}\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        aria-hidden=\"true\"\n        className=\"size-3.5 shrink-0 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\nexport function ReasoningContent({\n  className,\n  children,\n  ...props\n}: ComponentPropsWithRef<typeof CollapsiblePrimitive.Content>) {\n  return (\n    <CollapsiblePrimitive.Content\n      data-slot=\"reasoning-content\"\n      className={cn(\n        \"overflow-hidden\",\n        \"data-[state=closed]:animate-accordion-close data-[state=open]:animate-accordion-open\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"mt-2 border-s-2 border-border ps-3 text-sm whitespace-pre-wrap text-muted-foreground\">\n        {children}\n      </div>\n    </CollapsiblePrimitive.Content>\n  );\n}\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-import { Reasoning, ReasoningContent, ReasoningProps, ReasoningTrigger, ReasoningTriggerProps } from "./ai-reasoning.js";
-export { Reasoning, ReasoningContent, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps };
+import { Reasoning, ReasoningContent, ReasoningProps, ReasoningTrigger, ReasoningTriggerProps, useElapsedSeconds } from "./ai-reasoning.js";
+export { Reasoning, ReasoningContent, type ReasoningProps, ReasoningTrigger, type ReasoningTriggerProps, useElapsedSeconds };

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

@@ -1,2 +1,2 @@
-import { Reasoning, ReasoningContent, ReasoningTrigger } from "./ai-reasoning.js";
-export { Reasoning, ReasoningContent, ReasoningTrigger };
+import { Reasoning, ReasoningContent, ReasoningTrigger, useElapsedSeconds } from "./ai-reasoning.js";
+export { Reasoning, ReasoningContent, ReasoningTrigger, useElapsedSeconds };

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

@@ -7,9 +7,9 @@ const meta = defineMeta({
 	category: "ai",
 	status: "stable",
 	dependencies: ["radix-ui"],
-	registryDependencies: [],
+	registryDependencies: ["shimmer-text"],
 	files: ["ai-reasoning.tsx"],
-	a11y: "A standard disclosure with aria-expanded on the trigger. Collapsed by default because reasoning is supporting material — giving it the same weight as the answer buries the answer. The trigger's label changes while reasoning streams, so its accessible name matches what is happening."
+	a11y: "A standard disclosure with aria-expanded on the trigger. Collapsed by default because reasoning is supporting material — giving it the same weight as the answer buries the answer. The trigger's label changes while reasoning streams, so its accessible name matches what is happening — and to \"Thought for 4.2s\" when given a duration. autoOpen and autoCollapse are opt-in; auto-collapse never closes the trace while focus or the pointer is inside it. The optional shimmer is decoration and stops under reduced motion."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-reasoning/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-reasoning\",\n  title: \"AI Reasoning\",\n  description: \"A collapsible disclosure for the model's reasoning.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"ai-reasoning.tsx\"],\n  a11y:\n    \"A standard disclosure with aria-expanded on the trigger. Collapsed by default because \" +\n    \"reasoning is supporting material — giving it the same weight as the answer buries the \" +\n    \"answer. The trigger's label changes while reasoning streams, so its accessible name matches \" +\n    \"what is happening.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAIJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/ai-reasoning/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"ai-reasoning\",\n  title: \"AI Reasoning\",\n  description: \"A collapsible disclosure for the model's reasoning.\",\n  category: \"ai\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [\"shimmer-text\"],\n  files: [\"ai-reasoning.tsx\"],\n  a11y:\n    \"A standard disclosure with aria-expanded on the trigger. Collapsed by default because \" +\n    \"reasoning is supporting material — giving it the same weight as the answer buries the \" +\n    \"answer. The trigger's label changes while reasoning streams, so its accessible name matches \" +\n    'what is happening — and to \"Thought for 4.2s\" when given a duration. autoOpen and ' +\n    \"autoCollapse are opt-in; auto-collapse never closes the trace while focus or the pointer is \" +\n    \"inside it. The optional shimmer is decoration and stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC,cAAc;CACrC,OAAO,CAAC,kBAAkB;CAC1B,MACE;AAMJ,CAAC"}

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

@@ -26,6 +26,10 @@ declare function ResponseCaret({ className, ...props }: ComponentPropsWithRef<"s
  * A distinct state from streaming: nothing has arrived yet, so there is no text
  * to show a caret after. Labelled for assistive technology because, unlike the
  * caret, this is the only thing on screen.
+ *
+ * An indicator in the ADR 0012 sense: it is the only sign that anything is
+ * happening, and a frozen one says the app has hung. So under reduced motion
+ * the dots slow (via --motion-scale-indicator) rather than stop.
  */
 interface ThinkingIndicatorProps extends ComponentPropsWithRef<"div"> {
   label?: string;

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;;;;;;;;UAsBnE,+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":";;;;;;;;;;;;;;UAmBiB,sBAAsB;;EAErC;;iBAGc,WAAW,WAAW,WAAW,aAAa,SAAS,gCAAa,IAAA;;;iBAwBpE,gBAAgB,cAAc,SAAS,gDAA6B,IAAA;;;;;;;;;;;;UA0BnE,+BAA+B;EAC9C;;iBAGc,oBACd,WACA,UACG,SACF,yCAAsB,IAAA"}

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

@@ -6,7 +6,7 @@ function Response({ className, streaming, children, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "response",
 		"data-streaming": streaming || void 0,
-		className: cn("text-sm leading-relaxed whitespace-pre-wrap text-foreground", "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em]", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:pl-5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:pl-5", "[&_p+p]:mt-3", className),
+		className: cn("text-sm leading-relaxed whitespace-pre-wrap text-foreground", "[&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4", "[&_code]:rounded [&_code]:bg-muted [&_code]:px-1 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-[0.9em]", "[&_ol]:my-2 [&_ol]:list-decimal [&_ol]:ps-5 [&_ul]:my-2 [&_ul]:list-disc [&_ul]:ps-5", "[&_p+p]:mt-3", className),
 		...props,
 		children: [children, streaming ? /* @__PURE__ */ jsx(ResponseCaret, {}) : null]
 	});
@@ -18,7 +18,7 @@ function ResponseCaret({ className, ...props }) {
 		"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),
+		className: cn("ms-0.5 inline-block h-[1em] w-[2px] translate-y-[0.15em] animate-caret bg-current align-baseline", className),
 		...props
 	});
 }
@@ -36,8 +36,12 @@ function ThinkingIndicator({ className, label = "Thinking", ...props }) {
 			2
 		].map((index) => /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
+			"data-motion": "indicator",
 			className: "size-1.5 animate-pulse-soft rounded-full bg-current",
-			style: { animationDelay: `${String(index * 160)}ms` }
+			style: {
+				animationDuration: "calc(1.8s * var(--motion-scale-indicator, 1))",
+				animationDelay: `calc(${String(index * 160)}ms * var(--motion-scale-indicator, 1))`
+			}
 		}, index))]
 	});
 }