@agentaily/design-system 0.1.0

package/dist/components/inputs/RadioGroup.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_RADIO_CSS = `
+.ax-radiogroup { display: flex; flex-direction: column; gap: 10px; }
+.ax-radiogroup--row { flex-direction: row; gap: 18px; flex-wrap: wrap; }
+.ax-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
+.ax-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
+.ax-radio__dot {
+  width: 16px; height: 16px; flex: none; position: relative;
+  background: var(--surface-card); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-1);
+  transition: border-color var(--dur-1) var(--ease-out);
+}
+.ax-radio__dot::after {
+  content: ""; position: absolute; inset: 3px; background: var(--accent);
+  border-radius: 1px; opacity: 0; transform: scale(0.4);
+  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
+}
+.ax-radio input:checked + .ax-radio__dot { border-color: var(--accent); }
+.ax-radio input:checked + .ax-radio__dot::after { opacity: 1; transform: scale(1); }
+.ax-radio input:focus-visible + .ax-radio__dot { box-shadow: var(--ring); }
+.ax-radio input:disabled + .ax-radio__dot { opacity: 0.4; }
+.ax-radio__label { font-size: var(--text-sm); color: var(--text-body); }
+.ax-radio__desc { display: block; font-size: var(--text-xs); color: var(--text-faint); margin-top: 1px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-radio-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-radio-css";
+  s.textContent = AX_RADIO_CSS;
+  document.head.appendChild(s);
+}
+function RadioGroup({ name, value, options = [], onChange, row = false, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", className: ["ax-radiogroup", row ? "ax-radiogroup--row" : "", className].filter(Boolean).join(" "), ...rest, children: options.map((opt) => {
+    const o = typeof opt === "string" ? { value: opt, label: opt } : opt;
+    return /* @__PURE__ */ jsxs("label", { className: "ax-radio", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "radio",
+          name,
+          value: o.value,
+          checked: value === o.value,
+          disabled: o.disabled,
+          onChange: () => onChange && onChange(o.value)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ax-radio__dot" }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-radio__label", children: [
+        o.label,
+        o.description ? /* @__PURE__ */ jsx("span", { className: "ax-radio__desc", children: o.description }) : null
+      ] })
+    ] }, o.value);
+  }) });
+}
+export {
+  RadioGroup
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/inputs/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/inputs/RadioGroup.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_RADIO_CSS = `\n.ax-radiogroup { display: flex; flex-direction: column; gap: 10px; }\n.ax-radiogroup--row { flex-direction: row; gap: 18px; flex-wrap: wrap; }\n.ax-radio { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }\n.ax-radio input { position: absolute; opacity: 0; width: 0; height: 0; }\n.ax-radio__dot {\n  width: 16px; height: 16px; flex: none; position: relative;\n  background: var(--surface-card); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-1);\n  transition: border-color var(--dur-1) var(--ease-out);\n}\n.ax-radio__dot::after {\n  content: \"\"; position: absolute; inset: 3px; background: var(--accent);\n  border-radius: 1px; opacity: 0; transform: scale(0.4);\n  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);\n}\n.ax-radio input:checked + .ax-radio__dot { border-color: var(--accent); }\n.ax-radio input:checked + .ax-radio__dot::after { opacity: 1; transform: scale(1); }\n.ax-radio input:focus-visible + .ax-radio__dot { box-shadow: var(--ring); }\n.ax-radio input:disabled + .ax-radio__dot { opacity: 0.4; }\n.ax-radio__label { font-size: var(--text-sm); color: var(--text-body); }\n.ax-radio__desc { display: block; font-size: var(--text-xs); color: var(--text-faint); margin-top: 1px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-radio-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-radio-css\";\n  s.textContent = AX_RADIO_CSS;\n  document.head.appendChild(s);\n}\n\nexport function RadioGroup({ name, value, options = [], onChange, row = false, className = \"\", ...rest }) {\n  return (\n    <div role=\"radiogroup\" className={[\"ax-radiogroup\", row ? \"ax-radiogroup--row\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {options.map((opt) => {\n        const o = typeof opt === \"string\" ? { value: opt, label: opt } : opt;\n        return (\n          <label className=\"ax-radio\" key={o.value}>\n            <input\n              type=\"radio\"\n              name={name}\n              value={o.value}\n              checked={value === o.value}\n              disabled={o.disabled}\n              onChange={() => onChange && onChange(o.value)}\n            />\n            <span className=\"ax-radio__dot\"></span>\n            <span className=\"ax-radio__label\">\n              {o.label}\n              {o.description ? <span className=\"ax-radio__desc\">{o.description}</span> : null}\n            </span>\n          </label>\n        );\n      })}\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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBrB,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,WAAW,EAAE,MAAM,OAAO,UAAU,CAAA,GAAI,UAAU,MAAM,OAAO,YAAY,IAAI,GAAG,QAAQ;AACxG,SACE,oBAAC,SAAI,MAAK,cAAa,WAAW,CAAC,iBAAiB,MAAM,uBAAuB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC5H,UAAA,QAAQ,IAAI,CAAC,QAAQ;AACpB,UAAM,IAAI,OAAO,QAAQ,WAAW,EAAE,OAAO,KAAK,OAAO,IAAA,IAAQ;AACjE,WACE,qBAAC,SAAA,EAAM,WAAU,YACf,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA,OAAO,EAAE;AAAA,UACT,SAAS,UAAU,EAAE;AAAA,UACrB,UAAU,EAAE;AAAA,UACZ,UAAU,MAAM,YAAY,SAAS,EAAE,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAE9C,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB;AAAA,MAChC,qBAAC,QAAA,EAAK,WAAU,mBACb,UAAA;AAAA,QAAA,EAAE;AAAA,QACF,EAAE,cAAc,oBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA,EAAE,aAAY,IAAU;AAAA,MAAA,EAAA,CAC7E;AAAA,IAAA,EAAA,GAb+B,EAAE,KAcnC;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/components/inputs/Select.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Native select styled to match Input, with a drawn chevron.
+ */
+export interface SelectProps {
+  label?: string;
+  /** Strings or { value, label } objects. */
+  options: Array<string | { value: string; label: string }>;
+  value?: string;
+  disabled?: boolean;
+  onChange?: (e: any) => void;
+}
+export declare function Select(props: SelectProps): JSX.Element;

package/dist/components/inputs/Select.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_SELECT_CSS = `
+.ax-select-wrap { position: relative; display: flex; }
+@layer ax-base {
+  .ax-select {
+    appearance: none; height: 36px; padding: 0 32px 0 12px; width: 100%;
+    background: var(--surface-card); color: var(--text-body);
+    border: 1px solid var(--border-default); border-radius: var(--radius-2);
+    font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer;
+    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
+  }
+}
+@layer ax-hover {
+  .ax-select:hover { border-color: var(--border-strong); }
+}
+@layer ax-focus {
+  .ax-select:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }
+}
+@layer ax-disabled {
+  .ax-select:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }
+}
+.ax-select-wrap::after {
+  content: ""; position: absolute; right: 12px; top: 50%;
+  width: 7px; height: 7px; pointer-events: none;
+  border-right: 1.5px solid var(--text-faint);
+  border-bottom: 1.5px solid var(--text-faint);
+  transform: translateY(-70%) rotate(45deg);
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-select-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-select-css";
+  s.textContent = AX_SELECT_CSS;
+  document.head.appendChild(s);
+}
+function Select({ label, options = [], className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: "ax-field", children: [
+    label ? /* @__PURE__ */ jsx("span", { className: "ax-field__label", children: label }) : null,
+    /* @__PURE__ */ jsx("span", { className: "ax-select-wrap", children: /* @__PURE__ */ jsx("select", { className: ["ax-select", className].filter(Boolean).join(" "), ...rest, children: options.map((opt) => {
+      const o = typeof opt === "string" ? { value: opt, label: opt } : opt;
+      return /* @__PURE__ */ jsx("option", { value: o.value, children: o.label }, o.value);
+    }) }) })
+  ] });
+}
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/inputs/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../src/components/inputs/Select.jsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"./Input.jsx\"; // ensures shared .ax-field CSS is injected\n\nconst AX_SELECT_CSS = `\n.ax-select-wrap { position: relative; display: flex; }\n@layer ax-base {\n  .ax-select {\n    appearance: none; height: 36px; padding: 0 32px 0 12px; width: 100%;\n    background: var(--surface-card); color: var(--text-body);\n    border: 1px solid var(--border-default); border-radius: var(--radius-2);\n    font-family: var(--font-body); font-size: var(--text-sm); cursor: pointer;\n    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);\n  }\n}\n@layer ax-hover {\n  .ax-select:hover { border-color: var(--border-strong); }\n}\n@layer ax-focus {\n  .ax-select:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n}\n@layer ax-disabled {\n  .ax-select:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }\n}\n.ax-select-wrap::after {\n  content: \"\"; position: absolute; right: 12px; top: 50%;\n  width: 7px; height: 7px; pointer-events: none;\n  border-right: 1.5px solid var(--text-faint);\n  border-bottom: 1.5px solid var(--text-faint);\n  transform: translateY(-70%) rotate(45deg);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-select-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-select-css\";\n  s.textContent = AX_SELECT_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Select({ label, options = [], className = \"\", ...rest }) {\n  return (\n    <label className=\"ax-field\">\n      {label ? <span className=\"ax-field__label\">{label}</span> : null}\n      <span className=\"ax-select-wrap\">\n        <select className={[\"ax-select\", className].filter(Boolean).join(\" \")} {...rest}>\n          {options.map((opt) => {\n            const o = typeof opt === \"string\" ? { value: opt, label: opt } : opt;\n            return <option key={o.value} value={o.value}>{o.label}</option>;\n          })}\n        </select>\n      </span>\n    </label>\n  );\n}\n"],"names":[],"mappings":";;AAGA,MAAM,gBAAgB;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;AA6BtB,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;AAEO,SAAS,OAAO,EAAE,OAAO,UAAU,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AACvE,SACE,qBAAC,SAAA,EAAM,WAAU,YACd,UAAA;AAAA,IAAA,QAAQ,oBAAC,QAAA,EAAK,WAAU,mBAAmB,iBAAM,IAAU;AAAA,IAC5D,oBAAC,UAAK,WAAU,kBACd,8BAAC,UAAA,EAAO,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA,QAAQ,IAAI,CAAC,QAAQ;AACpB,YAAM,IAAI,OAAO,QAAQ,WAAW,EAAE,OAAO,KAAK,OAAO,IAAA,IAAQ;AACjE,aAAO,oBAAC,YAAqB,OAAO,EAAE,OAAQ,UAAA,EAAE,SAA5B,EAAE,KAAgC;AAAA,IACxD,CAAC,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/inputs/Slider.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Single-value range slider with a square thumb and mono value readout.
+ */
+export interface SliderProps {
+  /** Mono uppercase label; shows the live value on the right when set. */
+  label?: string;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Unit appended to the readout, e.g. "%" or "k". */
+  suffix?: string;
+  onChange?: (value: number) => void;
+  disabled?: boolean;
+}
+export declare function Slider(props: SliderProps): JSX.Element;

package/dist/components/inputs/Slider.js

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_SLIDER_CSS = `
+.ax-slider { display: flex; flex-direction: column; gap: 8px; }
+.ax-slider__top { display: flex; align-items: baseline; justify-content: space-between; }
+.ax-slider__val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); }
+.ax-slider__track {
+  position: relative; height: 20px; display: flex; align-items: center; cursor: pointer;
+}
+.ax-slider__rail { position: absolute; left: 0; right: 0; height: 4px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-1); }
+.ax-slider__fill { position: absolute; left: 0; height: 4px; background: var(--accent); border-radius: var(--radius-1); }
+.ax-slider__thumb {
+  position: absolute; width: 14px; height: 14px; margin-left: -7px;
+  background: var(--accent); border: 2px solid var(--surface-page); border-radius: var(--radius-1);
+  box-shadow: 0 0 0 1px var(--border-strong);
+  transition: transform var(--dur-1) var(--ease-out);
+}
+.ax-slider__track:hover .ax-slider__thumb { transform: scale(1.1); }
+.ax-slider input { position: absolute; opacity: 0; width: 100%; height: 20px; margin: 0; cursor: pointer; }
+.ax-slider input:focus-visible + .ax-slider__thumb { box-shadow: var(--ring); }
+.ax-slider input:disabled { cursor: not-allowed; }
+.ax-slider--disabled { opacity: 0.4; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-slider-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-slider-css";
+  s.textContent = AX_SLIDER_CSS;
+  document.head.appendChild(s);
+}
+function Slider({ label, value = 0, min = 0, max = 100, step = 1, suffix = "", onChange, disabled = false, className = "", ...rest }) {
+  const pct = Math.max(0, Math.min(100, (value - min) / (max - min) * 100));
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-slider", disabled ? "ax-slider--disabled" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    label != null ? /* @__PURE__ */ jsxs("div", { className: "ax-slider__top", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-label", children: label }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-slider__val", children: [
+        value,
+        suffix
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ax-slider__track", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-slider__rail" }),
+      /* @__PURE__ */ jsx("span", { className: "ax-slider__fill", style: { width: pct + "%" } }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min,
+          max,
+          step,
+          value,
+          disabled,
+          onChange: (e) => onChange && onChange(Number(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "ax-slider__thumb", style: { left: pct + "%" } })
+    ] })
+  ] });
+}
+export {
+  Slider
+};
+//# sourceMappingURL=Slider.js.map

package/dist/components/inputs/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../../src/components/inputs/Slider.jsx"],"sourcesContent":["import React, { useRef, useCallback } from \"react\";\n\nconst AX_SLIDER_CSS = `\n.ax-slider { display: flex; flex-direction: column; gap: 8px; }\n.ax-slider__top { display: flex; align-items: baseline; justify-content: space-between; }\n.ax-slider__val { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); }\n.ax-slider__track {\n  position: relative; height: 20px; display: flex; align-items: center; cursor: pointer;\n}\n.ax-slider__rail { position: absolute; left: 0; right: 0; height: 4px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-1); }\n.ax-slider__fill { position: absolute; left: 0; height: 4px; background: var(--accent); border-radius: var(--radius-1); }\n.ax-slider__thumb {\n  position: absolute; width: 14px; height: 14px; margin-left: -7px;\n  background: var(--accent); border: 2px solid var(--surface-page); border-radius: var(--radius-1);\n  box-shadow: 0 0 0 1px var(--border-strong);\n  transition: transform var(--dur-1) var(--ease-out);\n}\n.ax-slider__track:hover .ax-slider__thumb { transform: scale(1.1); }\n.ax-slider input { position: absolute; opacity: 0; width: 100%; height: 20px; margin: 0; cursor: pointer; }\n.ax-slider input:focus-visible + .ax-slider__thumb { box-shadow: var(--ring); }\n.ax-slider input:disabled { cursor: not-allowed; }\n.ax-slider--disabled { opacity: 0.4; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-slider-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-slider-css\";\n  s.textContent = AX_SLIDER_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Slider({ label, value = 0, min = 0, max = 100, step = 1, suffix = \"\", onChange, disabled = false, className = \"\", ...rest }) {\n  const pct = Math.max(0, Math.min(100, ((value - min) / (max - min)) * 100));\n  return (\n    <div className={[\"ax-slider\", disabled ? \"ax-slider--disabled\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {(label != null) ? (\n        <div className=\"ax-slider__top\">\n          <span className=\"ax-label\">{label}</span>\n          <span className=\"ax-slider__val\">{value}{suffix}</span>\n        </div>\n      ) : null}\n      <div className=\"ax-slider__track\">\n        <span className=\"ax-slider__rail\"></span>\n        <span className=\"ax-slider__fill\" style={{ width: pct + \"%\" }}></span>\n        <input\n          type=\"range\"\n          min={min}\n          max={max}\n          step={step}\n          value={value}\n          disabled={disabled}\n          onChange={(e) => onChange && onChange(Number(e.target.value))}\n        />\n        <span className=\"ax-slider__thumb\" style={{ left: pct + \"%\" }}></span>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBtB,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;AAEO,SAAS,OAAO,EAAE,OAAO,QAAQ,GAAG,MAAM,GAAG,MAAM,KAAK,OAAO,GAAG,SAAS,IAAI,UAAU,WAAW,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC3I,QAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,MAAO,QAAQ,QAAQ,MAAM,OAAQ,GAAG,CAAC;AAC1E,8BACG,OAAA,EAAI,WAAW,CAAC,aAAa,WAAW,wBAAwB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC3G,UAAA;AAAA,IAAA,SAAS,OACT,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,YAAY,UAAA,OAAM;AAAA,MAClC,qBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA;AAAA,QAAA;AAAA,QAAO;AAAA,MAAA,EAAA,CAAO;AAAA,IAAA,EAAA,CAClD,IACE;AAAA,IACJ,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,MAClC,oBAAC,UAAK,WAAU,mBAAkB,OAAO,EAAE,OAAO,MAAM,IAAA,GAAO;AAAA,MAC/D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,UAAU,CAAC,MAAM,YAAY,SAAS,OAAO,EAAE,OAAO,KAAK,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAE9D,oBAAC,UAAK,WAAU,oBAAmB,OAAO,EAAE,MAAM,MAAM,MAAI,CAAG;AAAA,IAAA,EAAA,CACjE;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/inputs/Switch.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Square-thumbed toggle — Agentaily's hard-edged take on a switch.
+ */
+export interface SwitchProps {
+  /** Text rendered to the right of the track. */
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (e: any) => void;
+}
+export declare function Switch(props: SwitchProps): JSX.Element;

package/dist/components/inputs/Switch.js

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_SWITCH_CSS = `
+.ax-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
+.ax-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
+.ax-switch__track {
+  width: 36px; height: 20px; flex: none; position: relative;
+  background: var(--surface-raised); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-1);
+  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
+}
+.ax-switch__thumb {
+  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;
+  background: var(--text-muted); border-radius: 1px;
+  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
+}
+.ax-switch input:checked + .ax-switch__track { background: var(--accent); border-color: var(--accent); }
+.ax-switch input:checked + .ax-switch__track .ax-switch__thumb { transform: translateX(16px); background: var(--accent-fg); }
+.ax-switch input:focus-visible + .ax-switch__track { box-shadow: var(--ring); }
+.ax-switch input:disabled + .ax-switch__track { opacity: 0.4; }
+.ax-switch__label { font-size: var(--text-sm); color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-switch-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-switch-css";
+  s.textContent = AX_SWITCH_CSS;
+  document.head.appendChild(s);
+}
+function Switch({ label, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: ["ax-switch", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", role: "switch", ...rest }),
+    /* @__PURE__ */ jsx("span", { className: "ax-switch__track", children: /* @__PURE__ */ jsx("span", { className: "ax-switch__thumb" }) }),
+    label ? /* @__PURE__ */ jsx("span", { className: "ax-switch__label", children: label }) : null
+  ] });
+}
+export {
+  Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/components/inputs/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/components/inputs/Switch.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SWITCH_CSS = `\n.ax-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }\n.ax-switch input { position: absolute; opacity: 0; width: 0; height: 0; }\n.ax-switch__track {\n  width: 36px; height: 20px; flex: none; position: relative;\n  background: var(--surface-raised); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-1);\n  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);\n}\n.ax-switch__thumb {\n  position: absolute; top: 2px; left: 2px; width: 14px; height: 14px;\n  background: var(--text-muted); border-radius: 1px;\n  transition: transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);\n}\n.ax-switch input:checked + .ax-switch__track { background: var(--accent); border-color: var(--accent); }\n.ax-switch input:checked + .ax-switch__track .ax-switch__thumb { transform: translateX(16px); background: var(--accent-fg); }\n.ax-switch input:focus-visible + .ax-switch__track { box-shadow: var(--ring); }\n.ax-switch input:disabled + .ax-switch__track { opacity: 0.4; }\n.ax-switch__label { font-size: var(--text-sm); color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-switch-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-switch-css\";\n  s.textContent = AX_SWITCH_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Switch({ label, className = \"\", ...rest }) {\n  return (\n    <label className={[\"ax-switch\", className].filter(Boolean).join(\" \")}>\n      <input type=\"checkbox\" role=\"switch\" {...rest} />\n      <span className=\"ax-switch__track\"><span className=\"ax-switch__thumb\"></span></span>\n      {label ? <span className=\"ax-switch__label\">{label}</span> : null}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBtB,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;AAEO,SAAS,OAAO,EAAE,OAAO,YAAY,IAAI,GAAG,QAAQ;AACzD,SACE,qBAAC,SAAA,EAAM,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GACjE,UAAA;AAAA,IAAA,oBAAC,WAAM,MAAK,YAAW,MAAK,UAAU,GAAG,MAAM;AAAA,IAC/C,oBAAC,UAAK,WAAU,oBAAmB,8BAAC,QAAA,EAAK,WAAU,oBAAmB,EAAA,CAAO;AAAA,IAC5E,QAAQ,oBAAC,QAAA,EAAK,WAAU,oBAAoB,iBAAM,IAAU;AAAA,EAAA,GAC/D;AAEJ;"}

package/dist/components/inputs/Textarea.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Multi-line text field, vertically resizable.
+ */
+export interface TextareaProps {
+  label?: string;
+  hint?: string;
+  placeholder?: string;
+  value?: string;
+  rows?: number;
+  disabled?: boolean;
+  onChange?: (e: any) => void;
+}
+export declare function Textarea(props: TextareaProps): JSX.Element;

package/dist/components/inputs/Textarea.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_TEXTAREA_CSS = `
+@layer ax-base {
+  .ax-textarea {
+    min-height: 88px; padding: 10px 12px; width: 100%; resize: vertical;
+    background: var(--surface-card); color: var(--text-body);
+    border: 1px solid var(--border-default); border-radius: var(--radius-2);
+    font-family: var(--font-body); font-size: var(--text-sm);
+    line-height: var(--leading-body);
+    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
+  }
+  .ax-textarea::placeholder { color: var(--text-faint); }
+}
+@layer ax-hover {
+  .ax-textarea:hover { border-color: var(--border-strong); }
+}
+@layer ax-focus {
+  .ax-textarea:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }
+}
+@layer ax-disabled {
+  .ax-textarea:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-textarea-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-textarea-css";
+  s.textContent = AX_TEXTAREA_CSS;
+  document.head.appendChild(s);
+}
+function Textarea({ label, hint, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: "ax-field", children: [
+    label ? /* @__PURE__ */ jsx("span", { className: "ax-field__label", children: label }) : null,
+    /* @__PURE__ */ jsx("textarea", { className: ["ax-textarea", className].filter(Boolean).join(" "), ...rest }),
+    hint ? /* @__PURE__ */ jsx("span", { className: "ax-field__hint", children: hint }) : null
+  ] });
+}
+export {
+  Textarea
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/components/inputs/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/components/inputs/Textarea.jsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"./Input.jsx\"; // ensures shared .ax-field CSS is injected\n\nconst AX_TEXTAREA_CSS = `\n@layer ax-base {\n  .ax-textarea {\n    min-height: 88px; padding: 10px 12px; width: 100%; resize: vertical;\n    background: var(--surface-card); color: var(--text-body);\n    border: 1px solid var(--border-default); border-radius: var(--radius-2);\n    font-family: var(--font-body); font-size: var(--text-sm);\n    line-height: var(--leading-body);\n    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);\n  }\n  .ax-textarea::placeholder { color: var(--text-faint); }\n}\n@layer ax-hover {\n  .ax-textarea:hover { border-color: var(--border-strong); }\n}\n@layer ax-focus {\n  .ax-textarea:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n}\n@layer ax-disabled {\n  .ax-textarea:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-textarea-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-textarea-css\";\n  s.textContent = AX_TEXTAREA_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Textarea({ label, hint, className = \"\", ...rest }) {\n  return (\n    <label className=\"ax-field\">\n      {label ? <span className=\"ax-field__label\">{label}</span> : null}\n      <textarea className={[\"ax-textarea\", className].filter(Boolean).join(\" \")} {...rest}></textarea>\n      {hint ? <span className=\"ax-field__hint\">{hint}</span> : null}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;AAGA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuBxB,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,OAAO,MAAM,YAAY,IAAI,GAAG,QAAQ;AACjE,SACE,qBAAC,SAAA,EAAM,WAAU,YACd,UAAA;AAAA,IAAA,QAAQ,oBAAC,QAAA,EAAK,WAAU,mBAAmB,iBAAM,IAAU;AAAA,IAC5D,oBAAC,YAAA,EAAS,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,KAAA,CAAM;AAAA,IACpF,OAAO,oBAAC,QAAA,EAAK,WAAU,kBAAkB,gBAAK,IAAU;AAAA,EAAA,GAC3D;AAEJ;"}

package/dist/components/inputs/Toggle.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Two-state pressable button, and a segmented ToggleGroup of them.
+ */
+export interface ToggleProps {
+  pressed?: boolean;
+  onPressedChange?: (pressed: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Toggle(props: ToggleProps): JSX.Element;
+
+export interface ToggleGroupProps {
+  /** Currently selected value (single-select). */
+  value?: string;
+  /** Strings or { value, label, icon? }. */
+  options: Array<string | { value: string; label?: string; icon?: React.ReactNode }>;
+  onChange?: (value: string) => void;
+}
+export declare function ToggleGroup(props: ToggleGroupProps): JSX.Element;

package/dist/components/inputs/Toggle.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_TOGGLE_CSS = `
+.ax-toggle {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  height: 32px; min-width: 32px; padding: 0 10px; cursor: pointer;
+  background: transparent; color: var(--text-muted);
+  border: 1px solid var(--border-default); border-radius: var(--radius-2);
+  font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium);
+  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+}
+.ax-toggle:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); }
+.ax-toggle:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-toggle[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
+.ax-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
+.ax-toggle svg { width: 15px; height: 15px; }
+
+.ax-togglegroup { display: inline-flex; }
+.ax-togglegroup .ax-toggle { border-radius: 0; margin-left: -1px; }
+.ax-togglegroup .ax-toggle:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2); margin-left: 0; }
+.ax-togglegroup .ax-toggle:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0; }
+.ax-togglegroup .ax-toggle[aria-pressed="true"] { position: relative; z-index: 1; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-toggle-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-toggle-css";
+  s.textContent = AX_TOGGLE_CSS;
+  document.head.appendChild(s);
+}
+function Toggle({ pressed = false, onPressedChange, children, className = "", disabled, ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-pressed": pressed,
+      disabled,
+      className: ["ax-toggle", className].filter(Boolean).join(" "),
+      onClick: () => onPressedChange && onPressedChange(!pressed),
+      ...rest,
+      children
+    }
+  );
+}
+function ToggleGroup({ value, options = [], onChange, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-togglegroup", className].filter(Boolean).join(" "), role: "group", ...rest, children: options.map((opt) => {
+    const o = typeof opt === "string" ? { value: opt, label: opt } : opt;
+    return /* @__PURE__ */ jsxs(Toggle, { pressed: value === o.value, onPressedChange: () => onChange && onChange(o.value), children: [
+      o.icon,
+      o.label
+    ] }, o.value);
+  }) });
+}
+export {
+  Toggle,
+  ToggleGroup
+};
+//# sourceMappingURL=Toggle.js.map

package/dist/components/inputs/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../../src/components/inputs/Toggle.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TOGGLE_CSS = `\n.ax-toggle {\n  display: inline-flex; align-items: center; justify-content: center; gap: 6px;\n  height: 32px; min-width: 32px; padding: 0 10px; 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-body); font-size: var(--text-sm); font-weight: var(--weight-medium);\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-toggle:hover:not(:disabled) { background: var(--surface-raised); color: var(--text-body); }\n.ax-toggle:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-toggle[aria-pressed=\"true\"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }\n.ax-toggle:disabled { opacity: 0.4; cursor: not-allowed; }\n.ax-toggle svg { width: 15px; height: 15px; }\n\n.ax-togglegroup { display: inline-flex; }\n.ax-togglegroup .ax-toggle { border-radius: 0; margin-left: -1px; }\n.ax-togglegroup .ax-toggle:first-child { border-radius: var(--radius-2) 0 0 var(--radius-2); margin-left: 0; }\n.ax-togglegroup .ax-toggle:last-child { border-radius: 0 var(--radius-2) var(--radius-2) 0; }\n.ax-togglegroup .ax-toggle[aria-pressed=\"true\"] { position: relative; z-index: 1; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-toggle-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-toggle-css\";\n  s.textContent = AX_TOGGLE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Toggle({ pressed = false, onPressedChange, children, className = \"\", disabled, ...rest }) {\n  return (\n    <button\n      type=\"button\"\n      aria-pressed={pressed}\n      disabled={disabled}\n      className={[\"ax-toggle\", className].filter(Boolean).join(\" \")}\n      onClick={() => onPressedChange && onPressedChange(!pressed)}\n      {...rest}\n    >\n      {children}\n    </button>\n  );\n}\n\nexport function ToggleGroup({ value, options = [], onChange, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-togglegroup\", className].filter(Boolean).join(\" \")} role=\"group\" {...rest}>\n      {options.map((opt) => {\n        const o = typeof opt === \"string\" ? { value: opt, label: opt } : opt;\n        return (\n          <Toggle key={o.value} pressed={value === o.value} onPressedChange={() => onChange && onChange(o.value)}>\n            {o.icon}{o.label}\n          </Toggle>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsBtB,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;AAEO,SAAS,OAAO,EAAE,UAAU,OAAO,iBAAiB,UAAU,YAAY,IAAI,UAAU,GAAG,QAAQ;AACxG,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,gBAAc;AAAA,MACd;AAAA,MACA,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,SAAS,MAAM,mBAAmB,gBAAgB,CAAC,OAAO;AAAA,MACzD,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AAEO,SAAS,YAAY,EAAE,OAAO,UAAU,CAAA,GAAI,UAAU,YAAY,IAAI,GAAG,QAAQ;AACtF,SACE,oBAAC,SAAI,WAAW,CAAC,kBAAkB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,MAAK,SAAS,GAAG,MACvF,UAAA,QAAQ,IAAI,CAAC,QAAQ;AACpB,UAAM,IAAI,OAAO,QAAQ,WAAW,EAAE,OAAO,KAAK,OAAO,IAAA,IAAQ;AACjE,WACE,qBAAC,QAAA,EAAqB,SAAS,UAAU,EAAE,OAAO,iBAAiB,MAAM,YAAY,SAAS,EAAE,KAAK,GAClG,UAAA;AAAA,MAAA,EAAE;AAAA,MAAM,EAAE;AAAA,IAAA,EAAA,GADA,EAAE,KAEf;AAAA,EAEJ,CAAC,EAAA,CACH;AAEJ;"}

package/dist/components/layout/AspectRatio.d.ts

@@ -0,0 +1,3 @@
+/** Locks content to a fixed width:height ratio. */
+export interface AspectRatioProps { ratio?: number | string; children?: React.ReactNode; }
+export declare function AspectRatio(props: AspectRatioProps): JSX.Element;

package/dist/components/layout/AspectRatio.js

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_ASPECT_CSS = `
+.ax-aspect { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-3); background: var(--surface-raised); }
+.ax-aspect > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.ax-aspect__placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-aspect-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-aspect-css";
+  s.textContent = AX_ASPECT_CSS;
+  document.head.appendChild(s);
+}
+function AspectRatio({ ratio = 16 / 9, children, className = "", style = {}, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-aspect", className].filter(Boolean).join(" "), style: { aspectRatio: String(ratio), ...style }, ...rest, children: children || /* @__PURE__ */ jsx("span", { className: "ax-aspect__placeholder", children: typeof ratio === "number" ? ratio.toFixed(2) : ratio }) });
+}
+export {
+  AspectRatio
+};
+//# sourceMappingURL=AspectRatio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AspectRatio.js","sources":["../../../src/components/layout/AspectRatio.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_ASPECT_CSS = `\n.ax-aspect { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-3); background: var(--surface-raised); }\n.ax-aspect > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.ax-aspect__placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-aspect-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-aspect-css\";\n  s.textContent = AX_ASPECT_CSS;\n  document.head.appendChild(s);\n}\n\nexport function AspectRatio({ ratio = 16 / 9, children, className = \"\", style = {}, ...rest }) {\n  return (\n    <div className={[\"ax-aspect\", className].filter(Boolean).join(\" \")} style={{ aspectRatio: String(ratio), ...style }} {...rest}>\n      {children || <span className=\"ax-aspect__placeholder\">{typeof ratio === \"number\" ? ratio.toFixed(2) : ratio}</span>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAMtB,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;AAEO,SAAS,YAAY,EAAE,QAAQ,KAAK,GAAG,UAAU,YAAY,IAAI,QAAQ,IAAI,GAAG,QAAQ;AAC7F,6BACG,OAAA,EAAI,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAO,EAAE,aAAa,OAAO,KAAK,GAAG,GAAG,SAAU,GAAG,MACtH,UAAA,gCAAa,QAAA,EAAK,WAAU,0BAA0B,UAAA,OAAO,UAAU,WAAW,MAAM,QAAQ,CAAC,IAAI,OAAM,GAC9G;AAEJ;"}

package/dist/components/layout/Resizable.d.ts

@@ -0,0 +1,3 @@
+/** Two resizable panels with a draggable divider. */
+export interface ResizableProps { orientation?: "horizontal" | "vertical"; defaultSize?: number; min?: number; max?: number; first?: React.ReactNode; second?: React.ReactNode; height?: number; }
+export declare function Resizable(props: ResizableProps): JSX.Element;

package/dist/components/layout/Resizable.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback } from "react";
+const AX_RESIZABLE_CSS = `
+.ax-resizable { display: flex; width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }
+.ax-resizable--vertical { flex-direction: column; }
+.ax-resizable__panel { overflow: auto; min-width: 0; min-height: 0; }
+.ax-resizable__handle { flex: none; position: relative; background: var(--border-default); transition: background var(--dur-1) var(--ease-out); }
+.ax-resizable__handle:hover, .ax-resizable__handle--active { background: var(--border-strong); }
+.ax-resizable--horizontal .ax-resizable__handle { width: 1px; cursor: col-resize; }
+.ax-resizable--vertical .ax-resizable__handle { height: 1px; cursor: row-resize; }
+.ax-resizable__handle::after { content: ""; position: absolute; }
+.ax-resizable--horizontal .ax-resizable__handle::after { inset: 0 -4px; }
+.ax-resizable--vertical .ax-resizable__handle::after { inset: -4px 0; }
+.ax-resizable__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; gap: 2px; }
+.ax-resizable--horizontal .ax-resizable__grip { flex-direction: column; }
+.ax-resizable__grip span { width: 3px; height: 3px; border-radius: 1px; background: var(--text-faint); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-resizable-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-resizable-css";
+  s.textContent = AX_RESIZABLE_CSS;
+  document.head.appendChild(s);
+}
+function Resizable({ orientation = "horizontal", defaultSize = 50, min = 15, max = 85, first, second, height = 220, className = "", ...rest }) {
+  const [size, setSize] = useState(defaultSize);
+  const ref = useRef(null);
+  const dragging = useRef(false);
+  const vertical = orientation === "vertical";
+  const onMove = useCallback((e) => {
+    if (!dragging.current || !ref.current) return;
+    const rect = ref.current.getBoundingClientRect();
+    const pct = vertical ? (e.clientY - rect.top) / rect.height * 100 : (e.clientX - rect.left) / rect.width * 100;
+    setSize(Math.max(min, Math.min(max, pct)));
+  }, [vertical, min, max]);
+  const stop = useCallback(() => {
+    dragging.current = false;
+    document.removeEventListener("mousemove", onMove);
+    document.removeEventListener("mouseup", stop);
+  }, [onMove]);
+  const start = () => {
+    dragging.current = true;
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", stop);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-resizable", "ax-resizable--" + orientation, className].filter(Boolean).join(" "), ref, style: { height: vertical ? height : void 0 }, ...rest, children: [
+    /* @__PURE__ */ jsx("div", { className: "ax-resizable__panel", style: vertical ? { height: size + "%" } : { width: size + "%" }, children: first }),
+    /* @__PURE__ */ jsx("div", { className: "ax-resizable__handle", onMouseDown: start, children: /* @__PURE__ */ jsxs("span", { className: "ax-resizable__grip", children: [
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {}),
+      /* @__PURE__ */ jsx("span", {})
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "ax-resizable__panel", style: { flex: 1 }, children: second })
+  ] });
+}
+export {
+  Resizable
+};
+//# sourceMappingURL=Resizable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Resizable.js","sources":["../../../src/components/layout/Resizable.jsx"],"sourcesContent":["import React, { useState, useRef, useCallback } from \"react\";\n\nconst AX_RESIZABLE_CSS = `\n.ax-resizable { display: flex; width: 100%; border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }\n.ax-resizable--vertical { flex-direction: column; }\n.ax-resizable__panel { overflow: auto; min-width: 0; min-height: 0; }\n.ax-resizable__handle { flex: none; position: relative; background: var(--border-default); transition: background var(--dur-1) var(--ease-out); }\n.ax-resizable__handle:hover, .ax-resizable__handle--active { background: var(--border-strong); }\n.ax-resizable--horizontal .ax-resizable__handle { width: 1px; cursor: col-resize; }\n.ax-resizable--vertical .ax-resizable__handle { height: 1px; cursor: row-resize; }\n.ax-resizable__handle::after { content: \"\"; position: absolute; }\n.ax-resizable--horizontal .ax-resizable__handle::after { inset: 0 -4px; }\n.ax-resizable--vertical .ax-resizable__handle::after { inset: -4px 0; }\n.ax-resizable__grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; gap: 2px; }\n.ax-resizable--horizontal .ax-resizable__grip { flex-direction: column; }\n.ax-resizable__grip span { width: 3px; height: 3px; border-radius: 1px; background: var(--text-faint); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-resizable-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-resizable-css\";\n  s.textContent = AX_RESIZABLE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Resizable({ orientation = \"horizontal\", defaultSize = 50, min = 15, max = 85, first, second, height = 220, className = \"\", ...rest }) {\n  const [size, setSize] = useState(defaultSize);\n  const ref = useRef(null);\n  const dragging = useRef(false);\n  const vertical = orientation === \"vertical\";\n\n  const onMove = useCallback((e) => {\n    if (!dragging.current || !ref.current) return;\n    const rect = ref.current.getBoundingClientRect();\n    const pct = vertical\n      ? ((e.clientY - rect.top) / rect.height) * 100\n      : ((e.clientX - rect.left) / rect.width) * 100;\n    setSize(Math.max(min, Math.min(max, pct)));\n  }, [vertical, min, max]);\n\n  const stop = useCallback(() => {\n    dragging.current = false;\n    document.removeEventListener(\"mousemove\", onMove);\n    document.removeEventListener(\"mouseup\", stop);\n  }, [onMove]);\n\n  const start = () => {\n    dragging.current = true;\n    document.addEventListener(\"mousemove\", onMove);\n    document.addEventListener(\"mouseup\", stop);\n  };\n\n  return (\n    <div className={[\"ax-resizable\", \"ax-resizable--\" + orientation, className].filter(Boolean).join(\" \")} ref={ref} style={{ height: vertical ? height : undefined }} {...rest}>\n      <div className=\"ax-resizable__panel\" style={vertical ? { height: size + \"%\" } : { width: size + \"%\" }}>{first}</div>\n      <div className=\"ax-resizable__handle\" onMouseDown={start}>\n        <span className=\"ax-resizable__grip\"><span></span><span></span><span></span></span>\n      </div>\n      <div className=\"ax-resizable__panel\" style={{ flex: 1 }}>{second}</div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBzB,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,cAAc,IAAI,MAAM,IAAI,MAAM,IAAI,OAAO,QAAQ,SAAS,KAAK,YAAY,IAAI,GAAG,QAAQ;AACpJ,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,WAAW,OAAO,KAAK;AAC7B,QAAM,WAAW,gBAAgB;AAEjC,QAAM,SAAS,YAAY,CAAC,MAAM;AAChC,QAAI,CAAC,SAAS,WAAW,CAAC,IAAI,QAAS;AACvC,UAAM,OAAO,IAAI,QAAQ,sBAAA;AACzB,UAAM,MAAM,YACN,EAAE,UAAU,KAAK,OAAO,KAAK,SAAU,OACvC,EAAE,UAAU,KAAK,QAAQ,KAAK,QAAS;AAC7C,YAAQ,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,GAAG,CAAC,CAAC;AAAA,EAC3C,GAAG,CAAC,UAAU,KAAK,GAAG,CAAC;AAEvB,QAAM,OAAO,YAAY,MAAM;AAC7B,aAAS,UAAU;AACnB,aAAS,oBAAoB,aAAa,MAAM;AAChD,aAAS,oBAAoB,WAAW,IAAI;AAAA,EAC9C,GAAG,CAAC,MAAM,CAAC;AAEX,QAAM,QAAQ,MAAM;AAClB,aAAS,UAAU;AACnB,aAAS,iBAAiB,aAAa,MAAM;AAC7C,aAAS,iBAAiB,WAAW,IAAI;AAAA,EAC3C;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,gBAAgB,mBAAmB,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAU,OAAO,EAAE,QAAQ,WAAW,SAAS,OAAA,GAAc,GAAG,MACrK,UAAA;AAAA,IAAA,oBAAC,OAAA,EAAI,WAAU,uBAAsB,OAAO,WAAW,EAAE,QAAQ,OAAO,IAAA,IAAQ,EAAE,OAAO,OAAO,OAAQ,UAAA,OAAM;AAAA,IAC9G,oBAAC,SAAI,WAAU,wBAAuB,aAAa,OACjD,UAAA,qBAAC,QAAA,EAAK,WAAU,sBAAqB,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK;AAAA,0BAAQ,QAAA,EAAK;AAAA,0BAAQ,QAAA,CAAA,CAAK;AAAA,IAAA,EAAA,CAAO,EAAA,CAC9E;AAAA,IACA,oBAAC,SAAI,WAAU,uBAAsB,OAAO,EAAE,MAAM,EAAA,GAAM,UAAA,OAAA,CAAO;AAAA,EAAA,GACnE;AAEJ;"}

package/dist/components/layout/ScrollArea.d.ts

@@ -0,0 +1,3 @@
+/** Scroll container with a thin, themed scrollbar. */
+export interface ScrollAreaProps { maxHeight?: number | string; children?: React.ReactNode; }
+export declare function ScrollArea(props: ScrollAreaProps): JSX.Element;

package/dist/components/layout/ScrollArea.js

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_SCROLLAREA_CSS = `
+.ax-scrollarea { overflow: auto; position: relative; }
+.ax-scrollarea::-webkit-scrollbar { width: 10px; height: 10px; }
+.ax-scrollarea::-webkit-scrollbar-track { background: transparent; }
+.ax-scrollarea::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-1); border: 3px solid transparent; background-clip: padding-box; }
+.ax-scrollarea::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }
+.ax-scrollarea { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
+.ax-scrollarea--fade::before, .ax-scrollarea--fade::after { content: ""; position: sticky; left: 0; right: 0; display: block; height: 16px; pointer-events: none; z-index: 1; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-scrollarea-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-scrollarea-css";
+  s.textContent = AX_SCROLLAREA_CSS;
+  document.head.appendChild(s);
+}
+function ScrollArea({ maxHeight = 240, children, className = "", style = {}, ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-scrollarea", className].filter(Boolean).join(" "), style: { maxHeight, ...style }, ...rest, children });
+}
+export {
+  ScrollArea
+};
+//# sourceMappingURL=ScrollArea.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/layout/ScrollArea.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SCROLLAREA_CSS = `\n.ax-scrollarea { overflow: auto; position: relative; }\n.ax-scrollarea::-webkit-scrollbar { width: 10px; height: 10px; }\n.ax-scrollarea::-webkit-scrollbar-track { background: transparent; }\n.ax-scrollarea::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-1); border: 3px solid transparent; background-clip: padding-box; }\n.ax-scrollarea::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: padding-box; }\n.ax-scrollarea { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }\n.ax-scrollarea--fade::before, .ax-scrollarea--fade::after { content: \"\"; position: sticky; left: 0; right: 0; display: block; height: 16px; pointer-events: none; z-index: 1; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-scrollarea-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-scrollarea-css\";\n  s.textContent = AX_SCROLLAREA_CSS;\n  document.head.appendChild(s);\n}\n\nexport function ScrollArea({ maxHeight = 240, children, className = \"\", style = {}, ...rest }) {\n  return (\n    <div className={[\"ax-scrollarea\", className].filter(Boolean).join(\" \")} style={{ maxHeight, ...style }} {...rest}>\n      {children}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAU1B,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,YAAY,KAAK,UAAU,YAAY,IAAI,QAAQ,CAAA,GAAI,GAAG,QAAQ;AAC7F,SACE,oBAAC,SAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,OAAO,EAAE,WAAW,GAAG,SAAU,GAAG,MACzG,UACH;AAEJ;"}

package/dist/components/layout/Sidebar.d.ts

@@ -0,0 +1,5 @@
+/** Generic app sidebar: grouped nav items with icons, badges, active accent bar; collapsible to icons. */
+export interface SidebarItem { id: string; label: string; icon?: React.ReactNode; badge?: React.ReactNode; }
+export interface SidebarGroup { label?: string; items: SidebarItem[]; }
+export interface SidebarProps { groups: SidebarGroup[]; activeId?: string; onSelect?: (id: string) => void; header?: React.ReactNode; footer?: React.ReactNode; collapsed?: boolean; }
+export declare function Sidebar(props: SidebarProps): JSX.Element;