@agentaily/design-system 0.1.0

package/dist/components/ai/Conversation.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+const AX_CONVO_CSS = `
+.ax-convo { position: relative; overflow-y: auto; display: flex; flex-direction: column; }
+.ax-convo__inner { max-width: var(--thread-max); width: 100%; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
+.ax-convo__stick {
+  position: sticky; bottom: 12px; align-self: center; margin-top: -36px;
+  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
+  background: var(--surface-panel); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-full); padding: 6px 12px; box-shadow: var(--shadow-2);
+  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);
+  transition: opacity var(--dur-2) var(--ease-out);
+}
+.ax-convo__stick:hover { color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-convo-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-convo-css";
+  s.textContent = AX_CONVO_CSS;
+  document.head.appendChild(s);
+}
+function Conversation({ children, autoStick = true, className = "", style = {}, ...rest }) {
+  const ref = useRef(null);
+  const stickRef = useRef(true);
+  const [showJump, setShowJump] = React.useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onScroll = () => {
+      const dist = el.scrollHeight - el.scrollTop - el.clientHeight;
+      stickRef.current = dist < 80;
+      setShowJump(dist >= 80);
+    };
+    el.addEventListener("scroll", onScroll, { passive: true });
+    return () => el.removeEventListener("scroll", onScroll);
+  }, []);
+  useEffect(() => {
+    const el = ref.current;
+    if (el && autoStick && stickRef.current) el.scrollTop = el.scrollHeight;
+  });
+  const jump = () => {
+    const el = ref.current;
+    if (el) el.scrollTo({ top: el.scrollHeight, behavior: "smooth" });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-convo", className].filter(Boolean).join(" "), ref, style, ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "ax-convo__inner", children }),
+    showJump ? /* @__PURE__ */ jsx("button", { className: "ax-convo__stick", onClick: jump, children: "↓ Jump to latest" }) : null
+  ] });
+}
+export {
+  Conversation
+};
+//# sourceMappingURL=Conversation.js.map

package/dist/components/ai/Conversation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Conversation.js","sources":["../../../src/components/ai/Conversation.jsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\n\nconst AX_CONVO_CSS = `\n.ax-convo { position: relative; overflow-y: auto; display: flex; flex-direction: column; }\n.ax-convo__inner { max-width: var(--thread-max); width: 100%; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 24px; }\n.ax-convo__stick {\n  position: sticky; bottom: 12px; align-self: center; margin-top: -36px;\n  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;\n  background: var(--surface-panel); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-full); padding: 6px 12px; box-shadow: var(--shadow-2);\n  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted);\n  transition: opacity var(--dur-2) var(--ease-out);\n}\n.ax-convo__stick:hover { color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-convo-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-convo-css\";\n  s.textContent = AX_CONVO_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Conversation({ children, autoStick = true, className = \"\", style = {}, ...rest }) {\n  const ref = useRef(null);\n  const stickRef = useRef(true);\n  const [showJump, setShowJump] = React.useState(false);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    const onScroll = () => {\n      const dist = el.scrollHeight - el.scrollTop - el.clientHeight;\n      stickRef.current = dist < 80;\n      setShowJump(dist >= 80);\n    };\n    el.addEventListener(\"scroll\", onScroll, { passive: true });\n    return () => el.removeEventListener(\"scroll\", onScroll);\n  }, []);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (el && autoStick && stickRef.current) el.scrollTop = el.scrollHeight;\n  });\n\n  const jump = () => {\n    const el = ref.current;\n    if (el) el.scrollTo({ top: el.scrollHeight, behavior: \"smooth\" });\n  };\n\n  return (\n    <div className={[\"ax-convo\", className].filter(Boolean).join(\" \")} ref={ref} style={style} {...rest}>\n      <div className=\"ax-convo__inner\">{children}</div>\n      {showJump ? (\n        <button className=\"ax-convo__stick\" onClick={jump}>↓ Jump to latest</button>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,aAAa,EAAE,UAAU,YAAY,MAAM,YAAY,IAAI,QAAQ,CAAA,GAAI,GAAG,QAAQ;AAChG,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,WAAW,OAAO,IAAI;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,MAAM,SAAS,KAAK;AAEpD,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,UAAM,WAAW,MAAM;AACrB,YAAM,OAAO,GAAG,eAAe,GAAG,YAAY,GAAG;AACjD,eAAS,UAAU,OAAO;AAC1B,kBAAY,QAAQ,EAAE;AAAA,IACxB;AACA,OAAG,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM;AACzD,WAAO,MAAM,GAAG,oBAAoB,UAAU,QAAQ;AAAA,EACxD,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,UAAM,KAAK,IAAI;AACf,QAAI,MAAM,aAAa,SAAS,QAAS,IAAG,YAAY,GAAG;AAAA,EAC7D,CAAC;AAED,QAAM,OAAO,MAAM;AACjB,UAAM,KAAK,IAAI;AACf,QAAI,OAAO,SAAS,EAAE,KAAK,GAAG,cAAc,UAAU,UAAU;AAAA,EAClE;AAEA,8BACG,OAAA,EAAI,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAU,OAAe,GAAG,MAC7F,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,mBAAmB,SAAA,CAAS;AAAA,IAC1C,+BACE,UAAA,EAAO,WAAU,mBAAkB,SAAS,MAAM,8BAAgB,IACjE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/ai/ModelSelector.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Model picker dropdown with the ▣ glyph, descriptions, tags and a check on the active model.
+ */
+export interface ModelOption {
+  value: string;
+  description?: string;
+  /** Small uppercase tag, e.g. "NEW" or "FAST". */
+  tag?: string;
+}
+export interface ModelSelectorProps {
+  /** Selected model id. */
+  value: string;
+  /** Strings or ModelOption objects. */
+  models: Array<string | ModelOption>;
+  onChange?: (value: string) => void;
+  /** Panel alignment. @default "start" */
+  align?: "start" | "end";
+}
+export declare function ModelSelector(props: ModelSelectorProps): JSX.Element;

package/dist/components/ai/ModelSelector.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+const AX_MODELSEL_CSS = `
+.ax-modelsel { position: relative; display: inline-flex; }
+.ax-modelsel__trigger {
+  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
+  background: transparent; color: var(--text-body);
+  border: 1px solid var(--border-default); border-radius: var(--radius-2);
+  padding: 6px 10px; font-family: var(--font-mono); font-size: var(--text-sm);
+  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
+}
+.ax-modelsel__trigger:hover { border-color: var(--border-strong); background: var(--surface-raised); }
+.ax-modelsel__trigger:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-modelsel__glyph { color: var(--text-faint); }
+.ax-modelsel__chev { width: 12px; height: 12px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }
+.ax-modelsel--open .ax-modelsel__chev { transform: rotate(180deg); }
+.ax-modelsel__panel {
+  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 280px;
+  background: var(--surface-panel); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1);
+  animation: ax-modelsel-in var(--dur-2) var(--ease-out);
+}
+.ax-modelsel__panel--end { left: auto; right: 0; }
+.ax-modelsel__item { display: flex; align-items: flex-start; gap: 10px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 9px 10px; border-radius: var(--radius-2); transition: background var(--dur-1) var(--ease-out); }
+.ax-modelsel__item:hover { background: var(--surface-raised); }
+.ax-modelsel__check { width: 16px; flex: none; color: var(--accent); padding-top: 2px; }
+.ax-modelsel__check svg { width: 14px; height: 14px; display: block; }
+.ax-modelsel__body { flex: 1; min-width: 0; }
+.ax-modelsel__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); display: flex; align-items: center; gap: 8px; }
+.ax-modelsel__desc { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; line-height: var(--leading-snug); }
+.ax-modelsel__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 1px 4px; }
+@keyframes ax-modelsel-in { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .ax-modelsel__panel { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-modelsel-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-modelsel-css";
+  s.textContent = AX_MODELSEL_CSS;
+  document.head.appendChild(s);
+}
+const Check = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+const Chev = /* @__PURE__ */ jsx("svg", { className: "ax-modelsel__chev", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+function ModelSelector({ value, models = [], onChange, align = "start", className = "", ...rest }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const current = models.find((m) => (typeof m === "string" ? m : m.value) === value);
+  const currentLabel = current ? typeof current === "string" ? current : current.value : value;
+  const onDoc = useCallback((e) => {
+    if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", onDoc);
+      const onKey = (e) => {
+        if (e.key === "Escape") setOpen(false);
+      };
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDoc);
+        document.removeEventListener("keydown", onKey);
+      };
+    }
+  }, [open, onDoc]);
+  return /* @__PURE__ */ jsxs("span", { className: ["ax-modelsel", open ? "ax-modelsel--open" : "", className].filter(Boolean).join(" "), ref, ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-modelsel__trigger", onClick: () => setOpen((o) => !o), children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-modelsel__glyph", children: "▣" }),
+      currentLabel,
+      Chev
+    ] }),
+    open ? /* @__PURE__ */ jsx("div", { className: "ax-modelsel__panel" + (align === "end" ? " ax-modelsel__panel--end" : ""), role: "listbox", children: models.map((m) => {
+      const model = typeof m === "string" ? { value: m } : m;
+      const selected = model.value === value;
+      return /* @__PURE__ */ jsxs("button", { role: "option", "aria-selected": selected, className: "ax-modelsel__item", onClick: () => {
+        onChange && onChange(model.value);
+        setOpen(false);
+      }, children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-modelsel__check", children: selected ? Check : null }),
+        /* @__PURE__ */ jsxs("span", { className: "ax-modelsel__body", children: [
+          /* @__PURE__ */ jsxs("span", { className: "ax-modelsel__name", children: [
+            model.value,
+            model.tag ? /* @__PURE__ */ jsx("span", { className: "ax-modelsel__tag", children: model.tag }) : null
+          ] }),
+          model.description ? /* @__PURE__ */ jsx("span", { className: "ax-modelsel__desc", children: model.description }) : null
+        ] })
+      ] }, model.value);
+    }) }) : null
+  ] });
+}
+export {
+  ModelSelector
+};
+//# sourceMappingURL=ModelSelector.js.map

package/dist/components/ai/ModelSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModelSelector.js","sources":["../../../src/components/ai/ModelSelector.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_MODELSEL_CSS = `\n.ax-modelsel { position: relative; display: inline-flex; }\n.ax-modelsel__trigger {\n  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;\n  background: transparent; color: var(--text-body);\n  border: 1px solid var(--border-default); border-radius: var(--radius-2);\n  padding: 6px 10px; font-family: var(--font-mono); font-size: var(--text-sm);\n  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n}\n.ax-modelsel__trigger:hover { border-color: var(--border-strong); background: var(--surface-raised); }\n.ax-modelsel__trigger:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-modelsel__glyph { color: var(--text-faint); }\n.ax-modelsel__chev { width: 12px; height: 12px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }\n.ax-modelsel--open .ax-modelsel__chev { transform: rotate(180deg); }\n.ax-modelsel__panel {\n  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 280px;\n  background: var(--surface-panel); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1);\n  animation: ax-modelsel-in var(--dur-2) var(--ease-out);\n}\n.ax-modelsel__panel--end { left: auto; right: 0; }\n.ax-modelsel__item { display: flex; align-items: flex-start; gap: 10px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 9px 10px; border-radius: var(--radius-2); transition: background var(--dur-1) var(--ease-out); }\n.ax-modelsel__item:hover { background: var(--surface-raised); }\n.ax-modelsel__check { width: 16px; flex: none; color: var(--accent); padding-top: 2px; }\n.ax-modelsel__check svg { width: 14px; height: 14px; display: block; }\n.ax-modelsel__body { flex: 1; min-width: 0; }\n.ax-modelsel__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); display: flex; align-items: center; gap: 8px; }\n.ax-modelsel__desc { font-size: var(--text-xs); color: var(--text-faint); margin-top: 2px; line-height: var(--leading-snug); }\n.ax-modelsel__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 1px 4px; }\n@keyframes ax-modelsel-in { from { opacity: 0; transform: translateY(-4px); } }\n@media (prefers-reduced-motion: reduce) { .ax-modelsel__panel { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-modelsel-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-modelsel-css\";\n  s.textContent = AX_MODELSEL_CSS;\n  document.head.appendChild(s);\n}\n\nconst Check = <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>;\nconst Chev = <svg className=\"ax-modelsel__chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>;\n\nexport function ModelSelector({ value, models = [], onChange, align = \"start\", className = \"\", ...rest }) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef(null);\n  const current = models.find((m) => (typeof m === \"string\" ? m : m.value) === value);\n  const currentLabel = current ? (typeof current === \"string\" ? current : current.value) : value;\n\n  const onDoc = useCallback((e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }, []);\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"mousedown\", onDoc);\n      const onKey = (e) => { if (e.key === \"Escape\") setOpen(false); };\n      document.addEventListener(\"keydown\", onKey);\n      return () => { document.removeEventListener(\"mousedown\", onDoc); document.removeEventListener(\"keydown\", onKey); };\n    }\n  }, [open, onDoc]);\n\n  return (\n    <span className={[\"ax-modelsel\", open ? \"ax-modelsel--open\" : \"\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      <button className=\"ax-modelsel__trigger\" onClick={() => setOpen((o) => !o)}>\n        <span className=\"ax-modelsel__glyph\">▣</span>\n        {currentLabel}\n        {Chev}\n      </button>\n      {open ? (\n        <div className={\"ax-modelsel__panel\" + (align === \"end\" ? \" ax-modelsel__panel--end\" : \"\")} role=\"listbox\">\n          {models.map((m) => {\n            const model = typeof m === \"string\" ? { value: m } : m;\n            const selected = model.value === value;\n            return (\n              <button key={model.value} role=\"option\" aria-selected={selected} className=\"ax-modelsel__item\" onClick={() => { onChange && onChange(model.value); setOpen(false); }}>\n                <span className=\"ax-modelsel__check\">{selected ? Check : null}</span>\n                <span className=\"ax-modelsel__body\">\n                  <span className=\"ax-modelsel__name\">{model.value}{model.tag ? <span className=\"ax-modelsel__tag\">{model.tag}</span> : null}</span>\n                  {model.description ? <span className=\"ax-modelsel__desc\">{model.description}</span> : null}\n                </span>\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCxB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,iBAAiB,GAAG;AAClF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,QAAQ,oBAAC,OAAA,EAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,8BAAC,QAAA,EAAK,GAAE,mBAAkB,GAAO;AACzK,MAAM,2BAAQ,OAAA,EAAI,WAAU,qBAAoB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,eAAA,CAAe,EAAA,CAAO;AAE5L,SAAS,cAAc,EAAE,OAAO,SAAS,CAAA,GAAI,UAAU,QAAQ,SAAS,YAAY,IAAI,GAAG,QAAQ;AACxG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,UAAU,OAAO,KAAK,CAAC,OAAO,OAAO,MAAM,WAAW,IAAI,EAAE,WAAW,KAAK;AAClF,QAAM,eAAe,UAAW,OAAO,YAAY,WAAW,UAAU,QAAQ,QAAS;AAEzF,QAAM,QAAQ,YAAY,CAAC,MAAM;AAAE,QAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAM,EAAG,SAAQ,KAAK;AAAA,EAAG,GAAG,CAAA,CAAE;AAC5G,YAAU,MAAM;AACd,QAAI,MAAM;AACR,eAAS,iBAAiB,aAAa,KAAK;AAC5C,YAAM,QAAQ,CAAC,MAAM;AAAE,YAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,MAAG;AAC/D,eAAS,iBAAiB,WAAW,KAAK;AAC1C,aAAO,MAAM;AAAE,iBAAS,oBAAoB,aAAa,KAAK;AAAG,iBAAS,oBAAoB,WAAW,KAAK;AAAA,MAAG;AAAA,IACnH;AAAA,EACF,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,8BACG,QAAA,EAAK,WAAW,CAAC,eAAe,OAAO,sBAAsB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAW,GAAG,MACpH,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,wBAAuB,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GACvE,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,sBAAqB,UAAA,KAAC;AAAA,MACrC;AAAA,MACA;AAAA,IAAA,GACH;AAAA,IACC,OACC,oBAAC,OAAA,EAAI,WAAW,wBAAwB,UAAU,QAAQ,6BAA6B,KAAK,MAAK,WAC9F,UAAA,OAAO,IAAI,CAAC,MAAM;AACjB,YAAM,QAAQ,OAAO,MAAM,WAAW,EAAE,OAAO,MAAM;AACrD,YAAM,WAAW,MAAM,UAAU;AACjC,aACE,qBAAC,YAAyB,MAAK,UAAS,iBAAe,UAAU,WAAU,qBAAoB,SAAS,MAAM;AAAE,oBAAY,SAAS,MAAM,KAAK;AAAG,gBAAQ,KAAK;AAAA,MAAG,GACjK,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,sBAAsB,UAAA,WAAW,QAAQ,MAAK;AAAA,QAC9D,qBAAC,QAAA,EAAK,WAAU,qBACd,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,qBAAqB,UAAA;AAAA,YAAA,MAAM;AAAA,YAAO,MAAM,MAAM,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,MAAM,KAAI,IAAU;AAAA,UAAA,GAAK;AAAA,UAC1H,MAAM,cAAc,oBAAC,QAAA,EAAK,WAAU,qBAAqB,UAAA,MAAM,aAAY,IAAU;AAAA,QAAA,EAAA,CACxF;AAAA,MAAA,EAAA,GALW,MAAM,KAMnB;AAAA,IAEJ,CAAC,GACH,IACE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/ai/Plan.d.ts

@@ -0,0 +1,4 @@
+/** Numbered, connected step plan (vertical). Steps carry done/active/pending state. */
+export interface PlanStep { title: React.ReactNode; description?: React.ReactNode; status?: "pending" | "active" | "done"; }
+export interface PlanProps { steps: PlanStep[]; }
+export declare function Plan(props: PlanProps): JSX.Element;

package/dist/components/ai/Plan.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_PLAN_CSS = `
+.ax-plan { display: flex; flex-direction: column; }
+.ax-plan__step { display: flex; gap: 12px; }
+.ax-plan__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
+.ax-plan__node {
+  width: 22px; height: 22px; flex: none; border-radius: var(--radius-1);
+  border: 1px solid var(--border-strong); background: var(--surface-card);
+  display: flex; align-items: center; justify-content: center;
+  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);
+}
+.ax-plan__step--done .ax-plan__node { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.ax-plan__step--active .ax-plan__node { border-color: var(--text-body); color: var(--text-body); }
+.ax-plan__connector { width: 1px; flex: 1; min-height: 14px; background: var(--border-strong); margin: 2px 0; }
+.ax-plan__step--done .ax-plan__connector { background: var(--accent); }
+.ax-plan__body { padding-bottom: 16px; padding-top: 1px; }
+.ax-plan__step:last-child .ax-plan__body { padding-bottom: 0; }
+.ax-plan__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }
+.ax-plan__step--pending .ax-plan__title { color: var(--text-faint); }
+.ax-plan__desc { font-size: var(--text-xs); color: var(--text-muted); margin: 3px 0 0; line-height: var(--leading-snug); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-plan-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-plan-css";
+  s.textContent = AX_PLAN_CSS;
+  document.head.appendChild(s);
+}
+const Check = /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function Plan({ steps = [], className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-plan", className].filter(Boolean).join(" "), ...rest, children: steps.map((st, i) => {
+    const status = st.status || "pending";
+    const last = i === steps.length - 1;
+    return /* @__PURE__ */ jsxs("div", { className: "ax-plan__step ax-plan__step--" + status, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ax-plan__rail", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-plan__node", children: status === "done" ? Check : i + 1 }),
+        !last ? /* @__PURE__ */ jsx("span", { className: "ax-plan__connector" }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "ax-plan__body", children: [
+        /* @__PURE__ */ jsx("p", { className: "ax-plan__title", children: st.title }),
+        st.description ? /* @__PURE__ */ jsx("p", { className: "ax-plan__desc", children: st.description }) : null
+      ] })
+    ] }, i);
+  }) });
+}
+export {
+  Plan
+};
+//# sourceMappingURL=Plan.js.map

package/dist/components/ai/Plan.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Plan.js","sources":["../../../src/components/ai/Plan.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_PLAN_CSS = `\n.ax-plan { display: flex; flex-direction: column; }\n.ax-plan__step { display: flex; gap: 12px; }\n.ax-plan__rail { display: flex; flex-direction: column; align-items: center; flex: none; }\n.ax-plan__node {\n  width: 22px; height: 22px; flex: none; border-radius: var(--radius-1);\n  border: 1px solid var(--border-strong); background: var(--surface-card);\n  display: flex; align-items: center; justify-content: center;\n  font-family: var(--font-mono); font-size: 11px; color: var(--text-faint);\n}\n.ax-plan__step--done .ax-plan__node { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }\n.ax-plan__step--active .ax-plan__node { border-color: var(--text-body); color: var(--text-body); }\n.ax-plan__connector { width: 1px; flex: 1; min-height: 14px; background: var(--border-strong); margin: 2px 0; }\n.ax-plan__step--done .ax-plan__connector { background: var(--accent); }\n.ax-plan__body { padding-bottom: 16px; padding-top: 1px; }\n.ax-plan__step:last-child .ax-plan__body { padding-bottom: 0; }\n.ax-plan__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }\n.ax-plan__step--pending .ax-plan__title { color: var(--text-faint); }\n.ax-plan__desc { font-size: var(--text-xs); color: var(--text-muted); margin: 3px 0 0; line-height: var(--leading-snug); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-plan-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-plan-css\";\n  s.textContent = AX_PLAN_CSS;\n  document.head.appendChild(s);\n}\n\nconst Check = <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"3\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>;\n\nexport function Plan({ steps = [], className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-plan\", className].filter(Boolean).join(\" \")} {...rest}>\n      {steps.map((st, i) => {\n        const status = st.status || \"pending\";\n        const last = i === steps.length - 1;\n        return (\n          <div key={i} className={\"ax-plan__step ax-plan__step--\" + status}>\n            <div className=\"ax-plan__rail\">\n              <span className=\"ax-plan__node\">{status === \"done\" ? Check : i + 1}</span>\n              {!last ? <span className=\"ax-plan__connector\"></span> : null}\n            </div>\n            <div className=\"ax-plan__body\">\n              <p className=\"ax-plan__title\">{st.title}</p>\n              {st.description ? <p className=\"ax-plan__desc\">{st.description}</p> : null}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBpB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,4BAAS,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,kBAAA,CAAkB,EAAA,CAAO;AAEvL,SAAS,KAAK,EAAE,QAAQ,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AAC5D,6BACG,OAAA,EAAI,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACnE,gBAAM,IAAI,CAAC,IAAI,MAAM;AACpB,UAAM,SAAS,GAAG,UAAU;AAC5B,UAAM,OAAO,MAAM,MAAM,SAAS;AAClC,WACE,qBAAC,OAAA,EAAY,WAAW,kCAAkC,QACxD,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,iBAAiB,qBAAW,SAAS,QAAQ,IAAI,EAAA,CAAE;AAAA,QAClE,CAAC,OAAO,oBAAC,QAAA,EAAK,WAAU,sBAAqB,IAAU;AAAA,MAAA,GAC1D;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAE,WAAU,kBAAkB,UAAA,GAAG,OAAM;AAAA,QACvC,GAAG,cAAc,oBAAC,KAAA,EAAE,WAAU,iBAAiB,UAAA,GAAG,aAAY,IAAO;AAAA,MAAA,EAAA,CACxE;AAAA,IAAA,EAAA,GARQ,CASV;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/components/ai/Queue.d.ts

@@ -0,0 +1,4 @@
+/** Queued-prompts list; the running item is highlighted, pending items removable. */
+export interface QueueItem { text: React.ReactNode; status?: "running" | "pending"; }
+export interface QueueProps { title?: string; items: Array<string | QueueItem>; onRemove?: (index: number) => void; }
+export declare function Queue(props: QueueProps): JSX.Element;

package/dist/components/ai/Queue.js

@@ -0,0 +1,45 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_QUEUE_CSS = `
+.ax-queue { display: flex; flex-direction: column; gap: 6px; }
+.ax-queue__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
+.ax-queue__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); flex: 1; }
+.ax-queue__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.ax-queue__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--surface-card); }
+.ax-queue__num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); width: 16px; flex: none; }
+.ax-queue__text { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-queue__item--running { border-color: var(--border-strong); }
+.ax-queue__item--running .ax-queue__num { color: var(--warn); }
+.ax-queue__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; flex: none; color: var(--text-faint); }
+.ax-queue__item--running .ax-queue__status { color: var(--warn); }
+.ax-queue__remove { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; padding: 2px 4px; border-radius: var(--radius-1); flex: none; }
+.ax-queue__remove:hover { color: var(--danger); background: var(--danger-dim); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-queue-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-queue-css";
+  s.textContent = AX_QUEUE_CSS;
+  document.head.appendChild(s);
+}
+function Queue({ title = "Queued", items = [], onRemove, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-queue", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-queue__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-queue__title", children: title }),
+      /* @__PURE__ */ jsx("span", { className: "ax-queue__count", children: items.length })
+    ] }),
+    items.map((it, i) => {
+      const item = typeof it === "string" ? { text: it } : it;
+      const running = item.status === "running";
+      return /* @__PURE__ */ jsxs("div", { className: "ax-queue__item" + (running ? " ax-queue__item--running" : ""), children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-queue__num", children: running ? "▶" : i + 1 }),
+        /* @__PURE__ */ jsx("span", { className: "ax-queue__text", children: item.text }),
+        item.status ? /* @__PURE__ */ jsx("span", { className: "ax-queue__status", children: item.status }) : null,
+        onRemove && !running ? /* @__PURE__ */ jsx("button", { className: "ax-queue__remove", "aria-label": "Remove", onClick: () => onRemove(i), children: "✕" }) : null
+      ] }, i);
+    })
+  ] });
+}
+export {
+  Queue
+};
+//# sourceMappingURL=Queue.js.map

package/dist/components/ai/Queue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Queue.js","sources":["../../../src/components/ai/Queue.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_QUEUE_CSS = `\n.ax-queue { display: flex; flex-direction: column; gap: 6px; }\n.ax-queue__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }\n.ax-queue__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); flex: 1; }\n.ax-queue__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-queue__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--surface-card); }\n.ax-queue__num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); width: 16px; flex: none; }\n.ax-queue__text { flex: 1; min-width: 0; font-size: var(--text-sm); color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-queue__item--running { border-color: var(--border-strong); }\n.ax-queue__item--running .ax-queue__num { color: var(--warn); }\n.ax-queue__status { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; flex: none; color: var(--text-faint); }\n.ax-queue__item--running .ax-queue__status { color: var(--warn); }\n.ax-queue__remove { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; padding: 2px 4px; border-radius: var(--radius-1); flex: none; }\n.ax-queue__remove:hover { color: var(--danger); background: var(--danger-dim); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-queue-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-queue-css\";\n  s.textContent = AX_QUEUE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Queue({ title = \"Queued\", items = [], onRemove, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-queue\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-queue__head\">\n        <span className=\"ax-queue__title\">{title}</span>\n        <span className=\"ax-queue__count\">{items.length}</span>\n      </div>\n      {items.map((it, i) => {\n        const item = typeof it === \"string\" ? { text: it } : it;\n        const running = item.status === \"running\";\n        return (\n          <div key={i} className={\"ax-queue__item\" + (running ? \" ax-queue__item--running\" : \"\")}>\n            <span className=\"ax-queue__num\">{running ? \"▶\" : i + 1}</span>\n            <span className=\"ax-queue__text\">{item.text}</span>\n            {item.status ? <span className=\"ax-queue__status\">{item.status}</span> : null}\n            {onRemove && !running ? <button className=\"ax-queue__remove\" aria-label=\"Remove\" onClick={() => onRemove(i)}>✕</button> : null}\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,MAAM,EAAE,QAAQ,UAAU,QAAQ,CAAA,GAAI,UAAU,YAAY,IAAI,GAAG,QAAQ;AACzF,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACrE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,OAAM;AAAA,MACzC,oBAAC,QAAA,EAAK,WAAU,mBAAmB,gBAAM,OAAA,CAAO;AAAA,IAAA,GAClD;AAAA,IACC,MAAM,IAAI,CAAC,IAAI,MAAM;AACpB,YAAM,OAAO,OAAO,OAAO,WAAW,EAAE,MAAM,OAAO;AACrD,YAAM,UAAU,KAAK,WAAW;AAChC,kCACG,OAAA,EAAY,WAAW,oBAAoB,UAAU,6BAA6B,KACjF,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,iBAAiB,UAAA,UAAU,MAAM,IAAI,GAAE;AAAA,QACvD,oBAAC,QAAA,EAAK,WAAU,kBAAkB,eAAK,MAAK;AAAA,QAC3C,KAAK,SAAS,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,KAAK,QAAO,IAAU;AAAA,QACxE,YAAY,CAAC,UAAU,oBAAC,YAAO,WAAU,oBAAmB,cAAW,UAAS,SAAS,MAAM,SAAS,CAAC,GAAG,eAAC,IAAY;AAAA,MAAA,EAAA,GAJlH,CAKV;AAAA,IAEJ,CAAC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/ai/Reasoning.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Collapsible chain-of-thought block. Shows a "Thinking…" header with a blinking
+ * cursor while streaming, then a duration and expandable step list.
+ */
+export interface ReasoningProps {
+  /** Reasoning steps (strings or nodes), shown as a connected vertical list. */
+  steps?: React.ReactNode[];
+  /** Mono duration shown when not streaming, e.g. "3.2s". */
+  duration?: string;
+  /** Live: header reads "Thinking" + cursor, auto-expanded. @default false */
+  streaming?: boolean;
+  /** Expanded on mount. @default false */
+  defaultOpen?: boolean;
+  /** Header label when settled. @default "Reasoning" */
+  title?: string;
+}
+export declare function Reasoning(props: ReasoningProps): JSX.Element;

package/dist/components/ai/Reasoning.js

@@ -0,0 +1,60 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_REASONING_CSS = `
+.ax-reasoning { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); overflow: hidden; }
+.ax-reasoning__head {
+  display: flex; align-items: center; gap: 10px; width: 100%;
+  appearance: none; background: none; border: none; cursor: pointer; text-align: left;
+  padding: 11px 14px; color: var(--text-muted);
+}
+.ax-reasoning__head:hover { color: var(--text-body); }
+.ax-reasoning__head:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-reasoning__glyph { width: 14px; height: 14px; flex: none; color: var(--text-faint); }
+.ax-reasoning__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
+.ax-reasoning__dur { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.ax-reasoning__spacer { flex: 1; }
+.ax-reasoning__chev { width: 12px; height: 12px; flex: none; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }
+.ax-reasoning--open .ax-reasoning__chev { transform: rotate(180deg); }
+.ax-reasoning__cursor { display: inline-block; width: 0.5em; height: 1em; background: currentColor; vertical-align: text-bottom; margin-left: 4px; animation: ax-rsn-blink 1.1s steps(1) infinite; }
+@keyframes ax-rsn-blink { 50% { opacity: 0; } }
+.ax-reasoning__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
+.ax-reasoning--open .ax-reasoning__panel { grid-template-rows: 1fr; }
+.ax-reasoning__panel-inner { min-height: 0; }
+.ax-reasoning__steps { padding: 4px 16px 16px 16px; border-top: 1px solid var(--border-default); margin-top: 2px; }
+.ax-reasoning__step { position: relative; padding: 8px 0 8px 22px; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }
+.ax-reasoning__step::before { content: ""; position: absolute; left: 4px; top: 13px; width: 5px; height: 5px; border-radius: 1px; background: var(--text-faint); }
+.ax-reasoning__step:not(:last-child)::after { content: ""; position: absolute; left: 6px; top: 18px; bottom: -4px; width: 1px; background: var(--border-strong); }
+.ax-reasoning__step strong { color: var(--text-body); font-weight: var(--weight-medium); }
+@media (prefers-reduced-motion: reduce) { .ax-reasoning__panel { transition: none; } .ax-reasoning__cursor { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-reasoning-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-reasoning-css";
+  s.textContent = AX_REASONING_CSS;
+  document.head.appendChild(s);
+}
+const Chev = /* @__PURE__ */ jsx("svg", { className: "ax-reasoning__chev", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+const Brain = /* @__PURE__ */ jsxs("svg", { className: "ax-reasoning__glyph", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z" })
+] });
+function Reasoning({ steps = [], duration, streaming = false, defaultOpen = false, title = "Reasoning", className = "", ...rest }) {
+  const [open, setOpen] = useState(defaultOpen || streaming);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-reasoning", open ? "ax-reasoning--open" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-reasoning__head", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [
+      Brain,
+      /* @__PURE__ */ jsxs("span", { className: "ax-reasoning__title", children: [
+        streaming ? "Thinking" : title,
+        streaming ? /* @__PURE__ */ jsx("span", { className: "ax-reasoning__cursor" }) : null
+      ] }),
+      duration && !streaming ? /* @__PURE__ */ jsx("span", { className: "ax-reasoning__dur", children: duration }) : null,
+      /* @__PURE__ */ jsx("span", { className: "ax-reasoning__spacer" }),
+      Chev
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ax-reasoning__panel", children: /* @__PURE__ */ jsx("div", { className: "ax-reasoning__panel-inner", children: /* @__PURE__ */ jsx("div", { className: "ax-reasoning__steps", children: steps.map((st, i) => /* @__PURE__ */ jsx("div", { className: "ax-reasoning__step", children: st }, i)) }) }) })
+  ] });
+}
+export {
+  Reasoning
+};
+//# sourceMappingURL=Reasoning.js.map

package/dist/components/ai/Reasoning.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Reasoning.js","sources":["../../../src/components/ai/Reasoning.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_REASONING_CSS = `\n.ax-reasoning { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); overflow: hidden; }\n.ax-reasoning__head {\n  display: flex; align-items: center; gap: 10px; width: 100%;\n  appearance: none; background: none; border: none; cursor: pointer; text-align: left;\n  padding: 11px 14px; color: var(--text-muted);\n}\n.ax-reasoning__head:hover { color: var(--text-body); }\n.ax-reasoning__head:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-reasoning__glyph { width: 14px; height: 14px; flex: none; color: var(--text-faint); }\n.ax-reasoning__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }\n.ax-reasoning__dur { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-reasoning__spacer { flex: 1; }\n.ax-reasoning__chev { width: 12px; height: 12px; flex: none; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }\n.ax-reasoning--open .ax-reasoning__chev { transform: rotate(180deg); }\n.ax-reasoning__cursor { display: inline-block; width: 0.5em; height: 1em; background: currentColor; vertical-align: text-bottom; margin-left: 4px; animation: ax-rsn-blink 1.1s steps(1) infinite; }\n@keyframes ax-rsn-blink { 50% { opacity: 0; } }\n.ax-reasoning__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }\n.ax-reasoning--open .ax-reasoning__panel { grid-template-rows: 1fr; }\n.ax-reasoning__panel-inner { min-height: 0; }\n.ax-reasoning__steps { padding: 4px 16px 16px 16px; border-top: 1px solid var(--border-default); margin-top: 2px; }\n.ax-reasoning__step { position: relative; padding: 8px 0 8px 22px; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-snug); }\n.ax-reasoning__step::before { content: \"\"; position: absolute; left: 4px; top: 13px; width: 5px; height: 5px; border-radius: 1px; background: var(--text-faint); }\n.ax-reasoning__step:not(:last-child)::after { content: \"\"; position: absolute; left: 6px; top: 18px; bottom: -4px; width: 1px; background: var(--border-strong); }\n.ax-reasoning__step strong { color: var(--text-body); font-weight: var(--weight-medium); }\n@media (prefers-reduced-motion: reduce) { .ax-reasoning__panel { transition: none; } .ax-reasoning__cursor { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-reasoning-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-reasoning-css\";\n  s.textContent = AX_REASONING_CSS;\n  document.head.appendChild(s);\n}\n\nconst Chev = (\n  <svg className=\"ax-reasoning__chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>\n);\nconst Brain = (\n  <svg className=\"ax-reasoning__glyph\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"></path><path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"></path></svg>\n);\n\nexport function Reasoning({ steps = [], duration, streaming = false, defaultOpen = false, title = \"Reasoning\", className = \"\", ...rest }) {\n  const [open, setOpen] = useState(defaultOpen || streaming);\n  return (\n    <div className={[\"ax-reasoning\", open ? \"ax-reasoning--open\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <button className=\"ax-reasoning__head\" aria-expanded={open} onClick={() => setOpen((o) => !o)}>\n        {Brain}\n        <span className=\"ax-reasoning__title\">{streaming ? \"Thinking\" : title}{streaming ? <span className=\"ax-reasoning__cursor\"></span> : null}</span>\n        {duration && !streaming ? <span className=\"ax-reasoning__dur\">{duration}</span> : null}\n        <span className=\"ax-reasoning__spacer\"></span>\n        {Chev}\n      </button>\n      <div className=\"ax-reasoning__panel\">\n        <div className=\"ax-reasoning__panel-inner\">\n          <div className=\"ax-reasoning__steps\">\n            {steps.map((st, i) => (\n              <div className=\"ax-reasoning__step\" key={i}>{st}</div>\n            ))}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA4BzB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,kBAAkB,GAAG;AACnF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,2BACH,OAAA,EAAI,WAAU,sBAAqB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,eAAA,CAAe,EAAA,CAAO;AAEzL,MAAM,QACJ,qBAAC,OAAA,EAAI,WAAU,uBAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,oKAAA,CAAoK;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,sKAAA,CAAsK;AAAA,GAAO;AAG3f,SAAS,UAAU,EAAE,QAAQ,CAAA,GAAI,UAAU,YAAY,OAAO,cAAc,OAAO,QAAQ,aAAa,YAAY,IAAI,GAAG,QAAQ;AACxI,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,eAAe,SAAS;AACzD,8BACG,OAAA,EAAI,WAAW,CAAC,gBAAgB,OAAO,uBAAuB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC3G,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,sBAAqB,iBAAe,MAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GACzF,UAAA;AAAA,MAAA;AAAA,MACD,qBAAC,QAAA,EAAK,WAAU,uBAAuB,UAAA;AAAA,QAAA,YAAY,aAAa;AAAA,QAAO,YAAY,oBAAC,QAAA,EAAK,WAAU,wBAAuB,IAAU;AAAA,MAAA,GAAK;AAAA,MACxI,YAAY,CAAC,YAAY,oBAAC,UAAK,WAAU,qBAAqB,oBAAS,IAAU;AAAA,MAClF,oBAAC,QAAA,EAAK,WAAU,uBAAA,CAAuB;AAAA,MACtC;AAAA,IAAA,GACH;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,uBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,6BACb,UAAA,oBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA,MAAM,IAAI,CAAC,IAAI,MACd,oBAAC,OAAA,EAAI,WAAU,sBAA8B,UAAA,GAAA,GAAJ,CAAO,CACjD,EAAA,CACH,EAAA,CACF,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/ai/Shimmer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shimmering text — a moving highlight sweep across the glyphs. Use for
+ * transient loading labels ("Searching the web…").
+ */
+export interface ShimmerProps {
+  /** Element tag to render. @default "span" */
+  as?: string;
+  children?: React.ReactNode;
+}
+export declare function Shimmer(props: ShimmerProps): JSX.Element;

package/dist/components/ai/Shimmer.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_SHIMMER_CSS = `
+.ax-shimmer {
+  display: inline-block;
+  background: linear-gradient(90deg, var(--text-faint) 0%, var(--text-body) 20%, var(--text-faint) 40%, var(--text-faint) 100%);
+  background-size: 200% 100%;
+  -webkit-background-clip: text; background-clip: text;
+  -webkit-text-fill-color: transparent; color: transparent;
+  animation: ax-shimmer-text 2s linear infinite;
+}
+@keyframes ax-shimmer-text { to { background-position: -200% 0; } }
+@media (prefers-reduced-motion: reduce) { .ax-shimmer { animation: none; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-shimmer-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-shimmer-css";
+  s.textContent = AX_SHIMMER_CSS;
+  document.head.appendChild(s);
+}
+function Shimmer({ children, as = "span", className = "", ...rest }) {
+  const Tag = as;
+  return /* @__PURE__ */ jsx(Tag, { className: ["ax-shimmer", className].filter(Boolean).join(" "), ...rest, children });
+}
+export {
+  Shimmer
+};
+//# sourceMappingURL=Shimmer.js.map

package/dist/components/ai/Shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shimmer.js","sources":["../../../src/components/ai/Shimmer.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SHIMMER_CSS = `\n.ax-shimmer {\n  display: inline-block;\n  background: linear-gradient(90deg, var(--text-faint) 0%, var(--text-body) 20%, var(--text-faint) 40%, var(--text-faint) 100%);\n  background-size: 200% 100%;\n  -webkit-background-clip: text; background-clip: text;\n  -webkit-text-fill-color: transparent; color: transparent;\n  animation: ax-shimmer-text 2s linear infinite;\n}\n@keyframes ax-shimmer-text { to { background-position: -200% 0; } }\n@media (prefers-reduced-motion: reduce) { .ax-shimmer { animation: none; -webkit-text-fill-color: var(--text-muted); color: var(--text-muted); } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-shimmer-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-shimmer-css\";\n  s.textContent = AX_SHIMMER_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Shimmer({ children, as = \"span\", className = \"\", ...rest }) {\n  const Tag = as;\n  return <Tag className={[\"ax-shimmer\", className].filter(Boolean).join(\" \")} {...rest}>{children}</Tag>;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAavB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,UAAU,KAAK,QAAQ,YAAY,IAAI,GAAG,QAAQ;AAC1E,QAAM,MAAM;AACZ,SAAO,oBAAC,KAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAAO,UAAS;AAClG;"}

package/dist/components/ai/Sources.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Cited-sources list plus an inline Citation chip for use within prose.
+ */
+export interface SourceItem {
+  title: string;
+  url?: string;
+}
+export interface SourcesProps {
+  /** Strings or { title, url } objects. */
+  sources: Array<string | SourceItem>;
+  /** Mono header label. @default "Sources" */
+  label?: string;
+}
+export declare function Sources(props: SourcesProps): JSX.Element;
+
+export interface CitationProps {
+  /** Number shown in the chip, e.g. 1. */
+  index: number | string;
+  href?: string;
+  onClick?: (e: any) => void;
+}
+/** Inline numbered citation chip — place inside assistant prose. */
+export declare function Citation(props: CitationProps): JSX.Element;

package/dist/components/ai/Sources.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_SOURCES_CSS = `
+.ax-citation {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 16px; height: 16px; padding: 0 4px; vertical-align: top;
+  background: var(--surface-raised); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-1); cursor: pointer; margin: 0 1px;
+  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
+  text-decoration: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+}
+.ax-citation:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+
+.ax-sources { border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }
+.ax-sources__head { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 10px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 8px; }
+.ax-sources__count { color: var(--text-body); }
+.ax-source {
+  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; text-decoration: none;
+  border-bottom: 1px solid var(--border-default); transition: background var(--dur-1) var(--ease-out);
+}
+.ax-source:last-child { border-bottom: none; }
+.ax-source:hover { background: var(--surface-raised); }
+.ax-source__num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex: none; width: 18px; text-align: right; line-height: 1.5; }
+.ax-source__body { min-width: 0; flex: 1; }
+.ax-source__title { font-size: var(--text-sm); color: var(--text-body); font-weight: var(--weight-medium); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-source__url { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-source__arrow { color: var(--text-faint); flex: none; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-sources-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-sources-css";
+  s.textContent = AX_SOURCES_CSS;
+  document.head.appendChild(s);
+}
+function Citation({ index, href, onClick, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("a", { className: ["ax-citation", className].filter(Boolean).join(" "), href: href || "#", onClick, ...rest, children: index });
+}
+function Sources({ sources = [], label = "Sources", className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-sources", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-sources__head", children: [
+      label,
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "ax-sources__count", children: [
+        "· ",
+        sources.length
+      ] })
+    ] }),
+    sources.map((src, i) => {
+      const s = typeof src === "string" ? { title: src } : src;
+      return /* @__PURE__ */ jsxs("a", { className: "ax-source", href: s.url || "#", target: "_blank", rel: "noreferrer", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-source__num", children: i + 1 }),
+        /* @__PURE__ */ jsxs("span", { className: "ax-source__body", children: [
+          /* @__PURE__ */ jsx("p", { className: "ax-source__title", children: s.title }),
+          s.url ? /* @__PURE__ */ jsx("p", { className: "ax-source__url", children: s.url.replace(/^https?:\/\//, "") }) : null
+        ] }),
+        /* @__PURE__ */ jsx("svg", { className: "ax-source__arrow", width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M9 7h8v8" }) })
+      ] }, i);
+    })
+  ] });
+}
+export {
+  Citation,
+  Sources
+};
+//# sourceMappingURL=Sources.js.map

package/dist/components/ai/Sources.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sources.js","sources":["../../../src/components/ai/Sources.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SOURCES_CSS = `\n.ax-citation {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 16px; height: 16px; padding: 0 4px; vertical-align: top;\n  background: var(--surface-raised); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-1); cursor: pointer; margin: 0 1px;\n  font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);\n  text-decoration: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);\n}\n.ax-citation:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }\n\n.ax-sources { border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }\n.ax-sources__head { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 10px 14px; border-bottom: 1px solid var(--border-default); display: flex; align-items: center; gap: 8px; }\n.ax-sources__count { color: var(--text-body); }\n.ax-source {\n  display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; text-decoration: none;\n  border-bottom: 1px solid var(--border-default); transition: background var(--dur-1) var(--ease-out);\n}\n.ax-source:last-child { border-bottom: none; }\n.ax-source:hover { background: var(--surface-raised); }\n.ax-source__num { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); flex: none; width: 18px; text-align: right; line-height: 1.5; }\n.ax-source__body { min-width: 0; flex: 1; }\n.ax-source__title { font-size: var(--text-sm); color: var(--text-body); font-weight: var(--weight-medium); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-source__url { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-source__arrow { color: var(--text-faint); flex: none; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-sources-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-sources-css\";\n  s.textContent = AX_SOURCES_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Citation({ index, href, onClick, className = \"\", ...rest }) {\n  return (\n    <a className={[\"ax-citation\", className].filter(Boolean).join(\" \")} href={href || \"#\"} onClick={onClick} {...rest}>{index}</a>\n  );\n}\n\nexport function Sources({ sources = [], label = \"Sources\", className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-sources\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-sources__head\">{label} <span className=\"ax-sources__count\">· {sources.length}</span></div>\n      {sources.map((src, i) => {\n        const s = typeof src === \"string\" ? { title: src } : src;\n        return (\n          <a className=\"ax-source\" key={i} href={s.url || \"#\"} target=\"_blank\" rel=\"noreferrer\">\n            <span className=\"ax-source__num\">{i + 1}</span>\n            <span className=\"ax-source__body\">\n              <p className=\"ax-source__title\">{s.title}</p>\n              {s.url ? <p className=\"ax-source__url\">{s.url.replace(/^https?:\\/\\//, \"\")}</p> : null}\n            </span>\n            <svg className=\"ax-source__arrow\" width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M7 17 17 7M9 7h8v8\"></path></svg>\n          </a>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS,EAAE,OAAO,MAAM,SAAS,YAAY,IAAI,GAAG,QAAQ;AAC1E,6BACG,KAAA,EAAE,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,MAAM,QAAQ,KAAK,SAAmB,GAAG,MAAO,UAAA,OAAM;AAE9H;AAEO,SAAS,QAAQ,EAAE,UAAU,CAAA,GAAI,QAAQ,WAAW,YAAY,IAAI,GAAG,QAAQ;AACpF,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,oBAAoB,UAAA;AAAA,MAAA;AAAA,MAAM;AAAA,MAAC,qBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA;AAAA,QAAA;AAAA,QAAG,QAAQ;AAAA,MAAA,EAAA,CAAO;AAAA,IAAA,GAAO;AAAA,IACtG,QAAQ,IAAI,CAAC,KAAK,MAAM;AACvB,YAAM,IAAI,OAAO,QAAQ,WAAW,EAAE,OAAO,QAAQ;AACrD,aACE,qBAAC,KAAA,EAAE,WAAU,aAAoB,MAAM,EAAE,OAAO,KAAK,QAAO,UAAS,KAAI,cACvE,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA,IAAI,GAAE;AAAA,QACxC,qBAAC,QAAA,EAAK,WAAU,mBACd,UAAA;AAAA,UAAA,oBAAC,KAAA,EAAE,WAAU,oBAAoB,UAAA,EAAE,OAAM;AAAA,UACxC,EAAE,MAAM,oBAAC,KAAA,EAAE,WAAU,kBAAkB,UAAA,EAAE,IAAI,QAAQ,gBAAgB,EAAE,EAAA,CAAE,IAAO;AAAA,QAAA,GACnF;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,oBAAmB,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,qBAAA,CAAqB,EAAA,CAAO;AAAA,MAAA,EAAA,GANpL,CAO9B;AAAA,IAEJ,CAAC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/ai/Suggestion.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Suggested-prompt chips for empty states and follow-ups.
+ */
+export interface SuggestionProps {
+  /** Optional leading icon. */
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+export declare function Suggestion(props: SuggestionProps): JSX.Element;
+
+export interface SuggestionsProps {
+  /** Strings or { label, value?, icon? }. */
+  items: Array<string | { label: string; value?: string; icon?: React.ReactNode }>;
+  onSelect?: (value: string) => void;
+  /** Single-row horizontal scroll instead of wrap. @default false */
+  scroll?: boolean;
+}
+export declare function Suggestions(props: SuggestionsProps): JSX.Element;