@agentaily/design-system 0.1.0

package/dist/components/voice/SpeechInput.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_SPEECH_CSS = `
+.ax-speech { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-card); }
+.ax-speech__btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; border-radius: var(--radius-full); transition: background var(--dur-1) var(--ease-out); }
+.ax-speech__btn--idle { background: var(--accent); color: var(--accent-fg); }
+.ax-speech__btn--idle:hover { background: var(--accent-hover); }
+.ax-speech__btn--recording { background: var(--danger); color: #fff; }
+.ax-speech__viz { display: flex; align-items: center; gap: 3px; height: 28px; min-width: 80px; }
+.ax-speech__bar { width: 3px; border-radius: 1px; background: var(--border-strong); }
+.ax-speech--recording .ax-speech__bar { background: var(--danger); animation: ax-speech-bounce 0.8s var(--ease-out) infinite; }
+.ax-speech--recording .ax-speech__bar:nth-child(2n) { animation-delay: 0.15s; }
+.ax-speech--recording .ax-speech__bar:nth-child(3n) { animation-delay: 0.3s; }
+.ax-speech--recording .ax-speech__bar:nth-child(4n) { animation-delay: 0.45s; }
+.ax-speech__status { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
+.ax-speech--recording .ax-speech__status { color: var(--danger); }
+.ax-speech__time { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }
+@keyframes ax-speech-bounce { 0%, 100% { height: 6px; } 50% { height: 24px; } }
+@media (prefers-reduced-motion: reduce) { .ax-speech--recording .ax-speech__bar { animation: none; height: 14px; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-speech-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-speech-css";
+  s.textContent = AX_SPEECH_CSS;
+  document.head.appendChild(s);
+}
+const Mic = /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 10a7 7 0 0 0 14 0M12 17v4" })
+] });
+const Stop = /* @__PURE__ */ jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }) });
+function SpeechInput({ recording = false, time = "0:00", onToggle, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-speech", recording ? "ax-speech--recording" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("button", { className: "ax-speech__btn ax-speech__btn--" + (recording ? "recording" : "idle"), onClick: onToggle, "aria-label": recording ? "Stop" : "Record", children: recording ? Stop : Mic }),
+    /* @__PURE__ */ jsx("div", { className: "ax-speech__viz", children: Array.from({ length: 16 }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "ax-speech__bar", style: { height: recording ? void 0 : 6 + i % 4 * 4 } }, i)) }),
+    recording ? /* @__PURE__ */ jsx("span", { className: "ax-speech__time", children: time }) : /* @__PURE__ */ jsx("span", { className: "ax-speech__status", children: "Tap to speak" })
+  ] });
+}
+export {
+  SpeechInput
+};
+//# sourceMappingURL=SpeechInput.js.map

package/dist/components/voice/SpeechInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeechInput.js","sources":["../../../src/components/voice/SpeechInput.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SPEECH_CSS = `\n.ax-speech { display: inline-flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-card); }\n.ax-speech__btn { width: 44px; height: 44px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; border: none; border-radius: var(--radius-full); transition: background var(--dur-1) var(--ease-out); }\n.ax-speech__btn--idle { background: var(--accent); color: var(--accent-fg); }\n.ax-speech__btn--idle:hover { background: var(--accent-hover); }\n.ax-speech__btn--recording { background: var(--danger); color: #fff; }\n.ax-speech__viz { display: flex; align-items: center; gap: 3px; height: 28px; min-width: 80px; }\n.ax-speech__bar { width: 3px; border-radius: 1px; background: var(--border-strong); }\n.ax-speech--recording .ax-speech__bar { background: var(--danger); animation: ax-speech-bounce 0.8s var(--ease-out) infinite; }\n.ax-speech--recording .ax-speech__bar:nth-child(2n) { animation-delay: 0.15s; }\n.ax-speech--recording .ax-speech__bar:nth-child(3n) { animation-delay: 0.3s; }\n.ax-speech--recording .ax-speech__bar:nth-child(4n) { animation-delay: 0.45s; }\n.ax-speech__status { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }\n.ax-speech--recording .ax-speech__status { color: var(--danger); }\n.ax-speech__time { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-muted); }\n@keyframes ax-speech-bounce { 0%, 100% { height: 6px; } 50% { height: 24px; } }\n@media (prefers-reduced-motion: reduce) { .ax-speech--recording .ax-speech__bar { animation: none; height: 14px; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-speech-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-speech-css\";\n  s.textContent = AX_SPEECH_CSS;\n  document.head.appendChild(s);\n}\n\nconst Mic = <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"></rect><path d=\"M5 10a7 7 0 0 0 14 0M12 17v4\"></path></svg>;\nconst Stop = <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><rect x=\"6\" y=\"6\" width=\"12\" height=\"12\" rx=\"2\"></rect></svg>;\n\nexport function SpeechInput({ recording = false, time = \"0:00\", onToggle, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-speech\", recording ? \"ax-speech--recording\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <button className={\"ax-speech__btn ax-speech__btn--\" + (recording ? \"recording\" : \"idle\")} onClick={onToggle} aria-label={recording ? \"Stop\" : \"Record\"}>\n        {recording ? Stop : Mic}\n      </button>\n      <div className=\"ax-speech__viz\">\n        {Array.from({ length: 16 }).map((_, i) => <span key={i} className=\"ax-speech__bar\" style={{ height: recording ? undefined : (6 + (i % 4) * 4) }}></span>)}\n      </div>\n      {recording ? <span className=\"ax-speech__time\">{time}</span> : <span className=\"ax-speech__status\">Tap to speak</span>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBtB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,eAAe,GAAG;AAChF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,MAAM,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,KAAI,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,+BAAA,CAA+B;AAAA,GAAO;AAC/P,MAAM,2BAAQ,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,8BAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI,EAAA,CAAO;AAEjI,SAAS,YAAY,EAAE,YAAY,OAAO,OAAO,QAAQ,UAAU,YAAY,IAAI,GAAG,QAAQ;AACnG,8BACG,OAAA,EAAI,WAAW,CAAC,aAAa,YAAY,yBAAyB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC/G,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAO,WAAW,qCAAqC,YAAY,cAAc,SAAS,SAAS,UAAU,cAAY,YAAY,SAAS,UAC5I,UAAA,YAAY,OAAO,KACtB;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA,MAAM,KAAK,EAAE,QAAQ,GAAA,CAAI,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,QAAA,EAAa,WAAU,kBAAiB,OAAO,EAAE,QAAQ,YAAY,SAAa,IAAK,IAAI,IAAK,EAAA,EAAG,GAAzF,CAA4F,CAAO,GAC1J;AAAA,IACC,YAAY,oBAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,KAAA,CAAK,IAAU,oBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,eAAA,CAAY;AAAA,EAAA,GACjH;AAEJ;"}

package/dist/components/voice/Transcription.d.ts

@@ -0,0 +1,4 @@
+/** Live or final speech transcript; supports speaker labels and an interim (greyed) tail. */
+export interface TranscriptSegment { text: string; speaker?: string; }
+export interface TranscriptionProps { live?: boolean; segments?: Array<string | TranscriptSegment>; text?: string; interim?: string; }
+export declare function Transcription(props: TranscriptionProps): JSX.Element;

package/dist/components/voice/Transcription.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_TRANSCRIPTION_CSS = `
+.ax-transcription { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); padding: 14px 16px; }
+.ax-transcription__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
+.ax-transcription__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--danger); }
+.ax-transcription__livedot { width: 7px; height: 7px; border-radius: 1px; background: var(--danger); animation: ax-trans-pulse 1s var(--ease-out) infinite; }
+.ax-transcription__text { font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); }
+.ax-transcription__seg { color: var(--text-body); }
+.ax-transcription__interim { color: var(--text-faint); }
+.ax-transcription__cursor { display: inline-block; width: 0.5em; height: 1em; background: var(--text-body); vertical-align: text-bottom; margin-left: 2px; animation: ax-trans-blink 1.1s steps(1) infinite; }
+.ax-transcription__speaker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-right: 8px; }
+@keyframes ax-trans-pulse { 50% { opacity: 0.3; } }
+@keyframes ax-trans-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .ax-transcription__livedot, .ax-transcription__cursor { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-transcription-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-transcription-css";
+  s.textContent = AX_TRANSCRIPTION_CSS;
+  document.head.appendChild(s);
+}
+function Transcription({ live = false, segments = [], text, interim, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-transcription", className].filter(Boolean).join(" "), ...rest, children: [
+    live ? /* @__PURE__ */ jsx("div", { className: "ax-transcription__head", children: /* @__PURE__ */ jsxs("span", { className: "ax-transcription__live", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-transcription__livedot" }),
+      "Transcribing"
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ax-transcription__text", children: [
+      segments.length ? segments.map((seg, i) => {
+        const s = typeof seg === "string" ? { text: seg } : seg;
+        return /* @__PURE__ */ jsxs("span", { children: [
+          s.speaker ? /* @__PURE__ */ jsx("span", { className: "ax-transcription__speaker", children: s.speaker }) : null,
+          /* @__PURE__ */ jsxs("span", { className: "ax-transcription__seg", children: [
+            s.text,
+            " "
+          ] })
+        ] }, i);
+      }) : /* @__PURE__ */ jsx("span", { className: "ax-transcription__seg", children: text }),
+      interim ? /* @__PURE__ */ jsx("span", { className: "ax-transcription__interim", children: interim }) : null,
+      live ? /* @__PURE__ */ jsx("span", { className: "ax-transcription__cursor" }) : null
+    ] })
+  ] });
+}
+export {
+  Transcription
+};
+//# sourceMappingURL=Transcription.js.map

package/dist/components/voice/Transcription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Transcription.js","sources":["../../../src/components/voice/Transcription.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TRANSCRIPTION_CSS = `\n.ax-transcription { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); padding: 14px 16px; }\n.ax-transcription__head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }\n.ax-transcription__live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--danger); }\n.ax-transcription__livedot { width: 7px; height: 7px; border-radius: 1px; background: var(--danger); animation: ax-trans-pulse 1s var(--ease-out) infinite; }\n.ax-transcription__text { font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); }\n.ax-transcription__seg { color: var(--text-body); }\n.ax-transcription__interim { color: var(--text-faint); }\n.ax-transcription__cursor { display: inline-block; width: 0.5em; height: 1em; background: var(--text-body); vertical-align: text-bottom; margin-left: 2px; animation: ax-trans-blink 1.1s steps(1) infinite; }\n.ax-transcription__speaker { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-right: 8px; }\n@keyframes ax-trans-pulse { 50% { opacity: 0.3; } }\n@keyframes ax-trans-blink { 50% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .ax-transcription__livedot, .ax-transcription__cursor { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-transcription-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-transcription-css\";\n  s.textContent = AX_TRANSCRIPTION_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Transcription({ live = false, segments = [], text, interim, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-transcription\", className].filter(Boolean).join(\" \")} {...rest}>\n      {live ? (\n        <div className=\"ax-transcription__head\">\n          <span className=\"ax-transcription__live\"><span className=\"ax-transcription__livedot\"></span>Transcribing</span>\n        </div>\n      ) : null}\n      <div className=\"ax-transcription__text\">\n        {segments.length ? segments.map((seg, i) => {\n          const s = typeof seg === \"string\" ? { text: seg } : seg;\n          return (\n            <span key={i}>\n              {s.speaker ? <span className=\"ax-transcription__speaker\">{s.speaker}</span> : null}\n              <span className=\"ax-transcription__seg\">{s.text} </span>\n            </span>\n          );\n        }) : <span className=\"ax-transcription__seg\">{text}</span>}\n        {interim ? <span className=\"ax-transcription__interim\">{interim}</span> : null}\n        {live ? <span className=\"ax-transcription__cursor\"></span> : null}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,uBAAuB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAe7B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,sBAAsB,GAAG;AACvF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,cAAc,EAAE,OAAO,OAAO,WAAW,CAAA,GAAI,MAAM,SAAS,YAAY,IAAI,GAAG,QAAQ;AACrG,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,oBAAoB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC5E,UAAA;AAAA,IAAA,2BACE,OAAA,EAAI,WAAU,0BACb,UAAA,qBAAC,QAAA,EAAK,WAAU,0BAAyB,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,4BAAA,CAA4B;AAAA,MAAO;AAAA,IAAA,EAAA,CAAY,GAC1G,IACE;AAAA,IACJ,qBAAC,OAAA,EAAI,WAAU,0BACZ,UAAA;AAAA,MAAA,SAAS,SAAS,SAAS,IAAI,CAAC,KAAK,MAAM;AAC1C,cAAM,IAAI,OAAO,QAAQ,WAAW,EAAE,MAAM,QAAQ;AACpD,oCACG,QAAA,EACE,UAAA;AAAA,UAAA,EAAE,UAAU,oBAAC,QAAA,EAAK,WAAU,6BAA6B,UAAA,EAAE,SAAQ,IAAU;AAAA,UAC9E,qBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA;AAAA,YAAA,EAAE;AAAA,YAAK;AAAA,UAAA,EAAA,CAAC;AAAA,QAAA,EAAA,GAFxC,CAGX;AAAA,MAEJ,CAAC,IAAI,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,MAAK;AAAA,MAClD,UAAU,oBAAC,QAAA,EAAK,WAAU,6BAA6B,mBAAQ,IAAU;AAAA,MACzE,OAAO,oBAAC,QAAA,EAAK,WAAU,4BAA2B,IAAU;AAAA,IAAA,EAAA,CAC/D;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/voice/VoiceSelector.d.ts

@@ -0,0 +1,3 @@
+/** TTS voice picker dropdown with swatch initials and preview affordance. */
+export interface VoiceSelectorProps { voices: Array<string | { value: string; label: string; tag?: string }>; value?: string; onChange?: (value: string) => void; }
+export declare function VoiceSelector(props: VoiceSelectorProps): JSX.Element;

package/dist/components/voice/VoiceSelector.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+const AX_VOICESEL_CSS = `
+.ax-voicesel { position: relative; display: inline-flex; }
+.ax-voicesel__trigger { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--dur-1) var(--ease-out); }
+.ax-voicesel__trigger:hover { border-color: var(--border-strong); }
+.ax-voicesel__swatch { width: 18px; height: 18px; flex: none; border-radius: var(--radius-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; background: var(--accent); color: var(--accent-fg); }
+.ax-voicesel__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1); }
+.ax-voicesel__opt { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-2); }
+.ax-voicesel__opt:hover { background: var(--surface-raised); }
+.ax-voicesel__name { font-size: var(--text-sm); color: var(--text-body); flex: 1; }
+.ax-voicesel__tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.ax-voicesel__play { color: var(--text-faint); cursor: pointer; }
+.ax-voicesel__play:hover { color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-voicesel-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-voicesel-css";
+  s.textContent = AX_VOICESEL_CSS;
+  document.head.appendChild(s);
+}
+function VoiceSelector({ voices = [], value, onChange, className = "", ...rest }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const norm = (v) => typeof v === "string" ? { value: v, label: v } : v;
+  const current = voices.map(norm).find((v) => v.value === value) || norm(voices[0] || "Voice");
+  const onDoc = useCallback((e) => {
+    if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", onDoc);
+      return () => document.removeEventListener("mousedown", onDoc);
+    }
+  }, [open, onDoc]);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-voicesel", className].filter(Boolean).join(" "), ref, ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-voicesel__trigger", onClick: () => setOpen((o) => !o), children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-voicesel__swatch", children: (current.label || "V")[0] }),
+      current.label
+    ] }),
+    open ? /* @__PURE__ */ jsx("div", { className: "ax-voicesel__panel", children: voices.map((v) => {
+      const voice = norm(v);
+      return /* @__PURE__ */ jsxs("button", { className: "ax-voicesel__opt", onClick: () => {
+        onChange && onChange(voice.value);
+        setOpen(false);
+      }, children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-voicesel__swatch", children: (voice.label || "V")[0] }),
+        /* @__PURE__ */ jsx("span", { className: "ax-voicesel__name", children: voice.label }),
+        voice.tag ? /* @__PURE__ */ jsx("span", { className: "ax-voicesel__tag", children: voice.tag }) : null,
+        /* @__PURE__ */ jsx("span", { className: "ax-voicesel__play", children: "▶" })
+      ] }, voice.value);
+    }) }) : null
+  ] });
+}
+export {
+  VoiceSelector
+};
+//# sourceMappingURL=VoiceSelector.js.map

package/dist/components/voice/VoiceSelector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VoiceSelector.js","sources":["../../../src/components/voice/VoiceSelector.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_VOICESEL_CSS = `\n.ax-voicesel { position: relative; display: inline-flex; }\n.ax-voicesel__trigger { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--dur-1) var(--ease-out); }\n.ax-voicesel__trigger:hover { border-color: var(--border-strong); }\n.ax-voicesel__swatch { width: 18px; height: 18px; flex: none; border-radius: var(--radius-1); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; background: var(--accent); color: var(--accent-fg); }\n.ax-voicesel__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 240px; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1); }\n.ax-voicesel__opt { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-2); }\n.ax-voicesel__opt:hover { background: var(--surface-raised); }\n.ax-voicesel__name { font-size: var(--text-sm); color: var(--text-body); flex: 1; }\n.ax-voicesel__tag { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }\n.ax-voicesel__play { color: var(--text-faint); cursor: pointer; }\n.ax-voicesel__play:hover { color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-voicesel-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-voicesel-css\";\n  s.textContent = AX_VOICESEL_CSS;\n  document.head.appendChild(s);\n}\n\nexport function VoiceSelector({ voices = [], value, onChange, className = \"\", ...rest }) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef(null);\n  const norm = (v) => (typeof v === \"string\" ? { value: v, label: v } : v);\n  const current = voices.map(norm).find((v) => v.value === value) || norm(voices[0] || \"Voice\");\n  const onDoc = useCallback((e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }, []);\n  useEffect(() => {\n    if (open) { document.addEventListener(\"mousedown\", onDoc); return () => document.removeEventListener(\"mousedown\", onDoc); }\n  }, [open, onDoc]);\n  return (\n    <div className={[\"ax-voicesel\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      <button className=\"ax-voicesel__trigger\" onClick={() => setOpen((o) => !o)}>\n        <span className=\"ax-voicesel__swatch\">{(current.label || \"V\")[0]}</span>\n        {current.label}\n      </button>\n      {open ? (\n        <div className=\"ax-voicesel__panel\">\n          {voices.map((v) => {\n            const voice = norm(v);\n            return (\n              <button key={voice.value} className=\"ax-voicesel__opt\" onClick={() => { onChange && onChange(voice.value); setOpen(false); }}>\n                <span className=\"ax-voicesel__swatch\">{(voice.label || \"V\")[0]}</span>\n                <span className=\"ax-voicesel__name\">{voice.label}</span>\n                {voice.tag ? <span className=\"ax-voicesel__tag\">{voice.tag}</span> : null}\n                <span className=\"ax-voicesel__play\">▶</span>\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcxB,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,cAAc,EAAE,SAAS,CAAA,GAAI,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AACvF,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,OAAO,CAAC,MAAO,OAAO,MAAM,WAAW,EAAE,OAAO,GAAG,OAAO,EAAA,IAAM;AACtE,QAAM,UAAU,OAAO,IAAI,IAAI,EAAE,KAAK,CAAC,MAAM,EAAE,UAAU,KAAK,KAAK,KAAK,OAAO,CAAC,KAAK,OAAO;AAC5F,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;AAAE,eAAS,iBAAiB,aAAa,KAAK;AAAG,aAAO,MAAM,SAAS,oBAAoB,aAAa,KAAK;AAAA,IAAG;AAAA,EAC5H,GAAG,CAAC,MAAM,KAAK,CAAC;AAChB,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAW,GAAG,MAClF,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,wBAAuB,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GACvE,UAAA;AAAA,MAAA,oBAAC,UAAK,WAAU,uBAAwB,mBAAQ,SAAS,KAAK,CAAC,EAAA,CAAE;AAAA,MAChE,QAAQ;AAAA,IAAA,GACX;AAAA,IACC,2BACE,OAAA,EAAI,WAAU,sBACZ,UAAA,OAAO,IAAI,CAAC,MAAM;AACjB,YAAM,QAAQ,KAAK,CAAC;AACpB,aACE,qBAAC,UAAA,EAAyB,WAAU,oBAAmB,SAAS,MAAM;AAAE,oBAAY,SAAS,MAAM,KAAK;AAAG,gBAAQ,KAAK;AAAA,MAAG,GACzH,UAAA;AAAA,QAAA,oBAAC,UAAK,WAAU,uBAAwB,iBAAM,SAAS,KAAK,CAAC,EAAA,CAAE;AAAA,QAC/D,oBAAC,QAAA,EAAK,WAAU,qBAAqB,gBAAM,OAAM;AAAA,QAChD,MAAM,MAAM,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,MAAM,KAAI,IAAU;AAAA,QACrE,oBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,IAAA,CAAC;AAAA,MAAA,EAAA,GAJ1B,MAAM,KAKnB;AAAA,IAEJ,CAAC,GACH,IACE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/workflow/Flow.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Node-graph workflow primitives. Canvas holds Nodes (absolute x/y) and an SVG
+ * edge layer; Edge/Connection draw bezier links; Controls/Panel/Toolbar are canvas chrome.
+ */
+export interface CanvasProps { edges?: React.ReactNode; children?: React.ReactNode; }
+export declare function Canvas(props: CanvasProps): JSX.Element;
+export interface NodeProps { x?: number; y?: number; title?: React.ReactNode; status?: "ok" | "warn"; ports?: boolean; selected?: boolean; children?: React.ReactNode; }
+export declare function Node(props: NodeProps): JSX.Element;
+export interface Point { x: number; y: number; }
+export interface EdgeProps { from: Point; to: Point; animated?: boolean; label?: string; }
+/** Static bezier edge (render inside Canvas's edges slot). */
+export declare function Edge(props: EdgeProps): JSX.Element;
+/** Animated (flowing dashes) edge — for in-progress links. */
+export declare function Connection(props: { from: Point; to: Point; label?: string }): JSX.Element;
+export interface ControlsProps { orientation?: "vertical" | "horizontal"; onZoomIn?: () => void; onZoomOut?: () => void; onFit?: () => void; }
+export declare function Controls(props: ControlsProps): JSX.Element;
+export interface PanelProps { position?: "top-right" | "top-left" | "bottom-right"; children?: React.ReactNode; }
+export declare function Panel(props: PanelProps): JSX.Element;
+export interface ToolbarProps { children?: React.ReactNode; }
+export declare function Toolbar(props: ToolbarProps): JSX.Element;

package/dist/components/workflow/Flow.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_FLOW_CSS = `
+.ax-canvas { position: relative; width: 100%; height: 320px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-page); background-image: var(--dot-grid); background-size: 20px 20px; }
+.ax-canvas__inner { position: absolute; inset: 0; }
+.ax-canvas__edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
+
+.ax-node { position: absolute; min-width: 130px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-1); user-select: none; }
+.ax-node--selected { border-color: var(--text-body); box-shadow: var(--ring); }
+.ax-node__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-default); }
+.ax-node__dot { width: 7px; height: 7px; border-radius: 1px; flex: none; background: var(--text-faint); }
+.ax-node__dot--ok { background: var(--ok); }
+.ax-node__dot--warn { background: var(--warn); }
+.ax-node__title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-body); letter-spacing: 0.02em; flex: 1; }
+.ax-node__body { padding: 8px 10px; font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); }
+.ax-node__port { position: absolute; width: 9px; height: 9px; border-radius: var(--radius-1); background: var(--surface-page); border: 1px solid var(--border-strong); top: 50%; transform: translateY(-50%); }
+.ax-node__port--in { left: -5px; }
+.ax-node__port--out { right: -5px; }
+
+.ax-flow-controls { position: absolute; bottom: 12px; left: 12px; z-index: 5; display: flex; flex-direction: column; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); overflow: hidden; box-shadow: var(--shadow-1); }
+.ax-flow-controls--horizontal { flex-direction: row; }
+.ax-flow-controls__btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; color: var(--text-muted); border-bottom: 1px solid var(--border-default); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-flow-controls--horizontal .ax-flow-controls__btn { border-bottom: none; border-right: 1px solid var(--border-default); }
+.ax-flow-controls__btn:last-child { border: none; }
+.ax-flow-controls__btn:hover { background: var(--surface-raised); color: var(--text-body); }
+
+.ax-flow-panel { position: absolute; z-index: 5; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-3); }
+.ax-flow-panel--top-right { top: 12px; right: 12px; }
+.ax-flow-panel--top-left { top: 12px; left: 12px; }
+.ax-flow-panel--bottom-right { bottom: 12px; right: 12px; }
+
+.ax-flow-toolbar { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-1); }
+.ax-flow-toolbar__btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; border-radius: var(--radius-1); color: var(--text-muted); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-flow-toolbar__btn:hover, .ax-flow-toolbar__btn--active { background: var(--surface-raised); color: var(--text-body); }
+.ax-flow-toolbar__sep { width: 1px; align-self: stretch; background: var(--border-default); margin: 2px 2px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-flow-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-flow-css";
+  s.textContent = AX_FLOW_CSS;
+  document.head.appendChild(s);
+}
+function Canvas({ children, edges, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-canvas", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("svg", { className: "ax-canvas__edges", children: edges }),
+    /* @__PURE__ */ jsx("div", { className: "ax-canvas__inner", children })
+  ] });
+}
+function Node({ x = 0, y = 0, title, status, ports = true, selected = false, children, className = "", style = {}, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-node", selected ? "ax-node--selected" : "", className].filter(Boolean).join(" "), style: { left: x, top: y, ...style }, ...rest, children: [
+    ports ? /* @__PURE__ */ jsx("span", { className: "ax-node__port ax-node__port--in" }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ax-node__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-node__dot" + (status ? " ax-node__dot--" + status : "") }),
+      /* @__PURE__ */ jsx("span", { className: "ax-node__title", children: title })
+    ] }),
+    children ? /* @__PURE__ */ jsx("div", { className: "ax-node__body", children }) : null,
+    ports ? /* @__PURE__ */ jsx("span", { className: "ax-node__port ax-node__port--out" }) : null
+  ] });
+}
+function Edge({ from, to, animated = false, label, ...rest }) {
+  const dx = Math.abs(to.x - from.x) * 0.5;
+  const d = `M ${from.x} ${from.y} C ${from.x + dx} ${from.y}, ${to.x - dx} ${to.y}, ${to.x} ${to.y}`;
+  const mx = (from.x + to.x) / 2, my = (from.y + to.y) / 2;
+  return /* @__PURE__ */ jsxs("g", { ...rest, children: [
+    /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: "var(--border-strong)", strokeWidth: "1.5", strokeDasharray: animated ? "4 4" : void 0, children: animated ? /* @__PURE__ */ jsx("animate", { attributeName: "stroke-dashoffset", from: "8", to: "0", dur: "0.5s", repeatCount: "indefinite" }) : null }),
+    label ? /* @__PURE__ */ jsx("text", { x: mx, y: my - 4, fill: "var(--text-faint)", fontSize: "9", fontFamily: "var(--font-mono)", textAnchor: "middle", children: label }) : null
+  ] });
+}
+function Connection({ from, to, ...rest }) {
+  return /* @__PURE__ */ jsx(Edge, { from, to, animated: true, ...rest });
+}
+function Controls({ orientation = "vertical", onZoomIn, onZoomOut, onFit, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-flow-controls", orientation === "horizontal" ? "ax-flow-controls--horizontal" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("button", { className: "ax-flow-controls__btn", onClick: onZoomIn, "aria-label": "Zoom in", children: "+" }),
+    /* @__PURE__ */ jsx("button", { className: "ax-flow-controls__btn", onClick: onZoomOut, "aria-label": "Zoom out", children: "−" }),
+    /* @__PURE__ */ jsx("button", { className: "ax-flow-controls__btn", onClick: onFit, "aria-label": "Fit view", children: "⊡" })
+  ] });
+}
+function Panel({ position = "top-right", children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-flow-panel", "ax-flow-panel--" + position, className].filter(Boolean).join(" "), ...rest, children });
+}
+function Toolbar({ children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-flow-toolbar", className].filter(Boolean).join(" "), ...rest, children });
+}
+const Flow = Canvas;
+export {
+  Canvas,
+  Connection,
+  Controls,
+  Edge,
+  Flow,
+  Node,
+  Panel,
+  Toolbar
+};
+//# sourceMappingURL=Flow.js.map

package/dist/components/workflow/Flow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flow.js","sources":["../../../src/components/workflow/Flow.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_FLOW_CSS = `\n.ax-canvas { position: relative; width: 100%; height: 320px; overflow: hidden; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-page); background-image: var(--dot-grid); background-size: 20px 20px; }\n.ax-canvas__inner { position: absolute; inset: 0; }\n.ax-canvas__edges { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }\n\n.ax-node { position: absolute; min-width: 130px; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-1); user-select: none; }\n.ax-node--selected { border-color: var(--text-body); box-shadow: var(--ring); }\n.ax-node__head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-default); }\n.ax-node__dot { width: 7px; height: 7px; border-radius: 1px; flex: none; background: var(--text-faint); }\n.ax-node__dot--ok { background: var(--ok); }\n.ax-node__dot--warn { background: var(--warn); }\n.ax-node__title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-body); letter-spacing: 0.02em; flex: 1; }\n.ax-node__body { padding: 8px 10px; font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-snug); }\n.ax-node__port { position: absolute; width: 9px; height: 9px; border-radius: var(--radius-1); background: var(--surface-page); border: 1px solid var(--border-strong); top: 50%; transform: translateY(-50%); }\n.ax-node__port--in { left: -5px; }\n.ax-node__port--out { right: -5px; }\n\n.ax-flow-controls { position: absolute; bottom: 12px; left: 12px; z-index: 5; display: flex; flex-direction: column; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); overflow: hidden; box-shadow: var(--shadow-1); }\n.ax-flow-controls--horizontal { flex-direction: row; }\n.ax-flow-controls__btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; color: var(--text-muted); border-bottom: 1px solid var(--border-default); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-flow-controls--horizontal .ax-flow-controls__btn { border-bottom: none; border-right: 1px solid var(--border-default); }\n.ax-flow-controls__btn:last-child { border: none; }\n.ax-flow-controls__btn:hover { background: var(--surface-raised); color: var(--text-body); }\n\n.ax-flow-panel { position: absolute; z-index: 5; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-1); padding: var(--space-3); }\n.ax-flow-panel--top-right { top: 12px; right: 12px; }\n.ax-flow-panel--top-left { top: 12px; left: 12px; }\n.ax-flow-panel--bottom-right { bottom: 12px; right: 12px; }\n\n.ax-flow-toolbar { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); box-shadow: var(--shadow-1); }\n.ax-flow-toolbar__btn { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; border-radius: var(--radius-1); color: var(--text-muted); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-flow-toolbar__btn:hover, .ax-flow-toolbar__btn--active { background: var(--surface-raised); color: var(--text-body); }\n.ax-flow-toolbar__sep { width: 1px; align-self: stretch; background: var(--border-default); margin: 2px 2px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-flow-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-flow-css\";\n  s.textContent = AX_FLOW_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Canvas({ children, edges, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-canvas\", className].filter(Boolean).join(\" \")} {...rest}>\n      <svg className=\"ax-canvas__edges\">{edges}</svg>\n      <div className=\"ax-canvas__inner\">{children}</div>\n    </div>\n  );\n}\n\nexport function Node({ x = 0, y = 0, title, status, ports = true, selected = false, children, className = \"\", style = {}, ...rest }) {\n  return (\n    <div className={[\"ax-node\", selected ? \"ax-node--selected\" : \"\", className].filter(Boolean).join(\" \")} style={{ left: x, top: y, ...style }} {...rest}>\n      {ports ? <span className=\"ax-node__port ax-node__port--in\"></span> : null}\n      <div className=\"ax-node__head\">\n        <span className={\"ax-node__dot\" + (status ? \" ax-node__dot--\" + status : \"\")}></span>\n        <span className=\"ax-node__title\">{title}</span>\n      </div>\n      {children ? <div className=\"ax-node__body\">{children}</div> : null}\n      {ports ? <span className=\"ax-node__port ax-node__port--out\"></span> : null}\n    </div>\n  );\n}\n\nexport function Edge({ from, to, animated = false, label, ...rest }) {\n  const dx = Math.abs(to.x - from.x) * 0.5;\n  const d = `M ${from.x} ${from.y} C ${from.x + dx} ${from.y}, ${to.x - dx} ${to.y}, ${to.x} ${to.y}`;\n  const mx = (from.x + to.x) / 2, my = (from.y + to.y) / 2;\n  return (\n    <g {...rest}>\n      <path d={d} fill=\"none\" stroke=\"var(--border-strong)\" strokeWidth=\"1.5\" strokeDasharray={animated ? \"4 4\" : undefined}>\n        {animated ? <animate attributeName=\"stroke-dashoffset\" from=\"8\" to=\"0\" dur=\"0.5s\" repeatCount=\"indefinite\"></animate> : null}\n      </path>\n      {label ? <text x={mx} y={my - 4} fill=\"var(--text-faint)\" fontSize=\"9\" fontFamily=\"var(--font-mono)\" textAnchor=\"middle\">{label}</text> : null}\n    </g>\n  );\n}\n\nexport function Connection({ from, to, ...rest }) {\n  return <Edge from={from} to={to} animated {...rest} />;\n}\n\nexport function Controls({ orientation = \"vertical\", onZoomIn, onZoomOut, onFit, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-flow-controls\", orientation === \"horizontal\" ? \"ax-flow-controls--horizontal\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <button className=\"ax-flow-controls__btn\" onClick={onZoomIn} aria-label=\"Zoom in\">+</button>\n      <button className=\"ax-flow-controls__btn\" onClick={onZoomOut} aria-label=\"Zoom out\">−</button>\n      <button className=\"ax-flow-controls__btn\" onClick={onFit} aria-label=\"Fit view\">⊡</button>\n    </div>\n  );\n}\n\nexport function Panel({ position = \"top-right\", children, className = \"\", ...rest }) {\n  return <div className={[\"ax-flow-panel\", \"ax-flow-panel--\" + position, className].filter(Boolean).join(\" \")} {...rest}>{children}</div>;\n}\n\nexport function Toolbar({ children, className = \"\", ...rest }) {\n  return <div className={[\"ax-flow-toolbar\", className].filter(Boolean).join(\" \")} {...rest}>{children}</div>;\n}\n\n/** Namesake export — Flow aliases Canvas (the graph root). Canvas/Node/Edge/… are the primary exports. */\nexport const Flow = Canvas;\n"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+// AUTO-GENERATED — type barrel for the Agentaily design system.
+
+// ai
+export * from "./components/ai/Attachments";
+export * from "./components/ai/Checkpoint";
+export * from "./components/ai/Confirmation";
+export * from "./components/ai/Context";
+export * from "./components/ai/Conversation";
+export * from "./components/ai/ModelSelector";
+export * from "./components/ai/Plan";
+export * from "./components/ai/Queue";
+export * from "./components/ai/Reasoning";
+export * from "./components/ai/Shimmer";
+export * from "./components/ai/Sources";
+export * from "./components/ai/Suggestion";
+export * from "./components/ai/Task";
+export * from "./components/ai/ToolCall";
+
+// buttons
+export * from "./components/buttons/Button";
+export * from "./components/buttons/ButtonGroup";
+export * from "./components/buttons/IconButton";
+
+// chat
+export * from "./components/chat/CodeBlock";
+export * from "./components/chat/Composer";
+export * from "./components/chat/Message";
+
+// code
+export * from "./components/code/Agent";
+export * from "./components/code/Artifact";
+export * from "./components/code/Commit";
+export * from "./components/code/EnvironmentVariables";
+export * from "./components/code/FileTree";
+export * from "./components/code/JSXPreview";
+export * from "./components/code/PackageInfo";
+export * from "./components/code/Sandbox";
+export * from "./components/code/SchemaDisplay";
+export * from "./components/code/Snippet";
+export * from "./components/code/StackTrace";
+export * from "./components/code/Terminal";
+export * from "./components/code/TestResults";
+export * from "./components/code/WebPreview";
+
+// display
+export * from "./components/display/Accordion";
+export * from "./components/display/Avatar";
+export * from "./components/display/Badge";
+export * from "./components/display/Breadcrumb";
+export * from "./components/display/Card";
+export * from "./components/display/Carousel";
+export * from "./components/display/Chart";
+export * from "./components/display/Collapsible";
+export * from "./components/display/DataTable";
+export * from "./components/display/Empty";
+export * from "./components/display/Item";
+export * from "./components/display/Kbd";
+export * from "./components/display/Pagination";
+export * from "./components/display/Progress";
+export * from "./components/display/Separator";
+export * from "./components/display/Skeleton";
+export * from "./components/display/Table";
+export * from "./components/display/Tabs";
+export * from "./components/display/Typography";
+
+// feedback
+export * from "./components/feedback/Alert";
+export * from "./components/feedback/Dialog";
+export * from "./components/feedback/Spinner";
+export * from "./components/feedback/Toast";
+export * from "./components/feedback/Tooltip";
+
+// inputs
+export * from "./components/inputs/Calendar";
+export * from "./components/inputs/Checkbox";
+export * from "./components/inputs/Combobox";
+export * from "./components/inputs/DatePicker";
+export * from "./components/inputs/Field";
+export * from "./components/inputs/Input";
+export * from "./components/inputs/InputGroup";
+export * from "./components/inputs/InputOTP";
+export * from "./components/inputs/Label";
+export * from "./components/inputs/RadioGroup";
+export * from "./components/inputs/Select";
+export * from "./components/inputs/Slider";
+export * from "./components/inputs/Switch";
+export * from "./components/inputs/Textarea";
+export * from "./components/inputs/Toggle";
+
+// layout
+export * from "./components/layout/AspectRatio";
+export * from "./components/layout/Resizable";
+export * from "./components/layout/ScrollArea";
+export * from "./components/layout/Sidebar";
+
+// overlay
+export * from "./components/overlay/AlertDialog";
+export * from "./components/overlay/Command";
+export * from "./components/overlay/ContextMenu";
+export * from "./components/overlay/DropdownMenu";
+export * from "./components/overlay/HoverCard";
+export * from "./components/overlay/Menubar";
+export * from "./components/overlay/NavigationMenu";
+export * from "./components/overlay/Popover";
+export * from "./components/overlay/Sheet";
+
+// utilities
+export * from "./components/utilities/Image";
+export * from "./components/utilities/OpenInChat";
+
+// voice
+export * from "./components/voice/AudioPlayer";
+export * from "./components/voice/MicSelector";
+export * from "./components/voice/Persona";
+export * from "./components/voice/SpeechInput";
+export * from "./components/voice/Transcription";
+export * from "./components/voice/VoiceSelector";
+
+// workflow
+export * from "./components/workflow/Flow";