@kanzo-tech/ai 0.1.0 → 0.2.0

package/dist/conversation.d.ts

@@ -30,9 +30,14 @@ export declare const ConversationEmpty: (props: React.ComponentProps<typeof ark.
  * Present only while the pin is released, and pressing it takes the pin back.
  *
  * It floats *over* a transcript that is still growing underneath it, which is why it enters rather
- * than appears and why it paints its own ground: `variant="outline"` is `bg-transparent` in light
- * mode, so without `bg-background` the message it covers reads straight through it. Dark keeps the
- * variant's own `bg-field`.
+ * than appears and why it paints its own ground: `variant="outline"` sets `--btn-bg: transparent`,
+ * so without a ground of its own the message it covers reads straight through it.
+ *
+ * It asks for that ground by **moving the variable**, not by writing `bg-background` on top. The
+ * two look identical at rest and diverge the moment you hover: the wash is
+ * `color-mix(…, var(--btn-bg), …)`, so a `bg-background` that only overrode the resting fill left
+ * the hover mixing from `transparent` and the transcript showed through the button exactly when the
+ * pointer was on it. `--btn-bg` is the seam the recipe documents; this is what it is for.
  */
 export declare const ConversationScrollButton: (props: React.ComponentProps<typeof Button>) => React.JSX.Element | null;
 //# sourceMappingURL=conversation.d.ts.map

package/dist/conversation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../src/conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAM,MAAM,gBAAgB,CAAC;AAmB5C;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAsDvE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBA0B9E,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAgB5E,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,wBAAwB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,6BAmClF,CAAC"}
+{"version":3,"file":"conversation.d.ts","sourceRoot":"","sources":["../src/conversation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAM,MAAM,gBAAgB,CAAC;AAmB5C;;;;;;;;;GASG;AACH,eAAO,MAAM,YAAY,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAsDvE,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBA0B9E,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAgB5E,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,wBAAwB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,6BAmClF,CAAC"}

package/dist/conversation.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as c } from "react/jsx-runtime";
 import { ark as f } from "@ark-ui/react/factory";
-import { ArrowDownIcon as R } from "lucide-react";
+import { ArrowDownIcon as E } from "lucide-react";
 import * as l from "react";
-import { cn as m, Button as b } from "@kanzo-tech/ui";
+import { cn as m, Button as R } from "@kanzo-tech/ui";
 const w = l.createContext(null), h = (n) => {
   const e = l.useContext(w);
   if (!e) throw new Error(`${n} must render inside <Conversation>`);
@@ -19,9 +19,9 @@ const w = l.createContext(null), h = (n) => {
       d.current = p, x(p);
     };
     v(), t.addEventListener("scroll", v, { passive: !0 });
-    const E = () => {
+    const b = () => {
       d.current && (t.scrollTop = t.scrollHeight);
-    }, r = typeof ResizeObserver > "u" ? null : new ResizeObserver(E);
+    }, r = typeof ResizeObserver > "u" ? null : new ResizeObserver(b);
     return r == null || r.observe(t), i && (r == null || r.observe(i)), () => {
       t.removeEventListener("scroll", v), r == null || r.disconnect();
     };
@@ -83,7 +83,7 @@ const w = l.createContext(null), h = (n) => {
 }, j = (n) => {
   const { className: e, children: o, onClick: s, slot: a, ...t } = n, u = h("ConversationScrollButton");
   return u.pinned ? null : /* @__PURE__ */ c(
-    b,
+    R,
     {
       "aria-label": o === void 0 ? "Scroll to the latest message" : void 0,
       className: m(
@@ -92,7 +92,7 @@ const w = l.createContext(null), h = (n) => {
         // The icon size states its own — `w-(--size)`, square — and a `w-fit` here would win the
         // merge and hand it the icon's width against the control's height.
         o === void 0 ? void 0 : "w-fit",
-        "bg-background shadow-lg/5",
+        "[--btn-bg:var(--background)] shadow-lg/5",
         "fade-in-0 zoom-in-95 slide-in-from-bottom-2 animate-in",
         "motion-reduce:animate-none!",
         e
@@ -105,7 +105,7 @@ const w = l.createContext(null), h = (n) => {
       variant: "outline",
       ...t,
       slot: a ?? "conversation-scroll-button",
-      children: o ?? /* @__PURE__ */ c(R, {})
+      children: o ?? /* @__PURE__ */ c(E, {})
     }
   );
 };

package/dist/conversation.js.map

@@ -1 +1 @@
-{"version":3,"file":"conversation.js","sources":["../src/conversation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { ArrowDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button, cn } from \"@kanzo-tech/ui\";\n\ninterface ConversationCtx {\n  viewportRef: (el: HTMLDivElement | null) => void;\n  contentRef: (el: HTMLDivElement | null) => void;\n  pinned: boolean;\n  scrollToEnd: () => void;\n}\n\nconst Ctx = React.createContext<ConversationCtx | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <Conversation>`);\n  return c;\n};\n\n/** A scroll position is fractional and rarely lands on the end exactly; this is the allowance. */\nconst AT_END = 24;\n\n/**\n * The transcript's scroll container, and the pin is the whole component.\n *\n * **The naive version, which both real consumers wrote:** an effect on the message array calling\n * `scrollTo({ top: scrollHeight, behavior: \"smooth\" })`. It follows the tail unconditionally, so a\n * reader who scrolled up to re-read something is dragged back down by the next token, every token,\n * for as long as the answer is streaming. Following is only correct while the reader is *already*\n * at the tail: scrolling up releases the pin, and `ConversationScrollButton` is how they take it\n * back. Roughly forty lines of listener and observer, and no dependency.\n */\nexport const Conversation = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n  const [viewport, setViewport] = React.useState<HTMLDivElement | null>(null);\n  const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n  const [pinned, setPinned] = React.useState(true);\n  const pinnedRef = React.useRef(true);\n\n  const scrollToEnd = React.useCallback(() => {\n    if (!viewport) return;\n    pinnedRef.current = true;\n    setPinned(true);\n    viewport.scrollTop = viewport.scrollHeight;\n  }, [viewport]);\n\n  React.useEffect(() => {\n    if (!viewport) return;\n\n    const sync = () => {\n      const atEnd = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <= AT_END;\n      pinnedRef.current = atEnd;\n      setPinned(atEnd);\n    };\n    sync();\n    viewport.addEventListener(\"scroll\", sync, { passive: true });\n\n    // A stream produces *growth*, not scrolling: the content gets taller under a stationary\n    // `scrollTop`, and no scroll event is fired for that. Observing the viewport alone never sees\n    // it either — its own box did not change — which is why the inner element is observed too.\n    const follow = () => {\n      if (pinnedRef.current) viewport.scrollTop = viewport.scrollHeight;\n    };\n    const observer = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(follow);\n    observer?.observe(viewport);\n    if (content) observer?.observe(content);\n\n    return () => {\n      viewport.removeEventListener(\"scroll\", sync);\n      observer?.disconnect();\n    };\n  }, [viewport, content]);\n\n  return (\n    <Ctx.Provider\n      value={{ viewportRef: setViewport, contentRef: setContent, pinned, scrollToEnd }}\n    >\n      <ark.div\n        className={cn(\"relative flex min-h-0 flex-1 flex-col\", className)}\n        {...rest}\n        data-slot={slot ?? \"conversation\"}\n      >\n        {children}\n      </ark.div>\n    </Ctx.Provider>\n  );\n};\n\n/**\n * The scrolling region.\n *\n * ARIA: `role=\"log\"` carries an implicit `aria-live=\"polite\"`, so a message appended while the\n * reader is somewhere else is announced after what they are on rather than over it. Nothing inside\n * declares a role — a message is content, not a widget — so there is no keyboard contract to owe.\n */\nexport const ConversationContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n  const ctx = useCtx(\"ConversationContent\");\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain\",\n        \"px-4 py-6\",\n        className\n      )}\n      ref={ctx.viewportRef}\n      role=\"log\"\n      {...rest}\n      data-slot={slot ?? \"conversation-content\"}\n    >\n      {/* `flex-1` gives the inner element the viewport's height when the transcript is short, which\n          is what lets `ConversationEmpty` centre itself in the panel rather than sit at the top. */}\n      <ark.div\n        className=\"mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6\"\n        ref={ctx.contentRef}\n      >\n        {children}\n      </ark.div>\n    </ark.div>\n  );\n};\n\n/**\n * The stage for the zero state, not the zero state itself: a centred column with a reading measure,\n * which `Item` and its parts are then composed into. There is deliberately no `title` / `description`\n * / `icon` prop — `EmptyState` was exactly that and it is a tombstone in `@kanzo-tech/ui`.\n */\nexport const ConversationEmpty = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-1 flex-col items-center justify-center gap-3\",\n        \"mx-auto max-w-md px-4 py-12\",\n        \"text-balance text-center text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"conversation-empty\"}\n    />\n  );\n};\n\n/**\n * Present only while the pin is released, and pressing it takes the pin back.\n *\n * It floats *over* a transcript that is still growing underneath it, which is why it enters rather\n * than appears and why it paints its own ground: `variant=\"outline\"` is `bg-transparent` in light\n * mode, so without `bg-background` the message it covers reads straight through it. Dark keeps the\n * variant's own `bg-field`.\n */\nexport const ConversationScrollButton = (props: React.ComponentProps<typeof Button>) => {\n  const { className, children, onClick, slot, ...rest } = props;\n  const ctx = useCtx(\"ConversationScrollButton\");\n\n  if (ctx.pinned) return null;\n\n  return (\n    <Button\n      aria-label={children === undefined ? \"Scroll to the latest message\" : undefined}\n      className={cn(\n        \"absolute inset-x-0 bottom-4 z-10 mx-auto\",\n        // `inset-x-0` is what centres it, and it also stretches it, so the width has to be stated.\n        // The icon size states its own — `w-(--size)`, square — and a `w-fit` here would win the\n        // merge and hand it the icon's width against the control's height.\n        children === undefined ? undefined : \"w-fit\",\n        \"bg-background shadow-lg/5\",\n        \"fade-in-0 zoom-in-95 slide-in-from-bottom-2 animate-in\",\n        \"motion-reduce:animate-none!\",\n        className\n      )}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) ctx.scrollToEnd();\n      }}\n      pill\n      // Icon-only by default; give it words and it becomes a pill wide enough to hold them, the way\n      // `PromptInputSubmit` does.\n      size={children === undefined ? \"icon-sm\" : \"sm\"}\n      variant=\"outline\"\n      {...rest}\n      slot={slot ?? \"conversation-scroll-button\"}\n    >\n      {children ?? <ArrowDownIcon />}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcA;AAEE;AACA;AACA;AACF;AAgBE;AAOE;AAG8B;AAGhC;AACE;AAEA;AACE;AACA;AACe;AAEjB;AAMA;AACE;AAAqD;AAGvD;AAIE;AACU;AACZ;AAIA;AAAK;AAAJ;AACoE;AAEnE;AAAK;AAAJ;AACiE;AAC5D;AACe;AAElB;AAAA;AAAA;AACH;AAGN;AAUE;AAGA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AAAA;AAEO;AACJ;AACD;AACe;AAInB;AAAK;AAAJ;AACW;AACD;AAER;AAAA;AAAA;AACH;AAGN;AAQE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAWE;AAGA;AAGE;AAAC;AAAA;AACuE;AAC3D;AACT;AAAA;AAAA;AAAA;AAIqC;AACrC;AACA;AACA;AACA;AAAA;AAGA;AACiC;AACnC;AACI;AAGuC;AACnC;AACJ;AACU;AAEc;AAAA;AAGlC;;;;;;;"}
+{"version":3,"file":"conversation.js","sources":["../src/conversation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { ArrowDownIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { Button, cn } from \"@kanzo-tech/ui\";\n\ninterface ConversationCtx {\n  viewportRef: (el: HTMLDivElement | null) => void;\n  contentRef: (el: HTMLDivElement | null) => void;\n  pinned: boolean;\n  scrollToEnd: () => void;\n}\n\nconst Ctx = React.createContext<ConversationCtx | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <Conversation>`);\n  return c;\n};\n\n/** A scroll position is fractional and rarely lands on the end exactly; this is the allowance. */\nconst AT_END = 24;\n\n/**\n * The transcript's scroll container, and the pin is the whole component.\n *\n * **The naive version, which both real consumers wrote:** an effect on the message array calling\n * `scrollTo({ top: scrollHeight, behavior: \"smooth\" })`. It follows the tail unconditionally, so a\n * reader who scrolled up to re-read something is dragged back down by the next token, every token,\n * for as long as the answer is streaming. Following is only correct while the reader is *already*\n * at the tail: scrolling up releases the pin, and `ConversationScrollButton` is how they take it\n * back. Roughly forty lines of listener and observer, and no dependency.\n */\nexport const Conversation = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n  const [viewport, setViewport] = React.useState<HTMLDivElement | null>(null);\n  const [content, setContent] = React.useState<HTMLDivElement | null>(null);\n  const [pinned, setPinned] = React.useState(true);\n  const pinnedRef = React.useRef(true);\n\n  const scrollToEnd = React.useCallback(() => {\n    if (!viewport) return;\n    pinnedRef.current = true;\n    setPinned(true);\n    viewport.scrollTop = viewport.scrollHeight;\n  }, [viewport]);\n\n  React.useEffect(() => {\n    if (!viewport) return;\n\n    const sync = () => {\n      const atEnd = viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight <= AT_END;\n      pinnedRef.current = atEnd;\n      setPinned(atEnd);\n    };\n    sync();\n    viewport.addEventListener(\"scroll\", sync, { passive: true });\n\n    // A stream produces *growth*, not scrolling: the content gets taller under a stationary\n    // `scrollTop`, and no scroll event is fired for that. Observing the viewport alone never sees\n    // it either — its own box did not change — which is why the inner element is observed too.\n    const follow = () => {\n      if (pinnedRef.current) viewport.scrollTop = viewport.scrollHeight;\n    };\n    const observer = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(follow);\n    observer?.observe(viewport);\n    if (content) observer?.observe(content);\n\n    return () => {\n      viewport.removeEventListener(\"scroll\", sync);\n      observer?.disconnect();\n    };\n  }, [viewport, content]);\n\n  return (\n    <Ctx.Provider\n      value={{ viewportRef: setViewport, contentRef: setContent, pinned, scrollToEnd }}\n    >\n      <ark.div\n        className={cn(\"relative flex min-h-0 flex-1 flex-col\", className)}\n        {...rest}\n        data-slot={slot ?? \"conversation\"}\n      >\n        {children}\n      </ark.div>\n    </Ctx.Provider>\n  );\n};\n\n/**\n * The scrolling region.\n *\n * ARIA: `role=\"log\"` carries an implicit `aria-live=\"polite\"`, so a message appended while the\n * reader is somewhere else is announced after what they are on rather than over it. Nothing inside\n * declares a role — a message is content, not a widget — so there is no keyboard contract to owe.\n */\nexport const ConversationContent = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, children, slot, ...rest } = props;\n  const ctx = useCtx(\"ConversationContent\");\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain\",\n        \"px-4 py-6\",\n        className\n      )}\n      ref={ctx.viewportRef}\n      role=\"log\"\n      {...rest}\n      data-slot={slot ?? \"conversation-content\"}\n    >\n      {/* `flex-1` gives the inner element the viewport's height when the transcript is short, which\n          is what lets `ConversationEmpty` centre itself in the panel rather than sit at the top. */}\n      <ark.div\n        className=\"mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6\"\n        ref={ctx.contentRef}\n      >\n        {children}\n      </ark.div>\n    </ark.div>\n  );\n};\n\n/**\n * The stage for the zero state, not the zero state itself: a centred column with a reading measure,\n * which `Item` and its parts are then composed into. There is deliberately no `title` / `description`\n * / `icon` prop — `EmptyState` was exactly that and it is a tombstone in `@kanzo-tech/ui`.\n */\nexport const ConversationEmpty = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\n        \"flex flex-1 flex-col items-center justify-center gap-3\",\n        \"mx-auto max-w-md px-4 py-12\",\n        \"text-balance text-center text-muted-foreground text-sm\",\n        \"[&_svg:not([class*='size-'])]:size-6\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"conversation-empty\"}\n    />\n  );\n};\n\n/**\n * Present only while the pin is released, and pressing it takes the pin back.\n *\n * It floats *over* a transcript that is still growing underneath it, which is why it enters rather\n * than appears and why it paints its own ground: `variant=\"outline\"` sets `--btn-bg: transparent`,\n * so without a ground of its own the message it covers reads straight through it.\n *\n * It asks for that ground by **moving the variable**, not by writing `bg-background` on top. The\n * two look identical at rest and diverge the moment you hover: the wash is\n * `color-mix(…, var(--btn-bg), …)`, so a `bg-background` that only overrode the resting fill left\n * the hover mixing from `transparent` and the transcript showed through the button exactly when the\n * pointer was on it. `--btn-bg` is the seam the recipe documents; this is what it is for.\n */\nexport const ConversationScrollButton = (props: React.ComponentProps<typeof Button>) => {\n  const { className, children, onClick, slot, ...rest } = props;\n  const ctx = useCtx(\"ConversationScrollButton\");\n\n  if (ctx.pinned) return null;\n\n  return (\n    <Button\n      aria-label={children === undefined ? \"Scroll to the latest message\" : undefined}\n      className={cn(\n        \"absolute inset-x-0 bottom-4 z-10 mx-auto\",\n        // `inset-x-0` is what centres it, and it also stretches it, so the width has to be stated.\n        // The icon size states its own — `w-(--size)`, square — and a `w-fit` here would win the\n        // merge and hand it the icon's width against the control's height.\n        children === undefined ? undefined : \"w-fit\",\n        \"[--btn-bg:var(--background)] shadow-lg/5\",\n        \"fade-in-0 zoom-in-95 slide-in-from-bottom-2 animate-in\",\n        \"motion-reduce:animate-none!\",\n        className\n      )}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) ctx.scrollToEnd();\n      }}\n      pill\n      // Icon-only by default; give it words and it becomes a pill wide enough to hold them, the way\n      // `PromptInputSubmit` does.\n      size={children === undefined ? \"icon-sm\" : \"sm\"}\n      variant=\"outline\"\n      {...rest}\n      slot={slot ?? \"conversation-scroll-button\"}\n    >\n      {children ?? <ArrowDownIcon />}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcA;AAEE;AACA;AACA;AACF;AAgBE;AAOE;AAG8B;AAGhC;AACE;AAEA;AACE;AACA;AACe;AAEjB;AAMA;AACE;AAAqD;AAGvD;AAIE;AACU;AACZ;AAIA;AAAK;AAAJ;AACoE;AAEnE;AAAK;AAAJ;AACiE;AAC5D;AACe;AAElB;AAAA;AAAA;AACH;AAGN;AAUE;AAGA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AAAA;AAEO;AACJ;AACD;AACe;AAInB;AAAK;AAAJ;AACW;AACD;AAER;AAAA;AAAA;AACH;AAGN;AAQE;AAEA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AACA;AAAA;AAEE;AACe;AAAA;AAGzB;AAgBE;AAGA;AAGE;AAAC;AAAA;AACuE;AAC3D;AACT;AAAA;AAAA;AAAA;AAIqC;AACrC;AACA;AACA;AACA;AAAA;AAGA;AACiC;AACnC;AACI;AAGuC;AACnC;AACJ;AACU;AAEc;AAAA;AAGlC;;;;;;;"}

package/dist/styles.css

@@ -1,2 +1,2 @@
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
-@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-content:""}}}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-x-0{inset-inline:0}.bottom-4{bottom:calc(var(--spacing,.25rem) * 4)}.z-10{z-index:10}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.-ms-1\.5{margin-inline-start:calc(var(--spacing,.25rem) * -1.5)}.ms-0\.5{margin-inline-start:calc(var(--spacing,.25rem) * .5)}.ms-2\.5{margin-inline-start:calc(var(--spacing,.25rem) * 2.5)}.ms-auto{margin-inline-start:auto}.mt-1{margin-top:var(--spacing,.25rem)}.mt-1\.5{margin-top:calc(var(--spacing,.25rem) * 1.5)}.mb-1\.5{margin-bottom:calc(var(--spacing,.25rem) * 1.5)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.field-sizing-content{field-sizing:content}.size-2\.5{width:calc(var(--spacing,.25rem) * 2.5);height:calc(var(--spacing,.25rem) * 2.5)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.h-5{height:calc(var(--spacing,.25rem) * 5)}.h-\[1em\]{height:1em}.h-auto{height:auto}.max-h-48{max-height:calc(var(--spacing,.25rem) * 48)}.min-h-0{min-height:0}.min-h-8{min-height:calc(var(--spacing,.25rem) * 8)}.min-h-16{min-height:calc(var(--spacing,.25rem) * 16)}.min-h-\[24px\]{min-height:24px}.w-\(--size\){width:var(--size)}.w-\[0\.5ch\]{width:.5ch}.w-fit{width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl,48rem)}.max-w-md{max-width:var(--container-md,28rem)}.min-w-0{min-width:0}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-full{flex-basis:100%}.animate-arrive{animation:.15s both arrive}.animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.cursor-text{cursor:text}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-2\.5{gap:calc(var(--spacing,.25rem) * 2.5)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:calc(var(--radius-field,.5rem) * 1)}.rounded-md{border-radius:calc(var(--radius-field,.5rem) * .75)}.rounded-xl{border-radius:calc(var(--radius-field,.5rem) * 1.5)}.border{border-style:var(--tw-border-style);border-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-border{border-color:var(--border)}.border-destructive\/30{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/30{border-color:color-mix(in oklab, var(--destructive) 30%, transparent)}}.border-primary{border-color:var(--primary)}.bg-background{background-color:var(--background)}.bg-card{background-color:var(--card)}.bg-current{background-color:currentColor}.bg-destructive\/7{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/7{background-color:color-mix(in oklab, var(--destructive) 7%, transparent)}}.bg-field{background-color:var(--field,var(--muted))}.bg-muted,.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.bg-primary\/17{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/17{background-color:color-mix(in oklab, var(--primary) 17%, transparent)}}.bg-transparent{background-color:#0000}.\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%-0\.9lh\)\,transparent\)\]{-webkit-mask-image:linear-gradient(#000 calc(100% - .9lh),#0000);mask-image:linear-gradient(#000 calc(100% - .9lh),#0000)}.px-1\.5{padding-inline:calc(var(--spacing,.25rem) * 1.5)}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.py-1{padding-block:var(--spacing,.25rem)}.py-2{padding-block:calc(var(--spacing,.25rem) * 2)}.py-2\.5{padding-block:calc(var(--spacing,.25rem) * 2.5)}.py-3{padding-block:calc(var(--spacing,.25rem) * 3)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.py-12{padding-block:calc(var(--spacing,.25rem) * 12)}.ps-3\.5{padding-inline-start:calc(var(--spacing,.25rem) * 3.5)}.text-center{text-align:center}.text-start{text-align:start}.align-\[-0\.1em\]{vertical-align:-.1em}.font-mono{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, monospace)}.text-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.text-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.leading-5{--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.tracking-wide{--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-destructive-foreground{color:var(--destructive-foreground,var(--destructive))}.text-faint{color:var(--faint,var(--muted-foreground))}.text-info-foreground{color:var(--info-foreground,var(--info))}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-success-foreground{color:var(--success-foreground,var(--success))}.text-transparent{color:#0000}.uppercase{text-transform:uppercase}.opacity-0{opacity:0}.opacity-64{opacity:.64}.shadow-lg\/5{--tw-shadow-alpha:5%;--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,oklab(0% 0 0/.05)), 0 4px 6px -4px var(--tw-shadow-color,oklab(0% 0 0/.05));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs\/5{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,oklab(0% 0 0/.05));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *){opacity:1}@media (hover:hover){.group-hover\/message\:opacity-100:is(:where(.group\/message):hover *){opacity:1}}.group-data-streaming\/reasoning\:border-info:is(:where(.group\/reasoning)[data-streaming] *){border-color:var(--info)}.group-data-streaming\/reasoning\:text-info-foreground:is(:where(.group\/reasoning)[data-streaming] *){color:var(--info-foreground,var(--info))}.group-data-\[role\=system\]\/message\:hidden:is(:where(.group\/message)[data-role=system] *){display:none}.group-data-\[role\=user\]\/message\:max-w-\[85\%\]:is(:where(.group\/message)[data-role=user] *){max-width:85%}.group-data-\[role\=user\]\/message\:flex-none:is(:where(.group\/message)[data-role=user] *){flex:none}.group-data-\[role\=user\]\/message\:justify-end:is(:where(.group\/message)[data-role=user] *){justify-content:flex-end}.group-data-\[role\=user\]\/message\:rounded-xl:is(:where(.group\/message)[data-role=user] *){border-radius:calc(var(--radius-field,.5rem) * 1.5)}.group-data-\[role\=user\]\/message\:bg-secondary:is(:where(.group\/message)[data-role=user] *){background-color:var(--secondary)}.group-data-\[role\=user\]\/message\:px-3\.5:is(:where(.group\/message)[data-role=user] *){padding-inline:calc(var(--spacing,.25rem) * 3.5)}.group-data-\[role\=user\]\/message\:py-2\.5:is(:where(.group\/message)[data-role=user] *){padding-block:calc(var(--spacing,.25rem) * 2.5)}.group-data-\[role\=user\]\/message\:text-secondary-foreground:is(:where(.group\/message)[data-role=user] *){color:var(--secondary-foreground,var(--foreground))}.group-data-\[state\=failed\]\/task\:text-destructive-foreground:is(:where(.group\/task)[data-state=failed] *){color:var(--destructive-foreground,var(--destructive))}.group-data-\[state\=failed\]\/tool\:bg-destructive\/7:is(:where(.group\/tool)[data-state=failed] *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.group-data-\[state\=failed\]\/tool\:bg-destructive\/7:is(:where(.group\/tool)[data-state=failed] *){background-color:color-mix(in oklab, var(--destructive) 7%, transparent)}}.group-data-\[state\=failed\]\/tool\:text-destructive-foreground:is(:where(.group\/tool)[data-state=failed] *){color:var(--destructive-foreground,var(--destructive))}.group-data-\[state\=pending\]\/task\:text-muted-foreground:is(:where(.group\/task)[data-state=pending] *){color:var(--muted-foreground)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:start-2\.5:after{content:var(--tw-content);inset-inline-start:calc(var(--spacing,.25rem) * 2.5)}.after\:top-5:after{content:var(--tw-content);top:calc(var(--spacing,.25rem) * 5)}.after\:-bottom-2:after{content:var(--tw-content);bottom:calc(var(--spacing,.25rem) * -2)}.after\:w-px:after{content:var(--tw-content);width:1px}.after\:bg-border:after{content:var(--tw-content);background-color:var(--border)}.last\:after\:hidden:last-child:after{content:var(--tw-content);display:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/14:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/14:hover{background-color:color-mix(in oklab, var(--destructive) 14%, transparent)}}.hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary:hover{color:var(--primary)}}.data-\[state\=open\]\:text-primary[data-state=open]{color:var(--primary)}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}.motion-reduce\:animate-none\!{animation:none!important}.motion-reduce\:transition-none\!{transition-property:none!important}}@media (pointer:coarse){.pointer-coarse\:opacity-100{opacity:1}}.\[\&_code\]\:font-mono code{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, monospace)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}}
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-content:""}}}.pointer-events-none{pointer-events:none}.collapse{visibility:collapse}.invisible{visibility:hidden}.visible{visibility:visible}.sr-only{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:0}.inset-x-0{inset-inline:0}.bottom-4{bottom:calc(var(--spacing,.25rem) * 4)}.z-10{z-index:10}.container{width:100%}@media (min-width:40rem){.container{max-width:40rem}}@media (min-width:48rem){.container{max-width:48rem}}@media (min-width:64rem){.container{max-width:64rem}}@media (min-width:80rem){.container{max-width:80rem}}@media (min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.-ms-1\.5{margin-inline-start:calc(var(--spacing,.25rem) * -1.5)}.ms-0\.5{margin-inline-start:calc(var(--spacing,.25rem) * .5)}.ms-2\.5{margin-inline-start:calc(var(--spacing,.25rem) * 2.5)}.ms-auto{margin-inline-start:auto}.mt-1{margin-top:var(--spacing,.25rem)}.mt-1\.5{margin-top:calc(var(--spacing,.25rem) * 1.5)}.mb-1\.5{margin-bottom:calc(var(--spacing,.25rem) * 1.5)}.block{display:block}.flex{display:flex}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.table{display:table}.field-sizing-content{field-sizing:content}.size-2\.5{width:calc(var(--spacing,.25rem) * 2.5);height:calc(var(--spacing,.25rem) * 2.5)}.size-3\.5{width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.size-4{width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.size-5{width:calc(var(--spacing,.25rem) * 5);height:calc(var(--spacing,.25rem) * 5)}.h-5{height:calc(var(--spacing,.25rem) * 5)}.h-\[1em\]{height:1em}.h-auto{height:auto}.max-h-48{max-height:calc(var(--spacing,.25rem) * 48)}.min-h-0{min-height:0}.min-h-8{min-height:calc(var(--spacing,.25rem) * 8)}.min-h-16{min-height:calc(var(--spacing,.25rem) * 16)}.min-h-\[24px\]{min-height:24px}.w-\(--size\){width:var(--size)}.w-\[0\.5ch\]{width:.5ch}.w-fit{width:fit-content}.w-full{width:100%}.max-w-3xl{max-width:var(--container-3xl,48rem)}.max-w-md{max-width:var(--container-md,28rem)}.min-w-0{min-width:0}.flex-1{flex:1}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-full{flex-basis:100%}.animate-arrive{animation:.15s both arrive}.animate-pulse{animation:var(--animate-pulse,pulse 2s cubic-bezier(.4, 0, .6, 1) infinite)}.cursor-text{cursor:text}.list-none{list-style-type:none}.flex-col{flex-direction:column}.flex-row-reverse{flex-direction:row-reverse}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-center{justify-content:center}.justify-end{justify-content:flex-end}.gap-1{gap:var(--spacing,.25rem)}.gap-1\.5{gap:calc(var(--spacing,.25rem) * 1.5)}.gap-2{gap:calc(var(--spacing,.25rem) * 2)}.gap-2\.5{gap:calc(var(--spacing,.25rem) * 2.5)}.gap-3{gap:calc(var(--spacing,.25rem) * 3)}.gap-4{gap:calc(var(--spacing,.25rem) * 4)}.gap-6{gap:calc(var(--spacing,.25rem) * 6)}.self-stretch{align-self:stretch}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:calc(var(--radius-field,.5rem) * 1)}.rounded-md{border-radius:calc(var(--radius-field,.5rem) * .75)}.rounded-xl{border-radius:calc(var(--radius-field,.5rem) * 1.5)}.border{border-style:var(--tw-border-style);border-width:1px}.border-s{border-inline-start-style:var(--tw-border-style);border-inline-start-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-border{border-color:var(--border)}.border-destructive\/30{border-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.border-destructive\/30{border-color:color-mix(in oklab, var(--destructive) 30%, transparent)}}.border-primary{border-color:var(--primary)}.bg-background{background-color:var(--background)}.bg-card{background-color:var(--card)}.bg-current{background-color:currentColor}.bg-destructive\/7{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.bg-destructive\/7{background-color:color-mix(in oklab, var(--destructive) 7%, transparent)}}.bg-muted,.bg-muted\/50{background-color:var(--muted)}@supports (color:color-mix(in lab, red, red)){.bg-muted\/50{background-color:color-mix(in oklab, var(--muted) 50%, transparent)}}.bg-primary\/17{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.bg-primary\/17{background-color:color-mix(in oklab, var(--primary) 17%, transparent)}}.bg-transparent{background-color:#0000}.\[mask-image\:linear-gradient\(to_bottom\,\#000_calc\(100\%-0\.9lh\)\,transparent\)\]{-webkit-mask-image:linear-gradient(#000 calc(100% - .9lh),#0000);mask-image:linear-gradient(#000 calc(100% - .9lh),#0000)}.px-1\.5{padding-inline:calc(var(--spacing,.25rem) * 1.5)}.px-2{padding-inline:calc(var(--spacing,.25rem) * 2)}.px-3{padding-inline:calc(var(--spacing,.25rem) * 3)}.px-4{padding-inline:calc(var(--spacing,.25rem) * 4)}.py-1{padding-block:var(--spacing,.25rem)}.py-2{padding-block:calc(var(--spacing,.25rem) * 2)}.py-2\.5{padding-block:calc(var(--spacing,.25rem) * 2.5)}.py-3{padding-block:calc(var(--spacing,.25rem) * 3)}.py-6{padding-block:calc(var(--spacing,.25rem) * 6)}.py-12{padding-block:calc(var(--spacing,.25rem) * 12)}.ps-3\.5{padding-inline-start:calc(var(--spacing,.25rem) * 3.5)}.text-center{text-align:center}.text-start{text-align:start}.align-\[-0\.1em\]{vertical-align:-.1em}.font-mono{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, monospace)}.text-sm{font-size:var(--text-sm,.875rem);line-height:var(--tw-leading,var(--text-sm--line-height,calc(1.25 / .875)))}.text-xs{font-size:var(--text-xs,.75rem);line-height:var(--tw-leading,var(--text-xs--line-height,calc(1 / .75)))}.leading-5{--tw-leading:calc(var(--spacing,.25rem) * 5);line-height:calc(var(--spacing,.25rem) * 5)}.leading-relaxed{--tw-leading:var(--leading-relaxed,1.625);line-height:var(--leading-relaxed,1.625)}.font-medium{--tw-font-weight:var(--font-weight-medium,500);font-weight:var(--font-weight-medium,500)}.tracking-wide{--tw-tracking:var(--tracking-wide,.025em);letter-spacing:var(--tracking-wide,.025em)}.text-balance{text-wrap:balance}.break-words{overflow-wrap:break-word}.whitespace-nowrap{white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.text-destructive-foreground{color:var(--destructive-foreground,var(--destructive))}.text-faint{color:var(--faint,var(--muted-foreground))}.text-info-foreground{color:var(--info-foreground,var(--info))}.text-muted-foreground{color:var(--muted-foreground)}.text-primary{color:var(--primary)}.text-success-foreground{color:var(--success-foreground,var(--success))}.text-transparent{color:#0000}.uppercase{text-transform:uppercase}.opacity-0{opacity:0}.opacity-64{opacity:.64}.shadow-lg\/5{--tw-shadow-alpha:5%;--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,oklab(0% 0 0/.05)), 0 4px 6px -4px var(--tw-shadow-color,oklab(0% 0 0/.05));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-xs\/5{--tw-shadow-alpha:5%;--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,oklab(0% 0 0/.05));box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-none{--tw-shadow:0 0 #0000;box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-background{--tw-ring-color:var(--background)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.transition-opacity{transition-property:opacity;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function,cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration,var(--default-transition-duration,.15s))}.\[--btn-bg\:var\(--background\)\]{--btn-bg:var(--background)}.group-focus-within\/message\:opacity-100:is(:where(.group\/message):focus-within *){opacity:1}@media (hover:hover){.group-hover\/message\:opacity-100:is(:where(.group\/message):hover *){opacity:1}}.group-data-streaming\/reasoning\:border-info:is(:where(.group\/reasoning)[data-streaming] *){border-color:var(--info)}.group-data-streaming\/reasoning\:text-info-foreground:is(:where(.group\/reasoning)[data-streaming] *){color:var(--info-foreground,var(--info))}.group-data-\[role\=system\]\/message\:hidden:is(:where(.group\/message)[data-role=system] *){display:none}.group-data-\[role\=user\]\/message\:max-w-\[85\%\]:is(:where(.group\/message)[data-role=user] *){max-width:85%}.group-data-\[role\=user\]\/message\:flex-none:is(:where(.group\/message)[data-role=user] *){flex:none}.group-data-\[role\=user\]\/message\:justify-end:is(:where(.group\/message)[data-role=user] *){justify-content:flex-end}.group-data-\[role\=user\]\/message\:rounded-xl:is(:where(.group\/message)[data-role=user] *){border-radius:calc(var(--radius-field,.5rem) * 1.5)}.group-data-\[role\=user\]\/message\:bg-secondary:is(:where(.group\/message)[data-role=user] *){background-color:var(--secondary)}.group-data-\[role\=user\]\/message\:px-3\.5:is(:where(.group\/message)[data-role=user] *){padding-inline:calc(var(--spacing,.25rem) * 3.5)}.group-data-\[role\=user\]\/message\:py-2\.5:is(:where(.group\/message)[data-role=user] *){padding-block:calc(var(--spacing,.25rem) * 2.5)}.group-data-\[role\=user\]\/message\:text-secondary-foreground:is(:where(.group\/message)[data-role=user] *){color:var(--secondary-foreground,var(--foreground))}.group-data-\[state\=failed\]\/task\:text-destructive-foreground:is(:where(.group\/task)[data-state=failed] *){color:var(--destructive-foreground,var(--destructive))}.group-data-\[state\=failed\]\/tool\:bg-destructive\/7:is(:where(.group\/tool)[data-state=failed] *){background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.group-data-\[state\=failed\]\/tool\:bg-destructive\/7:is(:where(.group\/tool)[data-state=failed] *){background-color:color-mix(in oklab, var(--destructive) 7%, transparent)}}.group-data-\[state\=failed\]\/tool\:text-destructive-foreground:is(:where(.group\/tool)[data-state=failed] *){color:var(--destructive-foreground,var(--destructive))}.group-data-\[state\=pending\]\/task\:text-muted-foreground:is(:where(.group\/task)[data-state=pending] *){color:var(--muted-foreground)}.after\:absolute:after{content:var(--tw-content);position:absolute}.after\:start-2\.5:after{content:var(--tw-content);inset-inline-start:calc(var(--spacing,.25rem) * 2.5)}.after\:top-5:after{content:var(--tw-content);top:calc(var(--spacing,.25rem) * 5)}.after\:-bottom-2:after{content:var(--tw-content);bottom:calc(var(--spacing,.25rem) * -2)}.after\:w-px:after{content:var(--tw-content);width:1px}.after\:bg-border:after{content:var(--tw-content);background-color:var(--border)}.last\:after\:hidden:last-child:after{content:var(--tw-content);display:none}@media (hover:hover){.hover\:bg-accent:hover{background-color:var(--accent)}.hover\:bg-destructive\/14:hover{background-color:var(--destructive)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-destructive\/14:hover{background-color:color-mix(in oklab, var(--destructive) 14%, transparent)}}.hover\:bg-primary\/30:hover{background-color:var(--primary)}@supports (color:color-mix(in lab, red, red)){.hover\:bg-primary\/30:hover{background-color:color-mix(in oklab, var(--primary) 30%, transparent)}}.hover\:text-foreground:hover{color:var(--foreground)}.hover\:text-primary:hover{color:var(--primary)}}.data-\[state\=open\]\:text-primary[data-state=open]{color:var(--primary)}@media (prefers-reduced-motion:reduce){.motion-reduce\:animate-none{animation:none}.motion-reduce\:animate-none\!{animation:none!important}.motion-reduce\:transition-none\!{transition-property:none!important}}@media (pointer:coarse){.pointer-coarse\:opacity-100{opacity:1}}.\[\&_code\]\:font-mono code{font-family:var(--font-mono,ui-monospace, SFMono-Regular, Menlo, monospace)}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3\.5 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 3.5);height:calc(var(--spacing,.25rem) * 3.5)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 4);height:calc(var(--spacing,.25rem) * 4)}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-6 svg:not([class*=size-]){width:calc(var(--spacing,.25rem) * 6);height:calc(var(--spacing,.25rem) * 6)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-content{syntax:"*";inherits:false;initial-value:""}@keyframes pulse{50%{opacity:.5}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanzo-tech/ai",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Kanzo AI surfaces — the transcript, the composer, a model's reasoning and the calls it makes, plus the field affordances that stream into a value. Sibling of @kanzo-tech/ui, not part of it: a Message has a role and one of the roles is `assistant`, which is domain knowledge the generic vocabulary does not carry.",
   "type": "module",
   "license": "MIT",
@@ -32,7 +32,7 @@
     "react": ">=19",
     "react-dom": ">=19",
     "streamdown": ">=2",
-    "@kanzo-tech/ui": "0.1.0"
+    "@kanzo-tech/ui": "0.2.0"
   },
   "dependencies": {
     "tailwind-variants": "^3.2.2"
@@ -52,8 +52,8 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "streamdown": "^2.5.0",
     "tailwindcss": "4",
-    "@kanzo-tech/ui": "0.1.0",
-    "@kanzo-tech/theme": "0.1.0"
+    "@kanzo-tech/theme": "0.2.0",
+    "@kanzo-tech/ui": "0.2.0"
   },
   "//size-limit": "First measurement taken at the split, so this budget is a change detector from day one rather than a number inherited from somewhere. The four AI-assist modules that moved here cost @kanzo-tech/ui's root barrel about 4 kB when they arrived (38 -> 42 kB, recorded in that package's own note); the barrel is rebaselined down by the same move.",
   "size-limit": [