@agentaily/design-system 0.1.0

package/dist/components/display/DataTable.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+const AX_DATATABLE_CSS = `
+.ax-datatable-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-3); }
+.ax-datatable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.ax-datatable thead th { text-align: left; padding: 10px 14px; background: var(--surface-card); border-bottom: 1px solid var(--border-strong); white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
+.ax-datatable th--sortable { cursor: pointer; user-select: none; }
+.ax-datatable th--sortable:hover { color: var(--text-body); }
+.ax-datatable__sort { display: inline-flex; flex-direction: column; margin-left: 6px; vertical-align: middle; }
+.ax-datatable__sort span { font-size: 7px; line-height: 6px; color: var(--border-strong); }
+.ax-datatable__sort span.on { color: var(--text-body); }
+.ax-datatable tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-default); color: var(--text-body); }
+.ax-datatable tbody tr:last-child td { border-bottom: none; }
+.ax-datatable tbody tr:hover { background: var(--surface-raised); }
+.ax-datatable__num { font-family: var(--font-mono); text-align: right; }
+.ax-datatable__foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-datatable-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-datatable-css";
+  s.textContent = AX_DATATABLE_CSS;
+  document.head.appendChild(s);
+}
+function DataTable({ columns = [], rows = [], pageSize, caption, className = "", ...rest }) {
+  const [sort, setSort] = useState({ key: null, dir: 1 });
+  const [page, setPage] = useState(0);
+  const norm = (c) => typeof c === "string" ? { key: c, label: c } : c;
+  const cols = columns.map(norm);
+  const sorted = useMemo(() => {
+    if (!sort.key) return rows;
+    const copy = rows.slice();
+    copy.sort((a, b) => {
+      const av = a[sort.key], bv = b[sort.key];
+      if (av === bv) return 0;
+      if (typeof av === "number" && typeof bv === "number") return (av - bv) * sort.dir;
+      return String(av).localeCompare(String(bv)) * sort.dir;
+    });
+    return copy;
+  }, [rows, sort]);
+  const paged = pageSize ? sorted.slice(page * pageSize, (page + 1) * pageSize) : sorted;
+  const totalPages = pageSize ? Math.ceil(sorted.length / pageSize) : 1;
+  const toggleSort = (key) => setSort((s) => s.key === key ? { key, dir: -s.dir } : { key, dir: 1 });
+  return /* @__PURE__ */ jsx("div", { className, ...rest, children: /* @__PURE__ */ jsxs("div", { className: "ax-datatable-wrap", children: [
+    /* @__PURE__ */ jsxs("table", { className: "ax-datatable", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: cols.map((c) => /* @__PURE__ */ jsxs("th", { className: (c.sortable !== false ? "th--sortable " : "") + (c.numeric ? "ax-datatable__num" : ""), onClick: () => c.sortable !== false && toggleSort(c.key), children: [
+        c.label,
+        c.sortable !== false ? /* @__PURE__ */ jsxs("span", { className: "ax-datatable__sort", children: [
+          /* @__PURE__ */ jsx("span", { className: sort.key === c.key && sort.dir === 1 ? "on" : "", children: "▲" }),
+          /* @__PURE__ */ jsx("span", { className: sort.key === c.key && sort.dir === -1 ? "on" : "", children: "▼" })
+        ] }) : null
+      ] }, c.key)) }) }),
+      /* @__PURE__ */ jsx("tbody", { children: paged.map((row, ri) => /* @__PURE__ */ jsx("tr", { children: cols.map((c) => /* @__PURE__ */ jsx("td", { className: c.numeric ? "ax-datatable__num" : "", children: c.render ? c.render(row[c.key], row) : row[c.key] }, c.key)) }, ri)) })
+    ] }),
+    pageSize && totalPages > 1 ? /* @__PURE__ */ jsxs("div", { className: "ax-datatable__foot", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        page * pageSize + 1,
+        "–",
+        Math.min((page + 1) * pageSize, sorted.length),
+        " of ",
+        sorted.length
+      ] }),
+      /* @__PURE__ */ jsxs("span", { style: { display: "flex", gap: 8 }, children: [
+        /* @__PURE__ */ jsx("button", { onClick: () => setPage((p) => Math.max(0, p - 1)), disabled: page === 0, style: { background: "none", border: "none", color: "inherit", cursor: "pointer", fontFamily: "inherit" }, children: "‹ prev" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setPage((p) => Math.min(totalPages - 1, p + 1)), disabled: page >= totalPages - 1, style: { background: "none", border: "none", color: "inherit", cursor: "pointer", fontFamily: "inherit" }, children: "next ›" })
+      ] })
+    ] }) : null
+  ] }) });
+}
+export {
+  DataTable
+};
+//# sourceMappingURL=DataTable.js.map

package/dist/components/display/DataTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.js","sources":["../../../src/components/display/DataTable.jsx"],"sourcesContent":["import React, { useState, useMemo } from \"react\";\n\nconst AX_DATATABLE_CSS = `\n.ax-datatable-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-3); }\n.ax-datatable { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }\n.ax-datatable thead th { text-align: left; padding: 10px 14px; background: var(--surface-card); border-bottom: 1px solid var(--border-strong); white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }\n.ax-datatable th--sortable { cursor: pointer; user-select: none; }\n.ax-datatable th--sortable:hover { color: var(--text-body); }\n.ax-datatable__sort { display: inline-flex; flex-direction: column; margin-left: 6px; vertical-align: middle; }\n.ax-datatable__sort span { font-size: 7px; line-height: 6px; color: var(--border-strong); }\n.ax-datatable__sort span.on { color: var(--text-body); }\n.ax-datatable tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-default); color: var(--text-body); }\n.ax-datatable tbody tr:last-child td { border-bottom: none; }\n.ax-datatable tbody tr:hover { background: var(--surface-raised); }\n.ax-datatable__num { font-family: var(--font-mono); text-align: right; }\n.ax-datatable__foot { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-top: 1px solid var(--border-default); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-datatable-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-datatable-css\";\n  s.textContent = AX_DATATABLE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function DataTable({ columns = [], rows = [], pageSize, caption, className = \"\", ...rest }) {\n  const [sort, setSort] = useState({ key: null, dir: 1 });\n  const [page, setPage] = useState(0);\n\n  const norm = (c) => (typeof c === \"string\" ? { key: c, label: c } : c);\n  const cols = columns.map(norm);\n\n  const sorted = useMemo(() => {\n    if (!sort.key) return rows;\n    const copy = rows.slice();\n    copy.sort((a, b) => {\n      const av = a[sort.key], bv = b[sort.key];\n      if (av === bv) return 0;\n      if (typeof av === \"number\" && typeof bv === \"number\") return (av - bv) * sort.dir;\n      return String(av).localeCompare(String(bv)) * sort.dir;\n    });\n    return copy;\n  }, [rows, sort]);\n\n  const paged = pageSize ? sorted.slice(page * pageSize, (page + 1) * pageSize) : sorted;\n  const totalPages = pageSize ? Math.ceil(sorted.length / pageSize) : 1;\n\n  const toggleSort = (key) => setSort((s) => s.key === key ? { key, dir: -s.dir } : { key, dir: 1 });\n\n  return (\n    <div className={className} {...rest}>\n      <div className=\"ax-datatable-wrap\">\n        <table className=\"ax-datatable\">\n          <thead>\n            <tr>\n              {cols.map((c) => (\n                <th key={c.key} className={(c.sortable !== false ? \"th--sortable \" : \"\") + (c.numeric ? \"ax-datatable__num\" : \"\")} onClick={() => c.sortable !== false && toggleSort(c.key)}>\n                  {c.label}\n                  {c.sortable !== false ? (\n                    <span className=\"ax-datatable__sort\">\n                      <span className={sort.key === c.key && sort.dir === 1 ? \"on\" : \"\"}>▲</span>\n                      <span className={sort.key === c.key && sort.dir === -1 ? \"on\" : \"\"}>▼</span>\n                    </span>\n                  ) : null}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody>\n            {paged.map((row, ri) => (\n              <tr key={ri}>\n                {cols.map((c) => <td key={c.key} className={c.numeric ? \"ax-datatable__num\" : \"\"}>{c.render ? c.render(row[c.key], row) : row[c.key]}</td>)}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n        {pageSize && totalPages > 1 ? (\n          <div className=\"ax-datatable__foot\">\n            <span>{page * pageSize + 1}–{Math.min((page + 1) * pageSize, sorted.length)} of {sorted.length}</span>\n            <span style={{ display: \"flex\", gap: 8 }}>\n              <button onClick={() => setPage((p) => Math.max(0, p - 1))} disabled={page === 0} style={{ background: \"none\", border: \"none\", color: \"inherit\", cursor: \"pointer\", fontFamily: \"inherit\" }}>‹ prev</button>\n              <button onClick={() => setPage((p) => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1} style={{ background: \"none\", border: \"none\", color: \"inherit\", cursor: \"pointer\", fontFamily: \"inherit\" }}>next ›</button>\n            </span>\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/display/Empty.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Empty-state block: framed icon, title, description, optional actions.
+ */
+export interface EmptyProps {
+  /** Icon element (rendered in a 44px bordered square). */
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  /** Action buttons row. */
+  actions?: React.ReactNode;
+  /** Dashed border frame. @default false */
+  bordered?: boolean;
+}
+export declare function Empty(props: EmptyProps): JSX.Element;

package/dist/components/display/Empty.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_EMPTY_CSS = `
+.ax-empty {
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  text-align: center; padding: var(--space-16) var(--space-8); gap: var(--space-3);
+}
+.ax-empty--bordered { border: 1px dashed var(--border-strong); border-radius: var(--radius-3); }
+.ax-empty__icon {
+  display: flex; align-items: center; justify-content: center;
+  width: 44px; height: 44px; margin-bottom: var(--space-2);
+  color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-2);
+}
+.ax-empty__icon svg { width: 20px; height: 20px; }
+.ax-empty__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; letter-spacing: var(--tracking-tight); }
+.ax-empty__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: 38ch; line-height: var(--leading-body); }
+.ax-empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-empty-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-empty-css";
+  s.textContent = AX_EMPTY_CSS;
+  document.head.appendChild(s);
+}
+function Empty({ icon, title, description, actions, bordered = false, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-empty", bordered ? "ax-empty--bordered" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    icon ? /* @__PURE__ */ jsx("div", { className: "ax-empty__icon", children: icon }) : null,
+    title ? /* @__PURE__ */ jsx("p", { className: "ax-empty__title", children: title }) : null,
+    description ? /* @__PURE__ */ jsx("p", { className: "ax-empty__desc", children: description }) : null,
+    actions ? /* @__PURE__ */ jsx("div", { className: "ax-empty__actions", children: actions }) : null
+  ] });
+}
+export {
+  Empty
+};
+//# sourceMappingURL=Empty.js.map

package/dist/components/display/Empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.js","sources":["../../../src/components/display/Empty.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_EMPTY_CSS = `\n.ax-empty {\n  display: flex; flex-direction: column; align-items: center; justify-content: center;\n  text-align: center; padding: var(--space-16) var(--space-8); gap: var(--space-3);\n}\n.ax-empty--bordered { border: 1px dashed var(--border-strong); border-radius: var(--radius-3); }\n.ax-empty__icon {\n  display: flex; align-items: center; justify-content: center;\n  width: 44px; height: 44px; margin-bottom: var(--space-2);\n  color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-2);\n}\n.ax-empty__icon svg { width: 20px; height: 20px; }\n.ax-empty__title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; letter-spacing: var(--tracking-tight); }\n.ax-empty__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: 38ch; line-height: var(--leading-body); }\n.ax-empty__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-empty-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-empty-css\";\n  s.textContent = AX_EMPTY_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Empty({ icon, title, description, actions, bordered = false, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-empty\", bordered ? \"ax-empty--bordered\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {icon ? <div className=\"ax-empty__icon\">{icon}</div> : null}\n      {title ? <p className=\"ax-empty__title\">{title}</p> : null}\n      {description ? <p className=\"ax-empty__desc\">{description}</p> : null}\n      {actions ? <div className=\"ax-empty__actions\">{actions}</div> : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBrB,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,MAAM,OAAO,aAAa,SAAS,WAAW,OAAO,YAAY,IAAI,GAAG,KAAA,GAAQ;AACtG,8BACG,OAAA,EAAI,WAAW,CAAC,YAAY,WAAW,uBAAuB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC1G,UAAA;AAAA,IAAA,OAAO,oBAAC,OAAA,EAAI,WAAU,kBAAkB,gBAAK,IAAS;AAAA,IACtD,QAAQ,oBAAC,KAAA,EAAE,WAAU,mBAAmB,iBAAM,IAAO;AAAA,IACrD,cAAc,oBAAC,KAAA,EAAE,WAAU,kBAAkB,uBAAY,IAAO;AAAA,IAChE,UAAU,oBAAC,OAAA,EAAI,WAAU,qBAAqB,mBAAQ,IAAS;AAAA,EAAA,GAClE;AAEJ;"}

package/dist/components/display/Item.d.ts

@@ -0,0 +1,3 @@
+/** Generic list row: media slot, title + description, actions slot; optionally interactive/flush. */
+export interface ItemProps { media?: React.ReactNode; mediaBox?: boolean; title?: React.ReactNode; description?: React.ReactNode; actions?: React.ReactNode; interactive?: boolean; flush?: boolean; children?: React.ReactNode; }
+export declare function Item(props: ItemProps): JSX.Element;

package/dist/components/display/Item.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_ITEM_CSS = `
+.ax-item { 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); transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
+.ax-item--interactive { cursor: pointer; }
+.ax-item--interactive:hover { border-color: var(--border-strong); background: var(--surface-raised); }
+.ax-item--flush { border: none; border-radius: 0; background: none; padding: 10px 0; }
+.ax-item__media { flex: none; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }
+.ax-item__media--box { width: 36px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-2); }
+.ax-item__content { flex: 1; min-width: 0; }
+.ax-item__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-item__desc { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 0; line-height: var(--leading-snug); }
+.ax-item__actions { flex: none; display: flex; align-items: center; gap: 6px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-item-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-item-css";
+  s.textContent = AX_ITEM_CSS;
+  document.head.appendChild(s);
+}
+function Item({ media, mediaBox = true, title, description, actions, interactive = false, flush = false, children, className = "", ...rest }) {
+  const cls = ["ax-item", interactive ? "ax-item--interactive" : "", flush ? "ax-item--flush" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cls, ...rest, children: [
+    media ? /* @__PURE__ */ jsx("span", { className: "ax-item__media" + (mediaBox ? " ax-item__media--box" : ""), children: media }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ax-item__content", children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "ax-item__title", children: title }) : null,
+      description ? /* @__PURE__ */ jsx("p", { className: "ax-item__desc", children: description }) : null,
+      children
+    ] }),
+    actions ? /* @__PURE__ */ jsx("div", { className: "ax-item__actions", children: actions }) : null
+  ] });
+}
+export {
+  Item
+};
+//# sourceMappingURL=Item.js.map

package/dist/components/display/Item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Item.js","sources":["../../../src/components/display/Item.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_ITEM_CSS = `\n.ax-item { 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); transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }\n.ax-item--interactive { cursor: pointer; }\n.ax-item--interactive:hover { border-color: var(--border-strong); background: var(--surface-raised); }\n.ax-item--flush { border: none; border-radius: 0; background: none; padding: 10px 0; }\n.ax-item__media { flex: none; display: flex; align-items: center; justify-content: center; color: var(--text-muted); }\n.ax-item__media--box { width: 36px; height: 36px; border: 1px solid var(--border-default); border-radius: var(--radius-2); }\n.ax-item__content { flex: 1; min-width: 0; }\n.ax-item__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-item__desc { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 0; line-height: var(--leading-snug); }\n.ax-item__actions { flex: none; display: flex; align-items: center; gap: 6px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-item-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-item-css\";\n  s.textContent = AX_ITEM_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Item({ media, mediaBox = true, title, description, actions, interactive = false, flush = false, children, className = \"\", ...rest }) {\n  const cls = [\"ax-item\", interactive ? \"ax-item--interactive\" : \"\", flush ? \"ax-item--flush\" : \"\", className].filter(Boolean).join(\" \");\n  return (\n    <div className={cls} {...rest}>\n      {media ? <span className={\"ax-item__media\" + (mediaBox ? \" ax-item__media--box\" : \"\")}>{media}</span> : null}\n      <div className=\"ax-item__content\">\n        {title ? <p className=\"ax-item__title\">{title}</p> : null}\n        {description ? <p className=\"ax-item__desc\">{description}</p> : null}\n        {children}\n      </div>\n      {actions ? <div className=\"ax-item__actions\">{actions}</div> : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAapB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,KAAK,EAAE,OAAO,WAAW,MAAM,OAAO,aAAa,SAAS,cAAc,OAAO,QAAQ,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AACnJ,QAAM,MAAM,CAAC,WAAW,cAAc,yBAAyB,IAAI,QAAQ,mBAAmB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrI,SACE,qBAAC,OAAA,EAAI,WAAW,KAAM,GAAG,MACtB,UAAA;AAAA,IAAA,QAAQ,oBAAC,UAAK,WAAW,oBAAoB,WAAW,yBAAyB,KAAM,iBAAM,IAAU;AAAA,IACxG,qBAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,MAAA,QAAQ,oBAAC,KAAA,EAAE,WAAU,kBAAkB,iBAAM,IAAO;AAAA,MACpD,cAAc,oBAAC,KAAA,EAAE,WAAU,iBAAiB,uBAAY,IAAO;AAAA,MAC/D;AAAA,IAAA,GACH;AAAA,IACC,UAAU,oBAAC,OAAA,EAAI,WAAU,oBAAoB,mBAAQ,IAAS;AAAA,EAAA,GACjE;AAEJ;"}

package/dist/components/display/Kbd.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Keyboard key cap — mono, hard-edged, 2px bottom border.
+ */
+export interface KbdProps {
+  children?: React.ReactNode;
+}
+export declare function Kbd(props: KbdProps): JSX.Element;

package/dist/components/display/Kbd.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_KBD_CSS = `
+.ax-kbd {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 20px; height: 20px; padding: 0 5px;
+  background: var(--surface-raised);
+  border: 1px solid var(--border-strong);
+  border-bottom-width: 2px;
+  border-radius: var(--radius-1);
+  font-family: var(--font-mono); font-size: 11px;
+  font-weight: var(--weight-medium); color: var(--text-muted);
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-kbd-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-kbd-css";
+  s.textContent = AX_KBD_CSS;
+  document.head.appendChild(s);
+}
+function Kbd({ children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("kbd", { className: ["ax-kbd", className].filter(Boolean).join(" "), ...rest, children });
+}
+export {
+  Kbd
+};
+//# sourceMappingURL=Kbd.js.map

package/dist/components/display/Kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sources":["../../../src/components/display/Kbd.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_KBD_CSS = `\n.ax-kbd {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 20px; height: 20px; padding: 0 5px;\n  background: var(--surface-raised);\n  border: 1px solid var(--border-strong);\n  border-bottom-width: 2px;\n  border-radius: var(--radius-1);\n  font-family: var(--font-mono); font-size: 11px;\n  font-weight: var(--weight-medium); color: var(--text-muted);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-kbd-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-kbd-css\";\n  s.textContent = AX_KBD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Kbd({ children, className = \"\", ...rest }) {\n  return <kbd className={[\"ax-kbd\", className].filter(Boolean).join(\" \")} {...rest}>{children}</kbd>;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAanB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,YAAY,GAAG;AAC7E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,IAAI,EAAE,UAAU,YAAY,IAAI,GAAG,QAAQ;AACzD,SAAO,oBAAC,OAAA,EAAI,WAAW,CAAC,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAAO,UAAS;AAC9F;"}

package/dist/components/display/Pagination.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Page navigation with truncation (… ) for large ranges.
+ */
+export interface PaginationProps {
+  /** Current page (1-indexed). */
+  page: number;
+  /** Total page count. */
+  total: number;
+  onChange?: (page: number) => void;
+}
+export declare function Pagination(props: PaginationProps): JSX.Element;

package/dist/components/display/Pagination.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_PAGINATION_CSS = `
+.ax-pagination { display: flex; align-items: center; gap: 4px; }
+.ax-pagination__btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 32px; height: 32px; padding: 0 8px; cursor: pointer;
+  background: transparent; color: var(--text-muted);
+  border: 1px solid var(--border-default); border-radius: var(--radius-2);
+  font-family: var(--font-mono); font-size: var(--text-sm);
+  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+}
+.ax-pagination__btn:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); border-color: var(--border-strong); }
+.ax-pagination__btn:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-pagination__btn:disabled { opacity: 0.35; cursor: not-allowed; }
+.ax-pagination__btn--active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+.ax-pagination__ellipsis { min-width: 24px; text-align: center; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-sm); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-pagination-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-pagination-css";
+  s.textContent = AX_PAGINATION_CSS;
+  document.head.appendChild(s);
+}
+function range(start, end) {
+  const out = [];
+  for (let i = start; i <= end; i++) out.push(i);
+  return out;
+}
+function Pagination({ page = 1, total = 1, onChange, className = "", ...rest }) {
+  let pages;
+  if (total <= 7) {
+    pages = range(1, total);
+  } else if (page <= 4) {
+    pages = [...range(1, 5), "…", total];
+  } else if (page >= total - 3) {
+    pages = [1, "…", ...range(total - 4, total)];
+  } else {
+    pages = [1, "…", page - 1, page, page + 1, "…", total];
+  }
+  const go = (p) => {
+    if (p >= 1 && p <= total && p !== page && onChange) onChange(p);
+  };
+  return /* @__PURE__ */ jsxs("nav", { className: ["ax-pagination", className].filter(Boolean).join(" "), "aria-label": "Pagination", ...rest, children: [
+    /* @__PURE__ */ jsx("button", { className: "ax-pagination__btn", disabled: page <= 1, onClick: () => go(page - 1), "aria-label": "Previous", children: "‹" }),
+    pages.map(
+      (p, i) => p === "…" ? /* @__PURE__ */ jsx("span", { className: "ax-pagination__ellipsis", children: "…" }, "e" + i) : /* @__PURE__ */ jsx("button", { className: "ax-pagination__btn" + (p === page ? " ax-pagination__btn--active" : ""), onClick: () => go(p), "aria-current": p === page ? "page" : void 0, children: p }, p)
+    ),
+    /* @__PURE__ */ jsx("button", { className: "ax-pagination__btn", disabled: page >= total, onClick: () => go(page + 1), "aria-label": "Next", children: "›" })
+  ] });
+}
+export {
+  Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/components/display/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/display/Pagination.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_PAGINATION_CSS = `\n.ax-pagination { display: flex; align-items: center; gap: 4px; }\n.ax-pagination__btn {\n  display: inline-flex; align-items: center; justify-content: center;\n  min-width: 32px; height: 32px; padding: 0 8px; cursor: pointer;\n  background: transparent; color: var(--text-muted);\n  border: 1px solid var(--border-default); border-radius: var(--radius-2);\n  font-family: var(--font-mono); font-size: var(--text-sm);\n  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);\n}\n.ax-pagination__btn:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); border-color: var(--border-strong); }\n.ax-pagination__btn:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-pagination__btn:disabled { opacity: 0.35; cursor: not-allowed; }\n.ax-pagination__btn--active { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }\n.ax-pagination__ellipsis { min-width: 24px; text-align: center; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-sm); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-pagination-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-pagination-css\";\n  s.textContent = AX_PAGINATION_CSS;\n  document.head.appendChild(s);\n}\n\nfunction range(start, end) {\n  const out = [];\n  for (let i = start; i <= end; i++) out.push(i);\n  return out;\n}\n\nexport function Pagination({ page = 1, total = 1, onChange, className = \"\", ...rest }) {\n  let pages;\n  if (total <= 7) {\n    pages = range(1, total);\n  } else if (page <= 4) {\n    pages = [...range(1, 5), \"…\", total];\n  } else if (page >= total - 3) {\n    pages = [1, \"…\", ...range(total - 4, total)];\n  } else {\n    pages = [1, \"…\", page - 1, page, page + 1, \"…\", total];\n  }\n  const go = (p) => { if (p >= 1 && p <= total && p !== page && onChange) onChange(p); };\n  return (\n    <nav className={[\"ax-pagination\", className].filter(Boolean).join(\" \")} aria-label=\"Pagination\" {...rest}>\n      <button className=\"ax-pagination__btn\" disabled={page <= 1} onClick={() => go(page - 1)} aria-label=\"Previous\">‹</button>\n      {pages.map((p, i) => p === \"…\"\n        ? <span key={\"e\" + i} className=\"ax-pagination__ellipsis\">…</span>\n        : <button key={p} className={\"ax-pagination__btn\" + (p === page ? \" ax-pagination__btn--active\" : \"\")} onClick={() => go(p)} aria-current={p === page ? \"page\" : undefined}>{p}</button>\n      )}\n      <button className=\"ax-pagination__btn\" disabled={page >= total} onClick={() => go(page + 1)} aria-label=\"Next\">›</button>\n    </nav>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiB1B,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,SAAS,MAAM,OAAO,KAAK;AACzB,QAAM,MAAM,CAAA;AACZ,WAAS,IAAI,OAAO,KAAK,KAAK,IAAK,KAAI,KAAK,CAAC;AAC7C,SAAO;AACT;AAEO,SAAS,WAAW,EAAE,OAAO,GAAG,QAAQ,GAAG,UAAU,YAAY,IAAI,GAAG,QAAQ;AACrF,MAAI;AACJ,MAAI,SAAS,GAAG;AACd,YAAQ,MAAM,GAAG,KAAK;AAAA,EACxB,WAAW,QAAQ,GAAG;AACpB,YAAQ,CAAC,GAAG,MAAM,GAAG,CAAC,GAAG,KAAK,KAAK;AAAA,EACrC,WAAW,QAAQ,QAAQ,GAAG;AAC5B,YAAQ,CAAC,GAAG,KAAK,GAAG,MAAM,QAAQ,GAAG,KAAK,CAAC;AAAA,EAC7C,OAAO;AACL,YAAQ,CAAC,GAAG,KAAK,OAAO,GAAG,MAAM,OAAO,GAAG,KAAK,KAAK;AAAA,EACvD;AACA,QAAM,KAAK,CAAC,MAAM;AAAE,QAAI,KAAK,KAAK,KAAK,SAAS,MAAM,QAAQ,mBAAmB,CAAC;AAAA,EAAG;AACrF,8BACG,OAAA,EAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,cAAW,cAAc,GAAG,MAClG,UAAA;AAAA,IAAA,oBAAC,UAAA,EAAO,WAAU,sBAAqB,UAAU,QAAQ,GAAG,SAAS,MAAM,GAAG,OAAO,CAAC,GAAG,cAAW,YAAW,UAAA,KAAC;AAAA,IAC/G,MAAM;AAAA,MAAI,CAAC,GAAG,MAAM,MAAM,MACvB,oBAAC,QAAA,EAAmB,WAAU,2BAA0B,UAAA,IAAA,GAA7C,MAAM,CAAwC,wBACxD,UAAA,EAAe,WAAW,wBAAwB,MAAM,OAAO,gCAAgC,KAAK,SAAS,MAAM,GAAG,CAAC,GAAG,gBAAc,MAAM,OAAO,SAAS,QAAY,eAA9J,CAAgK;AAAA,IAAA;AAAA,IAEjL,oBAAC,UAAA,EAAO,WAAU,sBAAqB,UAAU,QAAQ,OAAO,SAAS,MAAM,GAAG,OAAO,CAAC,GAAG,cAAW,QAAO,UAAA,IAAA,CAAC;AAAA,EAAA,GAClH;AAEJ;"}

package/dist/components/display/Progress.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Determinate or indeterminate progress bar.
+ */
+export interface ProgressProps {
+  value?: number;
+  max?: number;
+  /** Mono uppercase label above the track. */
+  label?: string;
+  /** Show the percent readout. @default false */
+  showValue?: boolean;
+  /** Ignore value; show a looping sweep. @default false */
+  indeterminate?: boolean;
+}
+export declare function Progress(props: ProgressProps): JSX.Element;

package/dist/components/display/Progress.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_PROGRESS_CSS = `
+.ax-progress { display: flex; flex-direction: column; gap: 6px; }
+.ax-progress__top { display: flex; align-items: baseline; justify-content: space-between; }
+.ax-progress__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }
+.ax-progress__track {
+  height: 6px; width: 100%; background: var(--surface-raised);
+  border: 1px solid var(--border-default); border-radius: var(--radius-1); overflow: hidden;
+}
+.ax-progress__bar {
+  height: 100%; background: var(--accent); border-radius: 1px;
+  transition: width var(--dur-3) var(--ease-out);
+}
+.ax-progress--indeterminate .ax-progress__bar {
+  width: 35% !important; animation: ax-prog-slide 1.3s var(--ease-out) infinite;
+}
+@keyframes ax-prog-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }
+@media (prefers-reduced-motion: reduce) { .ax-progress--indeterminate .ax-progress__bar { animation-duration: 3s; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-progress-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-progress-css";
+  s.textContent = AX_PROGRESS_CSS;
+  document.head.appendChild(s);
+}
+function Progress({ value = 0, max = 100, label, showValue = false, indeterminate = false, className = "", ...rest }) {
+  const pct = Math.max(0, Math.min(100, value / max * 100));
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-progress", indeterminate ? "ax-progress--indeterminate" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    label != null || showValue ? /* @__PURE__ */ jsxs("div", { className: "ax-progress__top", children: [
+      label != null ? /* @__PURE__ */ jsx("span", { className: "ax-label", children: label }) : /* @__PURE__ */ jsx("span", {}),
+      showValue && !indeterminate ? /* @__PURE__ */ jsxs("span", { className: "ax-progress__val", children: [
+        Math.round(pct),
+        "%"
+      ] }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "ax-progress__track", role: "progressbar", "aria-valuenow": indeterminate ? void 0 : value, "aria-valuemax": max, children: /* @__PURE__ */ jsx("div", { className: "ax-progress__bar", style: { width: pct + "%" } }) })
+  ] });
+}
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map

package/dist/components/display/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../src/components/display/Progress.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_PROGRESS_CSS = `\n.ax-progress { display: flex; flex-direction: column; gap: 6px; }\n.ax-progress__top { display: flex; align-items: baseline; justify-content: space-between; }\n.ax-progress__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); }\n.ax-progress__track {\n  height: 6px; width: 100%; background: var(--surface-raised);\n  border: 1px solid var(--border-default); border-radius: var(--radius-1); overflow: hidden;\n}\n.ax-progress__bar {\n  height: 100%; background: var(--accent); border-radius: 1px;\n  transition: width var(--dur-3) var(--ease-out);\n}\n.ax-progress--indeterminate .ax-progress__bar {\n  width: 35% !important; animation: ax-prog-slide 1.3s var(--ease-out) infinite;\n}\n@keyframes ax-prog-slide { 0% { margin-left: -35%; } 100% { margin-left: 100%; } }\n@media (prefers-reduced-motion: reduce) { .ax-progress--indeterminate .ax-progress__bar { animation-duration: 3s; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-progress-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-progress-css\";\n  s.textContent = AX_PROGRESS_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Progress({ value = 0, max = 100, label, showValue = false, indeterminate = false, className = \"\", ...rest }) {\n  const pct = Math.max(0, Math.min(100, (value / max) * 100));\n  return (\n    <div className={[\"ax-progress\", indeterminate ? \"ax-progress--indeterminate\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {(label != null || showValue) ? (\n        <div className=\"ax-progress__top\">\n          {label != null ? <span className=\"ax-label\">{label}</span> : <span></span>}\n          {showValue && !indeterminate ? <span className=\"ax-progress__val\">{Math.round(pct)}%</span> : null}\n        </div>\n      ) : null}\n      <div className=\"ax-progress__track\" role=\"progressbar\" aria-valuenow={indeterminate ? undefined : value} aria-valuemax={max}>\n        <div className=\"ax-progress__bar\" style={{ width: pct + \"%\" }}></div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBxB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,iBAAiB,GAAG;AAClF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS,EAAE,QAAQ,GAAG,MAAM,KAAK,OAAO,YAAY,OAAO,gBAAgB,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC3H,QAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,KAAM,QAAQ,MAAO,GAAG,CAAC;AAC1D,8BACG,OAAA,EAAI,WAAW,CAAC,eAAe,gBAAgB,+BAA+B,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACzH,UAAA;AAAA,IAAA,SAAS,QAAQ,YACjB,qBAAC,OAAA,EAAI,WAAU,oBACZ,UAAA;AAAA,MAAA,SAAS,2BAAQ,QAAA,EAAK,WAAU,YAAY,UAAA,MAAA,CAAM,wBAAW,QAAA,CAAA,CAAK;AAAA,MAClE,aAAa,CAAC,gBAAgB,qBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA;AAAA,QAAA,KAAK,MAAM,GAAG;AAAA,QAAE;AAAA,MAAA,EAAA,CAAC,IAAU;AAAA,IAAA,EAAA,CAChG,IACE;AAAA,IACJ,oBAAC,SAAI,WAAU,sBAAqB,MAAK,eAAc,iBAAe,gBAAgB,SAAY,OAAO,iBAAe,KACtH,UAAA,oBAAC,OAAA,EAAI,WAAU,oBAAmB,OAAO,EAAE,OAAO,MAAM,IAAA,EAAI,CAAG,EAAA,CACjE;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/display/Separator.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hairline divider — horizontal, vertical, or with a centered mono label.
+ */
+export interface SeparatorProps {
+  /** @default "horizontal" */
+  orientation?: "horizontal" | "vertical";
+  /** Centered mono uppercase label (forces horizontal). */
+  label?: string;
+}
+export declare function Separator(props: SeparatorProps): JSX.Element;

package/dist/components/display/Separator.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_SEPARATOR_CSS = `
+.ax-sep { border: none; background: var(--border-default); flex: none; }
+.ax-sep--h { width: 100%; height: 1px; margin: var(--space-4) 0; }
+.ax-sep--v { width: 1px; align-self: stretch; min-height: 1em; margin: 0 var(--space-4); }
+.ax-sep--label {
+  display: flex; align-items: center; gap: 12px; width: 100%; margin: var(--space-4) 0;
+  background: none; height: auto;
+}
+.ax-sep--label::before, .ax-sep--label::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
+.ax-sep__text {
+  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
+  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-separator-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-separator-css";
+  s.textContent = AX_SEPARATOR_CSS;
+  document.head.appendChild(s);
+}
+function Separator({ orientation = "horizontal", label, className = "", ...rest }) {
+  if (label) {
+    return /* @__PURE__ */ jsx("div", { className: ["ax-sep--label", className].filter(Boolean).join(" "), role: "separator", ...rest, children: /* @__PURE__ */ jsx("span", { className: "ax-sep__text", children: label }) });
+  }
+  const cls = ["ax-sep", orientation === "vertical" ? "ax-sep--v" : "ax-sep--h", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("hr", { className: cls, role: "separator", "aria-orientation": orientation, ...rest });
+}
+export {
+  Separator
+};
+//# sourceMappingURL=Separator.js.map

package/dist/components/display/Separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Separator.js","sources":["../../../src/components/display/Separator.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SEPARATOR_CSS = `\n.ax-sep { border: none; background: var(--border-default); flex: none; }\n.ax-sep--h { width: 100%; height: 1px; margin: var(--space-4) 0; }\n.ax-sep--v { width: 1px; align-self: stretch; min-height: 1em; margin: 0 var(--space-4); }\n.ax-sep--label {\n  display: flex; align-items: center; gap: 12px; width: 100%; margin: var(--space-4) 0;\n  background: none; height: auto;\n}\n.ax-sep--label::before, .ax-sep--label::after { content: \"\"; flex: 1; height: 1px; background: var(--border-default); }\n.ax-sep__text {\n  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);\n  text-transform: uppercase; color: var(--text-faint); white-space: nowrap;\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-separator-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-separator-css\";\n  s.textContent = AX_SEPARATOR_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Separator({ orientation = \"horizontal\", label, className = \"\", ...rest }) {\n  if (label) {\n    return (\n      <div className={[\"ax-sep--label\", className].filter(Boolean).join(\" \")} role=\"separator\" {...rest}>\n        <span className=\"ax-sep__text\">{label}</span>\n      </div>\n    );\n  }\n  const cls = [\"ax-sep\", orientation === \"vertical\" ? \"ax-sep--v\" : \"ax-sep--h\", className].filter(Boolean).join(\" \");\n  return <hr className={cls} role=\"separator\" aria-orientation={orientation} {...rest} />;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAezB,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,cAAc,cAAc,OAAO,YAAY,IAAI,GAAG,QAAQ;AACxF,MAAI,OAAO;AACT,WACE,oBAAC,SAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,MAAK,aAAa,GAAG,MAC3F,8BAAC,QAAA,EAAK,WAAU,gBAAgB,UAAA,MAAA,CAAM,EAAA,CACxC;AAAA,EAEJ;AACA,QAAM,MAAM,CAAC,UAAU,gBAAgB,aAAa,cAAc,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAClH,SAAO,oBAAC,QAAG,WAAW,KAAK,MAAK,aAAY,oBAAkB,aAAc,GAAG,KAAA,CAAM;AACvF;"}

package/dist/components/display/Skeleton.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Shimmering loading placeholder.
+ */
+export interface SkeletonProps {
+  /** @default "block" */
+  variant?: "block" | "text" | "circle";
+  width?: string | number;
+  height?: string | number;
+  /** For variant="text": render N stacked lines (last is shorter). @default 1 */
+  lines?: number;
+}
+export declare function Skeleton(props: SkeletonProps): JSX.Element;

package/dist/components/display/Skeleton.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_SKELETON_CSS = `
+.ax-skeleton {
+  display: block; background: var(--surface-raised);
+  border-radius: var(--radius-1); position: relative; overflow: hidden;
+}
+.ax-skeleton::after {
+  content: ""; position: absolute; inset: 0;
+  background: linear-gradient(90deg, transparent, var(--bg-3), transparent);
+  transform: translateX(-100%);
+  animation: ax-shimmer 1.4s var(--ease-out) infinite;
+}
+[data-theme="light"] .ax-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); }
+.ax-skeleton--text { height: 0.7em; margin: 0.2em 0; }
+.ax-skeleton--circle { border-radius: var(--radius-2); }
+@keyframes ax-shimmer { 100% { transform: translateX(100%); } }
+@media (prefers-reduced-motion: reduce) { .ax-skeleton::after { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-skeleton-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-skeleton-css";
+  s.textContent = AX_SKELETON_CSS;
+  document.head.appendChild(s);
+}
+function Skeleton({ variant = "block", width, height, lines = 1, className = "", style = {}, ...rest }) {
+  if (variant === "text" && lines > 1) {
+    return /* @__PURE__ */ jsx("div", { className, ...rest, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "ax-skeleton ax-skeleton--text",
+        style: { width: i === lines - 1 ? "60%" : "100%" }
+      },
+      i
+    )) });
+  }
+  const cls = ["ax-skeleton", variant === "text" ? "ax-skeleton--text" : "", variant === "circle" ? "ax-skeleton--circle" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: cls, style: { width, height, ...style }, ...rest });
+}
+export {
+  Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/display/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/display/Skeleton.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SKELETON_CSS = `\n.ax-skeleton {\n  display: block; background: var(--surface-raised);\n  border-radius: var(--radius-1); position: relative; overflow: hidden;\n}\n.ax-skeleton::after {\n  content: \"\"; position: absolute; inset: 0;\n  background: linear-gradient(90deg, transparent, var(--bg-3), transparent);\n  transform: translateX(-100%);\n  animation: ax-shimmer 1.4s var(--ease-out) infinite;\n}\n[data-theme=\"light\"] .ax-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); }\n.ax-skeleton--text { height: 0.7em; margin: 0.2em 0; }\n.ax-skeleton--circle { border-radius: var(--radius-2); }\n@keyframes ax-shimmer { 100% { transform: translateX(100%); } }\n@media (prefers-reduced-motion: reduce) { .ax-skeleton::after { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-skeleton-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-skeleton-css\";\n  s.textContent = AX_SKELETON_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Skeleton({ variant = \"block\", width, height, lines = 1, className = \"\", style = {}, ...rest }) {\n  if (variant === \"text\" && lines > 1) {\n    return (\n      <div className={className} {...rest}>\n        {Array.from({ length: lines }).map((_, i) => (\n          <span\n            key={i}\n            className=\"ax-skeleton ax-skeleton--text\"\n            style={{ width: i === lines - 1 ? \"60%\" : \"100%\" }}\n          ></span>\n        ))}\n      </div>\n    );\n  }\n  const cls = [\"ax-skeleton\", variant === \"text\" ? \"ax-skeleton--text\" : \"\", variant === \"circle\" ? \"ax-skeleton--circle\" : \"\", className].filter(Boolean).join(\" \");\n  return <span className={cls} style={{ width, height, ...style }} {...rest}></span>;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBxB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,iBAAiB,GAAG;AAClF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS,EAAE,UAAU,SAAS,OAAO,QAAQ,QAAQ,GAAG,YAAY,IAAI,QAAQ,CAAA,GAAI,GAAG,QAAQ;AAC7G,MAAI,YAAY,UAAU,QAAQ,GAAG;AACnC,WACE,oBAAC,OAAA,EAAI,WAAuB,GAAG,MAC5B,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,MACrC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QACV,OAAO,EAAE,OAAO,MAAM,QAAQ,IAAI,QAAQ,OAAA;AAAA,MAAO;AAAA,MAF5C;AAAA,IAAA,CAIR,GACH;AAAA,EAEJ;AACA,QAAM,MAAM,CAAC,eAAe,YAAY,SAAS,sBAAsB,IAAI,YAAY,WAAW,wBAAwB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjK,SAAO,oBAAC,QAAA,EAAK,WAAW,KAAK,OAAO,EAAE,OAAO,QAAQ,GAAG,SAAU,GAAG,KAAA,CAAM;AAC7E;"}

package/dist/components/display/Table.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Data table inside a bordered, horizontally-scrollable frame. Mono headers.
+ */
+export interface TableColumn {
+  key: string;
+  label?: string;
+  /** Right-align + mono the cells (use for figures). */
+  numeric?: boolean;
+  align?: "left" | "right";
+  /** Custom cell renderer: (value, row) => node. */
+  render?: (value: any, row: any) => React.ReactNode;
+}
+export interface TableProps {
+  /** Strings or TableColumn objects. */
+  columns: Array<string | TableColumn>;
+  rows: Array<Record<string, any>>;
+  /** Row hover highlight. @default true */
+  hover?: boolean;
+}
+export declare function Table(props: TableProps): JSX.Element;

package/dist/components/display/Table.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_TABLE_CSS = `
+.ax-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-3); }
+.ax-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
+.ax-table thead th {
+  text-align: left; padding: 10px 14px; background: var(--surface-card);
+  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
+  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
+  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint);
+}
+.ax-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-default); color: var(--text-body); vertical-align: middle; }
+.ax-table tbody tr:last-child td { border-bottom: none; }
+.ax-table tbody tr { transition: background var(--dur-1) var(--ease-out); }
+.ax-table--hover tbody tr:hover { background: var(--surface-raised); }
+.ax-table__num { font-family: var(--font-mono); text-align: right; color: var(--text-muted); }
+.ax-table__align-right { text-align: right; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-table-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-table-css";
+  s.textContent = AX_TABLE_CSS;
+  document.head.appendChild(s);
+}
+function Table({ columns = [], rows = [], hover = true, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: "ax-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: ["ax-table", hover ? "ax-table--hover" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((c) => {
+      const col = typeof c === "string" ? { key: c, label: c } : c;
+      return /* @__PURE__ */ jsx("th", { className: col.align === "right" ? "ax-table__align-right" : "", children: col.label }, col.key);
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsx("tr", { children: columns.map((c) => {
+      const col = typeof c === "string" ? { key: c } : c;
+      const val = row[col.key];
+      const cls = col.numeric ? "ax-table__num" : col.align === "right" ? "ax-table__align-right" : "";
+      return /* @__PURE__ */ jsx("td", { className: cls, children: col.render ? col.render(val, row) : val }, col.key);
+    }) }, ri)) })
+  ] }) });
+}
+export {
+  Table
+};
+//# sourceMappingURL=Table.js.map

package/dist/components/display/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../../src/components/display/Table.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TABLE_CSS = `\n.ax-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border-default); border-radius: var(--radius-3); }\n.ax-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }\n.ax-table thead th {\n  text-align: left; padding: 10px 14px; background: var(--surface-card);\n  border-bottom: 1px solid var(--border-strong); white-space: nowrap;\n  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);\n  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint);\n}\n.ax-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-default); color: var(--text-body); vertical-align: middle; }\n.ax-table tbody tr:last-child td { border-bottom: none; }\n.ax-table tbody tr { transition: background var(--dur-1) var(--ease-out); }\n.ax-table--hover tbody tr:hover { background: var(--surface-raised); }\n.ax-table__num { font-family: var(--font-mono); text-align: right; color: var(--text-muted); }\n.ax-table__align-right { text-align: right; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-table-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-table-css\";\n  s.textContent = AX_TABLE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Table({ columns = [], rows = [], hover = true, className = \"\", ...rest }) {\n  return (\n    <div className=\"ax-table-wrap\">\n      <table className={[\"ax-table\", hover ? \"ax-table--hover\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n        <thead>\n          <tr>\n            {columns.map((c) => {\n              const col = typeof c === \"string\" ? { key: c, label: c } : c;\n              return <th key={col.key} className={col.align === \"right\" ? \"ax-table__align-right\" : \"\"}>{col.label}</th>;\n            })}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row, ri) => (\n            <tr key={ri}>\n              {columns.map((c) => {\n                const col = typeof c === \"string\" ? { key: c } : c;\n                const val = row[col.key];\n                const cls = col.numeric ? \"ax-table__num\" : col.align === \"right\" ? \"ax-table__align-right\" : \"\";\n                return <td key={col.key} className={cls}>{col.render ? col.render(val, row) : val}</td>;\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBrB,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,UAAU,CAAA,GAAI,OAAO,CAAA,GAAI,QAAQ,MAAM,YAAY,IAAI,GAAG,QAAQ;AACxF,SACE,oBAAC,SAAI,WAAU,iBACb,+BAAC,SAAA,EAAM,WAAW,CAAC,YAAY,QAAQ,oBAAoB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvG,UAAA;AAAA,IAAA,oBAAC,WACC,UAAA,oBAAC,MAAA,EACE,UAAA,QAAQ,IAAI,CAAC,MAAM;AAClB,YAAM,MAAM,OAAO,MAAM,WAAW,EAAE,KAAK,GAAG,OAAO,EAAA,IAAM;AAC3D,aAAO,oBAAC,MAAA,EAAiB,WAAW,IAAI,UAAU,UAAU,0BAA0B,IAAK,UAAA,IAAI,MAAA,GAA/E,IAAI,GAAiF;AAAA,IACvG,CAAC,GACH,GACF;AAAA,IACA,oBAAC,SAAA,EACE,UAAA,KAAK,IAAI,CAAC,KAAK,OACd,oBAAC,MAAA,EACE,UAAA,QAAQ,IAAI,CAAC,MAAM;AAClB,YAAM,MAAM,OAAO,MAAM,WAAW,EAAE,KAAK,MAAM;AACjD,YAAM,MAAM,IAAI,IAAI,GAAG;AACvB,YAAM,MAAM,IAAI,UAAU,kBAAkB,IAAI,UAAU,UAAU,0BAA0B;AAC9F,aAAO,oBAAC,MAAA,EAAiB,WAAW,KAAM,UAAA,IAAI,SAAS,IAAI,OAAO,KAAK,GAAG,IAAI,IAAA,GAA9D,IAAI,GAA8D;AAAA,IACpF,CAAC,EAAA,GANM,EAOT,CACD,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/components/display/Tabs.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Underline tabs on a hairline rule. Optional mono count per tab.
+ */
+export interface TabsProps {
+  /** Strings or { id, label, count? } objects. */
+  items: Array<string | { id: string; label: string; count?: number }>;
+  /** id of the active tab. */
+  active: string;
+  onChange?: (id: string) => void;
+}
+export declare function Tabs(props: TabsProps): JSX.Element;