@kanzo-tech/ai 0.12.0 → 0.13.1

package/dist/complete.d.ts

@@ -65,8 +65,12 @@ export declare function CompleteKeys({ acceptLabel, className, dismissLabel, }:
     dismissLabel?: string;
 }): React.JSX.Element | null;
 /** Below-field alternative to `CompleteGhost`, for a field the overlay cannot sit over. */
-export declare function CompleteHint({ className }: {
+export declare function CompleteHint({ acceptLabel, className, dismissLabel, }: {
+    /** The word after the `Tab` key, as on `CompleteKeys`. */
+    acceptLabel?: string;
     className?: string;
+    /** The word after the `Esc` key, as on `CompleteKeys`. */
+    dismissLabel?: string;
 }): React.JSX.Element | null;
 /**
  * What went wrong, in place. Renders nothing when nothing did.

package/dist/complete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"complete.d.ts","sourceRoot":"","sources":["../src/complete.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAEL,KAAK,uBAAuB,EAG7B,MAAM,aAAa,CAAC;AA+FrB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,aAAa,CAAC,MAAM,CAAC,CAAC;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAyLpD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,qBAkB9E;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IAC9C;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,qBAmBF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBA8FlE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,YAAwB,GACzB,EAAE;IACD,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,4BAgBA;AAED,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAYjE;AAGD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAYlE"}
+{"version":3,"file":"complete.d.ts","sourceRoot":"","sources":["../src/complete.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AACxD,OAAO,EAEL,KAAK,uBAAuB,EAG7B,MAAM,aAAa,CAAC;AA+FrB,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,OAAO,EAAE,uBAAuB,KAAK,aAAa,CAAC,MAAM,CAAC,CAAC;IACtE,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAyLpD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,qBAkB9E;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IAC9C;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,qBAmBF;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBA8FlE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAC3B,WAAsB,EACtB,SAAS,EACT,YAAwB,GACzB,EAAE;IACD,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oCAAoC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,4BAgBA;AAED,2FAA2F;AAC3F,wBAAgB,YAAY,CAAC,EAC3B,WAAW,EACX,SAAS,EACT,YAAY,GACb,EAAE;IACD,0DAA0D;IAC1D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0DAA0D;IAC1D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,4BAYA;AAGD;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAYlE"}

package/dist/complete.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as m, jsxs as v } from "react/jsx-runtime";
 import { ark as f } from "@ark-ui/react/factory";
-import * as o from "react";
+import * as c from "react";
 import { cn as y, Kbd as H } from "@kanzo-tech/ui";
 import { AiMark as _ } from "./ai-mark.js";
 import { useInlineCompletion as G, MIN_COMPLETE_LENGTH as O } from "./use-ai.js";
-const M = o.createContext(null), x = (r) => {
-  const e = o.useContext(M);
+const M = c.createContext(null), x = (r) => {
+  const e = c.useContext(M);
   if (!e) throw new Error(`${r} must render inside <CompleteRoot>`);
   return e;
 }, z = [
@@ -26,16 +26,16 @@ const M = o.createContext(null), x = (r) => {
   "borderBottomWidth",
   "borderLeftWidth"
 ], S = (r) => Number.parseFloat(r) || 0, V = (r, e) => {
-  const u = getComputedStyle(r), l = u.direction === "rtl", c = r.getBoundingClientRect(), i = e.getBoundingClientRect(), b = r.offsetWidth - r.clientWidth - S(u.borderLeftWidth) - S(u.borderRightWidth), a = {
+  const i = getComputedStyle(r), s = i.direction === "rtl", l = r.getBoundingClientRect(), a = e.getBoundingClientRect(), b = r.offsetWidth - r.clientWidth - S(i.borderLeftWidth) - S(i.borderRightWidth), u = {
     borderStyle: "solid",
     borderColor: "transparent",
-    insetBlockStart: c.top - i.top,
-    insetBlockEnd: i.bottom - c.bottom,
-    insetInlineStart: l ? i.right - c.right : c.left - i.left,
-    insetInlineEnd: (l ? c.left - i.left : i.right - c.right) + (b > 0 ? b : 0)
+    insetBlockStart: l.top - a.top,
+    insetBlockEnd: a.bottom - l.bottom,
+    insetInlineStart: s ? a.right - l.right : l.left - a.left,
+    insetInlineEnd: (s ? l.left - a.left : a.right - l.right) + (b > 0 ? b : 0)
   };
-  for (const d of z) a[d] = u[d];
-  return { metrics: a, rtl: l };
+  for (const d of z) u[d] = i[d];
+  return { metrics: u, rtl: s };
 }, j = { metrics: {}, rtl: !1 }, q = "[mask-image:linear-gradient(to_bottom,#000_calc(100%-0.9lh),transparent)]", $ = (r) => {
   var e;
   return ((e = /^\s*\S+/.exec(r)) == null ? void 0 : e[0]) ?? "";
@@ -43,18 +43,18 @@ const M = o.createContext(null), x = (r) => {
 function ee(r) {
   const {
     announcement: e = "Suggestion ready. Press Tab to accept, Escape to dismiss.",
-    complete: u,
-    value: l,
-    onValueChange: c,
-    debounceMs: i,
+    complete: i,
+    value: s,
+    onValueChange: l,
+    debounceMs: a,
     minLength: b,
-    className: a,
+    className: u,
     children: d
-  } = r, s = G({ complete: u, debounceMs: i, minLength: b }), p = o.useRef(null), W = o.useRef(null), [h, R] = o.useState(l.length), [k, A] = o.useState(j), g = s.ghost, E = o.useRef(null);
-  o.useLayoutEffect(() => {
+  } = r, o = G({ complete: i, debounceMs: a, minLength: b }), p = c.useRef(null), W = c.useRef(null), [h, R] = c.useState(s.length), [k, A] = c.useState(j), g = o.ghost, E = c.useRef(null);
+  c.useLayoutEffect(() => {
     const t = p.current, n = E.current;
     !t || n === null || (E.current = null, t.setSelectionRange(n, n), R(n));
-  }, [l]), o.useLayoutEffect(() => {
+  }, [s]), c.useLayoutEffect(() => {
     const t = p.current, n = W.current;
     if (!t || !n) return;
     const C = () => A(V(t, n));
@@ -62,7 +62,7 @@ function ee(r) {
     const N = new ResizeObserver(C);
     return N.observe(t), N.observe(n), () => N.disconnect();
   }, []);
-  const K = s.dismiss, L = o.useCallback(() => {
+  const K = o.dismiss, L = c.useCallback(() => {
     const t = p.current;
     if (!t || E.current !== null) return;
     const n = t.selectionStart ?? t.value.length;
@@ -72,7 +72,7 @@ function ee(r) {
     }
     R(n);
   }, [K]);
-  o.useEffect(() => {
+  c.useEffect(() => {
     const t = p.current;
     if (!t) return;
     const n = () => {
@@ -80,45 +80,45 @@ function ee(r) {
     };
     return document.addEventListener("selectionchange", n), () => document.removeEventListener("selectionchange", n);
   }, [L]);
-  const D = o.useCallback(
+  const D = c.useCallback(
     (t) => {
       const n = t.target, C = n.selectionStart ?? n.value.length;
-      R(C), c(n.value), s.setValue(n.value, C);
+      R(C), l(n.value), o.setValue(n.value, C);
     },
-    [s, c]
-  ), w = o.useCallback(
+    [o, l]
+  ), w = c.useCallback(
     (t) => {
-      const n = l.slice(0, h) + t + l.slice(h);
-      return E.current = h + t.length, c(n), { next: n, at: h + t.length };
+      const n = s.slice(0, h) + t + s.slice(h);
+      return E.current = h + t.length, l(n), { next: n, at: h + t.length };
     },
-    [h, c, l]
-  ), T = o.useCallback(() => {
+    [h, l, s]
+  ), T = c.useCallback(() => {
     var t;
-    g && (w(g), s.dismiss(), (t = p.current) == null || t.focus());
-  }, [s, g, w]), B = o.useCallback(() => {
+    g && (w(g), o.dismiss(), (t = p.current) == null || t.focus());
+  }, [o, g, w]), B = c.useCallback(() => {
     const t = $(g);
     if (!t) return;
     const { next: n, at: C } = w(t);
-    s.setValue(n, C);
-  }, [s, g, w]), I = o.useCallback(() => {
+    o.setValue(n, C);
+  }, [o, g, w]), I = c.useCallback(() => {
     const t = p.current, n = t && t === document.activeElement ? t.selectionStart ?? h : h;
-    R(n), s.ask(l, n), t == null || t.focus(), t == null || t.setSelectionRange(n, n);
-  }, [h, s, l]), P = o.useCallback(
+    R(n), o.ask(s, n), t == null || t.focus(), t == null || t.setSelectionRange(n, n);
+  }, [h, o, s]), P = c.useCallback(
     (t) => {
       if (t.defaultPrevented || !g) return;
       const n = k.rtl ? "ArrowLeft" : "ArrowRight";
-      t.key === "Tab" ? (t.preventDefault(), T()) : t.key === n && (t.ctrlKey || t.metaKey) ? (t.preventDefault(), B()) : t.key === "Escape" && s.dismiss();
+      t.key === "Tab" ? (t.preventDefault(), T()) : t.key === n && (t.ctrlKey || t.metaKey) ? (t.preventDefault(), B()) : t.key === "Escape" && o.dismiss();
     },
-    [T, B, s, k.rtl, g]
+    [T, B, o, k.rtl, g]
   ), F = {
     fieldRef: p,
-    value: l,
+    value: s,
     ghost: g,
     caret: h,
     rtl: k.rtl,
-    status: s.status,
-    error: s.error,
-    askable: l.trim().length >= (b ?? O),
+    status: o.status,
+    error: o.error,
+    askable: s.trim().length >= (b ?? O),
     metrics: k.metrics,
     onChange: D,
     onKeyDown: P,
@@ -126,7 +126,7 @@ function ee(r) {
     accept: T,
     request: I
   };
-  return /* @__PURE__ */ m(M.Provider, { value: F, children: /* @__PURE__ */ v(f.div, { className: y("relative w-full min-w-0", a), "data-slot": "complete", ref: W, children: [
+  return /* @__PURE__ */ m(M.Provider, { value: F, children: /* @__PURE__ */ v(f.div, { className: y("relative w-full min-w-0", u), "data-slot": "complete", ref: W, children: [
     d,
     /* @__PURE__ */ m(f.span, { "aria-live": "polite", className: "sr-only", "data-slot": "complete-status", children: g ? e : "" })
   ] }) });
@@ -151,39 +151,39 @@ function te({ children: r }) {
   );
 }
 function ne(r) {
-  const { label: e = "AI assist", offeringLabel: u = "Accept suggestion", ...l } = r, c = x("CompleteMark"), i = c.ghost.length > 0;
+  const { label: e = "AI assist", offeringLabel: i = "Accept suggestion", ...s } = r, l = x("CompleteMark"), a = l.ghost.length > 0;
   return /* @__PURE__ */ m(
     _,
     {
-      busy: c.status === "loading" && !i,
-      disabled: !i && !c.askable,
-      label: i ? u : e,
-      offering: i,
-      onClick: i ? c.accept : c.request,
-      ...l
+      busy: l.status === "loading" && !a,
+      disabled: !a && !l.askable,
+      label: a ? i : e,
+      offering: a,
+      onClick: a ? l.accept : l.request,
+      ...s
     }
   );
 }
 function re({ className: r }) {
-  const e = x("CompleteGhost"), u = o.useRef(null), [l, c] = o.useState(!1);
-  o.useLayoutEffect(() => {
-    const a = e.fieldRef.current, d = u.current;
-    if (!a || !d) return;
+  const e = x("CompleteGhost"), i = c.useRef(null), [s, l] = c.useState(!1);
+  c.useLayoutEffect(() => {
+    const u = e.fieldRef.current, d = i.current;
+    if (!u || !d) return;
     if (!e.ghost) {
-      a.style.removeProperty("min-height");
+      u.style.removeProperty("min-height");
       return;
     }
-    const s = getComputedStyle(a), p = d.scrollHeight + S(s.borderTopWidth) + S(s.borderBottomWidth);
-    p > a.getBoundingClientRect().height + 1 && a.style.setProperty("min-height", `${p}px`);
-  }, [e.fieldRef, e.ghost, e.value]), o.useLayoutEffect(() => {
-    const a = e.fieldRef.current, d = u.current;
-    if (!a || !d) return;
-    const s = () => {
-      d.scrollLeft = a.scrollLeft, d.scrollTop = a.scrollTop;
+    const o = getComputedStyle(u), p = d.scrollHeight + S(o.borderTopWidth) + S(o.borderBottomWidth);
+    p > u.getBoundingClientRect().height + 1 && u.style.setProperty("min-height", `${p}px`);
+  }, [e.fieldRef, e.ghost, e.value]), c.useLayoutEffect(() => {
+    const u = e.fieldRef.current, d = i.current;
+    if (!u || !d) return;
+    const o = () => {
+      d.scrollLeft = u.scrollLeft, d.scrollTop = u.scrollTop;
     };
-    return s(), c(d.scrollHeight > d.clientHeight), a.addEventListener("scroll", s), () => a.removeEventListener("scroll", s);
+    return o(), l(d.scrollHeight > d.clientHeight), u.addEventListener("scroll", o), () => u.removeEventListener("scroll", o);
   }, [e.caret, e.fieldRef, e.value, e.ghost]);
-  const i = e.ghost.length > 0, b = Math.min(e.caret, e.value.length);
+  const a = e.ghost.length > 0, b = Math.min(e.caret, e.value.length);
   return /* @__PURE__ */ v(
     f.div,
     {
@@ -195,12 +195,12 @@ function re({ className: r }) {
         // `overflow: hidden`, so without this a too-long ghost ends on a hard edge — mid-letter
         // against the ✨. Applied only when the measurement above says it is genuinely cut, which
         // is now only when a caller has pinned the field's height.
-        l && q,
-        !i && "invisible",
+        s && q,
+        !a && "invisible",
         r
       ),
       "data-slot": "complete-ghost",
-      ref: u,
+      ref: i,
       style: e.metrics,
       children: [
         /* @__PURE__ */ m(f.span, { className: "invisible", children: e.value.slice(0, b) }),
@@ -213,7 +213,7 @@ function re({ className: r }) {
 function U({
   acceptLabel: r = "accept",
   className: e,
-  dismissLabel: u = "dismiss"
+  dismissLabel: i = "dismiss"
 }) {
   return x("CompleteKeys").ghost ? /* @__PURE__ */ v(
     f.span,
@@ -229,23 +229,27 @@ function U({
         /* @__PURE__ */ v(f.span, { className: "inline-flex items-center gap-1 whitespace-nowrap", children: [
           /* @__PURE__ */ m(H, { children: "Esc" }),
           " ",
-          u
+          i
         ] })
       ]
     }
   ) : null;
 }
-function se({ className: r }) {
-  const e = x("CompleteHint");
-  return e.ghost ? /* @__PURE__ */ v(
+function se({
+  acceptLabel: r,
+  className: e,
+  dismissLabel: i
+}) {
+  const s = x("CompleteHint");
+  return s.ghost ? /* @__PURE__ */ v(
     f.p,
     {
-      className: y("mt-1.5 whitespace-pre-wrap break-words text-muted-foreground text-sm", r),
+      className: y("mt-1.5 whitespace-pre-wrap break-words text-muted-foreground text-sm", e),
       "data-slot": "complete-hint",
       children: [
-        /* @__PURE__ */ m(f.span, { className: "text-faint", children: e.ghost.replace(/^\s+/, "") }),
+        /* @__PURE__ */ m(f.span, { className: "text-faint", children: s.ghost.replace(/^\s+/, "") }),
         " ",
-        /* @__PURE__ */ m(U, {})
+        /* @__PURE__ */ m(U, { acceptLabel: r, dismissLabel: i })
       ]
     }
   ) : null;

package/dist/complete.js.map

@@ -1 +1 @@
-{"version":3,"file":"complete.js","sources":["../src/complete.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport * as React from \"react\";\nimport { cn, Kbd } from \"@kanzo-tech/ui\";\nimport { AiMark, type AiMarkProps } from \"./ai-mark.js\";\nimport {\n  type AiStatus,\n  type InlineCompletionRequest,\n  MIN_COMPLETE_LENGTH,\n  useInlineCompletion,\n} from \"./use-ai.js\";\n\n/**\n * A `<textarea>`, and there is no `<input>` branch any more.\n *\n * **A one-line field takes candidates, not a continuation.** A continuation drawn over an\n * `<input>` can only ever show what fits in the remaining width — the field's own `scrollLeft`\n * cannot reveal text that is not in its value — so a long offer was unreadable by any gesture and\n * accepting it meant accepting blind. No reference does it either: Gmail continues a body, Copilot\n * an editor, and every single-line field in the wild offers a *list*. That is `Suggest`, and it is\n * already here.\n */\ntype FieldEl = HTMLTextAreaElement;\n\ninterface CompleteCtx {\n  fieldRef: React.RefObject<FieldEl | null>;\n  value: string;\n  /** What is on offer at the caret. Empty when there is nothing. */\n  ghost: string;\n  /** Where the offer goes. The ghost is drawn here, not at the end of the value. */\n  caret: number;\n  rtl: boolean;\n  status: AiStatus;\n  error: string | null;\n  /** The value is long enough for `complete` to be asked at all. */\n  askable: boolean;\n  metrics: React.CSSProperties;\n  onChange: (e: React.ChangeEvent<FieldEl>) => void;\n  onKeyDown: (e: React.KeyboardEvent<FieldEl>) => void;\n  syncCaret: () => void;\n  accept: () => void;\n  request: () => void;\n}\n\nconst Ctx = React.createContext<CompleteCtx | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <CompleteRoot>`);\n  return c;\n};\n\nconst METRICS = [\n  \"fontFamily\", \"fontSize\", \"fontWeight\", \"fontStyle\", \"letterSpacing\", \"lineHeight\",\n  \"textTransform\", \"paddingTop\", \"paddingRight\", \"paddingBottom\", \"paddingLeft\",\n  \"borderTopWidth\", \"borderRightWidth\", \"borderBottomWidth\", \"borderLeftWidth\",\n] as const;\n\ninterface FieldShape {\n  metrics: React.CSSProperties;\n  rtl: boolean;\n}\n\n// The overlay is positioned against the FIELD, not against the root, because the two are not the\n// same box once the ✨ lives inside an `InputGroup`: the group carries the border the input no\n// longer has, and a mirror pinned to the root paints a character-width off.\nconst px = (v: string) => Number.parseFloat(v) || 0;\n\nconst readField = (el: FieldEl, root: HTMLElement): FieldShape => {\n  const cs = getComputedStyle(el);\n  const rtl = cs.direction === \"rtl\";\n  const box = el.getBoundingClientRect();\n  const outer = root.getBoundingClientRect();\n  // A scrolling textarea takes its scrollbar out of the text's width, and it takes it from the\n  // inline-END side in both directions. Without this the mirror wraps a word earlier or later than\n  // the field does wherever scrollbars are not overlays — which is not macOS, so it is exactly the\n  // kind of divergence nobody sees here.\n  const gutter = el.offsetWidth - el.clientWidth - px(cs.borderLeftWidth) - px(cs.borderRightWidth);\n  const metrics: Record<string, string | number> = {\n    borderStyle: \"solid\",\n    borderColor: \"transparent\",\n    insetBlockStart: box.top - outer.top,\n    insetBlockEnd: outer.bottom - box.bottom,\n    insetInlineStart: rtl ? outer.right - box.right : box.left - outer.left,\n    insetInlineEnd:\n      (rtl ? box.left - outer.left : outer.right - box.right) + (gutter > 0 ? gutter : 0),\n  };\n  for (const k of METRICS) metrics[k] = cs[k as keyof CSSStyleDeclaration] as string;\n  return { metrics: metrics as React.CSSProperties, rtl };\n};\n\nconst REST: FieldShape = { metrics: {}, rtl: false };\n\n/**\n * A safety net rather than the answer. The field grows to fit its offer, so it runs out of height\n * only where a caller has pinned a `max-height` — and there a fade beats a slice.\n *\n * There were three of these. The two horizontal ones masked a continuation that overran a\n * single-line field, which is the case that no longer exists.\n */\nconst GHOST_FADE =\n  \"[mask-image:linear-gradient(to_bottom,#000_calc(100%-0.9lh),transparent)]\";\n\n/** Leading space plus the next word — what one press of the accept-a-word key takes. */\nconst nextWord = (ghost: string) => /^\\s*\\S+/.exec(ghost)?.[0] ?? \"\";\n\nexport interface CompleteRootProps {\n  complete: (request: InlineCompletionRequest) => AsyncIterable<string>;\n  value: string;\n  onValueChange: (value: string) => void;\n  debounceMs?: number;\n  minLength?: number;\n  /**\n   * What a screen reader hears once, when a suggestion lands.\n   *\n   * @default \"Suggestion ready. Press Tab to accept, Escape to dismiss.\"\n   */\n  announcement?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function CompleteRoot(props: CompleteRootProps) {\n  const {\n    announcement = \"Suggestion ready. Press Tab to accept, Escape to dismiss.\",\n    complete,\n    value,\n    onValueChange,\n    debounceMs,\n    minLength,\n    className,\n    children,\n  } = props;\n  const completion = useInlineCompletion({ complete, debounceMs, minLength });\n  const fieldRef = React.useRef<FieldEl | null>(null);\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [caret, setCaret] = React.useState(value.length);\n  const [field, setField] = React.useState<FieldShape>(REST);\n\n  const ghost = completion.ghost;\n\n  // Where the caret must land after WE changed the value. The browser puts it wherever it likes\n  // when React writes a new `value`, and taking a word out of the middle of a sentence is the case\n  // that makes it obvious.\n  const landing = React.useRef<number | null>(null);\n\n  React.useLayoutEffect(() => {\n    const el = fieldRef.current;\n    const at = landing.current;\n    if (!el || at === null) return;\n    landing.current = null;\n    el.setSelectionRange(at, at);\n    setCaret(at);\n  }, [value]);\n\n  // The ghost mirror wears the field's real metrics, so it aligns whatever the size/className.\n  React.useLayoutEffect(() => {\n    const el = fieldRef.current;\n    const root = rootRef.current;\n    if (!el || !root) return;\n    const sync = () => setField(readField(el, root));\n    sync();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(sync);\n    ro.observe(el);\n    ro.observe(root);\n    return () => ro.disconnect();\n  }, []);\n\n  const dismiss = completion.dismiss;\n\n  /**\n   * **A range is not an insertion point, so an offer cannot survive one.**\n   *\n   * `selectionStart` is the HEAD of a selection, not a caret. Selecting a sentence — or pressing\n   * ⌘A — moved our caret to the start of it while the offer stayed live, and the continuation was\n   * then drawn from there: on top of the words it was made to follow. Taking it with Tab spliced it\n   * in at the same wrong place, because `insert` splits the value at this number too.\n   *\n   * The fix is not to draw it somewhere else. `InlineCompletionRequest` is explicitly the\n   * degenerate range — an insertion point — so while text is selected there is no place the offer\n   * *could* go, and the honest answer is to let it go. Collapsing the selection asks again, which\n   * costs a debounce and no more.\n   */\n  const syncCaret = React.useCallback(() => {\n    const el = fieldRef.current;\n    if (!el || landing.current !== null) return;\n    const start = el.selectionStart ?? el.value.length;\n    if ((el.selectionEnd ?? start) !== start) {\n      dismiss();\n      return;\n    }\n    setCaret(start);\n  }, [dismiss]);\n\n  /**\n   * The caret is where the ghost is **drawn**, so ours drifting from the field's is not a missed\n   * update — it paints a continuation on top of the value. Seen live: a ghost starting at character\n   * zero, over the sentence it was continuing.\n   *\n   * `selectionchange` is the only event that reports every way a caret moves — arrows, clicks,\n   * drags, Home/End, and a script calling `setSelectionRange`. `click` and `keyup` catch most of\n   * them and are kept because they fire first; this catches the rest.\n   */\n  React.useEffect(() => {\n    const el = fieldRef.current;\n    if (!el) return;\n    const onSelectionChange = () => {\n      if (document.activeElement === el) syncCaret();\n    };\n    document.addEventListener(\"selectionchange\", onSelectionChange);\n    return () => document.removeEventListener(\"selectionchange\", onSelectionChange);\n  }, [syncCaret]);\n\n  const onChange = React.useCallback(\n    (e: React.ChangeEvent<FieldEl>) => {\n      const el = e.target;\n      const at = el.selectionStart ?? el.value.length;\n      setCaret(at);\n      onValueChange(el.value);\n      completion.setValue(el.value, at);\n    },\n    [completion, onValueChange],\n  );\n\n  /** Put `text` in at the caret and leave the caret after it. */\n  const insert = React.useCallback(\n    (text: string) => {\n      const next = value.slice(0, caret) + text + value.slice(caret);\n      landing.current = caret + text.length;\n      onValueChange(next);\n      return { next, at: caret + text.length };\n    },\n    [caret, onValueChange, value],\n  );\n\n  const accept = React.useCallback(() => {\n    if (!ghost) return;\n    insert(ghost);\n    completion.dismiss();\n    fieldRef.current?.focus();\n  }, [completion, ghost, insert]);\n\n  // Taking one word is not a new request and not a second machine: the word goes in, the caret\n  // moves past it, and the offer survives by the same rule that keeps it alive when the reader\n  // types that word themselves. There used to be a `taken` offset here doing it by hand.\n  const acceptWord = React.useCallback(() => {\n    const word = nextWord(ghost);\n    if (!word) return;\n    const { next, at } = insert(word);\n    completion.setValue(next, at);\n  }, [completion, ghost, insert]);\n\n  const request = React.useCallback(() => {\n    const el = fieldRef.current;\n    // Where the offer goes, and the two have to agree. Focusing a field nobody has focused yet puts\n    // the DOM caret at 0 while our own is still at the end, and the ghost would then be drawn in one\n    // place and inserted in another.\n    const at = el && el === document.activeElement ? (el.selectionStart ?? caret) : caret;\n    setCaret(at);\n    completion.ask(value, at);\n    el?.focus();\n    el?.setSelectionRange(at, at);\n  }, [caret, completion, value]);\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<FieldEl>) => {\n      if (e.defaultPrevented || !ghost) return;\n      // Forward, not right: the key that means \"next word\" is mirrored under RTL, and this is the\n      // one place in the compound where a key stands for a direction.\n      const forward = field.rtl ? \"ArrowLeft\" : \"ArrowRight\";\n      if (e.key === \"Tab\") {\n        e.preventDefault();\n        accept();\n      } else if (e.key === forward && (e.ctrlKey || e.metaKey)) {\n        e.preventDefault();\n        acceptWord();\n      } else if (e.key === \"Escape\") {\n        completion.dismiss();\n      }\n    },\n    [accept, acceptWord, completion, field.rtl, ghost],\n  );\n\n  const ctx: CompleteCtx = {\n    fieldRef, value, ghost, caret,\n    rtl: field.rtl,\n    status: completion.status,\n    error: completion.error,\n    askable: value.trim().length >= (minLength ?? MIN_COMPLETE_LENGTH),\n    metrics: field.metrics,\n    onChange, onKeyDown, syncCaret, accept, request,\n  };\n\n  return (\n    <Ctx.Provider value={ctx}>\n      <ark.div className={cn(\"relative w-full min-w-0\", className)} data-slot=\"complete\" ref={rootRef}>\n        {children}\n        {/* The ghost itself is `aria-hidden` and streams a chunk a frame, so announcing IT would\n            read the same sentence twenty times. This sentence changes once, when there is\n            something to take. */}\n        <ark.span aria-live=\"polite\" className=\"sr-only\" data-slot=\"complete-status\">\n          {ghost ? announcement : \"\"}\n        </ark.span>\n      </ark.div>\n    </Ctx.Provider>\n  );\n}\n\nexport function CompleteTextarea({ children }: { children: React.ReactElement }) {\n  const ctx = useCtx(\"CompleteTextarea\");\n  return (\n    <ark.textarea\n      aria-keyshortcuts={ctx.ghost ? \"Tab Escape\" : undefined}\n      asChild\n      data-slot=\"complete-textarea\"\n      onChange={ctx.onChange}\n      onClick={ctx.syncCaret}\n      onKeyDown={ctx.onKeyDown}\n      onKeyUp={ctx.syncCaret}\n      onSelect={ctx.syncCaret}\n      ref={ctx.fieldRef as React.Ref<HTMLTextAreaElement>}\n      value={ctx.value}\n    >\n      {children}\n    </ark.textarea>\n  );\n}\n\n/**\n * The ✨, bound to the stream — the same mark `SuggestTrigger` wears, so an assisted field looks\n * assisted whichever of the two it has.\n *\n * Pressing it **takes what is on offer and asks when there is nothing**. That is one gesture with\n * two readings on purpose: it is the only way to accept without a keyboard, and the only way back\n * after Escape, which otherwise ends the field's assistance until the next keystroke.\n */\nexport function CompleteMark(\n  props: Omit<AiMarkProps, \"busy\" | \"offering\"> & {\n    /**\n     * The accessible name while a suggestion is on offer, when `label` names the mark at rest.\n     *\n     * @default \"Accept suggestion\"\n     */\n    offeringLabel?: string;\n  }\n) {\n  const { label = \"AI assist\", offeringLabel = \"Accept suggestion\", ...rest } = props;\n  const ctx = useCtx(\"CompleteMark\");\n  const offering = ctx.ghost.length > 0;\n\n  return (\n    <AiMark\n      busy={ctx.status === \"loading\" && !offering}\n      // The one binding that legitimately differs from `SuggestMark`, and it is domain and not\n      // taste: there is nothing to continue below `minLength`, while a candidate source can answer\n      // from an empty field. Everything else about the two marks is bound identically.\n      disabled={!offering && !ctx.askable}\n      label={offering ? offeringLabel : label}\n      offering={offering}\n      onClick={offering ? ctx.accept : ctx.request}\n      {...rest}\n    />\n  );\n}\n\n/**\n * The continuation drawn where it will land, over the field itself. It wraps and scrolls with the\n * field rather than measuring whether a line of it fits.\n */\nexport function CompleteGhost({ className }: { className?: string }) {\n  const ctx = useCtx(\"CompleteGhost\");\n  const boxRef = React.useRef<HTMLDivElement>(null);\n  const [clipped, setClipped] = React.useState(false);\n\n  /**\n   * **A continuation that does not fit makes the field taller. It is not cut.**\n   *\n   * The fade below was the old answer and it was the wrong one: a wrapping field runs out of\n   * *height*, and a mask on the last line still reads as a sentence sliced through the middle of a\n   * line of type — with, on a `block-end` addon, the ✨ and the keys painted over the slice. Seen on\n   * `docs/ai/fields`. An editor gets away with clipping because it can push the following lines\n   * down; a `<textarea>` cannot, because the ghost is not in its value. So the field takes the\n   * height the offer needs while the offer is on the table, and gives it back when it is not — which\n   * is what a textarea does anyway when you type into it. `rows` becomes a floor rather than a fixed\n   * size, which is what `rows` already means.\n   *\n   * **It grows and never shrinks while one offer is live.** Taking a word makes the ghost shorter,\n   * and re-measuring down on every word would make the box jitter under the reader mid-sentence for\n   * no gain — somebody taking a word is about to take another. It resets the moment there is no\n   * ghost, which is every accept, every dismiss and every keystroke that kills the offer.\n   *\n   */\n  React.useLayoutEffect(() => {\n    const el = ctx.fieldRef.current;\n    const box = boxRef.current;\n    if (!el || !box) return;\n    if (!ctx.ghost) {\n      el.style.removeProperty(\"min-height\");\n      return;\n    }\n    // `minHeight` and not `height`, measured: a `block-end` addon turns the group into a column\n    // flex container and the field is `flex: 1 1 0%` in it, so the flex algorithm computes the used\n    // height and an explicit `height` is ignored outright — the inline `104px` was on the element\n    // and the box stayed 64. Raising the floor is what the flex algorithm does honour, and it is\n    // also what this means: `rows` is a floor, and the offer asks for a taller one.\n    const cs = getComputedStyle(el);\n    const needed = box.scrollHeight + px(cs.borderTopWidth) + px(cs.borderBottomWidth);\n    if (needed > el.getBoundingClientRect().height + 1)\n      el.style.setProperty(\"min-height\", `${needed}px`);\n  }, [ctx.fieldRef, ctx.ghost, ctx.value]);\n\n  // An `overflow: hidden` box is still scrollable from script, so the mirror can be parked exactly\n  // where the field parked its own text — which is what lets a ghost longer than the remaining\n  // line be clipped at the edge instead of hidden entirely.\n  React.useLayoutEffect(() => {\n    const el = ctx.fieldRef.current;\n    const box = boxRef.current;\n    if (!el || !box) return;\n    const sync = () => {\n      box.scrollLeft = el.scrollLeft;\n      box.scrollTop = el.scrollTop;\n    };\n    sync();\n    // Does the continuation fit in the space the field actually has? Measured rather than\n    // assumed, because the answer changes with the field's size, with the value, and with every\n    // chunk that arrives — and after the effect above it should be `false` unless a caller pinned\n    // the height.\n    setClipped(box.scrollHeight > box.clientHeight);\n    el.addEventListener(\"scroll\", sync);\n    return () => el.removeEventListener(\"scroll\", sync);\n  }, [ctx.caret, ctx.fieldRef, ctx.value, ctx.ghost]);\n\n\n  const show = ctx.ghost.length > 0;\n  // A caret past the end of the value would split it in the wrong place; the value is the authority.\n  const at = Math.min(ctx.caret, ctx.value.length);\n\n  return (\n    <ark.div\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden text-transparent\",\n        \"whitespace-pre-wrap break-words\",\n        // **A continuation that does not fit fades; it is not guillotined.** The box is\n        // `overflow: hidden`, so without this a too-long ghost ends on a hard edge — mid-letter\n        // against the ✨. Applied only when the measurement above says it is genuinely cut, which\n        // is now only when a caller has pinned the field's height.\n        clipped && GHOST_FADE,\n        !show && \"invisible\",\n        className,\n      )}\n      data-slot=\"complete-ghost\"\n      ref={boxRef}\n      style={ctx.metrics}\n    >\n      {/* The value holds its own space so the ghost starts exactly at the caret — `hidden` would\n          collapse it. Split in two rather than one leading run: an offer is made *at* the caret,\n          and what comes after it has to keep its place or the tail of the sentence shifts. */}\n      <ark.span className=\"invisible\">{ctx.value.slice(0, at)}</ark.span>\n      <ark.span className=\"text-faint\">{ctx.ghost}</ark.span>\n      <ark.span className=\"invisible\">{ctx.value.slice(at)}</ark.span>\n    </ark.div>\n  );\n}\n\n/**\n * The keys, while there is something to take.\n *\n * The compound already told one class of reader: the `sr-only` region announces *Press Tab to\n * accept, Escape to dismiss* the moment an offer lands. A sighted keyboard user got nothing —\n * `CompleteHint` carries the keys too, so a composition that uses the ghost taught the gesture\n * nowhere. This is the visible twin of that sentence, and it is a part rather than a fixture\n * because only the caller knows where it fits: beside the ✨ in a `block-end` addon, under the\n * field, nowhere at all on a form of eleven where one line of instruction beats eleven.\n *\n * There is no reference to copy. Gmail taught Tab with a popup shown once ever; Copilot puts a\n * toolbar under the pointer, which is a gesture a keyboard cannot make. Naming the key next to the\n * offer is the version that works for both.\n */\nexport function CompleteKeys({\n  acceptLabel = \"accept\",\n  className,\n  dismissLabel = \"dismiss\",\n}: {\n  /** The word after the `Tab` key. */\n  acceptLabel?: string;\n  className?: string;\n  /** The word after the `Esc` key. */\n  dismissLabel?: string;\n}) {\n  const ctx = useCtx(\"CompleteKeys\");\n  if (!ctx.ghost) return null;\n  return (\n    <ark.span\n      className={cn(\"inline-flex items-center gap-2 text-muted-foreground text-xs\", className)}\n      data-slot=\"complete-keys\"\n    >\n      <ark.span className=\"inline-flex items-center gap-1 whitespace-nowrap\">\n        <Kbd>Tab</Kbd> {acceptLabel}\n      </ark.span>\n      <ark.span className=\"inline-flex items-center gap-1 whitespace-nowrap\">\n        <Kbd>Esc</Kbd> {dismissLabel}\n      </ark.span>\n    </ark.span>\n  );\n}\n\n/** Below-field alternative to `CompleteGhost`, for a field the overlay cannot sit over. */\nexport function CompleteHint({ className }: { className?: string }) {\n  const ctx = useCtx(\"CompleteHint\");\n  if (!ctx.ghost) return null;\n  return (\n    <ark.p\n      className={cn(\"mt-1.5 whitespace-pre-wrap break-words text-muted-foreground text-sm\", className)}\n      data-slot=\"complete-hint\"\n    >\n      <ark.span className=\"text-faint\">{ctx.ghost.replace(/^\\s+/, \"\")}</ark.span>{\" \"}\n      <CompleteKeys />\n    </ark.p>\n  );\n}\n\n\n/**\n * What went wrong, in place. Renders nothing when nothing did.\n *\n * `Suggest` has always shown its failures — the strip prints them where the candidates would be —\n * and this side showed none at all: the ✨ stopped spinning and the field said nothing, because\n * `error` was on the hook and no part read it. It is a separate part rather than a line inside\n * `CompleteHint` because the ghost surface is usually `CompleteGhost`, an overlay with no room\n * under it, and a failure has to be readable in both.\n */\nexport function CompleteError({ className }: { className?: string }) {\n  const ctx = useCtx(\"CompleteError\");\n  if (ctx.error === null) return null;\n  return (\n    <ark.p\n      className={cn(\"mt-1.5 text-destructive-foreground text-sm\", className)}\n      data-slot=\"complete-error\"\n      role=\"alert\"\n    >\n      {ctx.error}\n    </ark.p>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA6CA;AAEE;AACA;AACA;AACF;AAEgB;AACd;AAAc;AAAY;AAAc;AAAa;AAAiB;AACtE;AAAiB;AAAc;AAAgB;AAAiB;AAChE;AAAkB;AAAoB;AACxC;AAaE;AASiD;AAClC;AACA;AACoB;AACC;AACiC;AAEgB;AAErF;AACA;AACF;;AAeoC;AAA8B;AAkB3D;AACL;AAAM;AACW;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AAeF;AACE;AAEA;AAGW;AAKX;AAEA;AACA;AAEA;AACA;AACA;AAEgB;AAGlB;AAgBE;AACA;AACA;AACA;AACE;AACA;AAAA;AAEF;AAAc;AAYhB;AACE;AACA;AACA;AACE;AAAmC;AAErC;AAC8E;AAGhF;AAAuB;AAEnB;AAEA;AAEgC;AAClC;AAC0B;AAIP;AAEjB;AACA;AAEgC;AAClC;AAC4B;;AAI5B;AAGkB;AAOlB;AACA;AACA;AACA;AAA4B;AAI5B;AAKA;AAG0B;AAGJ;AAEpB;AAGA;AACA;AAOa;AAEf;AACiD;AAG1B;AACvB;AAAU;AAAO;AAAO;AACb;AACQ;AACD;AAC4B;AAC/B;AACf;AAAU;AAAW;AAAW;AAAQ;AAG1C;AAGO;AAAA;AAMD;AAIR;AAEO;AACL;AACA;AACE;AAAK;AAAJ;AAC+C;AACvC;AACG;AACI;AACD;AACE;AACF;AACC;AACL;AACE;AAEV;AAAA;AAGP;AAUO;AAUL;AAIA;AACE;AAAC;AAAA;AACoC;AAIP;AACM;AAClC;AACqC;AACjC;AAAA;AAGV;AAMO;AACL;AAsBA;AACE;AAEA;AACA;AACE;AACA;AAAA;AAOF;AAEA;AACkD;AAOlD;AAEA;AACA;AACE;AACmB;AAErB;AAOkD;AAIpD;AAIA;AACE;AAAK;AAAJ;AACY;AACA;AACT;AACA;AAAA;AAAA;AAAA;AAAA;AAKW;AACF;AACT;AAAA;AAEQ;AACL;AACM;AAKX;AAAwD;AACZ;AACS;AAAA;AAAA;AAG3D;AAgBO;AAAsB;AACb;AACd;AAEF;AAQE;AAEE;AAAK;AAAJ;AACwF;AAC7E;AAEV;AACE;AAAQ;AAAM;AAAE;AAClB;AAEE;AAAQ;AAAM;AAAE;AAClB;AAAA;AAAA;AAGN;AAGO;AACL;AACA;AAEE;AAAK;AAAJ;AACgG;AACrF;AAEV;AAAgE;AAAY;AAC9D;AAAA;AAAA;AAGpB;AAYO;AACL;AACA;AAEE;AAAK;AAAJ;AACsE;AAC3D;AACL;AAEA;AAAA;AAGX;;;;;;;;;;"}
+{"version":3,"file":"complete.js","sources":["../src/complete.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport * as React from \"react\";\nimport { cn, Kbd } from \"@kanzo-tech/ui\";\nimport { AiMark, type AiMarkProps } from \"./ai-mark.js\";\nimport {\n  type AiStatus,\n  type InlineCompletionRequest,\n  MIN_COMPLETE_LENGTH,\n  useInlineCompletion,\n} from \"./use-ai.js\";\n\n/**\n * A `<textarea>`, and there is no `<input>` branch any more.\n *\n * **A one-line field takes candidates, not a continuation.** A continuation drawn over an\n * `<input>` can only ever show what fits in the remaining width — the field's own `scrollLeft`\n * cannot reveal text that is not in its value — so a long offer was unreadable by any gesture and\n * accepting it meant accepting blind. No reference does it either: Gmail continues a body, Copilot\n * an editor, and every single-line field in the wild offers a *list*. That is `Suggest`, and it is\n * already here.\n */\ntype FieldEl = HTMLTextAreaElement;\n\ninterface CompleteCtx {\n  fieldRef: React.RefObject<FieldEl | null>;\n  value: string;\n  /** What is on offer at the caret. Empty when there is nothing. */\n  ghost: string;\n  /** Where the offer goes. The ghost is drawn here, not at the end of the value. */\n  caret: number;\n  rtl: boolean;\n  status: AiStatus;\n  error: string | null;\n  /** The value is long enough for `complete` to be asked at all. */\n  askable: boolean;\n  metrics: React.CSSProperties;\n  onChange: (e: React.ChangeEvent<FieldEl>) => void;\n  onKeyDown: (e: React.KeyboardEvent<FieldEl>) => void;\n  syncCaret: () => void;\n  accept: () => void;\n  request: () => void;\n}\n\nconst Ctx = React.createContext<CompleteCtx | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <CompleteRoot>`);\n  return c;\n};\n\nconst METRICS = [\n  \"fontFamily\", \"fontSize\", \"fontWeight\", \"fontStyle\", \"letterSpacing\", \"lineHeight\",\n  \"textTransform\", \"paddingTop\", \"paddingRight\", \"paddingBottom\", \"paddingLeft\",\n  \"borderTopWidth\", \"borderRightWidth\", \"borderBottomWidth\", \"borderLeftWidth\",\n] as const;\n\ninterface FieldShape {\n  metrics: React.CSSProperties;\n  rtl: boolean;\n}\n\n// The overlay is positioned against the FIELD, not against the root, because the two are not the\n// same box once the ✨ lives inside an `InputGroup`: the group carries the border the input no\n// longer has, and a mirror pinned to the root paints a character-width off.\nconst px = (v: string) => Number.parseFloat(v) || 0;\n\nconst readField = (el: FieldEl, root: HTMLElement): FieldShape => {\n  const cs = getComputedStyle(el);\n  const rtl = cs.direction === \"rtl\";\n  const box = el.getBoundingClientRect();\n  const outer = root.getBoundingClientRect();\n  // A scrolling textarea takes its scrollbar out of the text's width, and it takes it from the\n  // inline-END side in both directions. Without this the mirror wraps a word earlier or later than\n  // the field does wherever scrollbars are not overlays — which is not macOS, so it is exactly the\n  // kind of divergence nobody sees here.\n  const gutter = el.offsetWidth - el.clientWidth - px(cs.borderLeftWidth) - px(cs.borderRightWidth);\n  const metrics: Record<string, string | number> = {\n    borderStyle: \"solid\",\n    borderColor: \"transparent\",\n    insetBlockStart: box.top - outer.top,\n    insetBlockEnd: outer.bottom - box.bottom,\n    insetInlineStart: rtl ? outer.right - box.right : box.left - outer.left,\n    insetInlineEnd:\n      (rtl ? box.left - outer.left : outer.right - box.right) + (gutter > 0 ? gutter : 0),\n  };\n  for (const k of METRICS) metrics[k] = cs[k as keyof CSSStyleDeclaration] as string;\n  return { metrics: metrics as React.CSSProperties, rtl };\n};\n\nconst REST: FieldShape = { metrics: {}, rtl: false };\n\n/**\n * A safety net rather than the answer. The field grows to fit its offer, so it runs out of height\n * only where a caller has pinned a `max-height` — and there a fade beats a slice.\n *\n * There were three of these. The two horizontal ones masked a continuation that overran a\n * single-line field, which is the case that no longer exists.\n */\nconst GHOST_FADE =\n  \"[mask-image:linear-gradient(to_bottom,#000_calc(100%-0.9lh),transparent)]\";\n\n/** Leading space plus the next word — what one press of the accept-a-word key takes. */\nconst nextWord = (ghost: string) => /^\\s*\\S+/.exec(ghost)?.[0] ?? \"\";\n\nexport interface CompleteRootProps {\n  complete: (request: InlineCompletionRequest) => AsyncIterable<string>;\n  value: string;\n  onValueChange: (value: string) => void;\n  debounceMs?: number;\n  minLength?: number;\n  /**\n   * What a screen reader hears once, when a suggestion lands.\n   *\n   * @default \"Suggestion ready. Press Tab to accept, Escape to dismiss.\"\n   */\n  announcement?: string;\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function CompleteRoot(props: CompleteRootProps) {\n  const {\n    announcement = \"Suggestion ready. Press Tab to accept, Escape to dismiss.\",\n    complete,\n    value,\n    onValueChange,\n    debounceMs,\n    minLength,\n    className,\n    children,\n  } = props;\n  const completion = useInlineCompletion({ complete, debounceMs, minLength });\n  const fieldRef = React.useRef<FieldEl | null>(null);\n  const rootRef = React.useRef<HTMLDivElement>(null);\n  const [caret, setCaret] = React.useState(value.length);\n  const [field, setField] = React.useState<FieldShape>(REST);\n\n  const ghost = completion.ghost;\n\n  // Where the caret must land after WE changed the value. The browser puts it wherever it likes\n  // when React writes a new `value`, and taking a word out of the middle of a sentence is the case\n  // that makes it obvious.\n  const landing = React.useRef<number | null>(null);\n\n  React.useLayoutEffect(() => {\n    const el = fieldRef.current;\n    const at = landing.current;\n    if (!el || at === null) return;\n    landing.current = null;\n    el.setSelectionRange(at, at);\n    setCaret(at);\n  }, [value]);\n\n  // The ghost mirror wears the field's real metrics, so it aligns whatever the size/className.\n  React.useLayoutEffect(() => {\n    const el = fieldRef.current;\n    const root = rootRef.current;\n    if (!el || !root) return;\n    const sync = () => setField(readField(el, root));\n    sync();\n    if (typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(sync);\n    ro.observe(el);\n    ro.observe(root);\n    return () => ro.disconnect();\n  }, []);\n\n  const dismiss = completion.dismiss;\n\n  /**\n   * **A range is not an insertion point, so an offer cannot survive one.**\n   *\n   * `selectionStart` is the HEAD of a selection, not a caret. Selecting a sentence — or pressing\n   * ⌘A — moved our caret to the start of it while the offer stayed live, and the continuation was\n   * then drawn from there: on top of the words it was made to follow. Taking it with Tab spliced it\n   * in at the same wrong place, because `insert` splits the value at this number too.\n   *\n   * The fix is not to draw it somewhere else. `InlineCompletionRequest` is explicitly the\n   * degenerate range — an insertion point — so while text is selected there is no place the offer\n   * *could* go, and the honest answer is to let it go. Collapsing the selection asks again, which\n   * costs a debounce and no more.\n   */\n  const syncCaret = React.useCallback(() => {\n    const el = fieldRef.current;\n    if (!el || landing.current !== null) return;\n    const start = el.selectionStart ?? el.value.length;\n    if ((el.selectionEnd ?? start) !== start) {\n      dismiss();\n      return;\n    }\n    setCaret(start);\n  }, [dismiss]);\n\n  /**\n   * The caret is where the ghost is **drawn**, so ours drifting from the field's is not a missed\n   * update — it paints a continuation on top of the value. Seen live: a ghost starting at character\n   * zero, over the sentence it was continuing.\n   *\n   * `selectionchange` is the only event that reports every way a caret moves — arrows, clicks,\n   * drags, Home/End, and a script calling `setSelectionRange`. `click` and `keyup` catch most of\n   * them and are kept because they fire first; this catches the rest.\n   */\n  React.useEffect(() => {\n    const el = fieldRef.current;\n    if (!el) return;\n    const onSelectionChange = () => {\n      if (document.activeElement === el) syncCaret();\n    };\n    document.addEventListener(\"selectionchange\", onSelectionChange);\n    return () => document.removeEventListener(\"selectionchange\", onSelectionChange);\n  }, [syncCaret]);\n\n  const onChange = React.useCallback(\n    (e: React.ChangeEvent<FieldEl>) => {\n      const el = e.target;\n      const at = el.selectionStart ?? el.value.length;\n      setCaret(at);\n      onValueChange(el.value);\n      completion.setValue(el.value, at);\n    },\n    [completion, onValueChange],\n  );\n\n  /** Put `text` in at the caret and leave the caret after it. */\n  const insert = React.useCallback(\n    (text: string) => {\n      const next = value.slice(0, caret) + text + value.slice(caret);\n      landing.current = caret + text.length;\n      onValueChange(next);\n      return { next, at: caret + text.length };\n    },\n    [caret, onValueChange, value],\n  );\n\n  const accept = React.useCallback(() => {\n    if (!ghost) return;\n    insert(ghost);\n    completion.dismiss();\n    fieldRef.current?.focus();\n  }, [completion, ghost, insert]);\n\n  // Taking one word is not a new request and not a second machine: the word goes in, the caret\n  // moves past it, and the offer survives by the same rule that keeps it alive when the reader\n  // types that word themselves. There used to be a `taken` offset here doing it by hand.\n  const acceptWord = React.useCallback(() => {\n    const word = nextWord(ghost);\n    if (!word) return;\n    const { next, at } = insert(word);\n    completion.setValue(next, at);\n  }, [completion, ghost, insert]);\n\n  const request = React.useCallback(() => {\n    const el = fieldRef.current;\n    // Where the offer goes, and the two have to agree. Focusing a field nobody has focused yet puts\n    // the DOM caret at 0 while our own is still at the end, and the ghost would then be drawn in one\n    // place and inserted in another.\n    const at = el && el === document.activeElement ? (el.selectionStart ?? caret) : caret;\n    setCaret(at);\n    completion.ask(value, at);\n    el?.focus();\n    el?.setSelectionRange(at, at);\n  }, [caret, completion, value]);\n\n  const onKeyDown = React.useCallback(\n    (e: React.KeyboardEvent<FieldEl>) => {\n      if (e.defaultPrevented || !ghost) return;\n      // Forward, not right: the key that means \"next word\" is mirrored under RTL, and this is the\n      // one place in the compound where a key stands for a direction.\n      const forward = field.rtl ? \"ArrowLeft\" : \"ArrowRight\";\n      if (e.key === \"Tab\") {\n        e.preventDefault();\n        accept();\n      } else if (e.key === forward && (e.ctrlKey || e.metaKey)) {\n        e.preventDefault();\n        acceptWord();\n      } else if (e.key === \"Escape\") {\n        completion.dismiss();\n      }\n    },\n    [accept, acceptWord, completion, field.rtl, ghost],\n  );\n\n  const ctx: CompleteCtx = {\n    fieldRef, value, ghost, caret,\n    rtl: field.rtl,\n    status: completion.status,\n    error: completion.error,\n    askable: value.trim().length >= (minLength ?? MIN_COMPLETE_LENGTH),\n    metrics: field.metrics,\n    onChange, onKeyDown, syncCaret, accept, request,\n  };\n\n  return (\n    <Ctx.Provider value={ctx}>\n      <ark.div className={cn(\"relative w-full min-w-0\", className)} data-slot=\"complete\" ref={rootRef}>\n        {children}\n        {/* The ghost itself is `aria-hidden` and streams a chunk a frame, so announcing IT would\n            read the same sentence twenty times. This sentence changes once, when there is\n            something to take. */}\n        <ark.span aria-live=\"polite\" className=\"sr-only\" data-slot=\"complete-status\">\n          {ghost ? announcement : \"\"}\n        </ark.span>\n      </ark.div>\n    </Ctx.Provider>\n  );\n}\n\nexport function CompleteTextarea({ children }: { children: React.ReactElement }) {\n  const ctx = useCtx(\"CompleteTextarea\");\n  return (\n    <ark.textarea\n      aria-keyshortcuts={ctx.ghost ? \"Tab Escape\" : undefined}\n      asChild\n      data-slot=\"complete-textarea\"\n      onChange={ctx.onChange}\n      onClick={ctx.syncCaret}\n      onKeyDown={ctx.onKeyDown}\n      onKeyUp={ctx.syncCaret}\n      onSelect={ctx.syncCaret}\n      ref={ctx.fieldRef as React.Ref<HTMLTextAreaElement>}\n      value={ctx.value}\n    >\n      {children}\n    </ark.textarea>\n  );\n}\n\n/**\n * The ✨, bound to the stream — the same mark `SuggestTrigger` wears, so an assisted field looks\n * assisted whichever of the two it has.\n *\n * Pressing it **takes what is on offer and asks when there is nothing**. That is one gesture with\n * two readings on purpose: it is the only way to accept without a keyboard, and the only way back\n * after Escape, which otherwise ends the field's assistance until the next keystroke.\n */\nexport function CompleteMark(\n  props: Omit<AiMarkProps, \"busy\" | \"offering\"> & {\n    /**\n     * The accessible name while a suggestion is on offer, when `label` names the mark at rest.\n     *\n     * @default \"Accept suggestion\"\n     */\n    offeringLabel?: string;\n  }\n) {\n  const { label = \"AI assist\", offeringLabel = \"Accept suggestion\", ...rest } = props;\n  const ctx = useCtx(\"CompleteMark\");\n  const offering = ctx.ghost.length > 0;\n\n  return (\n    <AiMark\n      busy={ctx.status === \"loading\" && !offering}\n      // The one binding that legitimately differs from `SuggestMark`, and it is domain and not\n      // taste: there is nothing to continue below `minLength`, while a candidate source can answer\n      // from an empty field. Everything else about the two marks is bound identically.\n      disabled={!offering && !ctx.askable}\n      label={offering ? offeringLabel : label}\n      offering={offering}\n      onClick={offering ? ctx.accept : ctx.request}\n      {...rest}\n    />\n  );\n}\n\n/**\n * The continuation drawn where it will land, over the field itself. It wraps and scrolls with the\n * field rather than measuring whether a line of it fits.\n */\nexport function CompleteGhost({ className }: { className?: string }) {\n  const ctx = useCtx(\"CompleteGhost\");\n  const boxRef = React.useRef<HTMLDivElement>(null);\n  const [clipped, setClipped] = React.useState(false);\n\n  /**\n   * **A continuation that does not fit makes the field taller. It is not cut.**\n   *\n   * The fade below was the old answer and it was the wrong one: a wrapping field runs out of\n   * *height*, and a mask on the last line still reads as a sentence sliced through the middle of a\n   * line of type — with, on a `block-end` addon, the ✨ and the keys painted over the slice. Seen on\n   * `docs/ai/fields`. An editor gets away with clipping because it can push the following lines\n   * down; a `<textarea>` cannot, because the ghost is not in its value. So the field takes the\n   * height the offer needs while the offer is on the table, and gives it back when it is not — which\n   * is what a textarea does anyway when you type into it. `rows` becomes a floor rather than a fixed\n   * size, which is what `rows` already means.\n   *\n   * **It grows and never shrinks while one offer is live.** Taking a word makes the ghost shorter,\n   * and re-measuring down on every word would make the box jitter under the reader mid-sentence for\n   * no gain — somebody taking a word is about to take another. It resets the moment there is no\n   * ghost, which is every accept, every dismiss and every keystroke that kills the offer.\n   *\n   */\n  React.useLayoutEffect(() => {\n    const el = ctx.fieldRef.current;\n    const box = boxRef.current;\n    if (!el || !box) return;\n    if (!ctx.ghost) {\n      el.style.removeProperty(\"min-height\");\n      return;\n    }\n    // `minHeight` and not `height`, measured: a `block-end` addon turns the group into a column\n    // flex container and the field is `flex: 1 1 0%` in it, so the flex algorithm computes the used\n    // height and an explicit `height` is ignored outright — the inline `104px` was on the element\n    // and the box stayed 64. Raising the floor is what the flex algorithm does honour, and it is\n    // also what this means: `rows` is a floor, and the offer asks for a taller one.\n    const cs = getComputedStyle(el);\n    const needed = box.scrollHeight + px(cs.borderTopWidth) + px(cs.borderBottomWidth);\n    if (needed > el.getBoundingClientRect().height + 1)\n      el.style.setProperty(\"min-height\", `${needed}px`);\n  }, [ctx.fieldRef, ctx.ghost, ctx.value]);\n\n  // An `overflow: hidden` box is still scrollable from script, so the mirror can be parked exactly\n  // where the field parked its own text — which is what lets a ghost longer than the remaining\n  // line be clipped at the edge instead of hidden entirely.\n  React.useLayoutEffect(() => {\n    const el = ctx.fieldRef.current;\n    const box = boxRef.current;\n    if (!el || !box) return;\n    const sync = () => {\n      box.scrollLeft = el.scrollLeft;\n      box.scrollTop = el.scrollTop;\n    };\n    sync();\n    // Does the continuation fit in the space the field actually has? Measured rather than\n    // assumed, because the answer changes with the field's size, with the value, and with every\n    // chunk that arrives — and after the effect above it should be `false` unless a caller pinned\n    // the height.\n    setClipped(box.scrollHeight > box.clientHeight);\n    el.addEventListener(\"scroll\", sync);\n    return () => el.removeEventListener(\"scroll\", sync);\n  }, [ctx.caret, ctx.fieldRef, ctx.value, ctx.ghost]);\n\n\n  const show = ctx.ghost.length > 0;\n  // A caret past the end of the value would split it in the wrong place; the value is the authority.\n  const at = Math.min(ctx.caret, ctx.value.length);\n\n  return (\n    <ark.div\n      aria-hidden\n      className={cn(\n        \"pointer-events-none absolute inset-0 overflow-hidden text-transparent\",\n        \"whitespace-pre-wrap break-words\",\n        // **A continuation that does not fit fades; it is not guillotined.** The box is\n        // `overflow: hidden`, so without this a too-long ghost ends on a hard edge — mid-letter\n        // against the ✨. Applied only when the measurement above says it is genuinely cut, which\n        // is now only when a caller has pinned the field's height.\n        clipped && GHOST_FADE,\n        !show && \"invisible\",\n        className,\n      )}\n      data-slot=\"complete-ghost\"\n      ref={boxRef}\n      style={ctx.metrics}\n    >\n      {/* The value holds its own space so the ghost starts exactly at the caret — `hidden` would\n          collapse it. Split in two rather than one leading run: an offer is made *at* the caret,\n          and what comes after it has to keep its place or the tail of the sentence shifts. */}\n      <ark.span className=\"invisible\">{ctx.value.slice(0, at)}</ark.span>\n      <ark.span className=\"text-faint\">{ctx.ghost}</ark.span>\n      <ark.span className=\"invisible\">{ctx.value.slice(at)}</ark.span>\n    </ark.div>\n  );\n}\n\n/**\n * The keys, while there is something to take.\n *\n * The compound already told one class of reader: the `sr-only` region announces *Press Tab to\n * accept, Escape to dismiss* the moment an offer lands. A sighted keyboard user got nothing —\n * `CompleteHint` carries the keys too, so a composition that uses the ghost taught the gesture\n * nowhere. This is the visible twin of that sentence, and it is a part rather than a fixture\n * because only the caller knows where it fits: beside the ✨ in a `block-end` addon, under the\n * field, nowhere at all on a form of eleven where one line of instruction beats eleven.\n *\n * There is no reference to copy. Gmail taught Tab with a popup shown once ever; Copilot puts a\n * toolbar under the pointer, which is a gesture a keyboard cannot make. Naming the key next to the\n * offer is the version that works for both.\n */\nexport function CompleteKeys({\n  acceptLabel = \"accept\",\n  className,\n  dismissLabel = \"dismiss\",\n}: {\n  /** The word after the `Tab` key. */\n  acceptLabel?: string;\n  className?: string;\n  /** The word after the `Esc` key. */\n  dismissLabel?: string;\n}) {\n  const ctx = useCtx(\"CompleteKeys\");\n  if (!ctx.ghost) return null;\n  return (\n    <ark.span\n      className={cn(\"inline-flex items-center gap-2 text-muted-foreground text-xs\", className)}\n      data-slot=\"complete-keys\"\n    >\n      <ark.span className=\"inline-flex items-center gap-1 whitespace-nowrap\">\n        <Kbd>Tab</Kbd> {acceptLabel}\n      </ark.span>\n      <ark.span className=\"inline-flex items-center gap-1 whitespace-nowrap\">\n        <Kbd>Esc</Kbd> {dismissLabel}\n      </ark.span>\n    </ark.span>\n  );\n}\n\n/** Below-field alternative to `CompleteGhost`, for a field the overlay cannot sit over. */\nexport function CompleteHint({\n  acceptLabel,\n  className,\n  dismissLabel,\n}: {\n  /** The word after the `Tab` key, as on `CompleteKeys`. */\n  acceptLabel?: string;\n  className?: string;\n  /** The word after the `Esc` key, as on `CompleteKeys`. */\n  dismissLabel?: string;\n}) {\n  const ctx = useCtx(\"CompleteHint\");\n  if (!ctx.ghost) return null;\n  return (\n    <ark.p\n      className={cn(\"mt-1.5 whitespace-pre-wrap break-words text-muted-foreground text-sm\", className)}\n      data-slot=\"complete-hint\"\n    >\n      <ark.span className=\"text-faint\">{ctx.ghost.replace(/^\\s+/, \"\")}</ark.span>{\" \"}\n      <CompleteKeys acceptLabel={acceptLabel} dismissLabel={dismissLabel} />\n    </ark.p>\n  );\n}\n\n\n/**\n * What went wrong, in place. Renders nothing when nothing did.\n *\n * `Suggest` has always shown its failures — the strip prints them where the candidates would be —\n * and this side showed none at all: the ✨ stopped spinning and the field said nothing, because\n * `error` was on the hook and no part read it. It is a separate part rather than a line inside\n * `CompleteHint` because the ghost surface is usually `CompleteGhost`, an overlay with no room\n * under it, and a failure has to be readable in both.\n */\nexport function CompleteError({ className }: { className?: string }) {\n  const ctx = useCtx(\"CompleteError\");\n  if (ctx.error === null) return null;\n  return (\n    <ark.p\n      className={cn(\"mt-1.5 text-destructive-foreground text-sm\", className)}\n      data-slot=\"complete-error\"\n      role=\"alert\"\n    >\n      {ctx.error}\n    </ark.p>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AA6CA;AAEE;AACA;AACA;AACF;AAEgB;AACd;AAAc;AAAY;AAAc;AAAa;AAAiB;AACtE;AAAiB;AAAc;AAAgB;AAAiB;AAChE;AAAkB;AAAoB;AACxC;AAaE;AASiD;AAClC;AACA;AACoB;AACC;AACiC;AAEgB;AAErF;AACA;AACF;;AAeoC;AAA8B;AAkB3D;AACL;AAAM;AACW;AACf;AACA;AACA;AACA;AACA;AACA;AACA;AAeF;AACE;AAEA;AAGW;AAKX;AAEA;AACA;AAEA;AACA;AACA;AAEgB;AAGlB;AAgBE;AACA;AACA;AACA;AACE;AACA;AAAA;AAEF;AAAc;AAYhB;AACE;AACA;AACA;AACE;AAAmC;AAErC;AAC8E;AAGhF;AAAuB;AAEnB;AAEA;AAEgC;AAClC;AAC0B;AAIP;AAEjB;AACA;AAEgC;AAClC;AAC4B;;AAI5B;AAGkB;AAOlB;AACA;AACA;AACA;AAA4B;AAI5B;AAKA;AAG0B;AAGJ;AAEpB;AAGA;AACA;AAOa;AAEf;AACiD;AAG1B;AACvB;AAAU;AAAO;AAAO;AACb;AACQ;AACD;AAC4B;AAC/B;AACf;AAAU;AAAW;AAAW;AAAQ;AAG1C;AAGO;AAAA;AAMD;AAIR;AAEO;AACL;AACA;AACE;AAAK;AAAJ;AAC+C;AACvC;AACG;AACI;AACD;AACE;AACF;AACC;AACL;AACE;AAEV;AAAA;AAGP;AAUO;AAUL;AAIA;AACE;AAAC;AAAA;AACoC;AAIP;AACM;AAClC;AACqC;AACjC;AAAA;AAGV;AAMO;AACL;AAsBA;AACE;AAEA;AACA;AACE;AACA;AAAA;AAOF;AAEA;AACkD;AAOlD;AAEA;AACA;AACE;AACmB;AAErB;AAOkD;AAIpD;AAIA;AACE;AAAK;AAAJ;AACY;AACA;AACT;AACA;AAAA;AAAA;AAAA;AAAA;AAKW;AACF;AACT;AAAA;AAEQ;AACL;AACM;AAKX;AAAwD;AACZ;AACS;AAAA;AAAA;AAG3D;AAgBO;AAAsB;AACb;AACd;AAEF;AAQE;AAEE;AAAK;AAAJ;AACwF;AAC7E;AAEV;AACE;AAAQ;AAAM;AAAE;AAClB;AAEE;AAAQ;AAAM;AAAE;AAClB;AAAA;AAAA;AAGN;AAGO;AAAsB;AAC3B;AACA;AAEF;AAOE;AACA;AAEE;AAAK;AAAJ;AACgG;AACrF;AAEV;AAAgE;AAAY;AACR;AAAA;AAAA;AAG1E;AAYO;AACL;AACA;AAEE;AAAK;AAAJ;AACsE;AAC3D;AACL;AAEA;AAAA;AAGX;;;;;;;;;;"}

package/dist/conversation.d.ts

@@ -20,12 +20,6 @@ export declare const Conversation: (props: React.ComponentProps<typeof ark.div>)
  * declares a role — a message is content, not a widget — so there is no keyboard contract to owe.
  */
 export declare const ConversationContent: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
-/**
- * The stage for the zero state, not the zero state itself: a centred column with a reading measure,
- * which the caller's markup is composed into. There is deliberately no `title` / `description` /
- * `icon` prop — `EmptyState` was exactly that and it is a tombstone in `@kanzo-tech/ui`.
- */
-export declare const ConversationEmpty: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
 /**
  * Present only while the pin is released, and pressing it takes the pin back.
  *

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;;;;;;;;;;;;GAYG;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;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,wBAAwB,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,6BAmClF,CAAC"}

package/dist/conversation.js

@@ -1,118 +1,101 @@
 "use client";
-import { jsx as c } from "react/jsx-runtime";
-import { ark as f } from "@ark-ui/react/factory";
+import { jsx as i } from "react/jsx-runtime";
+import { ark as m } from "@ark-ui/react/factory";
 import { ArrowDownIcon as E } from "lucide-react";
-import * as l from "react";
-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>`);
-  return e;
-}, y = 24, k = (n) => {
-  const { className: e, children: o, slot: s, ...a } = n, [t, u] = l.useState(null), [i, C] = l.useState(null), [g, x] = l.useState(!0), d = l.useRef(!0), N = l.useCallback(() => {
-    t && (d.current = !0, x(!0), t.scrollTop = t.scrollHeight);
+import * as r from "react";
+import { cn as v, Button as N } from "@kanzo-tech/ui";
+const h = r.createContext(null), w = (s) => {
+  const o = r.useContext(h);
+  if (!o) throw new Error(`${s} must render inside <Conversation>`);
+  return o;
+}, S = 24, k = (s) => {
+  const { className: o, children: n, slot: l, ...a } = s, [t, u] = r.useState(null), [c, C] = r.useState(null), [g, x] = r.useState(!0), f = r.useRef(!0), R = r.useCallback(() => {
+    t && (f.current = !0, x(!0), t.scrollTop = t.scrollHeight);
   }, [t]);
-  return l.useEffect(() => {
+  return r.useEffect(() => {
     if (!t) return;
-    const v = () => {
-      const p = t.scrollHeight - t.scrollTop - t.clientHeight <= y;
-      d.current = p, x(p);
+    const d = () => {
+      const p = t.scrollHeight - t.scrollTop - t.clientHeight <= S;
+      f.current = p, x(p);
     };
-    v(), t.addEventListener("scroll", v, { passive: !0 });
+    d(), t.addEventListener("scroll", d, { passive: !0 });
     const b = () => {
-      d.current && (t.scrollTop = t.scrollHeight);
-    }, 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();
+      f.current && (t.scrollTop = t.scrollHeight);
+    }, e = typeof ResizeObserver > "u" ? null : new ResizeObserver(b);
+    return e == null || e.observe(t), c && (e == null || e.observe(c)), () => {
+      t.removeEventListener("scroll", d), e == null || e.disconnect();
     };
-  }, [t, i]), /* @__PURE__ */ c(
-    w.Provider,
+  }, [t, c]), /* @__PURE__ */ i(
+    h.Provider,
     {
-      value: { viewportRef: u, contentRef: C, pinned: g, scrollToEnd: N },
-      children: /* @__PURE__ */ c(
-        f.div,
+      value: { viewportRef: u, contentRef: C, pinned: g, scrollToEnd: R },
+      children: /* @__PURE__ */ i(
+        m.div,
         {
-          className: m("relative flex min-h-0 flex-1 flex-col", e),
+          className: v("relative flex min-h-0 flex-1 flex-col", o),
           ...a,
-          "data-slot": s ?? "conversation",
-          children: o
+          "data-slot": l ?? "conversation",
+          children: n
         }
       )
     }
   );
-}, B = (n) => {
-  const { className: e, children: o, slot: s, ...a } = n, t = h("ConversationContent");
-  return /* @__PURE__ */ c(
-    f.div,
+}, B = (s) => {
+  const { className: o, children: n, slot: l, ...a } = s, t = w("ConversationContent");
+  return /* @__PURE__ */ i(
+    m.div,
     {
-      className: m(
+      className: v(
         "flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain",
         "px-4 py-6",
-        e
+        o
       ),
       ref: t.viewportRef,
       role: "log",
       ...a,
-      "data-slot": s ?? "conversation-content",
-      children: /* @__PURE__ */ c(
-        f.div,
+      "data-slot": l ?? "conversation-content",
+      children: /* @__PURE__ */ i(
+        m.div,
         {
           className: "mx-auto flex w-full max-w-3xl flex-1 flex-col gap-6",
           ref: t.contentRef,
-          children: o
+          children: n
         }
       )
     }
   );
-}, P = (n) => {
-  const { className: e, slot: o, ...s } = n;
-  return /* @__PURE__ */ c(
-    f.div,
+}, P = (s) => {
+  const { className: o, children: n, onClick: l, slot: a, ...t } = s, u = w("ConversationScrollButton");
+  return u.pinned ? null : /* @__PURE__ */ i(
+    N,
     {
-      className: m(
-        "flex flex-1 flex-col items-center justify-center gap-3",
-        "mx-auto max-w-md px-4 py-12",
-        "text-balance text-center text-muted-foreground text-sm",
-        "[&_svg:not([class*='size-'])]:size-6",
-        e
-      ),
-      ...s,
-      "data-slot": o ?? "conversation-empty"
-    }
-  );
-}, j = (n) => {
-  const { className: e, children: o, onClick: s, slot: a, ...t } = n, u = h("ConversationScrollButton");
-  return u.pinned ? null : /* @__PURE__ */ c(
-    R,
-    {
-      "aria-label": o === void 0 ? "Scroll to the latest message" : void 0,
-      className: m(
+      "aria-label": n === void 0 ? "Scroll to the latest message" : void 0,
+      className: v(
         "absolute inset-x-0 bottom-4 z-10 mx-auto",
         // `inset-x-0` is what centres it, and it also stretches it, so the width has to be stated.
         // 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",
+        n === void 0 ? void 0 : "w-fit",
         "[--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
+        o
       ),
-      onClick: (i) => {
-        s == null || s(i), i.defaultPrevented || u.scrollToEnd();
+      onClick: (c) => {
+        l == null || l(c), c.defaultPrevented || u.scrollToEnd();
       },
       pill: !0,
-      size: o === void 0 ? "icon-sm" : "sm",
+      size: n === void 0 ? "icon-sm" : "sm",
       variant: "outline",
       ...t,
       slot: a ?? "conversation-scroll-button",
-      children: o ?? /* @__PURE__ */ c(E, {})
+      children: n ?? /* @__PURE__ */ i(E, {})
     }
   );
 };
 export {
   k as Conversation,
   B as ConversationContent,
-  P as ConversationEmpty,
-  j as ConversationScrollButton
+  P as ConversationScrollButton
 };
 //# sourceMappingURL=conversation.js.map

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 the caller's markup is 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;;;;;;;"}
+{"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 an `EmptyRoot` centre the zero state 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 * 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;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/index.d.ts

@@ -1,4 +1,4 @@
-export { Conversation, ConversationContent, ConversationEmpty, ConversationScrollButton, } from './conversation.js';
+export { Conversation, ConversationContent, ConversationScrollButton, } from './conversation.js';
 export { Message, MessageActions, MessageAvatar, MessageContent, MessageList, } from './message.js';
 export { MessageText } from './message-text.js';
 export type { MessageProps, MessageAvatarProps, MessageRole } from './message.js';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,iBAAiB,EACjB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/E,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACjF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGrD,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvF,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3F,YAAY,EACV,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,aAAa,CAAC;AAErB,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAI5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxF,YAAY,EACV,SAAS,EACT,aAAa,EACb,eAAe,EACf,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAYA,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EACL,OAAO,EACP,cAAc,EACd,aAAa,EACb,cAAc,EACd,WAAW,GACZ,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,YAAY,EAAE,YAAY,EAAE,kBAAkB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAClF,YAAY,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAG1D,OAAO,EACL,WAAW,EACX,iBAAiB,EACjB,mBAAmB,EACnB,kBAAkB,GACnB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EAAE,sBAAsB,EAAE,MAAM,mBAAmB,CAAC;AAGhE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAC/E,YAAY,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACjF,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAClE,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAGrD,OAAO,EACL,YAAY,EACZ,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,GACb,MAAM,eAAe,CAAC;AAIvB,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACvF,YAAY,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAEvD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAC3F,YAAY,EACV,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,uBAAuB,EACvB,uBAAuB,EACvB,qBAAqB,EACrB,0BAA0B,EAC1B,qBAAqB,GACtB,MAAM,aAAa,CAAC;AAErB,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAI5C,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AACxF,YAAY,EACV,SAAS,EACT,aAAa,EACb,eAAe,EACf,UAAU,EACV,UAAU,EACV,UAAU,EACV,WAAW,GACZ,MAAM,mBAAmB,CAAC"}

package/dist/index.js

@@ -1,60 +1,59 @@
-import { Conversation as e, ConversationContent as r, ConversationEmpty as s, ConversationScrollButton as a } from "./conversation.js";
-import { Message as p, MessageActions as m, MessageAvatar as i, MessageContent as g, MessageList as l } from "./message.js";
-import { MessageText as u } from "./message-text.js";
-import { PromptInput as C, PromptInputSubmit as f, PromptInputTextarea as M, PromptInputToolbar as k } from "./prompt-input.js";
-import { Reasoning as S, ReasoningContent as I, ReasoningTrigger as R } from "./reasoning.js";
-import { Tool as A, ToolContent as c, ToolHeader as L, ToolInput as b, ToolOutput as h } from "./tool.js";
-import { Task as E, TaskList as G, TaskStatus as H, TaskTitle as d } from "./task.js";
-import { CompleteError as K, CompleteGhost as O, CompleteHint as j, CompleteKeys as q, CompleteMark as w, CompleteRoot as z, CompleteTextarea as D } from "./complete.js";
-import { AiMark as J } from "./ai-mark.js";
-import { SuggestList as Q, SuggestMark as U, SuggestRoot as V } from "./suggest.js";
-import { cleanGhost as X, useAiStream as Y, useInlineCompletion as Z, useSuggestions as _ } from "./use-ai.js";
-import { isReasoningPart as oo, isTaskPart as to, isTextPart as eo, isToolPart as ro } from "./message-part.js";
+import { Conversation as t, ConversationContent as r, ConversationScrollButton as s } from "./conversation.js";
+import { Message as n, MessageActions as p, MessageAvatar as m, MessageContent as i, MessageList as g } from "./message.js";
+import { MessageText as T } from "./message-text.js";
+import { PromptInput as x, PromptInputSubmit as C, PromptInputTextarea as f, PromptInputToolbar as M } from "./prompt-input.js";
+import { Reasoning as P, ReasoningContent as S, ReasoningTrigger as I } from "./reasoning.js";
+import { Tool as v, ToolContent as A, ToolHeader as c, ToolInput as L, ToolOutput as b } from "./tool.js";
+import { Task as G, TaskList as H, TaskStatus as d, TaskTitle as y } from "./task.js";
+import { CompleteError as E, CompleteGhost as K, CompleteHint as O, CompleteKeys as j, CompleteMark as q, CompleteRoot as w, CompleteTextarea as z } from "./complete.js";
+import { AiMark as F } from "./ai-mark.js";
+import { SuggestList as N, SuggestMark as Q, SuggestRoot as U } from "./suggest.js";
+import { cleanGhost as W, useAiStream as X, useInlineCompletion as Y, useSuggestions as Z } from "./use-ai.js";
+import { isReasoningPart as $, isTaskPart as oo, isTextPart as eo, isToolPart as to } from "./message-part.js";
 export {
-  J as AiMark,
-  K as CompleteError,
-  O as CompleteGhost,
-  j as CompleteHint,
-  q as CompleteKeys,
-  w as CompleteMark,
-  z as CompleteRoot,
-  D as CompleteTextarea,
-  e as Conversation,
+  F as AiMark,
+  E as CompleteError,
+  K as CompleteGhost,
+  O as CompleteHint,
+  j as CompleteKeys,
+  q as CompleteMark,
+  w as CompleteRoot,
+  z as CompleteTextarea,
+  t as Conversation,
   r as ConversationContent,
-  s as ConversationEmpty,
-  a as ConversationScrollButton,
-  p as Message,
-  m as MessageActions,
-  i as MessageAvatar,
-  g as MessageContent,
-  l as MessageList,
-  u as MessageText,
-  C as PromptInput,
-  f as PromptInputSubmit,
-  M as PromptInputTextarea,
-  k as PromptInputToolbar,
-  S as Reasoning,
-  I as ReasoningContent,
-  R as ReasoningTrigger,
-  Q as SuggestList,
-  U as SuggestMark,
-  V as SuggestRoot,
-  E as Task,
-  G as TaskList,
-  H as TaskStatus,
-  d as TaskTitle,
-  A as Tool,
-  c as ToolContent,
-  L as ToolHeader,
-  b as ToolInput,
-  h as ToolOutput,
-  X as cleanGhost,
-  oo as isReasoningPart,
-  to as isTaskPart,
+  s as ConversationScrollButton,
+  n as Message,
+  p as MessageActions,
+  m as MessageAvatar,
+  i as MessageContent,
+  g as MessageList,
+  T as MessageText,
+  x as PromptInput,
+  C as PromptInputSubmit,
+  f as PromptInputTextarea,
+  M as PromptInputToolbar,
+  P as Reasoning,
+  S as ReasoningContent,
+  I as ReasoningTrigger,
+  N as SuggestList,
+  Q as SuggestMark,
+  U as SuggestRoot,
+  G as Task,
+  H as TaskList,
+  d as TaskStatus,
+  y as TaskTitle,
+  v as Tool,
+  A as ToolContent,
+  c as ToolHeader,
+  L as ToolInput,
+  b as ToolOutput,
+  W as cleanGhost,
+  $ as isReasoningPart,
+  oo as isTaskPart,
   eo as isTextPart,
-  ro as isToolPart,
-  Y as useAiStream,
-  Z as useInlineCompletion,
-  _ as useSuggestions
+  to as isToolPart,
+  X as useAiStream,
+  Y as useInlineCompletion,
+  Z as useSuggestions
 };
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanzo-tech/ai",
-  "version": "0.12.0",
+  "version": "0.13.1",
   "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",
@@ -33,7 +33,7 @@
     "react": ">=19",
     "react-dom": ">=19",
     "streamdown": ">=2",
-    "@kanzo-tech/ui": "0.12.0"
+    "@kanzo-tech/ui": "0.13.1"
   },
   "dependencies": {
     "tailwind-variants": "^3.2.2"
@@ -51,8 +51,8 @@
     "react-dom": "^19.0.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "streamdown": "^2.5.0",
-    "@kanzo-tech/theme": "0.12.0",
-    "@kanzo-tech/ui": "0.12.0"
+    "@kanzo-tech/theme": "0.13.1",
+    "@kanzo-tech/ui": "0.13.1"
   },
   "//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": [