@agentaily/design-system 0.1.0

package/dist/components/chat/Composer.js

@@ -0,0 +1,123 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+const AX_COMPOSER_CSS = `
+.ax-composer {
+  background: var(--surface-card);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3);
+  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
+}
+.ax-composer:focus-within { border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }
+.ax-composer__input {
+  display: block; width: 100%; resize: none;
+  background: transparent; border: none; outline: none;
+  padding: 14px 16px 4px; min-height: 44px; max-height: 200px;
+  color: var(--text-body); font-family: var(--font-body);
+  font-size: var(--text-md); line-height: var(--leading-snug);
+}
+.ax-composer__input::placeholder { color: var(--text-faint); }
+.ax-composer__row {
+  display: flex; align-items: center; gap: 8px;
+  padding: 6px 8px 8px 16px;
+}
+.ax-composer__model {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  letter-spacing: 0.04em; color: var(--text-faint);
+  border: 1px solid var(--border-default); border-radius: var(--radius-1);
+  padding: 3px 8px; background: transparent; cursor: pointer;
+  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+}
+.ax-composer__model:hover { color: var(--text-muted); border-color: var(--border-strong); }
+.ax-composer__spacer { flex: 1; }
+.ax-composer__send {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 32px; height: 32px; flex: none; cursor: pointer;
+  background: var(--accent); color: var(--accent-fg);
+  border: none; border-radius: var(--radius-2);
+  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
+}
+.ax-composer__send:hover:not(:disabled) { background: var(--accent-hover); }
+.ax-composer__send:active:not(:disabled) { transform: translateY(1px); }
+.ax-composer__send:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-composer__send:disabled { opacity: 0.3; cursor: not-allowed; }
+.ax-composer__hint {
+  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-composer-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-composer-css";
+  s.textContent = AX_COMPOSER_CSS;
+  document.head.appendChild(s);
+}
+const SendIcon = /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M12 19V5" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 12l7-7 7 7" })
+] });
+function Composer({
+  value,
+  onChange,
+  onSend,
+  placeholder = "Message Agentaily…",
+  model = "agentaily-2",
+  onModelClick,
+  disabled = false,
+  className = "",
+  ...rest
+}) {
+  const ref = useRef(null);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      if (value && value.trim() && onSend) onSend();
+    }
+  };
+  const autoGrow = () => {
+    const el = ref.current;
+    if (!el) return;
+    el.style.height = "auto";
+    el.style.height = Math.min(el.scrollHeight, 200) + "px";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-composer", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        className: "ax-composer__input",
+        rows: 1,
+        value,
+        placeholder,
+        disabled,
+        onChange: (e) => {
+          autoGrow();
+          onChange && onChange(e.target.value);
+        },
+        onKeyDown: handleKeyDown
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "ax-composer__row", children: [
+      /* @__PURE__ */ jsxs("button", { type: "button", className: "ax-composer__model", onClick: onModelClick, children: [
+        "▣ ",
+        model
+      ] }),
+      /* @__PURE__ */ jsx("span", { className: "ax-composer__spacer" }),
+      /* @__PURE__ */ jsx("span", { className: "ax-composer__hint", children: "⏎ send" }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ax-composer__send",
+          "aria-label": "Send",
+          disabled: disabled || !value || !value.trim(),
+          onClick: () => onSend && onSend(),
+          children: SendIcon
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  Composer
+};
+//# sourceMappingURL=Composer.js.map

package/dist/components/chat/Composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.js","sources":["../../../src/components/chat/Composer.jsx"],"sourcesContent":["import React, { useRef } from \"react\";\n\nconst AX_COMPOSER_CSS = `\n.ax-composer {\n  background: var(--surface-card);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3);\n  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);\n}\n.ax-composer:focus-within { border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n.ax-composer__input {\n  display: block; width: 100%; resize: none;\n  background: transparent; border: none; outline: none;\n  padding: 14px 16px 4px; min-height: 44px; max-height: 200px;\n  color: var(--text-body); font-family: var(--font-body);\n  font-size: var(--text-md); line-height: var(--leading-snug);\n}\n.ax-composer__input::placeholder { color: var(--text-faint); }\n.ax-composer__row {\n  display: flex; align-items: center; gap: 8px;\n  padding: 6px 8px 8px 16px;\n}\n.ax-composer__model {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  letter-spacing: 0.04em; color: var(--text-faint);\n  border: 1px solid var(--border-default); border-radius: var(--radius-1);\n  padding: 3px 8px; background: transparent; cursor: pointer;\n  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);\n}\n.ax-composer__model:hover { color: var(--text-muted); border-color: var(--border-strong); }\n.ax-composer__spacer { flex: 1; }\n.ax-composer__send {\n  display: inline-flex; align-items: center; justify-content: center;\n  width: 32px; height: 32px; flex: none; cursor: pointer;\n  background: var(--accent); color: var(--accent-fg);\n  border: none; border-radius: var(--radius-2);\n  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);\n}\n.ax-composer__send:hover:not(:disabled) { background: var(--accent-hover); }\n.ax-composer__send:active:not(:disabled) { transform: translateY(1px); }\n.ax-composer__send:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-composer__send:disabled { opacity: 0.3; cursor: not-allowed; }\n.ax-composer__hint {\n  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-composer-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-composer-css\";\n  s.textContent = AX_COMPOSER_CSS;\n  document.head.appendChild(s);\n}\n\nconst SendIcon = (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n    <path d=\"M12 19V5\"></path>\n    <path d=\"M5 12l7-7 7 7\"></path>\n  </svg>\n);\n\nexport function Composer({\n  value,\n  onChange,\n  onSend,\n  placeholder = \"Message Agentaily…\",\n  model = \"agentaily-2\",\n  onModelClick,\n  disabled = false,\n  className = \"\",\n  ...rest\n}) {\n  const ref = useRef(null);\n\n  const handleKeyDown = (e) => {\n    if (e.key === \"Enter\" && !e.shiftKey) {\n      e.preventDefault();\n      if (value && value.trim() && onSend) onSend();\n    }\n  };\n\n  const autoGrow = () => {\n    const el = ref.current;\n    if (!el) return;\n    el.style.height = \"auto\";\n    el.style.height = Math.min(el.scrollHeight, 200) + \"px\";\n  };\n\n  return (\n    <div className={[\"ax-composer\", className].filter(Boolean).join(\" \")} {...rest}>\n      <textarea\n        ref={ref}\n        className=\"ax-composer__input\"\n        rows={1}\n        value={value}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={(e) => { autoGrow(); onChange && onChange(e.target.value); }}\n        onKeyDown={handleKeyDown}\n      ></textarea>\n      <div className=\"ax-composer__row\">\n        <button type=\"button\" className=\"ax-composer__model\" onClick={onModelClick}>\n          ▣ {model}\n        </button>\n        <span className=\"ax-composer__spacer\"></span>\n        <span className=\"ax-composer__hint\">⏎ send</span>\n        <button\n          type=\"button\"\n          className=\"ax-composer__send\"\n          aria-label=\"Send\"\n          disabled={disabled || !value || !value.trim()}\n          onClick={() => onSend && onSend()}\n        >\n          {SendIcon}\n        </button>\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;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;AA8CxB,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,WACJ,qBAAC,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SACvI,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,WAAA,CAAW;AAAA,EACnB,oBAAC,QAAA,EAAK,GAAE,gBAAA,CAAgB;AAAA,GAC1B;AAGK,SAAS,SAAS;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,QAAQ;AAAA,EACR;AAAA,EACA,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM,OAAO,IAAI;AAEvB,QAAM,gBAAgB,CAAC,MAAM;AAC3B,QAAI,EAAE,QAAQ,WAAW,CAAC,EAAE,UAAU;AACpC,QAAE,eAAA;AACF,UAAI,SAAS,MAAM,KAAA,KAAU,OAAQ,QAAA;AAAA,IACvC;AAAA,EACF;AAEA,QAAM,WAAW,MAAM;AACrB,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AACT,OAAG,MAAM,SAAS;AAClB,OAAG,MAAM,SAAS,KAAK,IAAI,GAAG,cAAc,GAAG,IAAI;AAAA,EACrD;AAEA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACxE,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QACV,MAAM;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,CAAC,MAAM;AAAE,mBAAA;AAAY,sBAAY,SAAS,EAAE,OAAO,KAAK;AAAA,QAAG;AAAA,QACrE,WAAW;AAAA,MAAA;AAAA,IAAA;AAAA,IAEb,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,qBAAC,YAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,cAAc,UAAA;AAAA,QAAA;AAAA,QACvE;AAAA,MAAA,GACL;AAAA,MACA,oBAAC,QAAA,EAAK,WAAU,sBAAA,CAAsB;AAAA,MACtC,oBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA,UAAM;AAAA,MAC1C;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,WAAU;AAAA,UACV,cAAW;AAAA,UACX,UAAU,YAAY,CAAC,SAAS,CAAC,MAAM,KAAA;AAAA,UACvC,SAAS,MAAM,UAAU,OAAA;AAAA,UAExB,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/chat/Message.d.ts

@@ -0,0 +1,16 @@
+/**
+ * One chat turn. User turns are right-aligned cards; assistant turns are
+ * full-width prose under a mono name label.
+ */
+export interface MessageProps {
+  /** @default "assistant" */
+  role?: "user" | "assistant";
+  /** Assistant label. @default "Agentaily" */
+  name?: string;
+  /** Mono timestamp next to the name. */
+  time?: string;
+  /** Append a blinking block cursor (response in progress). @default false */
+  streaming?: boolean;
+  children?: React.ReactNode;
+}
+export declare function Message(props: MessageProps): JSX.Element;

package/dist/components/chat/Message.js

@@ -0,0 +1,63 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_MSG_CSS = `
+.ax-msg { display: flex; flex-direction: column; }
+.ax-msg--user { align-items: flex-end; }
+.ax-msg--user .ax-msg__body {
+  max-width: 78%;
+  background: var(--surface-card);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-3);
+  padding: 10px 14px;
+}
+.ax-msg--assistant { align-items: stretch; }
+.ax-msg__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
+.ax-msg__name {
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
+  text-transform: uppercase; color: var(--text-faint);
+}
+.ax-msg__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); opacity: 0.7; }
+.ax-msg__body { font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); min-width: 0; }
+.ax-msg__body > p { margin: 0 0 0.7em; }
+.ax-msg__body > p:last-child { margin-bottom: 0; }
+.ax-msg__cursor {
+  display: inline-block; width: 0.55em; height: 1.05em;
+  background: currentColor; vertical-align: text-bottom; margin-left: 2px;
+  animation: ax-msg-blink 1.1s steps(1) infinite;
+}
+@keyframes ax-msg-blink { 50% { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .ax-msg__cursor { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-msg-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-msg-css";
+  s.textContent = AX_MSG_CSS;
+  document.head.appendChild(s);
+}
+function Message({
+  role = "assistant",
+  name,
+  time,
+  streaming = false,
+  children,
+  className = "",
+  ...rest
+}) {
+  const isUser = role === "user";
+  const cls = ["ax-msg", isUser ? "ax-msg--user" : "ax-msg--assistant", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: cls, ...rest, children: [
+    !isUser ? /* @__PURE__ */ jsxs("div", { className: "ax-msg__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-msg__name", children: name || "Agentaily" }),
+      time ? /* @__PURE__ */ jsx("span", { className: "ax-msg__time", children: time }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "ax-msg__body", children: [
+      children,
+      streaming ? /* @__PURE__ */ jsx("span", { className: "ax-msg__cursor" }) : null
+    ] })
+  ] });
+}
+export {
+  Message
+};
+//# sourceMappingURL=Message.js.map

package/dist/components/chat/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sources":["../../../src/components/chat/Message.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_MSG_CSS = `\n.ax-msg { display: flex; flex-direction: column; }\n.ax-msg--user { align-items: flex-end; }\n.ax-msg--user .ax-msg__body {\n  max-width: 78%;\n  background: var(--surface-card);\n  border: 1px solid var(--border-default);\n  border-radius: var(--radius-3);\n  padding: 10px 14px;\n}\n.ax-msg--assistant { align-items: stretch; }\n.ax-msg__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }\n.ax-msg__name {\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);\n  text-transform: uppercase; color: var(--text-faint);\n}\n.ax-msg__time { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); opacity: 0.7; }\n.ax-msg__body { font-size: var(--text-md); line-height: var(--leading-body); color: var(--text-body); min-width: 0; }\n.ax-msg__body > p { margin: 0 0 0.7em; }\n.ax-msg__body > p:last-child { margin-bottom: 0; }\n.ax-msg__cursor {\n  display: inline-block; width: 0.55em; height: 1.05em;\n  background: currentColor; vertical-align: text-bottom; margin-left: 2px;\n  animation: ax-msg-blink 1.1s steps(1) infinite;\n}\n@keyframes ax-msg-blink { 50% { opacity: 0; } }\n@media (prefers-reduced-motion: reduce) { .ax-msg__cursor { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-msg-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-msg-css\";\n  s.textContent = AX_MSG_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Message({\n  role = \"assistant\",\n  name,\n  time,\n  streaming = false,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const isUser = role === \"user\";\n  const cls = [\"ax-msg\", isUser ? \"ax-msg--user\" : \"ax-msg--assistant\", className].filter(Boolean).join(\" \");\n  return (\n    <div className={cls} {...rest}>\n      {!isUser ? (\n        <div className=\"ax-msg__head\">\n          <span className=\"ax-msg__name\">{name || \"Agentaily\"}</span>\n          {time ? <span className=\"ax-msg__time\">{time}</span> : null}\n        </div>\n      ) : null}\n      <div className=\"ax-msg__body\">\n        {children}\n        {streaming ? <span className=\"ax-msg__cursor\"></span> : null}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,YAAY,GAAG;AAC7E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ;AAAA,EACtB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,SAAS,SAAS;AACxB,QAAM,MAAM,CAAC,UAAU,SAAS,iBAAiB,qBAAqB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACzG,SACE,qBAAC,OAAA,EAAI,WAAW,KAAM,GAAG,MACtB,UAAA;AAAA,IAAA,CAAC,SACA,qBAAC,OAAA,EAAI,WAAU,gBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,gBAAgB,UAAA,QAAQ,aAAY;AAAA,MACnD,OAAO,oBAAC,QAAA,EAAK,WAAU,gBAAgB,gBAAK,IAAU;AAAA,IAAA,EAAA,CACzD,IACE;AAAA,IACJ,qBAAC,OAAA,EAAI,WAAU,gBACZ,UAAA;AAAA,MAAA;AAAA,MACA,YAAY,oBAAC,QAAA,EAAK,WAAU,kBAAiB,IAAU;AAAA,IAAA,EAAA,CAC1D;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/code/Agent.d.ts

@@ -0,0 +1,3 @@
+/** Agent identity pill: square avatar, name, optional model tag, working/idle/error status. */
+export interface AgentProps { name?: string; model?: string; status?: "working" | "idle" | "error"; task?: string; }
+export declare function Agent(props: AgentProps): JSX.Element;

package/dist/components/code/Agent.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_AGENT_CSS = `
+.ax-agent { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-card); }
+.ax-agent__avatar { width: 26px; height: 26px; flex: none; border-radius: var(--radius-2); background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: var(--weight-bold); }
+.ax-agent__body { display: flex; flex-direction: column; min-width: 0; }
+.ax-agent__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); display: flex; align-items: center; gap: 7px; }
+.ax-agent__status { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
+.ax-agent__dot { width: 6px; height: 6px; border-radius: 1px; background: var(--text-faint); }
+.ax-agent--working .ax-agent__dot { background: var(--warn); animation: ax-agent-pulse 1s var(--ease-out) infinite; }
+.ax-agent--working .ax-agent__status { color: var(--warn); }
+.ax-agent--idle .ax-agent__dot { background: var(--ok); }
+.ax-agent--idle .ax-agent__status { color: var(--ok); }
+.ax-agent__model { font-size: 10px; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 1px 5px; }
+@keyframes ax-agent-pulse { 50% { opacity: 0.35; } }
+@media (prefers-reduced-motion: reduce) { .ax-agent--working .ax-agent__dot { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-agent-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-agent-css";
+  s.textContent = AX_AGENT_CSS;
+  document.head.appendChild(s);
+}
+const STATUS = { working: "Working", idle: "Ready", error: "Error" };
+function Agent({ name = "agent", model, status = "idle", task, className = "", ...rest }) {
+  const initials = name.slice(0, 2).toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-agent", "ax-agent--" + status, className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "ax-agent__avatar", children: initials }),
+    /* @__PURE__ */ jsxs("span", { className: "ax-agent__body", children: [
+      /* @__PURE__ */ jsxs("span", { className: "ax-agent__name", children: [
+        name,
+        model ? /* @__PURE__ */ jsx("span", { className: "ax-agent__model", children: model }) : null
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-agent__status", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-agent__dot" }),
+        task || STATUS[status]
+      ] })
+    ] })
+  ] });
+}
+export {
+  Agent
+};
+//# sourceMappingURL=Agent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Agent.js","sources":["../../../src/components/code/Agent.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_AGENT_CSS = `\n.ax-agent { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--surface-card); }\n.ax-agent__avatar { width: 26px; height: 26px; flex: none; border-radius: var(--radius-2); background: var(--accent); color: var(--accent-fg); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: var(--weight-bold); }\n.ax-agent__body { display: flex; flex-direction: column; min-width: 0; }\n.ax-agent__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text-body); display: flex; align-items: center; gap: 7px; }\n.ax-agent__status { display: flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }\n.ax-agent__dot { width: 6px; height: 6px; border-radius: 1px; background: var(--text-faint); }\n.ax-agent--working .ax-agent__dot { background: var(--warn); animation: ax-agent-pulse 1s var(--ease-out) infinite; }\n.ax-agent--working .ax-agent__status { color: var(--warn); }\n.ax-agent--idle .ax-agent__dot { background: var(--ok); }\n.ax-agent--idle .ax-agent__status { color: var(--ok); }\n.ax-agent__model { font-size: 10px; color: var(--text-faint); border: 1px solid var(--border-default); border-radius: var(--radius-1); padding: 1px 5px; }\n@keyframes ax-agent-pulse { 50% { opacity: 0.35; } }\n@media (prefers-reduced-motion: reduce) { .ax-agent--working .ax-agent__dot { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-agent-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-agent-css\";\n  s.textContent = AX_AGENT_CSS;\n  document.head.appendChild(s);\n}\n\nconst STATUS = { working: \"Working\", idle: \"Ready\", error: \"Error\" };\n\nexport function Agent({ name = \"agent\", model, status = \"idle\", task, className = \"\", ...rest }) {\n  const initials = name.slice(0, 2).toUpperCase();\n  return (\n    <div className={[\"ax-agent\", \"ax-agent--\" + status, className].filter(Boolean).join(\" \")} {...rest}>\n      <span className=\"ax-agent__avatar\">{initials}</span>\n      <span className=\"ax-agent__body\">\n        <span className=\"ax-agent__name\">{name}{model ? <span className=\"ax-agent__model\">{model}</span> : null}</span>\n        <span className=\"ax-agent__status\"><span className=\"ax-agent__dot\"></span>{task || STATUS[status]}</span>\n      </span>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBrB,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;AAEA,MAAM,SAAS,EAAE,SAAS,WAAW,MAAM,SAAS,OAAO,QAAA;AAEpD,SAAS,MAAM,EAAE,OAAO,SAAS,OAAO,SAAS,QAAQ,MAAM,YAAY,IAAI,GAAG,KAAA,GAAQ;AAC/F,QAAM,WAAW,KAAK,MAAM,GAAG,CAAC,EAAE,YAAA;AAClC,8BACG,OAAA,EAAI,WAAW,CAAC,YAAY,eAAe,QAAQ,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC5F,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,UAAS;AAAA,IAC7C,qBAAC,QAAA,EAAK,WAAU,kBACd,UAAA;AAAA,MAAA,qBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA;AAAA,QAAA;AAAA,QAAM,QAAQ,oBAAC,QAAA,EAAK,WAAU,mBAAmB,iBAAM,IAAU;AAAA,MAAA,GAAK;AAAA,MACxG,qBAAC,QAAA,EAAK,WAAU,oBAAmB,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB;AAAA,QAAQ,QAAQ,OAAO,MAAM;AAAA,MAAA,EAAA,CAAE;AAAA,IAAA,EAAA,CACpG;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/code/Artifact.d.ts

@@ -0,0 +1,3 @@
+/** Generated artifact frame with Preview/Code tabs and an action slot. */
+export interface ArtifactProps { title?: string; subtitle?: string; code?: string; preview?: React.ReactNode; defaultTab?: "preview" | "code"; actions?: React.ReactNode; }
+export declare function Artifact(props: ArtifactProps): JSX.Element;

package/dist/components/code/Artifact.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_ARTIFACT_CSS = `
+.ax-artifact { border: 1px solid var(--border-strong); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); }
+.ax-artifact__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }
+.ax-artifact__icon { width: 16px; height: 16px; flex: none; color: var(--text-faint); }
+.ax-artifact__meta { flex: 1; min-width: 0; }
+.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; }
+.ax-artifact__sub { font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin-top: 1px; }
+.ax-artifact__tabs { display: flex; gap: 2px; padding: 2px; background: var(--surface-raised); border-radius: var(--radius-2); }
+.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); }
+.ax-artifact__tab--active { background: var(--surface-card); color: var(--text-body); }
+.ax-artifact__actions { display: flex; gap: 2px; }
+.ax-artifact__body { max-height: 280px; overflow: auto; }
+.ax-artifact__preview { padding: 20px; background: var(--bg-0); min-height: 120px; }
+[data-theme="light"] .ax-artifact__preview { background: var(--bg-1); }
+.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; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-artifact-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-artifact-css";
+  s.textContent = AX_ARTIFACT_CSS;
+  document.head.appendChild(s);
+}
+const Box = /* @__PURE__ */ jsxs("svg", { className: "ax-artifact__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("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" }),
+  /* @__PURE__ */ jsx("path", { d: "m3.3 7 8.7 5 8.7-5M12 22V12" })
+] });
+function Artifact({ title = "Artifact", subtitle, code, preview, defaultTab = "preview", actions, className = "", ...rest }) {
+  const [tab, setTab] = useState(preview ? defaultTab : "code");
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-artifact", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-artifact__head", children: [
+      Box,
+      /* @__PURE__ */ jsxs("div", { className: "ax-artifact__meta", children: [
+        /* @__PURE__ */ jsx("p", { className: "ax-artifact__title", children: title }),
+        subtitle ? /* @__PURE__ */ jsx("p", { className: "ax-artifact__sub", children: subtitle }) : null
+      ] }),
+      preview && code ? /* @__PURE__ */ jsxs("div", { className: "ax-artifact__tabs", children: [
+        /* @__PURE__ */ jsx("button", { className: "ax-artifact__tab" + (tab === "preview" ? " ax-artifact__tab--active" : ""), onClick: () => setTab("preview"), children: "Preview" }),
+        /* @__PURE__ */ jsx("button", { className: "ax-artifact__tab" + (tab === "code" ? " ax-artifact__tab--active" : ""), onClick: () => setTab("code"), children: "Code" })
+      ] }) : null,
+      actions ? /* @__PURE__ */ jsx("div", { className: "ax-artifact__actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ax-artifact__body", children: tab === "preview" && preview ? /* @__PURE__ */ jsx("div", { className: "ax-artifact__preview", children: preview }) : /* @__PURE__ */ jsx("pre", { className: "ax-artifact__pre", children: code }) })
+  ] });
+}
+export {
+  Artifact
+};
+//# sourceMappingURL=Artifact.js.map

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

@@ -0,0 +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;"}

package/dist/components/code/Commit.d.ts

@@ -0,0 +1,3 @@
+/** Git commit row: graph node, message, hash, author, +/- stat. */
+export interface CommitProps { message: React.ReactNode; hash?: string; author?: string; time?: string; additions?: number; deletions?: number; connected?: boolean; }
+export declare function Commit(props: CommitProps): JSX.Element;

package/dist/components/code/Commit.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_COMMIT_CSS = `
+.ax-commit { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); font-family: var(--font-mono); }
+.ax-commit__graph { display: flex; flex-direction: column; align-items: center; flex: none; padding-top: 2px; }
+.ax-commit__node { width: 10px; height: 10px; border-radius: var(--radius-1); border: 2px solid var(--text-muted); background: var(--surface-card); }
+.ax-commit__line { width: 2px; flex: 1; background: var(--border-strong); margin-top: 2px; min-height: 8px; }
+.ax-commit__body { flex: 1; min-width: 0; }
+.ax-commit__msg { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-commit__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-faint); }
+.ax-commit__hash { color: var(--text-muted); background: var(--surface-raised); padding: 0 5px; border-radius: var(--radius-1); }
+.ax-commit__author { color: var(--text-faint); }
+.ax-commit__stat { display: inline-flex; gap: 6px; margin-left: auto; }
+.ax-commit__add { color: var(--ok); }
+.ax-commit__del { color: var(--danger); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-commit-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-commit-css";
+  s.textContent = AX_COMMIT_CSS;
+  document.head.appendChild(s);
+}
+function Commit({ message, hash, author, time, additions, deletions, connected = false, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-commit", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-commit__graph", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-commit__node" }),
+      connected ? /* @__PURE__ */ jsx("span", { className: "ax-commit__line" }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-commit__body", children: [
+      /* @__PURE__ */ jsx("p", { className: "ax-commit__msg", children: message }),
+      /* @__PURE__ */ jsxs("div", { className: "ax-commit__meta", children: [
+        hash ? /* @__PURE__ */ jsx("span", { className: "ax-commit__hash", children: hash }) : null,
+        author ? /* @__PURE__ */ jsx("span", { className: "ax-commit__author", children: author }) : null,
+        time ? /* @__PURE__ */ jsxs("span", { className: "ax-commit__author", children: [
+          "· ",
+          time
+        ] }) : null,
+        additions != null || deletions != null ? /* @__PURE__ */ jsxs("span", { className: "ax-commit__stat", children: [
+          additions != null ? /* @__PURE__ */ jsxs("span", { className: "ax-commit__add", children: [
+            "+",
+            additions
+          ] }) : null,
+          deletions != null ? /* @__PURE__ */ jsxs("span", { className: "ax-commit__del", children: [
+            "−",
+            deletions
+          ] }) : null
+        ] }) : null
+      ] })
+    ] })
+  ] });
+}
+export {
+  Commit
+};
+//# sourceMappingURL=Commit.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Commit.js","sources":["../../../src/components/code/Commit.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_COMMIT_CSS = `\n.ax-commit { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); font-family: var(--font-mono); }\n.ax-commit__graph { display: flex; flex-direction: column; align-items: center; flex: none; padding-top: 2px; }\n.ax-commit__node { width: 10px; height: 10px; border-radius: var(--radius-1); border: 2px solid var(--text-muted); background: var(--surface-card); }\n.ax-commit__line { width: 2px; flex: 1; background: var(--border-strong); margin-top: 2px; min-height: 8px; }\n.ax-commit__body { flex: 1; min-width: 0; }\n.ax-commit__msg { font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-body); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-commit__meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; color: var(--text-faint); }\n.ax-commit__hash { color: var(--text-muted); background: var(--surface-raised); padding: 0 5px; border-radius: var(--radius-1); }\n.ax-commit__author { color: var(--text-faint); }\n.ax-commit__stat { display: inline-flex; gap: 6px; margin-left: auto; }\n.ax-commit__add { color: var(--ok); }\n.ax-commit__del { color: var(--danger); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-commit-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-commit-css\";\n  s.textContent = AX_COMMIT_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Commit({ message, hash, author, time, additions, deletions, connected = false, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-commit\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-commit__graph\">\n        <span className=\"ax-commit__node\"></span>\n        {connected ? <span className=\"ax-commit__line\"></span> : null}\n      </div>\n      <div className=\"ax-commit__body\">\n        <p className=\"ax-commit__msg\">{message}</p>\n        <div className=\"ax-commit__meta\">\n          {hash ? <span className=\"ax-commit__hash\">{hash}</span> : null}\n          {author ? <span className=\"ax-commit__author\">{author}</span> : null}\n          {time ? <span className=\"ax-commit__author\">· {time}</span> : null}\n          {(additions != null || deletions != null) ? (\n            <span className=\"ax-commit__stat\">\n              {additions != null ? <span className=\"ax-commit__add\">+{additions}</span> : null}\n              {deletions != null ? <span className=\"ax-commit__del\">−{deletions}</span> : null}\n            </span>\n          ) : null}\n        </div>\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;AAetB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,eAAe,GAAG;AAChF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,OAAO,EAAE,SAAS,MAAM,QAAQ,MAAM,WAAW,WAAW,YAAY,OAAO,YAAY,IAAI,GAAG,QAAQ;AACxH,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,aAAa,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACtE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,kBAAA,CAAkB;AAAA,MACjC,YAAY,oBAAC,QAAA,EAAK,WAAU,mBAAkB,IAAU;AAAA,IAAA,GAC3D;AAAA,IACA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,MAAA,oBAAC,KAAA,EAAE,WAAU,kBAAkB,UAAA,SAAQ;AAAA,MACvC,qBAAC,OAAA,EAAI,WAAU,mBACZ,UAAA;AAAA,QAAA,OAAO,oBAAC,QAAA,EAAK,WAAU,mBAAmB,gBAAK,IAAU;AAAA,QACzD,SAAS,oBAAC,QAAA,EAAK,WAAU,qBAAqB,kBAAO,IAAU;AAAA,QAC/D,OAAO,qBAAC,QAAA,EAAK,WAAU,qBAAoB,UAAA;AAAA,UAAA;AAAA,UAAG;AAAA,QAAA,EAAA,CAAK,IAAU;AAAA,QAC5D,aAAa,QAAQ,aAAa,OAClC,qBAAC,QAAA,EAAK,WAAU,mBACb,UAAA;AAAA,UAAA,aAAa,OAAO,qBAAC,QAAA,EAAK,WAAU,kBAAiB,UAAA;AAAA,YAAA;AAAA,YAAE;AAAA,UAAA,EAAA,CAAU,IAAU;AAAA,UAC3E,aAAa,OAAO,qBAAC,QAAA,EAAK,WAAU,kBAAiB,UAAA;AAAA,YAAA;AAAA,YAAE;AAAA,UAAA,EAAA,CAAU,IAAU;AAAA,QAAA,EAAA,CAC9E,IACE;AAAA,MAAA,EAAA,CACN;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/code/EnvironmentVariables.d.ts

@@ -0,0 +1,4 @@
+/** Env var table with masked secret values and a reveal toggle. */
+export interface EnvVar { key: string; value: string; secret?: boolean; }
+export interface EnvironmentVariablesProps { title?: string; vars: Array<EnvVar | [string, string]>; }
+export declare function EnvironmentVariables(props: EnvironmentVariablesProps): JSX.Element;

package/dist/components/code/EnvironmentVariables.js

@@ -0,0 +1,49 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_ENVVARS_CSS = `
+.ax-envvars { border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); font-family: var(--font-mono); }
+.ax-envvars__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }
+.ax-envvars__title { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); flex: 1; }
+.ax-envvars__reveal { appearance: none; background: none; border: 1px solid var(--border-default); cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-1); }
+.ax-envvars__reveal:hover { color: var(--text-body); border-color: var(--border-strong); }
+.ax-envvars__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-default); }
+.ax-envvars__row:last-child { border-bottom: none; }
+.ax-envvars__key { color: var(--text-body); font-size: var(--text-sm); flex: none; min-width: 140px; }
+.ax-envvars__val { color: var(--text-muted); font-size: var(--text-sm); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-envvars__val--hidden { letter-spacing: 1px; }
+.ax-envvars__copy { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 11px; padding: 2px 5px; border-radius: var(--radius-1); flex: none; }
+.ax-envvars__copy:hover { color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-envvars-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-envvars-css";
+  s.textContent = AX_ENVVARS_CSS;
+  document.head.appendChild(s);
+}
+function EnvironmentVariables({ title = "Environment", vars = [], className = "", ...rest }) {
+  const [reveal, setReveal] = useState(false);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-envvars", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-envvars__head", children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-envvars__title", children: title }),
+      /* @__PURE__ */ jsx("button", { className: "ax-envvars__reveal", onClick: () => setReveal((r) => !r), children: reveal ? "Hide" : "Reveal" })
+    ] }),
+    vars.map((v, i) => {
+      const item = Array.isArray(v) ? { key: v[0], value: v[1] } : v;
+      const secret = item.secret !== false;
+      return /* @__PURE__ */ jsxs("div", { className: "ax-envvars__row", children: [
+        /* @__PURE__ */ jsx("span", { className: "ax-envvars__key", children: item.key }),
+        /* @__PURE__ */ jsx("span", { className: "ax-envvars__val" + (secret && !reveal ? " ax-envvars__val--hidden" : ""), children: secret && !reveal ? "••••••••••••" : item.value }),
+        /* @__PURE__ */ jsx("button", { className: "ax-envvars__copy", onClick: () => {
+          try {
+            navigator.clipboard && navigator.clipboard.writeText(item.value);
+          } catch (e) {
+          }
+        }, children: "copy" })
+      ] }, i);
+    })
+  ] });
+}
+export {
+  EnvironmentVariables
+};
+//# sourceMappingURL=EnvironmentVariables.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EnvironmentVariables.js","sources":["../../../src/components/code/EnvironmentVariables.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_ENVVARS_CSS = `\n.ax-envvars { border: 1px solid var(--border-default); border-radius: var(--radius-3); overflow: hidden; background: var(--surface-card); font-family: var(--font-mono); }\n.ax-envvars__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-default); }\n.ax-envvars__title { font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); flex: 1; }\n.ax-envvars__reveal { appearance: none; background: none; border: 1px solid var(--border-default); cursor: pointer; color: var(--text-faint); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-1); }\n.ax-envvars__reveal:hover { color: var(--text-body); border-color: var(--border-strong); }\n.ax-envvars__row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border-default); }\n.ax-envvars__row:last-child { border-bottom: none; }\n.ax-envvars__key { color: var(--text-body); font-size: var(--text-sm); flex: none; min-width: 140px; }\n.ax-envvars__val { color: var(--text-muted); font-size: var(--text-sm); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-envvars__val--hidden { letter-spacing: 1px; }\n.ax-envvars__copy { appearance: none; background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 11px; padding: 2px 5px; border-radius: var(--radius-1); flex: none; }\n.ax-envvars__copy:hover { color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-envvars-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-envvars-css\";\n  s.textContent = AX_ENVVARS_CSS;\n  document.head.appendChild(s);\n}\n\nexport function EnvironmentVariables({ title = \"Environment\", vars = [], className = \"\", ...rest }) {\n  const [reveal, setReveal] = useState(false);\n  return (\n    <div className={[\"ax-envvars\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-envvars__head\">\n        <span className=\"ax-envvars__title\">{title}</span>\n        <button className=\"ax-envvars__reveal\" onClick={() => setReveal((r) => !r)}>{reveal ? \"Hide\" : \"Reveal\"}</button>\n      </div>\n      {vars.map((v, i) => {\n        const item = Array.isArray(v) ? { key: v[0], value: v[1] } : v;\n        const secret = item.secret !== false;\n        return (\n          <div className=\"ax-envvars__row\" key={i}>\n            <span className=\"ax-envvars__key\">{item.key}</span>\n            <span className={\"ax-envvars__val\" + (secret && !reveal ? \" ax-envvars__val--hidden\" : \"\")}>\n              {secret && !reveal ? \"••••••••••••\" : item.value}\n            </span>\n            <button className=\"ax-envvars__copy\" onClick={() => { try { navigator.clipboard && navigator.clipboard.writeText(item.value); } catch (e) {} }}>copy</button>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAevB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,qBAAqB,EAAE,QAAQ,eAAe,OAAO,CAAA,GAAI,YAAY,IAAI,GAAG,QAAQ;AAClG,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,cAAc,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,qBAAqB,UAAA,OAAM;AAAA,MAC3C,oBAAC,UAAA,EAAO,WAAU,sBAAqB,SAAS,MAAM,UAAU,CAAC,MAAM,CAAC,CAAC,GAAI,UAAA,SAAS,SAAS,SAAA,CAAS;AAAA,IAAA,GAC1G;AAAA,IACC,KAAK,IAAI,CAAC,GAAG,MAAM;AAClB,YAAM,OAAO,MAAM,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM;AAC7D,YAAM,SAAS,KAAK,WAAW;AAC/B,aACE,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,QAAA,oBAAC,QAAA,EAAK,WAAU,mBAAmB,UAAA,KAAK,KAAI;AAAA,QAC5C,oBAAC,QAAA,EAAK,WAAW,qBAAqB,UAAU,CAAC,SAAS,6BAA6B,KACpF,UAAA,UAAU,CAAC,SAAS,iBAAiB,KAAK,OAC7C;AAAA,QACA,oBAAC,UAAA,EAAO,WAAU,oBAAmB,SAAS,MAAM;AAAE,cAAI;AAAE,sBAAU,aAAa,UAAU,UAAU,UAAU,KAAK,KAAK;AAAA,UAAG,SAAS,GAAG;AAAA,UAAC;AAAA,QAAE,GAAG,UAAA,OAAA,CAAI;AAAA,MAAA,EAAA,GALhH,CAMtC;AAAA,IAEJ,CAAC;AAAA,EAAA,GACH;AAEJ;"}

package/dist/components/code/FileTree.d.ts

@@ -0,0 +1,4 @@
+/** Collapsible file tree with folder/file icons and git status badges (add/mod/del). */
+export interface FileNode { name: string; type?: "dir" | "file"; path?: string; status?: "add" | "mod" | "del"; defaultOpen?: boolean; children?: FileNode[]; }
+export interface FileTreeProps { tree: FileNode[]; activePath?: string; onSelect?: (path: string) => void; }
+export declare function FileTree(props: FileTreeProps): JSX.Element;

package/dist/components/code/FileTree.js

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+const AX_FILETREE_CSS = `
+.ax-filetree { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); padding: 8px; font-family: var(--font-mono); font-size: var(--text-sm); }
+.ax-filetree__row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--radius-1); cursor: pointer; color: var(--text-muted); user-select: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-filetree__row:hover { background: var(--surface-raised); color: var(--text-body); }
+.ax-filetree__row--active { background: var(--surface-raised); color: var(--text-body); }
+.ax-filetree__row--active::before { content: ""; position: absolute; }
+.ax-filetree__chev { width: 12px; height: 12px; flex: none; color: var(--text-faint); transition: transform var(--dur-1) var(--ease-out); }
+.ax-filetree__chev--open { transform: rotate(90deg); }
+.ax-filetree__chev--spacer { visibility: hidden; }
+.ax-filetree__icon { width: 14px; height: 14px; flex: none; color: var(--text-faint); }
+.ax-filetree__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-filetree__badge { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 4px; border-radius: var(--radius-1); }
+.ax-filetree__badge--add { color: var(--ok); background: var(--ok-dim); }
+.ax-filetree__badge--mod { color: var(--warn); background: var(--warn-dim); }
+.ax-filetree__badge--del { color: var(--danger); background: var(--danger-dim); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-filetree-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-filetree-css";
+  s.textContent = AX_FILETREE_CSS;
+  document.head.appendChild(s);
+}
+const Folder = /* @__PURE__ */ jsx("svg", { className: "ax-filetree__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" }) });
+const FileIcon = /* @__PURE__ */ jsxs("svg", { className: "ax-filetree__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z" }),
+  /* @__PURE__ */ jsx("path", { d: "M14 2v6h6" })
+] });
+const Chev = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+function Node({ node, depth, activePath, onSelect }) {
+  const [open, setOpen] = useState(node.defaultOpen !== false);
+  const isDir = node.type === "dir" || node.children;
+  const pad = { paddingLeft: 6 + depth * 14 };
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "ax-filetree__row" + (activePath === node.path ? " ax-filetree__row--active" : ""),
+        style: pad,
+        onClick: () => isDir ? setOpen((o) => !o) : onSelect && onSelect(node.path || node.name),
+        children: [
+          isDir ? /* @__PURE__ */ jsx("span", { className: "ax-filetree__chev" + (open ? " ax-filetree__chev--open" : ""), children: Chev }) : /* @__PURE__ */ jsx("span", { className: "ax-filetree__chev ax-filetree__chev--spacer", children: Chev }),
+          isDir ? Folder : FileIcon,
+          /* @__PURE__ */ jsx("span", { className: "ax-filetree__name", children: node.name }),
+          node.status ? /* @__PURE__ */ jsx("span", { className: "ax-filetree__badge ax-filetree__badge--" + node.status, children: node.status === "add" ? "A" : node.status === "mod" ? "M" : "D" }) : null
+        ]
+      }
+    ),
+    isDir && open && node.children ? node.children.map((c, i) => /* @__PURE__ */ jsx(Node, { node: c, depth: depth + 1, activePath, onSelect }, i)) : null
+  ] });
+}
+function FileTree({ tree = [], activePath, onSelect, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-filetree", className].filter(Boolean).join(" "), ...rest, children: tree.map((n, i) => /* @__PURE__ */ jsx(Node, { node: n, depth: 0, activePath, onSelect }, i)) });
+}
+export {
+  FileTree
+};
+//# sourceMappingURL=FileTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FileTree.js","sources":["../../../src/components/code/FileTree.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_FILETREE_CSS = `\n.ax-filetree { border: 1px solid var(--border-default); border-radius: var(--radius-3); background: var(--surface-card); padding: 8px; font-family: var(--font-mono); font-size: var(--text-sm); }\n.ax-filetree__row { display: flex; align-items: center; gap: 7px; padding: 4px 6px; border-radius: var(--radius-1); cursor: pointer; color: var(--text-muted); user-select: none; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-filetree__row:hover { background: var(--surface-raised); color: var(--text-body); }\n.ax-filetree__row--active { background: var(--surface-raised); color: var(--text-body); }\n.ax-filetree__row--active::before { content: \"\"; position: absolute; }\n.ax-filetree__chev { width: 12px; height: 12px; flex: none; color: var(--text-faint); transition: transform var(--dur-1) var(--ease-out); }\n.ax-filetree__chev--open { transform: rotate(90deg); }\n.ax-filetree__chev--spacer { visibility: hidden; }\n.ax-filetree__icon { width: 14px; height: 14px; flex: none; color: var(--text-faint); }\n.ax-filetree__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-filetree__badge { font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; padding: 1px 4px; border-radius: var(--radius-1); }\n.ax-filetree__badge--add { color: var(--ok); background: var(--ok-dim); }\n.ax-filetree__badge--mod { color: var(--warn); background: var(--warn-dim); }\n.ax-filetree__badge--del { color: var(--danger); background: var(--danger-dim); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-filetree-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-filetree-css\";\n  s.textContent = AX_FILETREE_CSS;\n  document.head.appendChild(s);\n}\n\nconst Folder = <svg className=\"ax-filetree__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\"></path></svg>;\nconst FileIcon = <svg className=\"ax-filetree__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8Z\"></path><path d=\"M14 2v6h6\"></path></svg>;\nconst Chev = <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m9 18 6-6-6-6\"></path></svg>;\n\nfunction Node({ node, depth, activePath, onSelect }) {\n  const [open, setOpen] = useState(node.defaultOpen !== false);\n  const isDir = node.type === \"dir\" || node.children;\n  const pad = { paddingLeft: 6 + depth * 14 };\n  return (\n    <React.Fragment>\n      <div\n        className={\"ax-filetree__row\" + (activePath === node.path ? \" ax-filetree__row--active\" : \"\")}\n        style={pad}\n        onClick={() => isDir ? setOpen((o) => !o) : onSelect && onSelect(node.path || node.name)}\n      >\n        {isDir\n          ? <span className={\"ax-filetree__chev\" + (open ? \" ax-filetree__chev--open\" : \"\")}>{Chev}</span>\n          : <span className=\"ax-filetree__chev ax-filetree__chev--spacer\">{Chev}</span>}\n        {isDir ? Folder : FileIcon}\n        <span className=\"ax-filetree__name\">{node.name}</span>\n        {node.status ? <span className={\"ax-filetree__badge ax-filetree__badge--\" + node.status}>{node.status === \"add\" ? \"A\" : node.status === \"mod\" ? \"M\" : \"D\"}</span> : null}\n      </div>\n      {isDir && open && node.children ? node.children.map((c, i) => (\n        <Node key={i} node={c} depth={depth + 1} activePath={activePath} onSelect={onSelect} />\n      )) : null}\n    </React.Fragment>\n  );\n}\n\nexport function FileTree({ tree = [], activePath, onSelect, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-filetree\", className].filter(Boolean).join(\" \")} {...rest}>\n      {tree.map((n, i) => <Node key={i} node={n} depth={0} activePath={activePath} onSelect={onSelect} />)}\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,6BAAU,OAAA,EAAI,WAAU,qBAAoB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA,oBAAC,QAAA,EAAK,GAAE,yHAAA,CAAyH,EAAA,CAAO;AAC7S,MAAM,WAAW,qBAAC,OAAA,EAAI,WAAU,qBAAoB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,6DAAA,CAA6D;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,YAAA,CAAY;AAAA,GAAO;AAC9Q,MAAM,OAAO,oBAAC,OAAA,EAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,8BAAC,QAAA,EAAK,GAAE,iBAAgB,GAAO;AAEtK,SAAS,KAAK,EAAE,MAAM,OAAO,YAAY,YAAY;AACnD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK,gBAAgB,KAAK;AAC3D,QAAM,QAAQ,KAAK,SAAS,SAAS,KAAK;AAC1C,QAAM,MAAM,EAAE,aAAa,IAAI,QAAQ,GAAA;AACvC,SACE,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,sBAAsB,eAAe,KAAK,OAAO,8BAA8B;AAAA,QAC1F,OAAO;AAAA,QACP,SAAS,MAAM,QAAQ,QAAQ,CAAC,MAAM,CAAC,CAAC,IAAI,YAAY,SAAS,KAAK,QAAQ,KAAK,IAAI;AAAA,QAEtF,UAAA;AAAA,UAAA,QACG,oBAAC,QAAA,EAAK,WAAW,uBAAuB,OAAO,6BAA6B,KAAM,UAAA,KAAA,CAAK,IACvF,oBAAC,QAAA,EAAK,WAAU,+CAA+C,UAAA,MAAK;AAAA,UACvE,QAAQ,SAAS;AAAA,UAClB,oBAAC,QAAA,EAAK,WAAU,qBAAqB,eAAK,MAAK;AAAA,UAC9C,KAAK,SAAS,oBAAC,QAAA,EAAK,WAAW,4CAA4C,KAAK,QAAS,UAAA,KAAK,WAAW,QAAQ,MAAM,KAAK,WAAW,QAAQ,MAAM,KAAI,IAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAErK,SAAS,QAAQ,KAAK,WAAW,KAAK,SAAS,IAAI,CAAC,GAAG,0BACrD,MAAA,EAAa,MAAM,GAAG,OAAO,QAAQ,GAAG,YAAwB,SAAA,GAAtD,CAA0E,CACtF,IAAI;AAAA,EAAA,GACP;AAEJ;AAEO,SAAS,SAAS,EAAE,OAAO,CAAA,GAAI,YAAY,UAAU,YAAY,IAAI,GAAG,QAAQ;AACrF,SACE,oBAAC,OAAA,EAAI,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACvE,UAAA,KAAK,IAAI,CAAC,GAAG,MAAM,oBAAC,MAAA,EAAa,MAAM,GAAG,OAAO,GAAG,YAAwB,SAAA,GAA9C,CAAkE,CAAE,EAAA,CACrG;AAEJ;"}

package/dist/components/code/JSXPreview.d.ts

@@ -0,0 +1,3 @@
+/** Side-by-side (or stacked) JSX source + live render panes. */
+export interface JSXPreviewProps { code: string; children?: React.ReactNode; stacked?: boolean; }
+export declare function JSXPreview(props: JSXPreviewProps): JSX.Element;