@agentaily/design-system 0.2.0 → 0.4.0

package/dist/components/code/Artifact.js.map

@@ -1 +1 @@
-{"version":3,"file":"Artifact.js","sources":["../../../src/components/code/Artifact.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_ARTIFACT_CSS = `\n.ax-artifact { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); }\n.ax-artifact__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }\n.ax-artifact__icon { width: 16px; height: 16px; flex: none; color: var(--text-faint); }\n.ax-artifact__meta { flex: 1; min-width: 0; }\n.ax-artifact__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-artifact__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 1px; }\n.ax-artifact__tabs { display: flex; gap: 2px; padding: 2px; background: var(--surface-raised); border-radius: var(--radius-2); }\n.ax-artifact__tab { appearance: none; background: none; border: none; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-1); font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-artifact__tab--active { background: var(--surface-card); color: var(--text-body); }\n.ax-artifact__actions { display: flex; gap: 2px; }\n.ax-artifact__body { max-height: 280px; overflow: auto; }\n.ax-artifact__preview { padding: 20px; background: var(--bg-0); min-height: 120px; }\n[data-theme=\"light\"] .ax-artifact__preview { background: var(--bg-1); }\n.ax-artifact__pre { margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); white-space: pre; overflow-x: auto; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-artifact-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-artifact-css\";\n  s.textContent = AX_ARTIFACT_CSS;\n  document.head.appendChild(s);\n}\n\nconst Box = <svg className=\"ax-artifact__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path><path d=\"m3.3 7 8.7 5 8.7-5M12 22V12\"></path></svg>;\n\nexport function Artifact({ title = \"Artifact\", subtitle, code, preview, defaultTab = \"preview\", actions, className = \"\", ...rest }) {\n  const [tab, setTab] = useState(preview ? defaultTab : \"code\");\n  return (\n    <div className={[\"ax-artifact\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-artifact__head\">\n        {Box}\n        <div className=\"ax-artifact__meta\">\n          <p className=\"ax-artifact__title\">{title}</p>\n          {subtitle ? <p className=\"ax-artifact__sub\">{subtitle}</p> : null}\n        </div>\n        {preview && code ? (\n          <div className=\"ax-artifact__tabs\">\n            <button className={\"ax-artifact__tab\" + (tab === \"preview\" ? \" ax-artifact__tab--active\" : \"\")} onClick={() => setTab(\"preview\")}>Preview</button>\n            <button className={\"ax-artifact__tab\" + (tab === \"code\" ? \" ax-artifact__tab--active\" : \"\")} onClick={() => setTab(\"code\")}>Code</button>\n          </div>\n        ) : null}\n        {actions ? <div className=\"ax-artifact__actions\">{actions}</div> : null}\n      </div>\n      <div className=\"ax-artifact__body\">\n        {tab === \"preview\" && preview ? <div className=\"ax-artifact__preview\">{preview}</div> : <pre className=\"ax-artifact__pre\">{code}</pre>}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,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;AAEA,MAAM,MAAM,qBAAC,OAAA,EAAI,WAAU,qBAAoB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,4HAAA,CAA4H;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,GAAO;AAEnV,SAAS,SAAS,EAAE,QAAQ,YAAY,UAAU,MAAM,SAAS,aAAa,WAAW,SAAS,YAAY,IAAI,GAAG,QAAQ;AAClI,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,UAAU,aAAa,MAAM;AAC5D,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,MAAA;AAAA,MACD,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAE,WAAU,sBAAsB,UAAA,OAAM;AAAA,QACxC,WAAW,oBAAC,KAAA,EAAE,WAAU,oBAAoB,oBAAS,IAAO;AAAA,MAAA,GAC/D;AAAA,MACC,WAAW,OACV,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,UAAA,EAAO,WAAW,sBAAsB,QAAQ,YAAY,8BAA8B,KAAK,SAAS,MAAM,OAAO,SAAS,GAAG,UAAA,WAAO;AAAA,QACzI,oBAAC,UAAA,EAAO,WAAW,sBAAsB,QAAQ,SAAS,8BAA8B,KAAK,SAAS,MAAM,OAAO,MAAM,GAAG,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,CAClI,IACE;AAAA,MACH,UAAU,oBAAC,OAAA,EAAI,WAAU,wBAAwB,mBAAQ,IAAS;AAAA,IAAA,GACrE;AAAA,wBACC,OAAA,EAAI,WAAU,qBACZ,UAAA,QAAQ,aAAa,UAAU,oBAAC,OAAA,EAAI,WAAU,wBAAwB,mBAAQ,IAAS,oBAAC,SAAI,WAAU,oBAAoB,gBAAK,EAAA,CAClI;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Artifact.js","sources":["../../../src/components/code/Artifact.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_ARTIFACT_CSS = `\n.ax-artifact { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); }\n.ax-artifact__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }\n.ax-artifact__icon { width: 16px; height: 16px; flex: none; color: var(--text-faint); }\n.ax-artifact__meta { flex: 1; min-width: 0; }\n.ax-artifact__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-artifact__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 1px; }\n.ax-artifact__tabs { display: flex; gap: 2px; padding: 2px; background: var(--surface-raised); border-radius: var(--radius-2); }\n.ax-artifact__tab { appearance: none; background: none; border: none; cursor: pointer; padding: 4px 10px; border-radius: var(--radius-1); font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }\n.ax-artifact__tab--active { background: var(--surface-card); color: var(--text-body); }\n.ax-artifact__actions { display: flex; gap: 2px; }\n.ax-artifact__body { max-height: 280px; overflow: auto; }\n.ax-artifact__preview { padding: 20px; background: var(--bg-1); min-height: 120px; }\n[data-theme=\"dark\"] .ax-artifact__preview { background: var(--bg-0); }\n.ax-artifact__pre { margin: 0; padding: 14px 16px; font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.6; color: var(--text-body); white-space: pre; overflow-x: auto; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-artifact-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-artifact-css\";\n  s.textContent = AX_ARTIFACT_CSS;\n  document.head.appendChild(s);\n}\n\nconst Box = (\n  <svg\n    className=\"ax-artifact__icon\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\"></path>\n    <path d=\"m3.3 7 8.7 5 8.7-5M12 22V12\"></path>\n  </svg>\n);\n\nexport function Artifact({\n  title = \"Artifact\",\n  subtitle,\n  code,\n  preview,\n  defaultTab = \"preview\",\n  actions,\n  className = \"\",\n  ...rest\n}) {\n  const [tab, setTab] = useState(preview ? defaultTab : \"code\");\n  return (\n    <div className={[\"ax-artifact\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-artifact__head\">\n        {Box}\n        <div className=\"ax-artifact__meta\">\n          <p className=\"ax-artifact__title\">{title}</p>\n          {subtitle ? <p className=\"ax-artifact__sub\">{subtitle}</p> : null}\n        </div>\n        {preview && code ? (\n          <div className=\"ax-artifact__tabs\">\n            <button\n              className={\n                \"ax-artifact__tab\" + (tab === \"preview\" ? \" ax-artifact__tab--active\" : \"\")\n              }\n              onClick={() => setTab(\"preview\")}\n            >\n              Preview\n            </button>\n            <button\n              className={\"ax-artifact__tab\" + (tab === \"code\" ? \" ax-artifact__tab--active\" : \"\")}\n              onClick={() => setTab(\"code\")}\n            >\n              Code\n            </button>\n          </div>\n        ) : null}\n        {actions ? <div className=\"ax-artifact__actions\">{actions}</div> : null}\n      </div>\n      <div className=\"ax-artifact__body\">\n        {tab === \"preview\" && preview ? (\n          <div className=\"ax-artifact__preview\">{preview}</div>\n        ) : (\n          <pre className=\"ax-artifact__pre\">{code}</pre>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBxB,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;AAEA,MAAM,MACJ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,GAAE,4HAAA,CAA4H;AAAA,MACpI,oBAAC,QAAA,EAAK,GAAE,8BAAA,CAA8B;AAAA,IAAA;AAAA,EAAA;AACxC;AAGK,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,UAAU,aAAa,MAAM;AAC5D,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,MAAA;AAAA,MACD,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA,oBAAC,KAAA,EAAE,WAAU,sBAAsB,UAAA,OAAM;AAAA,QACxC,WAAW,oBAAC,KAAA,EAAE,WAAU,oBAAoB,oBAAS,IAAO;AAAA,MAAA,GAC/D;AAAA,MACC,WAAW,OACV,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WACE,sBAAsB,QAAQ,YAAY,8BAA8B;AAAA,YAE1E,SAAS,MAAM,OAAO,SAAS;AAAA,YAChC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGD;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,sBAAsB,QAAQ,SAAS,8BAA8B;AAAA,YAChF,SAAS,MAAM,OAAO,MAAM;AAAA,YAC7B,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAED,EAAA,CACF,IACE;AAAA,MACH,UAAU,oBAAC,OAAA,EAAI,WAAU,wBAAwB,mBAAQ,IAAS;AAAA,IAAA,GACrE;AAAA,wBACC,OAAA,EAAI,WAAU,qBACZ,UAAA,QAAQ,aAAa,UACpB,oBAAC,OAAA,EAAI,WAAU,wBAAwB,mBAAQ,IAE/C,oBAAC,SAAI,WAAU,oBAAoB,gBAAK,EAAA,CAE5C;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/code/JSXPreview.js

@@ -4,8 +4,8 @@ const AX_JSXPREVIEW_CSS = `
 .ax-jsxpreview { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }
 .ax-jsxpreview--stacked { grid-template-columns: 1fr; }
 .ax-jsxpreview__pane { min-width: 0; }
-.ax-jsxpreview__pane--code { border-right: 1px solid var(--border-default); background: var(--bg-0); }
-[data-theme="light"] .ax-jsxpreview__pane--code { background: var(--bg-1); }
+.ax-jsxpreview__pane--code { border-right: 1px solid var(--border-default); background: var(--bg-1); }
+[data-theme="dark"] .ax-jsxpreview__pane--code { background: var(--bg-0); }
 .ax-jsxpreview--stacked .ax-jsxpreview__pane--code { border-right: none; border-bottom: 1px solid var(--border-default); }
 .ax-jsxpreview__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 12px; border-bottom: 1px solid var(--border-default); }
 .ax-jsxpreview__pre { margin: 0; padding: 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--text-body); white-space: pre; overflow-x: auto; }
@@ -18,16 +18,23 @@ if (typeof document !== "undefined" && !document.getElementById("ax-jsxpreview-c
   document.head.appendChild(s);
 }
 function JSXPreview({ code, children, stacked = false, className = "", ...rest }) {
-  return /* @__PURE__ */ jsxs("div", { className: ["ax-jsxpreview", stacked ? "ax-jsxpreview--stacked" : "", className].filter(Boolean).join(" "), ...rest, children: [
-    /* @__PURE__ */ jsxs("div", { className: "ax-jsxpreview__pane ax-jsxpreview__pane--code", children: [
-      /* @__PURE__ */ jsx("div", { className: "ax-jsxpreview__label", children: "JSX" }),
-      /* @__PURE__ */ jsx("pre", { className: "ax-jsxpreview__pre", children: code })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "ax-jsxpreview__pane", children: [
-      /* @__PURE__ */ jsx("div", { className: "ax-jsxpreview__label", children: "Preview" }),
-      /* @__PURE__ */ jsx("div", { className: "ax-jsxpreview__render", children })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["ax-jsxpreview", stacked ? "ax-jsxpreview--stacked" : "", className].filter(Boolean).join(" "),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ax-jsxpreview__pane ax-jsxpreview__pane--code", children: [
+          /* @__PURE__ */ jsx("div", { className: "ax-jsxpreview__label", children: "JSX" }),
+          /* @__PURE__ */ jsx("pre", { className: "ax-jsxpreview__pre", children: code })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "ax-jsxpreview__pane", children: [
+          /* @__PURE__ */ jsx("div", { className: "ax-jsxpreview__label", children: "Preview" }),
+          /* @__PURE__ */ jsx("div", { className: "ax-jsxpreview__render", children })
+        ] })
+      ]
+    }
+  );
 }
 export {
   JSXPreview

package/dist/components/code/JSXPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"JSXPreview.js","sources":["../../../src/components/code/JSXPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_JSXPREVIEW_CSS = `\n.ax-jsxpreview { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }\n.ax-jsxpreview--stacked { grid-template-columns: 1fr; }\n.ax-jsxpreview__pane { min-width: 0; }\n.ax-jsxpreview__pane--code { border-right: 1px solid var(--border-default); background: var(--bg-0); }\n[data-theme=\"light\"] .ax-jsxpreview__pane--code { background: var(--bg-1); }\n.ax-jsxpreview--stacked .ax-jsxpreview__pane--code { border-right: none; border-bottom: 1px solid var(--border-default); }\n.ax-jsxpreview__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 12px; border-bottom: 1px solid var(--border-default); }\n.ax-jsxpreview__pre { margin: 0; padding: 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--text-body); white-space: pre; overflow-x: auto; }\n.ax-jsxpreview__render { padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 100px; background: var(--surface-card); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-jsxpreview-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-jsxpreview-css\";\n  s.textContent = AX_JSXPREVIEW_CSS;\n  document.head.appendChild(s);\n}\n\nexport function JSXPreview({ code, children, stacked = false, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-jsxpreview\", stacked ? \"ax-jsxpreview--stacked\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-jsxpreview__pane ax-jsxpreview__pane--code\">\n        <div className=\"ax-jsxpreview__label\">JSX</div>\n        <pre className=\"ax-jsxpreview__pre\">{code}</pre>\n      </div>\n      <div className=\"ax-jsxpreview__pane\">\n        <div className=\"ax-jsxpreview__label\">Preview</div>\n        <div className=\"ax-jsxpreview__render\">{children}</div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,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,MAAM,UAAU,UAAU,OAAO,YAAY,IAAI,GAAG,QAAQ;AACvF,8BACG,OAAA,EAAI,WAAW,CAAC,iBAAiB,UAAU,2BAA2B,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACnH,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,OAAG;AAAA,MACzC,oBAAC,OAAA,EAAI,WAAU,sBAAsB,UAAA,KAAA,CAAK;AAAA,IAAA,GAC5C;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,MAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,WAAO;AAAA,MAC7C,oBAAC,OAAA,EAAI,WAAU,yBAAyB,SAAA,CAAS;AAAA,IAAA,EAAA,CACnD;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"JSXPreview.js","sources":["../../../src/components/code/JSXPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_JSXPREVIEW_CSS = `\n.ax-jsxpreview { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; }\n.ax-jsxpreview--stacked { grid-template-columns: 1fr; }\n.ax-jsxpreview__pane { min-width: 0; }\n.ax-jsxpreview__pane--code { border-right: 1px solid var(--border-default); background: var(--bg-1); }\n[data-theme=\"dark\"] .ax-jsxpreview__pane--code { background: var(--bg-0); }\n.ax-jsxpreview--stacked .ax-jsxpreview__pane--code { border-right: none; border-bottom: 1px solid var(--border-default); }\n.ax-jsxpreview__label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); padding: 8px 12px; border-bottom: 1px solid var(--border-default); }\n.ax-jsxpreview__pre { margin: 0; padding: 12px; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.6; color: var(--text-body); white-space: pre; overflow-x: auto; }\n.ax-jsxpreview__render { padding: 20px; display: flex; align-items: center; justify-content: center; min-height: 100px; background: var(--surface-card); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-jsxpreview-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-jsxpreview-css\";\n  s.textContent = AX_JSXPREVIEW_CSS;\n  document.head.appendChild(s);\n}\n\nexport function JSXPreview({ code, children, stacked = false, className = \"\", ...rest }) {\n  return (\n    <div\n      className={[\"ax-jsxpreview\", stacked ? \"ax-jsxpreview--stacked\" : \"\", className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...rest}\n    >\n      <div className=\"ax-jsxpreview__pane ax-jsxpreview__pane--code\">\n        <div className=\"ax-jsxpreview__label\">JSX</div>\n        <pre className=\"ax-jsxpreview__pre\">{code}</pre>\n      </div>\n      <div className=\"ax-jsxpreview__pane\">\n        <div className=\"ax-jsxpreview__label\">Preview</div>\n        <div className=\"ax-jsxpreview__render\">{children}</div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,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,MAAM,UAAU,UAAU,OAAO,YAAY,IAAI,GAAG,QAAQ;AACvF,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,CAAC,iBAAiB,UAAU,2BAA2B,IAAI,SAAS,EAC5E,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACV,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,iDACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,OAAG;AAAA,UACzC,oBAAC,OAAA,EAAI,WAAU,sBAAsB,UAAA,KAAA,CAAK;AAAA,QAAA,GAC5C;AAAA,QACA,qBAAC,OAAA,EAAI,WAAU,uBACb,UAAA;AAAA,UAAA,oBAAC,OAAA,EAAI,WAAU,wBAAuB,UAAA,WAAO;AAAA,UAC7C,oBAAC,OAAA,EAAI,WAAU,yBAAyB,SAAA,CAAS;AAAA,QAAA,EAAA,CACnD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/code/Snippet.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 const AX_SNIPPET_CSS = `
-.ax-snippet { display: flex; align-items: center; gap: 8px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 6px 6px 6px 12px; font-family: var(--font-mono); }
-[data-theme="light"] .ax-snippet { background: var(--bg-1); }
+.ax-snippet { display: flex; align-items: center; gap: 8px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 6px 6px 6px 12px; font-family: var(--font-mono); }
+[data-theme="dark"] .ax-snippet { background: var(--bg-0); }
 .ax-snippet__prompt { color: var(--text-faint); user-select: none; }
 .ax-snippet__code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--text-sm); color: var(--text-body); }
 .ax-snippet__copy { appearance: none; background: none; border: 1px solid var(--border-default); cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: var(--radius-1); flex: none; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }

package/dist/components/code/Snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"Snippet.js","sources":["../../../src/components/code/Snippet.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_SNIPPET_CSS = `\n.ax-snippet { display: flex; align-items: center; gap: 8px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 6px 6px 6px 12px; font-family: var(--font-mono); }\n[data-theme=\"light\"] .ax-snippet { background: var(--bg-1); }\n.ax-snippet__prompt { color: var(--text-faint); user-select: none; }\n.ax-snippet__code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--text-sm); color: var(--text-body); }\n.ax-snippet__copy { appearance: none; background: none; border: 1px solid var(--border-default); cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: var(--radius-1); flex: none; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }\n.ax-snippet__copy:hover { color: var(--text-body); border-color: var(--border-strong); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-snippet-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-snippet-css\";\n  s.textContent = AX_SNIPPET_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Snippet({ code = \"\", prompt = \"$\", className = \"\", ...rest }) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    try { navigator.clipboard && navigator.clipboard.writeText(code); } catch (e) {}\n    setCopied(true); setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-snippet\", className].filter(Boolean).join(\" \")} {...rest}>\n      {prompt ? <span className=\"ax-snippet__prompt\">{prompt}</span> : null}\n      <code className=\"ax-snippet__code\">{code}</code>\n      <button className=\"ax-snippet__copy\" onClick={copy}>{copied ? \"✓\" : \"copy\"}</button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,OAAO,IAAI,SAAS,KAAK,YAAY,IAAI,GAAG,QAAQ;AAC5E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,OAAO,MAAM;AACjB,QAAI;AAAE,gBAAU,aAAa,UAAU,UAAU,UAAU,IAAI;AAAA,IAAG,SAAS,GAAG;AAAA,IAAC;AAC/E,cAAU,IAAI;AAAG,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EAC1D;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACtE,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,sBAAsB,kBAAO,IAAU;AAAA,IACjE,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,MAAK;AAAA,IACzC,oBAAC,YAAO,WAAU,oBAAmB,SAAS,MAAO,UAAA,SAAS,MAAM,OAAA,CAAO;AAAA,EAAA,GAC7E;AAEJ;"}
+{"version":3,"file":"Snippet.js","sources":["../../../src/components/code/Snippet.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_SNIPPET_CSS = `\n.ax-snippet { display: flex; align-items: center; gap: 8px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-2); padding: 6px 6px 6px 12px; font-family: var(--font-mono); }\n[data-theme=\"dark\"] .ax-snippet { background: var(--bg-0); }\n.ax-snippet__prompt { color: var(--text-faint); user-select: none; }\n.ax-snippet__code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font-size: var(--text-sm); color: var(--text-body); }\n.ax-snippet__copy { appearance: none; background: none; border: 1px solid var(--border-default); cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 11px; padding: 4px 8px; border-radius: var(--radius-1); flex: none; transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out); }\n.ax-snippet__copy:hover { color: var(--text-body); border-color: var(--border-strong); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-snippet-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-snippet-css\";\n  s.textContent = AX_SNIPPET_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Snippet({ code = \"\", prompt = \"$\", className = \"\", ...rest }) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    try {\n      navigator.clipboard && navigator.clipboard.writeText(code);\n    } catch (e) {}\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-snippet\", className].filter(Boolean).join(\" \")} {...rest}>\n      {prompt ? <span className=\"ax-snippet__prompt\">{prompt}</span> : null}\n      <code className=\"ax-snippet__code\">{code}</code>\n      <button className=\"ax-snippet__copy\" onClick={copy}>\n        {copied ? \"✓\" : \"copy\"}\n      </button>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,OAAO,IAAI,SAAS,KAAK,YAAY,IAAI,GAAG,QAAQ;AAC5E,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,OAAO,MAAM;AACjB,QAAI;AACF,gBAAU,aAAa,UAAU,UAAU,UAAU,IAAI;AAAA,IAC3D,SAAS,GAAG;AAAA,IAAC;AACb,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EACzC;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACtE,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,sBAAsB,kBAAO,IAAU;AAAA,IACjE,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,MAAK;AAAA,IACzC,oBAAC,YAAO,WAAU,oBAAmB,SAAS,MAC3C,UAAA,SAAS,MAAM,OAAA,CAClB;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/code/Terminal.js

@@ -1,10 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState } from "react";
 const AX_TERMINAL_CSS = `
-.ax-terminal { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--bg-0); font-family: var(--font-mono); }
-[data-theme="light"] .ax-terminal { background: #0A0A0B; }
-.ax-terminal__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-1); border-bottom: 1px solid var(--border-default); }
-[data-theme="light"] .ax-terminal__bar { background: #18181B; border-color: rgba(255,255,255,0.1); }
+.ax-terminal { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: #0A0A0B; font-family: var(--font-mono); }
+.ax-terminal__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #18181B; border-bottom: 1px solid rgba(255,255,255,0.1); }
 .ax-terminal__dots { display: flex; gap: 6px; }
 .ax-terminal__dot { width: 9px; height: 9px; border-radius: var(--radius-1); background: rgba(255,255,255,0.18); }
 .ax-terminal__title { font-size: 11px; color: #A1A1AA; letter-spacing: 0.04em; flex: 1; text-align: center; }
@@ -26,10 +24,19 @@ if (typeof document !== "undefined" && !document.getElementById("ax-terminal-css
   s.textContent = AX_TERMINAL_CSS;
   document.head.appendChild(s);
 }
-function Terminal({ title = "bash", lines = [], prompt = "$", cursor = false, className = "", ...rest }) {
+function Terminal({
+  title = "bash",
+  lines = [],
+  prompt = "$",
+  cursor = false,
+  className = "",
+  ...rest
+}) {
   const [copied, setCopied] = useState(false);
   const copy = () => {
-    const text = lines.map((l) => typeof l === "string" ? l : l.type === "command" ? prompt + " " + l.text : l.text).join("\n");
+    const text = lines.map(
+      (l) => typeof l === "string" ? l : l.type === "command" ? prompt + " " + l.text : l.text
+    ).join("\n");
     try {
       navigator.clipboard && navigator.clipboard.writeText(text);
     } catch (e) {
@@ -60,10 +67,17 @@ function Terminal({ title = "bash", lines = [], prompt = "$", cursor = false, cl
           cursor && isLast ? /* @__PURE__ */ jsx("span", { className: "ax-terminal__cursor" }) : null
         ] }, i);
       }
-      return /* @__PURE__ */ jsxs("div", { className: "ax-terminal__line ax-terminal__" + (line.type === "error" ? "err" : "out"), children: [
-        line.text,
-        cursor && isLast ? /* @__PURE__ */ jsx("span", { className: "ax-terminal__cursor" }) : null
-      ] }, i);
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "ax-terminal__line ax-terminal__" + (line.type === "error" ? "err" : "out"),
+          children: [
+            line.text,
+            cursor && isLast ? /* @__PURE__ */ jsx("span", { className: "ax-terminal__cursor" }) : null
+          ]
+        },
+        i
+      );
     }) })
   ] });
 }

package/dist/components/code/Terminal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Terminal.js","sources":["../../../src/components/code/Terminal.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_TERMINAL_CSS = `\n.ax-terminal { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--bg-0); font-family: var(--font-mono); }\n[data-theme=\"light\"] .ax-terminal { background: #0A0A0B; }\n.ax-terminal__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-1); border-bottom: 1px solid var(--border-default); }\n[data-theme=\"light\"] .ax-terminal__bar { background: #18181B; border-color: rgba(255,255,255,0.1); }\n.ax-terminal__dots { display: flex; gap: 6px; }\n.ax-terminal__dot { width: 9px; height: 9px; border-radius: var(--radius-1); background: rgba(255,255,255,0.18); }\n.ax-terminal__title { font-size: 11px; color: #A1A1AA; letter-spacing: 0.04em; flex: 1; text-align: center; }\n.ax-terminal__copy { appearance: none; background: none; border: none; cursor: pointer; color: #63636B; font-size: 11px; padding: 2px 6px; border-radius: var(--radius-1); }\n.ax-terminal__copy:hover { color: #F4F4F5; }\n.ax-terminal__body { padding: 14px 16px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.7; }\n.ax-terminal__line { white-space: pre; color: #E4E4E7; }\n.ax-terminal__prompt { color: #3ECF8E; user-select: none; }\n.ax-terminal__cmd { color: #F4F4F5; }\n.ax-terminal__out { color: #A1A1AA; }\n.ax-terminal__err { color: #E5484D; }\n.ax-terminal__cursor { display: inline-block; width: 0.5em; height: 1em; background: #3ECF8E; vertical-align: text-bottom; animation: ax-term-blink 1.1s steps(1) infinite; }\n@keyframes ax-term-blink { 50% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .ax-terminal__cursor { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-terminal-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-terminal-css\";\n  s.textContent = AX_TERMINAL_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Terminal({ title = \"bash\", lines = [], prompt = \"$\", cursor = false, className = \"\", ...rest }) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    const text = lines.map((l) => (typeof l === \"string\" ? l : (l.type === \"command\" ? prompt + \" \" + l.text : l.text))).join(\"\\n\");\n    try { navigator.clipboard && navigator.clipboard.writeText(text); } catch (e) {}\n    setCopied(true); setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-terminal\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-terminal__bar\">\n        <span className=\"ax-terminal__dots\"><span className=\"ax-terminal__dot\"></span><span className=\"ax-terminal__dot\"></span><span className=\"ax-terminal__dot\"></span></span>\n        <span className=\"ax-terminal__title\">{title}</span>\n        <button className=\"ax-terminal__copy\" onClick={copy}>{copied ? \"copied ✓\" : \"copy\"}</button>\n      </div>\n      <div className=\"ax-terminal__body\">\n        {lines.map((l, i) => {\n          const line = typeof l === \"string\" ? { type: \"command\", text: l } : l;\n          const isLast = i === lines.length - 1;\n          if (line.type === \"command\") {\n            return <div className=\"ax-terminal__line\" key={i}><span className=\"ax-terminal__prompt\">{prompt} </span><span className=\"ax-terminal__cmd\">{line.text}</span>{cursor && isLast ? <span className=\"ax-terminal__cursor\"></span> : null}</div>;\n          }\n          return <div className={\"ax-terminal__line ax-terminal__\" + (line.type === \"error\" ? \"err\" : \"out\")} key={i}>{line.text}{cursor && isLast ? <span className=\"ax-terminal__cursor\"></span> : null}</div>;\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBxB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,iBAAiB,GAAG;AAClF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS,EAAE,QAAQ,QAAQ,QAAQ,CAAA,GAAI,SAAS,KAAK,SAAS,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC9G,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,OAAO,MAAM;AACjB,UAAM,OAAO,MAAM,IAAI,CAAC,MAAO,OAAO,MAAM,WAAW,IAAK,EAAE,SAAS,YAAY,SAAS,MAAM,EAAE,OAAO,EAAE,IAAM,EAAE,KAAK,IAAI;AAC9H,QAAI;AAAE,gBAAU,aAAa,UAAU,UAAU,UAAU,IAAI;AAAA,IAAG,SAAS,GAAG;AAAA,IAAC;AAC/E,cAAU,IAAI;AAAG,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EAC1D;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,QAAO,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,QAAO,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,MAAA,GAAO;AAAA,MAClK,oBAAC,QAAA,EAAK,WAAU,sBAAsB,UAAA,OAAM;AAAA,MAC5C,oBAAC,YAAO,WAAU,qBAAoB,SAAS,MAAO,UAAA,SAAS,aAAa,OAAA,CAAO;AAAA,IAAA,GACrF;AAAA,IACA,oBAAC,SAAI,WAAU,qBACZ,gBAAM,IAAI,CAAC,GAAG,MAAM;AACnB,YAAM,OAAO,OAAO,MAAM,WAAW,EAAE,MAAM,WAAW,MAAM,EAAA,IAAM;AACpE,YAAM,SAAS,MAAM,MAAM,SAAS;AACpC,UAAI,KAAK,SAAS,WAAW;AAC3B,eAAO,qBAAC,OAAA,EAAI,WAAU,qBAA4B,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,uBAAuB,UAAA;AAAA,YAAA;AAAA,YAAO;AAAA,UAAA,GAAC;AAAA,UAAO,oBAAC,QAAA,EAAK,WAAU,oBAAoB,eAAK,MAAK;AAAA,UAAQ,UAAU,SAAS,oBAAC,QAAA,EAAK,WAAU,uBAAsB,IAAU;AAAA,QAAA,EAAA,GAAlL,CAAuL;AAAA,MACxO;AACA,aAAO,qBAAC,SAAI,WAAW,qCAAqC,KAAK,SAAS,UAAU,QAAQ,QAAiB,UAAA;AAAA,QAAA,KAAK;AAAA,QAAM,UAAU,SAAS,oBAAC,QAAA,EAAK,WAAU,uBAAsB,IAAU;AAAA,MAAA,EAAA,GAAlF,CAAuF;AAAA,IAClM,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"Terminal.js","sources":["../../../src/components/code/Terminal.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_TERMINAL_CSS = `\n.ax-terminal { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: #0A0A0B; font-family: var(--font-mono); }\n.ax-terminal__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #18181B; border-bottom: 1px solid rgba(255,255,255,0.1); }\n.ax-terminal__dots { display: flex; gap: 6px; }\n.ax-terminal__dot { width: 9px; height: 9px; border-radius: var(--radius-1); background: rgba(255,255,255,0.18); }\n.ax-terminal__title { font-size: 11px; color: #A1A1AA; letter-spacing: 0.04em; flex: 1; text-align: center; }\n.ax-terminal__copy { appearance: none; background: none; border: none; cursor: pointer; color: #63636B; font-size: 11px; padding: 2px 6px; border-radius: var(--radius-1); }\n.ax-terminal__copy:hover { color: #F4F4F5; }\n.ax-terminal__body { padding: 14px 16px; overflow-x: auto; font-size: var(--text-sm); line-height: 1.7; }\n.ax-terminal__line { white-space: pre; color: #E4E4E7; }\n.ax-terminal__prompt { color: #3ECF8E; user-select: none; }\n.ax-terminal__cmd { color: #F4F4F5; }\n.ax-terminal__out { color: #A1A1AA; }\n.ax-terminal__err { color: #E5484D; }\n.ax-terminal__cursor { display: inline-block; width: 0.5em; height: 1em; background: #3ECF8E; vertical-align: text-bottom; animation: ax-term-blink 1.1s steps(1) infinite; }\n@keyframes ax-term-blink { 50% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .ax-terminal__cursor { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-terminal-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-terminal-css\";\n  s.textContent = AX_TERMINAL_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Terminal({\n  title = \"bash\",\n  lines = [],\n  prompt = \"$\",\n  cursor = false,\n  className = \"\",\n  ...rest\n}) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    const text = lines\n      .map((l) =>\n        typeof l === \"string\" ? l : l.type === \"command\" ? prompt + \" \" + l.text : l.text,\n      )\n      .join(\"\\n\");\n    try {\n      navigator.clipboard && navigator.clipboard.writeText(text);\n    } catch (e) {}\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-terminal\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-terminal__bar\">\n        <span className=\"ax-terminal__dots\">\n          <span className=\"ax-terminal__dot\"></span>\n          <span className=\"ax-terminal__dot\"></span>\n          <span className=\"ax-terminal__dot\"></span>\n        </span>\n        <span className=\"ax-terminal__title\">{title}</span>\n        <button className=\"ax-terminal__copy\" onClick={copy}>\n          {copied ? \"copied ✓\" : \"copy\"}\n        </button>\n      </div>\n      <div className=\"ax-terminal__body\">\n        {lines.map((l, i) => {\n          const line = typeof l === \"string\" ? { type: \"command\", text: l } : l;\n          const isLast = i === lines.length - 1;\n          if (line.type === \"command\") {\n            return (\n              <div className=\"ax-terminal__line\" key={i}>\n                <span className=\"ax-terminal__prompt\">{prompt} </span>\n                <span className=\"ax-terminal__cmd\">{line.text}</span>\n                {cursor && isLast ? <span className=\"ax-terminal__cursor\"></span> : null}\n              </div>\n            );\n          }\n          return (\n            <div\n              className={\n                \"ax-terminal__line ax-terminal__\" + (line.type === \"error\" ? \"err\" : \"out\")\n              }\n              key={i}\n            >\n              {line.text}\n              {cursor && isLast ? <span className=\"ax-terminal__cursor\"></span> : null}\n            </div>\n          );\n        })}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBxB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,iBAAiB,GAAG;AAClF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS;AAAA,EACvB,QAAQ;AAAA,EACR,QAAQ,CAAA;AAAA,EACR,SAAS;AAAA,EACT,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,QAAM,OAAO,MAAM;AACjB,UAAM,OAAO,MACV;AAAA,MAAI,CAAC,MACJ,OAAO,MAAM,WAAW,IAAI,EAAE,SAAS,YAAY,SAAS,MAAM,EAAE,OAAO,EAAE;AAAA,IAAA,EAE9E,KAAK,IAAI;AACZ,QAAI;AACF,gBAAU,aAAa,UAAU,UAAU,UAAU,IAAI;AAAA,IAC3D,SAAS,GAAG;AAAA,IAAC;AACb,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EACzC;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,qBACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,QACnC,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,QACnC,oBAAC,QAAA,EAAK,WAAU,mBAAA,CAAmB;AAAA,MAAA,GACrC;AAAA,MACA,oBAAC,QAAA,EAAK,WAAU,sBAAsB,UAAA,OAAM;AAAA,MAC5C,oBAAC,YAAO,WAAU,qBAAoB,SAAS,MAC5C,UAAA,SAAS,aAAa,OAAA,CACzB;AAAA,IAAA,GACF;AAAA,IACA,oBAAC,SAAI,WAAU,qBACZ,gBAAM,IAAI,CAAC,GAAG,MAAM;AACnB,YAAM,OAAO,OAAO,MAAM,WAAW,EAAE,MAAM,WAAW,MAAM,EAAA,IAAM;AACpE,YAAM,SAAS,MAAM,MAAM,SAAS;AACpC,UAAI,KAAK,SAAS,WAAW;AAC3B,eACE,qBAAC,OAAA,EAAI,WAAU,qBACb,UAAA;AAAA,UAAA,qBAAC,QAAA,EAAK,WAAU,uBAAuB,UAAA;AAAA,YAAA;AAAA,YAAO;AAAA,UAAA,GAAC;AAAA,UAC/C,oBAAC,QAAA,EAAK,WAAU,oBAAoB,eAAK,MAAK;AAAA,UAC7C,UAAU,SAAS,oBAAC,QAAA,EAAK,WAAU,uBAAsB,IAAU;AAAA,QAAA,EAAA,GAH9B,CAIxC;AAAA,MAEJ;AACA,aACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WACE,qCAAqC,KAAK,SAAS,UAAU,QAAQ;AAAA,UAItE,UAAA;AAAA,YAAA,KAAK;AAAA,YACL,UAAU,SAAS,oBAAC,QAAA,EAAK,WAAU,uBAAsB,IAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAH/D;AAAA,MAAA;AAAA,IAMX,CAAC,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/code/WebPreview.js

@@ -5,14 +5,14 @@ const AX_WEBPREVIEW_CSS = `
 .ax-webpreview__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-default); }
 .ax-webpreview__nav { display: flex; gap: 4px; }
 .ax-webpreview__navbtn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); border-radius: var(--radius-1); }
-.ax-webpreview__url { flex: 1; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; }
-[data-theme="light"] .ax-webpreview__url { background: var(--bg-1); }
+.ax-webpreview__url { flex: 1; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; }
+[data-theme="dark"] .ax-webpreview__url { background: var(--bg-0); }
 .ax-webpreview__lock { color: var(--ok); flex: none; }
 .ax-webpreview__urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .ax-webpreview__refresh { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: var(--radius-1); flex: none; }
 .ax-webpreview__refresh:hover { color: var(--text-body); }
-.ax-webpreview__viewport { background: var(--bg-0); min-height: 160px; }
-[data-theme="light"] .ax-webpreview__viewport { background: #fff; }
+.ax-webpreview__viewport { background: #fff; min-height: 160px; }
+[data-theme="dark"] .ax-webpreview__viewport { background: var(--bg-0); }
 .ax-webpreview__viewport iframe { width: 100%; height: 100%; min-height: 160px; border: none; display: block; }
 `;
 if (typeof document !== "undefined" && !document.getElementById("ax-webpreview-css")) {
@@ -21,12 +21,46 @@ if (typeof document !== "undefined" && !document.getElementById("ax-webpreview-c
   s.textContent = AX_WEBPREVIEW_CSS;
   document.head.appendChild(s);
 }
-const Lock = /* @__PURE__ */ jsxs("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
-] });
-const Refresh = /* @__PURE__ */ jsx("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5" }) });
-function WebPreview({ url = "localhost:3000", height = 200, src, srcDoc, children, className = "", ...rest }) {
+const Lock = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "11",
+    height: "11",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.4",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ jsx("rect", { x: "3", y: "11", width: "18", height: "11", rx: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M7 11V7a5 5 0 0 1 10 0v4" })
+    ]
+  }
+);
+const Refresh = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "13",
+    height: "13",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5" })
+  }
+);
+function WebPreview({
+  url = "localhost:3000",
+  height = 200,
+  src,
+  srcDoc,
+  children,
+  className = "",
+  ...rest
+}) {
   return /* @__PURE__ */ jsxs("div", { className: ["ax-webpreview", className].filter(Boolean).join(" "), ...rest, children: [
     /* @__PURE__ */ jsxs("div", { className: "ax-webpreview__bar", children: [
       /* @__PURE__ */ jsxs("span", { className: "ax-webpreview__nav", children: [

package/dist/components/code/WebPreview.js.map

@@ -1 +1 @@
-{"version":3,"file":"WebPreview.js","sources":["../../../src/components/code/WebPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_WEBPREVIEW_CSS = `\n.ax-webpreview { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); }\n.ax-webpreview__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-default); }\n.ax-webpreview__nav { display: flex; gap: 4px; }\n.ax-webpreview__navbtn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); border-radius: var(--radius-1); }\n.ax-webpreview__url { flex: 1; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--bg-0); border: 1px solid var(--border-default); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; }\n[data-theme=\"light\"] .ax-webpreview__url { background: var(--bg-1); }\n.ax-webpreview__lock { color: var(--ok); flex: none; }\n.ax-webpreview__urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-webpreview__refresh { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: var(--radius-1); flex: none; }\n.ax-webpreview__refresh:hover { color: var(--text-body); }\n.ax-webpreview__viewport { background: var(--bg-0); min-height: 160px; }\n[data-theme=\"light\"] .ax-webpreview__viewport { background: #fff; }\n.ax-webpreview__viewport iframe { width: 100%; height: 100%; min-height: 160px; border: none; display: block; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-webpreview-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-webpreview-css\";\n  s.textContent = AX_WEBPREVIEW_CSS;\n  document.head.appendChild(s);\n}\n\nconst Lock = <svg width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"></rect><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path></svg>;\nconst Refresh = <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5\"></path></svg>;\n\nexport function WebPreview({ url = \"localhost:3000\", height = 200, src, srcDoc, children, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-webpreview\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-webpreview__bar\">\n        <span className=\"ax-webpreview__nav\">\n          <span className=\"ax-webpreview__navbtn\">‹</span>\n          <span className=\"ax-webpreview__navbtn\">›</span>\n        </span>\n        <span className=\"ax-webpreview__url\">\n          <span className=\"ax-webpreview__lock\">{Lock}</span>\n          <span className=\"ax-webpreview__urltext\">{url}</span>\n        </span>\n        <button className=\"ax-webpreview__refresh\">{Refresh}</button>\n      </div>\n      <div className=\"ax-webpreview__viewport\" style={{ height }}>\n        {children ? children : <iframe src={src} srcDoc={srcDoc} title={url} sandbox=\"allow-scripts\"></iframe>}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,OAAO,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,GAAO;AAChQ,MAAM,8BAAW,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,+DAAA,CAA+D,EAAA,CAAO;AAEtO,SAAS,WAAW,EAAE,MAAM,kBAAkB,SAAS,KAAK,KAAK,QAAQ,UAAU,YAAY,IAAI,GAAG,QAAQ;AACnH,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC1E,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,sBACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,KAAC;AAAA,QACzC,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,IAAA,CAAC;AAAA,MAAA,GAC3C;AAAA,MACA,qBAAC,QAAA,EAAK,WAAU,sBACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,uBAAuB,UAAA,MAAK;AAAA,QAC5C,oBAAC,QAAA,EAAK,WAAU,0BAA0B,UAAA,IAAA,CAAI;AAAA,MAAA,GAChD;AAAA,MACA,oBAAC,UAAA,EAAO,WAAU,0BAA0B,UAAA,QAAA,CAAQ;AAAA,IAAA,GACtD;AAAA,wBACC,OAAA,EAAI,WAAU,2BAA0B,OAAO,EAAE,UAC/C,UAAA,WAAW,WAAW,oBAAC,YAAO,KAAU,QAAgB,OAAO,KAAK,SAAQ,iBAAgB,EAAA,CAC/F;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"WebPreview.js","sources":["../../../src/components/code/WebPreview.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_WEBPREVIEW_CSS = `\n.ax-webpreview { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); }\n.ax-webpreview__bar { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--border-default); }\n.ax-webpreview__nav { display: flex; gap: 4px; }\n.ax-webpreview__navbtn { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-faint); border-radius: var(--radius-1); }\n.ax-webpreview__url { flex: 1; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; background: var(--bg-1); border: 1px solid var(--border-default); border-radius: var(--radius-1); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-muted); overflow: hidden; }\n[data-theme=\"dark\"] .ax-webpreview__url { background: var(--bg-0); }\n.ax-webpreview__lock { color: var(--ok); flex: none; }\n.ax-webpreview__urltext { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-webpreview__refresh { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); padding: 4px; border-radius: var(--radius-1); flex: none; }\n.ax-webpreview__refresh:hover { color: var(--text-body); }\n.ax-webpreview__viewport { background: #fff; min-height: 160px; }\n[data-theme=\"dark\"] .ax-webpreview__viewport { background: var(--bg-0); }\n.ax-webpreview__viewport iframe { width: 100%; height: 100%; min-height: 160px; border: none; display: block; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-webpreview-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-webpreview-css\";\n  s.textContent = AX_WEBPREVIEW_CSS;\n  document.head.appendChild(s);\n}\n\nconst Lock = (\n  <svg\n    width=\"11\"\n    height=\"11\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2.4\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"></rect>\n    <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"></path>\n  </svg>\n);\nconst Refresh = (\n  <svg\n    width=\"13\"\n    height=\"13\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"2\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n  >\n    <path d=\"M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8M21 3v5h-5\"></path>\n  </svg>\n);\n\nexport function WebPreview({\n  url = \"localhost:3000\",\n  height = 200,\n  src,\n  srcDoc,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  return (\n    <div className={[\"ax-webpreview\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-webpreview__bar\">\n        <span className=\"ax-webpreview__nav\">\n          <span className=\"ax-webpreview__navbtn\">‹</span>\n          <span className=\"ax-webpreview__navbtn\">›</span>\n        </span>\n        <span className=\"ax-webpreview__url\">\n          <span className=\"ax-webpreview__lock\">{Lock}</span>\n          <span className=\"ax-webpreview__urltext\">{url}</span>\n        </span>\n        <button className=\"ax-webpreview__refresh\">{Refresh}</button>\n      </div>\n      <div className=\"ax-webpreview__viewport\" style={{ height }}>\n        {children ? (\n          children\n        ) : (\n          <iframe src={src} srcDoc={srcDoc} title={url} sandbox=\"allow-scripts\"></iframe>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgB1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,OACJ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,MAAK,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,MACjD,oBAAC,QAAA,EAAK,GAAE,2BAAA,CAA2B;AAAA,IAAA;AAAA,EAAA;AACrC;AAEF,MAAM,UACJ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IACZ,eAAc;AAAA,IACd,gBAAe;AAAA,IAEf,UAAA,oBAAC,QAAA,EAAK,GAAE,+DAAA,CAA+D;AAAA,EAAA;AACzE;AAGK,SAAS,WAAW;AAAA,EACzB,MAAM;AAAA,EACN,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC1E,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,sBACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,KAAC;AAAA,QACzC,oBAAC,QAAA,EAAK,WAAU,yBAAwB,UAAA,IAAA,CAAC;AAAA,MAAA,GAC3C;AAAA,MACA,qBAAC,QAAA,EAAK,WAAU,sBACd,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,uBAAuB,UAAA,MAAK;AAAA,QAC5C,oBAAC,QAAA,EAAK,WAAU,0BAA0B,UAAA,IAAA,CAAI;AAAA,MAAA,GAChD;AAAA,MACA,oBAAC,UAAA,EAAO,WAAU,0BAA0B,UAAA,QAAA,CAAQ;AAAA,IAAA,GACtD;AAAA,wBACC,OAAA,EAAI,WAAU,2BAA0B,OAAO,EAAE,UAC/C,UAAA,WACC,WAEA,oBAAC,YAAO,KAAU,QAAgB,OAAO,KAAK,SAAQ,iBAAgB,EAAA,CAE1E;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/display/Skeleton.js

@@ -7,11 +7,11 @@ const AX_SKELETON_CSS = `
 }
 .ax-skeleton::after {
   content: ""; position: absolute; inset: 0;
-  background: linear-gradient(90deg, transparent, var(--bg-3), transparent);
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
   transform: translateX(-100%);
   animation: ax-shimmer 1.4s var(--ease-out) infinite;
 }
-[data-theme="light"] .ax-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent); }
+[data-theme="dark"] .ax-skeleton::after { background: linear-gradient(90deg, transparent, var(--bg-3), transparent); }
 .ax-skeleton--text { height: 0.7em; margin: 0.2em 0; }
 .ax-skeleton--circle { border-radius: var(--radius-2); }
 @keyframes ax-shimmer { 100% { transform: translateX(100%); } }
@@ -23,7 +23,15 @@ if (typeof document !== "undefined" && !document.getElementById("ax-skeleton-css
   s.textContent = AX_SKELETON_CSS;
   document.head.appendChild(s);
 }
-function Skeleton({ variant = "block", width, height, lines = 1, className = "", style = {}, ...rest }) {
+function Skeleton({
+  variant = "block",
+  width,
+  height,
+  lines = 1,
+  className = "",
+  style = {},
+  ...rest
+}) {
   if (variant === "text" && lines > 1) {
     return /* @__PURE__ */ jsx("div", { className, ...rest, children: Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
       "span",
@@ -34,7 +42,12 @@ function Skeleton({ variant = "block", width, height, lines = 1, className = "",
       i
     )) });
   }
-  const cls = ["ax-skeleton", variant === "text" ? "ax-skeleton--text" : "", variant === "circle" ? "ax-skeleton--circle" : "", className].filter(Boolean).join(" ");
+  const cls = [
+    "ax-skeleton",
+    variant === "text" ? "ax-skeleton--text" : "",
+    variant === "circle" ? "ax-skeleton--circle" : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("span", { className: cls, style: { width, height, ...style }, ...rest });
 }
 export {

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

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

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

@@ -0,0 +1,12 @@
+/**
+ * Connection/health status chip built on Badge. Maps a status string to the
+ * right variant + dot + label. idle→neutral, testing→neutral·dot, ok→ok·dot,
+ * error→danger·dot.
+ */
+export interface StatusPillProps {
+  /** @default "idle" */
+  status?: "idle" | "testing" | "ok" | "error";
+  /** Override the per-state label text. */
+  labels?: Partial<Record<"idle" | "testing" | "ok" | "error", string>>;
+}
+export declare function StatusPill(props: StatusPillProps): JSX.Element;

package/dist/components/display/StatusPill.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import { Badge } from "./Badge.js";
+function StatusPill({ status = "idle", labels = {}, ...rest }) {
+  const L = { idle: "未连接", testing: "测试中", ok: "已连接", error: "连接失败", ...labels };
+  if (status === "ok")
+    return /* @__PURE__ */ jsx(Badge, { variant: "ok", dot: true, ...rest, children: L.ok });
+  if (status === "error")
+    return /* @__PURE__ */ jsx(Badge, { variant: "danger", dot: true, ...rest, children: L.error });
+  if (status === "testing")
+    return /* @__PURE__ */ jsx(Badge, { variant: "neutral", dot: true, ...rest, children: L.testing });
+  return /* @__PURE__ */ jsx(Badge, { variant: "neutral", ...rest, children: L.idle });
+}
+export {
+  StatusPill
+};
+//# sourceMappingURL=StatusPill.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusPill.js","sources":["../../../src/components/display/StatusPill.jsx"],"sourcesContent":["import React from \"react\";\nimport { Badge } from \"./Badge.jsx\";\n\n// StatusPill — connection/health status mapped onto the DS Badge.\n// Four states: idle (未连接) · testing (测试中) · ok (已连接) · error (连接失败).\n// Labels are overridable for non-connection uses.\nexport function StatusPill({ status = \"idle\", labels = {}, ...rest }) {\n  const L = { idle: \"未连接\", testing: \"测试中\", ok: \"已连接\", error: \"连接失败\", ...labels };\n  if (status === \"ok\")\n    return (\n      <Badge variant=\"ok\" dot {...rest}>\n        {L.ok}\n      </Badge>\n    );\n  if (status === \"error\")\n    return (\n      <Badge variant=\"danger\" dot {...rest}>\n        {L.error}\n      </Badge>\n    );\n  if (status === \"testing\")\n    return (\n      <Badge variant=\"neutral\" dot {...rest}>\n        {L.testing}\n      </Badge>\n    );\n  return (\n    <Badge variant=\"neutral\" {...rest}>\n      {L.idle}\n    </Badge>\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,WAAW,EAAE,SAAS,QAAQ,SAAS,CAAA,GAAI,GAAG,QAAQ;AACpE,QAAM,IAAI,EAAE,MAAM,OAAO,SAAS,OAAO,IAAI,OAAO,OAAO,QAAQ,GAAG,OAAA;AACtE,MAAI,WAAW;AACb,WACE,oBAAC,SAAM,SAAQ,MAAK,KAAG,MAAE,GAAG,MACzB,UAAA,EAAE,GAAA,CACL;AAEJ,MAAI,WAAW;AACb,WACE,oBAAC,SAAM,SAAQ,UAAS,KAAG,MAAE,GAAG,MAC7B,UAAA,EAAE,MAAA,CACL;AAEJ,MAAI,WAAW;AACb,WACE,oBAAC,SAAM,SAAQ,WAAU,KAAG,MAAE,GAAG,MAC9B,UAAA,EAAE,QAAA,CACL;AAEJ,6BACG,OAAA,EAAM,SAAQ,WAAW,GAAG,MAC1B,YAAE,MACL;AAEJ;"}

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

@@ -0,0 +1,21 @@
+/**
+ * Masked credential input with show/hide toggle. Mono by default (keys read
+ * better in mono). Pairs with a mono ALL-CAPS label and an optional hint /
+ * error line. Built on the bundle's `.ax-input`.
+ */
+export interface SecretFieldProps {
+  /** Mono ALL-CAPS label above the field. */
+  label?: string;
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Helper line below the field (hidden when `error` is set). */
+  hint?: React.ReactNode;
+  /** Error line below the field; also flags the input red. */
+  error?: string;
+  /** Mono input font. @default true */
+  mono?: boolean;
+  /** @default "off" */
+  autoComplete?: string;
+}
+export declare function SecretField(props: SecretFieldProps): JSX.Element;

package/dist/components/inputs/SecretField.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Icon } from "../utilities/Icon.js";
+const AX_SECRETFIELD_CSS = `
+.s-field__label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
+.s-field__hint { font-size: var(--text-xs); color: var(--text-faint); margin: 6px 0 0; line-height: var(--leading-snug); }
+.s-field__hint--err { color: var(--danger); }
+.s-secret { position: relative; }
+.s-secret .ax-input { padding-right: 42px; font-family: var(--font-mono); letter-spacing: 0.02em; }
+.s-secret__eye { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; padding: 0;
+  display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer;
+  color: var(--text-faint); border-radius: var(--radius-1); transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }
+.s-secret__eye:hover { color: var(--text-body); background: var(--surface-raised); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-secretfield-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-secretfield-css";
+  s.textContent = AX_SECRETFIELD_CSS;
+  document.head.appendChild(s);
+}
+function SecretField({
+  label,
+  value,
+  onChange,
+  placeholder,
+  hint,
+  error,
+  mono = true,
+  autoComplete = "off",
+  ...rest
+}) {
+  const [show, setShow] = useState(false);
+  const inputId = "secret-" + String(label || "").replace(/\s+/g, "-").toLowerCase();
+  return /* @__PURE__ */ jsxs("div", { ...rest, children: [
+    label ? /* @__PURE__ */ jsx("label", { className: "s-field__label ax-label", htmlFor: inputId, children: label }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "s-secret", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          type: show ? "text" : "password",
+          className: "ax-input" + (mono ? " ax-input--mono" : "") + (error ? " ax-input--error" : ""),
+          value,
+          placeholder,
+          autoComplete,
+          spellCheck: "false",
+          onChange: (e) => onChange && onChange(e.target.value)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "s-secret__eye",
+          onClick: () => setShow((v) => !v),
+          onMouseDown: (e) => e.preventDefault(),
+          "aria-label": show ? "隐藏" : "显示",
+          title: show ? "隐藏" : "显示",
+          tabIndex: -1,
+          children: /* @__PURE__ */ jsx(Icon, { name: show ? "eyeOff" : "eye", size: 15 })
+        }
+      )
+    ] }),
+    error ? /* @__PURE__ */ jsx("p", { className: "s-field__hint s-field__hint--err", children: error }) : hint ? /* @__PURE__ */ jsx("p", { className: "s-field__hint", children: hint }) : null
+  ] });
+}
+export {
+  SecretField
+};
+//# sourceMappingURL=SecretField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SecretField.js","sources":["../../../src/components/inputs/SecretField.jsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { Icon } from \"../utilities/Icon.jsx\";\n\n// SecretField — masked credential input with show/hide and an optional\n// \"never exposed\" hint line. Builds on the bundle's .ax-input. Owns the\n// shared field-level chrome (.s-secret / .s-field__label / .s-field__hint)\n// used across the settings surfaces.\nconst AX_SECRETFIELD_CSS = `\n.s-field__label { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }\n.s-field__hint { font-size: var(--text-xs); color: var(--text-faint); margin: 6px 0 0; line-height: var(--leading-snug); }\n.s-field__hint--err { color: var(--danger); }\n.s-secret { position: relative; }\n.s-secret .ax-input { padding-right: 42px; font-family: var(--font-mono); letter-spacing: 0.02em; }\n.s-secret__eye { position: absolute; right: 6px; bottom: 6px; width: 24px; height: 24px; padding: 0;\n  display: flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer;\n  color: var(--text-faint); border-radius: var(--radius-1); transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out); }\n.s-secret__eye:hover { color: var(--text-body); background: var(--surface-raised); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-secretfield-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-secretfield-css\";\n  s.textContent = AX_SECRETFIELD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function SecretField({\n  label,\n  value,\n  onChange,\n  placeholder,\n  hint,\n  error,\n  mono = true,\n  autoComplete = \"off\",\n  ...rest\n}) {\n  const [show, setShow] = useState(false);\n  const inputId =\n    \"secret-\" +\n    String(label || \"\")\n      .replace(/\\s+/g, \"-\")\n      .toLowerCase();\n  return (\n    <div {...rest}>\n      {label ? (\n        <label className=\"s-field__label ax-label\" htmlFor={inputId}>\n          {label}\n        </label>\n      ) : null}\n      <div className=\"s-secret\">\n        <input\n          id={inputId}\n          type={show ? \"text\" : \"password\"}\n          className={\n            \"ax-input\" + (mono ? \" ax-input--mono\" : \"\") + (error ? \" ax-input--error\" : \"\")\n          }\n          value={value}\n          placeholder={placeholder}\n          autoComplete={autoComplete}\n          spellCheck=\"false\"\n          onChange={(e) => onChange && onChange(e.target.value)}\n        />\n        <button\n          type=\"button\"\n          className=\"s-secret__eye\"\n          onClick={() => setShow((v) => !v)}\n          onMouseDown={(e) => e.preventDefault()}\n          aria-label={show ? \"隐藏\" : \"显示\"}\n          title={show ? \"隐藏\" : \"显示\"}\n          tabIndex={-1}\n        >\n          <Icon name={show ? \"eyeOff\" : \"eye\"} size={15} />\n        </button>\n      </div>\n      {error ? (\n        <p className=\"s-field__hint s-field__hint--err\">{error}</p>\n      ) : hint ? (\n        <p className=\"s-field__hint\">{hint}</p>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAOA,MAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY3B,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;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,eAAe;AAAA,EACf,GAAG;AACL,GAAG;AACD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,UACJ,YACA,OAAO,SAAS,EAAE,EACf,QAAQ,QAAQ,GAAG,EACnB,YAAA;AACL,SACE,qBAAC,OAAA,EAAK,GAAG,MACN,UAAA;AAAA,IAAA,4BACE,SAAA,EAAM,WAAU,2BAA0B,SAAS,SACjD,iBACH,IACE;AAAA,IACJ,qBAAC,OAAA,EAAI,WAAU,YACb,UAAA;AAAA,MAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAI;AAAA,UACJ,MAAM,OAAO,SAAS;AAAA,UACtB,WACE,cAAc,OAAO,oBAAoB,OAAO,QAAQ,qBAAqB;AAAA,UAE/E;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAW;AAAA,UACX,UAAU,CAAC,MAAM,YAAY,SAAS,EAAE,OAAO,KAAK;AAAA,QAAA;AAAA,MAAA;AAAA,MAEtD;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC;AAAA,UAChC,aAAa,CAAC,MAAM,EAAE,eAAA;AAAA,UACtB,cAAY,OAAO,OAAO;AAAA,UAC1B,OAAO,OAAO,OAAO;AAAA,UACrB,UAAU;AAAA,UAEV,8BAAC,MAAA,EAAK,MAAM,OAAO,WAAW,OAAO,MAAM,GAAA,CAAI;AAAA,QAAA;AAAA,MAAA;AAAA,IACjD,GACF;AAAA,IACC,QACC,oBAAC,KAAA,EAAE,WAAU,oCAAoC,UAAA,MAAA,CAAM,IACrD,OACF,oBAAC,KAAA,EAAE,WAAU,iBAAiB,gBAAK,IACjC;AAAA,EAAA,GACN;AAEJ;"}

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

@@ -0,0 +1,30 @@
+/**
+ * The standard product frame: fixed sidebar (brand · nav · account) + main
+ * column (topbar · scrolling content). Every region is a slot. Nav is
+ * controlled via activeId/onNavigate, or self-manages if you omit them.
+ */
+export interface AppShellNavItem {
+  id: string;
+  label: string;
+  /** Leading icon node (e.g. <Icon name="layout" size={16} />). */
+  icon?: React.ReactNode;
+}
+export interface AppShellProps {
+  /** Sidebar brand lockup. @default <BrandMark wordmark blink={false} /> */
+  brand?: React.ReactNode;
+  nav?: AppShellNavItem[];
+  /** Mono label above the nav. @default "Navigate" */
+  navLabel?: string;
+  /** Controlled active nav id; omit to let the shell manage it. */
+  activeId?: string;
+  onNavigate?: (id: string) => void;
+  /** Sidebar footer slot — typically <AccountControl /> or an account chip. */
+  account?: React.ReactNode;
+  /** Left side of the topbar (breadcrumb / title). */
+  crumb?: React.ReactNode;
+  /** Right side of the topbar (search, primary action, etc.). */
+  actions?: React.ReactNode;
+  /** Main content. */
+  children?: React.ReactNode;
+}
+export declare function AppShell(props: AppShellProps): JSX.Element;