@agentaily/design-system 0.1.0

package/dist/components/layout/Sidebar.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_SIDEBAR_CSS = `
+.ax-sidebar { display: flex; flex-direction: column; width: var(--sidebar-w); flex: none; height: 100%; background: var(--surface-panel); border-right: 1px solid var(--border-default); transition: width var(--dur-2) var(--ease-out); overflow: hidden; }
+.ax-sidebar--collapsed { width: 56px; }
+.ax-sidebar__header { padding: 16px; display: flex; align-items: center; gap: 10px; min-height: 56px; }
+.ax-sidebar__content { flex: 1; overflow-y: auto; padding: 8px; }
+.ax-sidebar__footer { padding: 12px 16px; border-top: 1px solid var(--border-default); }
+.ax-sidebar__group { margin-bottom: 16px; }
+.ax-sidebar__group-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 6px 10px; white-space: nowrap; }
+.ax-sidebar--collapsed .ax-sidebar__group-label { opacity: 0; }
+.ax-sidebar__item { 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); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); position: relative; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); white-space: nowrap; }
+.ax-sidebar__item:hover { background: var(--surface-raised); color: var(--text-body); }
+.ax-sidebar__item--active { background: var(--surface-raised); color: var(--text-body); }
+.ax-sidebar__item--active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 1px; background: var(--accent); }
+.ax-sidebar__item-icon { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }
+.ax-sidebar__item-icon svg { width: 16px; height: 16px; }
+.ax-sidebar__item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
+.ax-sidebar--collapsed .ax-sidebar__item-label { opacity: 0; }
+.ax-sidebar__item-badge { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }
+.ax-sidebar--collapsed .ax-sidebar__item-badge { display: none; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-sidebar-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-sidebar-css";
+  s.textContent = AX_SIDEBAR_CSS;
+  document.head.appendChild(s);
+}
+function Sidebar({ groups = [], activeId, onSelect, header, footer, collapsed = false, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("aside", { className: ["ax-sidebar", collapsed ? "ax-sidebar--collapsed" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    header ? /* @__PURE__ */ jsx("div", { className: "ax-sidebar__header", children: header }) : null,
+    /* @__PURE__ */ jsx("nav", { className: "ax-sidebar__content", children: groups.map((g, gi) => /* @__PURE__ */ jsxs("div", { className: "ax-sidebar__group", children: [
+      g.label ? /* @__PURE__ */ jsx("div", { className: "ax-sidebar__group-label", children: g.label }) : null,
+      g.items.map((it) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          className: "ax-sidebar__item" + (it.id === activeId ? " ax-sidebar__item--active" : ""),
+          onClick: () => onSelect && onSelect(it.id),
+          title: collapsed ? it.label : void 0,
+          children: [
+            it.icon ? /* @__PURE__ */ jsx("span", { className: "ax-sidebar__item-icon", children: it.icon }) : null,
+            /* @__PURE__ */ jsx("span", { className: "ax-sidebar__item-label", children: it.label }),
+            it.badge != null ? /* @__PURE__ */ jsx("span", { className: "ax-sidebar__item-badge", children: it.badge }) : null
+          ]
+        },
+        it.id
+      ))
+    ] }, gi)) }),
+    footer ? /* @__PURE__ */ jsx("div", { className: "ax-sidebar__footer", children: footer }) : null
+  ] });
+}
+export {
+  Sidebar
+};
+//# sourceMappingURL=Sidebar.js.map

package/dist/components/layout/Sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.js","sources":["../../../src/components/layout/Sidebar.jsx"],"sourcesContent":["import React, { createContext, useContext, useState } from \"react\";\n\nconst AX_SIDEBAR_CSS = `\n.ax-sidebar { display: flex; flex-direction: column; width: var(--sidebar-w); flex: none; height: 100%; background: var(--surface-panel); border-right: 1px solid var(--border-default); transition: width var(--dur-2) var(--ease-out); overflow: hidden; }\n.ax-sidebar--collapsed { width: 56px; }\n.ax-sidebar__header { padding: 16px; display: flex; align-items: center; gap: 10px; min-height: 56px; }\n.ax-sidebar__content { flex: 1; overflow-y: auto; padding: 8px; }\n.ax-sidebar__footer { padding: 12px 16px; border-top: 1px solid var(--border-default); }\n.ax-sidebar__group { margin-bottom: 16px; }\n.ax-sidebar__group-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 6px 10px; white-space: nowrap; }\n.ax-sidebar--collapsed .ax-sidebar__group-label { opacity: 0; }\n.ax-sidebar__item { 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); color: var(--text-muted); font-family: var(--font-body); font-size: var(--text-sm); position: relative; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); white-space: nowrap; }\n.ax-sidebar__item:hover { background: var(--surface-raised); color: var(--text-body); }\n.ax-sidebar__item--active { background: var(--surface-raised); color: var(--text-body); }\n.ax-sidebar__item--active::before { content: \"\"; position: absolute; left: 0; top: 7px; bottom: 7px; width: 2px; border-radius: 1px; background: var(--accent); }\n.ax-sidebar__item-icon { width: 18px; height: 18px; flex: none; display: inline-flex; align-items: center; justify-content: center; }\n.ax-sidebar__item-icon svg { width: 16px; height: 16px; }\n.ax-sidebar__item-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }\n.ax-sidebar--collapsed .ax-sidebar__item-label { opacity: 0; }\n.ax-sidebar__item-badge { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); }\n.ax-sidebar--collapsed .ax-sidebar__item-badge { display: none; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-sidebar-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-sidebar-css\";\n  s.textContent = AX_SIDEBAR_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Sidebar({ groups = [], activeId, onSelect, header, footer, collapsed = false, className = \"\", ...rest }) {\n  return (\n    <aside className={[\"ax-sidebar\", collapsed ? \"ax-sidebar--collapsed\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {header ? <div className=\"ax-sidebar__header\">{header}</div> : null}\n      <nav className=\"ax-sidebar__content\">\n        {groups.map((g, gi) => (\n          <div className=\"ax-sidebar__group\" key={gi}>\n            {g.label ? <div className=\"ax-sidebar__group-label\">{g.label}</div> : null}\n            {g.items.map((it) => (\n              <button\n                key={it.id}\n                className={\"ax-sidebar__item\" + (it.id === activeId ? \" ax-sidebar__item--active\" : \"\")}\n                onClick={() => onSelect && onSelect(it.id)}\n                title={collapsed ? it.label : undefined}\n              >\n                {it.icon ? <span className=\"ax-sidebar__item-icon\">{it.icon}</span> : null}\n                <span className=\"ax-sidebar__item-label\">{it.label}</span>\n                {it.badge != null ? <span className=\"ax-sidebar__item-badge\">{it.badge}</span> : null}\n              </button>\n            ))}\n          </div>\n        ))}\n      </nav>\n      {footer ? <div className=\"ax-sidebar__footer\">{footer}</div> : null}\n    </aside>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBvB,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,CAAA,GAAI,UAAU,UAAU,QAAQ,QAAQ,YAAY,OAAO,YAAY,IAAI,GAAG,QAAQ;AACvH,8BACG,SAAA,EAAM,WAAW,CAAC,cAAc,YAAY,0BAA0B,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAClH,UAAA;AAAA,IAAA,SAAS,oBAAC,OAAA,EAAI,WAAU,sBAAsB,kBAAO,IAAS;AAAA,IAC/D,oBAAC,OAAA,EAAI,WAAU,uBACZ,UAAA,OAAO,IAAI,CAAC,GAAG,OACd,qBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,MAAA,EAAE,QAAQ,oBAAC,OAAA,EAAI,WAAU,2BAA2B,UAAA,EAAE,OAAM,IAAS;AAAA,MACrE,EAAE,MAAM,IAAI,CAAC,OACZ;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW,sBAAsB,GAAG,OAAO,WAAW,8BAA8B;AAAA,UACpF,SAAS,MAAM,YAAY,SAAS,GAAG,EAAE;AAAA,UACzC,OAAO,YAAY,GAAG,QAAQ;AAAA,UAE7B,UAAA;AAAA,YAAA,GAAG,OAAO,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,GAAG,MAAK,IAAU;AAAA,YACtE,oBAAC,QAAA,EAAK,WAAU,0BAA0B,aAAG,OAAM;AAAA,YAClD,GAAG,SAAS,OAAO,oBAAC,UAAK,WAAU,0BAA0B,UAAA,GAAG,MAAA,CAAM,IAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAP5E,GAAG;AAAA,MAAA,CASX;AAAA,IAAA,KAbqC,EAcxC,CACD,GACH;AAAA,IACC,SAAS,oBAAC,OAAA,EAAI,WAAU,sBAAsB,kBAAO,IAAS;AAAA,EAAA,GACjE;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Confirmation modal with a tone icon and cancel/confirm actions. */
+export interface AlertDialogProps { open?: boolean; inline?: boolean; tone?: "danger" | "warn"; title?: React.ReactNode; description?: React.ReactNode; cancelLabel?: string; confirmLabel?: string; onCancel?: () => void; onConfirm?: () => void; }
+export declare function AlertDialog(props: AlertDialogProps): JSX.Element;

package/dist/components/overlay/AlertDialog.js

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_ALERTDIALOG_CSS = `
+.ax-alertdialog-overlay { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay)); animation: ax-ad-fade var(--dur-2) var(--ease-out); }
+.ax-alertdialog { width: min(420px, calc(100vw - 48px)); background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-3); padding: var(--space-6); animation: ax-ad-rise var(--dur-3) var(--ease-out); }
+.ax-alertdialog--inline { position: relative; animation: none; box-shadow: none; }
+.ax-alertdialog__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-2); margin-bottom: var(--space-4); }
+.ax-alertdialog__icon--danger { background: var(--danger-dim); color: var(--danger); }
+.ax-alertdialog__icon--warn { background: var(--warn-dim); color: var(--warn); }
+.ax-alertdialog__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-body); margin: 0 0 8px; }
+.ax-alertdialog__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-6); line-height: var(--leading-body); }
+.ax-alertdialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }
+.ax-alertdialog__btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; cursor: pointer; border-radius: var(--radius-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent; transition: background var(--dur-1) var(--ease-out); }
+.ax-alertdialog__btn--cancel { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
+.ax-alertdialog__btn--cancel:hover { background: var(--surface-raised); color: var(--text-body); }
+.ax-alertdialog__btn--confirm { background: var(--accent); color: var(--accent-fg); }
+.ax-alertdialog__btn--confirm:hover { background: var(--accent-hover); }
+.ax-alertdialog__btn--danger { background: var(--danger); color: #fff; }
+.ax-alertdialog__btn--danger:hover { filter: brightness(1.1); }
+@keyframes ax-ad-fade { from { opacity: 0; } }
+@keyframes ax-ad-rise { from { opacity: 0; transform: translateY(8px); } }
+@media (prefers-reduced-motion: reduce) { .ax-alertdialog-overlay, .ax-alertdialog { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-alertdialog-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-alertdialog-css";
+  s.textContent = AX_ALERTDIALOG_CSS;
+  document.head.appendChild(s);
+}
+const Warn = /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M12 9v4M12 17h.01" })
+] });
+function AlertDialog({ open = true, inline = false, tone = "danger", title, description, cancelLabel = "Cancel", confirmLabel = "Confirm", onCancel, onConfirm, className = "", ...rest }) {
+  if (!open) return null;
+  const panel = /* @__PURE__ */ jsxs("div", { className: ["ax-alertdialog", inline ? "ax-alertdialog--inline" : "", className].filter(Boolean).join(" "), role: "alertdialog", "aria-modal": !inline, onClick: (e) => e.stopPropagation(), ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "ax-alertdialog__icon ax-alertdialog__icon--" + (tone === "warn" ? "warn" : "danger"), children: Warn }),
+    /* @__PURE__ */ jsx("h2", { className: "ax-alertdialog__title", children: title }),
+    description ? /* @__PURE__ */ jsx("p", { className: "ax-alertdialog__desc", children: description }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ax-alertdialog__actions", children: [
+      /* @__PURE__ */ jsx("button", { className: "ax-alertdialog__btn ax-alertdialog__btn--cancel", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx("button", { className: "ax-alertdialog__btn " + (tone === "danger" ? "ax-alertdialog__btn--danger" : "ax-alertdialog__btn--confirm"), onClick: onConfirm, children: confirmLabel })
+    ] })
+  ] });
+  if (inline) return panel;
+  return /* @__PURE__ */ jsx("div", { className: "ax-alertdialog-overlay", onClick: onCancel, children: panel });
+}
+export {
+  AlertDialog
+};
+//# sourceMappingURL=AlertDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlertDialog.js","sources":["../../../src/components/overlay/AlertDialog.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_ALERTDIALOG_CSS = `\n.ax-alertdialog-overlay { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; background: var(--bg-overlay); backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay)); animation: ax-ad-fade var(--dur-2) var(--ease-out); }\n.ax-alertdialog { width: min(420px, calc(100vw - 48px)); background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-3); padding: var(--space-6); animation: ax-ad-rise var(--dur-3) var(--ease-out); }\n.ax-alertdialog--inline { position: relative; animation: none; box-shadow: none; }\n.ax-alertdialog__icon { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-2); margin-bottom: var(--space-4); }\n.ax-alertdialog__icon--danger { background: var(--danger-dim); color: var(--danger); }\n.ax-alertdialog__icon--warn { background: var(--warn-dim); color: var(--warn); }\n.ax-alertdialog__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-body); margin: 0 0 8px; }\n.ax-alertdialog__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0 0 var(--space-6); line-height: var(--leading-body); }\n.ax-alertdialog__actions { display: flex; justify-content: flex-end; gap: var(--space-2); }\n.ax-alertdialog__btn { display: inline-flex; align-items: center; justify-content: center; height: 36px; padding: 0 16px; cursor: pointer; border-radius: var(--radius-2); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); border: 1px solid transparent; transition: background var(--dur-1) var(--ease-out); }\n.ax-alertdialog__btn--cancel { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }\n.ax-alertdialog__btn--cancel:hover { background: var(--surface-raised); color: var(--text-body); }\n.ax-alertdialog__btn--confirm { background: var(--accent); color: var(--accent-fg); }\n.ax-alertdialog__btn--confirm:hover { background: var(--accent-hover); }\n.ax-alertdialog__btn--danger { background: var(--danger); color: #fff; }\n.ax-alertdialog__btn--danger:hover { filter: brightness(1.1); }\n@keyframes ax-ad-fade { from { opacity: 0; } }\n@keyframes ax-ad-rise { from { opacity: 0; transform: translateY(8px); } }\n@media (prefers-reduced-motion: reduce) { .ax-alertdialog-overlay, .ax-alertdialog { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-alertdialog-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-alertdialog-css\";\n  s.textContent = AX_ALERTDIALOG_CSS;\n  document.head.appendChild(s);\n}\n\nconst Warn = <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z\"></path><path d=\"M12 9v4M12 17h.01\"></path></svg>;\n\nexport function AlertDialog({ open = true, inline = false, tone = \"danger\", title, description, cancelLabel = \"Cancel\", confirmLabel = \"Confirm\", onCancel, onConfirm, className = \"\", ...rest }) {\n  if (!open) return null;\n  const panel = (\n    <div className={[\"ax-alertdialog\", inline ? \"ax-alertdialog--inline\" : \"\", className].filter(Boolean).join(\" \")} role=\"alertdialog\" aria-modal={!inline} onClick={(e) => e.stopPropagation()} {...rest}>\n      <div className={\"ax-alertdialog__icon ax-alertdialog__icon--\" + (tone === \"warn\" ? \"warn\" : \"danger\")}>{Warn}</div>\n      <h2 className=\"ax-alertdialog__title\">{title}</h2>\n      {description ? <p className=\"ax-alertdialog__desc\">{description}</p> : null}\n      <div className=\"ax-alertdialog__actions\">\n        <button className=\"ax-alertdialog__btn ax-alertdialog__btn--cancel\" onClick={onCancel}>{cancelLabel}</button>\n        <button className={\"ax-alertdialog__btn \" + (tone === \"danger\" ? \"ax-alertdialog__btn--danger\" : \"ax-alertdialog__btn--confirm\")} onClick={onConfirm}>{confirmLabel}</button>\n      </div>\n    </div>\n  );\n  if (inline) return panel;\n  return <div className=\"ax-alertdialog-overlay\" onClick={onCancel}>{panel}</div>;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsB3B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,oBAAoB,GAAG;AACrF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,OAAO,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,gFAAA,CAAgF;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,oBAAA,CAAoB;AAAA,GAAO;AAEvR,SAAS,YAAY,EAAE,OAAO,MAAM,SAAS,OAAO,OAAO,UAAU,OAAO,aAAa,cAAc,UAAU,eAAe,WAAW,UAAU,WAAW,YAAY,IAAI,GAAG,QAAQ;AAChM,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,QACJ,qBAAC,OAAA,EAAI,WAAW,CAAC,kBAAkB,SAAS,2BAA2B,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,MAAK,eAAc,cAAY,CAAC,QAAQ,SAAS,CAAC,MAAM,EAAE,gBAAA,GAAoB,GAAG,MAChM,UAAA;AAAA,IAAA,oBAAC,SAAI,WAAW,iDAAiD,SAAS,SAAS,SAAS,WAAY,UAAA,KAAA,CAAK;AAAA,IAC7G,oBAAC,MAAA,EAAG,WAAU,yBAAyB,UAAA,OAAM;AAAA,IAC5C,cAAc,oBAAC,KAAA,EAAE,WAAU,wBAAwB,uBAAY,IAAO;AAAA,IACvE,qBAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,MAAA,oBAAC,UAAA,EAAO,WAAU,mDAAkD,SAAS,UAAW,UAAA,aAAY;AAAA,MACpG,oBAAC,UAAA,EAAO,WAAW,0BAA0B,SAAS,WAAW,gCAAgC,iCAAiC,SAAS,WAAY,UAAA,aAAA,CAAa;AAAA,IAAA,EAAA,CACtK;AAAA,EAAA,GACF;AAEF,MAAI,OAAQ,QAAO;AACnB,6BAAQ,OAAA,EAAI,WAAU,0BAAyB,SAAS,UAAW,UAAA,OAAM;AAC3E;"}

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

@@ -0,0 +1,22 @@
+/**
+ * @startingPoint section="Overlay" subtitle="⌘K command palette — search + keyboard nav" viewport="600x420"
+ * Command palette: fuzzy filter, ↑/↓/↵ keyboard nav, grouped results.
+ */
+export interface CommandItem {
+  id?: string;
+  label: string;
+  icon?: React.ReactNode;
+  shortcut?: string;
+}
+export interface CommandProps {
+  /** @default true */
+  open?: boolean;
+  /** Render without the fixed overlay (docs/specimens). @default false */
+  inline?: boolean;
+  /** Grouped commands: { label, items }. */
+  groups: Array<{ label?: string; items: CommandItem[] }>;
+  placeholder?: string;
+  onClose?: () => void;
+  onSelect?: (item: CommandItem) => void;
+}
+export declare function Command(props: CommandProps): JSX.Element;

package/dist/components/overlay/Command.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useEffect } from "react";
+const AX_COMMAND_CSS = `
+.ax-cmd-overlay {
+  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center;
+  padding-top: 14vh; background: var(--bg-overlay);
+  backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay));
+  animation: ax-cmd-fade var(--dur-2) var(--ease-out);
+}
+.ax-cmd {
+  width: min(560px, calc(100vw - 48px)); max-height: 60vh; display: flex; flex-direction: column;
+  background: var(--surface-panel); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3); box-shadow: var(--shadow-3); overflow: hidden;
+  animation: ax-cmd-rise var(--dur-3) var(--ease-out);
+}
+.ax-cmd--inline { position: relative; animation: none; max-height: 340px; }
+.ax-cmd__head { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border-default); }
+.ax-cmd__icon { color: var(--text-faint); flex: none; }
+.ax-cmd__input { flex: 1; height: 48px; background: none; border: none; outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-md); }
+.ax-cmd__input::placeholder { color: var(--text-faint); }
+.ax-cmd__esc { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 2px 5px; }
+.ax-cmd__list { overflow-y: auto; padding: var(--space-1); }
+.ax-cmd__group-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }
+.ax-cmd__item {
+  display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none;
+  text-align: left; cursor: pointer; padding: 9px 10px; border-radius: var(--radius-2);
+  color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm);
+}
+.ax-cmd__item svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }
+.ax-cmd__item--active { background: var(--surface-raised); }
+.ax-cmd__item-shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.ax-cmd__empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: var(--text-sm); }
+@keyframes ax-cmd-fade { from { opacity: 0; } }
+@keyframes ax-cmd-rise { from { opacity: 0; transform: translateY(-8px); } }
+@media (prefers-reduced-motion: reduce) { .ax-cmd-overlay, .ax-cmd { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-command-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-command-css";
+  s.textContent = AX_COMMAND_CSS;
+  document.head.appendChild(s);
+}
+function Command({ open = true, inline = false, groups = [], placeholder = "Type a command or search…", onClose, onSelect, className = "", ...rest }) {
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const inputRef = useRef(null);
+  const flat = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const out = [];
+    for (const g of groups) {
+      const matched = g.items.filter((it) => !q || it.label.toLowerCase().includes(q));
+      if (matched.length) out.push({ label: g.label, items: matched });
+    }
+    return out;
+  }, [groups, query]);
+  const flatItems = useMemo(() => flat.flatMap((g) => g.items), [flat]);
+  useEffect(() => {
+    setActive(0);
+  }, [query]);
+  useEffect(() => {
+    if (open && inputRef.current) inputRef.current.focus();
+  }, [open]);
+  if (!open) return null;
+  const choose = (it) => {
+    onSelect && onSelect(it);
+    onClose && onClose();
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => Math.min(a + 1, flatItems.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => Math.max(a - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (flatItems[active]) choose(flatItems[active]);
+    } else if (e.key === "Escape") {
+      onClose && onClose();
+    }
+  };
+  let idx = -1;
+  const panel = /* @__PURE__ */ jsxs("div", { className: ["ax-cmd", inline ? "ax-cmd--inline" : "", className].filter(Boolean).join(" "), onClick: (e) => e.stopPropagation(), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-cmd__head", children: [
+      /* @__PURE__ */ jsxs("svg", { className: "ax-cmd__icon", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", children: [
+        /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "8" }),
+        /* @__PURE__ */ jsx("path", { d: "m21 21-4.3-4.3" })
+      ] }),
+      /* @__PURE__ */ jsx("input", { ref: inputRef, className: "ax-cmd__input", placeholder, value: query, onChange: (e) => setQuery(e.target.value), onKeyDown: onKey }),
+      /* @__PURE__ */ jsx("span", { className: "ax-cmd__esc", children: "ESC" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-cmd__list", children: [
+      flatItems.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ax-cmd__empty", children: "No results." }) : null,
+      flat.map((g) => /* @__PURE__ */ jsxs("div", { children: [
+        g.label ? /* @__PURE__ */ jsx("div", { className: "ax-cmd__group-label", children: g.label }) : null,
+        g.items.map((it) => {
+          idx++;
+          const myIdx = idx;
+          return /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: "ax-cmd__item" + (myIdx === active ? " ax-cmd__item--active" : ""),
+              onMouseEnter: () => setActive(myIdx),
+              onClick: () => choose(it),
+              children: [
+                it.icon,
+                /* @__PURE__ */ jsx("span", { children: it.label }),
+                it.shortcut ? /* @__PURE__ */ jsx("span", { className: "ax-cmd__item-shortcut", children: it.shortcut }) : null
+              ]
+            },
+            it.id || it.label
+          );
+        })
+      ] }, g.label))
+    ] })
+  ] });
+  if (inline) return panel;
+  return /* @__PURE__ */ jsx("div", { className: "ax-cmd-overlay", onClick: onClose, children: panel });
+}
+export {
+  Command
+};
+//# sourceMappingURL=Command.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Command.js","sources":["../../../src/components/overlay/Command.jsx"],"sourcesContent":["import React, { useState, useMemo, useEffect, useRef } from \"react\";\n\nconst AX_COMMAND_CSS = `\n.ax-cmd-overlay {\n  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center;\n  padding-top: 14vh; background: var(--bg-overlay);\n  backdrop-filter: blur(var(--blur-overlay)); -webkit-backdrop-filter: blur(var(--blur-overlay));\n  animation: ax-cmd-fade var(--dur-2) var(--ease-out);\n}\n.ax-cmd {\n  width: min(560px, calc(100vw - 48px)); max-height: 60vh; display: flex; flex-direction: column;\n  background: var(--surface-panel); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3); box-shadow: var(--shadow-3); overflow: hidden;\n  animation: ax-cmd-rise var(--dur-3) var(--ease-out);\n}\n.ax-cmd--inline { position: relative; animation: none; max-height: 340px; }\n.ax-cmd__head { display: flex; align-items: center; gap: 10px; padding: 0 14px; border-bottom: 1px solid var(--border-default); }\n.ax-cmd__icon { color: var(--text-faint); flex: none; }\n.ax-cmd__input { flex: 1; height: 48px; background: none; border: none; outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-md); }\n.ax-cmd__input::placeholder { color: var(--text-faint); }\n.ax-cmd__esc { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 2px 5px; }\n.ax-cmd__list { overflow-y: auto; padding: var(--space-1); }\n.ax-cmd__group-label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }\n.ax-cmd__item {\n  display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none;\n  text-align: left; cursor: pointer; padding: 9px 10px; border-radius: var(--radius-2);\n  color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm);\n}\n.ax-cmd__item svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }\n.ax-cmd__item--active { background: var(--surface-raised); }\n.ax-cmd__item-shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-cmd__empty { padding: 28px; text-align: center; color: var(--text-faint); font-size: var(--text-sm); }\n@keyframes ax-cmd-fade { from { opacity: 0; } }\n@keyframes ax-cmd-rise { from { opacity: 0; transform: translateY(-8px); } }\n@media (prefers-reduced-motion: reduce) { .ax-cmd-overlay, .ax-cmd { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-command-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-command-css\";\n  s.textContent = AX_COMMAND_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Command({ open = true, inline = false, groups = [], placeholder = \"Type a command or search…\", onClose, onSelect, className = \"\", ...rest }) {\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n  const inputRef = useRef(null);\n\n  const flat = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    const out = [];\n    for (const g of groups) {\n      const matched = g.items.filter((it) => !q || it.label.toLowerCase().includes(q));\n      if (matched.length) out.push({ label: g.label, items: matched });\n    }\n    return out;\n  }, [groups, query]);\n\n  const flatItems = useMemo(() => flat.flatMap((g) => g.items), [flat]);\n\n  useEffect(() => { setActive(0); }, [query]);\n  useEffect(() => { if (open && inputRef.current) inputRef.current.focus(); }, [open]);\n\n  if (!open) return null;\n\n  const choose = (it) => { onSelect && onSelect(it); onClose && onClose(); };\n\n  const onKey = (e) => {\n    if (e.key === \"ArrowDown\") { e.preventDefault(); setActive((a) => Math.min(a + 1, flatItems.length - 1)); }\n    else if (e.key === \"ArrowUp\") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }\n    else if (e.key === \"Enter\") { e.preventDefault(); if (flatItems[active]) choose(flatItems[active]); }\n    else if (e.key === \"Escape\") { onClose && onClose(); }\n  };\n\n  let idx = -1;\n  const panel = (\n    <div className={[\"ax-cmd\", inline ? \"ax-cmd--inline\" : \"\", className].filter(Boolean).join(\" \")} onClick={(e) => e.stopPropagation()} {...rest}>\n      <div className=\"ax-cmd__head\">\n        <svg className=\"ax-cmd__icon\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"></circle><path d=\"m21 21-4.3-4.3\"></path></svg>\n        <input ref={inputRef} className=\"ax-cmd__input\" placeholder={placeholder} value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={onKey} />\n        <span className=\"ax-cmd__esc\">ESC</span>\n      </div>\n      <div className=\"ax-cmd__list\">\n        {flatItems.length === 0 ? <div className=\"ax-cmd__empty\">No results.</div> : null}\n        {flat.map((g) => (\n          <div key={g.label}>\n            {g.label ? <div className=\"ax-cmd__group-label\">{g.label}</div> : null}\n            {g.items.map((it) => {\n              idx++;\n              const myIdx = idx;\n              return (\n                <button\n                  key={it.id || it.label}\n                  className={\"ax-cmd__item\" + (myIdx === active ? \" ax-cmd__item--active\" : \"\")}\n                  onMouseEnter={() => setActive(myIdx)}\n                  onClick={() => choose(it)}\n                >\n                  {it.icon}\n                  <span>{it.label}</span>\n                  {it.shortcut ? <span className=\"ax-cmd__item-shortcut\">{it.shortcut}</span> : null}\n                </button>\n              );\n            })}\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n\n  if (inline) return panel;\n  return <div className=\"ax-cmd-overlay\" onClick={onClose}>{panel}</div>;\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+/** Right-click context menu; items support icons, shortcuts, danger, separators, labels. */
+export interface ContextMenuItem { label?: React.ReactNode; icon?: React.ReactNode; shortcut?: string; danger?: boolean; onSelect?: () => void; type?: "separator" | "label"; }
+export interface ContextMenuProps { items: ContextMenuItem[]; children?: React.ReactNode; }
+export declare function ContextMenu(props: ContextMenuProps): JSX.Element;

package/dist/components/overlay/ContextMenu.js

@@ -0,0 +1,66 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useCallback, useEffect } from "react";
+const AX_CTXMENU_CSS = `
+.ax-ctxmenu-trigger { display: contents; }
+.ax-ctxmenu { position: fixed; z-index: 80; min-width: 190px; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1); animation: ax-ctxmenu-in var(--dur-1) var(--ease-out); }
+.ax-ctxmenu__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-ctxmenu__item:hover { background: var(--surface-raised); }
+.ax-ctxmenu__item--danger { color: var(--danger); }
+.ax-ctxmenu__item svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }
+.ax-ctxmenu__item--danger svg { color: var(--danger); }
+.ax-ctxmenu__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }
+.ax-ctxmenu__sep { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }
+.ax-ctxmenu__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }
+@keyframes ax-ctxmenu-in { from { opacity: 0; transform: scale(0.97); } }
+@media (prefers-reduced-motion: reduce) { .ax-ctxmenu { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-ctxmenu-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-ctxmenu-css";
+  s.textContent = AX_CTXMENU_CSS;
+  document.head.appendChild(s);
+}
+function ContextMenu({ items = [], children, className = "", ...rest }) {
+  const [menu, setMenu] = useState(null);
+  const ref = useRef(null);
+  const onContext = (e) => {
+    e.preventDefault();
+    setMenu({ x: e.clientX, y: e.clientY });
+  };
+  const close = useCallback(() => setMenu(null), []);
+  useEffect(() => {
+    if (menu) {
+      const onDoc = () => close();
+      const onKey = (e) => {
+        if (e.key === "Escape") close();
+      };
+      document.addEventListener("mousedown", onDoc);
+      document.addEventListener("keydown", onKey);
+      document.addEventListener("scroll", onDoc, true);
+      return () => {
+        document.removeEventListener("mousedown", onDoc);
+        document.removeEventListener("keydown", onKey);
+        document.removeEventListener("scroll", onDoc, true);
+      };
+    }
+  }, [menu, close]);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "ax-ctxmenu-trigger", onContextMenu: onContext, ref, ...rest, children }),
+    menu ? /* @__PURE__ */ jsx("div", { className: ["ax-ctxmenu", className].filter(Boolean).join(" "), style: { left: menu.x, top: menu.y }, onClick: (e) => e.stopPropagation(), children: items.map((it, i) => {
+      if (it.type === "separator") return /* @__PURE__ */ jsx("div", { className: "ax-ctxmenu__sep" }, i);
+      if (it.type === "label") return /* @__PURE__ */ jsx("div", { className: "ax-ctxmenu__label", children: it.label }, i);
+      return /* @__PURE__ */ jsxs("button", { className: "ax-ctxmenu__item" + (it.danger ? " ax-ctxmenu__item--danger" : ""), onClick: () => {
+        close();
+        it.onSelect && it.onSelect();
+      }, children: [
+        it.icon,
+        /* @__PURE__ */ jsx("span", { children: it.label }),
+        it.shortcut ? /* @__PURE__ */ jsx("span", { className: "ax-ctxmenu__shortcut", children: it.shortcut }) : null
+      ] }, i);
+    }) }) : null
+  ] });
+}
+export {
+  ContextMenu
+};
+//# sourceMappingURL=ContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/overlay/ContextMenu.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_CTXMENU_CSS = `\n.ax-ctxmenu-trigger { display: contents; }\n.ax-ctxmenu { position: fixed; z-index: 80; min-width: 190px; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1); animation: ax-ctxmenu-in var(--dur-1) var(--ease-out); }\n.ax-ctxmenu__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-ctxmenu__item:hover { background: var(--surface-raised); }\n.ax-ctxmenu__item--danger { color: var(--danger); }\n.ax-ctxmenu__item svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }\n.ax-ctxmenu__item--danger svg { color: var(--danger); }\n.ax-ctxmenu__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-ctxmenu__sep { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }\n.ax-ctxmenu__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }\n@keyframes ax-ctxmenu-in { from { opacity: 0; transform: scale(0.97); } }\n@media (prefers-reduced-motion: reduce) { .ax-ctxmenu { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-ctxmenu-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-ctxmenu-css\";\n  s.textContent = AX_CTXMENU_CSS;\n  document.head.appendChild(s);\n}\n\nexport function ContextMenu({ items = [], children, className = \"\", ...rest }) {\n  const [menu, setMenu] = useState(null); // {x,y}\n  const ref = useRef(null);\n\n  const onContext = (e) => { e.preventDefault(); setMenu({ x: e.clientX, y: e.clientY }); };\n  const close = useCallback(() => setMenu(null), []);\n  useEffect(() => {\n    if (menu) {\n      const onDoc = () => close();\n      const onKey = (e) => { if (e.key === \"Escape\") close(); };\n      document.addEventListener(\"mousedown\", onDoc);\n      document.addEventListener(\"keydown\", onKey);\n      document.addEventListener(\"scroll\", onDoc, true);\n      return () => { document.removeEventListener(\"mousedown\", onDoc); document.removeEventListener(\"keydown\", onKey); document.removeEventListener(\"scroll\", onDoc, true); };\n    }\n  }, [menu, close]);\n\n  return (\n    <React.Fragment>\n      <div className=\"ax-ctxmenu-trigger\" onContextMenu={onContext} ref={ref} {...rest}>{children}</div>\n      {menu ? (\n        <div className={[\"ax-ctxmenu\", className].filter(Boolean).join(\" \")} style={{ left: menu.x, top: menu.y }} onClick={(e) => e.stopPropagation()}>\n          {items.map((it, i) => {\n            if (it.type === \"separator\") return <div key={i} className=\"ax-ctxmenu__sep\"></div>;\n            if (it.type === \"label\") return <div key={i} className=\"ax-ctxmenu__label\">{it.label}</div>;\n            return (\n              <button key={i} className={\"ax-ctxmenu__item\" + (it.danger ? \" ax-ctxmenu__item--danger\" : \"\")} onClick={() => { close(); it.onSelect && it.onSelect(); }}>\n                {it.icon}<span>{it.label}</span>{it.shortcut ? <span className=\"ax-ctxmenu__shortcut\">{it.shortcut}</span> : null}\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </React.Fragment>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevB,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,YAAY,EAAE,QAAQ,IAAI,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC7E,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI;AACrC,QAAM,MAAM,OAAO,IAAI;AAEvB,QAAM,YAAY,CAAC,MAAM;AAAE,MAAE,eAAA;AAAkB,YAAQ,EAAE,GAAG,EAAE,SAAS,GAAG,EAAE,SAAS;AAAA,EAAG;AACxF,QAAM,QAAQ,YAAY,MAAM,QAAQ,IAAI,GAAG,CAAA,CAAE;AACjD,YAAU,MAAM;AACd,QAAI,MAAM;AACR,YAAM,QAAQ,MAAM,MAAA;AACpB,YAAM,QAAQ,CAAC,MAAM;AAAE,YAAI,EAAE,QAAQ,SAAU,OAAA;AAAA,MAAS;AACxD,eAAS,iBAAiB,aAAa,KAAK;AAC5C,eAAS,iBAAiB,WAAW,KAAK;AAC1C,eAAS,iBAAiB,UAAU,OAAO,IAAI;AAC/C,aAAO,MAAM;AAAE,iBAAS,oBAAoB,aAAa,KAAK;AAAG,iBAAS,oBAAoB,WAAW,KAAK;AAAG,iBAAS,oBAAoB,UAAU,OAAO,IAAI;AAAA,MAAG;AAAA,IACxK;AAAA,EACF,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,SACE,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,sBAAqB,eAAe,WAAW,KAAW,GAAG,MAAO,UAAS;AAAA,IAC3F,OACC,oBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAO,EAAE,MAAM,KAAK,GAAG,KAAK,KAAK,EAAA,GAAK,SAAS,CAAC,MAAM,EAAE,mBAC1H,UAAA,MAAM,IAAI,CAAC,IAAI,MAAM;AACpB,UAAI,GAAG,SAAS,YAAa,4BAAQ,OAAA,EAAY,WAAU,qBAAb,CAA+B;AAC7E,UAAI,GAAG,SAAS,QAAS,QAAO,oBAAC,SAAY,WAAU,qBAAqB,UAAA,GAAG,MAAA,GAArC,CAA2C;AACrF,aACE,qBAAC,YAAe,WAAW,sBAAsB,GAAG,SAAS,8BAA8B,KAAK,SAAS,MAAM;AAAE,cAAA;AAAS,WAAG,YAAY,GAAG,SAAA;AAAA,MAAY,GACrJ,UAAA;AAAA,QAAA,GAAG;AAAA,QAAK,oBAAC,QAAA,EAAM,UAAA,GAAG,MAAA,CAAM;AAAA,QAAQ,GAAG,WAAW,oBAAC,QAAA,EAAK,WAAU,wBAAwB,UAAA,GAAG,UAAS,IAAU;AAAA,MAAA,EAAA,GADlG,CAEb;AAAA,IAEJ,CAAC,GACH,IACE;AAAA,EAAA,GACN;AAEJ;"}

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

@@ -0,0 +1,20 @@
+/**
+ * Action menu. Items support icons, shortcuts, danger styling, separators and labels.
+ */
+export interface MenuItem {
+  label?: React.ReactNode;
+  icon?: React.ReactNode;
+  shortcut?: string;
+  danger?: boolean;
+  disabled?: boolean;
+  onSelect?: () => void;
+  /** "separator" | "label" for structural rows. */
+  type?: "separator" | "label";
+}
+export interface DropdownMenuProps {
+  trigger: React.ReactNode;
+  items: MenuItem[];
+  /** @default "start" */
+  align?: "start" | "end";
+}
+export declare function DropdownMenu(props: DropdownMenuProps): JSX.Element;

package/dist/components/overlay/DropdownMenu.js

@@ -0,0 +1,86 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+const AX_MENU_CSS = `
+.ax-menu { position: relative; display: inline-flex; }
+.ax-menu__panel {
+  position: absolute; z-index: 60; min-width: 200px; top: calc(100% + 6px);
+  background: var(--surface-panel); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1);
+  animation: ax-menu-in var(--dur-2) var(--ease-out);
+}
+.ax-menu__panel--end { right: 0; }
+.ax-menu__panel--start { left: 0; }
+.ax-menu__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);
+  transition: background var(--dur-1) var(--ease-out);
+}
+.ax-menu__item:hover { background: var(--surface-raised); }
+.ax-menu__item:focus-visible { outline: none; background: var(--surface-raised); }
+.ax-menu__item--danger { color: var(--danger); }
+.ax-menu__item:disabled { opacity: 0.4; cursor: not-allowed; }
+.ax-menu__item svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }
+.ax-menu__item--danger svg { color: var(--danger); }
+.ax-menu__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; }
+.ax-menu__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }
+.ax-menu__sep { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }
+@keyframes ax-menu-in { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .ax-menu__panel { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-menu-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-menu-css";
+  s.textContent = AX_MENU_CSS;
+  document.head.appendChild(s);
+}
+function DropdownMenu({ trigger, items = [], align = "start", 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-menu", className].filter(Boolean).join(" "), ref, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { onClick: () => setOpen((o) => !o), children: trigger }),
+    open ? /* @__PURE__ */ jsx("div", { className: "ax-menu__panel ax-menu__panel--" + align, role: "menu", children: items.map((it, i) => {
+      if (it.type === "separator") return /* @__PURE__ */ jsx("div", { className: "ax-menu__sep" }, i);
+      if (it.type === "label") return /* @__PURE__ */ jsx("div", { className: "ax-menu__label", children: it.label }, i);
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          role: "menuitem",
+          disabled: it.disabled,
+          className: "ax-menu__item" + (it.danger ? " ax-menu__item--danger" : ""),
+          onClick: () => {
+            setOpen(false);
+            it.onSelect && it.onSelect();
+          },
+          children: [
+            it.icon,
+            /* @__PURE__ */ jsx("span", { children: it.label }),
+            it.shortcut ? /* @__PURE__ */ jsx("span", { className: "ax-menu__shortcut", children: it.shortcut }) : null
+          ]
+        },
+        i
+      );
+    }) }) : null
+  ] });
+}
+export {
+  DropdownMenu
+};
+//# sourceMappingURL=DropdownMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.js","sources":["../../../src/components/overlay/DropdownMenu.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_MENU_CSS = `\n.ax-menu { position: relative; display: inline-flex; }\n.ax-menu__panel {\n  position: absolute; z-index: 60; min-width: 200px; top: calc(100% + 6px);\n  background: var(--surface-panel); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3); box-shadow: var(--shadow-2); padding: var(--space-1);\n  animation: ax-menu-in var(--dur-2) var(--ease-out);\n}\n.ax-menu__panel--end { right: 0; }\n.ax-menu__panel--start { left: 0; }\n.ax-menu__item {\n  display: flex; align-items: center; gap: 10px; width: 100%;\n  appearance: none; background: none; border: none; text-align: left; cursor: pointer;\n  padding: 7px 10px; border-radius: var(--radius-2); color: var(--text-body);\n  font-family: var(--font-body); font-size: var(--text-sm);\n  transition: background var(--dur-1) var(--ease-out);\n}\n.ax-menu__item:hover { background: var(--surface-raised); }\n.ax-menu__item:focus-visible { outline: none; background: var(--surface-raised); }\n.ax-menu__item--danger { color: var(--danger); }\n.ax-menu__item:disabled { opacity: 0.4; cursor: not-allowed; }\n.ax-menu__item svg { width: 15px; height: 15px; flex: none; color: var(--text-faint); }\n.ax-menu__item--danger svg { color: var(--danger); }\n.ax-menu__shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; }\n.ax-menu__label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 10px 4px; }\n.ax-menu__sep { height: 1px; background: var(--border-default); margin: var(--space-1) 0; }\n@keyframes ax-menu-in { from { opacity: 0; transform: translateY(-4px); } }\n@media (prefers-reduced-motion: reduce) { .ax-menu__panel { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-menu-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-menu-css\";\n  s.textContent = AX_MENU_CSS;\n  document.head.appendChild(s);\n}\n\nexport function DropdownMenu({ trigger, items = [], align = \"start\", 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-menu\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      <span onClick={() => setOpen((o) => !o)}>{trigger}</span>\n      {open ? (\n        <div className={\"ax-menu__panel ax-menu__panel--\" + align} role=\"menu\">\n          {items.map((it, i) => {\n            if (it.type === \"separator\") return <div key={i} className=\"ax-menu__sep\"></div>;\n            if (it.type === \"label\") return <div key={i} className=\"ax-menu__label\">{it.label}</div>;\n            return (\n              <button\n                key={i}\n                role=\"menuitem\"\n                disabled={it.disabled}\n                className={\"ax-menu__item\" + (it.danger ? \" ax-menu__item--danger\" : \"\")}\n                onClick={() => { setOpen(false); it.onSelect && it.onSelect(); }}\n              >\n                {it.icon}\n                <span>{it.label}</span>\n                {it.shortcut ? <span className=\"ax-menu__shortcut\">{it.shortcut}</span> : null}\n              </button>\n            );\n          })}\n        </div>\n      ) : null}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BpB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,aAAa,EAAE,SAAS,QAAQ,IAAI,QAAQ,SAAS,YAAY,IAAI,GAAG,QAAQ;AAC9F,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,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAW,GAAG,MAC/E,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAAI,UAAA,QAAA,CAAQ;AAAA,IACjD,OACC,oBAAC,OAAA,EAAI,WAAW,oCAAoC,OAAO,MAAK,QAC7D,UAAA,MAAM,IAAI,CAAC,IAAI,MAAM;AACpB,UAAI,GAAG,SAAS,YAAa,4BAAQ,OAAA,EAAY,WAAU,kBAAb,CAA4B;AAC1E,UAAI,GAAG,SAAS,QAAS,QAAO,oBAAC,SAAY,WAAU,kBAAkB,UAAA,GAAG,MAAA,GAAlC,CAAwC;AAClF,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,MAAK;AAAA,UACL,UAAU,GAAG;AAAA,UACb,WAAW,mBAAmB,GAAG,SAAS,2BAA2B;AAAA,UACrE,SAAS,MAAM;AAAE,oBAAQ,KAAK;AAAG,eAAG,YAAY,GAAG,SAAA;AAAA,UAAY;AAAA,UAE9D,UAAA;AAAA,YAAA,GAAG;AAAA,YACJ,oBAAC,QAAA,EAAM,UAAA,GAAG,MAAA,CAAM;AAAA,YACf,GAAG,WAAW,oBAAC,QAAA,EAAK,WAAU,qBAAqB,UAAA,GAAG,UAAS,IAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QARrE;AAAA,MAAA;AAAA,IAWX,CAAC,GACH,IACE;AAAA,EAAA,GACN;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Rich hover preview card (open/close delays). For non-essential supplementary info. */
+export interface HoverCardProps { trigger: React.ReactNode; side?: "top" | "bottom"; openDelay?: number; closeDelay?: number; children?: React.ReactNode; }
+export declare function HoverCard(props: HoverCardProps): JSX.Element;

package/dist/components/overlay/HoverCard.js

@@ -0,0 +1,53 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+const AX_HOVERCARD_CSS = `
+.ax-hovercard { position: relative; display: inline-flex; }
+.ax-hovercard__trigger { border-bottom: 1px dashed var(--border-strong); cursor: help; }
+.ax-hovercard__panel {
+  position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
+  width: 280px; padding: var(--space-4); pointer-events: none;
+  background: var(--surface-panel); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3); box-shadow: var(--shadow-2);
+  opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
+}
+.ax-hovercard__panel--bottom { bottom: auto; top: calc(100% + 8px); }
+.ax-hovercard--open .ax-hovercard__panel { opacity: 1; pointer-events: auto; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-hovercard-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-hovercard-css";
+  s.textContent = AX_HOVERCARD_CSS;
+  document.head.appendChild(s);
+}
+function HoverCard({ trigger, children, side = "top", openDelay = 200, closeDelay = 120, className = "", ...rest }) {
+  const [open, setOpen] = useState(false);
+  const timer = useRef(null);
+  const enter = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(true), openDelay);
+  };
+  const leave = () => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setOpen(false), closeDelay);
+  };
+  useEffect(() => () => clearTimeout(timer.current), []);
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: ["ax-hovercard", open ? "ax-hovercard--open" : "", className].filter(Boolean).join(" "),
+      onMouseEnter: enter,
+      onMouseLeave: leave,
+      onFocus: enter,
+      onBlur: leave,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-hovercard__trigger", children: trigger }),
+        /* @__PURE__ */ jsx("span", { className: "ax-hovercard__panel" + (side === "bottom" ? " ax-hovercard__panel--bottom" : ""), children })
+      ]
+    }
+  );
+}
+export {
+  HoverCard
+};
+//# sourceMappingURL=HoverCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HoverCard.js","sources":["../../../src/components/overlay/HoverCard.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\n\nconst AX_HOVERCARD_CSS = `\n.ax-hovercard { position: relative; display: inline-flex; }\n.ax-hovercard__trigger { border-bottom: 1px dashed var(--border-strong); cursor: help; }\n.ax-hovercard__panel {\n  position: absolute; z-index: 60; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);\n  width: 280px; padding: var(--space-4); pointer-events: none;\n  background: var(--surface-panel); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3); box-shadow: var(--shadow-2);\n  opacity: 0; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);\n}\n.ax-hovercard__panel--bottom { bottom: auto; top: calc(100% + 8px); }\n.ax-hovercard--open .ax-hovercard__panel { opacity: 1; pointer-events: auto; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-hovercard-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-hovercard-css\";\n  s.textContent = AX_HOVERCARD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function HoverCard({ trigger, children, side = \"top\", openDelay = 200, closeDelay = 120, className = \"\", ...rest }) {\n  const [open, setOpen] = useState(false);\n  const timer = useRef(null);\n  const enter = () => { clearTimeout(timer.current); timer.current = setTimeout(() => setOpen(true), openDelay); };\n  const leave = () => { clearTimeout(timer.current); timer.current = setTimeout(() => setOpen(false), closeDelay); };\n  useEffect(() => () => clearTimeout(timer.current), []);\n  return (\n    <span\n      className={[\"ax-hovercard\", open ? \"ax-hovercard--open\" : \"\", className].filter(Boolean).join(\" \")}\n      onMouseEnter={enter} onMouseLeave={leave} onFocus={enter} onBlur={leave}\n      {...rest}\n    >\n      <span className=\"ax-hovercard__trigger\">{trigger}</span>\n      <span className={\"ax-hovercard__panel\" + (side === \"bottom\" ? \" ax-hovercard__panel--bottom\" : \"\")}>{children}</span>\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAczB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,kBAAkB,GAAG;AACnF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,UAAU,EAAE,SAAS,UAAU,OAAO,OAAO,YAAY,KAAK,aAAa,KAAK,YAAY,IAAI,GAAG,QAAQ;AACzH,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,QAAQ,OAAO,IAAI;AACzB,QAAM,QAAQ,MAAM;AAAE,iBAAa,MAAM,OAAO;AAAG,UAAM,UAAU,WAAW,MAAM,QAAQ,IAAI,GAAG,SAAS;AAAA,EAAG;AAC/G,QAAM,QAAQ,MAAM;AAAE,iBAAa,MAAM,OAAO;AAAG,UAAM,UAAU,WAAW,MAAM,QAAQ,KAAK,GAAG,UAAU;AAAA,EAAG;AACjH,YAAU,MAAM,MAAM,aAAa,MAAM,OAAO,GAAG,CAAA,CAAE;AACrD,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,gBAAgB,OAAO,uBAAuB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACjG,cAAc;AAAA,MAAO,cAAc;AAAA,MAAO,SAAS;AAAA,MAAO,QAAQ;AAAA,MACjE,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,SAAQ;AAAA,QACjD,oBAAC,UAAK,WAAW,yBAAyB,SAAS,WAAW,iCAAiC,KAAM,SAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpH;"}

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

@@ -0,0 +1,4 @@
+/** Desktop-style menubar; hover to move between open menus. */
+export interface MenubarMenu { label: string; items: Array<{ label?: React.ReactNode; shortcut?: string; onSelect?: () => void; type?: "separator" }>; }
+export interface MenubarProps { menus: MenubarMenu[]; }
+export declare function Menubar(props: MenubarProps): JSX.Element;