@kanzo-tech/ai 0.11.0 → 0.13.0

package/dist/complete.d.ts

@@ -7,6 +7,12 @@ export interface CompleteRootProps {
     onValueChange: (value: string) => void;
     debounceMs?: number;
     minLength?: number;
+    /**
+     * What a screen reader hears once, when a suggestion lands.
+     *
+     * @default "Suggestion ready. Press Tab to accept, Escape to dismiss."
+     */
+    announcement?: string;
     className?: string;
     children: React.ReactNode;
 }
@@ -22,7 +28,14 @@ export declare function CompleteTextarea({ children }: {
  * two readings on purpose: it is the only way to accept without a keyboard, and the only way back
  * after Escape, which otherwise ends the field's assistance until the next keystroke.
  */
-export declare function CompleteMark(props: Omit<AiMarkProps, "busy" | "offering">): React.JSX.Element;
+export declare function CompleteMark(props: Omit<AiMarkProps, "busy" | "offering"> & {
+    /**
+     * The accessible name while a suggestion is on offer, when `label` names the mark at rest.
+     *
+     * @default "Accept suggestion"
+     */
+    offeringLabel?: string;
+}): React.JSX.Element;
 /**
  * The continuation drawn where it will land, over the field itself. It wraps and scrolls with the
  * field rather than measuring whether a line of it fits.
@@ -44,12 +57,20 @@ export declare function CompleteGhost({ className }: {
  * toolbar under the pointer, which is a gesture a keyboard cannot make. Naming the key next to the
  * offer is the version that works for both.
  */
-export declare function CompleteKeys({ className }: {
+export declare function CompleteKeys({ acceptLabel, className, dismissLabel, }: {
+    /** The word after the `Tab` key. */
+    acceptLabel?: string;
     className?: string;
+    /** The word after the `Esc` key. */
+    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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAgLpD;AAED,wBAAgB,gBAAgB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAA;CAAE,qBAkB9E;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,qBAkBzE;AAED;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,qBA8FlE;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,YAAY,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,4BAgBjE;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,15 +1,15 @@
 "use client";
-import { jsx as f, jsxs as b } from "react/jsx-runtime";
-import { ark as d } from "@ark-ui/react/factory";
-import * as o from "react";
-import { cn as y, Kbd as B } from "@kanzo-tech/ui";
-import { AiMark as F } from "./ai-mark.js";
-import { useInlineCompletion as _, MIN_COMPLETE_LENGTH as G } from "./use-ai.js";
-const H = o.createContext(null), v = (s) => {
-  const e = o.useContext(H);
-  if (!e) throw new Error(`${s} must render inside <CompleteRoot>`);
+import { jsx as m, jsxs as v } from "react/jsx-runtime";
+import { ark as f } from "@ark-ui/react/factory";
+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 = c.createContext(null), x = (r) => {
+  const e = c.useContext(M);
+  if (!e) throw new Error(`${r} must render inside <CompleteRoot>`);
   return e;
-}, O = [
+}, z = [
   "fontFamily",
   "fontSize",
   "fontWeight",
@@ -25,107 +25,116 @@ const H = o.createContext(null), v = (s) => {
   "borderRightWidth",
   "borderBottomWidth",
   "borderLeftWidth"
-], S = (s) => Number.parseFloat(s) || 0, z = (s, e) => {
-  const c = getComputedStyle(s), l = c.direction === "rtl", i = s.getBoundingClientRect(), m = e.getBoundingClientRect(), g = s.offsetWidth - s.clientWidth - S(c.borderLeftWidth) - S(c.borderRightWidth), a = {
+], S = (r) => Number.parseFloat(r) || 0, V = (r, e) => {
+  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: i.top - m.top,
-    insetBlockEnd: m.bottom - i.bottom,
-    insetInlineStart: l ? m.right - i.right : i.left - m.left,
-    insetInlineEnd: (l ? i.left - m.left : m.right - i.right) + (g > 0 ? g : 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 r of O) a[r] = c[r];
-  return { metrics: a, rtl: l };
-}, V = { metrics: {}, rtl: !1 }, j = "[mask-image:linear-gradient(to_bottom,#000_calc(100%-0.9lh),transparent)]", q = (s) => {
+  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(s)) == null ? void 0 : e[0]) ?? "";
+  return ((e = /^\s*\S+/.exec(r)) == null ? void 0 : e[0]) ?? "";
 };
-function Z(s) {
-  const { complete: e, value: c, onValueChange: l, debounceMs: i, minLength: m, className: g, children: a } = s, r = _({ complete: e, debounceMs: i, minLength: m }), u = o.useRef(null), x = o.useRef(null), [p, R] = o.useState(c.length), [k, M] = o.useState(V), h = r.ghost, E = o.useRef(null);
-  o.useLayoutEffect(() => {
-    const t = u.current, n = E.current;
+function ee(r) {
+  const {
+    announcement: e = "Suggestion ready. Press Tab to accept, Escape to dismiss.",
+    complete: i,
+    value: s,
+    onValueChange: l,
+    debounceMs: a,
+    minLength: b,
+    className: u,
+    children: d
+  } = 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));
-  }, [c]), o.useLayoutEffect(() => {
-    const t = u.current, n = x.current;
+  }, [s]), c.useLayoutEffect(() => {
+    const t = p.current, n = W.current;
     if (!t || !n) return;
-    const C = () => M(z(t, n));
+    const C = () => A(V(t, n));
     if (C(), typeof ResizeObserver > "u") return;
     const N = new ResizeObserver(C);
     return N.observe(t), N.observe(n), () => N.disconnect();
   }, []);
-  const W = r.dismiss, L = o.useCallback(() => {
-    const t = u.current;
+  const K = o.dismiss, L = c.useCallback(() => {
+    const t = p.current;
     if (!t || E.current !== null) return;
     const n = t.selectionStart ?? t.value.length;
     if ((t.selectionEnd ?? n) !== n) {
-      W();
+      K();
       return;
     }
     R(n);
-  }, [W]);
-  o.useEffect(() => {
-    const t = u.current;
+  }, [K]);
+  c.useEffect(() => {
+    const t = p.current;
     if (!t) return;
     const n = () => {
       document.activeElement === t && L();
     };
     return document.addEventListener("selectionchange", n), () => document.removeEventListener("selectionchange", n);
   }, [L]);
-  const A = o.useCallback(
+  const D = c.useCallback(
     (t) => {
       const n = t.target, C = n.selectionStart ?? n.value.length;
-      R(C), l(n.value), r.setValue(n.value, C);
+      R(C), l(n.value), o.setValue(n.value, C);
     },
-    [r, l]
-  ), w = o.useCallback(
+    [o, l]
+  ), w = c.useCallback(
     (t) => {
-      const n = c.slice(0, p) + t + c.slice(p);
-      return E.current = p + t.length, l(n), { next: n, at: p + 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 };
     },
-    [p, l, c]
-  ), T = o.useCallback(() => {
+    [h, l, s]
+  ), T = c.useCallback(() => {
     var t;
-    h && (w(h), r.dismiss(), (t = u.current) == null || t.focus());
-  }, [r, h, w]), K = o.useCallback(() => {
-    const t = q(h);
+    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);
-    r.setValue(n, C);
-  }, [r, h, w]), D = o.useCallback(() => {
-    const t = u.current, n = t && t === document.activeElement ? t.selectionStart ?? p : p;
-    R(n), r.ask(c, n), t == null || t.focus(), t == null || t.setSelectionRange(n, n);
-  }, [p, r, c]), 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), o.ask(s, n), t == null || t.focus(), t == null || t.setSelectionRange(n, n);
+  }, [h, o, s]), P = c.useCallback(
     (t) => {
-      if (t.defaultPrevented || !h) return;
+      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(), K()) : t.key === "Escape" && r.dismiss();
+      t.key === "Tab" ? (t.preventDefault(), T()) : t.key === n && (t.ctrlKey || t.metaKey) ? (t.preventDefault(), B()) : t.key === "Escape" && o.dismiss();
     },
-    [T, K, r, k.rtl, h]
-  ), P = {
-    fieldRef: u,
-    value: c,
-    ghost: h,
-    caret: p,
+    [T, B, o, k.rtl, g]
+  ), F = {
+    fieldRef: p,
+    value: s,
+    ghost: g,
+    caret: h,
     rtl: k.rtl,
-    status: r.status,
-    error: r.error,
-    askable: c.trim().length >= (m ?? G),
+    status: o.status,
+    error: o.error,
+    askable: s.trim().length >= (b ?? O),
     metrics: k.metrics,
-    onChange: A,
-    onKeyDown: I,
+    onChange: D,
+    onKeyDown: P,
     syncCaret: L,
     accept: T,
-    request: D
+    request: I
   };
-  return /* @__PURE__ */ f(H.Provider, { value: P, children: /* @__PURE__ */ b(d.div, { className: y("relative w-full min-w-0", g), "data-slot": "complete", ref: x, children: [
-    a,
-    /* @__PURE__ */ f(d.span, { "aria-live": "polite", className: "sr-only", "data-slot": "complete-status", children: h ? "Suggestion ready. Press Tab to accept, Escape to dismiss." : "" })
+  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 : "" })
   ] }) });
 }
-function ee({ children: s }) {
-  const e = v("CompleteTextarea");
-  return /* @__PURE__ */ f(
-    d.textarea,
+function te({ children: r }) {
+  const e = x("CompleteTextarea");
+  return /* @__PURE__ */ m(
+    f.textarea,
     {
       "aria-keyshortcuts": e.ghost ? "Tab Escape" : void 0,
       asChild: !0,
@@ -137,46 +146,46 @@ function ee({ children: s }) {
       onSelect: e.syncCaret,
       ref: e.fieldRef,
       value: e.value,
-      children: s
+      children: r
     }
   );
 }
-function te(s) {
-  const { label: e = "AI assist", ...c } = s, l = v("CompleteMark"), i = l.ghost.length > 0;
-  return /* @__PURE__ */ f(
-    F,
+function ne(r) {
+  const { label: e = "AI assist", offeringLabel: i = "Accept suggestion", ...s } = r, l = x("CompleteMark"), a = l.ghost.length > 0;
+  return /* @__PURE__ */ m(
+    _,
     {
-      busy: l.status === "loading" && !i,
-      disabled: !i && !l.askable,
-      label: i ? "Accept suggestion" : e,
-      offering: i,
-      onClick: i ? l.accept : l.request,
-      ...c
+      busy: l.status === "loading" && !a,
+      disabled: !a && !l.askable,
+      label: a ? i : e,
+      offering: a,
+      onClick: a ? l.accept : l.request,
+      ...s
     }
   );
 }
-function ne({ className: s }) {
-  const e = v("CompleteGhost"), c = o.useRef(null), [l, i] = o.useState(!1);
-  o.useLayoutEffect(() => {
-    const a = e.fieldRef.current, r = c.current;
-    if (!a || !r) return;
+function re({ className: r }) {
+  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 u = getComputedStyle(a), x = r.scrollHeight + S(u.borderTopWidth) + S(u.borderBottomWidth);
-    x > a.getBoundingClientRect().height + 1 && a.style.setProperty("min-height", `${x}px`);
-  }, [e.fieldRef, e.ghost, e.value]), o.useLayoutEffect(() => {
-    const a = e.fieldRef.current, r = c.current;
-    if (!a || !r) return;
-    const u = () => {
-      r.scrollLeft = a.scrollLeft, r.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 u(), i(r.scrollHeight > r.clientHeight), a.addEventListener("scroll", u), () => a.removeEventListener("scroll", u);
+    return o(), l(d.scrollHeight > d.clientHeight), u.addEventListener("scroll", o), () => u.removeEventListener("scroll", o);
   }, [e.caret, e.fieldRef, e.value, e.ghost]);
-  const m = e.ghost.length > 0, g = Math.min(e.caret, e.value.length);
-  return /* @__PURE__ */ b(
-    d.div,
+  const a = e.ghost.length > 0, b = Math.min(e.caret, e.value.length);
+  return /* @__PURE__ */ v(
+    f.div,
     {
       "aria-hidden": !0,
       className: y(
@@ -186,61 +195,71 @@ function ne({ className: s }) {
         // `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 && j,
-        !m && "invisible",
-        s
+        s && q,
+        !a && "invisible",
+        r
       ),
       "data-slot": "complete-ghost",
-      ref: c,
+      ref: i,
       style: e.metrics,
       children: [
-        /* @__PURE__ */ f(d.span, { className: "invisible", children: e.value.slice(0, g) }),
-        /* @__PURE__ */ f(d.span, { className: "text-faint", children: e.ghost }),
-        /* @__PURE__ */ f(d.span, { className: "invisible", children: e.value.slice(g) })
+        /* @__PURE__ */ m(f.span, { className: "invisible", children: e.value.slice(0, b) }),
+        /* @__PURE__ */ m(f.span, { className: "text-faint", children: e.ghost }),
+        /* @__PURE__ */ m(f.span, { className: "invisible", children: e.value.slice(b) })
       ]
     }
   );
 }
-function $({ className: s }) {
-  return v("CompleteKeys").ghost ? /* @__PURE__ */ b(
-    d.span,
+function U({
+  acceptLabel: r = "accept",
+  className: e,
+  dismissLabel: i = "dismiss"
+}) {
+  return x("CompleteKeys").ghost ? /* @__PURE__ */ v(
+    f.span,
     {
-      className: y("inline-flex items-center gap-2 text-muted-foreground text-xs", s),
+      className: y("inline-flex items-center gap-2 text-muted-foreground text-xs", e),
       "data-slot": "complete-keys",
       children: [
-        /* @__PURE__ */ b(d.span, { className: "inline-flex items-center gap-1 whitespace-nowrap", children: [
-          /* @__PURE__ */ f(B, { children: "Tab" }),
-          " accept"
+        /* @__PURE__ */ v(f.span, { className: "inline-flex items-center gap-1 whitespace-nowrap", children: [
+          /* @__PURE__ */ m(H, { children: "Tab" }),
+          " ",
+          r
         ] }),
-        /* @__PURE__ */ b(d.span, { className: "inline-flex items-center gap-1 whitespace-nowrap", children: [
-          /* @__PURE__ */ f(B, { children: "Esc" }),
-          " dismiss"
+        /* @__PURE__ */ v(f.span, { className: "inline-flex items-center gap-1 whitespace-nowrap", children: [
+          /* @__PURE__ */ m(H, { children: "Esc" }),
+          " ",
+          i
         ] })
       ]
     }
   ) : null;
 }
-function re({ className: s }) {
-  const e = v("CompleteHint");
-  return e.ghost ? /* @__PURE__ */ b(
-    d.p,
+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", s),
+      className: y("mt-1.5 whitespace-pre-wrap break-words text-muted-foreground text-sm", e),
       "data-slot": "complete-hint",
       children: [
-        /* @__PURE__ */ f(d.span, { className: "text-faint", children: e.ghost.replace(/^\s+/, "") }),
+        /* @__PURE__ */ m(f.span, { className: "text-faint", children: s.ghost.replace(/^\s+/, "") }),
         " ",
-        /* @__PURE__ */ f($, {})
+        /* @__PURE__ */ m(U, { acceptLabel: r, dismissLabel: i })
       ]
     }
   ) : null;
 }
-function se({ className: s }) {
-  const e = v("CompleteError");
-  return e.error === null ? null : /* @__PURE__ */ f(
-    d.p,
+function oe({ className: r }) {
+  const e = x("CompleteError");
+  return e.error === null ? null : /* @__PURE__ */ m(
+    f.p,
     {
-      className: y("mt-1.5 text-destructive-foreground text-sm", s),
+      className: y("mt-1.5 text-destructive-foreground text-sm", r),
       "data-slot": "complete-error",
       role: "alert",
       children: e.error
@@ -248,12 +267,12 @@ function se({ className: s }) {
   );
 }
 export {
-  se as CompleteError,
-  ne as CompleteGhost,
-  re as CompleteHint,
-  $ as CompleteKeys,
-  te as CompleteMark,
-  Z as CompleteRoot,
-  ee as CompleteTextarea
+  oe as CompleteError,
+  re as CompleteGhost,
+  se as CompleteHint,
+  U as CompleteKeys,
+  ne as CompleteMark,
+  ee as CompleteRoot,
+  te as CompleteTextarea
 };
 //# sourceMappingURL=complete.js.map

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  className?: string;\n  children: React.ReactNode;\n}\n\nexport function CompleteRoot(props: CompleteRootProps) {\n  const { complete, value, onValueChange, debounceMs, minLength, className, children } = 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 ? \"Suggestion ready. Press Tab to accept, Escape to dismiss.\" : \"\"}\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(props: Omit<AiMarkProps, \"busy\" | \"offering\">) {\n  const { label = \"AI assist\", ...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 ? \"Accept suggestion\" : 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({ className }: { className?: string }) {\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> accept\n      </ark.span>\n      <ark.span className=\"inline-flex items-center gap-1 whitespace-nowrap\">\n        <Kbd>Esc</Kbd> dismiss\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;AAY3D;AACL;AAcA;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;AACL;AAIA;AACE;AAAC;AAAA;AACoC;AAIP;AACY;AACxC;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;AAEL;AAEE;AAAK;AAAJ;AACwF;AAC7E;AAEV;AACE;AAAQ;AAAM;AAChB;AAEE;AAAQ;AAAM;AAChB;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/dist/suggest.d.ts

@@ -53,7 +53,14 @@ export declare function SuggestRoot(props: SuggestRootProps): React.JSX.Element;
  * Pressing it asks. It no longer opens or closes a layer, so there is no `data-state` to light it
  * from and nothing to trap focus in.
  */
-export declare function SuggestMark(props: Omit<AiMarkProps, "busy" | "offering">): React.JSX.Element;
+export declare function SuggestMark(props: Omit<AiMarkProps, "busy" | "offering"> & {
+    /**
+     * The accessible name while candidates are on offer, when `label` names the mark at rest.
+     *
+     * @default "Suggest different values"
+     */
+    offeringLabel?: string;
+}): React.JSX.Element;
 export interface SuggestListProps extends React.ComponentProps<typeof Suggestions> {
     /** Shown while the source is answering and has produced nothing yet. */
     pending?: React.ReactNode;

package/dist/suggest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"suggest.d.ts","sourceRoot":"","sources":["../src/suggest.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgD,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAqB5C,gCAAgC;AAChC,MAAM,MAAM,cAAc;AACxB,4EAA4E;AAC1E,OAAO;AACT,yFAAyF;GACvF,OAAO,CAAC;AAEZ,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IAC9D,+DAA+D;IAC/D,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5D,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,iCAAiC;IACjC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBA2ElD;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,qBAmBxE;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC;IAChF,wEAAwE;IACxE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,4BAiElD"}
+{"version":3,"file":"suggest.d.ts","sourceRoot":"","sources":["../src/suggest.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAgD,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC3F,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAIxD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAqB5C,gCAAgC;AAChC,MAAM,MAAM,cAAc;AACxB,4EAA4E;AAC1E,OAAO;AACT,yFAAyF;GACvF,OAAO,CAAC;AAEZ,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,EAAE,UAAU,CAAC;IAC9D,+DAA+D;IAC/D,OAAO,EAAE,CAAC,MAAM,CAAC,EAAE,WAAW,KAAK,aAAa,CAAC,SAAS,CAAC,CAAC;IAC5D,mEAAmE;IACnE,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB,iCAAiC;IACjC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,qBA2ElD;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CACzB,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,UAAU,CAAC,GAAG;IAC9C;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,qBAoBF;AAED,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC;IAChF,wEAAwE;IACxE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,4BAiElD"}

package/dist/suggest.js

@@ -3,9 +3,9 @@ import { jsx as r, jsxs as x } from "react/jsx-runtime";
 import { XIcon as w } from "lucide-react";
 import { ark as d } from "@ark-ui/react/factory";
 import * as f from "react";
-import { ButtonGroup as M, Suggestion as P, Button as R, Spinner as T, Suggestions as j, cn as h } from "@kanzo-tech/ui";
-import { AiMark as A } from "./ai-mark.js";
-import { useSuggestions as B } from "./use-ai.js";
+import { ButtonGroup as L, Suggestion as M, Button as P, Spinner as R, Suggestions as T, cn as h } from "@kanzo-tech/ui";
+import { AiMark as j } from "./ai-mark.js";
+import { useSuggestions as A } from "./use-ai.js";
 const S = f.createContext(null), k = (o) => {
   const n = f.useContext(S);
   if (!n) throw new Error(`${o} must render inside <SuggestRoot>`);
@@ -14,18 +14,18 @@ const S = f.createContext(null), k = (o) => {
 function I(o) {
   const {
     suggest: n,
-    existing: l,
-    onPick: c,
-    limit: a,
-    trigger: u = "press",
+    existing: c,
+    onPick: l,
+    limit: m,
+    trigger: a = "press",
     children: t,
-    className: m,
+    className: u,
     onBlur: e,
     onFocus: g,
     slot: v,
-    ...N
-  } = o, s = B({ suggest: n, existing: l, limit: a }), [b, p] = f.useState(!1), y = (i) => {
-    c(i), s.dismiss(i);
+    ...b
+  } = o, s = A({ suggest: n, existing: c, limit: m }), [N, p] = f.useState(!1), y = (i) => {
+    l(i), s.dismiss(i);
   }, C = () => {
     s.status !== "loading" && (s.status === "error" || s.items.length > 0 ? s.refresh() : s.ask());
   };
@@ -36,7 +36,7 @@ function I(o) {
         candidates: s.items,
         status: s.status,
         error: s.error,
-        active: b,
+        active: N,
         ask: C,
         pick: y,
         dismiss: s.dismiss
@@ -44,14 +44,14 @@ function I(o) {
       children: /* @__PURE__ */ r(
         d.div,
         {
-          className: h("flex w-full min-w-0 flex-col gap-2", m),
+          className: h("flex w-full min-w-0 flex-col gap-2", u),
           onBlur: (i) => {
             e == null || e(i), i.currentTarget.contains(i.relatedTarget) || p(!1);
           },
           onFocus: (i) => {
-            g == null || g(i), p(!0), u === "focus" && s.ask();
+            g == null || g(i), p(!0), a === "focus" && s.ask();
           },
-          ...N,
+          ...b,
           "data-slot": v ?? "suggest",
           children: t
         }
@@ -60,24 +60,24 @@ function I(o) {
   );
 }
 function X(o) {
-  const { label: n = "Suggest", onClick: l, ...c } = o, a = k("SuggestMark"), u = a.candidates.length > 0;
+  const { label: n = "Suggest", offeringLabel: c = "Suggest different values", onClick: l, ...m } = o, a = k("SuggestMark"), t = a.candidates.length > 0;
   return /* @__PURE__ */ r(
-    A,
+    j,
     {
-      busy: a.status === "loading" && !u,
-      label: u ? "Suggest different values" : n,
-      offering: u,
-      onClick: (t) => {
-        l == null || l(t), t.defaultPrevented || a.ask();
+      busy: a.status === "loading" && !t,
+      label: t ? c : n,
+      offering: t,
+      onClick: (u) => {
+        l == null || l(u), u.defaultPrevented || a.ask();
       },
-      ...c
+      ...m
     }
   );
 }
 function q(o) {
-  const { className: n, empty: l, pending: c, slot: a, ...u } = o, t = k("SuggestList");
+  const { className: n, empty: c, pending: l, slot: m, ...a } = o, t = k("SuggestList");
   if (!t.active) return null;
-  const m = t.error !== null ? /* @__PURE__ */ r(d.p, { className: "text-destructive-foreground text-sm", "data-slot": "suggest-error", children: t.error }) : t.candidates.length > 0 ? t.candidates.map((e) => {
+  const u = t.error !== null ? /* @__PURE__ */ r(d.p, { className: "text-destructive-foreground text-sm", "data-slot": "suggest-error", children: t.error }) : t.candidates.length > 0 ? t.candidates.map((e) => {
     const g = e.label ?? e.value;
     return (
       // **Two buttons, so a group — not a ✕ inside the pill.** `Suggestion` *is* a
@@ -85,10 +85,10 @@ function q(o) {
       // to be a sibling. `ButtonGroup` is the house cluster: it collapses the inner radii and
       // overlaps the shared border, so the pair reads as one pill with a divided end, and it
       // requires the accessible name that a `role="group"` owes.
-      /* @__PURE__ */ x(M, { "aria-label": g, slot: "suggest-item", children: [
-        /* @__PURE__ */ r(P, { onSelect: t.pick, title: e.rationale, value: e.value, children: g }),
+      /* @__PURE__ */ x(L, { "aria-label": g, slot: "suggest-item", children: [
+        /* @__PURE__ */ r(M, { onSelect: t.pick, title: e.rationale, value: e.value, children: g }),
         /* @__PURE__ */ r(
-          R,
+          P,
           {
             "aria-label": `Dismiss ${g}`,
             className: "h-auto min-h-[24px] self-stretch px-2 py-1",
@@ -102,18 +102,18 @@ function q(o) {
         )
       ] }, e.value)
     );
-  }) : t.status === "loading" ? c ?? /* @__PURE__ */ x(
+  }) : t.status === "loading" ? l ?? /* @__PURE__ */ x(
     d.span,
     {
       className: "inline-flex items-center gap-2 text-muted-foreground text-sm",
       "data-slot": "suggest-pending",
       children: [
-        /* @__PURE__ */ r(T, { "aria-hidden": !0 }),
+        /* @__PURE__ */ r(R, { "aria-hidden": !0 }),
         "Thinking…"
       ]
     }
-  ) : t.status === "ready" ? l ?? /* @__PURE__ */ r(d.span, { className: "text-muted-foreground text-sm", "data-slot": "suggest-empty", children: "Nothing to suggest." }) : null;
-  return m === null ? null : /* @__PURE__ */ r(j, { className: h("min-h-8", n), ...u, slot: a ?? "suggest-list", children: m });
+  ) : t.status === "ready" ? c ?? /* @__PURE__ */ r(d.span, { className: "text-muted-foreground text-sm", "data-slot": "suggest-empty", children: "Nothing to suggest." }) : null;
+  return u === null ? null : /* @__PURE__ */ r(T, { className: h("min-h-8", n), ...a, slot: m ?? "suggest-list", children: u });
 }
 export {
   q as SuggestList,

package/dist/suggest.js.map

@@ -1 +1 @@
-{"version":3,"file":"suggest.js","sources":["../src/suggest.tsx"],"sourcesContent":["\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport * as React from \"react\";\nimport { Button, ButtonGroup, cn, Spinner, Suggestion, Suggestions } from \"@kanzo-tech/ui\";\nimport { AiMark, type AiMarkProps } from \"./ai-mark.js\";\n// No alias any more, and that is the whole of this rename: the type and `@kanzo-tech/ui`'s\n// `Suggestion` component were both in scope in this file, both on public barrels, and one of them\n// had to be renamed at the import to be usable at all.\nimport type { Candidate } from \"./types.js\";\nimport { type AiStatus, useSuggestions } from \"./use-ai.js\";\n\ninterface SuggestCtx {\n  candidates: Candidate[];\n  status: AiStatus;\n  error: string | null;\n  /** The field, or something inside it, holds focus. */\n  active: boolean;\n  ask: () => void;\n  pick: (value: string) => void;\n  dismiss: (value: string) => void;\n}\n\nconst Ctx = React.createContext<SuggestCtx | null>(null);\nconst useCtx = (part: string): SuggestCtx => {\n  const context = React.useContext(Ctx);\n  if (!context) throw new Error(`${part} must render inside <SuggestRoot>`);\n  return context;\n};\n\n/** When the source is asked. */\nexport type SuggestTrigger =\n  /** On a press of the ✨. Nothing is requested until somebody asks for it. */\n  | \"press\"\n  /** As soon as the field takes focus. Prefetches, and bills a model for a tab-through. */\n  | \"focus\";\n\nexport interface SuggestRootProps\n  extends Omit<React.ComponentProps<typeof ark.div>, \"onSelect\"> {\n  /** The source. Yields candidates; honour the `AbortSignal`. */\n  suggest: (signal?: AbortSignal) => AsyncIterable<Candidate>;\n  /** What the field already holds — these are never offered back. */\n  existing?: string[];\n  /** Where a chosen value goes. */\n  onPick: (value: string) => void;\n  /**\n   * How many to take from the stream.\n   *\n   * @default 6\n   */\n  limit?: number;\n  /**\n   * @default \"press\"\n   */\n  trigger?: SuggestTrigger;\n}\n\n/**\n * Candidate values for one field, offered **in the flow underneath it**.\n *\n * This replaced a popover, and the popover is the whole story. Hiding the candidates behind a door\n * bought nothing and cost six workarounds, every one of them downstream of the door and not of the\n * candidates: a non-modal popover, because a modal one put `pointer-events: none` on the very field\n * the values were for; a `data-autofocus`, because a popover has to hand focus somewhere; a\n * `Delete`/`Backspace` handler, because a button inside `role=\"option\"` is unreachable by Tab; a\n * shared label id, because a popover names itself from a title and a listbox from a label; a ✕ that\n * had to be quieted because an offer looked identical to a committed tag; and a three-row window\n * with a refill loop in the hook to keep it full. None of them exist here.\n *\n * **Focus decides visibility, a press decides billing**, and they are deliberately not the same\n * gesture. The strip appears while the field has focus and there is something to show — which is\n * what keeps a form of eleven fields from becoming a wall, since only one field is focused at a\n * time. Asking is `trigger`, and it defaults to a press: a source that fires on focus bills a model\n * for a tab-through, and that is a decision a caller should make on purpose.\n */\nexport function SuggestRoot(props: SuggestRootProps) {\n  const {\n    suggest,\n    existing,\n    onPick,\n    limit,\n    trigger = \"press\",\n    children,\n    className,\n    onBlur,\n    onFocus,\n    slot,\n    ...rest\n  } = props;\n\n  const controller = useSuggestions({ suggest, existing, limit });\n  const [active, setActive] = React.useState(false);\n\n  const pick = (value: string) => {\n    onPick(value);\n    // A taken candidate is no longer a candidate. Nothing refills — the strip simply gets shorter,\n    // which is the honest picture of a source that has already answered.\n    controller.dismiss(value);\n  };\n\n  /**\n   * **One meaning for a press, in both compounds: give me the assistance.**\n   *\n   * `Complete` reads that as *take the continuation* when there is one, because a ghost is a single\n   * offer that needs a gesture to accept. A strip is N offers that already carry their own buttons,\n   * so here the next useful thing is a different set — and after a failure it is a retry. The hook's\n   * `ask` stays strict (idle only, so a press cannot re-bill a source that already answered) and\n   * this is where the policy lives, which is why it is in the compound and not in `AiMark`.\n   *\n   * Loading is the one state where nothing happens: the mark is a spinner then, and a spinner you\n   * can press is a lie.\n   */\n  const press = () => {\n    if (controller.status === \"loading\") return;\n    if (controller.status === \"error\" || controller.items.length > 0) controller.refresh();\n    else controller.ask();\n  };\n\n  return (\n    <Ctx.Provider\n      value={{\n        candidates: controller.items,\n        status: controller.status,\n        error: controller.error,\n        active,\n        ask: press,\n        pick,\n        dismiss: controller.dismiss,\n      }}\n    >\n      <ark.div\n        className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}\n        onBlur={(event) => {\n          onBlur?.(event);\n          // `relatedTarget` is where focus is going. Inside our own subtree it is a pill being\n          // clicked or the ✨ being tabbed to, and the strip must survive both.\n          if (!event.currentTarget.contains(event.relatedTarget)) setActive(false);\n        }}\n        onFocus={(event) => {\n          onFocus?.(event);\n          setActive(true);\n          if (trigger === \"focus\") controller.ask();\n        }}\n        {...rest}\n        data-slot={slot ?? \"suggest\"}\n      >\n        {children}\n      </ark.div>\n    </Ctx.Provider>\n  );\n}\n\n/**\n * The ✨ — **a mark, not a door.**\n *\n * At rest it says the field is model-assisted, which a reader can see without touching anything.\n * Pressing it asks. It no longer opens or closes a layer, so there is no `data-state` to light it\n * from and nothing to trap focus in.\n */\nexport function SuggestMark(props: Omit<AiMarkProps, \"busy\" | \"offering\">) {\n  const { label = \"Suggest\", onClick, ...rest } = props;\n  const ctx = useCtx(\"SuggestMark\");\n  // Bound exactly as `CompleteMark` binds it. A mark that paints one way over a ghost and another\n  // over a strip reads as two products; `ai-mark.test.tsx` is the guard on that.\n  const offering = ctx.candidates.length > 0;\n\n  return (\n    <AiMark\n      busy={ctx.status === \"loading\" && !offering}\n      label={offering ? \"Suggest different values\" : label}\n      offering={offering}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) ctx.ask();\n      }}\n      {...rest}\n    />\n  );\n}\n\nexport interface SuggestListProps extends React.ComponentProps<typeof Suggestions> {\n  /** Shown while the source is answering and has produced nothing yet. */\n  pending?: React.ReactNode;\n  /** Shown when the source finished with nothing to offer. */\n  empty?: React.ReactNode;\n}\n\n/**\n * The strip, and the only part that decides whether anything is on screen.\n *\n * It renders `Suggestions` from `@kanzo-tech/ui` — a row of buttons that knows nothing about a\n * model — so everything model-shaped stays on this side of the boundary: the ✨, the engine, and\n * the rationale that comes back with a candidate.\n *\n * The rationale is the highlighted pill's `title` rather than a line under the strip. The line was\n * tried and it moved the layout on every hover; a `title` is the browser's own tooltip, reaches the\n * keyboard through focus, and costs no box.\n */\nexport function SuggestList(props: SuggestListProps) {\n  const { className, empty, pending, slot, ...rest } = props;\n  const ctx = useCtx(\"SuggestList\");\n\n  if (!ctx.active) return null;\n\n  const body =\n    ctx.error !== null ? (\n      <ark.p className=\"text-destructive-foreground text-sm\" data-slot=\"suggest-error\">\n        {ctx.error}\n      </ark.p>\n    ) : ctx.candidates.length > 0 ? (\n      ctx.candidates.map((candidate) => {\n        const label = candidate.label ?? candidate.value;\n        return (\n          // **Two buttons, so a group — not a ✕ inside the pill.** `Suggestion` *is* a\n          // `<button>`, and a button inside a button is not a thing the DOM has; the dismiss has\n          // to be a sibling. `ButtonGroup` is the house cluster: it collapses the inner radii and\n          // overlaps the shared border, so the pair reads as one pill with a divided end, and it\n          // requires the accessible name that a `role=\"group\"` owes.\n          <ButtonGroup aria-label={label} key={candidate.value} slot=\"suggest-item\">\n            <Suggestion onSelect={ctx.pick} title={candidate.rationale} value={candidate.value}>\n              {label}\n            </Suggestion>\n            {/* Always drawn, never on hover: a hover-only control is unreachable by a keyboard and\n                absent on a touch pointer, and this strip is explicitly reachable by Tab. */}\n            <Button\n              aria-label={`Dismiss ${label}`}\n              className=\"h-auto min-h-[24px] self-stretch px-2 py-1\"\n              onClick={() => ctx.dismiss(candidate.value)}\n              pill\n              size=\"sm\"\n              slot=\"suggest-dismiss\"\n              variant=\"outline\"\n            >\n              <XIcon />\n            </Button>\n          </ButtonGroup>\n        );\n      })\n    ) : ctx.status === \"loading\" ? (\n      (pending ?? (\n        <ark.span\n          className=\"inline-flex items-center gap-2 text-muted-foreground text-sm\"\n          data-slot=\"suggest-pending\"\n        >\n          <Spinner aria-hidden />\n          Thinking…\n        </ark.span>\n      ))\n    ) : ctx.status === \"ready\" ? (\n      (empty ?? (\n        <ark.span className=\"text-muted-foreground text-sm\" data-slot=\"suggest-empty\">\n          Nothing to suggest.\n        </ark.span>\n      ))\n    ) : null;\n\n  if (body === null) return null;\n\n  return (\n    <Suggestions className={cn(\"min-h-8\", className)} {...rest} slot={slot ?? \"suggest-list\"}>\n      {body}\n    </Suggestions>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAwBA;AAEE;AACA;AACA;AACF;AA+CO;AACL;AAAM;AACJ;AACA;AACA;AACA;AACU;AACV;AACA;AACA;AACA;AACA;AACG;AAOH;AAGwB;AAgBxB;AAEgB;AAGlB;AACE;AAAK;AAAJ;AACQ;AACkB;AACJ;AACD;AAClB;AACK;AACL;AACoB;AAAA;AAGtB;AAAK;AAAJ;AAC8D;AAE3D;AAGuE;AACzE;AAEE;AAEoC;AACtC;AACI;AACe;AAElB;AAAA;AAAA;AACH;AAGN;AASO;AACL;AAMA;AACE;AAAC;AAAA;AACoC;AACY;AAC/C;AAEE;AACiC;AACnC;AACI;AAAA;AAGV;AAoBO;AACL;AAGA;AAEA;AAOM;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAEA;AAGA;AAAC;AAAA;AAC6B;AAClB;AACgC;AACtC;AACC;AACA;AACG;AAED;AAAA;AAAA;AAEX;AAAA;AAKF;AAAK;AAAJ;AACW;AACA;AAEV;AAAqB;AAAE;AAAA;AAAA;AAY/B;AAOF;;;;;;"}
+{"version":3,"file":"suggest.js","sources":["../src/suggest.tsx"],"sourcesContent":["\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport * as React from \"react\";\nimport { Button, ButtonGroup, cn, Spinner, Suggestion, Suggestions } from \"@kanzo-tech/ui\";\nimport { AiMark, type AiMarkProps } from \"./ai-mark.js\";\n// No alias any more, and that is the whole of this rename: the type and `@kanzo-tech/ui`'s\n// `Suggestion` component were both in scope in this file, both on public barrels, and one of them\n// had to be renamed at the import to be usable at all.\nimport type { Candidate } from \"./types.js\";\nimport { type AiStatus, useSuggestions } from \"./use-ai.js\";\n\ninterface SuggestCtx {\n  candidates: Candidate[];\n  status: AiStatus;\n  error: string | null;\n  /** The field, or something inside it, holds focus. */\n  active: boolean;\n  ask: () => void;\n  pick: (value: string) => void;\n  dismiss: (value: string) => void;\n}\n\nconst Ctx = React.createContext<SuggestCtx | null>(null);\nconst useCtx = (part: string): SuggestCtx => {\n  const context = React.useContext(Ctx);\n  if (!context) throw new Error(`${part} must render inside <SuggestRoot>`);\n  return context;\n};\n\n/** When the source is asked. */\nexport type SuggestTrigger =\n  /** On a press of the ✨. Nothing is requested until somebody asks for it. */\n  | \"press\"\n  /** As soon as the field takes focus. Prefetches, and bills a model for a tab-through. */\n  | \"focus\";\n\nexport interface SuggestRootProps\n  extends Omit<React.ComponentProps<typeof ark.div>, \"onSelect\"> {\n  /** The source. Yields candidates; honour the `AbortSignal`. */\n  suggest: (signal?: AbortSignal) => AsyncIterable<Candidate>;\n  /** What the field already holds — these are never offered back. */\n  existing?: string[];\n  /** Where a chosen value goes. */\n  onPick: (value: string) => void;\n  /**\n   * How many to take from the stream.\n   *\n   * @default 6\n   */\n  limit?: number;\n  /**\n   * @default \"press\"\n   */\n  trigger?: SuggestTrigger;\n}\n\n/**\n * Candidate values for one field, offered **in the flow underneath it**.\n *\n * This replaced a popover, and the popover is the whole story. Hiding the candidates behind a door\n * bought nothing and cost six workarounds, every one of them downstream of the door and not of the\n * candidates: a non-modal popover, because a modal one put `pointer-events: none` on the very field\n * the values were for; a `data-autofocus`, because a popover has to hand focus somewhere; a\n * `Delete`/`Backspace` handler, because a button inside `role=\"option\"` is unreachable by Tab; a\n * shared label id, because a popover names itself from a title and a listbox from a label; a ✕ that\n * had to be quieted because an offer looked identical to a committed tag; and a three-row window\n * with a refill loop in the hook to keep it full. None of them exist here.\n *\n * **Focus decides visibility, a press decides billing**, and they are deliberately not the same\n * gesture. The strip appears while the field has focus and there is something to show — which is\n * what keeps a form of eleven fields from becoming a wall, since only one field is focused at a\n * time. Asking is `trigger`, and it defaults to a press: a source that fires on focus bills a model\n * for a tab-through, and that is a decision a caller should make on purpose.\n */\nexport function SuggestRoot(props: SuggestRootProps) {\n  const {\n    suggest,\n    existing,\n    onPick,\n    limit,\n    trigger = \"press\",\n    children,\n    className,\n    onBlur,\n    onFocus,\n    slot,\n    ...rest\n  } = props;\n\n  const controller = useSuggestions({ suggest, existing, limit });\n  const [active, setActive] = React.useState(false);\n\n  const pick = (value: string) => {\n    onPick(value);\n    // A taken candidate is no longer a candidate. Nothing refills — the strip simply gets shorter,\n    // which is the honest picture of a source that has already answered.\n    controller.dismiss(value);\n  };\n\n  /**\n   * **One meaning for a press, in both compounds: give me the assistance.**\n   *\n   * `Complete` reads that as *take the continuation* when there is one, because a ghost is a single\n   * offer that needs a gesture to accept. A strip is N offers that already carry their own buttons,\n   * so here the next useful thing is a different set — and after a failure it is a retry. The hook's\n   * `ask` stays strict (idle only, so a press cannot re-bill a source that already answered) and\n   * this is where the policy lives, which is why it is in the compound and not in `AiMark`.\n   *\n   * Loading is the one state where nothing happens: the mark is a spinner then, and a spinner you\n   * can press is a lie.\n   */\n  const press = () => {\n    if (controller.status === \"loading\") return;\n    if (controller.status === \"error\" || controller.items.length > 0) controller.refresh();\n    else controller.ask();\n  };\n\n  return (\n    <Ctx.Provider\n      value={{\n        candidates: controller.items,\n        status: controller.status,\n        error: controller.error,\n        active,\n        ask: press,\n        pick,\n        dismiss: controller.dismiss,\n      }}\n    >\n      <ark.div\n        className={cn(\"flex w-full min-w-0 flex-col gap-2\", className)}\n        onBlur={(event) => {\n          onBlur?.(event);\n          // `relatedTarget` is where focus is going. Inside our own subtree it is a pill being\n          // clicked or the ✨ being tabbed to, and the strip must survive both.\n          if (!event.currentTarget.contains(event.relatedTarget)) setActive(false);\n        }}\n        onFocus={(event) => {\n          onFocus?.(event);\n          setActive(true);\n          if (trigger === \"focus\") controller.ask();\n        }}\n        {...rest}\n        data-slot={slot ?? \"suggest\"}\n      >\n        {children}\n      </ark.div>\n    </Ctx.Provider>\n  );\n}\n\n/**\n * The ✨ — **a mark, not a door.**\n *\n * At rest it says the field is model-assisted, which a reader can see without touching anything.\n * Pressing it asks. It no longer opens or closes a layer, so there is no `data-state` to light it\n * from and nothing to trap focus in.\n */\nexport function SuggestMark(\n  props: Omit<AiMarkProps, \"busy\" | \"offering\"> & {\n    /**\n     * The accessible name while candidates are on offer, when `label` names the mark at rest.\n     *\n     * @default \"Suggest different values\"\n     */\n    offeringLabel?: string;\n  }\n) {\n  const { label = \"Suggest\", offeringLabel = \"Suggest different values\", onClick, ...rest } = props;\n  const ctx = useCtx(\"SuggestMark\");\n  // Bound exactly as `CompleteMark` binds it. A mark that paints one way over a ghost and another\n  // over a strip reads as two products; `ai-mark.test.tsx` is the guard on that.\n  const offering = ctx.candidates.length > 0;\n\n  return (\n    <AiMark\n      busy={ctx.status === \"loading\" && !offering}\n      label={offering ? offeringLabel : label}\n      offering={offering}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) ctx.ask();\n      }}\n      {...rest}\n    />\n  );\n}\n\nexport interface SuggestListProps extends React.ComponentProps<typeof Suggestions> {\n  /** Shown while the source is answering and has produced nothing yet. */\n  pending?: React.ReactNode;\n  /** Shown when the source finished with nothing to offer. */\n  empty?: React.ReactNode;\n}\n\n/**\n * The strip, and the only part that decides whether anything is on screen.\n *\n * It renders `Suggestions` from `@kanzo-tech/ui` — a row of buttons that knows nothing about a\n * model — so everything model-shaped stays on this side of the boundary: the ✨, the engine, and\n * the rationale that comes back with a candidate.\n *\n * The rationale is the highlighted pill's `title` rather than a line under the strip. The line was\n * tried and it moved the layout on every hover; a `title` is the browser's own tooltip, reaches the\n * keyboard through focus, and costs no box.\n */\nexport function SuggestList(props: SuggestListProps) {\n  const { className, empty, pending, slot, ...rest } = props;\n  const ctx = useCtx(\"SuggestList\");\n\n  if (!ctx.active) return null;\n\n  const body =\n    ctx.error !== null ? (\n      <ark.p className=\"text-destructive-foreground text-sm\" data-slot=\"suggest-error\">\n        {ctx.error}\n      </ark.p>\n    ) : ctx.candidates.length > 0 ? (\n      ctx.candidates.map((candidate) => {\n        const label = candidate.label ?? candidate.value;\n        return (\n          // **Two buttons, so a group — not a ✕ inside the pill.** `Suggestion` *is* a\n          // `<button>`, and a button inside a button is not a thing the DOM has; the dismiss has\n          // to be a sibling. `ButtonGroup` is the house cluster: it collapses the inner radii and\n          // overlaps the shared border, so the pair reads as one pill with a divided end, and it\n          // requires the accessible name that a `role=\"group\"` owes.\n          <ButtonGroup aria-label={label} key={candidate.value} slot=\"suggest-item\">\n            <Suggestion onSelect={ctx.pick} title={candidate.rationale} value={candidate.value}>\n              {label}\n            </Suggestion>\n            {/* Always drawn, never on hover: a hover-only control is unreachable by a keyboard and\n                absent on a touch pointer, and this strip is explicitly reachable by Tab. */}\n            <Button\n              aria-label={`Dismiss ${label}`}\n              className=\"h-auto min-h-[24px] self-stretch px-2 py-1\"\n              onClick={() => ctx.dismiss(candidate.value)}\n              pill\n              size=\"sm\"\n              slot=\"suggest-dismiss\"\n              variant=\"outline\"\n            >\n              <XIcon />\n            </Button>\n          </ButtonGroup>\n        );\n      })\n    ) : ctx.status === \"loading\" ? (\n      (pending ?? (\n        <ark.span\n          className=\"inline-flex items-center gap-2 text-muted-foreground text-sm\"\n          data-slot=\"suggest-pending\"\n        >\n          <Spinner aria-hidden />\n          Thinking…\n        </ark.span>\n      ))\n    ) : ctx.status === \"ready\" ? (\n      (empty ?? (\n        <ark.span className=\"text-muted-foreground text-sm\" data-slot=\"suggest-empty\">\n          Nothing to suggest.\n        </ark.span>\n      ))\n    ) : null;\n\n  if (body === null) return null;\n\n  return (\n    <Suggestions className={cn(\"min-h-8\", className)} {...rest} slot={slot ?? \"suggest-list\"}>\n      {body}\n    </Suggestions>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAwBA;AAEE;AACA;AACA;AACF;AA+CO;AACL;AAAM;AACJ;AACA;AACA;AACA;AACU;AACV;AACA;AACA;AACA;AACA;AACG;AAOH;AAGwB;AAgBxB;AAEgB;AAGlB;AACE;AAAK;AAAJ;AACQ;AACkB;AACJ;AACD;AAClB;AACK;AACL;AACoB;AAAA;AAGtB;AAAK;AAAJ;AAC8D;AAE3D;AAGuE;AACzE;AAEE;AAEoC;AACtC;AACI;AACe;AAElB;AAAA;AAAA;AACH;AAGN;AASO;AAUL;AAMA;AACE;AAAC;AAAA;AACoC;AACD;AAClC;AAEE;AACiC;AACnC;AACI;AAAA;AAGV;AAoBO;AACL;AAGA;AAEA;AAOM;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOI;AAEA;AAGA;AAAC;AAAA;AAC6B;AAClB;AACgC;AACtC;AACC;AACA;AACG;AAED;AAAA;AAAA;AAEX;AAAA;AAKF;AAAK;AAAJ;AACW;AACA;AAEV;AAAqB;AAAE;AAAA;AAAA;AAY/B;AAOF;;;;;;"}

package/package.json

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