@agentaily/design-system 0.1.0

package/dist/components/overlay/Menubar.js

@@ -0,0 +1,55 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+const AX_MENUBAR_CSS = `
+.ax-menubar { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-2); }
+.ax-menubar__menu { position: relative; }
+.ax-menubar__trigger { appearance: none; background: none; border: none; cursor: pointer; padding: 5px 10px; border-radius: var(--radius-1); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-menubar__trigger:hover, .ax-menubar__trigger--open { background: var(--surface-raised); color: var(--text-body); }
+.ax-menubar__panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 180px; 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-menubar__item { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 7px 10px; border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }
+.ax-menubar__item:hover { background: var(--surface-raised); }
+.ax-menubar__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.ax-menubar__sep { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-menubar-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-menubar-css";
+  s.textContent = AX_MENUBAR_CSS;
+  document.head.appendChild(s);
+}
+function Menubar({ menus = [], className = "", ...rest }) {
+  const [open, setOpen] = useState(null);
+  const ref = useRef(null);
+  const onDoc = useCallback((e) => {
+    if (ref.current && !ref.current.contains(e.target)) setOpen(null);
+  }, []);
+  useEffect(() => {
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [onDoc]);
+  return /* @__PURE__ */ jsx("div", { className: ["ax-menubar", className].filter(Boolean).join(" "), ref, ...rest, children: menus.map((menu, mi) => /* @__PURE__ */ jsxs("div", { className: "ax-menubar__menu", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "ax-menubar__trigger" + (open === mi ? " ax-menubar__trigger--open" : ""),
+        onClick: () => setOpen(open === mi ? null : mi),
+        onMouseEnter: () => open != null && setOpen(mi),
+        children: menu.label
+      }
+    ),
+    open === mi ? /* @__PURE__ */ jsx("div", { className: "ax-menubar__panel", children: menu.items.map((it, i) => {
+      if (it.type === "separator") return /* @__PURE__ */ jsx("div", { className: "ax-menubar__sep" }, i);
+      return /* @__PURE__ */ jsxs("button", { className: "ax-menubar__item", onClick: () => {
+        setOpen(null);
+        it.onSelect && it.onSelect();
+      }, children: [
+        it.label,
+        it.shortcut ? /* @__PURE__ */ jsx("span", { className: "ax-menubar__shortcut", children: it.shortcut }) : null
+      ] }, i);
+    }) }) : null
+  ] }, mi)) });
+}
+export {
+  Menubar
+};
+//# sourceMappingURL=Menubar.js.map

package/dist/components/overlay/Menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menubar.js","sources":["../../../src/components/overlay/Menubar.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_MENUBAR_CSS = `\n.ax-menubar { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-2); }\n.ax-menubar__menu { position: relative; }\n.ax-menubar__trigger { appearance: none; background: none; border: none; cursor: pointer; padding: 5px 10px; border-radius: var(--radius-1); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-menubar__trigger:hover, .ax-menubar__trigger--open { background: var(--surface-raised); color: var(--text-body); }\n.ax-menubar__panel { position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 180px; 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-menubar__item { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 7px 10px; border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }\n.ax-menubar__item:hover { background: var(--surface-raised); }\n.ax-menubar__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-menubar__sep { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-menubar-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-menubar-css\";\n  s.textContent = AX_MENUBAR_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Menubar({ menus = [], className = \"\", ...rest }) {\n  const [open, setOpen] = useState(null);\n  const ref = useRef(null);\n  const onDoc = useCallback((e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(null); }, []);\n  useEffect(() => {\n    document.addEventListener(\"mousedown\", onDoc);\n    return () => document.removeEventListener(\"mousedown\", onDoc);\n  }, [onDoc]);\n  return (\n    <div className={[\"ax-menubar\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      {menus.map((menu, mi) => (\n        <div className=\"ax-menubar__menu\" key={mi}>\n          <button\n            className={\"ax-menubar__trigger\" + (open === mi ? \" ax-menubar__trigger--open\" : \"\")}\n            onClick={() => setOpen(open === mi ? null : mi)}\n            onMouseEnter={() => open != null && setOpen(mi)}\n          >{menu.label}</button>\n          {open === mi ? (\n            <div className=\"ax-menubar__panel\">\n              {menu.items.map((it, i) => {\n                if (it.type === \"separator\") return <div key={i} className=\"ax-menubar__sep\"></div>;\n                return (\n                  <button key={i} className=\"ax-menubar__item\" onClick={() => { setOpen(null); it.onSelect && it.onSelect(); }}>\n                    {it.label}{it.shortcut ? <span className=\"ax-menubar__shortcut\">{it.shortcut}</span> : null}\n                  </button>\n                );\n              })}\n            </div>\n          ) : null}\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,QAAQ,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AAC/D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI;AACrC,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,QAAQ,YAAY,CAAC,MAAM;AAAE,QAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAM,EAAG,SAAQ,IAAI;AAAA,EAAG,GAAG,CAAA,CAAE;AAC3G,YAAU,MAAM;AACd,aAAS,iBAAiB,aAAa,KAAK;AAC5C,WAAO,MAAM,SAAS,oBAAoB,aAAa,KAAK;AAAA,EAC9D,GAAG,CAAC,KAAK,CAAC;AACV,SACE,oBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAW,GAAG,MAChF,UAAA,MAAM,IAAI,CAAC,MAAM,OAChB,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,yBAAyB,SAAS,KAAK,+BAA+B;AAAA,QACjF,SAAS,MAAM,QAAQ,SAAS,KAAK,OAAO,EAAE;AAAA,QAC9C,cAAc,MAAM,QAAQ,QAAQ,QAAQ,EAAE;AAAA,QAC9C,UAAA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IACN,SAAS,KACR,oBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA,KAAK,MAAM,IAAI,CAAC,IAAI,MAAM;AACzB,UAAI,GAAG,SAAS,YAAa,4BAAQ,OAAA,EAAY,WAAU,qBAAb,CAA+B;AAC7E,aACE,qBAAC,UAAA,EAAe,WAAU,oBAAmB,SAAS,MAAM;AAAE,gBAAQ,IAAI;AAAG,WAAG,YAAY,GAAG,SAAA;AAAA,MAAY,GACxG,UAAA;AAAA,QAAA,GAAG;AAAA,QAAO,GAAG,WAAW,oBAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA,GAAG,UAAS,IAAU;AAAA,MAAA,EAAA,GAD5E,CAEb;AAAA,IAEJ,CAAC,GACH,IACE;AAAA,EAAA,KAjBiC,EAkBvC,CACD,GACH;AAEJ;"}

package/dist/components/overlay/NavigationMenu.d.ts

@@ -0,0 +1,5 @@
+/** Marketing nav with hover mega-menu dropdowns (1 or 2 columns). */
+export interface NavMenuLink { title: string; description?: string; href?: string; }
+export interface NavMenuItem { label: string; href?: string; links?: NavMenuLink[]; }
+export interface NavigationMenuProps { items: NavMenuItem[]; }
+export declare function NavigationMenu(props: NavigationMenuProps): JSX.Element;

package/dist/components/overlay/NavigationMenu.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+const AX_NAVMENU_CSS = `
+.ax-navmenu { display: inline-flex; gap: 4px; position: relative; }
+.ax-navmenu__item { position: relative; }
+.ax-navmenu__trigger { display: inline-flex; align-items: center; gap: 6px; appearance: none; background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-2); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-navmenu__trigger:hover, .ax-navmenu__trigger--open { background: var(--surface-raised); color: var(--text-body); }
+.ax-navmenu__chev { width: 12px; height: 12px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }
+.ax-navmenu__trigger--open .ax-navmenu__chev { transform: rotate(180deg); }
+.ax-navmenu__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 280px; padding: var(--space-2); background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); display: grid; gap: 2px; animation: ax-navmenu-in var(--dur-2) var(--ease-out); }
+.ax-navmenu__panel--2col { grid-template-columns: 1fr 1fr; min-width: 440px; }
+.ax-navmenu__link { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: var(--radius-2); text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }
+.ax-navmenu__link:hover { background: var(--surface-raised); }
+.ax-navmenu__link-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); }
+.ax-navmenu__link-desc { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); }
+@keyframes ax-navmenu-in { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .ax-navmenu__panel { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-navmenu-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-navmenu-css";
+  s.textContent = AX_NAVMENU_CSS;
+  document.head.appendChild(s);
+}
+const Chev = /* @__PURE__ */ jsx("svg", { className: "ax-navmenu__chev", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+function NavigationMenu({ items = [], className = "", ...rest }) {
+  const [open, setOpen] = useState(null);
+  return /* @__PURE__ */ jsx("nav", { className: ["ax-navmenu", className].filter(Boolean).join(" "), onMouseLeave: () => setOpen(null), ...rest, children: items.map((item, i) => /* @__PURE__ */ jsx("div", { className: "ax-navmenu__item", onMouseEnter: () => item.links && setOpen(i), children: item.links ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-navmenu__trigger" + (open === i ? " ax-navmenu__trigger--open" : ""), children: [
+      item.label,
+      Chev
+    ] }),
+    open === i ? /* @__PURE__ */ jsx("div", { className: "ax-navmenu__panel" + (item.links.length > 3 ? " ax-navmenu__panel--2col" : ""), children: item.links.map((l, li) => /* @__PURE__ */ jsxs("a", { className: "ax-navmenu__link", href: l.href || "#", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-navmenu__link-title", children: l.title }),
+      l.description ? /* @__PURE__ */ jsx("span", { className: "ax-navmenu__link-desc", children: l.description }) : null
+    ] }, li)) }) : null
+  ] }) : /* @__PURE__ */ jsx("a", { className: "ax-navmenu__trigger", href: item.href || "#", children: item.label }) }, i)) });
+}
+export {
+  NavigationMenu
+};
+//# sourceMappingURL=NavigationMenu.js.map

package/dist/components/overlay/NavigationMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.js","sources":["../../../src/components/overlay/NavigationMenu.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_NAVMENU_CSS = `\n.ax-navmenu { display: inline-flex; gap: 4px; position: relative; }\n.ax-navmenu__item { position: relative; }\n.ax-navmenu__trigger { display: inline-flex; align-items: center; gap: 6px; appearance: none; background: none; border: none; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-2); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); text-decoration: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-navmenu__trigger:hover, .ax-navmenu__trigger--open { background: var(--surface-raised); color: var(--text-body); }\n.ax-navmenu__chev { width: 12px; height: 12px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }\n.ax-navmenu__trigger--open .ax-navmenu__chev { transform: rotate(180deg); }\n.ax-navmenu__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; min-width: 280px; padding: var(--space-2); background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); display: grid; gap: 2px; animation: ax-navmenu-in var(--dur-2) var(--ease-out); }\n.ax-navmenu__panel--2col { grid-template-columns: 1fr 1fr; min-width: 440px; }\n.ax-navmenu__link { display: flex; flex-direction: column; gap: 2px; padding: 9px 10px; border-radius: var(--radius-2); text-decoration: none; cursor: pointer; transition: background var(--dur-1) var(--ease-out); }\n.ax-navmenu__link:hover { background: var(--surface-raised); }\n.ax-navmenu__link-title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); }\n.ax-navmenu__link-desc { font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); }\n@keyframes ax-navmenu-in { from { opacity: 0; transform: translateY(-4px); } }\n@media (prefers-reduced-motion: reduce) { .ax-navmenu__panel { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-navmenu-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-navmenu-css\";\n  s.textContent = AX_NAVMENU_CSS;\n  document.head.appendChild(s);\n}\n\nconst Chev = <svg className=\"ax-navmenu__chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>;\n\nexport function NavigationMenu({ items = [], className = \"\", ...rest }) {\n  const [open, setOpen] = useState(null);\n  return (\n    <nav className={[\"ax-navmenu\", className].filter(Boolean).join(\" \")} onMouseLeave={() => setOpen(null)} {...rest}>\n      {items.map((item, i) => (\n        <div className=\"ax-navmenu__item\" key={i} onMouseEnter={() => item.links && setOpen(i)}>\n          {item.links ? (\n            <React.Fragment>\n              <button className={\"ax-navmenu__trigger\" + (open === i ? \" ax-navmenu__trigger--open\" : \"\")}>{item.label}{Chev}</button>\n              {open === i ? (\n                <div className={\"ax-navmenu__panel\" + (item.links.length > 3 ? \" ax-navmenu__panel--2col\" : \"\")}>\n                  {item.links.map((l, li) => (\n                    <a key={li} className=\"ax-navmenu__link\" href={l.href || \"#\"}>\n                      <span className=\"ax-navmenu__link-title\">{l.title}</span>\n                      {l.description ? <span className=\"ax-navmenu__link-desc\">{l.description}</span> : null}\n                    </a>\n                  ))}\n                </div>\n              ) : null}\n            </React.Fragment>\n          ) : (\n            <a className=\"ax-navmenu__trigger\" href={item.href || \"#\"}>{item.label}</a>\n          )}\n        </div>\n      ))}\n    </nav>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,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;AAEA,MAAM,2BAAQ,OAAA,EAAI,WAAU,oBAAmB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,eAAA,CAAe,EAAA,CAAO;AAE3L,SAAS,eAAe,EAAE,QAAQ,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AACtE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI;AACrC,6BACG,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,cAAc,MAAM,QAAQ,IAAI,GAAI,GAAG,MACzG,UAAA,MAAM,IAAI,CAAC,MAAM,0BACf,OAAA,EAAI,WAAU,oBAA2B,cAAc,MAAM,KAAK,SAAS,QAAQ,CAAC,GAClF,UAAA,KAAK,QACJ,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,IAAA,qBAAC,YAAO,WAAW,yBAAyB,SAAS,IAAI,+BAA+B,KAAM,UAAA;AAAA,MAAA,KAAK;AAAA,MAAO;AAAA,IAAA,GAAK;AAAA,IAC9G,SAAS,IACR,oBAAC,OAAA,EAAI,WAAW,uBAAuB,KAAK,MAAM,SAAS,IAAI,6BAA6B,KACzF,eAAK,MAAM,IAAI,CAAC,GAAG,OAClB,qBAAC,KAAA,EAAW,WAAU,oBAAmB,MAAM,EAAE,QAAQ,KACvD,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,0BAA0B,UAAA,EAAE,OAAM;AAAA,MACjD,EAAE,cAAc,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,EAAE,aAAY,IAAU;AAAA,IAAA,KAF5E,EAGR,CACD,EAAA,CACH,IACE;AAAA,EAAA,EAAA,CACN,IAEA,oBAAC,KAAA,EAAE,WAAU,uBAAsB,MAAM,KAAK,QAAQ,KAAM,UAAA,KAAK,MAAA,CAAM,KAhBpC,CAkBvC,CACD,GACH;AAEJ;"}

package/dist/components/overlay/Popover.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Click-triggered floating panel. Closes on outside-click and Escape.
+ */
+export interface PopoverProps {
+  /** The clickable trigger element. */
+  trigger: React.ReactNode;
+  /** Panel content, or a render fn receiving { close }. */
+  children?: React.ReactNode | ((api: { close: () => void }) => React.ReactNode);
+  /** @default "bottom" */
+  side?: "top" | "bottom";
+  /** @default "start" */
+  align?: "start" | "end";
+  /** Roomier padding for prose content. @default false */
+  padded?: boolean;
+}
+export declare function Popover(props: PopoverProps): JSX.Element;

package/dist/components/overlay/Popover.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+const AX_POPOVER_CSS = `
+.ax-pop { position: relative; display: inline-flex; }
+.ax-pop__panel {
+  position: absolute; z-index: 60; min-width: 180px;
+  background: var(--surface-panel); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3); box-shadow: var(--shadow-2);
+  padding: var(--space-2);
+  animation: ax-pop-in var(--dur-2) var(--ease-out);
+}
+.ax-pop__panel--top { bottom: calc(100% + 6px); }
+.ax-pop__panel--bottom { top: calc(100% + 6px); }
+.ax-pop__panel--start { left: 0; }
+.ax-pop__panel--end { right: 0; }
+.ax-pop__panel--pad { padding: var(--space-4); }
+@keyframes ax-pop-in { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .ax-pop__panel { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-popover-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-popover-css";
+  s.textContent = AX_POPOVER_CSS;
+  document.head.appendChild(s);
+}
+function Popover({ trigger, children, side = "bottom", align = "start", padded = false, className = "", ...rest }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const onDoc = useCallback((e) => {
+    if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", onDoc);
+      const onKey = (e) => {
+        if (e.key === "Escape") setOpen(false);
+      };
+      document.addEventListener("keydown", onKey);
+      return () => {
+        document.removeEventListener("mousedown", onDoc);
+        document.removeEventListener("keydown", onKey);
+      };
+    }
+  }, [open, onDoc]);
+  return /* @__PURE__ */ jsxs("span", { className: ["ax-pop", className].filter(Boolean).join(" "), ref, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setOpen((o) => !o), children: trigger }),
+    open ? /* @__PURE__ */ jsx("div", { className: ["ax-pop__panel", "ax-pop__panel--" + side, "ax-pop__panel--" + align, padded ? "ax-pop__panel--pad" : ""].join(" "), children: typeof children === "function" ? children({ close: () => setOpen(false) }) : children }) : null
+  ] });
+}
+export {
+  Popover
+};
+//# sourceMappingURL=Popover.js.map

package/dist/components/overlay/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/overlay/Popover.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_POPOVER_CSS = `\n.ax-pop { position: relative; display: inline-flex; }\n.ax-pop__panel {\n  position: absolute; z-index: 60; min-width: 180px;\n  background: var(--surface-panel); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3); box-shadow: var(--shadow-2);\n  padding: var(--space-2);\n  animation: ax-pop-in var(--dur-2) var(--ease-out);\n}\n.ax-pop__panel--top { bottom: calc(100% + 6px); }\n.ax-pop__panel--bottom { top: calc(100% + 6px); }\n.ax-pop__panel--start { left: 0; }\n.ax-pop__panel--end { right: 0; }\n.ax-pop__panel--pad { padding: var(--space-4); }\n@keyframes ax-pop-in { from { opacity: 0; transform: translateY(-4px); } }\n@media (prefers-reduced-motion: reduce) { .ax-pop__panel { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-popover-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-popover-css\";\n  s.textContent = AX_POPOVER_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Popover({ trigger, children, side = \"bottom\", align = \"start\", padded = false, className = \"\", ...rest }) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef(null);\n\n  const onDoc = useCallback((e) => {\n    if (ref.current && !ref.current.contains(e.target)) setOpen(false);\n  }, []);\n\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"mousedown\", onDoc);\n      const onKey = (e) => { if (e.key === \"Escape\") setOpen(false); };\n      document.addEventListener(\"keydown\", onKey);\n      return () => { document.removeEventListener(\"mousedown\", onDoc); document.removeEventListener(\"keydown\", onKey); };\n    }\n  }, [open, onDoc]);\n\n  return (\n    <span className={[\"ax-pop\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      <span onClick={() => setOpen((o) => !o)}>{trigger}</span>\n      {open ? (\n        <div className={[\"ax-pop__panel\", \"ax-pop__panel--\" + side, \"ax-pop__panel--\" + align, padded ? \"ax-pop__panel--pad\" : \"\"].join(\" \")}>\n          {typeof children === \"function\" ? children({ close: () => setOpen(false) }) : children}\n        </div>\n      ) : null}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,SAAS,UAAU,OAAO,UAAU,QAAQ,SAAS,SAAS,OAAO,YAAY,IAAI,GAAG,QAAQ;AACxH,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,MAAM,OAAO,IAAI;AAEvB,QAAM,QAAQ,YAAY,CAAC,MAAM;AAC/B,QAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAM,EAAG,SAAQ,KAAK;AAAA,EACnE,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM;AACd,QAAI,MAAM;AACR,eAAS,iBAAiB,aAAa,KAAK;AAC5C,YAAM,QAAQ,CAAC,MAAM;AAAE,YAAI,EAAE,QAAQ,SAAU,SAAQ,KAAK;AAAA,MAAG;AAC/D,eAAS,iBAAiB,WAAW,KAAK;AAC1C,aAAO,MAAM;AAAE,iBAAS,oBAAoB,aAAa,KAAK;AAAG,iBAAS,oBAAoB,WAAW,KAAK;AAAA,MAAG;AAAA,IACnH;AAAA,EACF,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,qBAAC,QAAA,EAAK,WAAW,CAAC,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAW,GAAG,MAC9E,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAI,UAAA,QAAA,CAAQ;AAAA,IACjD,OACC,oBAAC,OAAA,EAAI,WAAW,CAAC,iBAAiB,oBAAoB,MAAM,oBAAoB,OAAO,SAAS,uBAAuB,EAAE,EAAE,KAAK,GAAG,GAChI,UAAA,OAAO,aAAa,aAAa,SAAS,EAAE,OAAO,MAAM,QAAQ,KAAK,EAAA,CAAG,IAAI,UAChF,IACE;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/overlay/Sheet.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Edge-anchored slide-in panel (drawer) on a blurred scrim.
+ */
+export interface SheetProps {
+  /** @default true */
+  open?: boolean;
+  /** Edge to anchor to. @default "right" */
+  side?: "right" | "left" | "bottom";
+  title?: React.ReactNode;
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+export declare function Sheet(props: SheetProps): JSX.Element;

package/dist/components/overlay/Sheet.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+const AX_SHEET_CSS = `
+.ax-sheet-overlay {
+  position: fixed; inset: 0; z-index: 90; background: var(--bg-overlay);
+  backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay));
+  animation: ax-sheet-fade var(--dur-2) var(--ease-out);
+}
+.ax-sheet {
+  position: fixed; z-index: 91; background: var(--surface-panel);
+  display: flex; flex-direction: column; box-shadow: var(--shadow-3);
+}
+.ax-sheet--right { top: 0; bottom: 0; right: 0; width: min(420px, 92vw); border-left: 1px solid var(--border-strong); animation: ax-sheet-right var(--dur-3) var(--ease-out); }
+.ax-sheet--left { top: 0; bottom: 0; left: 0; width: min(420px, 92vw); border-right: 1px solid var(--border-strong); animation: ax-sheet-left var(--dur-3) var(--ease-out); }
+.ax-sheet--bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; border-top: 1px solid var(--border-strong); border-radius: var(--radius-3) var(--radius-3) 0 0; animation: ax-sheet-bottom var(--dur-3) var(--ease-out); }
+.ax-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--border-default); }
+.ax-sheet__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-body); }
+.ax-sheet__close { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 13px; padding: 2px 4px; border-radius: var(--radius-1); }
+.ax-sheet__close:hover { color: var(--text-body); background: var(--surface-raised); }
+.ax-sheet__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
+@keyframes ax-sheet-fade { from { opacity: 0; } }
+@keyframes ax-sheet-right { from { transform: translateX(100%); } }
+@keyframes ax-sheet-left { from { transform: translateX(-100%); } }
+@keyframes ax-sheet-bottom { from { transform: translateY(100%); } }
+@media (prefers-reduced-motion: reduce) { .ax-sheet-overlay, .ax-sheet { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-sheet-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-sheet-css";
+  s.textContent = AX_SHEET_CSS;
+  document.head.appendChild(s);
+}
+function Sheet({ open = true, side = "right", title, onClose, children, className = "", ...rest }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "ax-sheet-overlay", onClick: onClose }),
+    /* @__PURE__ */ jsxs("div", { role: "dialog", "aria-modal": "true", className: ["ax-sheet", "ax-sheet--" + side, className].filter(Boolean).join(" "), ...rest, children: [
+      /* @__PURE__ */ jsxs("div", { className: "ax-sheet__head", children: [
+        /* @__PURE__ */ jsx("h2", { className: "ax-sheet__title", children: title }),
+        onClose ? /* @__PURE__ */ jsx("button", { className: "ax-sheet__close", "aria-label": "Close", onClick: onClose, children: "ESC ✕" }) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ax-sheet__body", children })
+    ] })
+  ] });
+}
+export {
+  Sheet
+};
+//# sourceMappingURL=Sheet.js.map

package/dist/components/overlay/Sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sheet.js","sources":["../../../src/components/overlay/Sheet.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SHEET_CSS = `\n.ax-sheet-overlay {\n  position: fixed; inset: 0; z-index: 90; background: var(--bg-overlay);\n  backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay));\n  animation: ax-sheet-fade var(--dur-2) var(--ease-out);\n}\n.ax-sheet {\n  position: fixed; z-index: 91; background: var(--surface-panel);\n  display: flex; flex-direction: column; box-shadow: var(--shadow-3);\n}\n.ax-sheet--right { top: 0; bottom: 0; right: 0; width: min(420px, 92vw); border-left: 1px solid var(--border-strong); animation: ax-sheet-right var(--dur-3) var(--ease-out); }\n.ax-sheet--left { top: 0; bottom: 0; left: 0; width: min(420px, 92vw); border-right: 1px solid var(--border-strong); animation: ax-sheet-left var(--dur-3) var(--ease-out); }\n.ax-sheet--bottom { left: 0; right: 0; bottom: 0; max-height: 80vh; border-top: 1px solid var(--border-strong); border-radius: var(--radius-3) var(--radius-3) 0 0; animation: ax-sheet-bottom var(--dur-3) var(--ease-out); }\n.ax-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5); border-bottom: 1px solid var(--border-default); }\n.ax-sheet__title { margin: 0; font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-body); }\n.ax-sheet__close { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 13px; padding: 2px 4px; border-radius: var(--radius-1); }\n.ax-sheet__close:hover { color: var(--text-body); background: var(--surface-raised); }\n.ax-sheet__body { flex: 1; overflow-y: auto; padding: var(--space-5); }\n@keyframes ax-sheet-fade { from { opacity: 0; } }\n@keyframes ax-sheet-right { from { transform: translateX(100%); } }\n@keyframes ax-sheet-left { from { transform: translateX(-100%); } }\n@keyframes ax-sheet-bottom { from { transform: translateY(100%); } }\n@media (prefers-reduced-motion: reduce) { .ax-sheet-overlay, .ax-sheet { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-sheet-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-sheet-css\";\n  s.textContent = AX_SHEET_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Sheet({ open = true, side = \"right\", title, onClose, children, className = \"\", ...rest }) {\n  if (!open) return null;\n  return (\n    <React.Fragment>\n      <div className=\"ax-sheet-overlay\" onClick={onClose}></div>\n      <div role=\"dialog\" aria-modal=\"true\" className={[\"ax-sheet\", \"ax-sheet--\" + side, className].filter(Boolean).join(\" \")} {...rest}>\n        <div className=\"ax-sheet__head\">\n          <h2 className=\"ax-sheet__title\">{title}</h2>\n          {onClose ? <button className=\"ax-sheet__close\" aria-label=\"Close\" onClick={onClose}>ESC ✕</button> : null}\n        </div>\n        <div className=\"ax-sheet__body\">{children}</div>\n      </div>\n    </React.Fragment>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyBrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,MAAM,EAAE,OAAO,MAAM,OAAO,SAAS,OAAO,SAAS,UAAU,YAAY,IAAI,GAAG,QAAQ;AACxG,MAAI,CAAC,KAAM,QAAO;AAClB,SACE,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,oBAAmB,SAAS,SAAS;AAAA,IACpD,qBAAC,SAAI,MAAK,UAAS,cAAW,QAAO,WAAW,CAAC,YAAY,eAAe,MAAM,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC1H,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,QAAA,oBAAC,MAAA,EAAG,WAAU,mBAAmB,UAAA,OAAM;AAAA,QACtC,UAAU,oBAAC,UAAA,EAAO,WAAU,mBAAkB,cAAW,SAAQ,SAAS,SAAS,UAAA,QAAA,CAAK,IAAY;AAAA,MAAA,GACvG;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,IAAA,EAAA,CAC5C;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/utilities/Image.d.ts

@@ -0,0 +1,3 @@
+/** Image frame with ratio lock, placeholder fallback, optional caption + border. */
+export interface ImageProps { src?: string; alt?: string; ratio?: number | string; caption?: React.ReactNode; bordered?: boolean; width?: number | string; height?: number | string; }
+export declare function Image(props: ImageProps): JSX.Element;

package/dist/components/utilities/Image.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_IMAGE_CSS = `
+.ax-image { position: relative; overflow: hidden; border-radius: var(--radius-2); background: var(--surface-raised); display: block; }
+.ax-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
+.ax-image__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-faint); }
+.ax-image__placeholder svg { width: 28px; height: 28px; }
+.ax-image__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: #F4F4F5; }
+.ax-image--bordered { border: 1px solid var(--border-default); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-image-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-image-css";
+  s.textContent = AX_IMAGE_CSS;
+  document.head.appendChild(s);
+}
+const Placeholder = /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("circle", { cx: "9", cy: "9", r: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21" })
+] });
+function Image({ src, alt = "", ratio, caption, bordered = false, width, height, className = "", style = {}, ...rest }) {
+  const wrapStyle = { width, height, aspectRatio: ratio ? String(ratio) : void 0, ...style };
+  return /* @__PURE__ */ jsxs("span", { className: ["ax-image", bordered ? "ax-image--bordered" : "", className].filter(Boolean).join(" "), style: wrapStyle, ...rest, children: [
+    src ? /* @__PURE__ */ jsx("img", { src, alt }) : /* @__PURE__ */ jsx("span", { className: "ax-image__placeholder", children: Placeholder }),
+    caption ? /* @__PURE__ */ jsx("span", { className: "ax-image__caption", children: caption }) : null
+  ] });
+}
+export {
+  Image
+};
+//# sourceMappingURL=Image.js.map

package/dist/components/utilities/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sources":["../../../src/components/utilities/Image.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_IMAGE_CSS = `\n.ax-image { position: relative; overflow: hidden; border-radius: var(--radius-2); background: var(--surface-raised); display: block; }\n.ax-image img { display: block; width: 100%; height: 100%; object-fit: cover; }\n.ax-image__placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: var(--text-faint); }\n.ax-image__placeholder svg { width: 28px; height: 28px; }\n.ax-image__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 10px; background: linear-gradient(transparent, rgba(0,0,0,0.7)); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; color: #F4F4F5; }\n.ax-image--bordered { border: 1px solid var(--border-default); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-image-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-image-css\";\n  s.textContent = AX_IMAGE_CSS;\n  document.head.appendChild(s);\n}\n\nconst Placeholder = <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"1.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"></rect><circle cx=\"9\" cy=\"9\" r=\"2\"></circle><path d=\"m21 15-3.1-3.1a2 2 0 0 0-2.8 0L6 21\"></path></svg>;\n\nexport function Image({ src, alt = \"\", ratio, caption, bordered = false, width, height, className = \"\", style = {}, ...rest }) {\n  const wrapStyle = { width, height, aspectRatio: ratio ? String(ratio) : undefined, ...style };\n  return (\n    <span className={[\"ax-image\", bordered ? \"ax-image--bordered\" : \"\", className].filter(Boolean).join(\" \")} style={wrapStyle} {...rest}>\n      {src ? <img src={src} alt={alt} /> : <span className=\"ax-image__placeholder\">{Placeholder}</span>}\n      {caption ? <span className=\"ax-image__caption\">{caption}</span> : null}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,cAAc,qBAAC,OAAA,EAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,sBAAQ,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,KAAI;AAAA,EAAS,oBAAC,QAAA,EAAK,GAAE,sCAAA,CAAsC;AAAA,GAAO;AAExR,SAAS,MAAM,EAAE,KAAK,MAAM,IAAI,OAAO,SAAS,WAAW,OAAO,OAAO,QAAQ,YAAY,IAAI,QAAQ,CAAA,GAAI,GAAG,QAAQ;AAC7H,QAAM,YAAY,EAAE,OAAO,QAAQ,aAAa,QAAQ,OAAO,KAAK,IAAI,QAAW,GAAG,MAAA;AACtF,8BACG,QAAA,EAAK,WAAW,CAAC,YAAY,WAAW,uBAAuB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAO,WAAY,GAAG,MAC7H,UAAA;AAAA,IAAA,MAAM,oBAAC,SAAI,KAAU,IAAA,CAAU,IAAK,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,YAAA,CAAY;AAAA,IACzF,UAAU,oBAAC,QAAA,EAAK,WAAU,qBAAqB,mBAAQ,IAAU;AAAA,EAAA,GACpE;AAEJ;"}

package/dist/components/utilities/OpenInChat.d.ts

@@ -0,0 +1,3 @@
+/** "Open in agentaily" deep-link button with the brand mark. */
+export interface OpenInChatProps { label?: string; href?: string; logoSrc?: string; onClick?: () => void; }
+export declare function OpenInChat(props: OpenInChatProps): JSX.Element;

package/dist/components/utilities/OpenInChat.js

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_OPENINCHAT_CSS = `
+.ax-openinchat { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 6px 11px; font-family: var(--font-body); font-size: var(--text-sm); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
+.ax-openinchat:hover { border-color: var(--border-strong); background: var(--surface-raised); }
+.ax-openinchat__mark { width: 16px; height: 16px; flex: none; }
+.ax-openinchat__arrow { width: 13px; height: 13px; color: var(--text-faint); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-openinchat-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-openinchat-css";
+  s.textContent = AX_OPENINCHAT_CSS;
+  document.head.appendChild(s);
+}
+const Arrow = /* @__PURE__ */ jsx("svg", { className: "ax-openinchat__arrow", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M7 17 17 7M9 7h8v8" }) });
+function OpenInChat({ label = "Open in agentaily", href = "#", logoSrc = "../../assets/logo/agentaily-mark-white.svg", onClick, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("a", { className: ["ax-openinchat", className].filter(Boolean).join(" "), href, onClick, ...rest, children: [
+    logoSrc ? /* @__PURE__ */ jsx("img", { className: "ax-openinchat__mark", src: logoSrc, alt: "" }) : null,
+    label,
+    Arrow
+  ] });
+}
+export {
+  OpenInChat
+};
+//# sourceMappingURL=OpenInChat.js.map

package/dist/components/utilities/OpenInChat.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OpenInChat.js","sources":["../../../src/components/utilities/OpenInChat.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_OPENINCHAT_CSS = `\n.ax-openinchat { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; background: var(--surface-card); color: var(--text-body); border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 6px 11px; font-family: var(--font-body); font-size: var(--text-sm); text-decoration: none; transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }\n.ax-openinchat:hover { border-color: var(--border-strong); background: var(--surface-raised); }\n.ax-openinchat__mark { width: 16px; height: 16px; flex: none; }\n.ax-openinchat__arrow { width: 13px; height: 13px; color: var(--text-faint); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-openinchat-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-openinchat-css\";\n  s.textContent = AX_OPENINCHAT_CSS;\n  document.head.appendChild(s);\n}\n\nconst Arrow = <svg className=\"ax-openinchat__arrow\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M7 17 17 7M9 7h8v8\"></path></svg>;\n\nexport function OpenInChat({ label = \"Open in agentaily\", href = \"#\", logoSrc = \"../../assets/logo/agentaily-mark-white.svg\", onClick, className = \"\", ...rest }) {\n  return (\n    <a className={[\"ax-openinchat\", className].filter(Boolean).join(\" \")} href={href} onClick={onClick} {...rest}>\n      {logoSrc ? <img className=\"ax-openinchat__mark\" src={logoSrc} alt=\"\" /> : null}\n      {label}\n      {Arrow}\n    </a>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAO1B,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;AAEA,MAAM,4BAAS,OAAA,EAAI,WAAU,wBAAuB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,qBAAA,CAAqB,EAAA,CAAO;AAEpM,SAAS,WAAW,EAAE,QAAQ,qBAAqB,OAAO,KAAK,UAAU,8CAA8C,SAAS,YAAY,IAAI,GAAG,QAAQ;AAChK,8BACG,KAAA,EAAE,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,MAAY,SAAmB,GAAG,MACrG,UAAA;AAAA,IAAA,UAAU,oBAAC,SAAI,WAAU,uBAAsB,KAAK,SAAS,KAAI,IAAG,IAAK;AAAA,IACzE;AAAA,IACA;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Voice-message player: play/pause, static waveform with played-progress fill, duration. */
+export interface AudioPlayerProps { duration?: string; progress?: number; playing?: boolean; onToggle?: (playing: boolean) => void; }
+export declare function AudioPlayer(props: AudioPlayerProps): JSX.Element;

package/dist/components/voice/AudioPlayer.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_AUDIO_CSS = `
+.ax-audio { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); }
+.ax-audio__play { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--radius-2); transition: background var(--dur-1) var(--ease-out); }
+.ax-audio__play:hover { background: var(--accent-hover); }
+.ax-audio__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.ax-audio__wave { display: flex; align-items: center; gap: 2px; height: 24px; cursor: pointer; }
+.ax-audio__bar { flex: 1; border-radius: 1px; background: var(--border-strong); transition: background var(--dur-1) var(--ease-out); }
+.ax-audio__bar--played { background: var(--text-body); }
+.ax-audio__meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-audio-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-audio-css";
+  s.textContent = AX_AUDIO_CSS;
+  document.head.appendChild(s);
+}
+const Play = /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+const Pause = /* @__PURE__ */ jsx("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "currentColor", children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6zM14 4h4v16h-4z" }) });
+const WAVE = [40, 70, 55, 90, 60, 80, 45, 75, 50, 85, 65, 55, 95, 70, 45, 60, 80, 50, 70, 40, 60, 88, 52, 72, 48, 82, 58, 68, 44, 78];
+function AudioPlayer({ duration = "0:48", progress = 35, playing: playingProp, onToggle, className = "", ...rest }) {
+  const [playing, setPlaying] = useState(playingProp || false);
+  const toggle = () => {
+    setPlaying((p) => !p);
+    onToggle && onToggle(!playing);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-audio", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("button", { className: "ax-audio__play", onClick: toggle, "aria-label": playing ? "Pause" : "Play", children: playing ? Pause : Play }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-audio__body", children: [
+      /* @__PURE__ */ jsx("div", { className: "ax-audio__wave", children: WAVE.map((h, i) => /* @__PURE__ */ jsx("span", { className: "ax-audio__bar" + (i / WAVE.length * 100 <= progress ? " ax-audio__bar--played" : ""), style: { height: h + "%" } }, i)) }),
+      /* @__PURE__ */ jsxs("div", { className: "ax-audio__meta", children: [
+        /* @__PURE__ */ jsx("span", { children: playing ? "Playing" : "Voice message" }),
+        /* @__PURE__ */ jsx("span", { children: duration })
+      ] })
+    ] })
+  ] });
+}
+export {
+  AudioPlayer
+};
+//# sourceMappingURL=AudioPlayer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AudioPlayer.js","sources":["../../../src/components/voice/AudioPlayer.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_AUDIO_CSS = `\n.ax-audio { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); }\n.ax-audio__play { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--accent); color: var(--accent-fg); border: none; border-radius: var(--radius-2); transition: background var(--dur-1) var(--ease-out); }\n.ax-audio__play:hover { background: var(--accent-hover); }\n.ax-audio__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }\n.ax-audio__wave { display: flex; align-items: center; gap: 2px; height: 24px; cursor: pointer; }\n.ax-audio__bar { flex: 1; border-radius: 1px; background: var(--border-strong); transition: background var(--dur-1) var(--ease-out); }\n.ax-audio__bar--played { background: var(--text-body); }\n.ax-audio__meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-audio-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-audio-css\";\n  s.textContent = AX_AUDIO_CSS;\n  document.head.appendChild(s);\n}\n\nconst Play = <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"></path></svg>;\nconst Pause = <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6 4h4v16H6zM14 4h4v16h-4z\"></path></svg>;\n\nconst WAVE = [40,70,55,90,60,80,45,75,50,85,65,55,95,70,45,60,80,50,70,40,60,88,52,72,48,82,58,68,44,78];\n\nexport function AudioPlayer({ duration = \"0:48\", progress = 35, playing: playingProp, onToggle, className = \"\", ...rest }) {\n  const [playing, setPlaying] = useState(playingProp || false);\n  const toggle = () => { setPlaying((p) => !p); onToggle && onToggle(!playing); };\n  return (\n    <div className={[\"ax-audio\", className].filter(Boolean).join(\" \")} {...rest}>\n      <button className=\"ax-audio__play\" onClick={toggle} aria-label={playing ? \"Pause\" : \"Play\"}>{playing ? Pause : Play}</button>\n      <div className=\"ax-audio__body\">\n        <div className=\"ax-audio__wave\">\n          {WAVE.map((h, i) => (\n            <span key={i} className={\"ax-audio__bar\" + (i / WAVE.length * 100 <= progress ? \" ax-audio__bar--played\" : \"\")} style={{ height: h + \"%\" }}></span>\n          ))}\n        </div>\n        <div className=\"ax-audio__meta\">\n          <span>{playing ? \"Playing\" : \"Voice message\"}</span>\n          <span>{duration}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,OAAO,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,UAAA,oBAAC,QAAA,EAAK,GAAE,iBAAgB,GAAO;AAChH,MAAM,QAAQ,oBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,gBAAe,UAAA,oBAAC,QAAA,EAAK,GAAE,8BAA6B,GAAO;AAE9H,MAAM,OAAO,CAAC,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,IAAG,EAAE;AAEhG,SAAS,YAAY,EAAE,WAAW,QAAQ,WAAW,IAAI,SAAS,aAAa,UAAU,YAAY,IAAI,GAAG,QAAQ;AACzH,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,eAAe,KAAK;AAC3D,QAAM,SAAS,MAAM;AAAE,eAAW,CAAC,MAAM,CAAC,CAAC;AAAG,gBAAY,SAAS,CAAC,OAAO;AAAA,EAAG;AAC9E,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACrE,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAO,WAAU,kBAAiB,SAAS,QAAQ,cAAY,UAAU,UAAU,QAAS,UAAA,UAAU,QAAQ,MAAK;AAAA,IACpH,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA,KAAK,IAAI,CAAC,GAAG,MACZ,oBAAC,QAAA,EAAa,WAAW,mBAAmB,IAAI,KAAK,SAAS,OAAO,WAAW,2BAA2B,KAAK,OAAO,EAAE,QAAQ,IAAI,IAAA,EAAI,GAA9H,CAAiI,CAC7I,EAAA,CACH;AAAA,MACA,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAM,UAAA,UAAU,YAAY,iBAAgB;AAAA,QAC7C,oBAAC,UAAM,UAAA,SAAA,CAAS;AAAA,MAAA,EAAA,CAClB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Microphone device picker with a live input-level meter. */
+export interface MicSelectorProps { devices: Array<string | { value: string; label: string }>; value?: string; level?: number; onChange?: (value: string) => void; }
+export declare function MicSelector(props: MicSelectorProps): JSX.Element;

package/dist/components/voice/MicSelector.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_MICSEL_CSS = `
+.ax-micsel { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); }
+.ax-micsel__icon { color: var(--text-faint); flex: none; }
+.ax-micsel__select { appearance: none; background: none; border: none; outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; padding-right: 16px; }
+.ax-micsel__level { display: flex; align-items: center; gap: 2px; flex: none; }
+.ax-micsel__seg { width: 3px; height: 12px; border-radius: 1px; background: var(--border-strong); }
+.ax-micsel__seg--on { background: var(--ok); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-micsel-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-micsel-css";
+  s.textContent = AX_MICSEL_CSS;
+  document.head.appendChild(s);
+}
+const Mic = /* @__PURE__ */ jsxs("svg", { className: "ax-micsel__icon", width: "15", height: "15", 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" })
+] });
+function MicSelector({ devices = [], value, level = 0, onChange, className = "", ...rest }) {
+  const segs = 5;
+  const on = Math.round(level / 100 * segs);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-micsel", className].filter(Boolean).join(" "), ...rest, children: [
+    Mic,
+    /* @__PURE__ */ jsx("select", { className: "ax-micsel__select", value, onChange: (e) => onChange && onChange(e.target.value), children: devices.map((d) => {
+      const dev = typeof d === "string" ? { value: d, label: d } : d;
+      return /* @__PURE__ */ jsx("option", { value: dev.value, children: dev.label }, dev.value);
+    }) }),
+    /* @__PURE__ */ jsx("span", { className: "ax-micsel__level", children: Array.from({ length: segs }).map((_, i) => /* @__PURE__ */ jsx("span", { className: "ax-micsel__seg" + (i < on ? " ax-micsel__seg--on" : "") }, i)) })
+  ] });
+}
+export {
+  MicSelector
+};
+//# sourceMappingURL=MicSelector.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MicSelector.js","sources":["../../../src/components/voice/MicSelector.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_MICSEL_CSS = `\n.ax-micsel { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); }\n.ax-micsel__icon { color: var(--text-faint); flex: none; }\n.ax-micsel__select { appearance: none; background: none; border: none; outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer; padding-right: 16px; }\n.ax-micsel__level { display: flex; align-items: center; gap: 2px; flex: none; }\n.ax-micsel__seg { width: 3px; height: 12px; border-radius: 1px; background: var(--border-strong); }\n.ax-micsel__seg--on { background: var(--ok); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-micsel-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-micsel-css\";\n  s.textContent = AX_MICSEL_CSS;\n  document.head.appendChild(s);\n}\n\nconst Mic = <svg className=\"ax-micsel__icon\" width=\"15\" height=\"15\" 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>;\n\nexport function MicSelector({ devices = [], value, level = 0, onChange, className = \"\", ...rest }) {\n  const segs = 5;\n  const on = Math.round((level / 100) * segs);\n  return (\n    <div className={[\"ax-micsel\", className].filter(Boolean).join(\" \")} {...rest}>\n      {Mic}\n      <select className=\"ax-micsel__select\" value={value} onChange={(e) => onChange && onChange(e.target.value)}>\n        {devices.map((d) => {\n          const dev = typeof d === \"string\" ? { value: d, label: d } : d;\n          return <option key={dev.value} value={dev.value}>{dev.label}</option>;\n        })}\n      </select>\n      <span className=\"ax-micsel__level\">\n        {Array.from({ length: segs }).map((_, i) => <span key={i} className={\"ax-micsel__seg\" + (i < on ? \" ax-micsel__seg--on\" : \"\")}></span>)}\n      </span>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAStB,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,2BAAO,OAAA,EAAI,WAAU,mBAAkB,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;AAEpR,SAAS,YAAY,EAAE,UAAU,CAAA,GAAI,OAAO,QAAQ,GAAG,UAAU,YAAY,IAAI,GAAG,QAAQ;AACjG,QAAM,OAAO;AACb,QAAM,KAAK,KAAK,MAAO,QAAQ,MAAO,IAAI;AAC1C,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACrE,UAAA;AAAA,IAAA;AAAA,wBACA,UAAA,EAAO,WAAU,qBAAoB,OAAc,UAAU,CAAC,MAAM,YAAY,SAAS,EAAE,OAAO,KAAK,GACrG,UAAA,QAAQ,IAAI,CAAC,MAAM;AAClB,YAAM,MAAM,OAAO,MAAM,WAAW,EAAE,OAAO,GAAG,OAAO,EAAA,IAAM;AAC7D,aAAO,oBAAC,YAAuB,OAAO,IAAI,OAAQ,UAAA,IAAI,SAAlC,IAAI,KAAoC;AAAA,IAC9D,CAAC,EAAA,CACH;AAAA,IACA,oBAAC,QAAA,EAAK,WAAU,oBACb,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAA,CAAM,EAAE,IAAI,CAAC,GAAG,MAAM,oBAAC,QAAA,EAAa,WAAW,oBAAoB,IAAI,KAAK,wBAAwB,OAAnE,CAAwE,CAAO,EAAA,CACxI;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Voice persona identity: avatar orb (pulses while speaking), name, tag, description. */
+export interface PersonaProps { name?: string; tag?: string; description?: React.ReactNode; avatar?: string; speaking?: boolean; selected?: boolean; }
+export declare function Persona(props: PersonaProps): JSX.Element;

package/dist/components/voice/Persona.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_PERSONA_CSS = `
+.ax-persona { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); }
+.ax-persona--selected { border-color: var(--border-strong); }
+.ax-persona__orb { width: 42px; height: 42px; flex: none; border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; position: relative; background: var(--accent); color: var(--accent-fg); font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-bold); overflow: hidden; }
+.ax-persona__ring { position: absolute; inset: 0; border-radius: var(--radius-2); }
+.ax-persona--speaking .ax-persona__ring { box-shadow: 0 0 0 2px var(--ok); animation: ax-persona-pulse 1.2s var(--ease-out) infinite; }
+.ax-persona__body { flex: 1; min-width: 0; }
+.ax-persona__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); display: flex; align-items: center; gap: 8px; }
+.ax-persona__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 1px 4px; }
+.ax-persona__desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; line-height: var(--leading-snug); }
+@keyframes ax-persona-pulse { 50% { box-shadow: 0 0 0 4px var(--ok-dim); } }
+@media (prefers-reduced-motion: reduce) { .ax-persona--speaking .ax-persona__ring { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-persona-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-persona-css";
+  s.textContent = AX_PERSONA_CSS;
+  document.head.appendChild(s);
+}
+function Persona({ name, tag, description, avatar, speaking = false, selected = false, className = "", ...rest }) {
+  const initials = (name || "AI").slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-persona", speaking ? "ax-persona--speaking" : "", selected ? "ax-persona--selected" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("span", { className: "ax-persona__orb", children: [
+      avatar ? /* @__PURE__ */ jsx("img", { src: avatar, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } }) : initials,
+      /* @__PURE__ */ jsx("span", { className: "ax-persona__ring" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-persona__body", children: [
+      /* @__PURE__ */ jsxs("div", { className: "ax-persona__name", children: [
+        name,
+        tag ? /* @__PURE__ */ jsx("span", { className: "ax-persona__tag", children: tag }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsx("div", { className: "ax-persona__desc", children: description }) : null
+    ] })
+  ] });
+}
+export {
+  Persona
+};
+//# sourceMappingURL=Persona.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Persona.js","sources":["../../../src/components/voice/Persona.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_PERSONA_CSS = `\n.ax-persona { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); }\n.ax-persona--selected { border-color: var(--border-strong); }\n.ax-persona__orb { width: 42px; height: 42px; flex: none; border-radius: var(--radius-2); display: flex; align-items: center; justify-content: center; position: relative; background: var(--accent); color: var(--accent-fg); font-family: var(--font-mono); font-size: var(--text-md); font-weight: var(--weight-bold); overflow: hidden; }\n.ax-persona__ring { position: absolute; inset: 0; border-radius: var(--radius-2); }\n.ax-persona--speaking .ax-persona__ring { box-shadow: 0 0 0 2px var(--ok); animation: ax-persona-pulse 1.2s var(--ease-out) infinite; }\n.ax-persona__body { flex: 1; min-width: 0; }\n.ax-persona__name { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); display: flex; align-items: center; gap: 8px; }\n.ax-persona__tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 1px 4px; }\n.ax-persona__desc { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; line-height: var(--leading-snug); }\n@keyframes ax-persona-pulse { 50% { box-shadow: 0 0 0 4px var(--ok-dim); } }\n@media (prefers-reduced-motion: reduce) { .ax-persona--speaking .ax-persona__ring { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-persona-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-persona-css\";\n  s.textContent = AX_PERSONA_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Persona({ name, tag, description, avatar, speaking = false, selected = false, className = \"\", ...rest }) {\n  const initials = (name || \"AI\").slice(0, 2).toUpperCase();\n  return (\n    <div className={[\"ax-persona\", speaking ? \"ax-persona--speaking\" : \"\", selected ? \"ax-persona--selected\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <span className=\"ax-persona__orb\">\n        {avatar ? <img src={avatar} alt={name} style={{ width: \"100%\", height: \"100%\", objectFit: \"cover\" }} /> : initials}\n        <span className=\"ax-persona__ring\"></span>\n      </span>\n      <div className=\"ax-persona__body\">\n        <div className=\"ax-persona__name\">{name}{tag ? <span className=\"ax-persona__tag\">{tag}</span> : null}</div>\n        {description ? <div className=\"ax-persona__desc\">{description}</div> : null}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAcvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,MAAM,KAAK,aAAa,QAAQ,WAAW,OAAO,WAAW,OAAO,YAAY,IAAI,GAAG,QAAQ;AACvH,QAAM,YAAY,QAAQ,MAAM,MAAM,GAAG,CAAC,EAAE,YAAA;AAC5C,SACE,qBAAC,SAAI,WAAW,CAAC,cAAc,WAAW,yBAAyB,IAAI,WAAW,yBAAyB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvJ,UAAA;AAAA,IAAA,qBAAC,QAAA,EAAK,WAAU,mBACb,UAAA;AAAA,MAAA,SAAS,oBAAC,OAAA,EAAI,KAAK,QAAQ,KAAK,MAAM,OAAO,EAAE,OAAO,QAAQ,QAAQ,QAAQ,WAAW,QAAA,GAAW,IAAK;AAAA,MAC1G,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,IAAA,GACrC;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,qBAAC,OAAA,EAAI,WAAU,oBAAoB,UAAA;AAAA,QAAA;AAAA,QAAM,MAAM,oBAAC,QAAA,EAAK,WAAU,mBAAmB,eAAI,IAAU;AAAA,MAAA,GAAK;AAAA,MACpG,cAAc,oBAAC,OAAA,EAAI,WAAU,oBAAoB,uBAAY,IAAS;AAAA,IAAA,EAAA,CACzE;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Push-to-talk control: record button, animated bars while recording, timer/hint. */
+export interface SpeechInputProps { recording?: boolean; time?: string; onToggle?: () => void; }
+export declare function SpeechInput(props: SpeechInputProps): JSX.Element;