@agentaily/design-system 0.1.0

package/dist/components/ai/Suggestion.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_SUGGESTION_CSS = `
+.ax-suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
+.ax-suggestions--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
+.ax-suggestion {
+  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;
+  appearance: none; background: none; color: var(--text-muted);
+  border: 1px solid var(--border-default); border-radius: var(--radius-2);
+  padding: 7px 12px; font-family: var(--font-body); font-size: var(--text-sm);
+  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
+}
+.ax-suggestion:hover { border-color: var(--border-strong); color: var(--text-body); background: var(--surface-raised); }
+.ax-suggestion:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-suggestion__icon { color: var(--text-faint); display: inline-flex; }
+.ax-suggestion__icon svg { width: 13px; height: 13px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-suggestion-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-suggestion-css";
+  s.textContent = AX_SUGGESTION_CSS;
+  document.head.appendChild(s);
+}
+function Suggestion({ children, icon, onClick, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: ["ax-suggestion", className].filter(Boolean).join(" "), onClick, ...rest, children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "ax-suggestion__icon", children: icon }) : null,
+    children
+  ] });
+}
+function Suggestions({ items = [], onSelect, scroll = false, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-suggestions", scroll ? "ax-suggestions--scroll" : "", className].filter(Boolean).join(" "), ...rest, children: items.map((item, i) => {
+    const it = typeof item === "string" ? { label: item } : item;
+    return /* @__PURE__ */ jsx(Suggestion, { icon: it.icon, onClick: () => onSelect && onSelect(it.value ?? it.label), children: it.label }, i);
+  }) });
+}
+export {
+  Suggestion,
+  Suggestions
+};
+//# sourceMappingURL=Suggestion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Suggestion.js","sources":["../../../src/components/ai/Suggestion.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SUGGESTION_CSS = `\n.ax-suggestions { display: flex; gap: 8px; flex-wrap: wrap; }\n.ax-suggestions--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }\n.ax-suggestion {\n  display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap;\n  appearance: none; background: none; color: var(--text-muted);\n  border: 1px solid var(--border-default); border-radius: var(--radius-2);\n  padding: 7px 12px; font-family: var(--font-body); font-size: var(--text-sm);\n  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n}\n.ax-suggestion:hover { border-color: var(--border-strong); color: var(--text-body); background: var(--surface-raised); }\n.ax-suggestion:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-suggestion__icon { color: var(--text-faint); display: inline-flex; }\n.ax-suggestion__icon svg { width: 13px; height: 13px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-suggestion-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-suggestion-css\";\n  s.textContent = AX_SUGGESTION_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Suggestion({ children, icon, onClick, className = \"\", ...rest }) {\n  return (\n    <button type=\"button\" className={[\"ax-suggestion\", className].filter(Boolean).join(\" \")} onClick={onClick} {...rest}>\n      {icon ? <span className=\"ax-suggestion__icon\">{icon}</span> : null}\n      {children}\n    </button>\n  );\n}\n\nexport function Suggestions({ items = [], onSelect, scroll = false, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-suggestions\", scroll ? \"ax-suggestions--scroll\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {items.map((item, i) => {\n        const it = typeof item === \"string\" ? { label: item } : item;\n        return <Suggestion key={i} icon={it.icon} onClick={() => onSelect && onSelect(it.value ?? it.label)}>{it.label}</Suggestion>;\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,WAAW,EAAE,UAAU,MAAM,SAAS,YAAY,IAAI,GAAG,QAAQ;AAC/E,8BACG,UAAA,EAAO,MAAK,UAAS,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,SAAmB,GAAG,MAC5G,UAAA;AAAA,IAAA,OAAO,oBAAC,QAAA,EAAK,WAAU,uBAAuB,gBAAK,IAAU;AAAA,IAC7D;AAAA,EAAA,GACH;AAEJ;AAEO,SAAS,YAAY,EAAE,QAAQ,CAAA,GAAI,UAAU,SAAS,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC7F,SACE,oBAAC,SAAI,WAAW,CAAC,kBAAkB,SAAS,2BAA2B,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAClH,UAAA,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,KAAK,OAAO,SAAS,WAAW,EAAE,OAAO,SAAS;AACxD,+BAAQ,YAAA,EAAmB,MAAM,GAAG,MAAM,SAAS,MAAM,YAAY,SAAS,GAAG,SAAS,GAAG,KAAK,GAAI,UAAA,GAAG,SAAjF,CAAuF;AAAA,EACjH,CAAC,EAAA,CACH;AAEJ;"}

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

@@ -0,0 +1,4 @@
+/** Agent sub-task checklist with pending / active / done states and a done/total count. */
+export interface TaskItem { label: React.ReactNode; status?: "pending" | "active" | "done"; meta?: string; }
+export interface TaskProps { title?: string; items: TaskItem[]; }
+export declare function Task(props: TaskProps): JSX.Element;

package/dist/components/ai/Task.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_TASK_CSS = `
+.ax-task { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); overflow: hidden; }
+.ax-task__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-default); }
+.ax-task__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); flex: 1; }
+.ax-task__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.ax-task__list { padding: 6px; }
+.ax-task__item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; font-size: var(--text-sm); color: var(--text-body); }
+.ax-task__mark { width: 16px; height: 16px; flex: none; margin-top: 1px; border: 1px solid var(--border-strong); border-radius: var(--radius-1); position: relative; }
+.ax-task__item--done .ax-task__mark { background: var(--accent); border-color: var(--accent); }
+.ax-task__item--done .ax-task__mark::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border-right: 2px solid var(--accent-fg); border-bottom: 2px solid var(--accent-fg); transform: rotate(45deg); }
+.ax-task__item--active .ax-task__mark { border-color: var(--warn); }
+.ax-task__item--active .ax-task__mark::after { content: ""; position: absolute; inset: 3px; border-radius: 1px; background: var(--warn); animation: ax-task-pulse 1s var(--ease-out) infinite; }
+.ax-task__item--done .ax-task__label { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--border-strong); }
+.ax-task__label { flex: 1; line-height: var(--leading-snug); }
+.ax-task__meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); flex: none; }
+@keyframes ax-task-pulse { 50% { opacity: 0.4; } }
+@media (prefers-reduced-motion: reduce) { .ax-task__item--active .ax-task__mark::after { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-task-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-task-css";
+  s.textContent = AX_TASK_CSS;
+  document.head.appendChild(s);
+}
+function Task({ title = "Tasks", items = [], className = "", ...rest }) {
+  const done = items.filter((i) => i.status === "done").length;
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-task", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-task__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-task__title", children: title }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-task__count", children: [
+        done,
+        "/",
+        items.length
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ax-task__list", children: items.map((it, i) => /* @__PURE__ */ jsxs("div", { className: "ax-task__item ax-task__item--" + (it.status || "pending"), children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-task__mark" }),
+      /* @__PURE__ */ jsx("span", { className: "ax-task__label", children: it.label }),
+      it.meta ? /* @__PURE__ */ jsx("span", { className: "ax-task__meta", children: it.meta }) : null
+    ] }, i)) })
+  ] });
+}
+export {
+  Task
+};
+//# sourceMappingURL=Task.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Task.js","sources":["../../../src/components/ai/Task.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TASK_CSS = `\n.ax-task { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); overflow: hidden; }\n.ax-task__head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-bottom: 1px solid var(--border-default); }\n.ax-task__title { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); flex: 1; }\n.ax-task__count { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-task__list { padding: 6px; }\n.ax-task__item { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; font-size: var(--text-sm); color: var(--text-body); }\n.ax-task__mark { width: 16px; height: 16px; flex: none; margin-top: 1px; border: 1px solid var(--border-strong); border-radius: var(--radius-1); position: relative; }\n.ax-task__item--done .ax-task__mark { background: var(--accent); border-color: var(--accent); }\n.ax-task__item--done .ax-task__mark::after { content: \"\"; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border-right: 2px solid var(--accent-fg); border-bottom: 2px solid var(--accent-fg); transform: rotate(45deg); }\n.ax-task__item--active .ax-task__mark { border-color: var(--warn); }\n.ax-task__item--active .ax-task__mark::after { content: \"\"; position: absolute; inset: 3px; border-radius: 1px; background: var(--warn); animation: ax-task-pulse 1s var(--ease-out) infinite; }\n.ax-task__item--done .ax-task__label { color: var(--text-faint); text-decoration: line-through; text-decoration-color: var(--border-strong); }\n.ax-task__label { flex: 1; line-height: var(--leading-snug); }\n.ax-task__meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); flex: none; }\n@keyframes ax-task-pulse { 50% { opacity: 0.4; } }\n@media (prefers-reduced-motion: reduce) { .ax-task__item--active .ax-task__mark::after { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-task-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-task-css\";\n  s.textContent = AX_TASK_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Task({ title = \"Tasks\", items = [], className = \"\", ...rest }) {\n  const done = items.filter((i) => i.status === \"done\").length;\n  return (\n    <div className={[\"ax-task\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-task__head\">\n        <span className=\"ax-task__title\">{title}</span>\n        <span className=\"ax-task__count\">{done}/{items.length}</span>\n      </div>\n      <div className=\"ax-task__list\">\n        {items.map((it, i) => (\n          <div key={i} className={\"ax-task__item ax-task__item--\" + (it.status || \"pending\")}>\n            <span className=\"ax-task__mark\"></span>\n            <span className=\"ax-task__label\">{it.label}</span>\n            {it.meta ? <span className=\"ax-task__meta\">{it.meta}</span> : null}\n          </div>\n        ))}\n      </div>\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;AAmBpB,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;AAEO,SAAS,KAAK,EAAE,QAAQ,SAAS,QAAQ,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AAC7E,QAAM,OAAO,MAAM,OAAO,CAAC,MAAM,EAAE,WAAW,MAAM,EAAE;AACtD,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACpE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA,OAAM;AAAA,MACxC,qBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA;AAAA,QAAA;AAAA,QAAK;AAAA,QAAE,MAAM;AAAA,MAAA,EAAA,CAAO;AAAA,IAAA,GACxD;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,iBACZ,gBAAM,IAAI,CAAC,IAAI,2BACb,OAAA,EAAY,WAAW,mCAAmC,GAAG,UAAU,YACtE,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB;AAAA,MAChC,oBAAC,QAAA,EAAK,WAAU,kBAAkB,aAAG,OAAM;AAAA,MAC1C,GAAG,OAAO,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,GAAG,MAAK,IAAU;AAAA,IAAA,EAAA,GAHtD,CAIV,CACD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,16 @@
+/**
+ * Tool / function-call display: mono name(), status pill, expandable args + result.
+ */
+export interface ToolCallProps {
+  /** Function name, rendered mono as name(). */
+  name: string;
+  /** Arguments — object (pretty-printed JSON) or string. */
+  args?: any;
+  /** Result — object or string. */
+  result?: any;
+  /** @default "done" */
+  status?: "running" | "done" | "error";
+  /** Expanded on mount. @default false */
+  defaultOpen?: boolean;
+}
+export declare function ToolCall(props: ToolCallProps): JSX.Element;

package/dist/components/ai/ToolCall.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_TOOLCALL_CSS = `
+.ax-tool { border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--bg-0); overflow: hidden; font-family: var(--font-mono); }
+[data-theme="light"] .ax-tool { background: var(--bg-1); }
+.ax-tool__head { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; cursor: pointer; text-align: left; padding: 9px 12px; }
+.ax-tool__head:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-tool__icon { width: 14px; height: 14px; flex: none; color: var(--text-faint); }
+.ax-tool__name { font-size: var(--text-sm); color: var(--text-body); }
+.ax-tool__name b { font-weight: var(--weight-medium); }
+.ax-tool__paren { color: var(--text-faint); }
+.ax-tool__spacer { flex: 1; }
+.ax-tool__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; }
+.ax-tool__dot { width: 6px; height: 6px; border-radius: 1px; }
+.ax-tool--running .ax-tool__status { color: var(--warn); }
+.ax-tool--running .ax-tool__dot { background: var(--warn); animation: ax-tool-pulse 1s var(--ease-out) infinite; }
+.ax-tool--done .ax-tool__status { color: var(--ok); }
+.ax-tool--done .ax-tool__dot { background: var(--ok); }
+.ax-tool--error .ax-tool__status { color: var(--danger); }
+.ax-tool--error .ax-tool__dot { background: var(--danger); }
+.ax-tool__chev { width: 11px; height: 11px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }
+.ax-tool--open .ax-tool__chev { transform: rotate(180deg); }
+.ax-tool__body { border-top: 1px solid var(--border-default); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
+.ax-tool__block-label { font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
+.ax-tool__pre { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--text-body); white-space: pre-wrap; word-break: break-word; }
+@keyframes ax-tool-pulse { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .ax-tool--running .ax-tool__dot { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-toolcall-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-toolcall-css";
+  s.textContent = AX_TOOLCALL_CSS;
+  document.head.appendChild(s);
+}
+const Wrench = /* @__PURE__ */ jsx("svg", { className: "ax-tool__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.1 2.1-2.4-.6-.6-2.4 2.1-2.1z" }) });
+const Chev = /* @__PURE__ */ jsx("svg", { className: "ax-tool__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 STATUS_LABEL = { running: "Running", done: "Done", error: "Error" };
+function ToolCall({ name, args, result, status = "done", defaultOpen = false, className = "", ...rest }) {
+  const [open, setOpen] = useState(defaultOpen);
+  const fmt = (v) => typeof v === "string" ? v : JSON.stringify(v, null, 2);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-tool", "ax-tool--" + status, open ? "ax-tool--open" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-tool__head", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [
+      Wrench,
+      /* @__PURE__ */ jsxs("span", { className: "ax-tool__name", children: [
+        /* @__PURE__ */ jsx("b", { children: name }),
+        /* @__PURE__ */ jsx("span", { className: "ax-tool__paren", children: "()" })
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ax-tool__spacer" }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-tool__status", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-tool__dot" }),
+        STATUS_LABEL[status]
+      ] }),
+      Chev
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-tool__body", style: { display: open ? "flex" : "none" }, children: [
+      args != null ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "ax-tool__block-label", children: "Arguments" }),
+        /* @__PURE__ */ jsx("pre", { className: "ax-tool__pre", children: fmt(args) })
+      ] }) : null,
+      result != null ? /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: "ax-tool__block-label", children: "Result" }),
+        /* @__PURE__ */ jsx("pre", { className: "ax-tool__pre", children: fmt(result) })
+      ] }) : null
+    ] })
+  ] });
+}
+export {
+  ToolCall
+};
+//# sourceMappingURL=ToolCall.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToolCall.js","sources":["../../../src/components/ai/ToolCall.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_TOOLCALL_CSS = `\n.ax-tool { border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--bg-0); overflow: hidden; font-family: var(--font-mono); }\n[data-theme=\"light\"] .ax-tool { background: var(--bg-1); }\n.ax-tool__head { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; cursor: pointer; text-align: left; padding: 9px 12px; }\n.ax-tool__head:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-tool__icon { width: 14px; height: 14px; flex: none; color: var(--text-faint); }\n.ax-tool__name { font-size: var(--text-sm); color: var(--text-body); }\n.ax-tool__name b { font-weight: var(--weight-medium); }\n.ax-tool__paren { color: var(--text-faint); }\n.ax-tool__spacer { flex: 1; }\n.ax-tool__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; letter-spacing: var(--tracking-label); text-transform: uppercase; }\n.ax-tool__dot { width: 6px; height: 6px; border-radius: 1px; }\n.ax-tool--running .ax-tool__status { color: var(--warn); }\n.ax-tool--running .ax-tool__dot { background: var(--warn); animation: ax-tool-pulse 1s var(--ease-out) infinite; }\n.ax-tool--done .ax-tool__status { color: var(--ok); }\n.ax-tool--done .ax-tool__dot { background: var(--ok); }\n.ax-tool--error .ax-tool__status { color: var(--danger); }\n.ax-tool--error .ax-tool__dot { background: var(--danger); }\n.ax-tool__chev { width: 11px; height: 11px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }\n.ax-tool--open .ax-tool__chev { transform: rotate(180deg); }\n.ax-tool__body { border-top: 1px solid var(--border-default); padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }\n.ax-tool__block-label { font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }\n.ax-tool__pre { margin: 0; font-size: var(--text-xs); line-height: 1.6; color: var(--text-body); white-space: pre-wrap; word-break: break-word; }\n@keyframes ax-tool-pulse { 50% { opacity: 0.35; } }\n@media (prefers-reduced-motion: reduce) { .ax-tool--running .ax-tool__dot { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-toolcall-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-toolcall-css\";\n  s.textContent = AX_TOOLCALL_CSS;\n  document.head.appendChild(s);\n}\n\nconst Wrench = <svg className=\"ax-tool__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M14.7 6.3a4 4 0 0 0-5.4 5.4L3 18v3h3l6.3-6.3a4 4 0 0 0 5.4-5.4l-2.1 2.1-2.4-.6-.6-2.4 2.1-2.1z\"></path></svg>;\nconst Chev = <svg className=\"ax-tool__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 STATUS_LABEL = { running: \"Running\", done: \"Done\", error: \"Error\" };\n\nexport function ToolCall({ name, args, result, status = \"done\", defaultOpen = false, className = \"\", ...rest }) {\n  const [open, setOpen] = useState(defaultOpen);\n  const fmt = (v) => typeof v === \"string\" ? v : JSON.stringify(v, null, 2);\n  return (\n    <div className={[\"ax-tool\", \"ax-tool--\" + status, open ? \"ax-tool--open\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <button className=\"ax-tool__head\" aria-expanded={open} onClick={() => setOpen((o) => !o)}>\n        {Wrench}\n        <span className=\"ax-tool__name\"><b>{name}</b><span className=\"ax-tool__paren\">()</span></span>\n        <span className=\"ax-tool__spacer\"></span>\n        <span className=\"ax-tool__status\"><span className=\"ax-tool__dot\"></span>{STATUS_LABEL[status]}</span>\n        {Chev}\n      </button>\n      <div className=\"ax-tool__body\" style={{ display: open ? \"flex\" : \"none\" }}>\n        {args != null ? (\n          <div>\n            <div className=\"ax-tool__block-label\">Arguments</div>\n            <pre className=\"ax-tool__pre\">{fmt(args)}</pre>\n          </div>\n        ) : null}\n        {result != null ? (\n          <div>\n            <div className=\"ax-tool__block-label\">Result</div>\n            <pre className=\"ax-tool__pre\">{fmt(result)}</pre>\n          </div>\n        ) : null}\n      </div>\n    </div>\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;AA2BxB,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,6BAAU,OAAA,EAAI,WAAU,iBAAgB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,iGAAA,CAAiG,EAAA,CAAO;AACjR,MAAM,2BAAQ,OAAA,EAAI,WAAU,iBAAgB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,eAAA,CAAe,EAAA,CAAO;AAE/L,MAAM,eAAe,EAAE,SAAS,WAAW,MAAM,QAAQ,OAAO,QAAA;AAEzD,SAAS,SAAS,EAAE,MAAM,MAAM,QAAQ,SAAS,QAAQ,cAAc,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC9G,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,MAAM,CAAC,MAAM,OAAO,MAAM,WAAW,IAAI,KAAK,UAAU,GAAG,MAAM,CAAC;AACxE,8BACG,OAAA,EAAI,WAAW,CAAC,WAAW,cAAc,QAAQ,OAAO,kBAAkB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvH,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,iBAAgB,iBAAe,MAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GACpF,UAAA;AAAA,MAAA;AAAA,MACD,qBAAC,QAAA,EAAK,WAAU,iBAAgB,UAAA;AAAA,QAAA,oBAAC,OAAG,UAAA,KAAA,CAAK;AAAA,QAAI,oBAAC,QAAA,EAAK,WAAU,kBAAiB,UAAA,KAAA,CAAE;AAAA,MAAA,GAAO;AAAA,MACvF,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,MAClC,qBAAC,QAAA,EAAK,WAAU,mBAAkB,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,eAAA,CAAe;AAAA,QAAQ,aAAa,MAAM;AAAA,MAAA,GAAE;AAAA,MAC7F;AAAA,IAAA,GACH;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,iBAAgB,OAAO,EAAE,SAAS,OAAO,SAAS,OAAA,GAC9D,UAAA;AAAA,MAAA,QAAQ,4BACN,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,aAAS;AAAA,4BAC9C,OAAA,EAAI,WAAU,gBAAgB,UAAA,IAAI,IAAI,EAAA,CAAE;AAAA,MAAA,EAAA,CAC3C,IACE;AAAA,MACH,UAAU,OACT,qBAAC,OAAA,EACC,UAAA;AAAA,QAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,UAAM;AAAA,4BAC3C,OAAA,EAAI,WAAU,gBAAgB,UAAA,IAAI,MAAM,EAAA,CAAE;AAAA,MAAA,EAAA,CAC7C,IACE;AAAA,IAAA,EAAA,CACN;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/buttons/Button.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Agentaily button. Mono-inverted primary; hairline secondary; quiet ghost.
+ */
+export interface ButtonProps {
+  /** Visual style. @default "primary" */
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  /** Control height: 28 / 36 / 44px. @default "md" */
+  size?: "sm" | "md" | "lg";
+  /** Stretch to container width. @default false */
+  full?: boolean;
+  /** Optional leading icon (16px svg element). */
+  icon?: React.ReactNode;
+  disabled?: boolean;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+export declare function Button(props: ButtonProps): JSX.Element;

package/dist/components/buttons/Button.js

@@ -0,0 +1,60 @@
+import { jsxs } from "react/jsx-runtime";
+import "react";
+const AX_BTN_CSS = `
+.ax-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 8px; border: 1px solid transparent; border-radius: var(--radius-2);
+  font-family: var(--font-body); font-weight: var(--weight-medium);
+  cursor: pointer; white-space: nowrap; user-select: none;
+  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
+}
+.ax-btn:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-btn:active:not(:disabled) { transform: translateY(1px); }
+.ax-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+.ax-btn svg { width: 16px; height: 16px; flex: none; }
+
+.ax-btn--primary { background: var(--accent); color: var(--accent-fg); }
+.ax-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
+.ax-btn--secondary { background: transparent; color: var(--text-body); border-color: var(--border-strong); }
+.ax-btn--secondary:hover:not(:disabled) { background: var(--surface-raised); }
+.ax-btn--ghost { background: transparent; color: var(--text-muted); }
+.ax-btn--ghost:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); }
+.ax-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }
+.ax-btn--danger:hover:not(:disabled) { background: var(--danger-dim); }
+
+.ax-btn--sm { height: 28px; padding: 0 10px; font-size: var(--text-sm); }
+.ax-btn--md { height: 36px; padding: 0 14px; font-size: var(--text-sm); }
+.ax-btn--lg { height: 44px; padding: 0 20px; font-size: var(--text-md); }
+.ax-btn--full { width: 100%; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-btn-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-btn-css";
+  s.textContent = AX_BTN_CSS;
+  document.head.appendChild(s);
+}
+function Button({
+  variant = "primary",
+  size = "md",
+  full = false,
+  icon = null,
+  children,
+  className = "",
+  ...rest
+}) {
+  const cls = [
+    "ax-btn",
+    `ax-btn--${variant}`,
+    `ax-btn--${size}`,
+    full ? "ax-btn--full" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("button", { type: "button", className: cls, ...rest, children: [
+    icon,
+    children
+  ] });
+}
+export {
+  Button
+};
+//# sourceMappingURL=Button.js.map

package/dist/components/buttons/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sources":["../../../src/components/buttons/Button.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_BTN_CSS = `\n.ax-btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  gap: 8px; border: 1px solid transparent; border-radius: var(--radius-2);\n  font-family: var(--font-body); font-weight: var(--weight-medium);\n  cursor: pointer; white-space: nowrap; user-select: none;\n  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);\n}\n.ax-btn:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-btn:active:not(:disabled) { transform: translateY(1px); }\n.ax-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n.ax-btn svg { width: 16px; height: 16px; flex: none; }\n\n.ax-btn--primary { background: var(--accent); color: var(--accent-fg); }\n.ax-btn--primary:hover:not(:disabled) { background: var(--accent-hover); }\n.ax-btn--secondary { background: transparent; color: var(--text-body); border-color: var(--border-strong); }\n.ax-btn--secondary:hover:not(:disabled) { background: var(--surface-raised); }\n.ax-btn--ghost { background: transparent; color: var(--text-muted); }\n.ax-btn--ghost:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); }\n.ax-btn--danger { background: transparent; color: var(--danger); border-color: var(--danger); }\n.ax-btn--danger:hover:not(:disabled) { background: var(--danger-dim); }\n\n.ax-btn--sm { height: 28px; padding: 0 10px; font-size: var(--text-sm); }\n.ax-btn--md { height: 36px; padding: 0 14px; font-size: var(--text-sm); }\n.ax-btn--lg { height: 44px; padding: 0 20px; font-size: var(--text-md); }\n.ax-btn--full { width: 100%; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-btn-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-btn-css\";\n  s.textContent = AX_BTN_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Button({\n  variant = \"primary\",\n  size = \"md\",\n  full = false,\n  icon = null,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const cls = [\n    \"ax-btn\",\n    `ax-btn--${variant}`,\n    `ax-btn--${size}`,\n    full ? \"ax-btn--full\" : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <button type=\"button\" className={cls} {...rest}>\n      {icon}\n      {children}\n    </button>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,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;AA4BnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,YAAY,GAAG;AAC7E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,OAAO;AAAA,EACrB,UAAU;AAAA,EACV,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM;AAAA,IACV;AAAA,IACA,WAAW,OAAO;AAAA,IAClB,WAAW,IAAI;AAAA,IACf,OAAO,iBAAiB;AAAA,IACxB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,8BACG,UAAA,EAAO,MAAK,UAAS,WAAW,KAAM,GAAG,MACvC,UAAA;AAAA,IAAA;AAAA,IACA;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/buttons/ButtonGroup.d.ts

@@ -0,0 +1,3 @@
+/** Joins buttons into a single segmented unit (shared borders), horizontal or vertical. */
+export interface ButtonGroupProps { vertical?: boolean; children?: React.ReactNode; }
+export declare function ButtonGroup(props: ButtonGroupProps): JSX.Element;

package/dist/components/buttons/ButtonGroup.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_BTNGROUP_CSS = `
+.ax-btngroup { display: inline-flex; }
+.ax-btngroup > * { border-radius: 0 !important; margin-left: -1px; }
+.ax-btngroup > *:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2) !important; margin-left: 0; }
+.ax-btngroup > *:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0 !important; }
+.ax-btngroup > *:only-child { border-radius: var(--radius-2) !important; }
+.ax-btngroup > *:hover, .ax-btngroup > *:focus-visible { position: relative; z-index: 1; }
+.ax-btngroup--vertical { flex-direction: column; }
+.ax-btngroup--vertical > * { margin-left: 0; margin-top: -1px; }
+.ax-btngroup--vertical > *:first-child { border-radius: var(--radius-2) var(--radius-2) 0 0 !important; margin-top: 0; }
+.ax-btngroup--vertical > *:last-child { border-radius: 0 0 var(--radius-2) var(--radius-2) !important; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-btngroup-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-btngroup-css";
+  s.textContent = AX_BTNGROUP_CSS;
+  document.head.appendChild(s);
+}
+function ButtonGroup({ vertical = false, children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-btngroup", vertical ? "ax-btngroup--vertical" : "", className].filter(Boolean).join(" "), role: "group", ...rest, children });
+}
+export {
+  ButtonGroup
+};
+//# sourceMappingURL=ButtonGroup.js.map

package/dist/components/buttons/ButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonGroup.js","sources":["../../../src/components/buttons/ButtonGroup.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_BTNGROUP_CSS = `\n.ax-btngroup { display: inline-flex; }\n.ax-btngroup > * { border-radius: 0 !important; margin-left: -1px; }\n.ax-btngroup > *:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2) !important; margin-left: 0; }\n.ax-btngroup > *:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0 !important; }\n.ax-btngroup > *:only-child { border-radius: var(--radius-2) !important; }\n.ax-btngroup > *:hover, .ax-btngroup > *:focus-visible { position: relative; z-index: 1; }\n.ax-btngroup--vertical { flex-direction: column; }\n.ax-btngroup--vertical > * { margin-left: 0; margin-top: -1px; }\n.ax-btngroup--vertical > *:first-child { border-radius: var(--radius-2) var(--radius-2) 0 0 !important; margin-top: 0; }\n.ax-btngroup--vertical > *:last-child { border-radius: 0 0 var(--radius-2) var(--radius-2) !important; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-btngroup-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-btngroup-css\";\n  s.textContent = AX_BTNGROUP_CSS;\n  document.head.appendChild(s);\n}\n\nexport function ButtonGroup({ vertical = false, children, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-btngroup\", vertical ? \"ax-btngroup--vertical\" : \"\", className].filter(Boolean).join(\" \")} role=\"group\" {...rest}>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAaxB,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;AAEO,SAAS,YAAY,EAAE,WAAW,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AACnF,SACE,oBAAC,SAAI,WAAW,CAAC,eAAe,WAAW,0BAA0B,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,MAAK,SAAS,GAAG,MAC7H,UACH;AAEJ;"}

package/dist/components/buttons/IconButton.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Square icon-only button. Pass an svg as children and always set label.
+ */
+export interface IconButtonProps {
+  /** Visual style. @default "ghost" */
+  variant?: "ghost" | "outline" | "solid";
+  /** 28 / 36 / 44px square. @default "md" */
+  size?: "sm" | "md" | "lg";
+  /** Accessible name (becomes aria-label + title). Required. */
+  label: string;
+  disabled?: boolean;
+  onClick?: () => void;
+  /** The icon svg element. */
+  children?: React.ReactNode;
+}
+export declare function IconButton(props: IconButtonProps): JSX.Element;

package/dist/components/buttons/IconButton.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_ICONBTN_CSS = `
+.ax-iconbtn {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid transparent; border-radius: var(--radius-2);
+  background: transparent; color: var(--text-muted); cursor: pointer;
+  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
+}
+.ax-iconbtn:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); }
+.ax-iconbtn:active:not(:disabled) { transform: translateY(1px); }
+.ax-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
+.ax-iconbtn--outline { border-color: var(--border-strong); color: var(--text-body); }
+.ax-iconbtn--solid { background: var(--accent); color: var(--accent-fg); }
+.ax-iconbtn--solid:hover:not(:disabled) { background: var(--accent-hover); color: var(--accent-fg); }
+.ax-iconbtn--sm { width: 28px; height: 28px; }
+.ax-iconbtn--sm svg { width: 14px; height: 14px; }
+.ax-iconbtn--md { width: 36px; height: 36px; }
+.ax-iconbtn--md svg { width: 16px; height: 16px; }
+.ax-iconbtn--lg { width: 44px; height: 44px; }
+.ax-iconbtn--lg svg { width: 20px; height: 20px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-iconbtn-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-iconbtn-css";
+  s.textContent = AX_ICONBTN_CSS;
+  document.head.appendChild(s);
+}
+function IconButton({
+  variant = "ghost",
+  size = "md",
+  label,
+  children,
+  className = "",
+  ...rest
+}) {
+  const cls = [
+    "ax-iconbtn",
+    variant !== "ghost" ? `ax-iconbtn--${variant}` : "",
+    `ax-iconbtn--${size}`,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { type: "button", className: cls, "aria-label": label, title: label, ...rest, children });
+}
+export {
+  IconButton
+};
+//# sourceMappingURL=IconButton.js.map

package/dist/components/buttons/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/buttons/IconButton.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_ICONBTN_CSS = `\n.ax-iconbtn {\n  display: inline-flex; align-items: center; justify-content: center;\n  border: 1px solid transparent; border-radius: var(--radius-2);\n  background: transparent; color: var(--text-muted); cursor: pointer;\n  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);\n}\n.ax-iconbtn:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); }\n.ax-iconbtn:active:not(:disabled) { transform: translateY(1px); }\n.ax-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }\n.ax-iconbtn--outline { border-color: var(--border-strong); color: var(--text-body); }\n.ax-iconbtn--solid { background: var(--accent); color: var(--accent-fg); }\n.ax-iconbtn--solid:hover:not(:disabled) { background: var(--accent-hover); color: var(--accent-fg); }\n.ax-iconbtn--sm { width: 28px; height: 28px; }\n.ax-iconbtn--sm svg { width: 14px; height: 14px; }\n.ax-iconbtn--md { width: 36px; height: 36px; }\n.ax-iconbtn--md svg { width: 16px; height: 16px; }\n.ax-iconbtn--lg { width: 44px; height: 44px; }\n.ax-iconbtn--lg svg { width: 20px; height: 20px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-iconbtn-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-iconbtn-css\";\n  s.textContent = AX_ICONBTN_CSS;\n  document.head.appendChild(s);\n}\n\nexport function IconButton({\n  variant = \"ghost\",\n  size = \"md\",\n  label,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const cls = [\n    \"ax-iconbtn\",\n    variant !== \"ghost\" ? `ax-iconbtn--${variant}` : \"\",\n    `ax-iconbtn--${size}`,\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <button type=\"button\" className={cls} aria-label={label} title={label} {...rest}>\n      {children}\n    </button>\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;AAsBvB,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,WAAW;AAAA,EACzB,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM;AAAA,IACV;AAAA,IACA,YAAY,UAAU,eAAe,OAAO,KAAK;AAAA,IACjD,eAAe,IAAI;AAAA,IACnB;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,SACE,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAW,KAAK,cAAY,OAAO,OAAO,OAAQ,GAAG,MACxE,SAAA,CACH;AAEJ;"}

package/dist/components/chat/CodeBlock.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Code block with mono lang label and copy button.
+ */
+export interface CodeBlockProps {
+  code: string;
+  /** Shown uppercase in the header. @default "text" */
+  lang?: string;
+}
+export declare function CodeBlock(props: CodeBlockProps): JSX.Element;

package/dist/components/chat/CodeBlock.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_CODE_CSS = `
+.ax-code {
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-2);
+  overflow: hidden;
+  background: var(--bg-0);
+}
+[data-theme="light"] .ax-code, .ax-code--paper { background: var(--bg-1); }
+.ax-code__head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 6px 12px;
+  border-bottom: 1px solid var(--border-default);
+  background: var(--surface-card);
+}
+.ax-code__lang {
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  letter-spacing: var(--tracking-label); text-transform: uppercase;
+  color: var(--text-faint);
+}
+.ax-code__copy {
+  appearance: none; background: none; border: none; cursor: pointer;
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  color: var(--text-faint); padding: 2px 6px; border-radius: var(--radius-1);
+  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
+}
+.ax-code__copy:hover { color: var(--text-body); background: var(--surface-raised); }
+.ax-code__pre {
+  margin: 0; padding: 14px 16px; overflow-x: auto;
+  font-family: var(--font-mono); font-size: var(--text-sm);
+  line-height: 1.7; color: var(--text-body);
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-code-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-code-css";
+  s.textContent = AX_CODE_CSS;
+  document.head.appendChild(s);
+}
+function CodeBlock({ code = "", lang = "text", className = "", ...rest }) {
+  const [copied, setCopied] = useState(false);
+  const copy = () => {
+    try {
+      navigator.clipboard && navigator.clipboard.writeText(code);
+    } catch (e) {
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-code", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-code__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-code__lang", children: lang }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "ax-code__copy", onClick: copy, children: copied ? "copied ✓" : "copy" })
+    ] }),
+    /* @__PURE__ */ jsx("pre", { className: "ax-code__pre", children: /* @__PURE__ */ jsx("code", { children: code }) })
+  ] });
+}
+export {
+  CodeBlock
+};
+//# sourceMappingURL=CodeBlock.js.map

package/dist/components/chat/CodeBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/chat/CodeBlock.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_CODE_CSS = `\n.ax-code {\n  border: 1px solid var(--border-default);\n  border-radius: var(--radius-2);\n  overflow: hidden;\n  background: var(--bg-0);\n}\n[data-theme=\"light\"] .ax-code, .ax-code--paper { background: var(--bg-1); }\n.ax-code__head {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 6px 12px;\n  border-bottom: 1px solid var(--border-default);\n  background: var(--surface-card);\n}\n.ax-code__lang {\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  letter-spacing: var(--tracking-label); text-transform: uppercase;\n  color: var(--text-faint);\n}\n.ax-code__copy {\n  appearance: none; background: none; border: none; cursor: pointer;\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  color: var(--text-faint); padding: 2px 6px; border-radius: var(--radius-1);\n  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n}\n.ax-code__copy:hover { color: var(--text-body); background: var(--surface-raised); }\n.ax-code__pre {\n  margin: 0; padding: 14px 16px; overflow-x: auto;\n  font-family: var(--font-mono); font-size: var(--text-sm);\n  line-height: 1.7; color: var(--text-body);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-code-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-code-css\";\n  s.textContent = AX_CODE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function CodeBlock({ code = \"\", lang = \"text\", className = \"\", ...rest }) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    try {\n      navigator.clipboard && navigator.clipboard.writeText(code);\n    } catch (e) { /* noop */ }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-code\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-code__head\">\n        <span className=\"ax-code__lang\">{lang}</span>\n        <button type=\"button\" className=\"ax-code__copy\" onClick={copy}>\n          {copied ? \"copied ✓\" : \"copy\"}\n        </button>\n      </div>\n      <pre className=\"ax-code__pre\"><code>{code}</code></pre>\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCpB,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;AAEO,SAAS,UAAU,EAAE,OAAO,IAAI,OAAO,QAAQ,YAAY,IAAI,GAAG,QAAQ;AAC/E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,OAAO,MAAM;AACjB,QAAI;AACF,gBAAU,aAAa,UAAU,UAAU,UAAU,IAAI;AAAA,IAC3D,SAAS,GAAG;AAAA,IAAa;AACzB,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EACzC;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACpE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAK;AAAA,MACtC,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAU,iBAAgB,SAAS,MACtD,UAAA,SAAS,aAAa,OAAA,CACzB;AAAA,IAAA,GACF;AAAA,wBACC,OAAA,EAAI,WAAU,gBAAe,UAAA,oBAAC,QAAA,EAAM,gBAAK,EAAA,CAAO;AAAA,EAAA,GACnD;AAEJ;"}

package/dist/components/chat/Composer.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @startingPoint section="Chat" subtitle="Auto-growing chat input with model chip and send" viewport="700x180"
+ * Chat input: auto-growing textarea, model chip, ⏎-send hint, send button.
+ */
+export interface ComposerProps {
+  value: string;
+  onChange?: (value: string) => void;
+  /** Fired on send click or Enter (without Shift). */
+  onSend?: () => void;
+  /** @default "Message Agentaily…" */
+  placeholder?: string;
+  /** Model chip label. @default "agentaily-2" */
+  model?: string;
+  onModelClick?: () => void;
+  disabled?: boolean;
+}
+export declare function Composer(props: ComposerProps): JSX.Element;