@kanzo-tech/ai 0.1.0

package/dist/suggest.d.ts

@@ -0,0 +1,75 @@
+import { ark } from '@ark-ui/react/factory';
+import { Suggestions } from '@kanzo-tech/ui';
+import { AiMarkProps } from './ai-mark.js';
+import { Candidate } from './types.js';
+import * as React from "react";
+/** When the source is asked. */
+export type SuggestTrigger = 
+/** On a press of the ✨. Nothing is requested until somebody asks for it. */
+"press"
+/** As soon as the field takes focus. Prefetches, and bills a model for a tab-through. */
+ | "focus";
+export interface SuggestRootProps extends Omit<React.ComponentProps<typeof ark.div>, "onSelect"> {
+    /** The source. Yields candidates; honour the `AbortSignal`. */
+    suggest: (signal?: AbortSignal) => AsyncIterable<Candidate>;
+    /** What the field already holds — these are never offered back. */
+    existing?: string[];
+    /** Where a chosen value goes. */
+    onPick: (value: string) => void;
+    /**
+     * How many to take from the stream.
+     *
+     * @default 6
+     */
+    limit?: number;
+    /**
+     * @default "press"
+     */
+    trigger?: SuggestTrigger;
+}
+/**
+ * Candidate values for one field, offered **in the flow underneath it**.
+ *
+ * This replaced a popover, and the popover is the whole story. Hiding the candidates behind a door
+ * bought nothing and cost six workarounds, every one of them downstream of the door and not of the
+ * candidates: a non-modal popover, because a modal one put `pointer-events: none` on the very field
+ * the values were for; a `data-autofocus`, because a popover has to hand focus somewhere; a
+ * `Delete`/`Backspace` handler, because a button inside `role="option"` is unreachable by Tab; a
+ * shared label id, because a popover names itself from a title and a listbox from a label; a ✕ that
+ * had to be quieted because an offer looked identical to a committed tag; and a three-row window
+ * with a refill loop in the hook to keep it full. None of them exist here.
+ *
+ * **Focus decides visibility, a press decides billing**, and they are deliberately not the same
+ * gesture. The strip appears while the field has focus and there is something to show — which is
+ * what keeps a form of eleven fields from becoming a wall, since only one field is focused at a
+ * time. Asking is `trigger`, and it defaults to a press: a source that fires on focus bills a model
+ * for a tab-through, and that is a decision a caller should make on purpose.
+ */
+export declare function SuggestRoot(props: SuggestRootProps): React.JSX.Element;
+/**
+ * The ✨ — **a mark, not a door.**
+ *
+ * At rest it says the field is model-assisted, which a reader can see without touching anything.
+ * 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 interface SuggestListProps extends React.ComponentProps<typeof Suggestions> {
+    /** Shown while the source is answering and has produced nothing yet. */
+    pending?: React.ReactNode;
+    /** Shown when the source finished with nothing to offer. */
+    empty?: React.ReactNode;
+}
+/**
+ * The strip, and the only part that decides whether anything is on screen.
+ *
+ * It renders `Suggestions` from `@kanzo-tech/ui` — a row of buttons that knows nothing about a
+ * model — so everything model-shaped stays on this side of the boundary: the ✨, the engine, and
+ * the rationale that comes back with a candidate.
+ *
+ * The rationale is the highlighted pill's `title` rather than a line under the strip. The line was
+ * tried and it moved the layout on every hover; a `title` is the browser's own tooltip, reaches the
+ * keyboard through focus, and costs no box.
+ */
+export declare function SuggestList(props: SuggestListProps): React.JSX.Element | null;
+//# sourceMappingURL=suggest.d.ts.map

package/dist/suggest.d.ts.map

@@ -0,0 +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"}

package/dist/suggest.js

@@ -0,0 +1,123 @@
+"use client";
+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";
+const S = f.createContext(null), k = (o) => {
+  const n = f.useContext(S);
+  if (!n) throw new Error(`${o} must render inside <SuggestRoot>`);
+  return n;
+};
+function I(o) {
+  const {
+    suggest: n,
+    existing: l,
+    onPick: c,
+    limit: a,
+    trigger: u = "press",
+    children: t,
+    className: m,
+    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);
+  }, C = () => {
+    s.status !== "loading" && (s.status === "error" || s.items.length > 0 ? s.refresh() : s.ask());
+  };
+  return /* @__PURE__ */ r(
+    S.Provider,
+    {
+      value: {
+        candidates: s.items,
+        status: s.status,
+        error: s.error,
+        active: b,
+        ask: C,
+        pick: y,
+        dismiss: s.dismiss
+      },
+      children: /* @__PURE__ */ r(
+        d.div,
+        {
+          className: h("flex w-full min-w-0 flex-col gap-2", m),
+          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();
+          },
+          ...N,
+          "data-slot": v ?? "suggest",
+          children: t
+        }
+      )
+    }
+  );
+}
+function X(o) {
+  const { label: n = "Suggest", onClick: l, ...c } = o, a = k("SuggestMark"), u = a.candidates.length > 0;
+  return /* @__PURE__ */ r(
+    A,
+    {
+      busy: a.status === "loading" && !u,
+      label: u ? "Suggest different values" : n,
+      offering: u,
+      onClick: (t) => {
+        l == null || l(t), t.defaultPrevented || a.ask();
+      },
+      ...c
+    }
+  );
+}
+function q(o) {
+  const { className: n, empty: l, pending: c, slot: a, ...u } = 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 g = e.label ?? e.value;
+    return (
+      // **Two buttons, so a group — not a ✕ inside the pill.** `Suggestion` *is* a
+      // `<button>`, and a button inside a button is not a thing the DOM has; the dismiss has
+      // 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__ */ r(
+          R,
+          {
+            "aria-label": `Dismiss ${g}`,
+            className: "h-auto min-h-[24px] self-stretch px-2 py-1",
+            onClick: () => t.dismiss(e.value),
+            pill: !0,
+            size: "sm",
+            slot: "suggest-dismiss",
+            variant: "outline",
+            children: /* @__PURE__ */ r(w, {})
+          }
+        )
+      ] }, e.value)
+    );
+  }) : t.status === "loading" ? c ?? /* @__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 }),
+        "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 });
+}
+export {
+  q as SuggestList,
+  X as SuggestMark,
+  I as SuggestRoot
+};
+//# sourceMappingURL=suggest.js.map

package/dist/suggest.js.map

@@ -0,0 +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;;;;;;"}

package/dist/task.d.ts

@@ -0,0 +1,48 @@
+import { ark } from '@ark-ui/react/factory';
+import * as React from "react";
+/**
+ * The life of one step. Shared with `Tool`, which imports it — a tool call is a step with a name,
+ * and giving the two their own four-word vocabularies is how they end up disagreeing.
+ */
+export type RunState = "pending" | "running" | "done" | "failed";
+/** The word for each state, in one place because `Tool`'s badge says the same four. */
+export declare const RUN_LABEL: Record<RunState, string>;
+/**
+ * The mark for each state — **shared with `Tool`, which imports it.** One icon family at one
+ * stroke weight, tinted by the family's own `-foreground` token, which for a status family is the
+ * readable-on-the-page variant rather than ink on a fill (`tokens.css` states both meanings).
+ *
+ * This was four `Status` dots, and `Status` is a presence dot: its recipe carries `ring-2
+ * ring-background`, a halo for sitting on an avatar, which cut a 2px hole in the rail the marks
+ * stand on. Fighting it took a `size-4` override of `size="lg"`'s 12px and a `bg-transparent
+ * ring-1` hollowing for pending — a primitive argued with in three places is the wrong primitive.
+ * `Tool` already drew these four states as icons; now there is one drawing of them, not two.
+ *
+ * Unsized on purpose: the parent sizes the glyph, so the same table serves a 16px rail mark and a
+ * 12px badge icon.
+ */
+export declare const RUN_MARK: Record<RunState, React.ReactNode>;
+export declare const TaskList: (props: React.ComponentProps<typeof ark.ol>) => React.JSX.Element;
+export interface TaskProps extends React.ComponentProps<typeof ark.li> {
+    state?: RunState;
+}
+/**
+ * One labelled step. The state is declared here and read off `data-state` by the parts.
+ *
+ * The rail through the markers is the step's own `::after` rather than a border on the list: a run
+ * of five has to read as one run, and the last step must not trail a line into nothing.
+ */
+export declare const Task: (props: TaskProps) => React.JSX.Element;
+export declare const TaskTitle: (props: React.ComponentProps<typeof ark.span>) => React.JSX.Element;
+/**
+ * The step's marker — {@link RUN_MARK} for this step's state, in a box the rail runs out of.
+ *
+ * The mark is decorative to a screen reader; the word beside it is what carries the state, and it
+ * is written here as `sr-only` rather than assumed of the title. Pass children to say it in your
+ * own words.
+ *
+ * The box is `size-5` and centred so the mark lands on the first line's optical centre: `text-sm`
+ * is a 20px line box, and a marker aligned to the top of a wrapping title sits above its own text.
+ */
+export declare const TaskStatus: (props: React.ComponentProps<typeof ark.span>) => React.JSX.Element;
+//# sourceMappingURL=task.d.ts.map

package/dist/task.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"task.d.ts","sourceRoot":"","sources":["../src/task.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEjE,uFAAuF;AACvF,eAAO,MAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,MAAM,CAK9C,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAKtD,CAAC;AAkBF,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAalE,CAAC;AAEF,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC;IACpE,KAAK,CAAC,EAAE,QAAQ,CAAC;CAClB;AAED;;;;;GAKG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAoBpC,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAUrE,CAAC;AAEF;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,sBAmBtE,CAAC"}

package/dist/task.js

@@ -0,0 +1,91 @@
+"use client";
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { ark as o } from "@ark-ui/react/factory";
+import { CircleXIcon as f, CircleCheckIcon as m, CircleDashedIcon as g } from "lucide-react";
+import * as c from "react";
+import { cn as l, Spinner as p } from "@kanzo-tech/ui";
+const x = {
+  pending: "Pending",
+  running: "Running",
+  done: "Done",
+  failed: "Failed"
+}, k = {
+  pending: /* @__PURE__ */ s(g, { className: "text-muted-foreground" }),
+  running: /* @__PURE__ */ s(p, { "aria-hidden": !0, className: "text-info-foreground" }),
+  done: /* @__PURE__ */ s(m, { className: "text-success-foreground" }),
+  failed: /* @__PURE__ */ s(f, { className: "text-destructive-foreground" })
+}, N = [
+  "min-w-0 flex-1 truncate leading-5",
+  "group-data-[state=pending]/task:text-muted-foreground",
+  "group-data-[state=failed]/task:text-destructive-foreground"
+].join(" "), d = c.createContext(null), h = (e) => {
+  const t = c.useContext(d);
+  if (!t) throw new Error(`${e} must render inside <Task>`);
+  return t;
+}, R = (e) => {
+  const { className: t, slot: a, ...r } = e;
+  return /* @__PURE__ */ s(
+    o.ol,
+    {
+      className: l("flex w-full list-none flex-col gap-2", t),
+      role: "list",
+      ...r,
+      "data-slot": a ?? "task-list"
+    }
+  );
+}, b = (e) => {
+  const { state: t = "pending", className: a, children: r, slot: i, ...n } = e;
+  return /* @__PURE__ */ s(d.Provider, { value: { state: t }, children: /* @__PURE__ */ s(
+    o.li,
+    {
+      className: l(
+        "group/task relative flex w-full items-start gap-2.5 text-sm",
+        "after:absolute after:top-5 after:-bottom-2 after:start-2.5 after:w-px after:bg-border",
+        "last:after:hidden",
+        a
+      ),
+      "data-state": t,
+      ...n,
+      "data-slot": i ?? "task",
+      children: r
+    }
+  ) });
+}, j = (e) => {
+  const { className: t, slot: a, ...r } = e;
+  return /* @__PURE__ */ s(
+    o.span,
+    {
+      className: l(N, t),
+      ...r,
+      "data-slot": a ?? "task-title"
+    }
+  );
+}, z = (e) => {
+  const { className: t, children: a, slot: r, ...i } = e, { state: n } = h("TaskStatus");
+  return /* @__PURE__ */ u(
+    o.span,
+    {
+      className: l(
+        "relative z-10 flex size-5 shrink-0 items-center justify-center",
+        "[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
+        t
+      ),
+      "data-state": n,
+      ...i,
+      "data-slot": r ?? "task-status",
+      children: [
+        k[n],
+        /* @__PURE__ */ s(o.span, { className: "sr-only", children: a ?? x[n] })
+      ]
+    }
+  );
+};
+export {
+  x as RUN_LABEL,
+  k as RUN_MARK,
+  b as Task,
+  R as TaskList,
+  z as TaskStatus,
+  j as TaskTitle
+};
+//# sourceMappingURL=task.js.map

package/dist/task.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"task.js","sources":["../src/task.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { CircleCheckIcon, CircleDashedIcon, CircleXIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport { cn, Spinner } from \"@kanzo-tech/ui\";\n\n/**\n * The life of one step. Shared with `Tool`, which imports it — a tool call is a step with a name,\n * and giving the two their own four-word vocabularies is how they end up disagreeing.\n */\nexport type RunState = \"pending\" | \"running\" | \"done\" | \"failed\";\n\n/** The word for each state, in one place because `Tool`'s badge says the same four. */\nexport const RUN_LABEL: Record<RunState, string> = {\n  pending: \"Pending\",\n  running: \"Running\",\n  done: \"Done\",\n  failed: \"Failed\",\n};\n\n/**\n * The mark for each state — **shared with `Tool`, which imports it.** One icon family at one\n * stroke weight, tinted by the family's own `-foreground` token, which for a status family is the\n * readable-on-the-page variant rather than ink on a fill (`tokens.css` states both meanings).\n *\n * This was four `Status` dots, and `Status` is a presence dot: its recipe carries `ring-2\n * ring-background`, a halo for sitting on an avatar, which cut a 2px hole in the rail the marks\n * stand on. Fighting it took a `size-4` override of `size=\"lg\"`'s 12px and a `bg-transparent\n * ring-1` hollowing for pending — a primitive argued with in three places is the wrong primitive.\n * `Tool` already drew these four states as icons; now there is one drawing of them, not two.\n *\n * Unsized on purpose: the parent sizes the glyph, so the same table serves a 16px rail mark and a\n * 12px badge icon.\n */\nexport const RUN_MARK: Record<RunState, React.ReactNode> = {\n  pending: <CircleDashedIcon className=\"text-muted-foreground\" />,\n  running: <Spinner aria-hidden className=\"text-info-foreground\" />,\n  done: <CircleCheckIcon className=\"text-success-foreground\" />,\n  failed: <CircleXIcon className=\"text-destructive-foreground\" />,\n};\n\n/** The state reaches the title through the root's `data-state`, so the title needs no context. */\n// One weight across the five rows. The mark already says which step is running and which failed,\n// and a second emphasis on the same fact reads as three type styles in a five-row list.\nconst TITLE = [\n  \"min-w-0 flex-1 truncate leading-5\",\n  \"group-data-[state=pending]/task:text-muted-foreground\",\n  \"group-data-[state=failed]/task:text-destructive-foreground\",\n].join(\" \");\n\nconst Ctx = React.createContext<{ state: RunState } | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <Task>`);\n  return c;\n};\n\nexport const TaskList = (props: React.ComponentProps<typeof ark.ol>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.ol\n      className={cn(\"flex w-full list-none flex-col gap-2\", className)}\n      // `role=\"list\"`, because `list-none` takes the implicit one away in WebKit. See\n      // `DiagnosticList` in `@kanzo-tech/ui` for the argument.\n      role=\"list\"\n      {...rest}\n      data-slot={slot ?? \"task-list\"}\n    />\n  );\n};\n\nexport interface TaskProps extends React.ComponentProps<typeof ark.li> {\n  state?: RunState;\n}\n\n/**\n * One labelled step. The state is declared here and read off `data-state` by the parts.\n *\n * The rail through the markers is the step's own `::after` rather than a border on the list: a run\n * of five has to read as one run, and the last step must not trail a line into nothing.\n */\nexport const Task = (props: TaskProps) => {\n  const { state = \"pending\", className, children, slot, ...rest } = props;\n\n  return (\n    <Ctx.Provider value={{ state }}>\n      <ark.li\n        className={cn(\n          \"group/task relative flex w-full items-start gap-2.5 text-sm\",\n          \"after:absolute after:top-5 after:-bottom-2 after:start-2.5 after:w-px after:bg-border\",\n          \"last:after:hidden\",\n          className\n        )}\n        data-state={state}\n        {...rest}\n        data-slot={slot ?? \"task\"}\n      >\n        {children}\n      </ark.li>\n    </Ctx.Provider>\n  );\n};\n\nexport const TaskTitle = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(TITLE, className)}\n      {...rest}\n      data-slot={slot ?? \"task-title\"}\n    />\n  );\n};\n\n/**\n * The step's marker — {@link RUN_MARK} for this step's state, in a box the rail runs out of.\n *\n * The mark is decorative to a screen reader; the word beside it is what carries the state, and it\n * is written here as `sr-only` rather than assumed of the title. Pass children to say it in your\n * own words.\n *\n * The box is `size-5` and centred so the mark lands on the first line's optical centre: `text-sm`\n * is a 20px line box, and a marker aligned to the top of a wrapping title sits above its own text.\n */\nexport const TaskStatus = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, children, slot, ...rest } = props;\n  const { state } = useCtx(\"TaskStatus\");\n\n  return (\n    <ark.span\n      className={cn(\n        \"relative z-10 flex size-5 shrink-0 items-center justify-center\",\n        \"[&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0\",\n        className\n      )}\n      data-state={state}\n      {...rest}\n      data-slot={slot ?? \"task-status\"}\n    >\n      {RUN_MARK[state]}\n      <ark.span className=\"sr-only\">{children ?? RUN_LABEL[state]}</ark.span>\n    </ark.span>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAcO;AAA4C;AACxC;AACA;AACH;AAER;AAgB2D;AACI;AACE;AACJ;AAE7D;AAKc;AACZ;AACA;AAEF;AAIE;AACA;AACA;AACF;AAGE;AAEA;AACE;AAAK;AAAJ;AACgE;AAG1D;AACD;AACe;AAAA;AAGzB;AAaE;AAEA;AAEI;AAAK;AAAJ;AACY;AACT;AACA;AACA;AACA;AAAA;AAEU;AACR;AACe;AAElB;AAAA;AAIT;AAGE;AAEA;AACE;AAAK;AAAJ;AAC+B;AAC1B;AACe;AAAA;AAGzB;AAaE;AAGA;AACE;AAAK;AAAJ;AACY;AACT;AACA;AACA;AAAA;AAEU;AACR;AACe;AAElB;AAAc;AAC6C;AAAA;AAAA;AAGlE;;;;;;;;;"}

package/dist/tool.d.ts

@@ -0,0 +1,56 @@
+import { ark } from '@ark-ui/react/factory';
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@kanzo-tech/ui';
+import { RunState } from './task.js';
+import * as React from "react";
+export interface ToolProps extends React.ComponentProps<typeof ark.div> {
+    state?: RunState;
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: React.ComponentProps<typeof Collapsible>["onOpenChange"];
+}
+/**
+ * One call the model made, folded away until it has an answer — reaching `done` or `failed` opens
+ * it, and the reader's own toggle ends that for good.
+ *
+ * **It opens on the transition, not on the initial value, and that distinction is the whole of it.**
+ * This was `defaultOpen={defaultOpen ?? state === "done"}`, which Ark's Collapsible reads once at
+ * mount: a tool mounted the moment the model plans it — state `pending` — never opened again, not
+ * when it finished and not when it failed. Failing silently closed is the worse half: the reason
+ * the call failed sat behind a click nobody knew to make. The docblock claimed the opposite, and a
+ * showcase had to work around it before anyone noticed.
+ *
+ * A caller passing `open` still wins outright; `defaultOpen` still decides the first paint.
+ *
+ * The state sits on a wrapper rather than on the collapsible, and that is not tidiness: Ark writes
+ * its own `data-state` (`open` / `closed`) on the machine's root, so a tool state written there
+ * replaces it — the parts keep working, and every `[data-state=open]` a consumer wrote stops
+ * matching, with nothing to see in a diff.
+ */
+export declare const Tool: (props: ToolProps) => React.JSX.Element;
+/**
+ * The row that says a call happened: the wrench, the tool's name in the face its arguments are
+ * written in, the state as a pill, and the chevron the whole row toggles.
+ */
+export declare const ToolHeader: (props: React.ComponentProps<typeof CollapsibleTrigger>) => React.JSX.Element;
+export declare const ToolContent: (props: React.ComponentProps<typeof CollapsibleContent>) => React.JSX.Element;
+export interface ToolIoProps extends React.ComponentProps<typeof ark.div> {
+    /** Drawn as a JSON tree when there are no children. */
+    data?: unknown;
+    /** The small heading over the panel. `null` drops it. */
+    label?: string | null;
+}
+/**
+ * What was passed to the call — **children, not a formatted-JSON prop.**
+ *
+ * The reference takes `input` and renders it as JSON because a general chatbot cannot know what
+ * the tool was. We always know: our input is a SQL statement and our output is a result table, and
+ * both have a component in this house already. So the payload is composition, and JSON is only the
+ * default for when the caller has nothing better — never the one thing on offer.
+ *
+ * Which is also why the panel does not force a monospace face on everything inside it: a result
+ * table set in mono is the cost of a default that assumed JSON. Code sets itself.
+ */
+export declare const ToolInput: (props: ToolIoProps) => React.JSX.Element;
+/** What came back. Children, for the same reason as {@link ToolInput}. */
+export declare const ToolOutput: (props: ToolIoProps) => React.JSX.Element;
+//# sourceMappingURL=tool.d.ts.map

package/dist/tool.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.d.ts","sourceRoot":"","sources":["../src/tool.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAE5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,WAAW,EACX,kBAAkB,EAElB,kBAAkB,EAEnB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAuB,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AA6B/D,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACrE,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,cAAc,CAAC,CAAC;CACzE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,IAAI,GAAI,OAAO,SAAS,sBAwCpC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAwBhF,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,sBAejF,CAAC;AAEF,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC;IACvE,uDAAuD;IACvD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,SAAS,GAAI,OAAO,WAAW,sBAoB3C,CAAC;AAEF,0EAA0E;AAC1E,eAAO,MAAM,UAAU,GAAI,OAAO,WAAW,sBA8B5C,CAAC"}

package/dist/tool.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsx as t, jsxs as p, Fragment as N } from "react/jsx-runtime";
+import { ark as c } from "@ark-ui/react/factory";
+import { WrenchIcon as E } from "lucide-react";
+import * as d from "react";
+import { Collapsible as k, cn as i, CollapsibleContent as y, CollapsibleTrigger as L, Badge as O, CollapsibleIndicator as A, JsonTreeView as b } from "@kanzo-tech/ui";
+import { RUN_MARK as _, RUN_LABEL as j } from "./task.js";
+const z = {
+  pending: "outline",
+  running: "info",
+  done: "success",
+  failed: "destructive"
+}, v = "mb-1.5 block font-medium text-muted-foreground text-xs uppercase tracking-wide", w = [
+  "min-w-0 overflow-x-auto",
+  "rounded-lg bg-muted",
+  "px-3 py-2 text-xs",
+  "[&_code]:font-mono"
+].join(" "), C = d.createContext(null), B = (o) => {
+  const e = d.useContext(C);
+  if (!e) throw new Error(`${o} must render inside <Tool>`);
+  return e;
+}, F = (o) => {
+  const { state: e = "pending", defaultOpen: l, open: n, onOpenChange: a, className: s, children: u, slot: r, ...T } = o, m = e === "done" || e === "failed", [R, f] = d.useState(l ?? m), x = d.useRef(!1), h = d.useRef(m);
+  return d.useEffect(() => {
+    !x.current && m && !h.current && f(!0), h.current = m;
+  }, [m]), /* @__PURE__ */ t(C.Provider, { value: { state: e }, children: /* @__PURE__ */ t(
+    c.div,
+    {
+      className: i(
+        "group/tool w-full overflow-hidden",
+        "rounded-xl border bg-card shadow-xs/5",
+        s
+      ),
+      "data-state": e,
+      ...T,
+      "data-slot": r ?? "tool",
+      children: /* @__PURE__ */ t(
+        k,
+        {
+          onOpenChange: (g) => {
+            x.current = !0, f(g.open), a == null || a(g);
+          },
+          open: n ?? R,
+          slot: "tool-collapsible",
+          children: u
+        }
+      )
+    }
+  ) });
+}, J = (o) => {
+  const { className: e, children: l, slot: n, ...a } = o, { state: s } = B("ToolHeader");
+  return /* @__PURE__ */ p(
+    L,
+    {
+      className: i(
+        "flex min-h-[24px] w-full items-center gap-2.5 px-3 py-2.5 text-sm",
+        "transition-colors hover:bg-accent motion-reduce:transition-none!",
+        "[&_svg:not([class*='size-'])]:size-4",
+        e
+      ),
+      ...a,
+      slot: n ?? "tool-header",
+      children: [
+        /* @__PURE__ */ t(E, { className: "shrink-0 text-muted-foreground" }),
+        /* @__PURE__ */ t("span", { className: "min-w-0 flex-1 truncate text-start font-medium font-mono", children: l }),
+        /* @__PURE__ */ p(O, { "data-state": s, pill: !0, size: "sm", slot: "tool-badge", variant: z[s], children: [
+          _[s],
+          j[s]
+        ] }),
+        /* @__PURE__ */ t(A, { className: "shrink-0 text-muted-foreground" })
+      ]
+    }
+  );
+}, K = (o) => {
+  const { className: e, slot: l, ...n } = o;
+  return /* @__PURE__ */ t(
+    y,
+    {
+      className: i("flex min-w-0 flex-col gap-4 border-t px-3 py-3", e),
+      ...n,
+      slot: l ?? "tool-content"
+    }
+  );
+}, M = (o) => {
+  const { data: e, label: l = "Parameters", className: n, children: a, slot: s, ...u } = o, r = a ?? (e === void 0 ? null : /* @__PURE__ */ t(b, { data: e }));
+  return /* @__PURE__ */ t(c.div, { className: i("min-w-0", n), ...u, "data-slot": s ?? "tool-input", children: r === null ? null : /* @__PURE__ */ p(N, { children: [
+    l === null ? null : /* @__PURE__ */ t(c.span, { className: v, "data-slot": "tool-label", children: l }),
+    /* @__PURE__ */ t(c.div, { className: w, "data-slot": "tool-panel", children: r })
+  ] }) });
+}, V = (o) => {
+  const { data: e, label: l = "Result", className: n, children: a, slot: s, ...u } = o, r = a ?? (e === void 0 ? null : /* @__PURE__ */ t(b, { data: e }));
+  return /* @__PURE__ */ t(
+    c.div,
+    {
+      className: i("min-w-0", "group-data-[state=failed]/tool:text-destructive-foreground", n),
+      ...u,
+      "data-slot": s ?? "tool-output",
+      children: r === null ? null : /* @__PURE__ */ p(N, { children: [
+        l === null ? null : /* @__PURE__ */ t(c.span, { className: v, "data-slot": "tool-label", children: l }),
+        /* @__PURE__ */ t(
+          c.div,
+          {
+            className: i(
+              w,
+              "group-data-[state=failed]/tool:bg-destructive/7"
+            ),
+            "data-slot": "tool-panel",
+            children: r
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  F as Tool,
+  K as ToolContent,
+  J as ToolHeader,
+  M as ToolInput,
+  V as ToolOutput
+};
+//# sourceMappingURL=tool.js.map

package/dist/tool.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool.js","sources":["../src/tool.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport { WrenchIcon } from \"lucide-react\";\nimport * as React from \"react\";\nimport {\n  Badge,\n  type BadgeVariant,\n  cn,\n  Collapsible,\n  CollapsibleContent,\n  CollapsibleIndicator,\n  CollapsibleTrigger,\n  JsonTreeView,\n} from \"@kanzo-tech/ui\";\nimport { RUN_LABEL, RUN_MARK, type RunState } from \"./task.js\";\n\n/** Which soft badge holds the mark. The mark itself is `Task`'s — one drawing of four states. */\nconst TONE: Record<RunState, BadgeVariant> = {\n  pending: \"outline\",\n  running: \"info\",\n  done: \"success\",\n  failed: \"destructive\",\n};\n\nconst LABEL = \"mb-1.5 block font-medium text-muted-foreground text-xs uppercase tracking-wide\";\n\n// A recess inside the card, and NOT a second frame: the card is already outlined, so a bordered\n// panel inside it draws a box in a box on every call in a transcript. The fill alone is the\n// separation — which is also what the source does (`bg-muted/50`, no border).\nconst PANEL = [\n  \"min-w-0 overflow-x-auto\",\n  \"rounded-lg bg-muted\",\n  \"px-3 py-2 text-xs\",\n  \"[&_code]:font-mono\",\n].join(\" \");\n\nconst Ctx = React.createContext<{ state: RunState } | null>(null);\nconst useCtx = (part: string) => {\n  const c = React.useContext(Ctx);\n  if (!c) throw new Error(`${part} must render inside <Tool>`);\n  return c;\n};\n\nexport interface ToolProps extends React.ComponentProps<typeof ark.div> {\n  state?: RunState;\n  defaultOpen?: boolean;\n  open?: boolean;\n  onOpenChange?: React.ComponentProps<typeof Collapsible>[\"onOpenChange\"];\n}\n\n/**\n * One call the model made, folded away until it has an answer — reaching `done` or `failed` opens\n * it, and the reader's own toggle ends that for good.\n *\n * **It opens on the transition, not on the initial value, and that distinction is the whole of it.**\n * This was `defaultOpen={defaultOpen ?? state === \"done\"}`, which Ark's Collapsible reads once at\n * mount: a tool mounted the moment the model plans it — state `pending` — never opened again, not\n * when it finished and not when it failed. Failing silently closed is the worse half: the reason\n * the call failed sat behind a click nobody knew to make. The docblock claimed the opposite, and a\n * showcase had to work around it before anyone noticed.\n *\n * A caller passing `open` still wins outright; `defaultOpen` still decides the first paint.\n *\n * The state sits on a wrapper rather than on the collapsible, and that is not tidiness: Ark writes\n * its own `data-state` (`open` / `closed`) on the machine's root, so a tool state written there\n * replaces it — the parts keep working, and every `[data-state=open]` a consumer wrote stops\n * matching, with nothing to see in a diff.\n */\nexport const Tool = (props: ToolProps) => {\n  const { state = \"pending\", defaultOpen, open, onOpenChange, className, children, slot, ...rest } =\n    props;\n\n  const settled = state === \"done\" || state === \"failed\";\n  const [selfOpen, setSelfOpen] = React.useState(defaultOpen ?? settled);\n  const touched = React.useRef(false);\n  const wasSettled = React.useRef(settled);\n\n  React.useEffect(() => {\n    if (!touched.current && settled && !wasSettled.current) setSelfOpen(true);\n    wasSettled.current = settled;\n  }, [settled]);\n\n  return (\n    <Ctx.Provider value={{ state }}>\n      <ark.div\n        className={cn(\n          \"group/tool w-full overflow-hidden\",\n          \"rounded-xl border bg-card shadow-xs/5\",\n          className\n        )}\n        data-state={state}\n        {...rest}\n        data-slot={slot ?? \"tool\"}\n      >\n        <Collapsible\n          onOpenChange={(details) => {\n            touched.current = true;\n            setSelfOpen(details.open);\n            onOpenChange?.(details);\n          }}\n          open={open ?? selfOpen}\n          slot=\"tool-collapsible\"\n        >\n          {children}\n        </Collapsible>\n      </ark.div>\n    </Ctx.Provider>\n  );\n};\n\n/**\n * The row that says a call happened: the wrench, the tool's name in the face its arguments are\n * written in, the state as a pill, and the chevron the whole row toggles.\n */\nexport const ToolHeader = (props: React.ComponentProps<typeof CollapsibleTrigger>) => {\n  const { className, children, slot, ...rest } = props;\n  const { state } = useCtx(\"ToolHeader\");\n\n  return (\n    <CollapsibleTrigger\n      className={cn(\n        \"flex min-h-[24px] w-full items-center gap-2.5 px-3 py-2.5 text-sm\",\n        \"transition-colors hover:bg-accent motion-reduce:transition-none!\",\n        \"[&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...rest}\n      slot={slot ?? \"tool-header\"}\n    >\n      <WrenchIcon className=\"shrink-0 text-muted-foreground\" />\n      <span className=\"min-w-0 flex-1 truncate text-start font-medium font-mono\">{children}</span>\n      <Badge data-state={state} pill size=\"sm\" slot=\"tool-badge\" variant={TONE[state]}>\n        {RUN_MARK[state]}\n        {RUN_LABEL[state]}\n      </Badge>\n      <CollapsibleIndicator className=\"shrink-0 text-muted-foreground\" />\n    </CollapsibleTrigger>\n  );\n};\n\nexport const ToolContent = (props: React.ComponentProps<typeof CollapsibleContent>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <CollapsibleContent\n      // `min-w-0`, and it is the whole reason a wide result was being sliced instead of scrolling: a\n      // flex child's default `min-width: auto` refuses to shrink below its content, so the panel\n      // below could carry `overflow-x-auto` all it liked and never get the chance to use it. The\n      // card is `overflow-hidden`, so what the reader saw was a table with its last column cut off\n      // and no scrollbar to recover it.\n      className={cn(\"flex min-w-0 flex-col gap-4 border-t px-3 py-3\", className)}\n      {...rest}\n      slot={slot ?? \"tool-content\"}\n    />\n  );\n};\n\nexport interface ToolIoProps extends React.ComponentProps<typeof ark.div> {\n  /** Drawn as a JSON tree when there are no children. */\n  data?: unknown;\n  /** The small heading over the panel. `null` drops it. */\n  label?: string | null;\n}\n\n/**\n * What was passed to the call — **children, not a formatted-JSON prop.**\n *\n * The reference takes `input` and renders it as JSON because a general chatbot cannot know what\n * the tool was. We always know: our input is a SQL statement and our output is a result table, and\n * both have a component in this house already. So the payload is composition, and JSON is only the\n * default for when the caller has nothing better — never the one thing on offer.\n *\n * Which is also why the panel does not force a monospace face on everything inside it: a result\n * table set in mono is the cost of a default that assumed JSON. Code sets itself.\n */\nexport const ToolInput = (props: ToolIoProps) => {\n  const { data, label = \"Parameters\", className, children, slot, ...rest } = props;\n  const body = children ?? (data === undefined ? null : <JsonTreeView data={data} />);\n\n  return (\n    <ark.div className={cn(\"min-w-0\", className)} {...rest} data-slot={slot ?? \"tool-input\"}>\n      {body === null ? null : (\n        <>\n          {label === null ? null : (\n            <ark.span className={LABEL} data-slot=\"tool-label\">\n              {label}\n            </ark.span>\n          )}\n          <ark.div className={PANEL} data-slot=\"tool-panel\">\n            {body}\n          </ark.div>\n        </>\n      )}\n    </ark.div>\n  );\n};\n\n/** What came back. Children, for the same reason as {@link ToolInput}. */\nexport const ToolOutput = (props: ToolIoProps) => {\n  const { data, label = \"Result\", className, children, slot, ...rest } = props;\n  const body = children ?? (data === undefined ? null : <JsonTreeView data={data} />);\n\n  return (\n    <ark.div\n      className={cn(\"min-w-0\", \"group-data-[state=failed]/tool:text-destructive-foreground\", className)}\n      {...rest}\n      data-slot={slot ?? \"tool-output\"}\n    >\n      {body === null ? null : (\n        <>\n          {label === null ? null : (\n            <ark.span className={LABEL} data-slot=\"tool-label\">\n              {label}\n            </ark.span>\n          )}\n          <ark.div\n            className={cn(\n              PANEL,\n              \"group-data-[state=failed]/tool:bg-destructive/7\"\n            )}\n            data-slot=\"tool-panel\"\n          >\n            {body}\n          </ark.div>\n        </>\n      )}\n    </ark.div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBA;AAA6C;AAClC;AACA;AACH;AAER;AAOc;AACZ;AACA;AACA;AAEF;AAIE;AACA;AACA;AACF;AA4BE;AAQA;AACE;AACqB;AAKnB;AAAK;AAAJ;AACY;AACT;AACA;AACA;AAAA;AAEU;AACR;AACe;AAEnB;AAAC;AAAA;AAEG;AAEe;AACjB;AACc;AACT;AAEJ;AAAA;AAAA;AACH;AAIR;AAOE;AAGA;AACE;AAAC;AAAA;AACY;AACT;AACA;AACA;AACA;AAAA;AAEE;AACU;AAEd;AAAuD;AAC8B;AAElF;AAAc;AACC;AAClB;AACiE;AAAA;AAAA;AAGvE;AAGE;AAEA;AACE;AAAC;AAAA;AAM0E;AACrE;AACU;AAAA;AAGpB;AAqBE;AAGA;AAIS;AAGC;AAIF;AAKV;AAIE;AAGA;AACE;AAAK;AAAJ;AACiG;AAC5F;AACe;AAId;AAGC;AAEF;AAAK;AAAJ;AACY;AACT;AACA;AAAA;AAEQ;AAET;AAAA;AAAA;AAEL;AAAA;AAIR;;;;;;;;"}

package/dist/types.d.ts

@@ -0,0 +1,10 @@
+/** A streamed value candidate produced by `useSuggestions`. */
+export interface Candidate {
+    /** Primitive value committed when the row is picked. */
+    value: string;
+    /** Human label; defaults to `value`. */
+    label?: string;
+    /** Optional rationale shown under the label. */
+    rationale?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,+DAA+D;AAC/D,MAAM,WAAW,SAAS;IACxB,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}