@kanzo-tech/ai 0.16.0 → 0.17.0

package/dist/message.js

@@ -1,8 +1,8 @@
-import { jsx as r, jsxs as g, Fragment as u } from "react/jsx-runtime";
-import { ark as l } from "@ark-ui/react/factory";
-import { tv as p } from "tailwind-variants";
-import { cn as o, Avatar as d, AvatarImage as f, AvatarFallback as x } from "@kanzo-tech/ui";
-const v = p({
+import { jsx as r } from "react/jsx-runtime";
+import { ark as o } from "@ark-ui/react/factory";
+import { tv as n } from "tailwind-variants";
+import { cn as l } from "@kanzo-tech/ui";
+const g = n({
   base: [
     "group/message",
     "flex w-full flex-wrap items-start gap-3",
@@ -31,90 +31,49 @@ const v = p({
   defaultVariants: {
     role: "assistant"
   }
-}), M = (a) => {
-  const { role: s = "assistant", className: e, slot: t, ...n } = a;
+}), p = (s) => {
+  const { role: e = "assistant", className: a, slot: t, ...m } = s;
   return /* @__PURE__ */ r(
-    l.li,
+    o.li,
     {
-      className: o(v({ role: s }), e),
-      "data-role": s,
-      ...n,
+      className: l(g({ role: e }), a),
+      "data-role": e,
+      ...m,
       "data-slot": t ?? "message"
     }
   );
-}, b = (a) => {
-  const { className: s, slot: e, ...t } = a;
+}, f = (s) => {
+  const { className: e, slot: a, ...t } = s;
   return /* @__PURE__ */ r(
-    l.ul,
+    o.ul,
     {
-      className: o("flex w-full list-none flex-col gap-6", s),
+      className: l("flex w-full list-none flex-col gap-6", e),
       role: "list",
       ...t,
-      "data-slot": e ?? "message-list"
+      "data-slot": a ?? "message-list"
     }
   );
-}, y = (a) => (a ?? "").split(/\s+/).filter(Boolean).slice(0, 2).map((s) => {
-  var e;
-  return ((e = s[0]) == null ? void 0 : e.toUpperCase()) ?? "";
-}).join(""), j = (a) => {
-  const { src: s, name: e, className: t, children: n, size: i = "sm", slot: m, ...c } = a;
+}, x = (s) => {
+  const { className: e, slot: a, ...t } = s;
   return /* @__PURE__ */ r(
-    d,
+    o.div,
     {
-      className: o(
-        "shrink-0",
-        "group-data-[role=system]/message:hidden",
-        t
-      ),
-      size: i,
-      ...c,
-      slot: m ?? "message-avatar",
-      children: n ?? /* @__PURE__ */ g(u, { children: [
-        s ? /* @__PURE__ */ r(f, { alt: e ?? "", src: s }) : null,
-        /* @__PURE__ */ r(x, { children: y(e) })
-      ] })
-    }
-  );
-}, k = (a) => {
-  const { className: s, slot: e, ...t } = a;
-  return /* @__PURE__ */ r(
-    l.div,
-    {
-      className: o(
+      className: l(
         "flex min-w-0 flex-1 flex-col gap-2 leading-relaxed",
         "group-data-[role=user]/message:max-w-[85%] group-data-[role=user]/message:flex-none",
         "group-data-[role=user]/message:rounded-xl",
         "group-data-[role=user]/message:bg-secondary group-data-[role=user]/message:text-secondary-foreground",
         "group-data-[role=user]/message:px-3.5 group-data-[role=user]/message:py-2.5",
-        s
-      ),
-      ...t,
-      "data-slot": e ?? "message-content"
-    }
-  );
-}, C = (a) => {
-  const { className: s, slot: e, ...t } = a;
-  return /* @__PURE__ */ r(
-    l.div,
-    {
-      className: o(
-        "flex basis-full items-center gap-1",
-        "opacity-0 transition-opacity motion-reduce:transition-none!",
-        "group-hover/message:opacity-100 group-focus-within/message:opacity-100",
-        "pointer-coarse:opacity-100",
-        "group-data-[role=user]/message:justify-end",
-        s
+        e
       ),
       ...t,
-      "data-slot": e ?? "message-actions"
+      "data-slot": a ?? "message-content"
     }
   );
 };
 export {
-  M as Message,
-  C as MessageActions,
-  j as MessageAvatar,
-  k as MessageContent,
-  b as MessageList
+  p as Message,
+  x as MessageContent,
+  f as MessageList
 };
 //# sourceMappingURL=message.js.map

package/dist/message.js.map

@@ -1 +1 @@
-{"version":3,"file":"message.js","sources":["../src/message.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { Avatar, AvatarFallback, AvatarImage, cn } from \"@kanzo-tech/ui\";\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nconst messageVariants = tv({\n  base: [\n    \"group/message\",\n    \"flex w-full flex-wrap items-start gap-3\",\n    \"text-sm\",\n  ],\n  variants: {\n    role: {\n      // Reversed rather than `justify-end`: the row packs against the reading end and the avatar\n      // goes with it, and `row-reverse` is direction-aware where a physical side is not.\n      user: \"flex-row-reverse\",\n      assistant: \"\",\n      // **No surface of its own, and that is the correction.** A system note used to be a centred\n      // `rounded-full` pill painted by `MessageContent` — a shape the library already has, spelled\n      // again, and one that cannot hold what it was given: a full-round pill around a wrapped\n      // sentence is a stadium with dead corners, and `Badge`, the component it was imitating, is\n      // `whitespace-nowrap` at a fixed `h-5` and could never have rendered it.\n      //\n      // AI Elements types `from` as the AI SDK's `UIMessage[\"role\"]` — system included — and gives\n      // it no treatment at all: `is-user` or `is-assistant`, nothing else. So the role stays, the\n      // invented surface goes, and a caller who wants the note to read as an aside composes an\n      // `Alert` inside the row. That is a component with a wash, a border, an icon slot, an action\n      // slot, `role=\"status\"` and the ability to wrap.\n      system: \"\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nexport interface MessageProps\n  extends Omit<React.ComponentProps<typeof ark.li>, \"role\">,\n    VariantProps<typeof messageVariants> {}\n\n/**\n * One turn. The role is declared once, here, and every part below reads it off `data-role`\n * through a group selector — repeating it as a prop on each part is how the two drift.\n *\n * `role` is the speaker and not the ARIA attribute, which is why the HTML one is omitted rather\n * than merged: two meanings under one name, and the wrong one reaching the DOM, is worse than an\n * `<li>` nobody can re-role.\n */\nexport const Message = (props: MessageProps) => {\n  const { role = \"assistant\", className, slot, ...rest } = props;\n\n  return (\n    <ark.li\n      className={cn(messageVariants({ role }), className)}\n      data-role={role}\n      {...rest}\n      data-slot={slot ?? \"message\"}\n    />\n  );\n};\n\n/**\n * **`role=\"list\"` on top of the `<ul>`, because `list-none` takes the implicit one away.** WebKit\n * drops list semantics from a list whose `list-style` is `none` — items included — so a styled\n * transcript announces nothing in VoiceOver. jsdom does not model it, so the role queries passed\n * throughout. See `DiagnosticList`, which carries the argument in full.\n */\nexport const MessageList = (props: React.ComponentProps<typeof ark.ul>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.ul\n      className={cn(\"flex w-full list-none flex-col gap-6\", className)}\n      role=\"list\"\n      {...rest}\n      data-slot={slot ?? \"message-list\"}\n    />\n  );\n};\n\nconst initials = (name?: string) =>\n  (name ?? \"\")\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word[0]?.toUpperCase() ?? \"\")\n    .join(\"\");\n\nexport interface MessageAvatarProps extends React.ComponentProps<typeof Avatar> {\n  src?: string;\n  /** Names the image and, when there is no image, supplies the fallback's initials. */\n  name?: string;\n}\n\nexport const MessageAvatar = (props: MessageAvatarProps) => {\n  const { src, name, className, children, size = \"sm\", slot, ...rest } = props;\n\n  return (\n    <Avatar\n      className={cn(\n        \"shrink-0\",\n        \"group-data-[role=system]/message:hidden\",\n        className\n      )}\n      size={size}\n      {...rest}\n      slot={slot ?? \"message-avatar\"}\n    >\n      {children ?? (\n        <>\n          {src ? <AvatarImage alt={name ?? \"\"} src={src} /> : null}\n          <AvatarFallback>{initials(name)}</AvatarFallback>\n        </>\n      )}\n    </Avatar>\n  );\n};\n\n/**\n * The turn's words. The two speakers are told apart by surface before they are read: the user gets\n * a bubble and the assistant the page itself. A system note takes neither — it is not a speaker.\n *\n * **One treatment per speaker, not two.** The bubble was `bg-muted` plus a border, and it needed\n * the border because `--muted` is one step off `--background` (#efefef on #fafafa) — a fill nobody\n * could see, rescued by an outline. `--secondary` is the step that shows on its own, which is the\n * fill the source uses for exactly this, and it takes the outline back out. The tucked corner went\n * with it: a radius the rest of the library does not use, pointing at an avatar that is already\n * beside it.\n *\n * **Two treatments, not three.** The system pill that used to be here is gone; see `Message`.\n */\nexport const MessageContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col gap-2 leading-relaxed\",\n        \"group-data-[role=user]/message:max-w-[85%] group-data-[role=user]/message:flex-none\",\n        \"group-data-[role=user]/message:rounded-xl\",\n        \"group-data-[role=user]/message:bg-secondary group-data-[role=user]/message:text-secondary-foreground\",\n        \"group-data-[role=user]/message:px-3.5 group-data-[role=user]/message:py-2.5\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"message-content\"}\n    />\n  );\n};\n\n/**\n * A row of affordances for the turn above it — copy, retry, a source. `basis-full` breaks it onto\n * its own line, which is what the root's `flex-wrap` is there for.\n *\n * Hidden until the turn is pointed at, so a transcript is words rather than a column of buttons;\n * revealed by focus as well as hover, and always present on a coarse pointer, where there is no\n * hover to reveal it with.\n */\nexport const MessageActions = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex basis-full items-center gap-1\",\n        \"opacity-0 transition-opacity motion-reduce:transition-none!\",\n        \"group-hover/message:opacity-100 group-focus-within/message:opacity-100\",\n        \"pointer-coarse:opacity-100\",\n        \"group-data-[role=user]/message:justify-end\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"message-actions\"}\n    />\n  );\n};\n"],"names":["messageVariants","tv","Message","props","role","className","slot","rest","jsx","ark","cn","MessageList","initials","name","word","_a","MessageAvatar","src","children","size","Avatar","jsxs","Fragment","AvatarImage","AvatarFallback","MessageContent","MessageActions"],"mappings":";;;;AAOA,MAAMA,IAAkBC,EAAG;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA;AAAA;AAAA,MAGJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYX,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAcYC,IAAU,CAACC,MAAwB;AAC9C,QAAM,EAAE,MAAAC,IAAO,aAAa,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAEzD,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGV,EAAgB,EAAE,MAAAI,EAAA,CAAM,GAAGC,CAAS;AAAA,MAClD,aAAWD;AAAA,MACV,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAQaK,IAAc,CAACR,MAA+C;AACzE,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,wCAAwCL,CAAS;AAAA,MAC/D,MAAK;AAAA,MACJ,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAEMM,IAAW,CAACC,OACfA,KAAQ,IACN,MAAM,KAAK,EACX,OAAO,OAAO,EACd,MAAM,GAAG,CAAC,EACV,IAAI,CAACC,MAAA;;AAAS,WAAAC,IAAAD,EAAK,CAAC,MAAN,gBAAAC,EAAS,kBAAiB;AAAA,CAAE,EAC1C,KAAK,EAAE,GAQCC,IAAgB,CAACb,MAA8B;AAC1D,QAAM,EAAE,KAAAc,GAAK,MAAAJ,GAAM,WAAAR,GAAW,UAAAa,GAAU,MAAAC,IAAO,MAAM,MAAAb,GAAM,GAAGC,EAAA,IAASJ;AAEvE,SACE,gBAAAK;AAAA,IAACY;AAAA,IAAA;AAAA,MACC,WAAWV;AAAA,QACT;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAEF,MAAAc;AAAA,MACC,GAAGZ;AAAA,MACJ,MAAMD,KAAQ;AAAA,MAEb,eACC,gBAAAe,EAAAC,GAAA,EACG,UAAA;AAAA,QAAAL,sBAAOM,GAAA,EAAY,KAAKV,KAAQ,IAAI,KAAAI,GAAU,IAAK;AAAA,QACpD,gBAAAT,EAACgB,GAAA,EAAgB,UAAAZ,EAASC,CAAI,EAAA,CAAE;AAAA,MAAA,EAAA,CAClC;AAAA,IAAA;AAAA,EAAA;AAIR,GAeaY,IAAiB,CAACtB,MAAgD;AAC7E,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAUaoB,IAAiB,CAACvB,MAAgD;AAC7E,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}
+{"version":3,"file":"message.js","sources":["../src/message.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { Avatar, AvatarFallback, AvatarImage, cn } from \"@kanzo-tech/ui\";\n\nexport type MessageRole = \"user\" | \"assistant\" | \"system\";\n\nconst messageVariants = tv({\n  base: [\n    \"group/message\",\n    \"flex w-full flex-wrap items-start gap-3\",\n    \"text-sm\",\n  ],\n  variants: {\n    role: {\n      // Reversed rather than `justify-end`: the row packs against the reading end and the avatar\n      // goes with it, and `row-reverse` is direction-aware where a physical side is not.\n      user: \"flex-row-reverse\",\n      assistant: \"\",\n      // **No surface of its own, and that is the correction.** A system note used to be a centred\n      // `rounded-full` pill painted by `MessageContent` — a shape the library already has, spelled\n      // again, and one that cannot hold what it was given: a full-round pill around a wrapped\n      // sentence is a stadium with dead corners, and `Badge`, the component it was imitating, is\n      // `whitespace-nowrap` at a fixed `h-5` and could never have rendered it.\n      //\n      // AI Elements types `from` as the AI SDK's `UIMessage[\"role\"]` — system included — and gives\n      // it no treatment at all: `is-user` or `is-assistant`, nothing else. So the role stays, the\n      // invented surface goes, and a caller who wants the note to read as an aside composes an\n      // `Alert` inside the row. That is a component with a wash, a border, an icon slot, an action\n      // slot, `role=\"status\"` and the ability to wrap.\n      system: \"\",\n    },\n  },\n  defaultVariants: {\n    role: \"assistant\",\n  },\n});\n\nexport interface MessageProps\n  extends Omit<React.ComponentProps<typeof ark.li>, \"role\">,\n    VariantProps<typeof messageVariants> {}\n\n/**\n * One turn. The role is declared once, here, and every part below reads it off `data-role`\n * through a group selector — repeating it as a prop on each part is how the two drift.\n *\n * `role` is the speaker and not the ARIA attribute, which is why the HTML one is omitted rather\n * than merged: two meanings under one name, and the wrong one reaching the DOM, is worse than an\n * `<li>` nobody can re-role.\n */\nexport const Message = (props: MessageProps) => {\n  const { role = \"assistant\", className, slot, ...rest } = props;\n\n  return (\n    <ark.li\n      className={cn(messageVariants({ role }), className)}\n      data-role={role}\n      {...rest}\n      data-slot={slot ?? \"message\"}\n    />\n  );\n};\n\n/**\n * **`role=\"list\"` on top of the `<ul>`, because `list-none` takes the implicit one away.** WebKit\n * drops list semantics from a list whose `list-style` is `none` — items included — so a styled\n * transcript announces nothing in VoiceOver. jsdom does not model it, so the role queries passed\n * throughout. See `DiagnosticList`, which carries the argument in full.\n */\nexport const MessageList = (props: React.ComponentProps<typeof ark.ul>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.ul\n      className={cn(\"flex w-full list-none flex-col gap-6\", className)}\n      role=\"list\"\n      {...rest}\n      data-slot={slot ?? \"message-list\"}\n    />\n  );\n};\n\nconst initials = (name?: string) =>\n  (name ?? \"\")\n    .split(/\\s+/)\n    .filter(Boolean)\n    .slice(0, 2)\n    .map((word) => word[0]?.toUpperCase() ?? \"\")\n    .join(\"\");\n\nexport interface MessageAvatarProps extends React.ComponentProps<typeof Avatar> {\n  src?: string;\n  /** Names the image and, when there is no image, supplies the fallback's initials. */\n  name?: string;\n}\n\nexport const MessageAvatar = (props: MessageAvatarProps) => {\n  const { src, name, className, children, size = \"sm\", slot, ...rest } = props;\n\n  return (\n    <Avatar\n      className={cn(\n        \"shrink-0\",\n        \"group-data-[role=system]/message:hidden\",\n        className\n      )}\n      size={size}\n      {...rest}\n      slot={slot ?? \"message-avatar\"}\n    >\n      {children ?? (\n        <>\n          {src ? <AvatarImage alt={name ?? \"\"} src={src} /> : null}\n          <AvatarFallback>{initials(name)}</AvatarFallback>\n        </>\n      )}\n    </Avatar>\n  );\n};\n\n/**\n * The turn's words. The two speakers are told apart by surface before they are read: the user gets\n * a bubble and the assistant the page itself. A system note takes neither — it is not a speaker.\n *\n * **One treatment per speaker, not two.** The bubble was `bg-muted` plus a border, and it needed\n * the border because `--muted` is one step off `--background` (#efefef on #fafafa) — a fill nobody\n * could see, rescued by an outline. `--secondary` is the step that shows on its own, which is the\n * fill the source uses for exactly this, and it takes the outline back out. The tucked corner went\n * with it: a radius the rest of the library does not use, pointing at an avatar that is already\n * beside it.\n *\n * **Two treatments, not three.** The system pill that used to be here is gone; see `Message`.\n */\nexport const MessageContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col gap-2 leading-relaxed\",\n        \"group-data-[role=user]/message:max-w-[85%] group-data-[role=user]/message:flex-none\",\n        \"group-data-[role=user]/message:rounded-xl\",\n        \"group-data-[role=user]/message:bg-secondary group-data-[role=user]/message:text-secondary-foreground\",\n        \"group-data-[role=user]/message:px-3.5 group-data-[role=user]/message:py-2.5\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"message-content\"}\n    />\n  );\n};\n\n/**\n * A row of affordances for the turn above it — copy, retry, a source. `basis-full` breaks it onto\n * its own line, which is what the root's `flex-wrap` is there for.\n *\n * Hidden until the turn is pointed at, so a transcript is words rather than a column of buttons;\n * revealed by focus as well as hover, and always present on a coarse pointer, where there is no\n * hover to reveal it with.\n */\nexport const MessageActions = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex basis-full items-center gap-1\",\n        \"opacity-0 transition-opacity motion-reduce:transition-none!\",\n        \"group-hover/message:opacity-100 group-focus-within/message:opacity-100\",\n        \"pointer-coarse:opacity-100\",\n        \"group-data-[role=user]/message:justify-end\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"message-actions\"}\n    />\n  );\n};\n"],"names":["messageVariants","tv","Message","props","role","className","slot","rest","jsx","ark","cn","MessageList","MessageContent"],"mappings":";;;;AAOA,MAAMA,IAAkBC,EAAG;AAAA,EACzB,MAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF,UAAU;AAAA,IACR,MAAM;AAAA;AAAA;AAAA,MAGJ,MAAM;AAAA,MACN,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAYX,QAAQ;AAAA,IAAA;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC,GAcYC,IAAU,CAACC,MAAwB;AAC9C,QAAM,EAAE,MAAAC,IAAO,aAAa,WAAAC,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAEzD,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAGV,EAAgB,EAAE,MAAAI,EAAA,CAAM,GAAGC,CAAS;AAAA,MAClD,aAAWD;AAAA,MACV,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAQaK,IAAc,CAACR,MAA+C;AACzE,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC,EAAG,wCAAwCL,CAAS;AAAA,MAC/D,MAAK;AAAA,MACJ,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB,GAqDaM,IAAiB,CAACT,MAAgD;AAC7E,QAAM,EAAE,WAAAE,GAAW,MAAAC,GAAM,GAAGC,MAASJ;AAErC,SACE,gBAAAK;AAAA,IAACC,EAAI;AAAA,IAAJ;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MACJ,aAAWD,KAAQ;AAAA,IAAA;AAAA,EAAA;AAGzB;"}

package/dist/prompt-input.d.ts

@@ -1,7 +1,7 @@
 import { ark } from '@ark-ui/react/factory';
 import { default as React } from 'react';
 import { InputGroupAddon, InputGroupButton, InputGroupTextarea } from '@kanzo-tech/ui';
-import { AiStatus } from './use-ai.js';
+import { ChatStatus } from '@kanzo-tech/llm';
 /**
  * The composer: the library's `InputGroup` as a form, so Enter and the button are one path.
  *
@@ -24,7 +24,7 @@ export declare const PromptInputTextarea: (props: React.ComponentProps<typeof In
  */
 export declare const PromptInputToolbar: (props: React.ComponentProps<typeof InputGroupAddon>) => React.JSX.Element;
 export interface PromptInputSubmitProps extends React.ComponentProps<typeof InputGroupButton> {
-    status?: AiStatus;
+    status?: ChatStatus;
 }
 export declare const PromptInputSubmit: (props: PromptInputSubmitProps) => React.JSX.Element;
 //# sourceMappingURL=prompt-input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../src/prompt-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAE5C;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAUvE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAuBzF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,sBAiBrF,CAAC;AAqDF,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC;IACrD,MAAM,CAAC,EAAE,QAAQ,CAAC;CACnB;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6B9D,CAAC"}
+{"version":3,"file":"prompt-input.d.ts","sourceRoot":"","sources":["../src/prompt-input.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,eAAe,EACf,gBAAgB,EAChB,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAUvE,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAuBzF,CAAC;AAEF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,kBAAkB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,sBAiBrF,CAAC;AAyDF,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC;IACrD,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,GAAI,OAAO,sBAAsB,sBA6B9D,CAAC"}

package/dist/prompt-input.js

@@ -1,72 +1,70 @@
 "use client";
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
-import { ark as b } from "@ark-ui/react/factory";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
+import { ark as f } from "@ark-ui/react/factory";
 import { RefreshCcwIcon as h, SquareIcon as x, SendIcon as I } from "lucide-react";
 import { tv as N } from "tailwind-variants";
-import { InputGroup as g, cn as l, InputGroupButton as S, InputGroupTextarea as v, InputGroupAddon as y, Spinner as w } from "@kanzo-tech/ui";
-const j = (o) => {
-  const { className: e, slot: r, ...s } = o;
+import { InputGroup as S, cn as c, InputGroupTextarea as g, InputGroupAddon as y, InputGroupButton as v, Spinner as T } from "@kanzo-tech/ui";
+const q = (o) => {
+  const { className: r, slot: e, ...s } = o;
   return (
     // A composer is a panel rather than a one-line control, so it takes the next radius up and a
     // shadow that puts it on top of the page instead of flush with it.
-    /* @__PURE__ */ a(g, { asChild: !0, className: l("rounded-xl shadow-xs/5", e), children: /* @__PURE__ */ a(b.form, { ...s, "data-slot": r ?? "prompt-input" }) })
+    /* @__PURE__ */ a(S, { asChild: !0, className: c("rounded-xl shadow-xs/5", r), children: /* @__PURE__ */ a(f.form, { ...s, "data-slot": e ?? "prompt-input" }) })
   );
-}, q = (o) => {
-  const { className: e, onKeyDown: r, rows: s = 1, slot: n, ...i } = o;
+}, B = (o) => {
+  const { className: r, onKeyDown: e, rows: s = 1, slot: n, ...i } = o;
   return /* @__PURE__ */ a(
-    v,
+    g,
     {
-      className: l("max-h-48 min-h-16", e),
+      className: c("max-h-48 min-h-16", r),
       onKeyDown: (t) => {
         var u;
-        r == null || r(t), !t.defaultPrevented && (t.key !== "Enter" || t.shiftKey || t.nativeEvent.isComposing || (t.preventDefault(), (u = t.currentTarget.form) == null || u.requestSubmit()));
+        e == null || e(t), !t.defaultPrevented && (t.key !== "Enter" || t.shiftKey || t.nativeEvent.isComposing || (t.preventDefault(), (u = t.currentTarget.form) == null || u.requestSubmit()));
       },
       rows: s,
       ...i,
       slot: n ?? "prompt-input-textarea"
     }
   );
-}, B = (o) => {
-  const { className: e, slot: r, ...s } = o;
+}, D = (o) => {
+  const { className: r, slot: e, ...s } = o;
   return /* @__PURE__ */ a(
     y,
     {
       align: "block-end",
-      className: l("min-w-0 flex-wrap gap-1", e),
+      className: c("min-w-0 flex-wrap gap-1", r),
       onClick: (n) => {
         var i, t;
         n.target.closest("button, a, input, textarea") || (t = (i = n.currentTarget.parentElement) == null ? void 0 : i.querySelector("textarea")) == null || t.focus();
       },
       ...s,
-      slot: r ?? "prompt-input-toolbar"
+      slot: e ?? "prompt-input-toolbar"
     }
   );
-}, c = { icon: /* @__PURE__ */ a(I, {}), label: "Send" }, T = {
-  idle: c,
-  // An answer that has arrived leaves the composer ready for the next question, so `ready` and
-  // `idle` are one button. They are two states of the *stream*, not two states of this control.
-  ready: c,
-  loading: {
-    // The stop block inside the spinner it is stopping. A bare square changes only the glyph, and
-    // at a glance across a panel that reads as the same idle button; the motion is what says the
-    // answer is still arriving. `aria-hidden` on both — the accessible name already changed to
-    // "Stop", and a `role="status"` inside a named button announces the state twice.
-    icon: /* @__PURE__ */ f("span", { className: "relative flex size-4 items-center justify-center", children: [
-      /* @__PURE__ */ a(w, { "aria-hidden": !0, className: "absolute size-4" }),
-      /* @__PURE__ */ a(x, { "aria-hidden": !0, className: "size-2.5" })
-    ] }),
-    label: "Stop"
-  },
+}, w = { icon: /* @__PURE__ */ a(I, {}), label: "Send" }, l = {
+  // The stop block inside the spinner it is stopping. A bare square changes only the glyph, and
+  // at a glance across a panel that reads as the same idle button; the motion is what says the
+  // answer is still arriving. `aria-hidden` on both — the accessible name already changed to
+  // "Stop", and a `role="status"` inside a named button announces the state twice.
+  icon: /* @__PURE__ */ b("span", { className: "relative flex size-4 items-center justify-center", children: [
+    /* @__PURE__ */ a(T, { "aria-hidden": !0, className: "absolute size-4" }),
+    /* @__PURE__ */ a(x, { "aria-hidden": !0, className: "size-2.5" })
+  ] }),
+  label: "Stop"
+}, P = {
+  ready: w,
+  submitted: l,
+  streaming: l,
   error: { icon: /* @__PURE__ */ a(h, {}), label: "Retry" }
-}, P = N({
+}, k = N({
   // No transition of its own: `Button`'s base already carries `transition-all` and the
   // `motion-reduce` escape, and a narrower `transition-colors` here would replace both.
   base: ["ms-auto"],
   variants: {
     status: {
-      idle: "",
       ready: "",
-      loading: "",
+      submitted: "",
+      streaming: "",
       error: [
         "bg-destructive/7 hover:bg-destructive/14",
         "border-destructive/30",
@@ -76,38 +74,38 @@ const j = (o) => {
     }
   },
   defaultVariants: {
-    status: "idle"
+    status: "ready"
   }
-}), D = (o) => {
+}), R = (o) => {
   const {
-    status: e = "idle",
-    className: r,
+    status: r = "ready",
+    className: e,
     children: s,
     type: n = "submit",
     variant: i = "default",
     size: t = s === void 0 ? "icon-sm" : "sm",
     slot: u,
-    ...p
-  } = o, { icon: m, label: d } = T[e];
+    ...m
+  } = o, { icon: p, label: d } = P[r];
   return /* @__PURE__ */ a(
-    S,
+    v,
     {
       "aria-label": s === void 0 ? d : void 0,
-      className: l(P({ status: e }), r),
-      "data-status": e,
+      className: c(k({ status: r }), e),
+      "data-status": r,
       size: t,
       type: n,
       variant: i,
-      ...p,
+      ...m,
       slot: u ?? "prompt-input-submit",
-      children: s ?? m
+      children: s ?? p
     }
   );
 };
 export {
-  j as PromptInput,
-  D as PromptInputSubmit,
-  q as PromptInputTextarea,
-  B as PromptInputToolbar
+  q as PromptInput,
+  R as PromptInputSubmit,
+  B as PromptInputTextarea,
+  D as PromptInputToolbar
 };
 //# sourceMappingURL=prompt-input.js.map

package/dist/prompt-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"prompt-input.js","sources":["../src/prompt-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { RefreshCcwIcon, SendIcon, SquareIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport {\n  cn,\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupTextarea,\n  Spinner,\n} from \"@kanzo-tech/ui\";\nimport type { AiStatus } from \"./use-ai.js\";\n\n/**\n * The composer: the library's `InputGroup` as a form, so Enter and the button are one path.\n *\n * `asChild` rather than a wrapping `<form>`: `InputGroup`'s recipe selects its own direct children\n * (`has-[>textarea]`, `has-[>[data-align=block-end]]`), and an element between the group and the\n * field silently unsets half of it.\n */\nexport const PromptInput = (props: React.ComponentProps<typeof ark.form>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    // A composer is a panel rather than a one-line control, so it takes the next radius up and a\n    // shadow that puts it on top of the page instead of flush with it.\n    <InputGroup asChild className={cn(\"rounded-xl shadow-xs/5\", className)}>\n      <ark.form {...rest} data-slot={slot ?? \"prompt-input\"} />\n    </InputGroup>\n  );\n};\n\nexport const PromptInputTextarea = (props: React.ComponentProps<typeof InputGroupTextarea>) => {\n  const { className, onKeyDown, rows = 1, slot, ...rest } = props;\n\n  return (\n    <InputGroupTextarea\n      // `Textarea`'s base already sets `field-sizing-content`, so the field grows with what is\n      // typed; the ceiling is what this adds. Without it a pasted document swallows the panel and\n      // takes the transcript with it. Past 12rem the field scrolls and the composer stops moving.\n      className={cn(\"max-h-48 min-h-16\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        // `isComposing` is the trap: an IME commits its candidate with Enter, and without this the\n        // half-typed word is sent instead of finished.\n        if (event.key !== \"Enter\" || event.shiftKey || event.nativeEvent.isComposing) return;\n        event.preventDefault();\n        event.currentTarget.form?.requestSubmit();\n      }}\n      rows={rows}\n      {...rest}\n      slot={slot ?? \"prompt-input-textarea\"}\n    />\n  );\n};\n\n/**\n * The strip of controls under the field — a model picker, an attachment, the ✨, the submit.\n *\n * `align=\"block-end\"` is not decoration: a popover trigger living here anchors to the composer, so\n * its surface opens over the text it writes. Hung off a label row above the field instead, it\n * opened against the panel's edge, far from the value. Nothing here may become `overflow-hidden`\n * for the same reason.\n *\n * It wraps rather than overflows, because everything in it is `shrink-0`: four controls in a narrow\n * panel pushed the submit past the composer's edge instead of taking a second line.\n */\nexport const PromptInputToolbar = (props: React.ComponentProps<typeof InputGroupAddon>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <InputGroupAddon\n      align=\"block-end\"\n      className={cn(\"min-w-0 flex-wrap gap-1\", className)}\n      // The addon's own handler focuses an `input`, and a composer has a `textarea` — so the strip\n      // carried `cursor-text` and gave no caret. Same guard: a press on a control is that control's.\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest(\"button, a, input, textarea\")) return;\n        event.currentTarget.parentElement?.querySelector(\"textarea\")?.focus();\n      }}\n      {...rest}\n      slot={slot ?? \"prompt-input-toolbar\"}\n    />\n  );\n};\n\nconst SEND = { icon: <SendIcon />, label: \"Send\" };\n\nconst SUBMIT: Record<AiStatus, { icon: React.ReactNode; label: string }> = {\n  idle: SEND,\n  // An answer that has arrived leaves the composer ready for the next question, so `ready` and\n  // `idle` are one button. They are two states of the *stream*, not two states of this control.\n  ready: SEND,\n  loading: {\n    // The stop block inside the spinner it is stopping. A bare square changes only the glyph, and\n    // at a glance across a panel that reads as the same idle button; the motion is what says the\n    // answer is still arriving. `aria-hidden` on both — the accessible name already changed to\n    // \"Stop\", and a `role=\"status\"` inside a named button announces the state twice.\n    icon: (\n      <span className=\"relative flex size-4 items-center justify-center\">\n        <Spinner aria-hidden className=\"absolute size-4\" />\n        <SquareIcon aria-hidden className=\"size-2.5\" />\n      </span>\n    ),\n    label: \"Stop\",\n  },\n  error: { icon: <RefreshCcwIcon />, label: \"Retry\" },\n};\n\n/**\n * One control in three looks, so the fill is what carries the state and the box never moves: same\n * slot, same size, same corner in all of them. `idle`, `ready` and `loading` share `Button`'s\n * `default` variant outright — the glyph is the whole difference — and `error` takes the wash\n * `Alert` uses for the same family, which is a button you can still press, not a disabled one.\n */\nconst promptInputSubmitVariants = tv({\n  // No transition of its own: `Button`'s base already carries `transition-all` and the\n  // `motion-reduce` escape, and a narrower `transition-colors` here would replace both.\n  base: [\"ms-auto\"],\n  variants: {\n    status: {\n      idle: \"\",\n      ready: \"\",\n      loading: \"\",\n      error: [\n        \"bg-destructive/7 hover:bg-destructive/14\",\n        \"border-destructive/30\",\n        \"text-destructive-foreground\",\n        \"shadow-none\",\n      ],\n    },\n  },\n  defaultVariants: {\n    status: \"idle\",\n  },\n});\n\nexport interface PromptInputSubmitProps\n  extends React.ComponentProps<typeof InputGroupButton> {\n  status?: AiStatus;\n}\n\nexport const PromptInputSubmit = (props: PromptInputSubmitProps) => {\n  const {\n    status = \"idle\",\n    className,\n    children,\n    type = \"submit\",\n    variant = \"default\",\n    size = children === undefined ? \"icon-sm\" : \"sm\",\n    slot,\n    ...rest\n  } = props;\n  const { icon, label } = SUBMIT[status];\n\n  return (\n    <InputGroupButton\n      // Only where the button has no visible text of its own: a label over a legible one renames\n      // it, which is worse than not having one.\n      aria-label={children === undefined ? label : undefined}\n      className={cn(promptInputSubmitVariants({ status }), className)}\n      data-status={status}\n      size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"prompt-input-submit\"}\n    >\n      {children ?? icon}\n    </InputGroupButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBO;AACL;AAEA;AAAA;AAAA;AAAA;AAKE;AAEJ;AAGE;AAEA;AACE;AAAC;AAAA;AAI6C;;AAG1C;AAK0B;AAC5B;AACA;AACI;AACU;AAAA;AAGpB;AAcE;AAEA;AACE;AAAC;AAAA;AACO;AAC4C;;AAIhD;AAC8D;AAChE;AACI;AACU;AAAA;AAGpB;AAI2E;AACnE;AAAA;AAAA;AAGC;AACE;AAAA;AAAA;AAAA;AAAA;AAOH;AAAiD;AACJ;AAC/C;AAEK;AAAA;AAGX;AAQqC;AAAA;AAAA;AAGnB;AACN;AACA;AACA;AACC;AACE;AACF;AACL;AACA;AACA;AACA;AAAA;AACF;AACF;AAEe;AACP;AAEZ;AAQE;AAAM;AACK;AACT;AACA;AACO;AACG;AACkC;AAC5C;AACG;AAIL;AACE;AAAC;AAAA;AAG8C;AACiB;AACjD;AACb;AACA;AACA;AACI;AACU;AAED;AAAA;AAGnB;;;;;;;"}
+{"version":3,"file":"prompt-input.js","sources":["../src/prompt-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { RefreshCcwIcon, SendIcon, SquareIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport {\n  cn,\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupTextarea,\n  Spinner,\n} from \"@kanzo-tech/ui\";\nimport type { ChatStatus } from \"@kanzo-tech/llm\";\n\n/**\n * The composer: the library's `InputGroup` as a form, so Enter and the button are one path.\n *\n * `asChild` rather than a wrapping `<form>`: `InputGroup`'s recipe selects its own direct children\n * (`has-[>textarea]`, `has-[>[data-align=block-end]]`), and an element between the group and the\n * field silently unsets half of it.\n */\nexport const PromptInput = (props: React.ComponentProps<typeof ark.form>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    // A composer is a panel rather than a one-line control, so it takes the next radius up and a\n    // shadow that puts it on top of the page instead of flush with it.\n    <InputGroup asChild className={cn(\"rounded-xl shadow-xs/5\", className)}>\n      <ark.form {...rest} data-slot={slot ?? \"prompt-input\"} />\n    </InputGroup>\n  );\n};\n\nexport const PromptInputTextarea = (props: React.ComponentProps<typeof InputGroupTextarea>) => {\n  const { className, onKeyDown, rows = 1, slot, ...rest } = props;\n\n  return (\n    <InputGroupTextarea\n      // `Textarea`'s base already sets `field-sizing-content`, so the field grows with what is\n      // typed; the ceiling is what this adds. Without it a pasted document swallows the panel and\n      // takes the transcript with it. Past 12rem the field scrolls and the composer stops moving.\n      className={cn(\"max-h-48 min-h-16\", className)}\n      onKeyDown={(event) => {\n        onKeyDown?.(event);\n        if (event.defaultPrevented) return;\n        // `isComposing` is the trap: an IME commits its candidate with Enter, and without this the\n        // half-typed word is sent instead of finished.\n        if (event.key !== \"Enter\" || event.shiftKey || event.nativeEvent.isComposing) return;\n        event.preventDefault();\n        event.currentTarget.form?.requestSubmit();\n      }}\n      rows={rows}\n      {...rest}\n      slot={slot ?? \"prompt-input-textarea\"}\n    />\n  );\n};\n\n/**\n * The strip of controls under the field — a model picker, an attachment, the ✨, the submit.\n *\n * `align=\"block-end\"` is not decoration: a popover trigger living here anchors to the composer, so\n * its surface opens over the text it writes. Hung off a label row above the field instead, it\n * opened against the panel's edge, far from the value. Nothing here may become `overflow-hidden`\n * for the same reason.\n *\n * It wraps rather than overflows, because everything in it is `shrink-0`: four controls in a narrow\n * panel pushed the submit past the composer's edge instead of taking a second line.\n */\nexport const PromptInputToolbar = (props: React.ComponentProps<typeof InputGroupAddon>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <InputGroupAddon\n      align=\"block-end\"\n      className={cn(\"min-w-0 flex-wrap gap-1\", className)}\n      // The addon's own handler focuses an `input`, and a composer has a `textarea` — so the strip\n      // carried `cursor-text` and gave no caret. Same guard: a press on a control is that control's.\n      onClick={(event) => {\n        if ((event.target as HTMLElement).closest(\"button, a, input, textarea\")) return;\n        event.currentTarget.parentElement?.querySelector(\"textarea\")?.focus();\n      }}\n      {...rest}\n      slot={slot ?? \"prompt-input-toolbar\"}\n    />\n  );\n};\n\nconst SEND = { icon: <SendIcon />, label: \"Send\" };\n\nconst STOP = {\n  // The stop block inside the spinner it is stopping. A bare square changes only the glyph, and\n  // at a glance across a panel that reads as the same idle button; the motion is what says the\n  // answer is still arriving. `aria-hidden` on both — the accessible name already changed to\n  // \"Stop\", and a `role=\"status\"` inside a named button announces the state twice.\n  icon: (\n    <span className=\"relative flex size-4 items-center justify-center\">\n      <Spinner aria-hidden className=\"absolute size-4\" />\n      <SquareIcon aria-hidden className=\"size-2.5\" />\n    </span>\n  ),\n  label: \"Stop\",\n};\n\n/**\n * The AI SDK's `ChatStatus`, drawn. `submitted` (asked, nothing back yet) and `streaming` are one\n * button: both are an answer that can be stopped.\n */\nconst SUBMIT: Record<ChatStatus, { icon: React.ReactNode; label: string }> = {\n  ready: SEND,\n  submitted: STOP,\n  streaming: STOP,\n  error: { icon: <RefreshCcwIcon />, label: \"Retry\" },\n};\n\n/**\n * One control in three looks, so the fill is what carries the state and the box never moves: same\n * slot, same size, same corner in all of them. `ready`, `submitted` and `streaming` share `Button`'s\n * `default` variant outright — the glyph is the whole difference — and `error` takes the wash\n * `Alert` uses for the same family, which is a button you can still press, not a disabled one.\n */\nconst promptInputSubmitVariants = tv({\n  // No transition of its own: `Button`'s base already carries `transition-all` and the\n  // `motion-reduce` escape, and a narrower `transition-colors` here would replace both.\n  base: [\"ms-auto\"],\n  variants: {\n    status: {\n      ready: \"\",\n      submitted: \"\",\n      streaming: \"\",\n      error: [\n        \"bg-destructive/7 hover:bg-destructive/14\",\n        \"border-destructive/30\",\n        \"text-destructive-foreground\",\n        \"shadow-none\",\n      ],\n    },\n  },\n  defaultVariants: {\n    status: \"ready\",\n  },\n});\n\nexport interface PromptInputSubmitProps\n  extends React.ComponentProps<typeof InputGroupButton> {\n  status?: ChatStatus;\n}\n\nexport const PromptInputSubmit = (props: PromptInputSubmitProps) => {\n  const {\n    status = \"ready\",\n    className,\n    children,\n    type = \"submit\",\n    variant = \"default\",\n    size = children === undefined ? \"icon-sm\" : \"sm\",\n    slot,\n    ...rest\n  } = props;\n  const { icon, label } = SUBMIT[status];\n\n  return (\n    <InputGroupButton\n      // Only where the button has no visible text of its own: a label over a legible one renames\n      // it, which is worse than not having one.\n      aria-label={children === undefined ? label : undefined}\n      className={cn(promptInputSubmitVariants({ status }), className)}\n      data-status={status}\n      size={size}\n      type={type}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"prompt-input-submit\"}\n    >\n      {children ?? icon}\n    </InputGroupButton>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAuBO;AACL;AAEA;AAAA;AAAA;AAAA;AAKE;AAEJ;AAGE;AAEA;AACE;AAAC;AAAA;AAI6C;;AAG1C;AAK0B;AAC5B;AACA;AACI;AACU;AAAA;AAGpB;AAcE;AAEA;AACE;AAAC;AAAA;AACO;AAC4C;;AAIhD;AAC8D;AAChE;AACI;AACU;AAAA;AAGpB;AAIa;AAAA;AAAA;AAAA;AAAA;AAOP;AAAiD;AACJ;AAC/C;AAGJ;AAM6E;AACpE;AACI;AACA;AAEb;AAQqC;AAAA;AAAA;AAGnB;AACN;AACA;AACC;AACI;AACA;AACJ;AACL;AACA;AACA;AACA;AAAA;AACF;AACF;AAEe;AACP;AAEZ;AAQE;AAAM;AACK;AACT;AACA;AACO;AACG;AACkC;AAC5C;AACG;AAIL;AACE;AAAC;AAAA;AAG8C;AACiB;AACjD;AACb;AACA;AACA;AACI;AACU;AAED;AAAA;AAGnB;;;;;;;"}

package/dist/proposals.d.ts

@@ -0,0 +1,28 @@
+import { LanguageModel } from '@kanzo-tech/llm';
+import { ContinuationRequest, Proposal } from './engine.js';
+/** What the model is told about the field it is filling. */
+export interface FieldBrief {
+    /** The accessible name — the label a person reads. */
+    name: string;
+    /** The accessible description — the helper text under it. */
+    description?: string;
+    /** The host's own instruction for this field (`<Assist instructions>`). */
+    instructions?: string;
+    /** What the rest of the form says (`<AssistProvider context>`). */
+    context?: string;
+}
+/** One continuation at the caret, streamed. */
+export declare function continuation(model: LanguageModel, field: FieldBrief, { value, position, trigger, avoid, signal }: ContinuationRequest): AsyncIterable<string>;
+/**
+ * Whole values for the field, each arriving as soon as it is complete (`elementStream`), so the
+ * first candidate is on screen while the model writes the rest.
+ */
+export declare function candidates(model: LanguageModel, field: FieldBrief, { value, existing, signal, count, list }: {
+    value: string;
+    existing: string[];
+    signal: AbortSignal;
+    count: number;
+    /** The field holds a list (tags): a candidate is one more item, not a replacement. */
+    list: boolean;
+}): AsyncIterable<Proposal>;
+//# sourceMappingURL=proposals.d.ts.map

package/dist/proposals.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"proposals.d.ts","sourceRoot":"","sources":["../src/proposals.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,aAAa,EAAkC,MAAM,iBAAiB,CAAC;AACrF,OAAO,KAAK,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEjE,4DAA4D;AAC5D,MAAM,WAAW,UAAU;IACzB,sDAAsD;IACtD,IAAI,EAAE,MAAM,CAAC;IACb,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2EAA2E;IAC3E,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAgBD,+CAA+C;AAC/C,wBAAgB,YAAY,CAC1B,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,UAAU,EACjB,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE,mBAAmB,GAC/D,aAAa,CAAC,MAAM,CAAC,CAWvB;AAcD;;;GAGG;AACH,wBAAuB,UAAU,CAC/B,KAAK,EAAE,aAAa,EACpB,KAAK,EAAE,UAAU,EACjB,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,IAAI,EAAE,OAAO,CAAC;CACf,GACA,aAAa,CAAC,QAAQ,CAAC,CAgBzB"}

package/dist/proposals.js

@@ -0,0 +1,56 @@
+import { streamText as u, Output as p, jsonSchema as h } from "@kanzo-tech/llm";
+const m = (e) => [
+  `Field: ${e.name || "(unnamed)"}`,
+  e.description && `Field description: ${e.description}`,
+  e.instructions && `Instructions: ${e.instructions}`,
+  e.context && `Form context:
+${e.context}`
+].filter(Boolean).join(`
+`), d = `You complete text inside a form field, like an editor's inline completion.
+Reply with ONLY the text to insert at <caret/>: no quotes, no commentary, never repeat text that is already there.
+Keep the language, tone and format of the existing text. Stop at a natural point: the end of the sentence for an automatic suggestion; up to a short paragraph when explicitly asked.`;
+function y(e, i, { value: t, position: o, trigger: s, avoid: r, signal: a }) {
+  const l = `${t.slice(0, o)}<caret/>${t.slice(o)}`, c = r.length ? `
+Offer something different from these earlier suggestions:
+${r.map((n) => `- ${n.trim()}`).join(`
+`)}` : "";
+  return u({
+    model: e,
+    system: d,
+    prompt: `${m(i)}
+Request: ${s}${c}
+
+Text:
+${l}`,
+    abortSignal: a
+  }).textStream;
+}
+const f = h({
+  type: "object",
+  properties: {
+    value: { type: "string", description: "The whole value, exactly as it would be entered." },
+    rationale: { type: "string", description: "Why it fits, in one short sentence." }
+  },
+  required: ["value", "rationale"],
+  additionalProperties: !1
+}), g = "You suggest values for a form field. Each value must be complete and ready to enter as-is, in the language of the form.";
+async function* x(e, i, { value: t, existing: o, signal: s, count: r, list: a }) {
+  const l = a ? `Current items: ${o.length ? o.join(", ") : "(none)"}
+Suggest NEW items, not already present.` : `Current value: ${t || "(empty)"}
+Suggest alternatives to replace it${t ? ", different from it" : ""}.`, c = u({
+    model: e,
+    system: g,
+    prompt: `${m(i)}
+${l}
+Give ${r}.`,
+    output: p.array({ element: f }),
+    abortSignal: s
+  });
+  for await (const n of c.elementStream)
+    yield a ? { text: n.value, rationale: n.rationale } : { text: n.value, rationale: n.rationale, range: [0, t.length] };
+}
+export {
+  x as candidates,
+  y as continuation
+};
+//# sourceMappingURL=proposals.js.map

package/dist/proposals.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"proposals.js","sources":["../src/proposals.ts"],"sourcesContent":["// What a field asks the model, written once. A host names the model and, at most, a sentence of\n// instructions; the field describes itself through its accessible name and description, which is\n// what a person filling it in reads too.\n\nimport { type LanguageModel, Output, jsonSchema, streamText } from \"@kanzo-tech/llm\";\nimport type { ContinuationRequest, Proposal } from \"./engine.js\";\n\n/** What the model is told about the field it is filling. */\nexport interface FieldBrief {\n  /** The accessible name — the label a person reads. */\n  name: string;\n  /** The accessible description — the helper text under it. */\n  description?: string;\n  /** The host's own instruction for this field (`<Assist instructions>`). */\n  instructions?: string;\n  /** What the rest of the form says (`<AssistProvider context>`). */\n  context?: string;\n}\n\nconst brief = (field: FieldBrief) =>\n  [\n    `Field: ${field.name || \"(unnamed)\"}`,\n    field.description && `Field description: ${field.description}`,\n    field.instructions && `Instructions: ${field.instructions}`,\n    field.context && `Form context:\\n${field.context}`,\n  ]\n    .filter(Boolean)\n    .join(\"\\n\");\n\nconst CONTINUE = `You complete text inside a form field, like an editor's inline completion.\nReply with ONLY the text to insert at <caret/>: no quotes, no commentary, never repeat text that is already there.\nKeep the language, tone and format of the existing text. Stop at a natural point: the end of the sentence for an automatic suggestion; up to a short paragraph when explicitly asked.`;\n\n/** One continuation at the caret, streamed. */\nexport function continuation(\n  model: LanguageModel,\n  field: FieldBrief,\n  { value, position, trigger, avoid, signal }: ContinuationRequest,\n): AsyncIterable<string> {\n  const text = `${value.slice(0, position)}<caret/>${value.slice(position)}`;\n  const differ = avoid.length\n    ? `\\nOffer something different from these earlier suggestions:\\n${avoid.map((a) => `- ${a.trim()}`).join(\"\\n\")}`\n    : \"\";\n  return streamText({\n    model,\n    system: CONTINUE,\n    prompt: `${brief(field)}\\nRequest: ${trigger}${differ}\\n\\nText:\\n${text}`,\n    abortSignal: signal,\n  }).textStream;\n}\n\nconst CANDIDATE = jsonSchema<{ value: string; rationale: string }>({\n  type: \"object\",\n  properties: {\n    value: { type: \"string\", description: \"The whole value, exactly as it would be entered.\" },\n    rationale: { type: \"string\", description: \"Why it fits, in one short sentence.\" },\n  },\n  required: [\"value\", \"rationale\"],\n  additionalProperties: false,\n});\n\nconst CANDIDATES = `You suggest values for a form field. Each value must be complete and ready to enter as-is, in the language of the form.`;\n\n/**\n * Whole values for the field, each arriving as soon as it is complete (`elementStream`), so the\n * first candidate is on screen while the model writes the rest.\n */\nexport async function* candidates(\n  model: LanguageModel,\n  field: FieldBrief,\n  { value, existing, signal, count, list }: {\n    value: string;\n    existing: string[];\n    signal: AbortSignal;\n    count: number;\n    /** The field holds a list (tags): a candidate is one more item, not a replacement. */\n    list: boolean;\n  },\n): AsyncIterable<Proposal> {\n  const holds = list\n    ? `Current items: ${existing.length ? existing.join(\", \") : \"(none)\"}\\nSuggest NEW items, not already present.`\n    : `Current value: ${value || \"(empty)\"}\\nSuggest alternatives to replace it${value ? \", different from it\" : \"\"}.`;\n  const result = streamText({\n    model,\n    system: CANDIDATES,\n    prompt: `${brief(field)}\\n${holds}\\nGive ${count}.`,\n    output: Output.array({ element: CANDIDATE }),\n    abortSignal: signal,\n  });\n  for await (const item of result.elementStream) {\n    yield list\n      ? { text: item.value, rationale: item.rationale }\n      : { text: item.value, rationale: item.rationale, range: [0, value.length] };\n  }\n}\n"],"names":["brief","field","CONTINUE","continuation","model","value","position","trigger","avoid","signal","text","differ","a","streamText","CANDIDATE","jsonSchema","CANDIDATES","candidates","existing","count","list","holds","result","Output","item"],"mappings":";AAmBA,MAAMA,IAAQ,CAACC,MACb;AAAA,EACE,UAAUA,EAAM,QAAQ,WAAW;AAAA,EACnCA,EAAM,eAAe,sBAAsBA,EAAM,WAAW;AAAA,EAC5DA,EAAM,gBAAgB,iBAAiBA,EAAM,YAAY;AAAA,EACzDA,EAAM,WAAW;AAAA,EAAkBA,EAAM,OAAO;AAClD,EACG,OAAO,OAAO,EACd,KAAK;AAAA,CAAI,GAERC,IAAW;AAAA;AAAA;AAKV,SAASC,EACdC,GACAH,GACA,EAAE,OAAAI,GAAO,UAAAC,GAAU,SAAAC,GAAS,OAAAC,GAAO,QAAAC,KACZ;AACvB,QAAMC,IAAO,GAAGL,EAAM,MAAM,GAAGC,CAAQ,CAAC,WAAWD,EAAM,MAAMC,CAAQ,CAAC,IAClEK,IAASH,EAAM,SACjB;AAAA;AAAA,EAAgEA,EAAM,IAAI,CAACI,MAAM,KAAKA,EAAE,KAAA,CAAM,EAAE,EAAE,KAAK;AAAA,CAAI,CAAC,KAC5G;AACJ,SAAOC,EAAW;AAAA,IAChB,OAAAT;AAAA,IACA,QAAQF;AAAA,IACR,QAAQ,GAAGF,EAAMC,CAAK,CAAC;AAAA,WAAcM,CAAO,GAAGI,CAAM;AAAA;AAAA;AAAA,EAAcD,CAAI;AAAA,IACvE,aAAaD;AAAA,EAAA,CACd,EAAE;AACL;AAEA,MAAMK,IAAYC,EAAiD;AAAA,EACjE,MAAM;AAAA,EACN,YAAY;AAAA,IACV,OAAO,EAAE,MAAM,UAAU,aAAa,mDAAA;AAAA,IACtC,WAAW,EAAE,MAAM,UAAU,aAAa,sCAAA;AAAA,EAAsC;AAAA,EAElF,UAAU,CAAC,SAAS,WAAW;AAAA,EAC/B,sBAAsB;AACxB,CAAC,GAEKC,IAAa;AAMnB,gBAAuBC,EACrBb,GACAH,GACA,EAAE,OAAAI,GAAO,UAAAa,GAAU,QAAAT,GAAQ,OAAAU,GAAO,MAAAC,KAQT;AACzB,QAAMC,IAAQD,IACV,kBAAkBF,EAAS,SAASA,EAAS,KAAK,IAAI,IAAI,QAAQ;AAAA,2CAClE,kBAAkBb,KAAS,SAAS;AAAA,oCAAuCA,IAAQ,wBAAwB,EAAE,KAC3GiB,IAAST,EAAW;AAAA,IACxB,OAAAT;AAAA,IACA,QAAQY;AAAA,IACR,QAAQ,GAAGhB,EAAMC,CAAK,CAAC;AAAA,EAAKoB,CAAK;AAAA,OAAUF,CAAK;AAAA,IAChD,QAAQI,EAAO,MAAM,EAAE,SAAST,GAAW;AAAA,IAC3C,aAAaL;AAAA,EAAA,CACd;AACD,mBAAiBe,KAAQF,EAAO;AAC9B,UAAMF,IACF,EAAE,MAAMI,EAAK,OAAO,WAAWA,EAAK,cACpC,EAAE,MAAMA,EAAK,OAAO,WAAWA,EAAK,WAAW,OAAO,CAAC,GAAGnB,EAAM,MAAM,EAAA;AAE9E;"}

package/dist/reasoning.d.ts

@@ -1,8 +1,9 @@
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@kanzo-tech/ui';
+import { ReasoningUIPart } from '@kanzo-tech/llm';
 import * as React from "react";
-export interface ReasoningProps extends React.ComponentProps<typeof Collapsible> {
-    /** The model is still thinking. */
-    streaming?: boolean;
+export interface ReasoningProps extends Omit<React.ComponentProps<typeof Collapsible>, "part"> {
+    /** The reasoning as the AI SDK streams it: its text, and whether it is still arriving. */
+    part: ReasoningUIPart;
 }
 /**
  * A model's thinking, folded away.

package/dist/reasoning.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../src/reasoning.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,WAAW,EACX,kBAAkB,EAElB,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AAexB,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC;IAC9E,mCAAmC;IACnC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAmE9C,CAAC;AAkBF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAwBtF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAiBtF,CAAC"}
+{"version":3,"file":"reasoning.d.ts","sourceRoot":"","sources":["../src/reasoning.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAEL,WAAW,EACX,kBAAkB,EAElB,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAgBvD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,EAAE,MAAM,CAAC;IAC5F,0FAA0F;IAC1F,IAAI,EAAE,eAAe,CAAC;CACvB;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAyE9C,CAAC;AAkBF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAwBtF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,gBAAgB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAoBtF,CAAC"}