@agentaily/design-system 0.1.0

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

@@ -0,0 +1,12 @@
+/**
+ * Vertically stacked disclosure sections. Plus-icon rotates to a cross when open.
+ */
+export interface AccordionProps {
+  /** { id?, title, content }. */
+  items: Array<{ id?: string; title: React.ReactNode; content: React.ReactNode }>;
+  /** Allow multiple open at once. @default false */
+  multiple?: boolean;
+  /** ids open on mount. */
+  defaultOpen?: string[];
+}
+export declare function Accordion(props: AccordionProps): JSX.Element;

package/dist/components/display/Accordion.js

@@ -0,0 +1,60 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_ACCORDION_CSS = `
+.ax-accordion { border-top: 1px solid var(--border-default); }
+.ax-accordion__item { border-bottom: 1px solid var(--border-default); }
+.ax-accordion__trigger {
+  display: flex; align-items: center; gap: 12px; width: 100%;
+  appearance: none; background: none; border: none; cursor: pointer; text-align: left;
+  padding: 16px 4px; color: var(--text-body);
+  font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-medium);
+}
+.ax-accordion__trigger:hover { color: var(--text-body); }
+.ax-accordion__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-1); }
+.ax-accordion__label { flex: 1; }
+.ax-accordion__icon {
+  width: 14px; height: 14px; flex: none; position: relative; color: var(--text-faint);
+  transition: transform var(--dur-2) var(--ease-out);
+}
+.ax-accordion__item--open .ax-accordion__icon { transform: rotate(45deg); }
+.ax-accordion__icon::before, .ax-accordion__icon::after { content: ""; position: absolute; background: currentColor; }
+.ax-accordion__icon::before { left: 0; right: 0; top: 6px; height: 2px; }
+.ax-accordion__icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }
+.ax-accordion__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
+.ax-accordion__item--open .ax-accordion__panel { grid-template-rows: 1fr; }
+.ax-accordion__panel-inner { min-height: 0; }
+.ax-accordion__body { padding: 0 4px 18px; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); max-width: 64ch; }
+@media (prefers-reduced-motion: reduce) { .ax-accordion__panel { transition: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-accordion-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-accordion-css";
+  s.textContent = AX_ACCORDION_CSS;
+  document.head.appendChild(s);
+}
+function Accordion({ items = [], multiple = false, defaultOpen = [], className = "", ...rest }) {
+  const [open, setOpen] = useState(new Set(defaultOpen));
+  const toggle = (id) => {
+    setOpen((prev) => {
+      const next = new Set(multiple ? prev : []);
+      if (prev.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  return /* @__PURE__ */ jsx("div", { className: ["ax-accordion", className].filter(Boolean).join(" "), ...rest, children: items.map((it, i) => {
+    const id = it.id || String(i);
+    const isOpen = open.has(id);
+    return /* @__PURE__ */ jsxs("div", { className: "ax-accordion__item" + (isOpen ? " ax-accordion__item--open" : ""), children: [
+      /* @__PURE__ */ jsxs("button", { className: "ax-accordion__trigger", "aria-expanded": isOpen, onClick: () => toggle(id), children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-accordion__label", children: it.title }),
+        /* @__PURE__ */ jsx("span", { className: "ax-accordion__icon" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ax-accordion__panel", children: /* @__PURE__ */ jsx("div", { className: "ax-accordion__panel-inner", children: /* @__PURE__ */ jsx("div", { className: "ax-accordion__body", children: it.content }) }) })
+    ] }, id);
+  }) });
+}
+export {
+  Accordion
+};
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/display/Accordion.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_ACCORDION_CSS = `\n.ax-accordion { border-top: 1px solid var(--border-default); }\n.ax-accordion__item { border-bottom: 1px solid var(--border-default); }\n.ax-accordion__trigger {\n  display: flex; align-items: center; gap: 12px; width: 100%;\n  appearance: none; background: none; border: none; cursor: pointer; text-align: left;\n  padding: 16px 4px; color: var(--text-body);\n  font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-medium);\n}\n.ax-accordion__trigger:hover { color: var(--text-body); }\n.ax-accordion__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-1); }\n.ax-accordion__label { flex: 1; }\n.ax-accordion__icon {\n  width: 14px; height: 14px; flex: none; position: relative; color: var(--text-faint);\n  transition: transform var(--dur-2) var(--ease-out);\n}\n.ax-accordion__item--open .ax-accordion__icon { transform: rotate(45deg); }\n.ax-accordion__icon::before, .ax-accordion__icon::after { content: \"\"; position: absolute; background: currentColor; }\n.ax-accordion__icon::before { left: 0; right: 0; top: 6px; height: 2px; }\n.ax-accordion__icon::after { top: 0; bottom: 0; left: 6px; width: 2px; }\n.ax-accordion__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }\n.ax-accordion__item--open .ax-accordion__panel { grid-template-rows: 1fr; }\n.ax-accordion__panel-inner { min-height: 0; }\n.ax-accordion__body { padding: 0 4px 18px; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); max-width: 64ch; }\n@media (prefers-reduced-motion: reduce) { .ax-accordion__panel { transition: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-accordion-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-accordion-css\";\n  s.textContent = AX_ACCORDION_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Accordion({ items = [], multiple = false, defaultOpen = [], className = \"\", ...rest }) {\n  const [open, setOpen] = useState(new Set(defaultOpen));\n  const toggle = (id) => {\n    setOpen((prev) => {\n      const next = new Set(multiple ? prev : []);\n      if (prev.has(id)) next.delete(id);\n      else next.add(id);\n      return next;\n    });\n  };\n  return (\n    <div className={[\"ax-accordion\", className].filter(Boolean).join(\" \")} {...rest}>\n      {items.map((it, i) => {\n        const id = it.id || String(i);\n        const isOpen = open.has(id);\n        return (\n          <div key={id} className={\"ax-accordion__item\" + (isOpen ? \" ax-accordion__item--open\" : \"\")}>\n            <button className=\"ax-accordion__trigger\" aria-expanded={isOpen} onClick={() => toggle(id)}>\n              <span className=\"ax-accordion__label\">{it.title}</span>\n              <span className=\"ax-accordion__icon\"></span>\n            </button>\n            <div className=\"ax-accordion__panel\">\n              <div className=\"ax-accordion__panel-inner\">\n                <div className=\"ax-accordion__body\">{it.content}</div>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB;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;AA2BzB,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,QAAQ,CAAA,GAAI,WAAW,OAAO,cAAc,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AACrG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,IAAI,IAAI,WAAW,CAAC;AACrD,QAAM,SAAS,CAAC,OAAO;AACrB,YAAQ,CAAC,SAAS;AAChB,YAAM,OAAO,IAAI,IAAI,WAAW,OAAO,CAAA,CAAE;AACzC,UAAI,KAAK,IAAI,EAAE,EAAG,MAAK,OAAO,EAAE;AAAA,UAC3B,MAAK,IAAI,EAAE;AAChB,aAAO;AAAA,IACT,CAAC;AAAA,EACH;AACA,6BACG,OAAA,EAAI,WAAW,CAAC,gBAAgB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,gBAAM,IAAI,CAAC,IAAI,MAAM;AACpB,UAAM,KAAK,GAAG,MAAM,OAAO,CAAC;AAC5B,UAAM,SAAS,KAAK,IAAI,EAAE;AAC1B,gCACG,OAAA,EAAa,WAAW,wBAAwB,SAAS,8BAA8B,KACtF,UAAA;AAAA,MAAA,qBAAC,UAAA,EAAO,WAAU,yBAAwB,iBAAe,QAAQ,SAAS,MAAM,OAAO,EAAE,GACvF,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,uBAAuB,UAAA,GAAG,OAAM;AAAA,QAChD,oBAAC,QAAA,EAAK,WAAU,qBAAA,CAAqB;AAAA,MAAA,GACvC;AAAA,MACA,oBAAC,OAAA,EAAI,WAAU,uBACb,8BAAC,OAAA,EAAI,WAAU,6BACb,UAAA,oBAAC,SAAI,WAAU,sBAAsB,UAAA,GAAG,SAAQ,GAClD,EAAA,CACF;AAAA,IAAA,EAAA,GATQ,EAUV;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

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

@@ -0,0 +1,14 @@
+/**
+ * Square avatar (radius-2) with mono initials fallback.
+ */
+export interface AvatarProps {
+  /** Used for initials + title attr. */
+  name?: string;
+  /** Image url; omit for initials. */
+  src?: string;
+  /** 24 / 32 / 44px. @default "md" */
+  size?: "sm" | "md" | "lg";
+  /** Inverted fill (used for the Agentaily assistant). @default false */
+  solid?: boolean;
+}
+export declare function Avatar(props: AvatarProps): JSX.Element;

package/dist/components/display/Avatar.js

@@ -0,0 +1,41 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_AVATAR_CSS = `
+.ax-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  flex: none; overflow: hidden;
+  background: var(--surface-raised); border: 1px solid var(--border-default);
+  border-radius: var(--radius-2); color: var(--text-muted);
+  font-family: var(--font-mono); font-weight: var(--weight-medium);
+}
+.ax-avatar--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.ax-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.ax-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
+.ax-avatar--md { width: 32px; height: 32px; font-size: 12px; }
+.ax-avatar--lg { width: 44px; height: 44px; font-size: var(--text-md); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-avatar-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-avatar-css";
+  s.textContent = AX_AVATAR_CSS;
+  document.head.appendChild(s);
+}
+function initials(name = "") {
+  const parts = name.trim().split(/\s+/);
+  if (!parts[0]) return "?";
+  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function Avatar({ name = "", src, size = "md", solid = false, className = "", ...rest }) {
+  const cls = [
+    "ax-avatar",
+    `ax-avatar--${size}`,
+    solid ? "ax-avatar--solid" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("span", { className: cls, title: name, ...rest, children: src ? /* @__PURE__ */ jsx("img", { src, alt: name }) : initials(name) });
+}
+export {
+  Avatar
+};
+//# sourceMappingURL=Avatar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../../src/components/display/Avatar.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_AVATAR_CSS = `\n.ax-avatar {\n  display: inline-flex; align-items: center; justify-content: center;\n  flex: none; overflow: hidden;\n  background: var(--surface-raised); border: 1px solid var(--border-default);\n  border-radius: var(--radius-2); color: var(--text-muted);\n  font-family: var(--font-mono); font-weight: var(--weight-medium);\n}\n.ax-avatar--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }\n.ax-avatar img { width: 100%; height: 100%; object-fit: cover; }\n.ax-avatar--sm { width: 24px; height: 24px; font-size: 10px; }\n.ax-avatar--md { width: 32px; height: 32px; font-size: 12px; }\n.ax-avatar--lg { width: 44px; height: 44px; font-size: var(--text-md); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-avatar-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-avatar-css\";\n  s.textContent = AX_AVATAR_CSS;\n  document.head.appendChild(s);\n}\n\nfunction initials(name = \"\") {\n  const parts = name.trim().split(/\\s+/);\n  if (!parts[0]) return \"?\";\n  if (parts.length === 1) return parts[0].slice(0, 2).toUpperCase();\n  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();\n}\n\nexport function Avatar({ name = \"\", src, size = \"md\", solid = false, className = \"\", ...rest }) {\n  const cls = [\n    \"ax-avatar\",\n    `ax-avatar--${size}`,\n    solid ? \"ax-avatar--solid\" : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <span className={cls} title={name} {...rest}>\n      {src ? <img src={src} alt={name} /> : initials(name)}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAetB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,eAAe,GAAG;AAChF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,SAAS,SAAS,OAAO,IAAI;AAC3B,QAAM,QAAQ,KAAK,KAAA,EAAO,MAAM,KAAK;AACrC,MAAI,CAAC,MAAM,CAAC,EAAG,QAAO;AACtB,MAAI,MAAM,WAAW,EAAG,QAAO,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,EAAE,YAAA;AACpD,UAAQ,MAAM,CAAC,EAAE,CAAC,IAAI,MAAM,MAAM,SAAS,CAAC,EAAE,CAAC,GAAG,YAAA;AACpD;AAEO,SAAS,OAAO,EAAE,OAAO,IAAI,KAAK,OAAO,MAAM,QAAQ,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC9F,QAAM,MAAM;AAAA,IACV;AAAA,IACA,cAAc,IAAI;AAAA,IAClB,QAAQ,qBAAqB;AAAA,IAC7B;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,6BACG,QAAA,EAAK,WAAW,KAAK,OAAO,MAAO,GAAG,MACpC,UAAA,MAAM,oBAAC,SAAI,KAAU,KAAK,MAAM,IAAK,SAAS,IAAI,GACrD;AAEJ;"}

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

@@ -0,0 +1,11 @@
+/**
+ * Mono uppercase status chip. Semantic colors are used sparingly.
+ */
+export interface BadgeProps {
+  /** @default "neutral" */
+  variant?: "neutral" | "solid" | "outline" | "ok" | "warn" | "danger";
+  /** Leading 6px square status dot. @default false */
+  dot?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Badge(props: BadgeProps): JSX.Element;

package/dist/components/display/Badge.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_BADGE_CSS = `
+.ax-badge {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 2px 7px; border-radius: var(--radius-1);
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
+  text-transform: uppercase; white-space: nowrap;
+  border: 1px solid var(--border-default);
+  background: var(--surface-raised); color: var(--text-muted);
+}
+.ax-badge__dot { width: 6px; height: 6px; border-radius: 1px; background: currentColor; }
+.ax-badge--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
+.ax-badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-body); }
+.ax-badge--ok { background: var(--ok-dim); border-color: transparent; color: var(--ok); }
+.ax-badge--warn { background: var(--warn-dim); border-color: transparent; color: var(--warn); }
+.ax-badge--danger { background: var(--danger-dim); border-color: transparent; color: var(--danger); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-badge-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-badge-css";
+  s.textContent = AX_BADGE_CSS;
+  document.head.appendChild(s);
+}
+function Badge({ variant = "neutral", dot = false, children, className = "", ...rest }) {
+  const cls = [
+    "ax-badge",
+    variant !== "neutral" ? `ax-badge--${variant}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: cls, ...rest, children: [
+    dot ? /* @__PURE__ */ jsx("span", { className: "ax-badge__dot" }) : null,
+    children
+  ] });
+}
+export {
+  Badge
+};
+//# sourceMappingURL=Badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.js","sources":["../../../src/components/display/Badge.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_BADGE_CSS = `\n.ax-badge {\n  display: inline-flex; align-items: center; gap: 6px;\n  padding: 2px 7px; border-radius: var(--radius-1);\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);\n  text-transform: uppercase; white-space: nowrap;\n  border: 1px solid var(--border-default);\n  background: var(--surface-raised); color: var(--text-muted);\n}\n.ax-badge__dot { width: 6px; height: 6px; border-radius: 1px; background: currentColor; }\n.ax-badge--solid { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }\n.ax-badge--outline { background: transparent; border-color: var(--border-strong); color: var(--text-body); }\n.ax-badge--ok { background: var(--ok-dim); border-color: transparent; color: var(--ok); }\n.ax-badge--warn { background: var(--warn-dim); border-color: transparent; color: var(--warn); }\n.ax-badge--danger { background: var(--danger-dim); border-color: transparent; color: var(--danger); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-badge-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-badge-css\";\n  s.textContent = AX_BADGE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Badge({ variant = \"neutral\", dot = false, children, className = \"\", ...rest }) {\n  const cls = [\n    \"ax-badge\",\n    variant !== \"neutral\" ? `ax-badge--${variant}` : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <span className={cls} {...rest}>\n      {dot ? <span className=\"ax-badge__dot\"></span> : null}\n      {children}\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBrB,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,WAAW,MAAM,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC7F,QAAM,MAAM;AAAA,IACV;AAAA,IACA,YAAY,YAAY,aAAa,OAAO,KAAK;AAAA,IACjD;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,SACE,qBAAC,QAAA,EAAK,WAAW,KAAM,GAAG,MACvB,UAAA;AAAA,IAAA,MAAM,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB,IAAU;AAAA,IAChD;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,11 @@
+/**
+ * Mono uppercase breadcrumb trail; last item is the current page.
+ */
+export interface BreadcrumbProps {
+  /** Strings or { id?, label }. */
+  items: Array<string | { id?: string; label: string }>;
+  /** Separator glyph. @default "/" */
+  separator?: string;
+  onNavigate?: (id: string) => void;
+}
+export declare function Breadcrumb(props: BreadcrumbProps): JSX.Element;

package/dist/components/display/Breadcrumb.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+const AX_BREADCRUMB_CSS = `
+.ax-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); }
+.ax-breadcrumb__link {
+  color: var(--text-faint); text-decoration: none; letter-spacing: var(--tracking-label); text-transform: uppercase;
+  transition: color var(--dur-1) var(--ease-out); cursor: pointer; background: none; border: none; padding: 0; font: inherit;
+}
+.ax-breadcrumb__link:hover { color: var(--text-body); }
+.ax-breadcrumb__sep { color: var(--text-faint); opacity: 0.5; }
+.ax-breadcrumb__current { color: var(--text-body); letter-spacing: var(--tracking-label); text-transform: uppercase; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-breadcrumb-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-breadcrumb-css";
+  s.textContent = AX_BREADCRUMB_CSS;
+  document.head.appendChild(s);
+}
+function Breadcrumb({ items = [], separator = "/", onNavigate, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className: ["ax-breadcrumb", className].filter(Boolean).join(" "), ...rest, children: items.map((item, i) => {
+    const it = typeof item === "string" ? { label: item } : item;
+    const last = i === items.length - 1;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      last ? /* @__PURE__ */ jsx("span", { className: "ax-breadcrumb__current", "aria-current": "page", children: it.label }) : /* @__PURE__ */ jsx("button", { className: "ax-breadcrumb__link", onClick: () => onNavigate && onNavigate(it.id ?? it.label), children: it.label }),
+      !last ? /* @__PURE__ */ jsx("span", { className: "ax-breadcrumb__sep", children: separator }) : null
+    ] }, i);
+  }) });
+}
+export {
+  Breadcrumb
+};
+//# sourceMappingURL=Breadcrumb.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Breadcrumb.js","sources":["../../../src/components/display/Breadcrumb.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_BREADCRUMB_CSS = `\n.ax-breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-mono); font-size: var(--text-xs); }\n.ax-breadcrumb__link {\n  color: var(--text-faint); text-decoration: none; letter-spacing: var(--tracking-label); text-transform: uppercase;\n  transition: color var(--dur-1) var(--ease-out); cursor: pointer; background: none; border: none; padding: 0; font: inherit;\n}\n.ax-breadcrumb__link:hover { color: var(--text-body); }\n.ax-breadcrumb__sep { color: var(--text-faint); opacity: 0.5; }\n.ax-breadcrumb__current { color: var(--text-body); letter-spacing: var(--tracking-label); text-transform: uppercase; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-breadcrumb-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-breadcrumb-css\";\n  s.textContent = AX_BREADCRUMB_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Breadcrumb({ items = [], separator = \"/\", onNavigate, className = \"\", ...rest }) {\n  return (\n    <nav aria-label=\"Breadcrumb\" className={[\"ax-breadcrumb\", className].filter(Boolean).join(\" \")} {...rest}>\n      {items.map((item, i) => {\n        const it = typeof item === \"string\" ? { label: item } : item;\n        const last = i === items.length - 1;\n        return (\n          <React.Fragment key={i}>\n            {last\n              ? <span className=\"ax-breadcrumb__current\" aria-current=\"page\">{it.label}</span>\n              : <button className=\"ax-breadcrumb__link\" onClick={() => onNavigate && onNavigate(it.id ?? it.label)}>{it.label}</button>}\n            {!last ? <span className=\"ax-breadcrumb__sep\">{separator}</span> : null}\n          </React.Fragment>\n        );\n      })}\n    </nav>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAW1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,WAAW,EAAE,QAAQ,CAAA,GAAI,YAAY,KAAK,YAAY,YAAY,IAAI,GAAG,QAAQ;AAC/F,SACE,oBAAC,SAAI,cAAW,cAAa,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACjG,UAAA,MAAM,IAAI,CAAC,MAAM,MAAM;AACtB,UAAM,KAAK,OAAO,SAAS,WAAW,EAAE,OAAO,SAAS;AACxD,UAAM,OAAO,MAAM,MAAM,SAAS;AAClC,WACE,qBAAC,MAAM,UAAN,EACE,UAAA;AAAA,MAAA,OACG,oBAAC,UAAK,WAAU,0BAAyB,gBAAa,QAAQ,UAAA,GAAG,MAAA,CAAM,IACvE,oBAAC,UAAA,EAAO,WAAU,uBAAsB,SAAS,MAAM,cAAc,WAAW,GAAG,MAAM,GAAG,KAAK,GAAI,UAAA,GAAG,MAAA,CAAM;AAAA,MACjH,CAAC,OAAO,oBAAC,UAAK,WAAU,sBAAsB,qBAAU,IAAU;AAAA,IAAA,EAAA,GAJhD,CAKrB;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

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

@@ -0,0 +1,14 @@
+/**
+ * Hairline-bordered surface. ticks adds Agentaily's corner-tick frame motif.
+ */
+export interface CardProps {
+  /** Mono uppercase eyebrow above the title. */
+  eyebrow?: string;
+  title?: string;
+  /** Inner padding. @default "md" */
+  padding?: "none" | "md" | "lg";
+  /** Draw corner ticks on opposite corners. @default false */
+  ticks?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Card(props: CardProps): JSX.Element;

package/dist/components/display/Card.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_CARD_CSS = `
+.ax-card {
+  position: relative;
+  background: var(--surface-card);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-3);
+}
+.ax-card--pad-md { padding: var(--space-5); }
+.ax-card--pad-lg { padding: var(--space-8); }
+.ax-card--pad-none { padding: 0; }
+.ax-card__eyebrow {
+  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);
+  margin: 0 0 var(--space-2);
+}
+.ax-card__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 var(--space-3);
+}
+.ax-card--ticks::before, .ax-card--ticks::after {
+  content: ""; position: absolute; width: 9px; height: 9px;
+  border-color: var(--text-faint); border-style: solid;
+}
+.ax-card--ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }
+.ax-card--ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-card-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-card-css";
+  s.textContent = AX_CARD_CSS;
+  document.head.appendChild(s);
+}
+function Card({
+  eyebrow,
+  title,
+  padding = "md",
+  ticks = false,
+  children,
+  className = "",
+  ...rest
+}) {
+  const cls = [
+    "ax-card",
+    `ax-card--pad-${padding}`,
+    ticks ? "ax-card--ticks" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cls, ...rest, children: [
+    eyebrow ? /* @__PURE__ */ jsx("p", { className: "ax-card__eyebrow", children: eyebrow }) : null,
+    title ? /* @__PURE__ */ jsx("h3", { className: "ax-card__title", children: title }) : null,
+    children
+  ] });
+}
+export {
+  Card
+};
+//# sourceMappingURL=Card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sources":["../../../src/components/display/Card.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_CARD_CSS = `\n.ax-card {\n  position: relative;\n  background: var(--surface-card);\n  border: 1px solid var(--border-default);\n  border-radius: var(--radius-3);\n}\n.ax-card--pad-md { padding: var(--space-5); }\n.ax-card--pad-lg { padding: var(--space-8); }\n.ax-card--pad-none { padding: 0; }\n.ax-card__eyebrow {\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);\n  text-transform: uppercase; color: var(--text-faint);\n  margin: 0 0 var(--space-2);\n}\n.ax-card__title {\n  font-family: var(--font-display); font-size: var(--text-lg);\n  font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight);\n  color: var(--text-body); margin: 0 0 var(--space-3);\n}\n.ax-card--ticks::before, .ax-card--ticks::after {\n  content: \"\"; position: absolute; width: 9px; height: 9px;\n  border-color: var(--text-faint); border-style: solid;\n}\n.ax-card--ticks::before { top: -1px; left: -1px; border-width: 1px 0 0 1px; }\n.ax-card--ticks::after { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-card-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-card-css\";\n  s.textContent = AX_CARD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Card({\n  eyebrow,\n  title,\n  padding = \"md\",\n  ticks = false,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const cls = [\n    \"ax-card\",\n    `ax-card--pad-${padding}`,\n    ticks ? \"ax-card--ticks\" : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <div className={cls} {...rest}>\n      {eyebrow ? <p className=\"ax-card__eyebrow\">{eyebrow}</p> : null}\n      {title ? <h3 className=\"ax-card__title\">{title}</h3> : null}\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BpB,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;AAAA,EACnB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM;AAAA,IACV;AAAA,IACA,gBAAgB,OAAO;AAAA,IACvB,QAAQ,mBAAmB;AAAA,IAC3B;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,SACE,qBAAC,OAAA,EAAI,WAAW,KAAM,GAAG,MACtB,UAAA;AAAA,IAAA,UAAU,oBAAC,KAAA,EAAE,WAAU,oBAAoB,mBAAQ,IAAO;AAAA,IAC1D,QAAQ,oBAAC,MAAA,EAAG,WAAU,kBAAkB,iBAAM,IAAQ;AAAA,IACtD;AAAA,EAAA,GACH;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Horizontal slide carousel with arrows and dot pagination. Each child is a slide. */
+export interface CarouselProps { dots?: boolean; arrows?: boolean; children?: React.ReactNode; }
+export declare function Carousel(props: CarouselProps): JSX.Element;

package/dist/components/display/Carousel.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { Children, useState } from "react";
+const AX_CAROUSEL_CSS = `
+.ax-carousel { position: relative; }
+.ax-carousel__viewport { overflow: hidden; border-radius: var(--radius-3); }
+.ax-carousel__track { display: flex; transition: transform var(--dur-3) var(--ease-out); }
+.ax-carousel__slide { flex: 0 0 100%; min-width: 0; }
+.ax-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); color: var(--text-body); box-shadow: var(--shadow-1); transition: background var(--dur-1) var(--ease-out); }
+.ax-carousel__btn:hover:not(:disabled) { background: var(--surface-raised); }
+.ax-carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; }
+.ax-carousel__btn--prev { left: 10px; }
+.ax-carousel__btn--next { right: 10px; }
+.ax-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
+.ax-carousel__dot { width: 6px; height: 6px; border-radius: 1px; background: var(--border-strong); border: none; cursor: pointer; padding: 0; transition: background var(--dur-1) var(--ease-out), width var(--dur-1) var(--ease-out); }
+.ax-carousel__dot--active { background: var(--text-body); width: 16px; }
+@media (prefers-reduced-motion: reduce) { .ax-carousel__track { transition: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-carousel-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-carousel-css";
+  s.textContent = AX_CAROUSEL_CSS;
+  document.head.appendChild(s);
+}
+function Carousel({ children, dots = true, arrows = true, className = "", ...rest }) {
+  const slides = Children.toArray(children);
+  const [idx, setIdx] = useState(0);
+  const go = (i) => setIdx(Math.max(0, Math.min(slides.length - 1, i)));
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-carousel", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "ax-carousel__viewport", children: /* @__PURE__ */ jsx("div", { className: "ax-carousel__track", style: { transform: `translateX(-${idx * 100}%)` }, children: slides.map((s, i) => /* @__PURE__ */ jsx("div", { className: "ax-carousel__slide", children: s }, i)) }) }),
+    arrows && slides.length > 1 ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx("button", { className: "ax-carousel__btn ax-carousel__btn--prev", disabled: idx === 0, onClick: () => go(idx - 1), "aria-label": "Previous", children: "‹" }),
+      /* @__PURE__ */ jsx("button", { className: "ax-carousel__btn ax-carousel__btn--next", disabled: idx === slides.length - 1, onClick: () => go(idx + 1), "aria-label": "Next", children: "›" })
+    ] }) : null,
+    dots && slides.length > 1 ? /* @__PURE__ */ jsx("div", { className: "ax-carousel__dots", children: slides.map((_, i) => /* @__PURE__ */ jsx("button", { className: "ax-carousel__dot" + (i === idx ? " ax-carousel__dot--active" : ""), onClick: () => go(i), "aria-label": "Go to slide " + (i + 1) }, i)) }) : null
+  ] });
+}
+export {
+  Carousel
+};
+//# sourceMappingURL=Carousel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/display/Carousel.jsx"],"sourcesContent":["import React, { useState, Children } from \"react\";\n\nconst AX_CAROUSEL_CSS = `\n.ax-carousel { position: relative; }\n.ax-carousel__viewport { overflow: hidden; border-radius: var(--radius-3); }\n.ax-carousel__track { display: flex; transition: transform var(--dur-3) var(--ease-out); }\n.ax-carousel__slide { flex: 0 0 100%; min-width: 0; }\n.ax-carousel__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-2); color: var(--text-body); box-shadow: var(--shadow-1); transition: background var(--dur-1) var(--ease-out); }\n.ax-carousel__btn:hover:not(:disabled) { background: var(--surface-raised); }\n.ax-carousel__btn:disabled { opacity: 0.3; cursor: not-allowed; }\n.ax-carousel__btn--prev { left: 10px; }\n.ax-carousel__btn--next { right: 10px; }\n.ax-carousel__dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }\n.ax-carousel__dot { width: 6px; height: 6px; border-radius: 1px; background: var(--border-strong); border: none; cursor: pointer; padding: 0; transition: background var(--dur-1) var(--ease-out), width var(--dur-1) var(--ease-out); }\n.ax-carousel__dot--active { background: var(--text-body); width: 16px; }\n@media (prefers-reduced-motion: reduce) { .ax-carousel__track { transition: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-carousel-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-carousel-css\";\n  s.textContent = AX_CAROUSEL_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Carousel({ children, dots = true, arrows = true, className = \"\", ...rest }) {\n  const slides = Children.toArray(children);\n  const [idx, setIdx] = useState(0);\n  const go = (i) => setIdx(Math.max(0, Math.min(slides.length - 1, i)));\n  return (\n    <div className={[\"ax-carousel\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-carousel__viewport\">\n        <div className=\"ax-carousel__track\" style={{ transform: `translateX(-${idx * 100}%)` }}>\n          {slides.map((s, i) => <div className=\"ax-carousel__slide\" key={i}>{s}</div>)}\n        </div>\n      </div>\n      {arrows && slides.length > 1 ? (\n        <React.Fragment>\n          <button className=\"ax-carousel__btn ax-carousel__btn--prev\" disabled={idx === 0} onClick={() => go(idx - 1)} aria-label=\"Previous\">‹</button>\n          <button className=\"ax-carousel__btn ax-carousel__btn--next\" disabled={idx === slides.length - 1} onClick={() => go(idx + 1)} aria-label=\"Next\">›</button>\n        </React.Fragment>\n      ) : null}\n      {dots && slides.length > 1 ? (\n        <div className=\"ax-carousel__dots\">\n          {slides.map((_, i) => <button key={i} className={\"ax-carousel__dot\" + (i === idx ? \" ax-carousel__dot--active\" : \"\")} onClick={() => go(i)} aria-label={\"Go to slide \" + (i + 1)}></button>)}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBxB,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,OAAO,MAAM,SAAS,MAAM,YAAY,IAAI,GAAG,QAAQ;AAC1F,QAAM,SAAS,SAAS,QAAQ,QAAQ;AACxC,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,CAAC;AAChC,QAAM,KAAK,CAAC,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,SAAS,GAAG,CAAC,CAAC,CAAC;AACpE,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,yBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,sBAAqB,OAAO,EAAE,WAAW,eAAe,MAAM,GAAG,KAAA,GAC7E,UAAA,OAAO,IAAI,CAAC,GAAG,MAAM,oBAAC,OAAA,EAAI,WAAU,sBAA8B,UAAA,EAAA,GAAJ,CAAM,CAAM,EAAA,CAC7E,GACF;AAAA,IACC,UAAU,OAAO,SAAS,IACzB,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,MAAA,oBAAC,UAAA,EAAO,WAAU,2CAA0C,UAAU,QAAQ,GAAG,SAAS,MAAM,GAAG,MAAM,CAAC,GAAG,cAAW,YAAW,UAAA,KAAC;AAAA,0BACnI,UAAA,EAAO,WAAU,2CAA0C,UAAU,QAAQ,OAAO,SAAS,GAAG,SAAS,MAAM,GAAG,MAAM,CAAC,GAAG,cAAW,QAAO,UAAA,IAAA,CAAC;AAAA,IAAA,EAAA,CAClJ,IACE;AAAA,IACH,QAAQ,OAAO,SAAS,wBACtB,OAAA,EAAI,WAAU,qBACZ,UAAA,OAAO,IAAI,CAAC,GAAG,0BAAO,UAAA,EAAe,WAAW,sBAAsB,MAAM,MAAM,8BAA8B,KAAK,SAAS,MAAM,GAAG,CAAC,GAAG,cAAY,kBAAkB,IAAI,GAAA,GAA3I,CAA+I,CAAS,GAC7L,IACE;AAAA,EAAA,GACN;AAEJ;"}

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

@@ -0,0 +1,7 @@
+/** Minimal mono charts. BarChart + LineChart. */
+export interface BarDatum { value: number; label?: string; muted?: boolean; }
+export interface BarChartProps { data: Array<number | BarDatum>; title?: string; }
+export declare function BarChart(props: BarChartProps): JSX.Element;
+export interface LineDatum { value: number; label?: string; }
+export interface LineChartProps { data: Array<number | LineDatum>; title?: string; height?: number; }
+export declare function LineChart(props: LineChartProps): JSX.Element;

package/dist/components/display/Chart.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_CHART_CSS = `
+.ax-chart { font-family: var(--font-mono); }
+.ax-chart__title { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }
+.ax-barchart { display: flex; align-items: flex-end; gap: 8px; height: 140px; }
+.ax-barchart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
+.ax-barchart__bar { width: 100%; background: var(--text-body); border-radius: var(--radius-1) var(--radius-1) 0 0; transition: height var(--dur-3) var(--ease-out); min-height: 2px; }
+.ax-barchart__col--accent .ax-barchart__bar { background: var(--text-faint); }
+.ax-barchart__val { font-size: 10px; color: var(--text-muted); }
+.ax-barchart__label { font-size: 10px; color: var(--text-faint); white-space: nowrap; }
+.ax-linechart { position: relative; }
+.ax-linechart svg { width: 100%; display: block; overflow: visible; }
+.ax-linechart__labels { display: flex; justify-content: space-between; margin-top: 8px; }
+.ax-linechart__label { font-size: 10px; color: var(--text-faint); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-chart-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-chart-css";
+  s.textContent = AX_CHART_CSS;
+  document.head.appendChild(s);
+}
+function BarChart({ data = [], title, className = "", ...rest }) {
+  const max = Math.max(...data.map((d) => typeof d === "number" ? d : d.value), 1);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-chart", className].filter(Boolean).join(" "), ...rest, children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "ax-chart__title", children: title }) : null,
+    /* @__PURE__ */ jsx("div", { className: "ax-barchart", children: data.map((d, i) => {
+      const item = typeof d === "number" ? { value: d } : d;
+      return /* @__PURE__ */ jsxs("div", { className: "ax-barchart__col" + (item.muted ? " ax-barchart__col--accent" : ""), children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-barchart__val", children: item.value }),
+        /* @__PURE__ */ jsx("span", { className: "ax-barchart__bar", style: { height: item.value / max * 100 + "%" } }),
+        item.label ? /* @__PURE__ */ jsx("span", { className: "ax-barchart__label", children: item.label }) : null
+      ] }, i);
+    }) })
+  ] });
+}
+function LineChart({ data = [], title, height = 120, className = "", ...rest }) {
+  const values = data.map((d) => typeof d === "number" ? d : d.value);
+  const max = Math.max(...values, 1);
+  const min = Math.min(...values, 0);
+  const range = max - min || 1;
+  const w = 100, h = height;
+  const pts = values.map((v, i) => {
+    const x = i / (values.length - 1 || 1) * w;
+    const y = h - (v - min) / range * h;
+    return [x, y];
+  });
+  const path = pts.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(2) + " " + p[1].toFixed(2)).join(" ");
+  const area = path + ` L ${w} ${h} L 0 ${h} Z`;
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-chart ax-linechart", className].filter(Boolean).join(" "), ...rest, children: [
+    title ? /* @__PURE__ */ jsx("div", { className: "ax-chart__title", children: title }) : null,
+    /* @__PURE__ */ jsxs("svg", { viewBox: `0 0 ${w} ${h}`, preserveAspectRatio: "none", style: { height }, children: [
+      /* @__PURE__ */ jsx("path", { d: area, fill: "var(--surface-raised)", opacity: "0.6" }),
+      /* @__PURE__ */ jsx("path", { d: path, fill: "none", stroke: "var(--text-body)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }),
+      pts.map((p, i) => /* @__PURE__ */ jsx("circle", { cx: p[0], cy: p[1], r: "2", fill: "var(--surface-page)", stroke: "var(--text-body)", strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }, i))
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ax-linechart__labels", children: data.map((d, i) => /* @__PURE__ */ jsx("span", { className: "ax-linechart__label", children: typeof d === "number" ? "" : d.label }, i)) })
+  ] });
+}
+function Chart({ type = "bar", ...props }) {
+  return type === "line" ? /* @__PURE__ */ jsx(LineChart, { ...props }) : /* @__PURE__ */ jsx(BarChart, { ...props });
+}
+export {
+  BarChart,
+  Chart,
+  LineChart
+};
+//# sourceMappingURL=Chart.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chart.js","sources":["../../../src/components/display/Chart.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_CHART_CSS = `\n.ax-chart { font-family: var(--font-mono); }\n.ax-chart__title { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: 12px; }\n.ax-barchart { display: flex; align-items: flex-end; gap: 8px; height: 140px; }\n.ax-barchart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }\n.ax-barchart__bar { width: 100%; background: var(--text-body); border-radius: var(--radius-1) var(--radius-1) 0 0; transition: height var(--dur-3) var(--ease-out); min-height: 2px; }\n.ax-barchart__col--accent .ax-barchart__bar { background: var(--text-faint); }\n.ax-barchart__val { font-size: 10px; color: var(--text-muted); }\n.ax-barchart__label { font-size: 10px; color: var(--text-faint); white-space: nowrap; }\n.ax-linechart { position: relative; }\n.ax-linechart svg { width: 100%; display: block; overflow: visible; }\n.ax-linechart__labels { display: flex; justify-content: space-between; margin-top: 8px; }\n.ax-linechart__label { font-size: 10px; color: var(--text-faint); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-chart-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-chart-css\";\n  s.textContent = AX_CHART_CSS;\n  document.head.appendChild(s);\n}\n\nexport function BarChart({ data = [], title, className = \"\", ...rest }) {\n  const max = Math.max(...data.map((d) => (typeof d === \"number\" ? d : d.value)), 1);\n  return (\n    <div className={[\"ax-chart\", className].filter(Boolean).join(\" \")} {...rest}>\n      {title ? <div className=\"ax-chart__title\">{title}</div> : null}\n      <div className=\"ax-barchart\">\n        {data.map((d, i) => {\n          const item = typeof d === \"number\" ? { value: d } : d;\n          return (\n            <div key={i} className={\"ax-barchart__col\" + (item.muted ? \" ax-barchart__col--accent\" : \"\")}>\n              <span className=\"ax-barchart__val\">{item.value}</span>\n              <span className=\"ax-barchart__bar\" style={{ height: (item.value / max) * 100 + \"%\" }}></span>\n              {item.label ? <span className=\"ax-barchart__label\">{item.label}</span> : null}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n\nexport function LineChart({ data = [], title, height = 120, className = \"\", ...rest }) {  const values = data.map((d) => (typeof d === \"number\" ? d : d.value));\n  const max = Math.max(...values, 1);\n  const min = Math.min(...values, 0);\n  const range = max - min || 1;\n  const w = 100, h = height;\n  const pts = values.map((v, i) => {\n    const x = (i / (values.length - 1 || 1)) * w;\n    const y = h - ((v - min) / range) * h;\n    return [x, y];\n  });\n  const path = pts.map((p, i) => (i === 0 ? \"M\" : \"L\") + p[0].toFixed(2) + \" \" + p[1].toFixed(2)).join(\" \");\n  const area = path + ` L ${w} ${h} L 0 ${h} Z`;\n  return (\n    <div className={[\"ax-chart ax-linechart\", className].filter(Boolean).join(\" \")} {...rest}>\n      {title ? <div className=\"ax-chart__title\">{title}</div> : null}\n      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio=\"none\" style={{ height }}>\n        <path d={area} fill=\"var(--surface-raised)\" opacity=\"0.6\"></path>\n        <path d={path} fill=\"none\" stroke=\"var(--text-body)\" strokeWidth=\"1.5\" vectorEffect=\"non-scaling-stroke\"></path>\n        {pts.map((p, i) => <circle key={i} cx={p[0]} cy={p[1]} r=\"2\" fill=\"var(--surface-page)\" stroke=\"var(--text-body)\" strokeWidth=\"1.5\" vectorEffect=\"non-scaling-stroke\"></circle>)}\n      </svg>\n      <div className=\"ax-linechart__labels\">\n        {data.map((d, i) => <span key={i} className=\"ax-linechart__label\">{typeof d === \"number\" ? \"\" : d.label}</span>)}\n      </div>\n    </div>\n  );\n}\n\n/** Namesake convenience: <Chart type=\"bar|line\" …>. BarChart / LineChart remain the primary exports. */\nexport function Chart({ type = \"bar\", ...props }) {\n  return type === \"line\" ? <LineChart {...props} /> : <BarChart {...props} />;\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+/** Single expand/collapse disclosure with a chevron. */
+export interface CollapsibleProps { label: React.ReactNode; defaultOpen?: boolean; children?: React.ReactNode; }
+export declare function Collapsible(props: CollapsibleProps): JSX.Element;

package/dist/components/display/Collapsible.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_COLLAPSIBLE_CSS = `
+.ax-collapsible { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); }
+.ax-collapsible__trigger { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; cursor: pointer; text-align: left; padding: 12px 14px; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); }
+.ax-collapsible__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-3); }
+.ax-collapsible__label { flex: 1; }
+.ax-collapsible__chev { width: 14px; height: 14px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }
+.ax-collapsible--open .ax-collapsible__chev { transform: rotate(180deg); }
+.ax-collapsible__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }
+.ax-collapsible--open .ax-collapsible__panel { grid-template-rows: 1fr; }
+.ax-collapsible__inner { min-height: 0; }
+.ax-collapsible__body { padding: 0 14px 14px; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); }
+@media (prefers-reduced-motion: reduce) { .ax-collapsible__panel { transition: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-collapsible-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-collapsible-css";
+  s.textContent = AX_COLLAPSIBLE_CSS;
+  document.head.appendChild(s);
+}
+const Chev = /* @__PURE__ */ jsx("svg", { className: "ax-collapsible__chev", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
+function Collapsible({ label, defaultOpen = false, children, className = "", ...rest }) {
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-collapsible", open ? "ax-collapsible--open" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-collapsible__trigger", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-collapsible__label", children: label }),
+      Chev
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ax-collapsible__panel", children: /* @__PURE__ */ jsx("div", { className: "ax-collapsible__inner", children: /* @__PURE__ */ jsx("div", { className: "ax-collapsible__body", children }) }) })
+  ] });
+}
+export {
+  Collapsible
+};
+//# sourceMappingURL=Collapsible.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Collapsible.js","sources":["../../../src/components/display/Collapsible.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_COLLAPSIBLE_CSS = `\n.ax-collapsible { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); }\n.ax-collapsible__trigger { display: flex; align-items: center; gap: 10px; width: 100%; appearance: none; background: none; border: none; cursor: pointer; text-align: left; padding: 12px 14px; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); }\n.ax-collapsible__trigger:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-3); }\n.ax-collapsible__label { flex: 1; }\n.ax-collapsible__chev { width: 14px; height: 14px; color: var(--text-faint); transition: transform var(--dur-2) var(--ease-out); }\n.ax-collapsible--open .ax-collapsible__chev { transform: rotate(180deg); }\n.ax-collapsible__panel { overflow: hidden; display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-2) var(--ease-out); }\n.ax-collapsible--open .ax-collapsible__panel { grid-template-rows: 1fr; }\n.ax-collapsible__inner { min-height: 0; }\n.ax-collapsible__body { padding: 0 14px 14px; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-body); }\n@media (prefers-reduced-motion: reduce) { .ax-collapsible__panel { transition: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-collapsible-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-collapsible-css\";\n  s.textContent = AX_COLLAPSIBLE_CSS;\n  document.head.appendChild(s);\n}\n\nconst Chev = <svg className=\"ax-collapsible__chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m6 9 6 6 6-6\"></path></svg>;\n\nexport function Collapsible({ label, defaultOpen = false, children, className = \"\", ...rest }) {\n  const [open, setOpen] = useState(defaultOpen);\n  return (\n    <div className={[\"ax-collapsible\", open ? \"ax-collapsible--open\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <button className=\"ax-collapsible__trigger\" aria-expanded={open} onClick={() => setOpen((o) => !o)}>\n        <span className=\"ax-collapsible__label\">{label}</span>\n        {Chev}\n      </button>\n      <div className=\"ax-collapsible__panel\">\n        <div className=\"ax-collapsible__inner\">\n          <div className=\"ax-collapsible__body\">{children}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAc3B,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,2BAAQ,OAAA,EAAI,WAAU,wBAAuB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,eAAA,CAAe,EAAA,CAAO;AAE/L,SAAS,YAAY,EAAE,OAAO,cAAc,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC7F,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,8BACG,OAAA,EAAI,WAAW,CAAC,kBAAkB,OAAO,yBAAyB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC/G,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,2BAA0B,iBAAe,MAAM,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GAC/F,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,yBAAyB,UAAA,OAAM;AAAA,MAC9C;AAAA,IAAA,GACH;AAAA,IACA,oBAAC,OAAA,EAAI,WAAU,yBACb,8BAAC,OAAA,EAAI,WAAU,yBACb,UAAA,oBAAC,OAAA,EAAI,WAAU,wBAAwB,SAAA,CAAS,GAClD,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,4 @@
+/** Sortable, optionally paginated table. Click headers to sort. */
+export interface DataColumn { key: string; label?: string; numeric?: boolean; sortable?: boolean; render?: (value: any, row: any) => React.ReactNode; }
+export interface DataTableProps { columns: Array<string | DataColumn>; rows: Array<Record<string, any>>; pageSize?: number; caption?: string; }
+export declare function DataTable(props: DataTableProps): JSX.Element;