@agentaily/design-system 0.1.1 → 0.3.0

package/dist/components/auth/SignInPage.js

@@ -0,0 +1,217 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { BrandMark } from "../utilities/BrandMark.js";
+import { Button } from "../buttons/Button.js";
+import { Icon } from "../utilities/Icon.js";
+import { Input } from "../inputs/Input.js";
+const AX_SIGNIN_CSS = `
+.ax-signin { display: grid; grid-template-columns: 1fr 1fr; height: 100%; background: var(--surface-page); }
+.ax-signin__brand { position: relative; border-right: 1px solid var(--border-default); background: var(--surface-panel);
+  background-image: var(--dot-grid); background-size: 24px 24px; padding: 40px; display: flex; flex-direction: column; }
+.ax-signin__brandtop { display: flex; align-items: center; gap: 10px; }
+.ax-signin__mid { margin-top: auto; margin-bottom: auto; max-width: 22ch; }
+.ax-signin__quote { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-body); margin: 0; }
+.ax-signin__by { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); }
+.ax-signin__form { display: flex; align-items: center; justify-content: center; padding: 40px; }
+.ax-signin__card { width: 100%; max-width: 360px; }
+.ax-signin__mbrand { display: none; }
+.ax-signin__h { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text-body); }
+.ax-signin__sub { margin: 8px 0 28px; font-size: var(--text-sm); color: var(--text-muted); }
+.ax-signin__fields { display: flex; flex-direction: column; gap: 16px; }
+.ax-signin__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
+.ax-signin__link { font-size: 12px; color: var(--text-muted); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }
+.ax-signin__link:hover { color: var(--text-body); }
+.ax-signin__submit { margin-top: 22px; }
+.ax-signin__or { display: flex; align-items: center; gap: 12px; margin: 22px 0; }
+.ax-signin__or::before, .ax-signin__or::after { content: ""; flex: 1; height: 1px; background: var(--border-default); }
+.ax-signin__or span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); }
+.ax-signin__sso { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 40px; border: 1px solid var(--border-default);
+  border-radius: var(--radius-2); background: var(--surface-card); color: var(--text-body); font-family: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out); }
+.ax-signin__sso:hover { border-color: var(--border-strong); }
+.ax-signin__terms { margin: 16px 0 0; font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); text-align: center; }
+.ax-signin__terms a, .ax-signin__terms span.lk { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
+.ax-signin__foot { margin-top: 26px; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
+.ax-signin__footlink { color: var(--text-body); background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--text-sm);
+  border-bottom: 1px solid var(--border-strong); padding: 0 0 1px; transition: border-color var(--dur-1) var(--ease-out); }
+.ax-signin__footlink:hover { border-color: var(--text-faint); }
+@media (max-width: 860px) { .ax-signin { grid-template-columns: 1fr; } .ax-signin__brand { display: none; } .ax-signin__mbrand { display: flex; margin-bottom: 26px; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-signin-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-signin-css";
+  s.textContent = AX_SIGNIN_CSS;
+  document.head.appendChild(s);
+}
+const DEFAULT_COPY = {
+  signin: {
+    title: "Sign in",
+    subtitle: "Welcome back. Use your work email to continue.",
+    submit: "Continue",
+    switchText: "No account?",
+    switchCta: "Create one"
+  },
+  signup: {
+    title: "Create account",
+    subtitle: "Start with your work email — it takes a minute.",
+    submit: "Create account",
+    switchText: "Already have an account?",
+    switchCta: "Sign in"
+  }
+};
+function SignInPage({
+  mode,
+  defaultMode = "signin",
+  onModeChange,
+  brand,
+  copy,
+  email,
+  password,
+  onEmailChange,
+  onPasswordChange,
+  onSubmit,
+  onForgot,
+  ssoLabel = "Continue with SSO",
+  onSSO,
+  terms,
+  footer,
+  showBrandPanel = true
+}) {
+  const [modeI, setModeI] = useState(defaultMode);
+  const m = mode !== void 0 ? mode : modeI;
+  const isSignup = m === "signup";
+  const c = { ...DEFAULT_COPY[m], ...copy && copy[m] };
+  const [emailI, setEmailI] = useState("");
+  const [pwI, setPwI] = useState("");
+  const [confirm, setConfirm] = useState("");
+  const [errs, setErrs] = useState({});
+  const emailV = email !== void 0 ? email : emailI;
+  const pwV = password !== void 0 ? password : pwI;
+  const setEmail = (v) => {
+    if (onEmailChange) onEmailChange(v);
+    else setEmailI(v);
+    if (errs.email) setErrs((e) => ({ ...e, email: void 0 }));
+  };
+  const setPw = (v) => {
+    if (onPasswordChange) onPasswordChange(v);
+    else setPwI(v);
+    if (errs.password) setErrs((e) => ({ ...e, password: void 0 }));
+  };
+  const setConf = (v) => {
+    setConfirm(v);
+    if (errs.confirm) setErrs((e) => ({ ...e, confirm: void 0 }));
+  };
+  const switchMode = () => {
+    const next = isSignup ? "signin" : "signup";
+    setErrs({});
+    setConfirm("");
+    if (onModeChange) onModeChange(next);
+    if (mode === void 0) setModeI(next);
+  };
+  const validate = () => {
+    const e = {};
+    const em = (emailV || "").trim();
+    if (!em) e.email = "请输入邮箱";
+    else if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(em)) e.email = "邮箱格式不正确";
+    if (!pwV) e.password = "请输入密码";
+    else if (isSignup && pwV.length < 8) e.password = "密码至少 8 位";
+    if (isSignup) {
+      if (!confirm) e.confirm = "请再次输入密码";
+      else if (confirm !== pwV) e.confirm = "两次输入的密码不一致";
+    }
+    return e;
+  };
+  const submit = (ev) => {
+    ev.preventDefault();
+    const e = validate();
+    setErrs(e);
+    if (Object.keys(e).some((k) => e[k])) return;
+    onSubmit && onSubmit({ mode: m, email: (emailV || "").trim(), password: pwV });
+  };
+  const termsNode = terms !== void 0 ? terms : /* @__PURE__ */ jsxs(Fragment, { children: [
+    "注册即代表你同意 ",
+    /* @__PURE__ */ jsx("span", { className: "lk", children: "服务条款" }),
+    " 与",
+    " ",
+    /* @__PURE__ */ jsx("span", { className: "lk", children: "隐私政策" }),
+    "。"
+  ] });
+  return /* @__PURE__ */ jsxs("div", { className: "ax-signin", children: [
+    showBrandPanel ? /* @__PURE__ */ jsxs("aside", { className: "ax-signin__brand", children: [
+      /* @__PURE__ */ jsx("div", { className: "ax-signin__brandtop", children: brand || /* @__PURE__ */ jsx(BrandMark, { size: 24, wordmark: true }) }),
+      /* @__PURE__ */ jsxs("div", { className: "ax-signin__mid", children: [
+        /* @__PURE__ */ jsxs("p", { className: "ax-signin__quote", children: [
+          "聊天，",
+          /* @__PURE__ */ jsx("br", {}),
+          "构建万物"
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "ax-signin__by", children: "— AGENTAILY" })
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsx("main", { className: "ax-signin__form", children: /* @__PURE__ */ jsxs("form", { className: "ax-signin__card", onSubmit: submit, noValidate: true, children: [
+      /* @__PURE__ */ jsx("div", { className: "ax-signin__mbrand", children: brand || /* @__PURE__ */ jsx(BrandMark, { size: 22, wordmark: true }) }),
+      /* @__PURE__ */ jsx("h1", { className: "ax-signin__h", children: c.title }),
+      /* @__PURE__ */ jsx("p", { className: "ax-signin__sub", children: c.subtitle }),
+      /* @__PURE__ */ jsxs("div", { className: "ax-signin__fields", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "EMAIL",
+            type: "email",
+            autoComplete: "email",
+            placeholder: "you@example.com",
+            value: emailV,
+            error: errs.email,
+            onChange: (e) => setEmail(e.target.value)
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("div", { className: "ax-signin__row", children: [
+            /* @__PURE__ */ jsx("span", { className: "ax-label", children: "PASSWORD" }),
+            !isSignup && onForgot ? /* @__PURE__ */ jsx("button", { type: "button", className: "ax-signin__link", onClick: onForgot, children: "Forgot?" }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "password",
+              autoComplete: isSignup ? "new-password" : "current-password",
+              placeholder: isSignup ? "至少 8 位" : "••••••••",
+              value: pwV,
+              error: errs.password,
+              onChange: (e) => setPw(e.target.value)
+            }
+          )
+        ] }),
+        isSignup ? /* @__PURE__ */ jsx(
+          Input,
+          {
+            label: "CONFIRM PASSWORD",
+            type: "password",
+            autoComplete: "new-password",
+            placeholder: "再次输入密码",
+            value: confirm,
+            error: errs.confirm,
+            onChange: (e) => setConf(e.target.value)
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "ax-signin__submit", children: /* @__PURE__ */ jsx(Button, { variant: "primary", full: true, type: "submit", icon: /* @__PURE__ */ jsx(Icon, { name: "arrow", size: 15 }), children: c.submit }) }),
+      isSignup ? /* @__PURE__ */ jsx("p", { className: "ax-signin__terms", children: termsNode }) : null,
+      onSSO ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "ax-signin__or", children: /* @__PURE__ */ jsx("span", { children: "OR" }) }),
+        /* @__PURE__ */ jsxs("button", { type: "button", className: "ax-signin__sso", onClick: onSSO, children: [
+          /* @__PURE__ */ jsx(Icon, { name: "shield", size: 15 }),
+          ssoLabel
+        ] })
+      ] }) : null,
+      footer !== void 0 ? footer ? /* @__PURE__ */ jsx("p", { className: "ax-signin__foot", children: footer }) : null : /* @__PURE__ */ jsxs("p", { className: "ax-signin__foot", children: [
+        c.switchText,
+        " ",
+        /* @__PURE__ */ jsx("button", { type: "button", className: "ax-signin__footlink", onClick: switchMode, children: c.switchCta })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  SignInPage
+};
+//# sourceMappingURL=SignInPage.js.map

package/dist/components/auth/SignInPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SignInPage.js","sources":["../../../src/components/auth/SignInPage.jsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { BrandMark } from \"../utilities/BrandMark.jsx\";\nimport { Button } from \"../buttons/Button.jsx\";\nimport { Icon } from \"../utilities/Icon.jsx\";\nimport { Input } from \"../inputs/Input.jsx\";\n\n// SignInPage — full-page auth: a split brand panel (dot-grid + quote) beside a\n// centered card. One component, two modes (signin / signup) — the brand panel,\n// SSO, and card chrome are shared; only the fields, copy, and footer differ.\n// The footer link flips mode (and fires onModeChange so a router can swap the\n// URL). The full-page sibling of AuthDialog (the modal); same login/register idea.\nconst AX_SIGNIN_CSS = `\n.ax-signin { display: grid; grid-template-columns: 1fr 1fr; height: 100%; background: var(--surface-page); }\n.ax-signin__brand { position: relative; border-right: 1px solid var(--border-default); background: var(--surface-panel);\n  background-image: var(--dot-grid); background-size: 24px 24px; padding: 40px; display: flex; flex-direction: column; }\n.ax-signin__brandtop { display: flex; align-items: center; gap: 10px; }\n.ax-signin__mid { margin-top: auto; margin-bottom: auto; max-width: 22ch; }\n.ax-signin__quote { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--text-body); margin: 0; }\n.ax-signin__by { margin: 16px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-faint); }\n.ax-signin__form { display: flex; align-items: center; justify-content: center; padding: 40px; }\n.ax-signin__card { width: 100%; max-width: 360px; }\n.ax-signin__mbrand { display: none; }\n.ax-signin__h { margin: 0; font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--text-body); }\n.ax-signin__sub { margin: 8px 0 28px; font-size: var(--text-sm); color: var(--text-muted); }\n.ax-signin__fields { display: flex; flex-direction: column; gap: 16px; }\n.ax-signin__row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }\n.ax-signin__link { font-size: 12px; color: var(--text-muted); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; }\n.ax-signin__link:hover { color: var(--text-body); }\n.ax-signin__submit { margin-top: 22px; }\n.ax-signin__or { display: flex; align-items: center; gap: 12px; margin: 22px 0; }\n.ax-signin__or::before, .ax-signin__or::after { content: \"\"; flex: 1; height: 1px; background: var(--border-default); }\n.ax-signin__or span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-faint); }\n.ax-signin__sso { display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 40px; border: 1px solid var(--border-default);\n  border-radius: var(--radius-2); background: var(--surface-card); color: var(--text-body); font-family: inherit; font-size: var(--text-sm); cursor: pointer; transition: border-color var(--dur-1) var(--ease-out); }\n.ax-signin__sso:hover { border-color: var(--border-strong); }\n.ax-signin__terms { margin: 16px 0 0; font-size: var(--text-xs); color: var(--text-faint); line-height: var(--leading-snug); text-align: center; }\n.ax-signin__terms a, .ax-signin__terms span.lk { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }\n.ax-signin__foot { margin-top: 26px; text-align: center; font-size: var(--text-sm); color: var(--text-muted); }\n.ax-signin__footlink { color: var(--text-body); background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--text-sm);\n  border-bottom: 1px solid var(--border-strong); padding: 0 0 1px; transition: border-color var(--dur-1) var(--ease-out); }\n.ax-signin__footlink:hover { border-color: var(--text-faint); }\n@media (max-width: 860px) { .ax-signin { grid-template-columns: 1fr; } .ax-signin__brand { display: none; } .ax-signin__mbrand { display: flex; margin-bottom: 26px; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-signin-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-signin-css\";\n  s.textContent = AX_SIGNIN_CSS;\n  document.head.appendChild(s);\n}\n\nconst DEFAULT_COPY = {\n  signin: {\n    title: \"Sign in\",\n    subtitle: \"Welcome back. Use your work email to continue.\",\n    submit: \"Continue\",\n    switchText: \"No account?\",\n    switchCta: \"Create one\",\n  },\n  signup: {\n    title: \"Create account\",\n    subtitle: \"Start with your work email — it takes a minute.\",\n    submit: \"Create account\",\n    switchText: \"Already have an account?\",\n    switchCta: \"Sign in\",\n  },\n};\n\nexport function SignInPage({\n  mode,\n  defaultMode = \"signin\",\n  onModeChange,\n  brand,\n  copy,\n  email,\n  password,\n  onEmailChange,\n  onPasswordChange,\n  onSubmit,\n  onForgot,\n  ssoLabel = \"Continue with SSO\",\n  onSSO,\n  terms,\n  footer,\n  showBrandPanel = true,\n}) {\n  const [modeI, setModeI] = useState(defaultMode);\n  const m = mode !== undefined ? mode : modeI;\n  const isSignup = m === \"signup\";\n  const c = { ...DEFAULT_COPY[m], ...(copy && copy[m]) };\n\n  const [emailI, setEmailI] = useState(\"\");\n  const [pwI, setPwI] = useState(\"\");\n  const [confirm, setConfirm] = useState(\"\");\n  const [errs, setErrs] = useState({});\n  const emailV = email !== undefined ? email : emailI;\n  const pwV = password !== undefined ? password : pwI;\n  const setEmail = (v) => {\n    if (onEmailChange) onEmailChange(v);\n    else setEmailI(v);\n    if (errs.email) setErrs((e) => ({ ...e, email: undefined }));\n  };\n  const setPw = (v) => {\n    if (onPasswordChange) onPasswordChange(v);\n    else setPwI(v);\n    if (errs.password) setErrs((e) => ({ ...e, password: undefined }));\n  };\n  const setConf = (v) => {\n    setConfirm(v);\n    if (errs.confirm) setErrs((e) => ({ ...e, confirm: undefined }));\n  };\n\n  const switchMode = () => {\n    const next = isSignup ? \"signin\" : \"signup\";\n    setErrs({});\n    setConfirm(\"\");\n    if (onModeChange) onModeChange(next);\n    if (mode === undefined) setModeI(next);\n  };\n\n  const validate = () => {\n    const e = {};\n    const em = (emailV || \"\").trim();\n    if (!em) e.email = \"请输入邮箱\";\n    else if (!/^[^@\\s]+@[^@\\s]+\\.[^@\\s]+$/.test(em)) e.email = \"邮箱格式不正确\";\n    if (!pwV) e.password = \"请输入密码\";\n    else if (isSignup && pwV.length < 8) e.password = \"密码至少 8 位\";\n    if (isSignup) {\n      if (!confirm) e.confirm = \"请再次输入密码\";\n      else if (confirm !== pwV) e.confirm = \"两次输入的密码不一致\";\n    }\n    return e;\n  };\n\n  const submit = (ev) => {\n    ev.preventDefault();\n    const e = validate();\n    setErrs(e);\n    if (Object.keys(e).some((k) => e[k])) return;\n    onSubmit && onSubmit({ mode: m, email: (emailV || \"\").trim(), password: pwV });\n  };\n\n  const termsNode =\n    terms !== undefined ? (\n      terms\n    ) : (\n      <>\n        注册即代表你同意 <span className=\"lk\">服务条款</span> 与{\" \"}\n        <span className=\"lk\">隐私政策</span>。\n      </>\n    );\n\n  return (\n    <div className=\"ax-signin\">\n      {showBrandPanel ? (\n        <aside className=\"ax-signin__brand\">\n          <div className=\"ax-signin__brandtop\">{brand || <BrandMark size={24} wordmark />}</div>\n          <div className=\"ax-signin__mid\">\n            <p className=\"ax-signin__quote\">\n              聊天，\n              <br />\n              构建万物\n            </p>\n            <p className=\"ax-signin__by\">— AGENTAILY</p>\n          </div>\n        </aside>\n      ) : null}\n\n      <main className=\"ax-signin__form\">\n        <form className=\"ax-signin__card\" onSubmit={submit} noValidate>\n          <div className=\"ax-signin__mbrand\">{brand || <BrandMark size={22} wordmark />}</div>\n          <h1 className=\"ax-signin__h\">{c.title}</h1>\n          <p className=\"ax-signin__sub\">{c.subtitle}</p>\n\n          <div className=\"ax-signin__fields\">\n            <Input\n              label=\"EMAIL\"\n              type=\"email\"\n              autoComplete=\"email\"\n              placeholder=\"you@example.com\"\n              value={emailV}\n              error={errs.email}\n              onChange={(e) => setEmail(e.target.value)}\n            />\n            <div>\n              <div className=\"ax-signin__row\">\n                <span className=\"ax-label\">PASSWORD</span>\n                {!isSignup && onForgot ? (\n                  <button type=\"button\" className=\"ax-signin__link\" onClick={onForgot}>\n                    Forgot?\n                  </button>\n                ) : null}\n              </div>\n              <Input\n                type=\"password\"\n                autoComplete={isSignup ? \"new-password\" : \"current-password\"}\n                placeholder={isSignup ? \"至少 8 位\" : \"••••••••\"}\n                value={pwV}\n                error={errs.password}\n                onChange={(e) => setPw(e.target.value)}\n              />\n            </div>\n            {isSignup ? (\n              <Input\n                label=\"CONFIRM PASSWORD\"\n                type=\"password\"\n                autoComplete=\"new-password\"\n                placeholder=\"再次输入密码\"\n                value={confirm}\n                error={errs.confirm}\n                onChange={(e) => setConf(e.target.value)}\n              />\n            ) : null}\n          </div>\n\n          <div className=\"ax-signin__submit\">\n            <Button variant=\"primary\" full type=\"submit\" icon={<Icon name=\"arrow\" size={15} />}>\n              {c.submit}\n            </Button>\n          </div>\n\n          {isSignup ? <p className=\"ax-signin__terms\">{termsNode}</p> : null}\n\n          {onSSO ? (\n            <React.Fragment>\n              <div className=\"ax-signin__or\">\n                <span>OR</span>\n              </div>\n              <button type=\"button\" className=\"ax-signin__sso\" onClick={onSSO}>\n                <Icon name=\"shield\" size={15} />\n                {ssoLabel}\n              </button>\n            </React.Fragment>\n          ) : null}\n\n          {footer !== undefined ? (\n            footer ? (\n              <p className=\"ax-signin__foot\">{footer}</p>\n            ) : null\n          ) : (\n            <p className=\"ax-signin__foot\">\n              {c.switchText}{\" \"}\n              <button type=\"button\" className=\"ax-signin__footlink\" onClick={switchMode}>\n                {c.switchCta}\n              </button>\n            </p>\n          )}\n        </form>\n      </main>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/chat/CodeBlock.js

@@ -5,9 +5,10 @@ const AX_CODE_CSS = `
   border: 1px solid var(--border-default);
   border-radius: var(--radius-2);
   overflow: hidden;
-  background: var(--bg-0);
+  background: var(--bg-1);
 }
-[data-theme="light"] .ax-code, .ax-code--paper { background: var(--bg-1); }
+[data-theme="dark"] .ax-code { background: var(--bg-0); }
+.ax-code--paper { background: var(--bg-1); }
 .ax-code__head {
   display: flex; align-items: center; justify-content: space-between;
   padding: 6px 12px;

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/chat/CodeBlock.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_CODE_CSS = `\n.ax-code {\n  border: 1px solid var(--border-default);\n  border-radius: var(--radius-2);\n  overflow: hidden;\n  background: var(--bg-0);\n}\n[data-theme=\"light\"] .ax-code, .ax-code--paper { background: var(--bg-1); }\n.ax-code__head {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 6px 12px;\n  border-bottom: 1px solid var(--border-default);\n  background: var(--surface-card);\n}\n.ax-code__lang {\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  letter-spacing: var(--tracking-label); text-transform: uppercase;\n  color: var(--text-faint);\n}\n.ax-code__copy {\n  appearance: none; background: none; border: none; cursor: pointer;\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  color: var(--text-faint); padding: 2px 6px; border-radius: var(--radius-1);\n  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n}\n.ax-code__copy:hover { color: var(--text-body); background: var(--surface-raised); }\n.ax-code__pre {\n  margin: 0; padding: 14px 16px; overflow-x: auto;\n  font-family: var(--font-mono); font-size: var(--text-sm);\n  line-height: 1.7; color: var(--text-body);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-code-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-code-css\";\n  s.textContent = AX_CODE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function CodeBlock({ code = \"\", lang = \"text\", className = \"\", ...rest }) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    try {\n      navigator.clipboard && navigator.clipboard.writeText(code);\n    } catch (e) { /* noop */ }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-code\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-code__head\">\n        <span className=\"ax-code__lang\">{lang}</span>\n        <button type=\"button\" className=\"ax-code__copy\" onClick={copy}>\n          {copied ? \"copied ✓\" : \"copy\"}\n        </button>\n      </div>\n      <pre className=\"ax-code__pre\"><code>{code}</code></pre>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiCpB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,UAAU,EAAE,OAAO,IAAI,OAAO,QAAQ,YAAY,IAAI,GAAG,QAAQ;AAC/E,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,IAAa;AACzB,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EACzC;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACpE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAK;AAAA,MACtC,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAU,iBAAgB,SAAS,MACtD,UAAA,SAAS,aAAa,OAAA,CACzB;AAAA,IAAA,GACF;AAAA,wBACC,OAAA,EAAI,WAAU,gBAAe,UAAA,oBAAC,QAAA,EAAM,gBAAK,EAAA,CAAO;AAAA,EAAA,GACnD;AAEJ;"}
+{"version":3,"file":"CodeBlock.js","sources":["../../../src/components/chat/CodeBlock.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_CODE_CSS = `\n.ax-code {\n  border: 1px solid var(--border-default);\n  border-radius: var(--radius-2);\n  overflow: hidden;\n  background: var(--bg-1);\n}\n[data-theme=\"dark\"] .ax-code { background: var(--bg-0); }\n.ax-code--paper { background: var(--bg-1); }\n.ax-code__head {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: 6px 12px;\n  border-bottom: 1px solid var(--border-default);\n  background: var(--surface-card);\n}\n.ax-code__lang {\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  letter-spacing: var(--tracking-label); text-transform: uppercase;\n  color: var(--text-faint);\n}\n.ax-code__copy {\n  appearance: none; background: none; border: none; cursor: pointer;\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  color: var(--text-faint); padding: 2px 6px; border-radius: var(--radius-1);\n  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n}\n.ax-code__copy:hover { color: var(--text-body); background: var(--surface-raised); }\n.ax-code__pre {\n  margin: 0; padding: 14px 16px; overflow-x: auto;\n  font-family: var(--font-mono); font-size: var(--text-sm);\n  line-height: 1.7; color: var(--text-body);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-code-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-code-css\";\n  s.textContent = AX_CODE_CSS;\n  document.head.appendChild(s);\n}\n\nexport function CodeBlock({ code = \"\", lang = \"text\", className = \"\", ...rest }) {\n  const [copied, setCopied] = useState(false);\n  const copy = () => {\n    try {\n      navigator.clipboard && navigator.clipboard.writeText(code);\n    } catch (e) {\n      /* noop */\n    }\n    setCopied(true);\n    setTimeout(() => setCopied(false), 1500);\n  };\n  return (\n    <div className={[\"ax-code\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-code__head\">\n        <span className=\"ax-code__lang\">{lang}</span>\n        <button type=\"button\" className=\"ax-code__copy\" onClick={copy}>\n          {copied ? \"copied ✓\" : \"copy\"}\n        </button>\n      </div>\n      <pre className=\"ax-code__pre\">\n        <code>{code}</code>\n      </pre>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCpB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,UAAU,EAAE,OAAO,IAAI,OAAO,QAAQ,YAAY,IAAI,GAAG,QAAQ;AAC/E,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,IAEZ;AACA,cAAU,IAAI;AACd,eAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,EACzC;AACA,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACpE,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAU,iBACb,UAAA;AAAA,MAAA,oBAAC,QAAA,EAAK,WAAU,iBAAiB,UAAA,MAAK;AAAA,MACtC,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAU,iBAAgB,SAAS,MACtD,UAAA,SAAS,aAAa,OAAA,CACzB;AAAA,IAAA,GACF;AAAA,wBACC,OAAA,EAAI,WAAU,gBACb,UAAA,oBAAC,QAAA,EAAM,gBAAK,EAAA,CACd;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -0,0 +1,67 @@
+/**
+ * Pure-render chat surface. State lives OUTSIDE: the caller holds the queue
+ * (`const q = Queue.useQueue({ onFirst, onBatch })`) and injects it as
+ * `controller`. The composer enqueues into it; the buffer list + busy state read
+ * from it; the caller can also enqueue programmatically and read `controller.busy`
+ * elsewhere. The component never owns chat state.
+ */
+export interface ThreadMessage {
+  id?: string | number;
+  role: "user" | "assistant";
+  /** Plain text for the default renderer; optional when you supply renderTurn. */
+  text?: string;
+  /** Optional mono timestamp on assistant turns. */
+  time?: string;
+  /** Per-message streaming flag (read by renderTurn via ctx.streaming). */
+  streaming?: boolean;
+  /** Free-form turn kind for renderTurn dispatch, e.g. "reasoning" | "tool" | "text". */
+  kind?: string;
+  /** Any extra fields your renderTurn needs (steps, duration, name, args, result, status, suggestions, …). */
+  [key: string]: any;
+}
+export interface TurnContext {
+  /** Whether this turn is currently streaming. */
+  streaming: boolean;
+  /** Whether this is the last turn in the thread. */
+  isLast: boolean;
+}
+export interface ConversationThreadProps {
+  /** @default "New chat" */
+  title?: string;
+  /** Model chip + Composer model label. @default "agentaily-2" */
+  model?: string;
+  /** Header right-side actions (share/settings…). */
+  actions?: React.ReactNode;
+  messages?: ThreadMessage[];
+  draft?: string;
+  onDraftChange?: (value: string) => void;
+  /** The queue that drives this thread: a Queue.useQueue(...) return value held by the caller. */
+  controller?: import("../ai/Queue").UseQueueReturn;
+  /** Buffer list title. @default "缓冲区 · 下一轮一起发" */
+  queueTitle?: string;
+  disabled?: boolean;
+  /** Empty-state hint chips. */
+  hints?: string[];
+  /** Hint-click handler; defaults to sending the hint. */
+  onHint?: (hint: string) => void;
+  /** @default "有什么要解决的？" */
+  emptyTitle?: string;
+  /** Composer placeholder when idle. */
+  placeholder?: string;
+  /** Composer placeholder while the queue is draining (busy). */
+  busyPlaceholder?: string;
+  /** Mono footer disclaimer; pass "" to hide. */
+  note?: string;
+  /** Show a Copy tool under assistant turns. */
+  onCopy?: (message: ThreadMessage, index: number) => void;
+  /** Show a Regenerate tool under assistant turns. */
+  onRegenerate?: (message: ThreadMessage, index: number) => void;
+  /**
+   * Custom turn renderer. When provided, each turn is rendered by this instead of
+   * the default plain-text <Message>. Use it for rich turns with Reasoning /
+   * ToolCall / Suggestions / Message. Per-message `streaming` is surfaced via
+   * ctx.streaming. Omit for the plain-text default.
+   */
+  renderTurn?: (message: ThreadMessage, index: number, ctx: TurnContext) => React.ReactNode;
+}
+export declare function ConversationThread(props: ConversationThreadProps): JSX.Element;

package/dist/components/chat/ConversationThread.js

@@ -0,0 +1,129 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect } from "react";
+import { Badge } from "../display/Badge.js";
+import { BrandMark } from "../utilities/BrandMark.js";
+import { Composer } from "./Composer.js";
+import { Icon } from "../utilities/Icon.js";
+import { IconButton } from "../buttons/IconButton.js";
+import { Message } from "./Message.js";
+import { Queue } from "../ai/Queue.js";
+const AX_CTHREAD_CSS = `
+.ax-cthread { display: flex; flex-direction: column; height: 100%; background: var(--surface-page); }
+.ax-cthread__head { display: flex; align-items: center; gap: 12px; height: var(--bar-h); padding: 0 20px; border-bottom: 1px solid var(--border-default); flex: none; }
+.ax-cthread__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }
+.ax-cthread__sp { flex: 1; }
+.ax-cthread__thread { flex: 1; overflow-y: auto; }
+.ax-cthread__col { max-width: var(--thread-max, 760px); margin: 0 auto; padding: 32px 24px 16px; display: flex; flex-direction: column; gap: 24px; }
+.ax-cthread__turn { display: flex; flex-direction: column; }
+.ax-cthread__tools { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }
+.ax-cthread__turn:hover .ax-cthread__tools { opacity: 1; }
+.ax-cthread__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; }
+.ax-cthread__emptyh { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-body); margin: 12px 0 0; }
+.ax-cthread__hints { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }
+.ax-cthread__hint { appearance: none; cursor: pointer; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-2);
+  padding: 7px 12px; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-cthread__hint:hover { border-color: var(--border-strong); color: var(--text-body); }
+.ax-cthread__foot { padding: 8px 24px 14px; flex: none; }
+.ax-cthread__footcol { max-width: var(--thread-max, 760px); margin: 0 auto; }
+.ax-cthread__queue { margin-bottom: 10px; }
+.ax-cthread__note { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin: 8px 0 0; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-cthread-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-cthread-css";
+  s.textContent = AX_CTHREAD_CSS;
+  document.head.appendChild(s);
+}
+function ConversationThread({
+  title = "New chat",
+  model = "agentaily-2",
+  actions,
+  messages = [],
+  draft = "",
+  onDraftChange,
+  controller,
+  queueTitle = "缓冲区 · 下一轮一起发",
+  disabled = false,
+  hints = [],
+  onHint,
+  emptyTitle = "有什么要解决的？",
+  placeholder = "Message Agentaily…",
+  busyPlaceholder = "可继续输入，会收进缓冲区一起处理…",
+  note = "AGENTAILY MAY MAKE MISTAKES · VERIFY CRITICAL OUTPUT",
+  onCopy,
+  onRegenerate,
+  renderTurn
+}) {
+  const queue = controller ? controller.queue : [];
+  const busy = controller ? controller.busy : false;
+  const threadRef = useRef(null);
+  useEffect(() => {
+    const el = threadRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [messages, queue.length]);
+  const send = (text) => {
+    const t = (text || "").trim();
+    if (!t || !controller) return;
+    controller.enqueue(t);
+    if (onDraftChange) onDraftChange("");
+  };
+  const empty = messages.length === 0 && queue.length === 0;
+  const showTools = onCopy || onRegenerate;
+  return /* @__PURE__ */ jsxs("div", { className: "ax-cthread", children: [
+    /* @__PURE__ */ jsxs("header", { className: "ax-cthread__head", children: [
+      /* @__PURE__ */ jsx("h1", { className: "ax-cthread__title", children: title }),
+      model ? /* @__PURE__ */ jsx(Badge, { variant: "outline", children: model }) : null,
+      /* @__PURE__ */ jsx("span", { className: "ax-cthread__sp" }),
+      actions
+    ] }),
+    empty ? /* @__PURE__ */ jsxs("div", { className: "ax-cthread__empty ax-dotgrid", children: [
+      /* @__PURE__ */ jsx(BrandMark, { size: 40 }),
+      /* @__PURE__ */ jsx("h2", { className: "ax-cthread__emptyh", children: emptyTitle }),
+      hints.length ? /* @__PURE__ */ jsx("div", { className: "ax-cthread__hints", children: hints.map((h) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "ax-cthread__hint",
+          onClick: () => onHint ? onHint(h) : send(h),
+          children: h
+        },
+        h
+      )) }) : null
+    ] }) : /* @__PURE__ */ jsx("div", { className: "ax-cthread__thread", ref: threadRef, children: /* @__PURE__ */ jsx("div", { className: "ax-cthread__col", children: messages.map((m, idx) => /* @__PURE__ */ jsx("div", { className: "ax-cthread__turn", children: renderTurn ? renderTurn(m, idx, {
+      streaming: !!m.streaming,
+      isLast: idx === messages.length - 1
+    }) : /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(Message, { role: m.role, time: m.time, streaming: !!m.streaming, children: /* @__PURE__ */ jsx("p", { children: m.text }) }),
+      m.role === "assistant" && showTools ? /* @__PURE__ */ jsxs("div", { className: "ax-cthread__tools", children: [
+        onCopy ? /* @__PURE__ */ jsx(IconButton, { size: "sm", label: "Copy", onClick: () => onCopy(m, idx), children: /* @__PURE__ */ jsx(Icon, { name: "copy", size: 13 }) }) : null,
+        onRegenerate ? /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            size: "sm",
+            label: "Regenerate",
+            onClick: () => onRegenerate(m, idx),
+            children: /* @__PURE__ */ jsx(Icon, { name: "refresh", size: 13 })
+          }
+        ) : null
+      ] }) : null
+    ] }) }, m.id != null ? m.id : idx)) }) }),
+    /* @__PURE__ */ jsx("div", { className: "ax-cthread__foot", children: /* @__PURE__ */ jsxs("div", { className: "ax-cthread__footcol", children: [
+      queue.length > 0 ? /* @__PURE__ */ jsx("div", { className: "ax-cthread__queue", children: /* @__PURE__ */ jsx(Queue, { title: queueTitle, items: queue, onRemove: controller.remove }) }) : null,
+      /* @__PURE__ */ jsx(
+        Composer,
+        {
+          value: draft,
+          onChange: onDraftChange,
+          onSend: () => send(draft),
+          disabled,
+          placeholder: busy ? busyPlaceholder : placeholder,
+          model
+        }
+      ),
+      note ? /* @__PURE__ */ jsx("p", { className: "ax-cthread__note", children: note }) : null
+    ] }) })
+  ] });
+}
+export {
+  ConversationThread
+};
+//# sourceMappingURL=ConversationThread.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ConversationThread.js","sources":["../../../src/components/chat/ConversationThread.jsx"],"sourcesContent":["import React, { useRef, useEffect } from \"react\";\nimport { Badge } from \"../display/Badge.jsx\";\nimport { BrandMark } from \"../utilities/BrandMark.jsx\";\nimport { Composer } from \"./Composer.jsx\";\nimport { Icon } from \"../utilities/Icon.jsx\";\nimport { IconButton } from \"../buttons/IconButton.jsx\";\nimport { Message } from \"./Message.jsx\";\nimport { Queue } from \"../ai/Queue.jsx\";\n\n// ConversationThread — a pure-render chat surface: header (title · model ·\n// actions), an empty state with hint chips, a scrolling thread of turns, and a\n// pinned Composer. State lives OUTSIDE: the caller holds the queue\n// (Queue.useQueue) and injects it as `controller`. The component only renders.\n//\n// The composer enqueues into the controller; the buffer list, busy state, and\n// \"keep typing while busy\" all flow through it — and because the caller owns the\n// hook, it can also enqueue programmatically and read controller.busy elsewhere.\nconst AX_CTHREAD_CSS = `\n.ax-cthread { display: flex; flex-direction: column; height: 100%; background: var(--surface-page); }\n.ax-cthread__head { display: flex; align-items: center; gap: 12px; height: var(--bar-h); padding: 0 20px; border-bottom: 1px solid var(--border-default); flex: none; }\n.ax-cthread__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }\n.ax-cthread__sp { flex: 1; }\n.ax-cthread__thread { flex: 1; overflow-y: auto; }\n.ax-cthread__col { max-width: var(--thread-max, 760px); margin: 0 auto; padding: 32px 24px 16px; display: flex; flex-direction: column; gap: 24px; }\n.ax-cthread__turn { display: flex; flex-direction: column; }\n.ax-cthread__tools { display: flex; gap: 2px; margin-top: 6px; opacity: 0; transition: opacity var(--dur-1) var(--ease-out); }\n.ax-cthread__turn:hover .ax-cthread__tools { opacity: 1; }\n.ax-cthread__empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px; }\n.ax-cthread__emptyh { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); color: var(--text-body); margin: 12px 0 0; }\n.ax-cthread__hints { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; justify-content: center; }\n.ax-cthread__hint { appearance: none; cursor: pointer; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-2);\n  padding: 7px 12px; font-family: var(--font-body); font-size: var(--text-sm); color: var(--text-muted); transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-cthread__hint:hover { border-color: var(--border-strong); color: var(--text-body); }\n.ax-cthread__foot { padding: 8px 24px 14px; flex: none; }\n.ax-cthread__footcol { max-width: var(--thread-max, 760px); margin: 0 auto; }\n.ax-cthread__queue { margin-bottom: 10px; }\n.ax-cthread__note { text-align: center; font-family: var(--font-mono); font-size: 10px; color: var(--text-faint); margin: 8px 0 0; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-cthread-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-cthread-css\";\n  s.textContent = AX_CTHREAD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function ConversationThread({\n  title = \"New chat\",\n  model = \"agentaily-2\",\n  actions,\n  messages = [],\n  draft = \"\",\n  onDraftChange,\n  controller,\n  queueTitle = \"缓冲区 · 下一轮一起发\",\n  disabled = false,\n  hints = [],\n  onHint,\n  emptyTitle = \"有什么要解决的？\",\n  placeholder = \"Message Agentaily…\",\n  busyPlaceholder = \"可继续输入，会收进缓冲区一起处理…\",\n  note = \"AGENTAILY MAY MAKE MISTAKES · VERIFY CRITICAL OUTPUT\",\n  onCopy,\n  onRegenerate,\n  renderTurn,\n}) {\n  const queue = controller ? controller.queue : [];\n  const busy = controller ? controller.busy : false;\n\n  const threadRef = useRef(null);\n  useEffect(() => {\n    const el = threadRef.current;\n    if (el) el.scrollTop = el.scrollHeight;\n  }, [messages, queue.length]);\n\n  const send = (text) => {\n    const t = (text || \"\").trim();\n    if (!t || !controller) return;\n    controller.enqueue(t);\n    if (onDraftChange) onDraftChange(\"\");\n  };\n\n  const empty = messages.length === 0 && queue.length === 0;\n  const showTools = onCopy || onRegenerate;\n\n  return (\n    <div className=\"ax-cthread\">\n      <header className=\"ax-cthread__head\">\n        <h1 className=\"ax-cthread__title\">{title}</h1>\n        {model ? <Badge variant=\"outline\">{model}</Badge> : null}\n        <span className=\"ax-cthread__sp\"></span>\n        {actions}\n      </header>\n\n      {empty ? (\n        <div className=\"ax-cthread__empty ax-dotgrid\">\n          <BrandMark size={40} />\n          <h2 className=\"ax-cthread__emptyh\">{emptyTitle}</h2>\n          {hints.length ? (\n            <div className=\"ax-cthread__hints\">\n              {hints.map((h) => (\n                <button\n                  key={h}\n                  className=\"ax-cthread__hint\"\n                  onClick={() => (onHint ? onHint(h) : send(h))}\n                >\n                  {h}\n                </button>\n              ))}\n            </div>\n          ) : null}\n        </div>\n      ) : (\n        <div className=\"ax-cthread__thread\" ref={threadRef}>\n          <div className=\"ax-cthread__col\">\n            {messages.map((m, idx) => (\n              <div className=\"ax-cthread__turn\" key={m.id != null ? m.id : idx}>\n                {renderTurn ? (\n                  renderTurn(m, idx, {\n                    streaming: !!m.streaming,\n                    isLast: idx === messages.length - 1,\n                  })\n                ) : (\n                  <React.Fragment>\n                    <Message role={m.role} time={m.time} streaming={!!m.streaming}>\n                      <p>{m.text}</p>\n                    </Message>\n                    {m.role === \"assistant\" && showTools ? (\n                      <div className=\"ax-cthread__tools\">\n                        {onCopy ? (\n                          <IconButton size=\"sm\" label=\"Copy\" onClick={() => onCopy(m, idx)}>\n                            <Icon name=\"copy\" size={13} />\n                          </IconButton>\n                        ) : null}\n                        {onRegenerate ? (\n                          <IconButton\n                            size=\"sm\"\n                            label=\"Regenerate\"\n                            onClick={() => onRegenerate(m, idx)}\n                          >\n                            <Icon name=\"refresh\" size={13} />\n                          </IconButton>\n                        ) : null}\n                      </div>\n                    ) : null}\n                  </React.Fragment>\n                )}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n\n      <div className=\"ax-cthread__foot\">\n        <div className=\"ax-cthread__footcol\">\n          {queue.length > 0 ? (\n            <div className=\"ax-cthread__queue\">\n              <Queue title={queueTitle} items={queue} onRemove={controller.remove} />\n            </div>\n          ) : null}\n          <Composer\n            value={draft}\n            onChange={onDraftChange}\n            onSend={() => send(draft)}\n            disabled={disabled}\n            placeholder={busy ? busyPlaceholder : placeholder}\n            model={model}\n          />\n          {note ? <p className=\"ax-cthread__note\">{note}</p> : null}\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/components/code/Artifact.js

@@ -12,8 +12,8 @@ const AX_ARTIFACT_CSS = `
 .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__preview { padding: 20px; background: var(--bg-1); min-height: 120px; }
+[data-theme="dark"] .ax-artifact__preview { background: var(--bg-0); }
 .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")) {
@@ -22,11 +22,32 @@ if (typeof document !== "undefined" && !document.getElementById("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 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: [
@@ -36,8 +57,22 @@ function Artifact({ title = "Artifact", subtitle, code, preview, defaultTab = "p
         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" })
+        /* @__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
     ] }),

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;"}