@mova-ui/react 0.4.1 → 0.4.4

package/dist/index.js

@@ -410,18 +410,18 @@ function ApprovalCard({
   };
   if (questions.length === 0) return /* @__PURE__ */ jsx("div", { role: "status", className: "text-[13px]", children: "No questions to approve." });
   if (!open) {
-    return /* @__PURE__ */ jsx("button", { ref: reopenRef, type: "button", onClick: () => setOpen(true), className: "rounded-[8px] bg-[var(--surface)] px-3 py-2 text-[12.5px] font-medium text-[var(--ink)] shadow-[var(--shadow-btn)] transition-colors duration-150 hover:bg-[var(--hover)]", children: "Open approval" });
+    return /* @__PURE__ */ jsx("button", { ref: reopenRef, type: "button", onClick: () => setOpen(true), className: "rounded-[8px] bg-[var(--mova-ai-surface,#fff)] px-3 py-2 text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-btn,none)] transition-colors duration-150 hover:bg-[var(--mova-ai-hover,#f1f1f1)]", children: "Open approval" });
   }
   if (sent) {
     return /* @__PURE__ */ jsxs("div", { ref: sentStatusRef, tabIndex: -1, role: "status", className: "flex w-full max-w-80 flex-wrap items-center gap-3", style: { animation: "mova-ai-approval-card-pop-in 260ms cubic-bezier(0.23,1,0.32,1) both" }, children: [
-      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--green-tint)] py-1 pr-2.5 pl-1 text-[12.5px] font-medium text-[var(--green)]", children: [
-        /* @__PURE__ */ jsx("span", { className: "flex size-4.5 items-center justify-center rounded-full bg-[var(--green)] text-white", children: /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[var(--mova-ai-success-tint,#e8f3ec)] py-1 pr-2.5 pl-1 text-[12.5px] font-medium text-[var(--mova-ai-success,#28734d)]", children: [
+        /* @__PURE__ */ jsx("span", { className: "flex size-4.5 items-center justify-center rounded-full bg-[var(--mova-ai-success,#28734d)] text-white", children: /* @__PURE__ */ jsx("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) }) }),
         t.sentMessage
       ] }),
-      resettable && /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, className: "text-[12px] font-medium text-[var(--ink-3)] transition-colors duration-150 hover:text-[var(--ink)]", children: "Start over" })
+      resettable && /* @__PURE__ */ jsx("button", { type: "button", onClick: reset, className: "text-[12px] font-medium text-[var(--mova-ai-ink-muted,#858585)] transition-colors duration-150 hover:text-[var(--mova-ai-ink,#202020)]", children: "Start over" })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-80", children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-[10px] bg-[var(--surface)] shadow-[var(--shadow-card)]", style: { animation: "mova-ai-approval-card-fade-up 380ms cubic-bezier(0.23,1,0.32,1) both" }, children: [
+  return /* @__PURE__ */ jsx("div", { className: "w-full max-w-80", children: /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-card,none)]", style: { animation: "mova-ai-approval-card-fade-up 380ms cubic-bezier(0.23,1,0.32,1) both" }, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -431,7 +431,7 @@ function ApprovalCard({
           if (advanceTimer.current) clearTimeout(advanceTimer.current);
           setOpen(false);
         },
-        className: "primitive-icon-button absolute right-2.5 top-2.5 z-10 text-[var(--ink-3)] transition-colors duration-100 hover:bg-[var(--hover)] hover:text-[var(--ink)]",
+        className: "primitive-icon-button absolute right-2.5 top-2.5 z-10 text-[var(--mova-ai-ink-muted,#858585)] transition-colors duration-100 hover:bg-[var(--mova-ai-hover,#f1f1f1)] hover:text-[var(--mova-ai-ink,#202020)]",
         children: /* @__PURE__ */ jsx(Ico, { size: 14, sw: 2.2, path: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
       }
     ),
@@ -471,8 +471,8 @@ function ApprovalCard({
                   "aria-hidden": active ? void 0 : true,
                   style: questionStyle,
                   children: [
-                    /* @__PURE__ */ jsx("div", { className: "pr-7 text-[14px] font-medium text-[var(--ink)]", children: question.q }),
-                    /* @__PURE__ */ jsxs(GlideMenu, { className: "mt-2.5 flex flex-col gap-1", highlightClassName: "inset-x-0 rounded-[8px] bg-[var(--hover)]", children: [
+                    /* @__PURE__ */ jsx("div", { className: "pr-7 text-[14px] font-medium text-[var(--mova-ai-ink,#202020)]", children: question.q }),
+                    /* @__PURE__ */ jsxs(GlideMenu, { className: "mt-2.5 flex flex-col gap-1", highlightClassName: "inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover,#f1f1f1)]", children: [
                       question.options.map((option, i) => {
                         const on = picked.includes(i);
                         return /* @__PURE__ */ jsxs(
@@ -492,11 +492,11 @@ function ApprovalCard({
                                 {
                                   className: `flex size-4 shrink-0 items-center justify-center transition-colors duration-200
                                 ${question.type === "radio" ? "rounded-full" : "rounded-[5px]"}
-                                ${on ? "bg-[var(--ink)] text-[var(--canvas)]" : "shadow-[inset_0_0_0_1.5px_var(--line-strong)] text-transparent"}`,
-                                  children: question.type === "radio" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-[var(--canvas)] transition-transform duration-200", style: { transform: on ? "scale(1)" : "scale(0)" } }) : /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) })
+                                ${on ? "bg-[var(--mova-ai-ink,#202020)] text-[var(--mova-ai-canvas,#f4f4f4)]" : "shadow-[inset_0_0_0_1.5px_var(--mova-ai-border-strong,#c8c8c8)] text-transparent"}`,
+                                  children: question.type === "radio" ? /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-[var(--mova-ai-canvas,#f4f4f4)] transition-transform duration-200", style: { transform: on ? "scale(1)" : "scale(0)" } }) : /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }) })
                                 }
                               ),
-                              /* @__PURE__ */ jsx("span", { className: `text-[13px] leading-snug transition-colors duration-200 ${on ? "text-[var(--ink)]" : "text-[var(--ink-2)]"}`, children: option })
+                              /* @__PURE__ */ jsx("span", { className: `text-[13px] leading-snug transition-colors duration-200 ${on ? "text-[var(--mova-ai-ink,#202020)]" : "text-[var(--mova-ai-ink-secondary,#666)]"}`, children: option })
                             ]
                           },
                           option
@@ -521,7 +521,7 @@ function ApprovalCard({
                           },
                           placeholder: t.customPlaceholder,
                           "aria-label": "Custom answer",
-                          className: "min-w-0 flex-1 bg-transparent pl-1.5 text-[13px] text-[var(--ink)] outline-none placeholder:text-[var(--ink-3)]"
+                          className: "min-w-0 flex-1 bg-transparent pl-1.5 text-[13px] text-[var(--mova-ai-ink,#202020)] outline-none placeholder:text-[var(--mova-ai-ink-muted,#858585)]"
                         }
                       ) })
                     ] })
@@ -535,7 +535,7 @@ function ApprovalCard({
       }
     ) }),
     /* @__PURE__ */ jsxs("div", { className: "primitive-card-footer flex items-center justify-between gap-3", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[var(--ink-3)]", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 text-[var(--mova-ai-ink-muted,#858585)]", children: [
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -543,11 +543,11 @@ function ApprovalCard({
             "aria-label": "Previous question",
             disabled: qi <= 0,
             onClick: () => goTo(qi - 1),
-            className: "flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--ink)] disabled:opacity-30",
+            className: "flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--mova-ai-ink,#202020)] disabled:opacity-30",
             children: /* @__PURE__ */ jsx(Ico, { size: 14, path: /* @__PURE__ */ jsx("path", { d: "M18 15l-6-6-6 6" }) })
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center text-[12px] font-medium tabular-nums text-[var(--ink-3)]", style: { letterSpacing: "-0.1px", lineHeight: 1 }, children: /* @__PURE__ */ jsx(RollingDigits, { value: `${qi + 1} / ${questions.length}` }) }),
+        /* @__PURE__ */ jsx("span", { className: "inline-flex items-center text-[12px] font-medium tabular-nums text-[var(--mova-ai-ink-muted,#858585)]", style: { letterSpacing: "-0.1px", lineHeight: 1 }, children: /* @__PURE__ */ jsx(RollingDigits, { value: `${qi + 1} / ${questions.length}` }) }),
         /* @__PURE__ */ jsx(
           "button",
           {
@@ -555,7 +555,7 @@ function ApprovalCard({
             "aria-label": "Next question",
             disabled: last,
             onClick: () => goTo(qi + 1),
-            className: "flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--ink)] disabled:opacity-30",
+            className: "flex size-[18px] items-center justify-center rounded-[5px] transition-colors duration-100 enabled:hover:text-[var(--mova-ai-ink,#202020)] disabled:opacity-30",
             children: /* @__PURE__ */ jsx(Ico, { size: 14, path: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
           }
         )
@@ -574,7 +574,7 @@ function ApprovalCard({
 function GlideMenu({
   children,
   className = "",
-  highlightClassName = "inset-x-0 rounded-[8px] bg-[var(--hover)]",
+  highlightClassName = "inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover,#f1f1f1)]",
   rowSelector = "[data-menu-row]"
 }) {
   const ref = useRef(null);
@@ -621,116 +621,29 @@ function GlideMenu({
   );
 }
 function Button({ variant = "secondary", size = "md", className = "", ...props }) {
-  const variants = { secondary: "bg-[var(--surface)] text-[var(--ink)] shadow-[var(--shadow-btn)] hover:bg-[var(--inset)]", ghost: "bg-[var(--hover-2)] text-[var(--ink)] hover:bg-[var(--line-strong)]", accent: "bg-[var(--accent)] text-white hover:bg-[var(--accent-ink)] shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]" };
-  return /* @__PURE__ */ jsx("button", { type: "button", className: `inline-flex items-center justify-center font-medium select-none transition-[transform,background-color,opacity] duration-150 ease-out active:scale-[0.96] disabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${size === "sm" ? "h-[27px] px-3 text-[13px] leading-none rounded-full gap-1.5" : "px-4 py-[9px] text-sm leading-none rounded-full gap-2"} ${className}`, ...props });
-}
-var scopedStyles = `.mova-ai-approval-card{
-  --page: oklch(0.985 0.001 286.376);
-  --canvas: oklch(0.961 0.002 247.84);
-  --surface: oklch(1 0 0);
-  --inset: oklch(0.979 0.002 247.839);
-  --hover: oklch(0.97 0.002 247.839);
-  --hover-2: oklch(0.933 0.003 247.86);
-
-  --ink: oklch(0.247 0.006 258.361);
-  --ink-2: oklch(0.506 0.01 264.477);
-  --ink-3: oklch(0.695 0.009 264.505);
-
-  --line: oklch(0.946 0.003 264.542);
-  --line-strong: oklch(0.912 0.005 258.326);
-  --line-soft: oklch(0.966 0.002 264.542);
-  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);
-  --field: oklch(0.961 0.001 286.375);
-  --stripe: oklch(0.405 0 0 / 0.075);
-  --stripe-bg: oklch(0.97 0 0);
-
-  --accent: oklch(0.626 0.205 254.947);
-  --accent-ink: oklch(0.556 0.187 255.617);
-  --accent-tint: oklch(0.96 0.019 252.878);
-
-  --green: oklch(0.603 0.155 150.883);
-  --green-tint: oklch(0.958 0.017 159.118);
-  --orange: oklch(0.689 0.179 49.902);
-  --orange-tint: oklch(0.964 0.021 67.581);
-  --red: oklch(0.621 0.192 23.042);
-  --red-tint: oklch(0.956 0.017 17.462);
-
-  --tooltip-bg: oklch(0.272 0.008 264.435);
-  --tooltip-fg: oklch(0.976 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.356 0.007 264.474);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px var(--line-strong), var(--shadow-xs);
-  --shadow-card: 0 0 0 1px var(--line), var(--shadow-sm);
-  --shadow-raised: 0 0 0 1px var(--line), var(--shadow-md);
-  --shadow-overlay: 0 0 0 1px var(--line), var(--shadow-lg);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);--shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);--shadow-sm: 0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),
-    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),
-    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);--shadow-md: 0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),
-    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),
-    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);--radius-control:8px;
- width:100%;max-width:320px;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);}
-.mova-ai-approval-card[data-theme="dark"]{
-  --page: oklch(0.209 0.004 264.477);
-  --canvas: oklch(0.231 0.004 264.487);
-  --surface: oklch(0.26 0.006 271.191);
-  --inset: oklch(0.243 0.004 264.492);
-  --hover: oklch(0.289 0.006 271.22);
-  --hover-2: oklch(0.318 0.007 274.747);
-
-  --ink: oklch(0.964 0.002 247.839);
-  --ink-2: oklch(0.731 0.008 260.731);
-  --ink-3: oklch(0.541 0.01 264.484);
-
-  --line: oklch(0.308 0.006 258.354);
-  --line-strong: oklch(0.356 0.007 264.474);
-  --line-soft: oklch(0.278 0.006 258.354);
-  --field: oklch(0.293 0.006 271.223);
-  --stripe: oklch(1 0 0 / 0.055);
-  --stripe-bg: oklch(0.226 0.004 264.485);
-
-  --accent: oklch(0.68 0.173 253.301);
-  --accent-ink: oklch(0.788 0.113 248.33);
-  --accent-tint: oklch(0.68 0.173 253.301 / 0.16);
-
-  --green: oklch(0.705 0.154 153.814);
-  --green-tint: oklch(0.705 0.154 153.814 / 0.14);
-  --orange: oklch(0.746 0.156 55.642);
-  --orange-tint: oklch(0.746 0.156 55.642 / 0.14);
-  --red: oklch(0.666 0.18 21.433);
-  --red-tint: oklch(0.666 0.18 21.433 / 0.14);
-
-  --tooltip-bg: oklch(0.182 0.004 264.459);
-  --tooltip-fg: oklch(0.964 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.308 0.006 258.354);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);
-  --shadow-card:
-    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),
-    0 2px 6px oklch(0 0 0 / 0.2);
-  --shadow-raised:
-    0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);
-  --shadow-overlay:
-    0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);}
+  const variants = { secondary: "bg-[var(--mova-ai-surface,#fff)] text-[var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-btn,none)] hover:bg-[var(--mova-ai-inset,#f8f8f8)]", ghost: "bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[var(--mova-ai-ink,#202020)] hover:bg-[var(--mova-ai-border-strong,#c8c8c8)]", accent: "approval-accent shadow-[inset_0_1px_0_rgba(255,255,255,0.14)]" };
+  return /* @__PURE__ */ jsx("button", { type: "button", className: `inline-flex items-center justify-center font-medium select-none transition-[transform,background-color,color,opacity,filter] duration-150 ease-out active:scale-[0.96] active:brightness-110 disabled:opacity-50 disabled:pointer-events-none ${variants[variant]} ${size === "sm" ? "h-[27px] px-3 text-[13px] leading-none rounded-full gap-1.5" : "px-4 py-[9px] text-sm leading-none rounded-full gap-2"} ${className}`, ...props });
+}
+var AI_THEME_STYLES = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
+var scopedStyles = `.mova-ai-approval-card{--approval-action-bg:#454545;--approval-action-fg:#fff;--approval-action-hover:#333;--approval-action-disabled-bg:#e9e9e9;--approval-action-disabled-fg:#858585} .mova-ai-approval-card[data-theme="dark"]{--approval-action-bg:#f5f5f5;--approval-action-fg:#202020;--approval-action-hover:#fff;--approval-action-disabled-bg:#3b3b3b;--approval-action-disabled-fg:#929292} .mova-ai-approval-card .approval-accent{background-color:var(--approval-action-bg);color:var(--approval-action-fg)} .mova-ai-approval-card .approval-accent:not(:disabled):hover{background-color:var(--approval-action-hover)} .mova-ai-approval-card .approval-accent:disabled{background-color:var(--approval-action-disabled-bg);color:var(--approval-action-disabled-fg);opacity:1}
 .mova-ai-approval-card .primitive-card-pad{padding:12px} .mova-ai-approval-card .primitive-card-bar{padding:10px 12px} .mova-ai-approval-card .primitive-card-footer{padding:10px} .mova-ai-approval-card .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}
-.mova-ai-approval-card :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px} .mova-ai-approval-card button:not(:disabled){cursor:pointer} .mova-ai-approval-card code{overflow-wrap:anywhere} .mova-ai-approval-card *, .mova-ai-approval-card *::before,.mova-ai-approval-card *::after{box-sizing:border-box}
+.mova-ai-approval-card :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--mova-ai-accent,#454545)!important;outline-offset:2px} .mova-ai-approval-card button:not(:disabled){cursor:pointer} .mova-ai-approval-card code{overflow-wrap:anywhere} .mova-ai-approval-card *, .mova-ai-approval-card *::before,.mova-ai-approval-card *::after{box-sizing:border-box}
 @keyframes mova-ai-approval-card-pop-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
 @keyframes mova-ai-approval-card-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes mova-ai-approval-card-shimmer-text{from{background-position:150% center}to{background-position:-50% center}}
 @media(prefers-reduced-motion:reduce){.mova-ai-approval-card *, .mova-ai-approval-card *::before, .mova-ai-approval-card *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}`;
 function AIApprovalCard({ theme = "light", ...props } = {}) {
-  return /* @__PURE__ */ jsxs("div", { className: "mova-ai-approval-card", "data-theme": theme, children: [
-    /* @__PURE__ */ jsx("style", { children: scopedStyles }),
+  return /* @__PURE__ */ jsxs("div", { className: "mova-ai-theme mova-ai-approval-card", "data-theme": theme, children: [
+    /* @__PURE__ */ jsxs("style", { children: [
+      AI_THEME_STYLES,
+      scopedStyles
+    ] }),
     /* @__PURE__ */ jsx(ApprovalCard, { ...props })
   ] });
 }
 
 // .generated/ui/ai/ai-code-block.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useRef as useRef2, useState as useState5 } from "react";
 import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var FILE = "churn.ts";
 var CODE_LINES = [
@@ -752,7 +665,7 @@ var DIFF = [
   { old: 5, cur: 6, type: "ctx", pieces: [{ text: "  return base.gallons;" }] },
   { old: 6, cur: 7, type: "ctx", pieces: [{ text: "}" }] }
 ];
-var HATCH = "repeating-linear-gradient(45deg, var(--red) 0, var(--red) 1.5px, transparent 1.5px, transparent 3px)";
+var HATCH = "repeating-linear-gradient(45deg, var(--mova-ai-danger,#a33c3c) 0, var(--mova-ai-danger,#a33c3c) 1.5px, transparent 1.5px, transparent 3px)";
 var KEYWORDS = /* @__PURE__ */ new Set(["import", "from", "export", "default", "async", "function", "const", "let", "var", "await", "return", "if", "else", "for", "while", "new", "throw", "try", "catch", "null", "true", "false", "undefined"]);
 var TOKEN = /("(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|`[^`]*`|\b\d+(?:\.\d+)?\b|\b(?:import|from|export|default|async|function|const|let|var|await|return|if|else|for|while|new|throw|try|catch|null|true|false|undefined)\b|[A-Za-z_$][\w$]*(?=\s*\())/g;
 function highlight(text) {
@@ -765,10 +678,10 @@ function highlight(text) {
     if (idx > last) nodes.push(/* @__PURE__ */ jsx2("span", { children: text.slice(last, idx) }, k++));
     let color;
     let weight;
-    if (/^["'`]/.test(t) || /^\d/.test(t)) color = "var(--orange)";
-    else if (KEYWORDS.has(t)) color = "var(--accent-ink)";
+    if (/^["'`]/.test(t) || /^\d/.test(t)) color = "var(--mova-ai-warning,#986517)";
+    else if (KEYWORDS.has(t)) color = "var(--mova-ai-accent-ink,#333)";
     else {
-      color = "var(--ink)";
+      color = "var(--mova-ai-ink,#202020)";
       weight = 500;
     }
     nodes.push(/* @__PURE__ */ jsx2("span", { style: { color, fontWeight: weight }, children: t }, k++));
@@ -800,8 +713,37 @@ function Pieces({ pieces }) {
     return /* @__PURE__ */ jsx2("span", { children: highlight(p.text) }, i);
   }) });
 }
+function CodeContent({ isDiff, lines, diff }) {
+  return isDiff ? /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-y-0 left-5 w-px bg-[var(--mova-ai-border,#dedede)]" }),
+    diff.map((r, i) => {
+      const add = r.type === "add";
+      const del = r.type === "del";
+      const num = del ? r.old : r.cur;
+      return /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: `relative grid grid-cols-[20px_minmax(0,1fr)] items-start
+              ${add ? "bg-[var(--mova-ai-success-tint,#e8f3ec)]" : del ? "bg-[var(--mova-ai-danger-tint,#f7eaea)]" : ""}`,
+          children: [
+            (add || del) && /* @__PURE__ */ jsx2("span", { className: "absolute inset-y-0 left-0 w-[3px]", style: { background: add ? "var(--mova-ai-success,#28734d)" : HATCH } }),
+            /* @__PURE__ */ jsx2("span", { className: `select-none text-center text-[11px] ${add ? "text-[var(--mova-ai-success,#28734d)]" : del ? "text-[var(--mova-ai-danger,#a33c3c)]" : "text-[var(--mova-ai-ink-muted,#858585)]"}`, children: num ?? "" }),
+            /* @__PURE__ */ jsx2("code", { className: "pr-3 pl-1 break-words whitespace-pre-wrap", children: /* @__PURE__ */ jsx2(Pieces, { pieces: r.pieces }) })
+          ]
+        },
+        i
+      );
+    })
+  ] }) : /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-y-0 left-5 w-px bg-[var(--mova-ai-border,#dedede)]" }),
+    lines.map((line, i) => /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[20px_minmax(0,1fr)] items-start", children: [
+      /* @__PURE__ */ jsx2("span", { className: "select-none text-center text-[11px] text-[var(--mova-ai-ink-muted,#858585)]", children: i + 1 }),
+      /* @__PURE__ */ jsx2("code", { className: "pr-3 pl-1 break-words whitespace-pre-wrap", children: highlight(line) })
+    ] }, i))
+  ] });
+}
 function FileIcon() {
-  return /* @__PURE__ */ jsx2("svg", { "aria-hidden": true, width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 text-[var(--ink-3)]", children: /* @__PURE__ */ jsx2("path", { d: "M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" }) });
+  return /* @__PURE__ */ jsx2("svg", { "aria-hidden": true, width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 text-[var(--mova-ai-ink-muted,#858585)]", children: /* @__PURE__ */ jsx2("path", { d: "M17.25 6.75 22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3-4.5 16.5" }) });
 }
 var DEFAULT_LABELS2 = { copy: "Copy", copied: "Copied" };
 function CodeBlock({
@@ -815,12 +757,41 @@ function CodeBlock({
 }) {
   const [copied, setCopied] = useState5(false);
   const [view, setView] = useState5("Code");
+  const [hasSwitchedView, setHasSwitchedView] = useState5(false);
   const isDiff = (variant ?? view) === "Diff";
   const [copyError, setCopyError] = useState5(false);
   const copyTimer = useRef2(null);
   useEffect5(() => () => {
     if (copyTimer.current) clearTimeout(copyTimer.current);
   }, []);
+  const contentRef = useRef2(null);
+  const codeMeasureRef = useRef2(null);
+  const diffMeasureRef = useRef2(null);
+  const [reservedHeight, setReservedHeight] = useState5(0);
+  useLayoutEffect2(() => {
+    const content = contentRef.current;
+    if (!content) return;
+    let measuredWidth = -1;
+    const measure = (force = false) => {
+      const width = content.clientWidth;
+      if (!force && width === measuredWidth) return;
+      measuredWidth = width;
+      const codeHeight = codeMeasureRef.current?.scrollHeight ?? 0;
+      const diffHeight = diffMeasureRef.current?.scrollHeight ?? 0;
+      setReservedHeight(Math.max(codeHeight, diffHeight));
+    };
+    measure();
+    const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(() => measure(true));
+    const handleResize = () => measure(true);
+    observer?.observe(content);
+    if (codeMeasureRef.current) observer?.observe(codeMeasureRef.current);
+    if (diffMeasureRef.current) observer?.observe(diffMeasureRef.current);
+    window.addEventListener("resize", handleResize);
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [lines, diff]);
   const text = { ...DEFAULT_LABELS2, ...labels };
   const raw = code ?? (isDiff ? diff.map((row) => `${row.type === "add" ? "+" : row.type === "del" ? "-" : " "}${row.pieces.map((piece) => piece.text).join("")}`).join("\n") : lines.join("\n"));
   const copy = useCallback2(() => {
@@ -838,178 +809,93 @@ function CodeBlock({
   }, [raw, onCopy]);
   const added = diff.filter((r) => r.type === "add").length;
   const removed = diff.filter((r) => r.type === "del").length;
-  return /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-105 overflow-hidden rounded-[10px] bg-[var(--surface)] shadow-[var(--shadow-card)]", children: [
-    /* @__PURE__ */ jsxs2("div", { className: "flex min-h-11 flex-wrap items-center gap-2 border-b border-[var(--line)] px-4 text-[12.5px]", children: [
-      /* @__PURE__ */ jsxs2("span", { className: "inline-flex min-w-0 items-center gap-[7px]", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full max-w-105 overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-card,none)]", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "mova-ai-code-header grid min-h-11 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] px-4 text-[12.5px]", children: [
+      /* @__PURE__ */ jsxs2("span", { className: "mova-ai-code-filename inline-flex min-w-0 items-center gap-[7px]", children: [
         /* @__PURE__ */ jsx2(FileIcon, {}),
-        /* @__PURE__ */ jsx2("span", { className: "truncate font-mono leading-none text-[var(--ink)]", children: filename })
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate font-mono leading-none text-[var(--mova-ai-ink,#202020)]", children: filename })
       ] }),
-      variant === void 0 && /* @__PURE__ */ jsx2("div", { role: "group", "aria-label": "Code view", className: "ml-auto flex shrink-0 items-center rounded-[6px] bg-[var(--field)] p-0.5", children: ["Code", "Diff"].map((item) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": view === item, onClick: () => {
-        setView(item);
-        setCopied(false);
-        setCopyError(false);
-      }, className: `rounded-[4px] px-1.5 py-1 text-[11px] leading-none ${view === item ? "bg-[var(--surface)] text-[var(--ink)] shadow-[var(--shadow-btn)]" : "text-[var(--ink-3)]"}`, children: item }, item)) }),
-      isDiff && /* @__PURE__ */ jsxs2("span", { className: "ml-auto inline-flex items-center gap-2 font-mono text-[12px] leading-none tabular-nums", children: [
-        /* @__PURE__ */ jsxs2("span", { className: "text-[var(--green)]", children: [
-          "+",
-          added
-        ] }),
-        /* @__PURE__ */ jsxs2("span", { className: "text-[var(--red)]", children: [
-          "-",
-          removed
-        ] })
+      variant === void 0 && /* @__PURE__ */ jsxs2("div", { role: "group", "aria-label": "Code view", className: "mova-ai-code-view-controls relative inline-grid shrink-0 grid-cols-2 items-center justify-self-center rounded-[6px] bg-[var(--mova-ai-field,#f6f6f6)] p-0.5", children: [
+        /* @__PURE__ */ jsx2(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute left-0.5 top-0.5 bottom-0.5 rounded-[4px] bg-[var(--mova-ai-surface,#fff)] shadow-[var(--mova-ai-shadow-btn,none)] transition-transform duration-200 ease-out motion-reduce:transition-none",
+            style: { width: "calc((100% - 4px) / 2)", transform: view === "Diff" ? "translateX(100%)" : "translateX(0)" }
+          }
+        ),
+        ["Code", "Diff"].map((item) => /* @__PURE__ */ jsx2("button", { type: "button", "aria-pressed": view === item, onClick: () => {
+          setView(item);
+          setHasSwitchedView(true);
+          setCopied(false);
+          setCopyError(false);
+        }, className: `relative z-10 min-w-[34px] rounded-[4px] px-1.5 py-1 text-[11px] leading-none transition-colors duration-150 ${view === item ? "text-[var(--mova-ai-ink,#202020)]" : "text-[var(--mova-ai-ink-muted,#858585)]"}`, children: item }, item))
       ] }),
-      /* @__PURE__ */ jsxs2(
-        "button",
-        {
-          type: "button",
-          "aria-label": isDiff ? "Copy diff" : "Copy code",
-          "aria-live": "polite",
-          onClick: copy,
-          className: `-mr-1 ml-auto flex h-6 items-center gap-1 rounded-[6px] px-1.5 text-[12px]
-              font-medium transition-colors duration-100 hover:bg-[var(--hover)]
-              ${copied ? "text-[var(--green)]" : "text-[var(--ink-3)] hover:text-[var(--ink)]"}`,
-          children: [
-            copied ? /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ jsx2("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5" }),
-              /* @__PURE__ */ jsx2("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
-            ] }),
-            copied ? text.copied : text.copy
-          ]
-        }
-      )
-    ] }),
-    copyError && /* @__PURE__ */ jsx2("div", { role: "alert", className: "px-4 py-1 text-[11px] text-[var(--red)]", children: "Clipboard unavailable. Select the code to copy." }),
-    /* @__PURE__ */ jsx2("div", { className: "py-3 font-mono text-[12.5px] leading-[1.65] text-[var(--ink-2)]", children: isDiff ? /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-y-0 left-5 w-px bg-[var(--line)]" }),
-      diff.map((r, i) => {
-        const add = r.type === "add";
-        const del = r.type === "del";
-        const num = del ? r.old : r.cur;
-        return /* @__PURE__ */ jsxs2(
-          "div",
+      /* @__PURE__ */ jsxs2("div", { className: "mova-ai-code-actions col-start-3 flex min-w-0 flex-wrap items-center justify-end gap-2", children: [
+        /* @__PURE__ */ jsxs2(
+          "span",
           {
-            className: `relative grid grid-cols-[20px_minmax(0,1fr)] items-start
-                    ${add ? "bg-[var(--green-tint)]" : del ? "bg-[var(--red-tint)]" : ""}`,
+            "aria-hidden": !isDiff,
+            className: `inline-flex shrink-0 items-center gap-2 font-mono text-[12px] leading-none tabular-nums ${isDiff ? "visible" : "invisible"}`,
             children: [
-              (add || del) && /* @__PURE__ */ jsx2("span", { className: "absolute inset-y-0 left-0 w-[3px]", style: { background: add ? "var(--green)" : HATCH } }),
-              /* @__PURE__ */ jsx2("span", { className: `select-none text-center text-[11px] ${add ? "text-[var(--green)]" : del ? "text-[var(--red)]" : "text-[var(--ink-3)]"}`, children: num ?? "" }),
-              /* @__PURE__ */ jsx2("code", { className: "pr-3 pl-1 break-words whitespace-pre-wrap", children: /* @__PURE__ */ jsx2(Pieces, { pieces: r.pieces }) })
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--mova-ai-success,#28734d)]", children: [
+                "+",
+                added
+              ] }),
+              /* @__PURE__ */ jsxs2("span", { className: "text-[var(--mova-ai-danger,#a33c3c)]", children: [
+                "-",
+                removed
+              ] })
             ]
-          },
-          i
-        );
-      })
-    ] }) : /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
-      /* @__PURE__ */ jsx2("span", { className: "pointer-events-none absolute inset-y-0 left-5 w-px bg-[var(--line)]" }),
-      lines.map((line, i) => /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-[20px_minmax(0,1fr)] items-start", children: [
-        /* @__PURE__ */ jsx2("span", { className: "select-none text-center text-[11px] text-[var(--ink-3)]", children: i + 1 }),
-        /* @__PURE__ */ jsx2("code", { className: "pr-3 pl-1 break-words whitespace-pre-wrap", children: highlight(line) })
-      ] }, i))
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          "button",
+          {
+            type: "button",
+            "aria-label": isDiff ? "Copy diff" : "Copy code",
+            "aria-live": "polite",
+            onClick: copy,
+            className: `mova-ai-code-copy-button flex min-h-6 min-w-0 max-w-full items-center gap-1 rounded-[6px] px-1.5 text-[12px]
+              font-medium transition-colors duration-100 hover:bg-[var(--mova-ai-hover,#f1f1f1)]
+              ${copied ? "text-[var(--mova-ai-success,#28734d)]" : "text-[var(--mova-ai-ink-muted,#858585)] hover:text-[var(--mova-ai-ink,#202020)]"}`,
+            children: [
+              copied ? /* @__PURE__ */ jsx2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("path", { d: "M20 6L9 17l-5-5" }) }) : /* @__PURE__ */ jsxs2("svg", { width: "11", height: "11", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx2("rect", { x: "9", y: "9", width: "12", height: "12", rx: "2.5" }),
+                /* @__PURE__ */ jsx2("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+              ] }),
+              /* @__PURE__ */ jsx2("span", { className: "min-w-0 break-words", children: copied ? text.copied : text.copy })
+            ]
+          }
+        )
+      ] })
+    ] }),
+    copyError && /* @__PURE__ */ jsx2("div", { role: "alert", className: "px-4 py-1 text-[11px] text-[var(--mova-ai-danger,#a33c3c)]", children: "Clipboard unavailable. Select the code to copy." }),
+    /* @__PURE__ */ jsx2("div", { className: "py-3 font-mono text-[12.5px] leading-[1.65] text-[var(--mova-ai-ink-secondary,#666)]", children: /* @__PURE__ */ jsxs2("div", { ref: contentRef, className: "relative", style: { minHeight: reservedHeight || void 0 }, children: [
+      /* @__PURE__ */ jsxs2("div", { "aria-hidden": "true", className: "pointer-events-none invisible absolute inset-0 select-none", children: [
+        /* @__PURE__ */ jsx2("div", { ref: codeMeasureRef, className: "absolute inset-x-0 top-0", children: /* @__PURE__ */ jsx2(CodeContent, { isDiff: false, lines, diff }) }),
+        /* @__PURE__ */ jsx2("div", { ref: diffMeasureRef, className: "absolute inset-x-0 top-0", children: /* @__PURE__ */ jsx2(CodeContent, { isDiff: true, lines, diff }) })
+      ] }),
+      /* @__PURE__ */ jsx2("div", { className: hasSwitchedView ? "mova-ai-code-view-enter" : void 0, children: /* @__PURE__ */ jsx2(CodeContent, { isDiff, lines, diff }) }, isDiff ? "diff" : "code")
     ] }) })
   ] });
 }
-var scopedStyles2 = `.mova-ai-code-block{
-  --page: oklch(0.985 0.001 286.376);
-  --canvas: oklch(0.961 0.002 247.84);
-  --surface: oklch(1 0 0);
-  --inset: oklch(0.979 0.002 247.839);
-  --hover: oklch(0.97 0.002 247.839);
-  --hover-2: oklch(0.933 0.003 247.86);
-
-  --ink: oklch(0.247 0.006 258.361);
-  --ink-2: oklch(0.506 0.01 264.477);
-  --ink-3: oklch(0.695 0.009 264.505);
-
-  --line: oklch(0.946 0.003 264.542);
-  --line-strong: oklch(0.912 0.005 258.326);
-  --line-soft: oklch(0.966 0.002 264.542);
-  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);
-  --field: oklch(0.961 0.001 286.375);
-  --stripe: oklch(0.405 0 0 / 0.075);
-  --stripe-bg: oklch(0.97 0 0);
-
-  --accent: oklch(0.626 0.205 254.947);
-  --accent-ink: oklch(0.556 0.187 255.617);
-  --accent-tint: oklch(0.96 0.019 252.878);
-
-  --green: oklch(0.603 0.155 150.883);
-  --green-tint: oklch(0.958 0.017 159.118);
-  --orange: oklch(0.689 0.179 49.902);
-  --orange-tint: oklch(0.964 0.021 67.581);
-  --red: oklch(0.621 0.192 23.042);
-  --red-tint: oklch(0.956 0.017 17.462);
-
-  --tooltip-bg: oklch(0.272 0.008 264.435);
-  --tooltip-fg: oklch(0.976 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.356 0.007 264.474);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px var(--line-strong), var(--shadow-xs);
-  --shadow-card: 0 0 0 1px var(--line), var(--shadow-sm);
-  --shadow-raised: 0 0 0 1px var(--line), var(--shadow-md);
-  --shadow-overlay: 0 0 0 1px var(--line), var(--shadow-lg);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);--shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);--shadow-sm: 0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),
-    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),
-    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);--shadow-md: 0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),
-    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),
-    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);--radius-control:8px;
- width:100%;max-width:420px;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);}
-.mova-ai-code-block[data-theme="dark"]{
-  --page: oklch(0.209 0.004 264.477);
-  --canvas: oklch(0.231 0.004 264.487);
-  --surface: oklch(0.26 0.006 271.191);
-  --inset: oklch(0.243 0.004 264.492);
-  --hover: oklch(0.289 0.006 271.22);
-  --hover-2: oklch(0.318 0.007 274.747);
-
-  --ink: oklch(0.964 0.002 247.839);
-  --ink-2: oklch(0.731 0.008 260.731);
-  --ink-3: oklch(0.541 0.01 264.484);
-
-  --line: oklch(0.308 0.006 258.354);
-  --line-strong: oklch(0.356 0.007 264.474);
-  --line-soft: oklch(0.278 0.006 258.354);
-  --field: oklch(0.293 0.006 271.223);
-  --stripe: oklch(1 0 0 / 0.055);
-  --stripe-bg: oklch(0.226 0.004 264.485);
-
-  --accent: oklch(0.68 0.173 253.301);
-  --accent-ink: oklch(0.788 0.113 248.33);
-  --accent-tint: oklch(0.68 0.173 253.301 / 0.16);
-
-  --green: oklch(0.705 0.154 153.814);
-  --green-tint: oklch(0.705 0.154 153.814 / 0.14);
-  --orange: oklch(0.746 0.156 55.642);
-  --orange-tint: oklch(0.746 0.156 55.642 / 0.14);
-  --red: oklch(0.666 0.18 21.433);
-  --red-tint: oklch(0.666 0.18 21.433 / 0.14);
-
-  --tooltip-bg: oklch(0.182 0.004 264.459);
-  --tooltip-fg: oklch(0.964 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.308 0.006 258.354);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);
-  --shadow-card:
-    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),
-    0 2px 6px oklch(0 0 0 / 0.2);
-  --shadow-raised:
-    0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);
-  --shadow-overlay:
-    0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);}
-.mova-ai-code-block .primitive-card-pad{padding:12px} .mova-ai-code-block .primitive-card-bar{padding:10px 12px} .mova-ai-code-block .primitive-card-footer{padding:10px} .mova-ai-code-block .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}
-.mova-ai-code-block :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px} .mova-ai-code-block button:not(:disabled){cursor:pointer} .mova-ai-code-block code{overflow-wrap:anywhere} .mova-ai-code-block *, .mova-ai-code-block *::before,.mova-ai-code-block *::after{box-sizing:border-box}
+var AI_THEME_STYLES2 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
+var scopedStyles2 = `.mova-ai-code-block{container-type:inline-size} .mova-ai-code-block .primitive-card-pad{padding:12px} .mova-ai-code-block .primitive-card-bar{padding:10px 12px} .mova-ai-code-block .primitive-card-footer{padding:10px} .mova-ai-code-block .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}
+.mova-ai-code-block :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--mova-ai-accent,#454545)!important;outline-offset:2px} .mova-ai-code-block button:not(:disabled){cursor:pointer} .mova-ai-code-block code{overflow-wrap:anywhere} .mova-ai-code-block *, .mova-ai-code-block *::before,.mova-ai-code-block *::after{box-sizing:border-box}
+.mova-ai-code-block .mova-ai-code-view-enter{animation:mova-ai-code-block-view-enter 180ms cubic-bezier(.2,.7,.2,1) both}
+@keyframes mova-ai-code-block-view-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
 @keyframes mova-ai-code-block-pop-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
 @keyframes mova-ai-code-block-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes mova-ai-code-block-shimmer-text{from{background-position:150% center}to{background-position:-50% center}}
+@container (max-width:360px){.mova-ai-code-block .mova-ai-code-header{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:8px;padding-top:8px;padding-bottom:8px}.mova-ai-code-block .mova-ai-code-filename{grid-column:1;grid-row:1}.mova-ai-code-block .mova-ai-code-actions{grid-column:2;grid-row:1;max-width:100%}.mova-ai-code-block .mova-ai-code-view-controls{grid-column:1/-1;grid-row:2}}
 @media(prefers-reduced-motion:reduce){.mova-ai-code-block *, .mova-ai-code-block *::before, .mova-ai-code-block *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}`;
 function AICodeBlock({ theme = "light", ...props } = {}) {
-  return /* @__PURE__ */ jsxs2("div", { className: "mova-ai-code-block", "data-theme": theme, children: [
-    /* @__PURE__ */ jsx2("style", { children: scopedStyles2 }),
+  return /* @__PURE__ */ jsxs2("div", { className: "mova-ai-theme mova-ai-code-block w-full min-w-0 max-w-105", "data-theme": theme, children: [
+    /* @__PURE__ */ jsxs2("style", { children: [
+      AI_THEME_STYLES2,
+      scopedStyles2
+    ] }),
     /* @__PURE__ */ jsx2(CodeBlock, { ...props })
   ] });
 }
@@ -1020,14 +906,15 @@ import { useState as useState6 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var SPRING_DEFAULT = { bounce: 0.1, duration: 0.25, type: "spring" };
 var EASE_OUT = [0.23, 1, 0.32, 1];
+var AI_THEME_STYLES3 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
 var VIEWBOX = 32;
 var CENTER = VIEWBOX / 2;
 var RADIUS = 13;
 var STROKE_WIDTH = 3;
 var DEFAULT_WARNING_AT = 0.8;
 var DEFAULT_DANGER_AT = 0.95;
-var WARNING_COLOR = "oklch(78% 0.16 75)";
-var DANGER_COLOR = "oklch(63% 0.21 25)";
+var WARNING_COLOR = "var(--mova-ai-warning,#986517)";
+var DANGER_COLOR = "var(--mova-ai-danger,#a33c3c)";
 var formatTokens = (tokens) => {
   if (tokens >= 1e6) return `${(tokens / 1e6).toFixed(1)}M`;
   if (tokens >= 1e4) return `${Math.round(tokens / 1e3)}k`;
@@ -1039,6 +926,7 @@ function AIContextMeter({
   className = "",
   dangerAt = DEFAULT_DANGER_AT,
   limit,
+  theme = "light",
   used,
   warningAt = DEFAULT_WARNING_AT
 }) {
@@ -1048,13 +936,14 @@ function AIContextMeter({
   const percent = Math.round(fraction * 100);
   const color = fraction >= dangerAt ? DANGER_COLOR : fraction >= warningAt ? WARNING_COLOR : "currentColor";
   const hasBreakdown = Boolean(breakdown?.length);
-  return /* @__PURE__ */ jsxs3("div", { className: `relative inline-block ${className}`, children: [
+  return /* @__PURE__ */ jsxs3("div", { className: `mova-ai-theme relative inline-block ${className}`, "data-theme": theme, children: [
+    /* @__PURE__ */ jsx3("style", { children: AI_THEME_STYLES3 }),
     /* @__PURE__ */ jsxs3(
       "button",
       {
         "aria-expanded": hasBreakdown ? isOpen : void 0,
         "aria-label": `Context window ${percent}% used, ${formatTokens(used)} of ${formatTokens(limit)} tokens`,
-        className: "flex cursor-pointer items-center gap-1.5 rounded-lg px-1 py-0.5 text-muted-foreground text-xs transition-colors hover:text-foreground",
+        className: "flex cursor-pointer items-center gap-1.5 rounded-lg px-1 py-0.5 text-[color:var(--mova-ai-ink-secondary,#666)] text-xs transition-colors hover:text-[color:var(--mova-ai-ink,#202020)]",
         disabled: !hasBreakdown,
         onBlur: () => setIsOpen(false),
         onClick: () => setIsOpen((current) => !current),
@@ -1092,14 +981,14 @@ function AIContextMeter({
       motion.div,
       {
         animate: { opacity: 1, scale: 1, y: 0 },
-        className: "absolute bottom-full left-0 z-50 mb-1.5 w-56 rounded-xl border border-border bg-background p-2.5 shadow-lg",
+        className: "absolute bottom-full left-1/2 z-50 mb-1.5 w-56 -translate-x-1/2 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2.5 text-[color:var(--mova-ai-ink,#202020)] shadow-lg",
         exit: shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: 0.96, y: 4 },
         initial: shouldReduceMotion ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.96, y: 4 },
-        style: { transformOrigin: "bottom left" },
+        style: { transformOrigin: "bottom center" },
         transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.18, ease: EASE_OUT },
         children: /* @__PURE__ */ jsx3("ul", { className: "list-none space-y-1", children: breakdown?.map((item) => /* @__PURE__ */ jsxs3("li", { className: "flex items-baseline justify-between gap-3 text-xs", children: [
-          /* @__PURE__ */ jsx3("span", { className: "truncate text-muted-foreground", children: item.label }),
-          /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-foreground tabular-nums", children: formatTokens(item.tokens) })
+          /* @__PURE__ */ jsx3("span", { className: "truncate text-[color:var(--mova-ai-ink-secondary,#666)]", children: item.label }),
+          /* @__PURE__ */ jsx3("span", { className: "shrink-0 text-[color:var(--mova-ai-ink,#202020)] tabular-nums", children: formatTokens(item.tokens) })
         ] }, item.label)) })
       }
     ) : null })
@@ -1139,8 +1028,8 @@ function ScrubField({
     {
       className: "flex h-6.5 min-w-0 items-center gap-1 rounded-[6px] py-1 pr-1 pl-0.5\n        transition-[background-color,box-shadow] duration-200",
       style: {
-        background: active ? "var(--accent-tint)" : "var(--field)",
-        boxShadow: active ? "0 0 0 1px var(--accent)" : "none"
+        background: active ? "var(--mova-ai-accent-tint,#eee)" : "var(--mova-ai-field,#f6f6f6)",
+        boxShadow: active ? "0 0 0 1px var(--mova-ai-accent,#454545)" : "none"
       },
       children: [
         /* @__PURE__ */ jsx4(
@@ -1173,7 +1062,7 @@ function ScrubField({
                 onChange(clamp2(value - step * mult));
               }
             },
-            className: "flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px]\n          px-0.5 text-[12px] text-[var(--ink-3)] select-none hover:text-[var(--ink-2)] focus-visible:text-[var(--accent-ink)]\n          focus-visible:outline-none",
+            className: "flex h-full shrink-0 cursor-ew-resize touch-none items-center rounded-[4px]\n          px-0.5 text-[12px] text-[var(--mova-ai-ink-muted,#858585)] select-none hover:text-[var(--mova-ai-ink-secondary,#666)] focus-visible:text-[var(--mova-ai-accent-ink,#333)]\n          focus-visible:outline-none",
             children: label
           }
         ),
@@ -1198,10 +1087,10 @@ function ScrubField({
               }
             },
             "aria-label": `${label} value`,
-            className: "min-w-0 flex-1 bg-transparent text-[12px] text-[var(--ink)] tabular-nums outline-none"
+            className: "min-w-0 flex-1 bg-transparent text-[12px] text-[var(--mova-ai-ink,#202020)] tabular-nums outline-none"
           }
         ),
-        suffix && /* @__PURE__ */ jsx4("span", { className: "shrink-0 pr-0.5 text-[11.5px] text-[var(--ink-3)]", children: suffix })
+        suffix && /* @__PURE__ */ jsx4("span", { className: "shrink-0 pr-0.5 text-[11.5px] text-[var(--mova-ai-ink-muted,#858585)]", children: suffix })
       ]
     }
   );
@@ -1275,13 +1164,13 @@ function FineTuneCard({
   };
   const changed = fields.some((f) => values[f.key] !== f.value);
   const done = seg !== 0 || changed || typeValue !== text.placeholder;
-  return /* @__PURE__ */ jsxs4("div", { className: "relative w-full max-w-60 rounded-[10px] bg-[var(--surface)] shadow-[var(--shadow-raised)]", children: [
-    /* @__PURE__ */ jsxs4("div", { className: "primitive-card-bar flex items-center justify-between border-b border-[var(--line)]", children: [
-      /* @__PURE__ */ jsx4("span", { className: "text-[13px] font-medium text-[var(--ink)]", children: text.title }),
+  return /* @__PURE__ */ jsxs4("div", { className: "relative w-full max-w-60 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] shadow-[var(--mova-ai-shadow-raised,none)]", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "primitive-card-bar flex items-center justify-between border-b border-[var(--mova-ai-border,#dedede)]", children: [
+      /* @__PURE__ */ jsx4("span", { className: "text-[13px] font-medium text-[var(--mova-ai-ink,#202020)]", children: text.title }),
       done ? /* @__PURE__ */ jsxs4(
         "span",
         {
-          className: "flex items-center gap-1.5 text-[12px] font-medium text-[var(--green)]",
+          className: "flex items-center gap-1.5 text-[12px] font-medium text-[var(--mova-ai-success,#28734d)]",
           style: { animation: "mova-ai-fine-tune-card-pop-in 250ms cubic-bezier(0.23,1,0.32,1) both" },
           children: [
             /* @__PURE__ */ jsx4("svg", { width: "10", height: "10", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx4("path", { d: "M20 6L9 17l-5-5" }) }),
@@ -1289,13 +1178,13 @@ function FineTuneCard({
           ]
         }
       ) : /* @__PURE__ */ jsxs4("span", { className: "flex items-center gap-1.5", children: [
-        /* @__PURE__ */ jsx4("span", { className: "flex size-4.5 items-center justify-center rounded-[5px] border border-[var(--accent)]/30 bg-[var(--accent-tint)]", children: /* @__PURE__ */ jsx4("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "var(--accent)", children: /* @__PURE__ */ jsx4("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z" }) }) }),
+        /* @__PURE__ */ jsx4("span", { className: "flex size-4.5 items-center justify-center rounded-[5px] border border-[var(--mova-ai-accent,#454545)]/30 bg-[var(--mova-ai-accent-tint,#eee)]", children: /* @__PURE__ */ jsx4("svg", { width: "9", height: "9", viewBox: "0 0 24 24", fill: "var(--mova-ai-accent,#454545)", children: /* @__PURE__ */ jsx4("path", { d: "M12 2l2.4 7.2L22 12l-7.6 2.8L12 22l-2.4-7.2L2 12l7.6-2.8z" }) }) }),
         /* @__PURE__ */ jsx4(
           "span",
           {
             className: "bg-clip-text text-[12px] font-medium text-transparent",
             style: {
-              backgroundImage: "linear-gradient(90deg, var(--accent) 35%, var(--accent-ink) 50%, var(--accent) 65%)",
+              backgroundImage: "linear-gradient(90deg, var(--mova-ai-accent,#454545) 35%, var(--mova-ai-accent-ink,#333) 50%, var(--mova-ai-accent,#454545) 65%)",
               backgroundSize: "200% 100%",
               animation: "mova-ai-fine-tune-card-shimmer-text 1.4s linear infinite"
             },
@@ -1304,14 +1193,14 @@ function FineTuneCard({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs4("div", { className: "primitive-card-pad flex flex-col gap-2 border-b border-[var(--line)]", children: [
-      /* @__PURE__ */ jsx4("p", { className: "text-[12.5px] font-medium text-[var(--ink)]", children: text.layout }),
-      /* @__PURE__ */ jsxs4("div", { className: "relative grid grid-cols-3 rounded-[8px] bg-[var(--field)] p-0.5", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "primitive-card-pad flex flex-col gap-2 border-b border-[var(--mova-ai-border,#dedede)]", children: [
+      /* @__PURE__ */ jsx4("p", { className: "text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)]", children: text.layout }),
+      /* @__PURE__ */ jsxs4("div", { className: "relative grid grid-cols-3 rounded-[8px] bg-[var(--mova-ai-field,#f6f6f6)] p-0.5", children: [
         /* @__PURE__ */ jsx4(
           "span",
           {
             "aria-hidden": true,
-            className: "absolute inset-y-0.5 rounded-[6px] bg-[var(--surface)] shadow-[var(--shadow-btn)] transition-transform duration-300",
+            className: "absolute inset-y-0.5 rounded-[6px] bg-[var(--mova-ai-surface,#fff)] shadow-[var(--mova-ai-shadow-btn,none)] transition-transform duration-300",
             style: {
               width: "calc((100% - 4px) / 3)",
               left: 2,
@@ -1328,7 +1217,7 @@ function FineTuneCard({
             "aria-pressed": i === seg,
             onClick: () => selectSeg(i),
             className: `relative z-10 flex h-6 items-center justify-center transition-colors duration-200
-                ${i === seg ? "text-[var(--accent)]" : "text-[var(--ink-3)]"}`,
+                ${i === seg ? "text-[var(--mova-ai-accent,#454545)]" : "text-[var(--mova-ai-ink-muted,#858585)]"}`,
             children: /* @__PURE__ */ jsx4(SegmentIcon, { kind: s })
           },
           s
@@ -1350,7 +1239,7 @@ function FineTuneCard({
       )) }, ri))
     ] }),
     /* @__PURE__ */ jsxs4("div", { className: "primitive-card-footer flex items-center justify-between", children: [
-      /* @__PURE__ */ jsx4("span", { className: "text-[12px] text-[var(--ink-3)]", children: text.type }),
+      /* @__PURE__ */ jsx4("span", { className: "text-[12px] text-[var(--mova-ai-ink-muted,#858585)]", children: text.type }),
       /* @__PURE__ */ jsxs4("div", { ref: menuRef, className: "relative -mr-0.5 w-30", onBlur: (event) => {
         if (!event.currentTarget.contains(event.relatedTarget)) setMenuOpen(false);
       }, onKeyDown: (event) => {
@@ -1374,10 +1263,10 @@ function FineTuneCard({
             "aria-label": text.type,
             "aria-expanded": menuOpen,
             onClick: () => setMenuOpen((current) => !current),
-            className: "flex h-6.5 w-full items-center justify-between rounded-[6px] bg-[var(--inset)] py-1 pr-1 pl-2\n              shadow-[var(--shadow-hairline)] transition-shadow duration-200 focus-visible:outline-none",
-            style: { boxShadow: menuOpen ? "0 0 0 1px var(--accent)" : void 0 },
+            className: "flex h-6.5 w-full items-center justify-between rounded-[6px] bg-[var(--mova-ai-inset,#f8f8f8)] py-1 pr-1 pl-2\n              shadow-[var(--mova-ai-shadow-hairline,none)] transition-shadow duration-200 focus-visible:outline-none",
+            style: { boxShadow: menuOpen ? "0 0 0 1px var(--mova-ai-accent,#454545)" : void 0 },
             children: [
-              /* @__PURE__ */ jsx4("span", { className: `text-[12px] ${typeValue !== text.placeholder ? "text-[var(--ink)]" : "text-[var(--ink-3)]"}`, children: typeValue }),
+              /* @__PURE__ */ jsx4("span", { className: `text-[12px] ${typeValue !== text.placeholder ? "text-[var(--mova-ai-ink,#202020)]" : "text-[var(--mova-ai-ink-muted,#858585)]"}`, children: typeValue }),
               /* @__PURE__ */ jsx4(
                 "svg",
                 {
@@ -1385,7 +1274,7 @@ function FineTuneCard({
                   height: "11",
                   viewBox: "0 0 24 24",
                   fill: "none",
-                  stroke: "var(--ink-3)",
+                  stroke: "var(--mova-ai-ink-muted,#858585)",
                   strokeWidth: "2.5",
                   strokeLinecap: "round",
                   strokeLinejoin: "round",
@@ -1402,12 +1291,12 @@ function FineTuneCard({
           {
             role: "menu",
             "aria-label": text.type,
-            className: "absolute right-0 bottom-8 z-10 w-30 rounded-[10px] bg-[var(--surface)] p-1 shadow-[var(--shadow-raised)]",
+            className: "absolute right-0 bottom-8 z-10 w-30 rounded-[10px] bg-[var(--mova-ai-surface,#fff)] p-1 shadow-[var(--mova-ai-shadow-raised,none)]",
             style: {
               animation: "mova-ai-fine-tune-card-pop-in 200ms cubic-bezier(0.23,1,0.32,1) both",
               transformOrigin: "bottom right"
             },
-            children: /* @__PURE__ */ jsx4(GlideMenu2, { className: "flex flex-col gap-px", highlightClassName: "inset-x-0 rounded-[6px] bg-[var(--field)]", children: options.map((item) => /* @__PURE__ */ jsx4(
+            children: /* @__PURE__ */ jsx4(GlideMenu2, { className: "flex flex-col gap-px", highlightClassName: "inset-x-0 rounded-[6px] bg-[var(--mova-ai-field,#f6f6f6)]", children: options.map((item) => /* @__PURE__ */ jsx4(
               "button",
               {
                 "data-menu-row": true,
@@ -1415,7 +1304,7 @@ function FineTuneCard({
                 "aria-checked": item === typeValue,
                 type: "button",
                 onClick: () => selectType(item),
-                className: `relative z-10 flex h-6.5 w-full items-center rounded-[6px] px-2 text-left text-[12.5px] text-[var(--ink)] ${item === typeValue ? "bg-[var(--field)] group-hover/glide-menu:bg-transparent" : ""}`,
+                className: `relative z-10 flex h-6.5 w-full items-center rounded-[6px] px-2 text-left text-[12.5px] text-[var(--mova-ai-ink,#202020)] ${item === typeValue ? "bg-[var(--mova-ai-field,#f6f6f6)] group-hover/glide-menu:bg-transparent" : ""}`,
                 children: item
               },
               item
@@ -1429,7 +1318,7 @@ function FineTuneCard({
 function GlideMenu2({
   children,
   className = "",
-  highlightClassName = "inset-x-0 rounded-[8px] bg-[var(--hover)]",
+  highlightClassName = "inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover,#f1f1f1)]",
   rowSelector = "[data-menu-row]"
 }) {
   const ref = useRef3(null);
@@ -1475,221 +1364,30 @@ function GlideMenu2({
     }
   );
 }
-var scopedStyles3 = `.mova-ai-fine-tune-card{
-  --page: oklch(0.985 0.001 286.376);
-  --canvas: oklch(0.961 0.002 247.84);
-  --surface: oklch(1 0 0);
-  --inset: oklch(0.979 0.002 247.839);
-  --hover: oklch(0.97 0.002 247.839);
-  --hover-2: oklch(0.933 0.003 247.86);
-
-  --ink: oklch(0.247 0.006 258.361);
-  --ink-2: oklch(0.506 0.01 264.477);
-  --ink-3: oklch(0.695 0.009 264.505);
-
-  --line: oklch(0.946 0.003 264.542);
-  --line-strong: oklch(0.912 0.005 258.326);
-  --line-soft: oklch(0.966 0.002 264.542);
-  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);
-  --field: oklch(0.961 0.001 286.375);
-  --stripe: oklch(0.405 0 0 / 0.075);
-  --stripe-bg: oklch(0.97 0 0);
-
-  --accent: oklch(0.626 0.205 254.947);
-  --accent-ink: oklch(0.556 0.187 255.617);
-  --accent-tint: oklch(0.96 0.019 252.878);
-
-  --green: oklch(0.603 0.155 150.883);
-  --green-tint: oklch(0.958 0.017 159.118);
-  --orange: oklch(0.689 0.179 49.902);
-  --orange-tint: oklch(0.964 0.021 67.581);
-  --red: oklch(0.621 0.192 23.042);
-  --red-tint: oklch(0.956 0.017 17.462);
-
-  --tooltip-bg: oklch(0.272 0.008 264.435);
-  --tooltip-fg: oklch(0.976 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.356 0.007 264.474);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px var(--line-strong), var(--shadow-xs);
-  --shadow-card: 0 0 0 1px var(--line), var(--shadow-sm);
-  --shadow-raised: 0 0 0 1px var(--line), var(--shadow-md);
-  --shadow-overlay: 0 0 0 1px var(--line), var(--shadow-lg);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);--shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);--shadow-sm: 0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),
-    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),
-    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);--shadow-md: 0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),
-    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),
-    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);--radius-control:8px;
- width:100%;max-width:240px;min-width:0;font-family:Inter,ui-sans-serif,system-ui,sans-serif;font-size:14px;line-height:1.5;letter-spacing:-.01em;color:var(--ink);}
-.mova-ai-fine-tune-card[data-theme="dark"]{
-  --page: oklch(0.209 0.004 264.477);
-  --canvas: oklch(0.231 0.004 264.487);
-  --surface: oklch(0.26 0.006 271.191);
-  --inset: oklch(0.243 0.004 264.492);
-  --hover: oklch(0.289 0.006 271.22);
-  --hover-2: oklch(0.318 0.007 274.747);
-
-  --ink: oklch(0.964 0.002 247.839);
-  --ink-2: oklch(0.731 0.008 260.731);
-  --ink-3: oklch(0.541 0.01 264.484);
-
-  --line: oklch(0.308 0.006 258.354);
-  --line-strong: oklch(0.356 0.007 264.474);
-  --line-soft: oklch(0.278 0.006 258.354);
-  --field: oklch(0.293 0.006 271.223);
-  --stripe: oklch(1 0 0 / 0.055);
-  --stripe-bg: oklch(0.226 0.004 264.485);
-
-  --accent: oklch(0.68 0.173 253.301);
-  --accent-ink: oklch(0.788 0.113 248.33);
-  --accent-tint: oklch(0.68 0.173 253.301 / 0.16);
-
-  --green: oklch(0.705 0.154 153.814);
-  --green-tint: oklch(0.705 0.154 153.814 / 0.14);
-  --orange: oklch(0.746 0.156 55.642);
-  --orange-tint: oklch(0.746 0.156 55.642 / 0.14);
-  --red: oklch(0.666 0.18 21.433);
-  --red-tint: oklch(0.666 0.18 21.433 / 0.14);
-
-  --tooltip-bg: oklch(0.182 0.004 264.459);
-  --tooltip-fg: oklch(0.964 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.308 0.006 258.354);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);
-  --shadow-card:
-    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),
-    0 2px 6px oklch(0 0 0 / 0.2);
-  --shadow-raised:
-    0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);
-  --shadow-overlay:
-    0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);}
-.mova-ai-fine-tune-card .primitive-card-pad{padding:12px} .mova-ai-fine-tune-card .primitive-card-bar{padding:10px 12px} .mova-ai-fine-tune-card .primitive-card-footer{padding:10px} .mova-ai-fine-tune-card .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}
-.mova-ai-fine-tune-card :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--accent)!important;outline-offset:2px} .mova-ai-fine-tune-card button:not(:disabled){cursor:pointer} .mova-ai-fine-tune-card code{overflow-wrap:anywhere} .mova-ai-fine-tune-card *, .mova-ai-fine-tune-card *::before,.mova-ai-fine-tune-card *::after{box-sizing:border-box}
+var AI_THEME_STYLES4 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
+var scopedStyles3 = `.mova-ai-fine-tune-card .primitive-card-pad{padding:12px} .mova-ai-fine-tune-card .primitive-card-bar{padding:10px 12px} .mova-ai-fine-tune-card .primitive-card-footer{padding:10px} .mova-ai-fine-tune-card .primitive-icon-button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border-radius:8px}
+.mova-ai-fine-tune-card :is(button,input,[tabindex]):focus-visible{outline:2px solid var(--mova-ai-accent,#454545)!important;outline-offset:2px} .mova-ai-fine-tune-card button:not(:disabled){cursor:pointer} .mova-ai-fine-tune-card code{overflow-wrap:anywhere} .mova-ai-fine-tune-card *, .mova-ai-fine-tune-card *::before,.mova-ai-fine-tune-card *::after{box-sizing:border-box}
 @keyframes mova-ai-fine-tune-card-pop-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
 @keyframes mova-ai-fine-tune-card-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
 @keyframes mova-ai-fine-tune-card-shimmer-text{from{background-position:150% center}to{background-position:-50% center}}
 @media(prefers-reduced-motion:reduce){.mova-ai-fine-tune-card *, .mova-ai-fine-tune-card *::before, .mova-ai-fine-tune-card *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}`;
 function AIFineTuneCard({ theme = "light", ...props } = {}) {
-  return /* @__PURE__ */ jsxs4("div", { className: "mova-ai-fine-tune-card", "data-theme": theme, children: [
-    /* @__PURE__ */ jsx4("style", { children: scopedStyles3 }),
+  return /* @__PURE__ */ jsxs4("div", { className: "mova-ai-theme mova-ai-fine-tune-card", "data-theme": theme, children: [
+    /* @__PURE__ */ jsxs4("style", { children: [
+      AI_THEME_STYLES4,
+      scopedStyles3
+    ] }),
     /* @__PURE__ */ jsx4(FineTuneCard, { ...props })
   ] });
 }
 
 // .generated/ui/ai/ai-prompt-bar.tsx
-import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState8, useId } from "react";
+import { useEffect as useEffect7, useLayoutEffect as useLayoutEffect3, useRef as useRef4, useState as useState8, useId } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
-var COMPONENT_STYLES = `[data-mova-prompt] {--shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);--shadow-sm: 0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),
-    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),
-    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);--shadow-md: 0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),
-    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),
-    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);--shadow-lg: 0 25px 50px 0 rgba(0, 0, 0, 0.05), 0 12px 24px 0 rgba(0, 0, 0, 0.04),
-    0 6px 12px 0 rgba(0, 0, 0, 0.03), 0 3px 6px 0 rgba(0, 0, 0, 0.02),
-    0 1.5px 3px 0 rgba(0, 0, 0, 0.02); font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:14px;line-height:1.5;letter-spacing:-0.01em;color:var(--ink);
-  /* surfaces \u2014 cool, blue-tinted neutrals */
-  --page: oklch(0.985 0.001 286.376);
-  --canvas: oklch(0.961 0.002 247.84);
-  --surface: oklch(1 0 0);
-  --inset: oklch(0.979 0.002 247.839);
-  --hover: oklch(0.97 0.002 247.839);
-  --hover-2: oklch(0.933 0.003 247.86);
-
-  /* ink ramp */
-  --ink: oklch(0.247 0.006 258.361);
-  --ink-2: oklch(0.506 0.01 264.477);
-  --ink-3: oklch(0.695 0.009 264.505);
-
-  /* borders \u2014 solid and crisp, not alpha */
-  --line: oklch(0.946 0.003 264.542);
-  --line-strong: oklch(0.912 0.005 258.326);
-  --line-soft: oklch(0.966 0.002 264.542);
-  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);
-  --field: oklch(0.961 0.001 286.375);
-  --stripe: oklch(0.405 0 0 / 0.075);
-  --stripe-bg: oklch(0.97 0 0);
-
-  /* accent */
-  --accent: oklch(0.626 0.205 254.947);
-  --accent-ink: oklch(0.556 0.187 255.617);
-  --accent-tint: oklch(0.96 0.019 252.878);
-
-  /* semantic */
-  --green: oklch(0.603 0.155 150.883);
-  --green-tint: oklch(0.958 0.017 159.118);
-  --orange: oklch(0.689 0.179 49.902);
-  --orange-tint: oklch(0.964 0.021 67.581);
-  --red: oklch(0.621 0.192 23.042);
-  --red-tint: oklch(0.956 0.017 17.462);
-
-  /* chart overlays \u2014 neutral system colors with enough contrast on either theme */
-  --tooltip-bg: oklch(0.272 0.008 264.435);
-  --tooltip-fg: oklch(0.976 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.356 0.007 264.474);
-
-  /* shadows \u2014 our solid hairline ring + shadow-plugin's smooth layered stacks
-   * (--shadow-xs\u2026lg come from shadow-plugin/unprefixed) so every surface reads
-   * consistently across the app. */
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px var(--line-strong), var(--shadow-xs);
-  --shadow-card: 0 0 0 1px var(--line), var(--shadow-sm);
-  --shadow-raised: 0 0 0 1px var(--line), var(--shadow-md);
-  --shadow-overlay: 0 0 0 1px var(--line), var(--shadow-lg);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);}
-[data-mova-prompt][data-theme="dark"] {
-  --page: oklch(0.209 0.004 264.477);
-  --canvas: oklch(0.231 0.004 264.487);
-  --surface: oklch(0.26 0.006 271.191);
-  --inset: oklch(0.243 0.004 264.492);
-  --hover: oklch(0.289 0.006 271.22);
-  --hover-2: oklch(0.318 0.007 274.747);
-
-  --ink: oklch(0.964 0.002 247.839);
-  --ink-2: oklch(0.731 0.008 260.731);
-  --ink-3: oklch(0.541 0.01 264.484);
-
-  --line: oklch(0.308 0.006 258.354);
-  --line-strong: oklch(0.356 0.007 264.474);
-  --line-soft: oklch(0.278 0.006 258.354);
-  --field: oklch(0.293 0.006 271.223);
-  --stripe: oklch(1 0 0 / 0.055);
-  --stripe-bg: oklch(0.226 0.004 264.485);
-
-  --accent: oklch(0.68 0.173 253.301);
-  --accent-ink: oklch(0.788 0.113 248.33);
-  --accent-tint: oklch(0.68 0.173 253.301 / 0.16);
-
-  --green: oklch(0.705 0.154 153.814);
-  --green-tint: oklch(0.705 0.154 153.814 / 0.14);
-  --orange: oklch(0.746 0.156 55.642);
-  --orange-tint: oklch(0.746 0.156 55.642 / 0.14);
-  --red: oklch(0.666 0.18 21.433);
-  --red-tint: oklch(0.666 0.18 21.433 / 0.14);
-
-  --tooltip-bg: oklch(0.182 0.004 264.459);
-  --tooltip-fg: oklch(0.964 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.308 0.006 258.354);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  /* Elevation rings go to a subtle *light* hairline in dark mode: the ring
-   * paints over the surface behind the element, so a low-alpha white edge
-   * dissolves into the shadow as one continuous stroke (per smooth-shadow-ring),
-   * graduated by how far the surface floats. */
-  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);
-  --shadow-card:
-    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),
-    0 2px 6px oklch(0 0 0 / 0.2);
-  --shadow-raised:
-    0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);
-  --shadow-overlay:
-    0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);}
-[data-mova-prompt] :is(button,input,textarea):focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
+var AI_THEME_STYLES5 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
+var COMPONENT_STYLES = `[data-mova-prompt] button:focus-visible { outline:2px solid var(--mova-ai-accent,#454545);outline-offset:2px; }
+[data-mova-prompt] :is(input,textarea):focus-visible { outline:none; }
+[data-mova-prompt] .prompt-composer:focus-within { outline:2px solid var(--mova-ai-accent,#454545);outline-offset:2px; }
 [data-mova-prompt] button { cursor:pointer; } [data-mova-prompt] button:disabled { cursor:default; }
 
 @keyframes mova-prompt-pop {from {opacity:0;transform:scale(.95)} to {opacity:1;transform:scale(1)}}
@@ -1842,17 +1540,17 @@ function AIPromptBar({
     setActive(0);
     setEngaged(false);
   }, [menu, query]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const target = rowRefs.current[active];
     if (target) setRowBox({ top: target.offsetTop, height: target.offsetHeight });
   }, [menu, query, active, connected, rows.length]);
   const modelIndex = MODELS.findIndex((m) => m.key === model.key);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!modelOpen) return;
     const target = modelRowRefs.current[modelHovered ?? modelIndex];
     if (target) setModelBox({ top: target.offsetTop, height: target.offsetHeight });
   }, [modelOpen, modelHovered, modelIndex]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     if (!modelOpen || !composerAnchorRef.current || !modelRef.current) return;
     const reposition = () => {
       const anchorRect = composerAnchorRef.current?.getBoundingClientRect();
@@ -2021,7 +1719,7 @@ function AIPromptBar({
       setFeedback("Dictation is unavailable right now.");
     }
   };
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const input = inputRef.current;
     const controls = controlsRef.current;
     const measure = measureRef.current;
@@ -2097,7 +1795,7 @@ function AIPromptBar({
       "data-mova-prompt": true,
       "data-theme": theme,
       "data-promptbar": true,
-      className: `${demo ? "flex min-h-[384px] w-full max-w-[420px] flex-col justify-end pb-8" : "w-full"} ${className}`,
+      className: `mova-ai-theme ${demo ? "flex min-h-[384px] w-full max-w-[420px] flex-col justify-end pb-8" : "w-full"} ${className}`,
       onPointerDownCapture: takeOver,
       onKeyDownCapture: (event) => {
         takeOver(event);
@@ -2109,7 +1807,10 @@ function AIPromptBar({
         }
       },
       children: [
-        /* @__PURE__ */ jsx5("style", { children: COMPONENT_STYLES }),
+        /* @__PURE__ */ jsxs5("style", { children: [
+          AI_THEME_STYLES5,
+          COMPONENT_STYLES
+        ] }),
         /* @__PURE__ */ jsx5("input", { ref: fileRef, type: "file", multiple: true, className: "hidden", "aria-label": "Attach files", onChange: (event) => {
           const files = Array.from(event.target.files ?? []);
           setAttachments((current) => [...current, ...files]);
@@ -2125,14 +1826,14 @@ function AIPromptBar({
               role: "listbox",
               "aria-label": "Sources and commands",
               onMouseLeave: () => setEngaged(false),
-              className: "absolute inset-x-0 bottom-full z-10 mb-2 max-h-[min(320px,60dvh)] overflow-y-auto rounded-[10px] bg-[var(--surface)] p-1 shadow-[var(--shadow-raised)]",
+              className: "absolute inset-x-0 bottom-full z-10 mb-2 max-h-[min(320px,60dvh)] overflow-y-auto rounded-[10px] bg-[var(--mova-ai-surface,#fff)] p-1 shadow-[var(--mova-ai-shadow-raised,none)]",
               style: { animation: "mova-prompt-pop 180ms cubic-bezier(0.23,1,0.32,1) both", transformOrigin: "bottom center" },
               children: [
                 /* @__PURE__ */ jsx5(
                   "span",
                   {
                     "aria-hidden": true,
-                    className: "pointer-events-none absolute inset-x-1 rounded-[6px] bg-[var(--hover)]",
+                    className: "pointer-events-none absolute inset-x-1 rounded-[6px] bg-[var(--mova-ai-hover,#f1f1f1)]",
                     style: {
                       top: rowBox?.top ?? 0,
                       height: rowBox?.height ?? 0,
@@ -2165,13 +1866,13 @@ function AIPromptBar({
                       onClick: () => pick(row),
                       className: "relative z-10 flex h-9 w-full items-center gap-2.5 rounded-[6px] px-2 text-left",
                       children: [
-                        source && /* @__PURE__ */ jsx5("span", { className: "flex size-5.5 shrink-0 items-center justify-center text-[var(--ink-2)]", children: source.brand ? BRANDS[source.brand] : /* @__PURE__ */ jsx5(Icon, { size: 15, children: GLYPHS[source.glyph ?? "clip"] }) }),
-                        /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[12.5px] font-medium text-[var(--ink)]", children: row.name }),
-                        /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-[12px] text-[var(--ink-3)]", children: row.desc }),
+                        source && /* @__PURE__ */ jsx5("span", { className: "flex size-5.5 shrink-0 items-center justify-center text-[var(--mova-ai-ink-secondary,#666)]", children: source.brand ? BRANDS[source.brand] : /* @__PURE__ */ jsx5(Icon, { size: 15, children: GLYPHS[source.glyph ?? "clip"] }) }),
+                        /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)]", children: row.name }),
+                        /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-[12px] text-[var(--mova-ai-ink-muted,#858585)]", children: row.desc }),
                         source?.connect && /* @__PURE__ */ jsx5(
                           "span",
                           {
-                            className: `shrink-0 text-[12px] font-medium transition-colors duration-100 ${connected ? "text-[var(--green)]" : "text-[var(--accent-ink)] hover:underline"}`,
+                            className: `shrink-0 text-[12px] font-medium transition-colors duration-100 ${connected ? "text-[var(--mova-ai-success,#28734d)]" : "text-[var(--mova-ai-accent-ink,#333)] hover:underline"}`,
                             children: connected ? "Connected" : "Connect"
                           }
                         )
@@ -2180,12 +1881,12 @@ function AIPromptBar({
                     row.key
                   );
                 }),
-                rows.length === 0 && /* @__PURE__ */ jsxs5("div", { className: "flex h-9 items-center px-2 text-[12px] text-[var(--ink-3)]", children: [
+                rows.length === 0 && /* @__PURE__ */ jsxs5("div", { className: "flex h-9 items-center px-2 text-[12px] text-[var(--mova-ai-ink-muted,#858585)]", children: [
                   "No matches for \u201C",
                   query,
                   "\u201D"
                 ] }),
-                /* @__PURE__ */ jsx5("div", { className: "mt-1 border-t border-[var(--line)] px-2 pt-1.5 pb-1 text-[11px] text-[var(--ink-3)]", children: menu === "at" ? "Type to search sources & files" : "Type to search commands" })
+                /* @__PURE__ */ jsx5("div", { className: "mt-1 border-t border-[var(--mova-ai-border,#dedede)] px-2 pt-1.5 pb-1 text-[11px] text-[var(--mova-ai-ink-muted,#858585)]", children: menu === "at" ? "Type to search sources & files" : "Type to search commands" })
               ]
             }
           ),
@@ -2204,14 +1905,14 @@ function AIPromptBar({
                 }
               },
               onMouseLeave: () => setModelHovered(null),
-              className: "absolute z-10 w-52 max-w-full rounded-[10px] bg-[var(--surface)] p-1 shadow-[var(--shadow-raised)]",
+              className: "absolute z-10 w-52 max-w-full rounded-[10px] bg-[var(--mova-ai-surface,#fff)] p-1 shadow-[var(--mova-ai-shadow-raised,none)]",
               style: { left: modelMenuLeft, bottom: modelMenuBottom, animation: "mova-prompt-pop 180ms cubic-bezier(0.23,1,0.32,1) both", transformOrigin: "bottom left" },
               children: [
                 /* @__PURE__ */ jsx5(
                   "span",
                   {
                     "aria-hidden": true,
-                    className: "pointer-events-none absolute inset-x-1 rounded-[6px] bg-[var(--hover)]",
+                    className: "pointer-events-none absolute inset-x-1 rounded-[6px] bg-[var(--mova-ai-hover,#f1f1f1)]",
                     style: {
                       top: modelBox?.top ?? 0,
                       height: modelBox?.height ?? 0,
@@ -2236,9 +1937,9 @@ function AIPromptBar({
                     },
                     className: "relative z-10 flex h-7.5 w-full items-center gap-2 rounded-[6px] px-2 text-left",
                     children: [
-                      /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-[12.5px] font-medium text-[var(--ink)]", children: m.name }),
-                      /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[11px] text-[var(--ink-3)]", children: m.tag }),
-                      /* @__PURE__ */ jsx5("span", { className: `shrink-0 text-[var(--ink)] ${m.key === model.key ? "" : "invisible"}`, children: /* @__PURE__ */ jsx5(Icon, { size: 13, strokeWidth: 2.5, children: /* @__PURE__ */ jsx5("path", { d: "M20 6L9 17l-5-5" }) }) })
+                      /* @__PURE__ */ jsx5("span", { className: "min-w-0 flex-1 truncate text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)]", children: m.name }),
+                      /* @__PURE__ */ jsx5("span", { className: "shrink-0 text-[11px] text-[var(--mova-ai-ink-muted,#858585)]", children: m.tag }),
+                      /* @__PURE__ */ jsx5("span", { className: `shrink-0 text-[var(--mova-ai-ink,#202020)] ${m.key === model.key ? "" : "invisible"}`, children: /* @__PURE__ */ jsx5(Icon, { size: 13, strokeWidth: 2.5, children: /* @__PURE__ */ jsx5("path", { d: "M20 6L9 17l-5-5" }) }) })
                     ]
                   },
                   m.key
@@ -2249,7 +1950,7 @@ function AIPromptBar({
           /* @__PURE__ */ jsxs5(
             "div",
             {
-              className: `relative isolate flex flex-col overflow-hidden border border-[var(--line)] bg-[var(--surface)] shadow-[var(--shadow-card)] transition-[border-color,border-radius] duration-150 focus-within:border-[var(--line-strong)] ${tall ? "gap-2.5 p-3.5" : "gap-1.5 p-1.5"} ${pill ? attachments.length > 0 || wide ? "rounded-[24px]" : "rounded-full" : tall ? "rounded-[22px]" : "rounded-[14px]"}`,
+              className: `prompt-composer relative isolate flex flex-col overflow-hidden border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] shadow-[var(--mova-ai-shadow-card,none)] transition-[border-color,border-radius] duration-150 focus-within:border-[var(--mova-ai-border-strong,#c8c8c8)] ${tall ? "gap-2.5 p-3.5" : "gap-1.5 p-1.5"} ${pill ? attachments.length > 0 || wide ? "rounded-[24px]" : "rounded-full" : tall ? "rounded-[22px]" : "rounded-[14px]"}`,
               children: [
                 /* @__PURE__ */ jsx5(
                   "canvas",
@@ -2272,7 +1973,7 @@ function AIPromptBar({
                 attachments.length > 0 && /* @__PURE__ */ jsx5("div", { className: `flex flex-wrap gap-1.5 pt-0.5 ${pill ? "px-1" : "px-0.5"}`, children: attachments.map((file, i) => /* @__PURE__ */ jsxs5(
                   "span",
                   {
-                    className: `flex h-6.5 items-center gap-1.5 bg-[var(--field)] py-1 pr-1 pl-1.5 text-[11.5px] text-[var(--ink-2)] shadow-[var(--shadow-hairline)] ${pill ? "rounded-full" : "rounded-[6px]"}`,
+                    className: `flex h-6.5 items-center gap-1.5 bg-[var(--mova-ai-field,#f6f6f6)] py-1 pr-1 pl-1.5 text-[11.5px] text-[var(--mova-ai-ink-secondary,#666)] shadow-[var(--mova-ai-shadow-hairline,none)] ${pill ? "rounded-full" : "rounded-[6px]"}`,
                     style: { animation: "mova-prompt-pop 200ms cubic-bezier(0.23,1,0.32,1) both" },
                     children: [
                       /* @__PURE__ */ jsx5(Icon, { size: 12, children: /* @__PURE__ */ jsxs5("g", { children: [
@@ -2286,7 +1987,7 @@ function AIPromptBar({
                           type: "button",
                           "aria-label": `Remove ${file.name}`,
                           onClick: () => setAttachments((current) => current.filter((_, j) => j !== i)),
-                          className: `-my-1 flex size-6 items-center justify-center text-[var(--ink-3)] transition-colors duration-100 hover:bg-[color-mix(in_srgb,var(--line)_70%,transparent)] hover:text-[var(--ink)] ${pill ? "rounded-full" : "rounded-[5px]"}`,
+                          className: `-my-1 flex size-6 items-center justify-center text-[var(--mova-ai-ink-muted,#858585)] transition-colors duration-100 hover:bg-[color-mix(in_srgb,var(--mova-ai-border,#dedede)_70%,transparent)] hover:text-[var(--mova-ai-ink,#202020)] ${pill ? "rounded-full" : "rounded-[5px]"}`,
                           children: /* @__PURE__ */ jsx5(Icon, { size: 10, strokeWidth: 2.5, children: /* @__PURE__ */ jsx5("path", { d: "M18 6L6 18M6 6l12 12" }) })
                         }
                       )
@@ -2311,7 +2012,7 @@ function AIPromptBar({
                             setPlusOpen((current) => !current);
                             inputRef.current?.focus();
                           },
-                          className: `flex size-7 shrink-0 items-center justify-center justify-self-start text-[var(--ink-3)] transition-[background-color,color,transform] duration-150 hover:bg-[var(--hover)] hover:text-[var(--ink)] active:scale-[0.94] ${pill ? "rounded-full" : "rounded-[8px]"} ${plusOpen ? "bg-[var(--hover)] text-[var(--ink)]" : ""} ${wide ? "col-start-1 row-start-2" : "col-start-1 row-start-1"}`,
+                          className: `flex size-7 shrink-0 items-center justify-center justify-self-start text-[var(--mova-ai-ink-muted,#858585)] transition-[background-color,color,transform] duration-150 hover:bg-[var(--mova-ai-hover,#f1f1f1)] hover:text-[var(--mova-ai-ink,#202020)] active:scale-[0.94] ${pill ? "rounded-full" : "rounded-[8px]"} ${plusOpen ? "bg-[var(--mova-ai-hover,#f1f1f1)] text-[var(--mova-ai-ink,#202020)]" : ""} ${wide ? "col-start-1 row-start-2" : "col-start-1 row-start-1"}`,
                           children: /* @__PURE__ */ jsx5(Icon, { size: 16, strokeWidth: 2, children: /* @__PURE__ */ jsx5("path", { d: "M12 5v14M5 12h14" }) })
                         }
                       ),
@@ -2356,7 +2057,7 @@ function AIPromptBar({
                           "aria-expanded": !!menu,
                           "aria-controls": menu ? sourceMenuId : void 0,
                           "aria-activedescendant": menu && rows[active] ? `${sourceMenuId}-${active}` : void 0,
-                          className: `${tall ? "min-h-[68px] px-2 py-2 text-[14px] leading-5" : "min-h-7 px-1 py-[5px] text-[13px] leading-[18px]"} min-w-0 w-full resize-none bg-transparent text-[var(--ink)] outline-none [overflow-wrap:anywhere] placeholder:text-[var(--ink-3)] ${wide ? "col-span-full col-start-1 row-start-1" : "col-start-2 row-start-1"}`
+                          className: `${tall ? "min-h-[68px] px-2 py-2 text-[14px] leading-5" : "min-h-7 px-1 py-[5px] text-[13px] leading-[18px]"} min-w-0 w-full resize-none bg-transparent text-[var(--mova-ai-ink,#202020)] outline-none [overflow-wrap:anywhere] placeholder:text-[var(--mova-ai-ink-muted,#858585)] ${wide ? "col-span-full col-start-1 row-start-1" : "col-start-2 row-start-1"}`
                         }
                       ),
                       /* @__PURE__ */ jsxs5(
@@ -2381,10 +2082,10 @@ function AIPromptBar({
                             setDismissed(true);
                             setModelOpen((current) => !current);
                           },
-                          className: `flex h-7 shrink-0 items-center gap-1 px-1.5 text-[12px] font-medium text-[var(--ink-2)] transition-colors duration-150 hover:bg-[var(--hover)] hover:text-[var(--ink)] ${pill ? "rounded-full" : "rounded-[8px]"} ${wide ? "col-start-2 row-start-2 justify-self-start" : "col-start-3 row-start-1"}`,
+                          className: `flex h-7 shrink-0 items-center gap-1 px-1.5 text-[12px] font-medium text-[var(--mova-ai-ink-secondary,#666)] transition-colors duration-150 hover:bg-[var(--mova-ai-hover,#f1f1f1)] hover:text-[var(--mova-ai-ink,#202020)] ${pill ? "rounded-full" : "rounded-[8px]"} ${wide ? "col-start-2 row-start-2 justify-self-start" : "col-start-3 row-start-1"}`,
                           children: [
                             model.name,
-                            /* @__PURE__ */ jsx5("span", { className: "text-[var(--ink-3)]", children: /* @__PURE__ */ jsx5(Icon, { size: 11, strokeWidth: 2.4, children: /* @__PURE__ */ jsx5("path", { d: "M6 9l6 6 6-6" }) }) })
+                            /* @__PURE__ */ jsx5("span", { className: "text-[var(--mova-ai-ink-muted,#858585)]", children: /* @__PURE__ */ jsx5(Icon, { size: 11, strokeWidth: 2.4, children: /* @__PURE__ */ jsx5("path", { d: "M6 9l6 6 6-6" }) }) })
                           ]
                         }
                       ),
@@ -2395,7 +2096,7 @@ function AIPromptBar({
                           "aria-label": listening ? "Stop dictation" : "Start dictation",
                           "aria-pressed": listening,
                           onClick: toggleDictation,
-                          className: `flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-150 active:scale-[0.94] ${pill ? "rounded-full" : "rounded-[8px]"} ${listening ? "bg-[var(--accent-tint)] text-[var(--accent-ink)]" : "text-[var(--ink-3)] hover:bg-[var(--hover)] hover:text-[var(--ink)]"} ${wide ? "col-start-4 row-start-2" : "col-start-4 row-start-1"}`,
+                          className: `flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-150 active:scale-[0.94] ${pill ? "rounded-full" : "rounded-[8px]"} ${listening ? "bg-[var(--mova-ai-accent-tint,#eee)] text-[var(--mova-ai-accent-ink,#333)]" : "text-[var(--mova-ai-ink-muted,#858585)] hover:bg-[var(--mova-ai-hover,#f1f1f1)] hover:text-[var(--mova-ai-ink,#202020)]"} ${wide ? "col-start-4 row-start-2" : "col-start-4 row-start-1"}`,
                           children: listening ? /* @__PURE__ */ jsx5("span", { className: "flex h-3.5 items-center gap-[2.5px]", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx5(
                             "span",
                             {
@@ -2418,8 +2119,8 @@ function AIPromptBar({
                           onClick: send,
                           className: `flex size-7 shrink-0 items-center justify-center transition-[background-color,color,transform] duration-200 enabled:active:scale-[0.94] ${pill ? "rounded-full" : "rounded-[8px]"} ${wide ? "col-start-5 row-start-2" : "col-start-5 row-start-1"}`,
                           style: {
-                            background: canSend ? "var(--ink)" : "var(--line-strong)",
-                            color: canSend ? "var(--surface)" : "var(--ink-2)"
+                            background: canSend ? "var(--mova-ai-ink,#202020)" : "var(--mova-ai-border-strong,#c8c8c8)",
+                            color: canSend ? "var(--mova-ai-surface,#fff)" : "var(--mova-ai-ink-secondary,#666)"
                           },
                           children: /* @__PURE__ */ jsx5(Icon, { size: 16, strokeWidth: 2.4, children: /* @__PURE__ */ jsx5("path", { d: "M12 19V5M5 12l7-7 7 7" }) })
                         }
@@ -2431,124 +2132,22 @@ function AIPromptBar({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx5("p", { role: "status", className: "mt-2 min-h-4 break-words text-[11px] text-[var(--ink-3)]", children: feedback })
+        /* @__PURE__ */ jsx5("p", { role: "status", className: "mt-2 min-h-4 break-words text-[11px] text-[var(--mova-ai-ink-muted,#858585)]", children: feedback })
       ]
     }
   );
 }
 
 // .generated/ui/ai/ai-sidebar-nav.tsx
-import { useEffect as useEffect8, useRef as useRef5, useState as useState9 } from "react";
+import { useEffect as useEffect8, useId as useId2, useRef as useRef5, useState as useState9 } from "react";
 import { createPortal } from "react-dom";
 import { LogOut as IconArrowBoxLeft, Check as IconCheckmark1Small, ChevronDown as IconChevronDownSmall, X as IconCrossSmall, SquarePen as IconEditBig, House as IconHome, Search as IconMagnifyingGlass, Plus as IconPlusMedium, IceCream as IconPopsicle2, Settings as IconSettingsGear1, PanelLeftClose as IconSidebarLeftArrow, UserPlus as IconUserAdd } from "lucide-react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var COMPONENT_STYLES2 = `[data-mova-sidebar] {--shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0.04);--shadow-sm: 0 18px 47px 0 rgba(0, 0, 0, 0.03), 0 7.5px 19px 0 rgba(0, 0, 0, 0.02),
-    0 4px 10.5px 0 rgba(0, 0, 0, 0.02), 0 2.3px 5.8px 0 rgba(0, 0, 0, 0.01),
-    0 1.2px 3.1px 0 rgba(0, 0, 0, 0.01), 0 0.5px 1.3px 0 rgba(0, 0, 0, 0.01);--shadow-md: 0 17.54px 23.39px 0 rgba(0, 0, 0, 0.04), 0 9.4px 12.5px 0 rgba(0, 0, 0, 0.03),
-    0 5.25px 7px 0 rgba(0, 0, 0, 0.02), 0 2.79px 3.72px -2px rgba(0, 0, 0, 0.01),
-    0 1.16px 1.5px 0 rgba(0, 0, 0, 0.01);--shadow-lg: 0 25px 50px 0 rgba(0, 0, 0, 0.05), 0 12px 24px 0 rgba(0, 0, 0, 0.04),
-    0 6px 12px 0 rgba(0, 0, 0, 0.03), 0 3px 6px 0 rgba(0, 0, 0, 0.02),
-    0 1.5px 3px 0 rgba(0, 0, 0, 0.02); font-family:Inter,ui-sans-serif,system-ui,sans-serif; font-size:14px;line-height:1.5;letter-spacing:-0.01em;color:var(--ink);
-  /* surfaces \u2014 cool, blue-tinted neutrals */
-  --page: oklch(0.985 0.001 286.376);
-  --canvas: oklch(0.961 0.002 247.84);
-  --surface: oklch(1 0 0);
-  --inset: oklch(0.979 0.002 247.839);
-  --hover: oklch(0.97 0.002 247.839);
-  --hover-2: oklch(0.933 0.003 247.86);
-
-  /* ink ramp */
-  --ink: oklch(0.247 0.006 258.361);
-  --ink-2: oklch(0.506 0.01 264.477);
-  --ink-3: oklch(0.695 0.009 264.505);
-
-  /* borders \u2014 solid and crisp, not alpha */
-  --line: oklch(0.946 0.003 264.542);
-  --line-strong: oklch(0.912 0.005 258.326);
-  --line-soft: oklch(0.966 0.002 264.542);
-  --grid-line: color-mix(in srgb, var(--line) 78%, transparent);
-  --field: oklch(0.961 0.001 286.375);
-  --stripe: oklch(0.405 0 0 / 0.075);
-  --stripe-bg: oklch(0.97 0 0);
-
-  /* accent */
-  --accent: oklch(0.626 0.205 254.947);
-  --accent-ink: oklch(0.556 0.187 255.617);
-  --accent-tint: oklch(0.96 0.019 252.878);
-
-  /* semantic */
-  --green: oklch(0.603 0.155 150.883);
-  --green-tint: oklch(0.958 0.017 159.118);
-  --orange: oklch(0.689 0.179 49.902);
-  --orange-tint: oklch(0.964 0.021 67.581);
-  --red: oklch(0.621 0.192 23.042);
-  --red-tint: oklch(0.956 0.017 17.462);
-
-  /* chart overlays \u2014 neutral system colors with enough contrast on either theme */
-  --tooltip-bg: oklch(0.272 0.008 264.435);
-  --tooltip-fg: oklch(0.976 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.356 0.007 264.474);
-
-  /* shadows \u2014 our solid hairline ring + shadow-plugin's smooth layered stacks
-   * (--shadow-xs\u2026lg come from shadow-plugin/unprefixed) so every surface reads
-   * consistently across the app. */
-  --shadow-hairline: 0 0 0 1px var(--line);
-  --shadow-btn: 0 0 0 1px var(--line-strong), var(--shadow-xs);
-  --shadow-card: 0 0 0 1px var(--line), var(--shadow-sm);
-  --shadow-raised: 0 0 0 1px var(--line), var(--shadow-md);
-  --shadow-overlay: 0 0 0 1px var(--line), var(--shadow-lg);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.12);}
-[data-mova-sidebar][data-theme="dark"] {
-  --page: oklch(0.209 0.004 264.477);
-  --canvas: oklch(0.231 0.004 264.487);
-  --surface: oklch(0.26 0.006 271.191);
-  --inset: oklch(0.243 0.004 264.492);
-  --hover: oklch(0.289 0.006 271.22);
-  --hover-2: oklch(0.318 0.007 274.747);
-
-  --ink: oklch(0.964 0.002 247.839);
-  --ink-2: oklch(0.731 0.008 260.731);
-  --ink-3: oklch(0.541 0.01 264.484);
-
-  --line: oklch(0.308 0.006 258.354);
-  --line-strong: oklch(0.356 0.007 264.474);
-  --line-soft: oklch(0.278 0.006 258.354);
-  --field: oklch(0.293 0.006 271.223);
-  --stripe: oklch(1 0 0 / 0.055);
-  --stripe-bg: oklch(0.226 0.004 264.485);
-
-  --accent: oklch(0.68 0.173 253.301);
-  --accent-ink: oklch(0.788 0.113 248.33);
-  --accent-tint: oklch(0.68 0.173 253.301 / 0.16);
-
-  --green: oklch(0.705 0.154 153.814);
-  --green-tint: oklch(0.705 0.154 153.814 / 0.14);
-  --orange: oklch(0.746 0.156 55.642);
-  --orange-tint: oklch(0.746 0.156 55.642 / 0.14);
-  --red: oklch(0.666 0.18 21.433);
-  --red-tint: oklch(0.666 0.18 21.433 / 0.14);
-
-  --tooltip-bg: oklch(0.182 0.004 264.459);
-  --tooltip-fg: oklch(0.964 0.002 247.839);
-  --tooltip-muted: oklch(0.731 0.008 260.731);
-  --tooltip-border: oklch(0.308 0.006 258.354);
-
-  --shadow-hairline: 0 0 0 1px var(--line);
-  /* Elevation rings go to a subtle *light* hairline in dark mode: the ring
-   * paints over the surface behind the element, so a low-alpha white edge
-   * dissolves into the shadow as one continuous stroke (per smooth-shadow-ring),
-   * graduated by how far the surface floats. */
-  --shadow-btn: 0 0 0 1px oklch(1 0 0 / 0.1), 0 1px 2px oklch(0 0 0 / 0.3);
-  --shadow-card:
-    0 0 0 1px oklch(1 0 0 / 0.11), 0 1px 2px oklch(0 0 0 / 0.2),
-    0 2px 6px oklch(0 0 0 / 0.2);
-  --shadow-raised:
-    0 0 0 1px oklch(1 0 0 / 0.13), 0 2px 10px oklch(0 0 0 / 0.22);
-  --shadow-overlay:
-    0 0 0 1px oklch(1 0 0 / 0.15), 0 8px 28px oklch(0 0 0 / 0.34);
-  --shadow-inset-field: inset 0 1px 2px oklch(0 0 0 / 0.4);}
-[data-mova-sidebar] :is(button,input,textarea):focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
+var AI_THEME_STYLES6 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
+var COMPONENT_STYLES2 = `[data-mova-sidebar] button:focus-visible { outline:2px solid var(--mova-ai-accent,#454545);outline-offset:2px;border-radius:8px; }
+[data-mova-sidebar] input:focus-visible { outline:none; }
+[data-mova-sidebar] .sidebar-search:focus-within { outline:2px solid var(--mova-ai-accent,#454545);outline-offset:2px;border-radius:8px; }
+[data-mova-sidebar] .sidebar-search button:focus-visible { outline:none; }
 [data-mova-sidebar] button { cursor:pointer; } [data-mova-sidebar] button:disabled { cursor:default; }
 [data-mova-sidebar] .sidebar-row{
   width: 208px;
@@ -2619,7 +2218,7 @@ var COMPONENT_STYLES2 = `[data-mova-sidebar] {--shadow-xs: 0 0 4px 0 rgba(0, 0,
 function GlideMenu3({
   children,
   className = "",
-  highlightClassName = "inset-x-0 rounded-[8px] bg-[var(--hover)]",
+  highlightClassName = "inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover,#f1f1f1)]",
   rowSelector = "[data-menu-row]"
 }) {
   const ref = useRef5(null);
@@ -2691,14 +2290,15 @@ var SIDEBAR_MOTION = {
 var CHAT_SEARCH_MOTION = {
   duration: 180,
   closedWidth: 28,
-  easing: "cubic-bezier(0.16, 1, 0.3, 1)"
+  easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+  listDuration: 220
 };
 function GlideGroup({ children }) {
   return /* @__PURE__ */ jsx6(
     GlideMenu3,
     {
       rowSelector: "[data-row]",
-      highlightClassName: "sidebar-glide-highlight rounded-[7px] bg-[var(--hover-2)]",
+      highlightClassName: "sidebar-glide-highlight rounded-[7px] bg-[var(--mova-ai-hover-strong,#e9e9e9)]",
       className: "group/glide flex flex-col gap-px",
       children
     }
@@ -2721,11 +2321,11 @@ function RailButton({
       onClick,
       className: `sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left
         transition-[width,background-color,color,transform] duration-150 active:scale-[0.98]
-        ${active ? "bg-[var(--hover-2)] group-hover/glide:bg-transparent" : ""}`,
+        ${active ? "bg-[var(--mova-ai-hover-strong,#e9e9e9)] group-hover/glide:bg-transparent" : ""}`,
       children: [
-        /* @__PURE__ */ jsx6("span", { className: `flex size-5 shrink-0 items-center justify-center ${active ? "text-[var(--ink)]" : "text-[var(--ink-2)]"}`, children: icon }),
-        /* @__PURE__ */ jsx6("span", { className: `sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium ${active ? "text-[var(--ink)]" : "text-[var(--ink-2)]"}`, children: label }),
-        count && /* @__PURE__ */ jsx6("span", { className: "sidebar-copy mr-2 shrink-0 text-[12px] font-medium tabular-nums text-[var(--ink-3)]", children: count })
+        /* @__PURE__ */ jsx6("span", { className: `flex size-5 shrink-0 items-center justify-center ${active ? "text-[var(--mova-ai-ink,#202020)]" : "text-[var(--mova-ai-ink-secondary,#666)]"}`, children: icon }),
+        /* @__PURE__ */ jsx6("span", { className: `sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium ${active ? "text-[var(--mova-ai-ink,#202020)]" : "text-[var(--mova-ai-ink-secondary,#666)]"}`, children: label }),
+        count && /* @__PURE__ */ jsx6("span", { className: "sidebar-copy mr-2 shrink-0 text-[12px] font-medium tabular-nums text-[var(--mova-ai-ink-muted,#858585)]", children: count })
       ]
     }
   );
@@ -2762,7 +2362,7 @@ function WorkspaceMenu({
             buttons[(index + (event.key === "ArrowDown" ? 1 : buttons.length - 1)) % buttons.length]?.focus();
           }
         },
-        className: "fixed z-50 w-64 rounded-[14px] bg-[var(--surface)] p-1.5 shadow-[var(--shadow-overlay)]",
+        className: "mova-ai-theme fixed z-50 w-64 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-1.5 shadow-[var(--mova-ai-shadow-overlay,none)]",
         style: {
           top: position.top,
           left: position.left,
@@ -2773,8 +2373,11 @@ function WorkspaceMenu({
           transformOrigin: "top left"
         },
         children: [
-          /* @__PURE__ */ jsx6("style", { children: COMPONENT_STYLES2 }),
-          /* @__PURE__ */ jsxs6(GlideMenu3, { className: "flex flex-col gap-px", highlightClassName: "inset-x-0 rounded-[8px] bg-[var(--hover-2)]", children: [
+          /* @__PURE__ */ jsxs6("style", { children: [
+            AI_THEME_STYLES6,
+            COMPONENT_STYLES2
+          ] }),
+          /* @__PURE__ */ jsxs6(GlideMenu3, { className: "flex flex-col gap-px", highlightClassName: "inset-x-0 rounded-[8px] bg-[var(--mova-ai-hover-strong,#e9e9e9)]", children: [
             /* @__PURE__ */ jsxs6(
               "button",
               {
@@ -2783,13 +2386,13 @@ function WorkspaceMenu({
                 onClick: onClose,
                 className: "relative z-10 flex h-10 w-full items-center gap-1.5 rounded-[8px] px-2 text-left",
                 children: [
-                  /* @__PURE__ */ jsx6("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-[var(--ink)] text-[11px] font-semibold text-[var(--surface)]", children: WORKSPACE.monogram }),
-                  /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13.5px] font-medium text-[var(--ink)]", children: WORKSPACE.name }),
-                  /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-[var(--ink)]", children: /* @__PURE__ */ jsx6(IconCheckmark1Small, { size: 18 }) })
+                  /* @__PURE__ */ jsx6("span", { className: "flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-[var(--mova-ai-ink,#202020)] text-[11px] font-semibold text-[var(--mova-ai-surface,#fff)]", children: WORKSPACE.monogram }),
+                  /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13.5px] font-medium text-[var(--mova-ai-ink,#202020)]", children: WORKSPACE.name }),
+                  /* @__PURE__ */ jsx6("span", { className: "shrink-0 text-[var(--mova-ai-ink,#202020)]", children: /* @__PURE__ */ jsx6(IconCheckmark1Small, { size: 18 }) })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx6("div", { className: "my-1 h-px bg-[var(--line)]" }),
+            /* @__PURE__ */ jsx6("div", { className: "my-1 h-px bg-[var(--mova-ai-border,#dedede)]" }),
             [
               { label: "New workspace", icon: /* @__PURE__ */ jsx6(IconPlusMedium, { size: 16 }) },
               { label: "Workspace settings", icon: /* @__PURE__ */ jsx6(IconSettingsGear1, { size: 16 }) },
@@ -2805,13 +2408,13 @@ function WorkspaceMenu({
                 },
                 className: "relative z-10 flex h-9 w-full items-center gap-1.5 rounded-[8px] px-2 text-left",
                 children: [
-                  /* @__PURE__ */ jsx6("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--ink-2)]", children: item.icon }),
-                  /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13.5px] text-[var(--ink)]", children: item.label })
+                  /* @__PURE__ */ jsx6("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--mova-ai-ink-secondary,#666)]", children: item.icon }),
+                  /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13.5px] text-[var(--mova-ai-ink,#202020)]", children: item.label })
                 ]
               },
               item.label
             )),
-            /* @__PURE__ */ jsx6("div", { className: "my-1 h-px bg-[var(--line)]" }),
+            /* @__PURE__ */ jsx6("div", { className: "my-1 h-px bg-[var(--mova-ai-border,#dedede)]" }),
             /* @__PURE__ */ jsxs6(
               "button",
               {
@@ -2823,8 +2426,8 @@ function WorkspaceMenu({
                 },
                 className: "relative z-10 flex h-9 w-full items-center gap-1.5 rounded-[8px] px-2 text-left",
                 children: [
-                  /* @__PURE__ */ jsx6("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--ink-2)]", children: /* @__PURE__ */ jsx6(IconArrowBoxLeft, { size: 16 }) }),
-                  /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13.5px] text-[var(--ink)]", children: "Sign out" })
+                  /* @__PURE__ */ jsx6("span", { className: "flex size-5 shrink-0 items-center justify-center text-[var(--mova-ai-ink-secondary,#666)]", children: /* @__PURE__ */ jsx6(IconArrowBoxLeft, { size: 16 }) }),
+                  /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate text-[13.5px] text-[var(--mova-ai-ink,#202020)]", children: "Sign out" })
                 ]
               }
             )
@@ -2860,7 +2463,7 @@ function AISidebarNav({
   const currentNav = activeNav ?? internalNav;
   const selectNav = (key) => {
     setInternalNav(key);
-    setFeedback(key === "home" ? "Home selected" : key === "invite" ? "Invite users selected" : "Chats selected");
+    if (key === "home" || key === "invite") setFeedback(key === "home" ? "Home selected" : "Invite users selected");
     onNavigate?.(key);
   };
   const [demoActiveTitle, setDemoActiveTitle] = useState9(null);
@@ -2868,6 +2471,9 @@ function AISidebarNav({
   const [workspacePosition, setWorkspacePosition] = useState9({ top: 0, left: 0 });
   const [searchOpen, setSearchOpen] = useState9(false);
   const [query, setQuery] = useState9("");
+  const [chatsExpanded, setChatsExpanded] = useState9(true);
+  const historyId = useId2();
+  const searchId = useId2();
   const workspaceButtonRef = useRef5(null);
   const searchRef = useRef5(null);
   const selectedTitle = activeTitle === void 0 ? demoActiveTitle : activeTitle;
@@ -2904,6 +2510,13 @@ function AISidebarNav({
     setSearchOpen(false);
     setQuery("");
   };
+  const toggleChats = () => {
+    if (chatsExpanded) {
+      setSearchOpen(false);
+      setQuery("");
+    }
+    setChatsExpanded(!chatsExpanded);
+  };
   return /* @__PURE__ */ jsxs6(
     "aside",
     {
@@ -2912,7 +2525,7 @@ function AISidebarNav({
       "data-theme": theme,
       "data-sidebar-collapsed": collapsed,
       "aria-label": "Workspace navigation",
-      className: `relative flex shrink-0 overflow-hidden transition-[width] ${fill ? "h-full" : "h-[600px]"} ${className}`,
+      className: `mova-ai-theme relative flex shrink-0 overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] transition-[width] ${fill ? "h-full" : "h-[600px]"} ${className}`,
       style: {
         width: collapsed ? SIDEBAR_MOTION.collapsedWidth : SIDEBAR_MOTION.expandedWidth,
         transitionDuration: `${SIDEBAR_MOTION.duration}ms`,
@@ -2922,7 +2535,10 @@ function AISidebarNav({
         "--sidebar-easing": SIDEBAR_MOTION.easing
       },
       children: [
-        /* @__PURE__ */ jsx6("style", { children: COMPONENT_STYLES2 }),
+        /* @__PURE__ */ jsxs6("style", { children: [
+          AI_THEME_STYLES6,
+          COMPONENT_STYLES2
+        ] }),
         /* @__PURE__ */ jsxs6("div", { className: "flex min-h-0 w-[224px] shrink-0 flex-col", children: [
           /* @__PURE__ */ jsxs6("div", { className: "relative mb-2.5 h-10 shrink-0", children: [
             /* @__PURE__ */ jsxs6(
@@ -2941,11 +2557,11 @@ function AISidebarNav({
                   }
                   setWorkspaceOpen((open) => !open);
                 },
-                className: "sidebar-workspace-control absolute left-2 top-1 flex h-8 w-[164px] items-center rounded-[8px] px-2 text-left transition-[background-color,transform] duration-100 hover:bg-[var(--hover-2)] active:scale-[0.99]",
+                className: "sidebar-workspace-control absolute left-2 top-1 flex h-8 w-[164px] items-center rounded-[8px] px-2 text-left transition-[background-color,transform] duration-100 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] active:scale-[0.99]",
                 children: [
-                  /* @__PURE__ */ jsx6("span", { className: "sidebar-logo flex size-5 shrink-0 items-center justify-center text-[var(--ink)]", children: /* @__PURE__ */ jsx6(IconPopsicle2, { size: 18 }) }),
-                  /* @__PURE__ */ jsx6("span", { className: "sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium text-[var(--ink-2)]", children: WORKSPACE.name }),
-                  /* @__PURE__ */ jsx6("span", { className: "sidebar-copy ml-1 flex shrink-0 text-[var(--ink-3)]", children: /* @__PURE__ */ jsx6(IconChevronDownSmall, { size: 16 }) })
+                  /* @__PURE__ */ jsx6("span", { className: "sidebar-logo flex size-5 shrink-0 items-center justify-center text-[var(--mova-ai-ink,#202020)]", children: /* @__PURE__ */ jsx6(IconPopsicle2, { size: 18 }) }),
+                  /* @__PURE__ */ jsx6("span", { className: "sidebar-copy ml-1.5 min-w-0 flex-1 truncate text-[14px] font-medium text-[var(--mova-ai-ink-secondary,#666)]", children: WORKSPACE.name }),
+                  /* @__PURE__ */ jsx6("span", { className: "sidebar-copy ml-1 flex shrink-0 text-[var(--mova-ai-ink-muted,#858585)]", children: /* @__PURE__ */ jsx6(IconChevronDownSmall, { size: 16 }) })
                 ]
               }
             ),
@@ -2965,7 +2581,7 @@ function AISidebarNav({
                 "aria-hidden": collapsed,
                 tabIndex: collapsed ? -1 : 0,
                 onClick: collapse,
-                className: "sidebar-collapse-control absolute right-2 top-1 flex size-8 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--hover-2)] hover:text-[var(--ink)]",
+                className: "sidebar-collapse-control absolute right-2 top-1 flex size-8 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)]",
                 children: /* @__PURE__ */ jsx6(IconSidebarLeftArrow, { size: 18 })
               }
             ),
@@ -2981,7 +2597,7 @@ function AISidebarNav({
                   setCollapsed(false);
                   requestAnimationFrame(() => collapseRef.current?.focus());
                 },
-                className: "sidebar-expand-control absolute left-2 top-0.5 flex size-9 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--hover-2)] hover:text-[var(--ink)]",
+                className: "sidebar-expand-control absolute left-2 top-0.5 flex size-9 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,background-color,color] duration-150 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)]",
                 children: /* @__PURE__ */ jsx6(IconSidebarLeftArrow, { size: 18, className: "rotate-180" })
               }
             )
@@ -3012,16 +2628,22 @@ function AISidebarNav({
               item.key
             ))
           ] }),
-          /* @__PURE__ */ jsxs6("div", { className: "mt-3 min-h-0 flex-1 overflow-y-auto", inert: collapsed, children: [
-            /* @__PURE__ */ jsxs6("div", { className: "sidebar-copy relative mx-2 mb-1 h-8", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "mt-3 flex min-h-0 flex-1 flex-col", inert: collapsed, children: [
+            /* @__PURE__ */ jsxs6("div", { className: "sidebar-copy relative mx-2 mb-1 h-8 shrink-0", children: [
               /* @__PURE__ */ jsxs6(
-                "div",
+                "button",
                 {
+                  type: "button",
+                  "aria-label": "Chats",
+                  "aria-expanded": chatsExpanded,
+                  "aria-controls": historyId,
                   "aria-hidden": searchOpen,
-                  className: `absolute inset-0 flex items-center gap-1.5 px-2 text-[12.5px] font-medium text-[var(--ink-3)] transition-[opacity,transform] ${searchOpen ? "pointer-events-none -translate-x-1 opacity-0" : "translate-x-0 opacity-100"}`,
+                  tabIndex: searchOpen ? -1 : 0,
+                  onClick: toggleChats,
+                  className: `absolute inset-0 flex items-center gap-1.5 rounded-[8px] px-2 text-left text-[12.5px] font-medium text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,transform,color] hover:text-[var(--mova-ai-ink,#202020)] ${searchOpen ? "pointer-events-none -translate-x-1 opacity-0" : "translate-x-0 opacity-100"}`,
                   style: { transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms`, transitionTimingFunction: CHAT_SEARCH_MOTION.easing },
                   children: [
-                    /* @__PURE__ */ jsx6(IconChevronDownSmall, { size: 16 }),
+                    /* @__PURE__ */ jsx6(IconChevronDownSmall, { size: 16, className: `transition-transform duration-200 ${chatsExpanded ? "rotate-0" : "-rotate-90"}` }),
                     /* @__PURE__ */ jsx6("span", { children: "Chats" })
                   ]
                 }
@@ -3034,8 +2656,13 @@ function AISidebarNav({
                   "aria-label": "Search chats",
                   tabIndex: searchOpen ? -1 : 0,
                   "aria-expanded": searchOpen,
-                  onClick: () => setSearchOpen(true),
-                  className: `absolute right-0 top-0 z-10 flex size-8 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[opacity,background-color,color,transform] hover:bg-[var(--hover-2)] hover:text-[var(--ink)] active:scale-[0.96] ${searchOpen ? "pointer-events-none opacity-0" : "opacity-100"}`,
+                  "aria-controls": searchId,
+                  "aria-hidden": searchOpen,
+                  onClick: () => {
+                    setChatsExpanded(true);
+                    setSearchOpen(true);
+                  },
+                  className: `absolute right-0 top-0 z-10 flex size-8 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[opacity,background-color,color,transform] hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)] active:scale-[0.96] ${searchOpen ? "pointer-events-none opacity-0" : "opacity-100"}`,
                   style: { transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms` },
                   children: /* @__PURE__ */ jsx6(IconMagnifyingGlass, { size: 16 })
                 }
@@ -3043,7 +2670,11 @@ function AISidebarNav({
               /* @__PURE__ */ jsxs6(
                 "div",
                 {
-                  className: `absolute right-0 top-0 z-20 flex h-8 items-center overflow-hidden rounded-[8px] bg-[var(--field)] text-[var(--ink-3)] shadow-[var(--shadow-hairline)] transition-[width,opacity] focus-within:text-[var(--ink-2)] ${searchOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
+                  id: searchId,
+                  role: "search",
+                  "aria-hidden": !searchOpen,
+                  inert: !searchOpen,
+                  className: `sidebar-search absolute right-0 top-0 z-20 flex h-8 items-center overflow-hidden rounded-[8px] bg-[var(--mova-ai-field,#f6f6f6)] text-[var(--mova-ai-ink-muted,#858585)] shadow-[var(--mova-ai-shadow-hairline,none)] transition-[width,opacity] focus-within:text-[var(--mova-ai-ink-secondary,#666)] ${searchOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"}`,
                   style: {
                     width: searchOpen ? "100%" : CHAT_SEARCH_MOTION.closedWidth,
                     transitionDuration: `${CHAT_SEARCH_MOTION.duration}ms`,
@@ -3067,7 +2698,7 @@ function AISidebarNav({
                         },
                         placeholder: "Search chats",
                         "aria-label": "Search chat history",
-                        className: "ml-1.5 min-w-0 flex-1 bg-transparent text-[13px] font-medium text-[var(--ink)] outline-none placeholder:text-[var(--ink-3)]"
+                        className: "ml-1.5 min-w-0 flex-1 bg-transparent text-[13px] font-medium text-[var(--mova-ai-ink,#202020)] outline-none placeholder:text-[var(--mova-ai-ink-muted,#858585)]"
                       }
                     ),
                     /* @__PURE__ */ jsx6(
@@ -3081,7 +2712,7 @@ function AISidebarNav({
                           setQuery("");
                           searchButtonRef.current?.focus();
                         },
-                        className: "flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--ink-3)] transition-[background-color,color,transform] duration-150 hover:bg-[var(--hover-2)] hover:text-[var(--ink)] active:scale-[0.96]",
+                        className: "flex size-8 shrink-0 items-center justify-center rounded-[8px] text-[var(--mova-ai-ink-muted,#858585)] transition-[background-color,color,transform] duration-150 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] hover:text-[var(--mova-ai-ink,#202020)] active:scale-[0.96]",
                         children: /* @__PURE__ */ jsx6(IconCrossSmall, { size: 16 })
                       }
                     )
@@ -3089,47 +2720,62 @@ function AISidebarNav({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs6(GlideGroup, { children: [
-              visibleRecents.map((item) => {
-                const active = item.label === selectedTitle;
-                return /* @__PURE__ */ jsx6(
-                  "button",
-                  {
-                    "data-row": true,
-                    type: "button",
-                    title: item.label,
-                    "aria-current": active ? "page" : void 0,
-                    onClick: () => {
-                      selectNav("chats");
-                      if (activeTitle === void 0) setDemoActiveTitle(item.label);
-                      onPick?.(item.id, item.label, item.prompt);
-                    },
-                    className: `sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left transition-[width,background-color,color,transform] duration-150 active:scale-[0.98] ${active ? "bg-[var(--hover-2)] group-hover/glide:bg-transparent" : ""}`,
-                    children: /* @__PURE__ */ jsx6("span", { className: `sidebar-copy min-w-0 flex-1 truncate text-[14px] font-medium ${active ? "text-[var(--ink)]" : "text-[var(--ink-2)]"}`, children: item.label })
-                  },
-                  item.id
-                );
-              }),
-              query && visibleRecents.length === 0 && /* @__PURE__ */ jsx6("div", { className: "sidebar-copy mx-2 px-2 py-2 text-[12.5px] text-[var(--ink-3)]", children: "No chats found" })
-            ] })
+            /* @__PURE__ */ jsx6(
+              "div",
+              {
+                id: historyId,
+                "aria-hidden": !chatsExpanded,
+                inert: !chatsExpanded,
+                className: "grid min-h-0 flex-1 transition-[grid-template-rows,opacity]",
+                style: {
+                  gridTemplateRows: chatsExpanded ? "minmax(0, 1fr)" : "minmax(0, 0fr)",
+                  opacity: chatsExpanded ? 1 : 0,
+                  transitionDuration: `${CHAT_SEARCH_MOTION.listDuration}ms`,
+                  transitionTimingFunction: CHAT_SEARCH_MOTION.easing
+                },
+                children: /* @__PURE__ */ jsx6("div", { className: "min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx6("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsxs6(GlideGroup, { children: [
+                  visibleRecents.map((item) => {
+                    const active = item.label === selectedTitle;
+                    return /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        "data-row": true,
+                        type: "button",
+                        title: item.label,
+                        "aria-current": active ? "page" : void 0,
+                        onClick: () => {
+                          setInternalNav("chats");
+                          onNavigate?.("chats");
+                          if (activeTitle === void 0) setDemoActiveTitle(item.label);
+                          onPick?.(item.id, item.label, item.prompt);
+                        },
+                        className: `sidebar-row relative z-10 mx-2 flex h-8 items-center rounded-[8px] px-2 text-left transition-[width,background-color,color,transform] duration-150 active:scale-[0.98] ${active ? "bg-[var(--mova-ai-hover-strong,#e9e9e9)] group-hover/glide:bg-transparent" : ""}`,
+                        children: /* @__PURE__ */ jsx6("span", { className: `sidebar-copy min-w-0 flex-1 truncate text-[14px] font-medium ${active ? "text-[var(--mova-ai-ink,#202020)]" : "text-[var(--mova-ai-ink-secondary,#666)]"}`, children: item.label })
+                      },
+                      item.id
+                    );
+                  }),
+                  query && visibleRecents.length === 0 && /* @__PURE__ */ jsx6("div", { className: "sidebar-copy mx-2 px-2 py-2 text-[12.5px] text-[var(--mova-ai-ink-muted,#858585)]", children: "No chats found" })
+                ] }) }) })
+              }
+            )
           ] }),
-          /* @__PURE__ */ jsxs6("div", { inert: collapsed, className: "sidebar-copy mx-2 mt-3 w-[208px] border-t border-[var(--line)] pt-3", children: [
+          /* @__PURE__ */ jsxs6("div", { inert: collapsed, className: "sidebar-copy mx-2 mt-3 w-[208px] border-t border-[var(--mova-ai-border,#dedede)] pt-3", children: [
             /* @__PURE__ */ jsxs6(
               "button",
               {
                 type: "button",
                 onClick: () => {
-                  setFeedback(`${footerLabel} selected`);
                   (onFooterClick ?? onNewChat)?.();
                 },
-                className: "flex h-8 w-full items-center justify-center gap-1.5 rounded-[8px] bg-[var(--hover-2)] text-[12.5px] font-medium text-[var(--ink)] transition-[background-color,transform] duration-150 hover:bg-[var(--line-strong)] active:scale-[0.98]",
+                className: "flex h-8 w-full items-center justify-center gap-1.5 rounded-[8px] bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[12.5px] font-medium text-[var(--mova-ai-ink,#202020)] transition-[background-color,transform] duration-150 hover:bg-[var(--mova-ai-border-strong,#c8c8c8)] active:scale-[0.98]",
                 children: [
                   footerIcon,
                   footerLabel
                 ]
               }
             ),
-            /* @__PURE__ */ jsx6("p", { role: "status", className: "mt-2 text-[11px] text-[var(--ink-3)]", children: feedback })
+            /* @__PURE__ */ jsx6("p", { role: "status", className: "sr-only", children: feedback })
           ] })
         ] })
       ]
@@ -3140,7 +2786,7 @@ function AISidebarNav({
 // .generated/ui/ai/ai-sources.tsx
 import { ChevronRight, Globe } from "lucide-react";
 import { AnimatePresence as AnimatePresence2, motion as motion2, useReducedMotion as useReducedMotion3 } from "framer-motion";
-import { useId as useId2, useState as useState10 } from "react";
+import { useId as useId3, useState as useState10 } from "react";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var SPRING_DEFAULT2 = { bounce: 0.1, duration: 0.25, type: "spring" };
 var EASE_OUT2 = [0.23, 1, 0.32, 1];
@@ -3148,6 +2794,7 @@ var STACK_LIMIT = 3;
 var STACK_OVERLAP_PX = 8;
 var FAN_GAP_PX = 3;
 var ROW_STAGGER = 0.035;
+var AI_THEME_STYLES7 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
 var hostOf = (url) => {
   try {
     return new URL(url).hostname.replace(/^www\./, "");
@@ -3155,25 +2802,26 @@ var hostOf = (url) => {
     return url;
   }
 };
-var Favicon = ({ size, source }) => /* @__PURE__ */ jsxs7("span", { className: "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border bg-background text-muted-foreground", style: { height: size, width: size }, children: [
+var Favicon = ({ size, source }) => /* @__PURE__ */ jsxs7("span", { className: "relative flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink-secondary,#666)]", style: { height: size, width: size }, children: [
   /* @__PURE__ */ jsx7(Globe, { "aria-hidden": "true", size: size * 0.6 }),
   source.favicon ? /* @__PURE__ */ jsx7("span", { className: "absolute inset-0 flex size-full items-center justify-center *:size-full *:object-cover", children: source.favicon }) : null
 ] });
-function AISources({ className = "", defaultOpen = false, label = "Sources", sources }) {
+function AISources({ className = "", defaultOpen = false, label = "Sources", sources, theme = "light" }) {
   const shouldReduceMotion = useReducedMotion3();
   const [isOpen, setIsOpen] = useState10(defaultOpen);
   const [isHovered, setIsHovered] = useState10(false);
-  const listId = useId2();
+  const listId = useId3();
   const stacked = sources.slice(0, STACK_LIMIT);
   const overflow = sources.length - stacked.length;
   const fanned = isHovered && !isOpen && !shouldReduceMotion;
-  return /* @__PURE__ */ jsxs7("div", { className: `w-full ${className}`, children: [
+  return /* @__PURE__ */ jsxs7("div", { className: `mova-ai-theme w-full ${className}`, "data-theme": theme, children: [
+    /* @__PURE__ */ jsx7("style", { children: AI_THEME_STYLES7 }),
     /* @__PURE__ */ jsxs7(
       "button",
       {
         "aria-expanded": isOpen,
         "aria-controls": listId,
-        className: "flex cursor-pointer items-center gap-2 rounded-lg py-1 text-muted-foreground text-sm transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2",
+        className: "flex cursor-pointer items-center gap-2 rounded-lg py-1 text-[color:var(--mova-ai-ink-secondary,#666)] text-sm transition-colors hover:text-[color:var(--mova-ai-ink,#202020)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--mova-ai-accent,#454545)]",
         onBlur: () => setIsHovered(false),
         onClick: () => setIsOpen((current) => !current),
         onFocus: () => setIsHovered(true),
@@ -3212,11 +2860,11 @@ function AISources({ className = "", defaultOpen = false, label = "Sources", sou
         exit: shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 },
         initial: shouldReduceMotion ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 },
         transition: shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT2, opacity: { duration: 0.18, ease: EASE_OUT2 } },
-        children: sources.map((source, index) => /* @__PURE__ */ jsx7(motion2.li, { animate: { opacity: 1, y: 0 }, initial: shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 4 }, transition: shouldReduceMotion ? { duration: 0 } : { ...SPRING_DEFAULT2, delay: index * ROW_STAGGER }, children: /* @__PURE__ */ jsxs7("a", { className: "flex items-start gap-2.5 rounded-lg px-1 py-1.5 no-underline transition-colors hover:bg-muted", href: source.url, rel: "noopener noreferrer", target: "_blank", children: [
+        children: sources.map((source, index) => /* @__PURE__ */ jsx7(motion2.li, { animate: { opacity: 1, y: 0 }, initial: shouldReduceMotion ? { opacity: 1, y: 0 } : { opacity: 0, y: 4 }, transition: shouldReduceMotion ? { duration: 0 } : { ...SPRING_DEFAULT2, delay: index * ROW_STAGGER }, children: /* @__PURE__ */ jsxs7("a", { className: "flex items-start gap-2.5 rounded-lg px-1 py-1.5 no-underline transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)]", href: source.url, rel: "noopener noreferrer", target: "_blank", children: [
           /* @__PURE__ */ jsx7(motion2.span, { className: "mt-0.5 block shrink-0", transition: shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT2, children: /* @__PURE__ */ jsx7(Favicon, { size: 18, source }) }),
           /* @__PURE__ */ jsxs7("span", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsx7("span", { className: "block truncate font-medium text-foreground text-sm", children: source.title }),
-            /* @__PURE__ */ jsx7("span", { className: "block truncate text-muted-foreground text-xs", children: source.snippet ?? hostOf(source.url) })
+            /* @__PURE__ */ jsx7("span", { className: "block truncate font-medium text-[color:var(--mova-ai-ink,#202020)] text-sm", children: source.title }),
+            /* @__PURE__ */ jsx7("span", { className: "block truncate text-[color:var(--mova-ai-ink-secondary,#666)] text-xs", children: source.snippet ?? hostOf(source.url) })
           ] })
         ] }) }, source.id))
       }
@@ -3272,11 +2920,12 @@ import { Fragment as Fragment3 } from "react";
 import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 var SPRING_DEFAULT4 = { bounce: 0.1, duration: 0.25, type: "spring" };
 var EASE_IN_OUT = [0.645, 0.045, 0.355, 1];
+var AI_THEME_STYLES8 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
 var CHECK_PATH = "M 3.5 7.5 L 6 10 L 10.5 4.5";
 var BOX_SIZE = 14;
 var UNDERLINE_SECONDS = 1.4;
-var SUCCESS_COLOR = "oklch(72% 0.17 150)";
-var DANGER_COLOR2 = "oklch(63% 0.21 25)";
+var SUCCESS_COLOR = "var(--mova-ai-success,#28734d)";
+var DANGER_COLOR2 = "var(--mova-ai-danger,#a33c3c)";
 var flatten = (tasks) => tasks.flatMap((task) => [task, ...flatten(task.children ?? [])]);
 var boxStroke = (status) => status === "failed" ? DANGER_COLOR2 : status === "done" ? SUCCESS_COLOR : "currentColor";
 function TaskBox({ status, shouldReduceMotion }) {
@@ -3317,8 +2966,8 @@ function TaskRow({ depth, shouldReduceMotion, task }) {
           ": "
         ] }),
         /* @__PURE__ */ jsx9(TaskBox, { shouldReduceMotion, status: task.status }),
-        /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1 break-words text-foreground text-xs leading-snug", children: task.label }),
-        task.note ? /* @__PURE__ */ jsx9("span", { className: "max-w-[35%] truncate text-muted-foreground text-xs tabular-nums", children: task.note }) : null,
+        /* @__PURE__ */ jsx9("span", { className: "min-w-0 flex-1 break-words text-[color:var(--mova-ai-ink,#202020)] text-xs leading-snug", children: task.label }),
+        task.note ? /* @__PURE__ */ jsx9("span", { className: "max-w-[35%] truncate text-[color:var(--mova-ai-ink-secondary,#666)] text-xs tabular-nums", children: task.note }) : null,
         isRunning && !shouldReduceMotion ? /* @__PURE__ */ jsx9(
           motion4.span,
           {
@@ -3332,26 +2981,30 @@ function TaskRow({ depth, shouldReduceMotion, task }) {
     }
   );
 }
-function AITaskList({ className = "", label = "Plan", tasks }) {
+function AITaskList({ className = "", label = "Plan", tasks, theme = "light" }) {
   const shouldReduceMotion = Boolean(useReducedMotion5());
   const all = flatten(tasks);
   const done = all.filter((task) => task.status === "done").length;
-  return /* @__PURE__ */ jsxs9("div", { className: `w-full rounded-lg border border-border bg-background p-3 ${className}`, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: `mova-ai-theme w-full rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-3 ${className}`, "data-theme": theme, children: [
+    /* @__PURE__ */ jsx9("style", { children: AI_THEME_STYLES8 }),
     /* @__PURE__ */ jsxs9("div", { className: "mb-1.5 flex items-baseline justify-between", children: [
-      /* @__PURE__ */ jsx9("p", { className: "font-medium text-foreground text-sm", children: label }),
-      /* @__PURE__ */ jsxs9("p", { className: "text-muted-foreground text-xs tabular-nums", children: [
+      /* @__PURE__ */ jsx9("p", { className: "font-medium text-[color:var(--mova-ai-ink,#202020)] text-sm", children: label }),
+      /* @__PURE__ */ jsxs9("p", { className: "text-[color:var(--mova-ai-ink-secondary,#666)] text-xs tabular-nums", children: [
         done,
         "/",
         all.length
       ] })
     ] }),
-    /* @__PURE__ */ jsx9("style", { children: `
+    /* @__PURE__ */ jsxs9("style", { children: [
+      AI_THEME_STYLES8,
+      `
         .ai-task-draw { stroke-dashoffset: 0; }
         @media (prefers-reduced-motion: no-preference) {
           .ai-task-draw { animation: ai-task-draw 200ms cubic-bezier(0.23, 1, 0.32, 1) both; }
         }
         @keyframes ai-task-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
-      ` }),
+      `
+    ] }),
     /* @__PURE__ */ jsx9("ul", { className: "list-none", children: (() => {
       const renderTasks = (items2, depth) => items2.map((task) => /* @__PURE__ */ jsxs9(Fragment3, { children: [
         /* @__PURE__ */ jsx9(TaskRow, { depth, shouldReduceMotion, task }),
@@ -3377,6 +3030,7 @@ var CHECK_PATH2 = "M 8.5 12.2 L 11 14.8 L 15.8 9.6";
 var CROSS_PATHS = ["M 9 9 L 15 15", "M 15 9 L 9 15"];
 var SPIN_SECONDS = 0.9;
 var PENDING_PULSE_SECONDS = 1.6;
+var AI_THEME_STYLES9 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
 var STATUS_LABEL = {
   error: "Failed",
   pending: "Queued",
@@ -3386,7 +3040,7 @@ var STATUS_LABEL = {
 function AIToolCallBadge({ status, shouldReduceMotion }) {
   const isRunning = status === "running";
   const isPending = status === "pending";
-  const ringColor = status === "success" ? "oklch(72% 0.17 150)" : status === "error" ? "oklch(63% 0.21 25)" : "currentColor";
+  const ringColor = status === "success" ? "var(--mova-ai-success,#28734d)" : status === "error" ? "var(--mova-ai-danger,#a33c3c)" : "currentColor";
   return /* @__PURE__ */ jsx10("span", { className: "relative flex size-5 shrink-0 items-center justify-center text-muted-foreground", children: /* @__PURE__ */ jsxs10("svg", { "aria-hidden": "true", className: "size-5 overflow-visible", viewBox: `0 0 ${BADGE_VIEWBOX} ${BADGE_VIEWBOX}`, children: [
     /* @__PURE__ */ jsx10(
       motion5.g,
@@ -3453,25 +3107,26 @@ function AIToolCallBadge({ status, shouldReduceMotion }) {
     ] })
   ] }) });
 }
-function AIToolCall({ args, className = "", defaultOpen = false, name, result, status = "pending", summary }) {
+function AIToolCall({ args, className = "", defaultOpen = false, name, result, status = "pending", summary, theme = "light" }) {
   const shouldReduceMotion = useReducedMotion6();
   const [isOpen, setIsOpen] = useState11(defaultOpen);
   const hasDetail = Boolean(args || result);
-  return /* @__PURE__ */ jsxs10("div", { className: `w-full overflow-hidden rounded-lg border border-border bg-background ${className}`, children: [
+  return /* @__PURE__ */ jsxs10("div", { className: `mova-ai-theme w-full overflow-hidden rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] text-[color:var(--mova-ai-ink,#202020)] ${className}`, "data-theme": theme, children: [
+    /* @__PURE__ */ jsx10("style", { children: AI_THEME_STYLES9 }),
     /* @__PURE__ */ jsxs10(
       "button",
       {
         "aria-expanded": hasDetail ? isOpen : void 0,
-        className: "flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left disabled:cursor-default focus-visible:outline-2 focus-visible:outline-offset-[-2px] hover:bg-muted/40",
+        className: "flex w-full cursor-pointer items-center gap-2.5 px-3 py-2 text-left disabled:cursor-default focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--mova-ai-accent,#454545)] hover:bg-[color-mix(in_srgb,var(--mova-ai-hover,#f1f1f1)_70%,transparent)]",
         disabled: !hasDetail,
         onClick: () => setIsOpen((current) => !current),
         type: "button",
         children: [
           /* @__PURE__ */ jsx10(AIToolCallBadge, { shouldReduceMotion: Boolean(shouldReduceMotion), status }),
-          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx10("span", { className: "block truncate font-medium font-mono text-foreground text-xs", children: name }) }),
-          summary ? /* @__PURE__ */ jsx10("span", { className: "max-w-[40%] truncate text-muted-foreground text-xs", children: summary }) : null,
+          /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx10("span", { className: "block truncate font-medium font-mono text-[color:var(--mova-ai-ink,#202020)] text-xs", children: name }) }),
+          summary ? /* @__PURE__ */ jsx10("span", { className: "max-w-[40%] truncate text-[color:var(--mova-ai-ink-secondary,#666)] text-xs", children: summary }) : null,
           /* @__PURE__ */ jsx10("span", { className: "sr-only", children: STATUS_LABEL[status] }),
-          hasDetail ? /* @__PURE__ */ jsx10(motion5.span, { animate: { rotate: isOpen ? 90 : 0 }, className: "flex size-4 shrink-0 items-center justify-center text-muted-foreground", transition: shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT5, children: /* @__PURE__ */ jsx10(ChevronRight2, { "aria-hidden": "true", size: 14 }) }) : null
+          hasDetail ? /* @__PURE__ */ jsx10(motion5.span, { animate: { rotate: isOpen ? 90 : 0 }, className: "flex size-4 shrink-0 items-center justify-center text-[color:var(--mova-ai-ink-secondary,#666666)]", transition: shouldReduceMotion ? { duration: 0 } : SPRING_DEFAULT5, children: /* @__PURE__ */ jsx10(ChevronRight2, { "aria-hidden": "true", size: 14 }) }) : null
         ]
       }
     ),
@@ -3483,14 +3138,14 @@ function AIToolCall({ args, className = "", defaultOpen = false, name, result, s
         exit: shouldReduceMotion ? { opacity: 0, transition: { duration: 0 } } : { height: 0, opacity: 0 },
         initial: shouldReduceMotion ? { height: "auto", opacity: 1 } : { height: 0, opacity: 0 },
         transition: shouldReduceMotion ? { duration: 0 } : { height: SPRING_DEFAULT5, opacity: { duration: 0.18, ease: EASE_OUT3 } },
-        children: /* @__PURE__ */ jsxs10("div", { className: "space-y-2 border-border border-t px-3 py-2.5 text-xs", children: [
+        children: /* @__PURE__ */ jsxs10("div", { className: "space-y-2 border-[var(--mova-ai-border,#dedede)] border-t px-3 py-2.5 text-xs", children: [
           args ? /* @__PURE__ */ jsxs10("div", { children: [
-            /* @__PURE__ */ jsx10("p", { className: "mb-1 text-[10px] text-muted-foreground uppercase tracking-wide", children: "Arguments" }),
-            /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto font-mono text-foreground", children: args })
+            /* @__PURE__ */ jsx10("p", { className: "mb-1 text-[10px] text-[color:var(--mova-ai-ink-secondary,#666666)] uppercase tracking-wide", children: "Arguments" }),
+            /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto font-mono text-[color:var(--mova-ai-ink,#202020)]", children: args })
           ] }) : null,
           result ? /* @__PURE__ */ jsxs10("div", { children: [
-            /* @__PURE__ */ jsx10("p", { className: "mb-1 text-[10px] text-muted-foreground uppercase tracking-wide", children: "Result" }),
-            /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto text-foreground", children: result })
+            /* @__PURE__ */ jsx10("p", { className: "mb-1 text-[10px] text-[color:var(--mova-ai-ink-secondary,#666666)] uppercase tracking-wide", children: "Result" }),
+            /* @__PURE__ */ jsx10("div", { className: "overflow-x-auto text-[color:var(--mova-ai-ink,#202020)]", children: result })
           ] }) : null
         ] })
       }
@@ -3515,9 +3170,10 @@ import { SortableContext, sortableKeyboardCoordinates, useSortable, verticalList
 import { CSS } from "@dnd-kit/utilities";
 import { CalendarClock, FolderKanban, Plus, Tags, UserCheck, Filter, List, Columns3, SlidersHorizontal, ArrowUpDown, ChevronDown, Check } from "lucide-react";
 import { AnimatePresence as AnimatePresence5, motion as motion6, useReducedMotion as useReducedMotion7 } from "framer-motion";
-import { Fragment as Fragment4, createContext, useContext, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef6, useState as useState12, useId as useId3 } from "react";
+import { Fragment as Fragment4, createContext, useContext, useEffect as useEffect9, useLayoutEffect as useLayoutEffect4, useMemo as useMemo3, useRef as useRef6, useState as useState12, useId as useId4 } from "react";
 import { Fragment as Fragment5, jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var BOARD_STATUSES = ["backlog", "todo", "in_progress", "in_review", "blocked", "done", "cancelled"];
+var AI_THEME_STYLES10 = '/* Shared public tokens for the standalone AI component family. */\n.mova-ai-theme {\n  color-scheme: light;\n  color: var(--mova-ai-ink, #202020);\n  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;\n  font-size: 13px;\n  line-height: 1.45;\n  letter-spacing: -0.01em;\n\n  --mova-ai-page: #f7f7f7;\n  --mova-ai-canvas: #f4f4f4;\n  --mova-ai-surface: #ffffff;\n  --mova-ai-inset: #f8f8f8;\n  --mova-ai-hover: #f1f1f1;\n  --mova-ai-hover-strong: #e9e9e9;\n\n  --mova-ai-ink: #202020;\n  --mova-ai-ink-secondary: #666666;\n  --mova-ai-ink-muted: #858585;\n\n  --mova-ai-border: #dedede;\n  --mova-ai-border-soft: #ededed;\n  --mova-ai-border-strong: #c8c8c8;\n  --mova-ai-field: #f6f6f6;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(32 35 38 / 7%);\n  --mova-ai-stripe-bg: #242424;\n\n  --mova-ai-accent: #454545;\n  --mova-ai-accent-ink: #333333;\n  --mova-ai-accent-foreground: #ffffff;\n  --mova-ai-accent-tint: #eeeeee;\n  --mova-ai-success: #28734d;\n  --mova-ai-success-tint: #e8f3ec;\n  --mova-ai-warning: #986517;\n  --mova-ai-warning-tint: #f8f0df;\n  --mova-ai-danger: #a33c3c;\n  --mova-ai-danger-tint: #f7eaea;\n  --mova-ai-info: #496b89;\n  --mova-ai-info-tint: #eaf0f5;\n  --mova-ai-neutral-status: #69737d;\n  --mova-ai-status-on: #ffffff;\n\n  --mova-ai-tooltip-bg: #292929;\n  --mova-ai-tooltip-fg: #f6f6f6;\n  --mova-ai-tooltip-muted: #c3c3c3;\n  --mova-ai-tooltip-border: #484848;\n\n  --mova-ai-radius-panel: 8px;\n  --mova-ai-radius-control: 8px;\n  --mova-ai-shadow-xs: 0 1px 2px rgb(22 28 33 / 5%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(22 28 33 / 7%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(22 28 33 / 11%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(22 28 33 / 15%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(22 28 33 / 12%);\n}\n\n.mova-ai-theme[data-theme="dark"] {\n  color-scheme: dark;\n  --mova-ai-page: #181818;\n  --mova-ai-canvas: #202020;\n  --mova-ai-surface: #272727;\n  --mova-ai-inset: #1d1d1d;\n  --mova-ai-hover: #2d2d2d;\n  --mova-ai-hover-strong: #393939;\n\n  --mova-ai-ink: #eeeeee;\n  --mova-ai-ink-secondary: #b5b5b5;\n  --mova-ai-ink-muted: #929292;\n\n  --mova-ai-border: #3b3b3b;\n  --mova-ai-border-soft: #303030;\n  --mova-ai-border-strong: #505050;\n  --mova-ai-field: #2c2c2c;\n  --mova-ai-grid: color-mix(in srgb, var(--mova-ai-border) 78%, transparent);\n  --mova-ai-stripe: rgb(255 255 255 / 6%);\n  --mova-ai-stripe-bg: #202528;\n\n  --mova-ai-accent: #c2c2c2;\n  --mova-ai-accent-ink: #d5d5d5;\n  --mova-ai-accent-foreground: #202020;\n  --mova-ai-accent-tint: #353535;\n  --mova-ai-success: #88c7a0;\n  --mova-ai-success-tint: #293b30;\n  --mova-ai-warning: #d7b66f;\n  --mova-ai-warning-tint: #3c3525;\n  --mova-ai-danger: #e5928e;\n  --mova-ai-danger-tint: #3c2b2b;\n  --mova-ai-info: #9bbbd6;\n  --mova-ai-info-tint: #293541;\n  --mova-ai-neutral-status: #a0a0a0;\n  --mova-ai-status-on: #181818;\n\n  --mova-ai-tooltip-bg: #121212;\n  --mova-ai-tooltip-fg: #eeeeee;\n  --mova-ai-tooltip-muted: #b5b5b5;\n  --mova-ai-tooltip-border: #3b3b3b;\n\n  --mova-ai-shadow-xs: 0 1px 2px rgb(0 0 0 / 22%);\n  --mova-ai-shadow-sm: 0 2px 8px rgb(0 0 0 / 25%);\n  --mova-ai-shadow-md: 0 8px 20px rgb(0 0 0 / 30%);\n  --mova-ai-shadow-lg: 0 14px 32px rgb(0 0 0 / 38%);\n  --mova-ai-shadow-hairline: 0 0 0 1px var(--mova-ai-border);\n  --mova-ai-shadow-btn: 0 0 0 1px var(--mova-ai-border-strong), var(--mova-ai-shadow-xs);\n  --mova-ai-shadow-card: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-sm);\n  --mova-ai-shadow-raised: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-md);\n  --mova-ai-shadow-overlay: 0 0 0 1px var(--mova-ai-border), var(--mova-ai-shadow-lg);\n  --mova-ai-shadow-inset-field: inset 0 1px 2px rgb(0 0 0 / 42%);\n}\n';
 var createBoardKeyboardCoordinates = (getHorizontalTarget, onHorizontalTarget) => (event, args) => {
   if (event.code !== "ArrowLeft" && event.code !== "ArrowRight") {
     onHorizontalTarget(null);
@@ -3565,13 +3221,13 @@ var createBoardKeyboardCoordinates = (getHorizontalTarget, onHorizontalTarget) =
   };
 };
 var STATUS_META = {
-  backlog: { color: "#fb923c", label: "Backlog", lane: "border-white/[0.09] bg-white/[0.025]", laneOver: "border-white/25 bg-white/[0.07]" },
-  todo: { color: "#9ca3af", label: "To do", lane: "border-blue-900/55 bg-blue-950/25", laneOver: "border-blue-600/75 bg-blue-900/40" },
-  in_progress: { color: "#facc15", label: "In progress", lane: "border-amber-900/55 bg-amber-950/25", laneOver: "border-amber-600/75 bg-amber-900/40" },
-  in_review: { color: "#a78bfa", label: "In review", lane: "border-violet-900/55 bg-violet-950/25", laneOver: "border-violet-600/75 bg-violet-900/40" },
-  blocked: { color: "#f87171", label: "Blocked", lane: "border-red-900/55 bg-red-950/25", laneOver: "border-red-600/75 bg-red-900/40" },
-  done: { color: "#4ade80", label: "Done", lane: "border-emerald-900/55 bg-emerald-950/25", laneOver: "border-emerald-600/75 bg-emerald-900/40" },
-  cancelled: { color: "#a3a3a3", label: "Cancelled", lane: "border-neutral-800/70 bg-neutral-900/30", laneOver: "border-neutral-600/80 bg-neutral-800/45" }
+  backlog: { color: "var(--mova-ai-neutral-status)", label: "Backlog", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" },
+  todo: { color: "var(--mova-ai-neutral-status)", label: "To do", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" },
+  in_progress: { color: "var(--mova-ai-info)", label: "In progress", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" },
+  in_review: { color: "var(--mova-ai-warning)", label: "In review", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" },
+  blocked: { color: "var(--mova-ai-danger)", label: "Blocked", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" },
+  done: { color: "var(--mova-ai-success)", label: "Done", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" },
+  cancelled: { color: "var(--mova-ai-neutral-status)", label: "Cancelled", lane: "border-[var(--mova-ai-border,#3b3b3b)] bg-[var(--mova-ai-canvas,#202020)]", laneOver: "border-[var(--mova-ai-border-strong,#505050)] bg-[var(--mova-ai-hover,#2d2d2d)]" }
 };
 var DEFAULT_ISSUES = [
   { id: "R6Z-141", title: "Retire legacy Node backend, CLI, and MCP authorities", status: "backlog", priority: "high", assignee: "Noah", project: "Rudder-dev", labels: ["Feature"], created: "Aug 20" },
@@ -3598,7 +3254,7 @@ function StatusIcon({ status }) {
     ] }) : null,
     status === "done" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx11("circle", { cx: "8", cy: "8", r: "6.5", fill: "currentColor" }),
-      /* @__PURE__ */ jsx11("path", { d: "M4.75 8.25 7 10.5l4.25-5", stroke: "#131313", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+      /* @__PURE__ */ jsx11("path", { d: "M4.75 8.25 7 10.5l4.25-5", stroke: "var(--mova-ai-status-on,#fff)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
     ] }) : null,
     status === "cancelled" ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
       /* @__PURE__ */ jsx11("circle", { cx: "8", cy: "8", r: "6", fill: "currentColor", opacity: "0.16" }),
@@ -3613,29 +3269,27 @@ function StatusIcon({ status }) {
 }
 function PriorityIcon({ priority }) {
   const active = priority === "critical" ? 4 : priority === "high" ? 3 : priority === "medium" ? 2 : 1;
-  const tone = priority === "critical" || priority === "high" ? "text-orange-400" : priority === "medium" ? "text-orange-300/80" : "text-orange-300/55";
+  const tone = priority === "critical" ? "var(--mova-ai-danger)" : priority === "high" ? "var(--mova-ai-warning)" : priority === "medium" ? "var(--mova-ai-info)" : "var(--mova-ai-neutral-status)";
   const heights = [4, 6, 10, 14];
-  return /* @__PURE__ */ jsx11("span", { className: `inline-flex h-3.5 w-4 items-end gap-[2px] ${tone}`, "aria-hidden": "true", children: heights.map((height, index) => /* @__PURE__ */ jsx11("span", { className: "w-[3px] rounded-[1px] bg-current", style: { height: `${height}px`, opacity: index < active ? 1 : 0.25 } }, height)) });
+  return /* @__PURE__ */ jsx11("span", { className: "inline-flex h-3.5 w-4 items-end gap-[2px]", style: { color: tone }, "aria-hidden": "true", children: heights.map((height, index) => /* @__PURE__ */ jsx11("span", { className: "w-[3px] rounded-[1px] bg-current", style: { height: `${height}px`, opacity: index < active ? 1 : 0.25 } }, height)) });
 }
 var DISPLAY_FIELDS = ["Identifier", "Priority", "Assignee", "Reviewer", "Labels", "Project", "Updated", "Created"];
 var DisplayContext = createContext(DISPLAY_FIELDS.filter((field) => field !== "Updated"));
 function MemberAvatar({ name }) {
-  const palette = ["#79a894", "#a18bbd", "#c09972", "#7b9ebe", "#bd8392"];
-  const color = palette[Array.from(name).reduce((sum, letter) => sum + letter.charCodeAt(0), 0) % palette.length];
-  return /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full text-[9px] font-semibold text-[#17201e]", style: { backgroundColor: color }, children: name.slice(0, 1) });
+  return /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[9px] font-semibold text-[color:var(--mova-ai-ink,#202020)]", children: name.slice(0, 1) });
 }
 function IssueListRow({ issue }) {
   const display = useContext(DisplayContext);
-  return /* @__PURE__ */ jsxs11("article", { className: "rudder-list-row border-b border-white/[0.07] px-4 py-3", "data-testid": `issue-row-${issue.id}`, children: [
+  return /* @__PURE__ */ jsxs11("article", { className: "rudder-list-row border-b border-[var(--mova-ai-border-soft,#ededed)] px-4 py-3", "data-testid": `issue-row-${issue.id}`, children: [
     /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 items-start gap-2.5", children: [
       /* @__PURE__ */ jsxs11("span", { className: "mt-0.5", title: STATUS_META[issue.status].label, children: [
         /* @__PURE__ */ jsx11("span", { className: "sr-only", children: STATUS_META[issue.status].label }),
         /* @__PURE__ */ jsx11(StatusIcon, { status: issue.status })
       ] }),
-      display.includes("Identifier") ? /* @__PURE__ */ jsx11("span", { className: "shrink-0 pt-0.5 font-mono text-xs text-[#8b8b8b]", children: issue.id }) : null,
-      /* @__PURE__ */ jsx11("h3", { className: "min-w-0 flex-1 break-words text-sm font-medium leading-relaxed text-[#ececea]", children: issue.title })
+      display.includes("Identifier") ? /* @__PURE__ */ jsx11("span", { className: "shrink-0 pt-0.5 font-mono text-xs text-[color:var(--mova-ai-ink-muted,#858585)]", children: issue.id }) : null,
+      /* @__PURE__ */ jsx11("h3", { className: "min-w-0 flex-1 break-words text-sm font-medium leading-relaxed text-[color:var(--mova-ai-ink,#202020)]", children: issue.title })
     ] }),
-    /* @__PURE__ */ jsxs11("div", { className: "rudder-list-meta flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 text-xs text-[#a5a59f]", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "rudder-list-meta flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2 text-xs text-[color:var(--mova-ai-ink-secondary,#666)]", children: [
       display.includes("Priority") ? /* @__PURE__ */ jsxs11("span", { title: `${issue.priority} priority`, children: [
         /* @__PURE__ */ jsxs11("span", { className: "sr-only", children: [
           issue.priority,
@@ -3643,8 +3297,8 @@ function IssueListRow({ issue }) {
         ] }),
         /* @__PURE__ */ jsx11(PriorityIcon, { priority: issue.priority })
       ] }) : null,
-      display.includes("Labels") ? issue.labels.map((label) => /* @__PURE__ */ jsxs11("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-white/10 px-2 py-0.5", children: [
-        /* @__PURE__ */ jsx11("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-violet-400" }),
+      display.includes("Labels") ? issue.labels.map((label) => /* @__PURE__ */ jsxs11("span", { className: "inline-flex max-w-full items-center gap-1.5 rounded-full border border-[var(--mova-ai-border,#dedede)] px-2 py-0.5", children: [
+        /* @__PURE__ */ jsx11("span", { className: "h-1.5 w-1.5 shrink-0 rounded-full bg-[var(--mova-ai-neutral-status,#69737d)]" }),
         /* @__PURE__ */ jsx11("span", { className: "break-words", children: label })
       ] }, label)) : null,
       display.includes("Assignee") ? /* @__PURE__ */ jsxs11("span", { className: "inline-flex min-w-0 items-center gap-1.5", children: [
@@ -3668,18 +3322,18 @@ function IssueCardBody({ issue }) {
   const display = useContext(DisplayContext);
   return /* @__PURE__ */ jsxs11("div", { className: "min-w-0", children: [
     /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 items-start gap-2", children: [
-      /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 font-mono text-xs text-[#8b8b8b]", children: display.includes("Identifier") ? issue.id : "" }),
-      display.includes("Assignee") ? /* @__PURE__ */ jsxs11("span", { className: "inline-flex min-w-0 max-w-[8.5rem] shrink items-center gap-1 overflow-hidden text-xs text-[#a1a1aa]", children: [
+      /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 font-mono text-xs text-[color:var(--mova-ai-ink-muted,#858585)]", children: display.includes("Identifier") ? issue.id : "" }),
+      display.includes("Assignee") ? /* @__PURE__ */ jsxs11("span", { className: "inline-flex min-w-0 max-w-[8.5rem] shrink items-center gap-1 overflow-hidden text-xs text-[color:var(--mova-ai-ink-secondary,#666)]", children: [
         /* @__PURE__ */ jsx11(MemberAvatar, { name: issue.assignee }),
         /* @__PURE__ */ jsx11("span", { className: "truncate", children: issue.assignee })
       ] }) : null
     ] }),
-    /* @__PURE__ */ jsx11("p", { className: "mt-2 break-words text-sm leading-snug text-[#ececea]", children: issue.title }),
-    display.includes("Priority") ? /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex min-w-0 items-center gap-1.5 overflow-hidden text-xs text-[#8b8b8b]", children: [
+    /* @__PURE__ */ jsx11("p", { className: "mt-2 break-words text-sm leading-snug text-[color:var(--mova-ai-ink,#202020)]", children: issue.title }),
+    display.includes("Priority") ? /* @__PURE__ */ jsxs11("div", { className: "mt-2 flex min-w-0 items-center gap-1.5 overflow-hidden text-xs text-[color:var(--mova-ai-ink-muted,#858585)]", children: [
       /* @__PURE__ */ jsx11(PriorityIcon, { priority: issue.priority }),
       /* @__PURE__ */ jsx11("span", { className: "capitalize", children: issue.priority })
     ] }) : null,
-    /* @__PURE__ */ jsxs11("div", { className: "mt-2 space-y-1.5 border-t border-white/[0.07] pt-2 text-xs text-[#818181]", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "mt-2 space-y-1.5 border-t border-[var(--mova-ai-border-soft,#ededed)] pt-2 text-xs text-[color:var(--mova-ai-ink-muted,#858585)]", children: [
       display.includes("Project") ? /* @__PURE__ */ jsxs11("div", { className: "grid min-w-0 grid-cols-[4.5rem_minmax(0,1fr)] items-center gap-2", children: [
         /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1.5", children: [
           /* @__PURE__ */ jsx11(FolderKanban, { className: "h-3 w-3" }),
@@ -3699,8 +3353,8 @@ function IssueCardBody({ issue }) {
           /* @__PURE__ */ jsx11(Tags, { className: "h-3 w-3" }),
           "Labels"
         ] }),
-        /* @__PURE__ */ jsx11("span", { className: "truncate text-right", children: /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1 rounded-full border border-white/[0.08] px-1.5 py-0.5 text-[10px]", children: [
-          /* @__PURE__ */ jsx11("span", { className: "h-1.5 w-1.5 rounded-full bg-violet-500" }),
+        /* @__PURE__ */ jsx11("span", { className: "truncate text-right", children: /* @__PURE__ */ jsxs11("span", { className: "inline-flex items-center gap-1 rounded-full border border-[var(--mova-ai-border,#dedede)] px-1.5 py-0.5 text-[10px]", children: [
+          /* @__PURE__ */ jsx11("span", { className: "h-1.5 w-1.5 rounded-full bg-[var(--mova-ai-neutral-status,#69737d)]" }),
           issue.labels[0] ?? "None"
         ] }) })
       ] }) : null,
@@ -3727,7 +3381,7 @@ function SortableIssueCard({ issue }) {
       style: { transform: CSS.Transform.toString(transform), transition: transition2 },
       ...attributes,
       ...listeners,
-      className: `motion-kanban-card cursor-grab touch-pan-x overflow-hidden rounded-[9px] border border-white/[0.09] bg-[#242423] p-2.5 outline-none transition-[box-shadow,opacity,border-color] motion-reduce:transition-none focus-visible:border-white/30 focus-visible:ring-2 focus-visible:ring-white/20 active:cursor-grabbing ${isDragging ? "opacity-25" : "hover:border-white/[0.16] hover:shadow-sm"}`,
+      className: `motion-kanban-card cursor-grab touch-pan-x overflow-hidden rounded-[9px] border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2.5 outline-none transition-[box-shadow,opacity,border-color] motion-reduce:transition-none focus-visible:border-[var(--mova-ai-border-strong,#c8c8c8)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)] active:cursor-grabbing ${isDragging ? "opacity-25" : "hover:border-[var(--mova-ai-border-strong,#c8c8c8)] hover:shadow-sm"}`,
       "data-dragging": isDragging ? "true" : "false",
       "data-issue-id": issue.id,
       "data-testid": `kanban-card-${issue.id}`,
@@ -3741,9 +3395,9 @@ function BoardColumn({ issues, status, onCreate }) {
   return /* @__PURE__ */ jsxs11("div", { className: "flex min-h-0 w-[260px] min-w-[260px] shrink-0 flex-col", children: [
     /* @__PURE__ */ jsxs11("div", { className: "mb-1 flex items-center gap-2 px-2 py-2", children: [
       /* @__PURE__ */ jsx11(StatusIcon, { status }),
-      /* @__PURE__ */ jsx11("span", { className: "text-xs font-semibold uppercase tracking-wide text-[#a1a1a1]", children: meta.label }),
-      /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs tabular-nums text-[#686868]", children: issues.length }),
-      /* @__PURE__ */ jsx11("button", { type: "button", onClick: (event) => onCreate(status, event.currentTarget), "aria-label": `Create issue in ${meta.label}`, className: "rounded p-1 hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/40", children: /* @__PURE__ */ jsx11(Plus, { className: "h-3.5 w-3.5 text-[#8b8b8b]", "aria-hidden": "true" }) })
+      /* @__PURE__ */ jsx11("span", { className: "text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-secondary,#666)]", children: meta.label }),
+      /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]", children: issues.length }),
+      /* @__PURE__ */ jsx11("button", { type: "button", onClick: (event) => onCreate(status, event.currentTarget), "aria-label": `Create issue in ${meta.label}`, className: "rounded p-1 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)]", children: /* @__PURE__ */ jsx11(Plus, { className: "h-3.5 w-3.5 text-[color:var(--mova-ai-ink-muted,#858585)]", "aria-hidden": "true" }) })
     ] }),
     /* @__PURE__ */ jsx11(
       "div",
@@ -3762,9 +3416,9 @@ function HiddenStatus({ status, onCreate }) {
   const meta = STATUS_META[status];
   return /* @__PURE__ */ jsxs11("div", { ref: setNodeRef, className: `motion-kanban-lane flex items-center gap-2 rounded-[9px] border px-2 py-2 transition-colors motion-reduce:transition-none ${isOver ? meta.laneOver : meta.lane}`, "data-over": isOver ? "true" : "false", "data-testid": `kanban-hidden-column-${status}`, children: [
     /* @__PURE__ */ jsx11(StatusIcon, { status }),
-    /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-[#a1a1a1]", children: meta.label }),
-    /* @__PURE__ */ jsx11("span", { className: "text-xs tabular-nums text-[#686868]", children: "0" }),
-    /* @__PURE__ */ jsx11("button", { type: "button", onClick: (event) => onCreate(status, event.currentTarget), "aria-label": `Create issue in ${meta.label}`, className: "rounded p-1 hover:bg-white/10 focus-visible:ring-2 focus-visible:ring-white/40", children: /* @__PURE__ */ jsx11(Plus, { className: "h-3.5 w-3.5 text-[#8b8b8b]", "aria-hidden": "true" }) })
+    /* @__PURE__ */ jsx11("span", { className: "min-w-0 flex-1 text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-secondary,#666)]", children: meta.label }),
+    /* @__PURE__ */ jsx11("span", { className: "text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]", children: "0" }),
+    /* @__PURE__ */ jsx11("button", { type: "button", onClick: (event) => onCreate(status, event.currentTarget), "aria-label": `Create issue in ${meta.label}`, className: "rounded p-1 hover:bg-[var(--mova-ai-hover-strong,#e9e9e9)] focus-visible:ring-2 focus-visible:ring-[var(--mova-ai-border-strong,#c8c8c8)]", children: /* @__PURE__ */ jsx11(Plus, { className: "h-3.5 w-3.5 text-[color:var(--mova-ai-ink-muted,#858585)]", "aria-hidden": "true" }) })
   ] });
 }
 function ToolbarPopover({ label, icon, children, triggerRef }) {
@@ -3773,8 +3427,8 @@ function ToolbarPopover({ label, icon, children, triggerRef }) {
   const root = useRef6(null);
   const trigger = useRef6(null);
   const panel = useRef6(null);
-  const id = useId3();
-  useLayoutEffect3(() => {
+  const id = useId4();
+  useLayoutEffect4(() => {
     if (!open) return;
     const container = root.current;
     const popup = panel.current;
@@ -3827,12 +3481,12 @@ function ToolbarPopover({ label, icon, children, triggerRef }) {
     /* @__PURE__ */ jsxs11("button", { ref: (node) => {
       trigger.current = node;
       if (triggerRef) triggerRef.current = node;
-    }, type: "button", "aria-label": label === "Sort" ? "Sort issues" : label === "Filter" ? "Filter issues by status" : "Display fields", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), className: `flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-white/5 ${open ? "bg-white/10 text-white" : ""}`, children: [
+    }, type: "button", "aria-label": label === "Sort" ? "Sort issues" : label === "Filter" ? "Filter issues by status" : "Display fields", "aria-expanded": open, "aria-controls": id, onClick: () => setOpen((value) => !value), className: `flex items-center gap-1.5 rounded-md px-2 py-1.5 transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${open ? "bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]" : ""}`, children: [
       icon,
       label,
       /* @__PURE__ */ jsx11(ChevronDown, { className: "h-3 w-3" })
     ] }),
-    /* @__PURE__ */ jsx11(AnimatePresence5, { initial: false, children: open ? /* @__PURE__ */ jsx11(motion6.div, { ref: panel, id, role: "group", "aria-label": `${label} options`, initial: { opacity: 0, y: reducedMotion ? 0 : -4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: reducedMotion ? 0 : -3 }, transition: { duration: reducedMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] }, className: "absolute right-0 z-30 mt-2 w-48 space-y-1 rounded-lg border border-white/10 bg-[#2c2c29] p-2 text-xs shadow-xl", children }, "panel") : null })
+    /* @__PURE__ */ jsx11(AnimatePresence5, { initial: false, children: open ? /* @__PURE__ */ jsx11(motion6.div, { ref: panel, id, role: "group", "aria-label": `${label} options`, initial: { opacity: 0, y: reducedMotion ? 0 : -4 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: reducedMotion ? 0 : -3 }, transition: { duration: reducedMotion ? 0 : 0.16, ease: [0.22, 1, 0.36, 1] }, className: "absolute right-0 z-30 mt-2 w-48 space-y-1 rounded-lg border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-surface,#fff)] p-2 text-xs shadow-xl", children }, "panel") : null })
   ] });
 }
 function resolveTargetStatus(overId, issues) {
@@ -3841,7 +3495,7 @@ function resolveTargetStatus(overId, issues) {
 }
 function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFAULT_ISSUES, onIssuesChange }) {
   const rootRef = useRef6(null);
-  const sortGroupId = useId3();
+  const sortGroupId = useId4();
   const keyboardTargetRef = useRef6(null);
   const [issues, setIssues] = useState12(() => [...initialIssues]);
   const [statusFilter, setStatusFilter] = useState12("all");
@@ -3993,9 +3647,11 @@ function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFA
       setAnnouncement(`${movingIssue.id} stayed in ${STATUS_META[targetStatus].label}.`);
     }
   };
-  return /* @__PURE__ */ jsxs11("section", { ref: rootRef, "data-theme": theme, className: `rudder-board w-full min-w-0 min-h-[620px] bg-[#22221f] text-[#ececea] ${className}`, "aria-label": "Rudder issue board", children: [
-    /* @__PURE__ */ jsx11("style", { children: `
-        [aria-label="Rudder issue board"] :is(button,input,select,summary):focus-visible { outline: 2px solid #b5d4a7; outline-offset: 2px; }
+  return /* @__PURE__ */ jsxs11("section", { ref: rootRef, "data-theme": theme, className: `mova-ai-theme rudder-board w-full min-w-0 min-h-[620px] bg-[var(--mova-ai-canvas,#202020)] text-[color:var(--mova-ai-ink,#eeeeee)] ${className}`, "aria-label": "Rudder issue board", children: [
+    /* @__PURE__ */ jsxs11("style", { children: [
+      AI_THEME_STYLES10,
+      `
+        .rudder-board :is(button,input,select,summary):focus-visible { outline: 2px solid var(--mova-ai-accent,#c2c2c2); outline-offset: 2px; }
         .rudder-board { container-type: inline-size; }
         .rudder-list-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 40%); align-items: start; gap: 16px; }
         .rudder-list-meta { justify-content: flex-end; padding-top: 2px; }
@@ -4003,15 +3659,6 @@ function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFA
           .rudder-list-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
           .rudder-list-meta { justify-content: flex-start; padding-left: 26px; }
         }
-        .rudder-board[data-theme="light"] { background: #f7f7f5; color: #252523; }
-        .rudder-board[data-theme="light"] [class*="border-white"] { border-color: #deded9; }
-        .rudder-board[data-theme="light"] [class*="text-[#ececea]"],
-        .rudder-board[data-theme="light"] [class*="text-white"] { color: #252523; }
-        .rudder-board[data-theme="light"] :is([class*="text-[#a"], [class*="text-[#8"]) { color: #64645e; }
-        .rudder-board[data-theme="light"] :is([class*="bg-[#242423]"], [class*="bg-[#2c2c29]"], [class*="bg-[#22221f]"]) { background-color: #fff; }
-        .rudder-board[data-theme="light"] .motion-kanban-lane { background-color: #efefeb; }
-        .rudder-board[data-theme="light"] [data-over="true"] { background-color: #e1e9de; }
-        .rudder-board[data-theme="light"] [aria-pressed="true"] { background-color: #e6e6e0; color: #252523; }
         @media (prefers-reduced-motion: reduce) {
           .motion-kanban-card,
           .motion-kanban-lane {
@@ -4019,36 +3666,37 @@ function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFA
             transition: none !important;
           }
         }
-      ` }),
+      `
+    ] }),
     /* @__PURE__ */ jsx11("p", { className: "sr-only", "aria-live": "assertive", children: announcement }),
-    /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2 border-b border-white/10 px-4 py-3 text-xs text-[#a5a59f]", children: [
-      /* @__PURE__ */ jsx11("h2", { className: "mr-auto text-xs font-medium uppercase tracking-[0.16em] text-[#a5a59f]", children: "Issues" }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] px-4 py-3 text-xs text-[color:var(--mova-ai-ink-secondary,#666)]", children: [
+      /* @__PURE__ */ jsx11("h2", { className: "mr-auto text-xs font-medium uppercase tracking-[0.16em] text-[color:var(--mova-ai-ink-secondary,#666)]", children: "Issues" }),
       /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center justify-end gap-1", children: [
-        /* @__PURE__ */ jsxs11("button", { type: "button", "aria-label": "Show working issues", "aria-pressed": statusFilter === "in_progress", onClick: () => setStatusFilter((value) => value === "in_progress" ? "all" : "in_progress"), className: `mr-1 rounded-md border border-white/10 px-2.5 py-1.5 tabular-nums transition-colors hover:bg-white/5 ${statusFilter === "in_progress" ? "bg-white/10 text-white" : ""}`, children: [
+        /* @__PURE__ */ jsxs11("button", { type: "button", "aria-label": "Show working issues", "aria-pressed": statusFilter === "in_progress", onClick: () => setStatusFilter((value) => value === "in_progress" ? "all" : "in_progress"), className: `mr-1 rounded-md border border-[var(--mova-ai-border,#dedede)] px-2.5 py-1.5 tabular-nums transition-colors hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${statusFilter === "in_progress" ? "bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]" : ""}`, children: [
           issues.filter((issue) => issue.status === "in_progress").length,
           " working"
         ] }),
-        /* @__PURE__ */ jsxs11("div", { className: "mr-1 flex rounded-md border border-white/10 p-0.5", children: [
-          /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "List view", "aria-pressed": view === "list", onClick: () => setView("list"), className: `rounded p-1 transition-colors ${view === "list" ? "bg-white/10 text-white" : ""}`, children: /* @__PURE__ */ jsx11(List, { className: "h-3.5 w-3.5" }) }),
-          /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Board view", "aria-pressed": view === "board", onClick: () => setView("board"), className: `rounded p-1 transition-colors ${view === "board" ? "bg-white/10 text-white" : ""}`, children: /* @__PURE__ */ jsx11(Columns3, { className: "h-3.5 w-3.5" }) })
+        /* @__PURE__ */ jsxs11("div", { className: "mr-1 flex rounded-md border border-[var(--mova-ai-border,#dedede)] p-0.5", children: [
+          /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "List view", "aria-pressed": view === "list", onClick: () => setView("list"), className: `rounded p-1 transition-colors ${view === "list" ? "bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]" : ""}`, children: /* @__PURE__ */ jsx11(List, { className: "h-3.5 w-3.5" }) }),
+          /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": "Board view", "aria-pressed": view === "board", onClick: () => setView("board"), className: `rounded p-1 transition-colors ${view === "board" ? "bg-[var(--mova-ai-hover-strong,#e9e9e9)] text-[color:var(--mova-ai-ink,#202020)]" : ""}`, children: /* @__PURE__ */ jsx11(Columns3, { className: "h-3.5 w-3.5" }) })
         ] }),
-        /* @__PURE__ */ jsx11(ToolbarPopover, { label: "Filter", triggerRef: statusFilterRef, icon: /* @__PURE__ */ jsx11(Filter, { className: "h-3 w-3" }), children: /* @__PURE__ */ jsx11("div", { role: "radiogroup", "aria-label": "Issue status", children: ["all", ...BOARD_STATUSES].map((status) => /* @__PURE__ */ jsxs11("label", { className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5", children: [
-          /* @__PURE__ */ jsx11("input", { type: "radio", className: "accent-[#28cda0]", name: `${sortGroupId}-status`, checked: statusFilter === status, onChange: () => setStatusFilter(status) }),
+        /* @__PURE__ */ jsx11(ToolbarPopover, { label: "Filter", triggerRef: statusFilterRef, icon: /* @__PURE__ */ jsx11(Filter, { className: "h-3 w-3" }), children: /* @__PURE__ */ jsx11("div", { role: "radiogroup", "aria-label": "Issue status", children: ["all", ...BOARD_STATUSES].map((status) => /* @__PURE__ */ jsxs11("label", { className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)]", children: [
+          /* @__PURE__ */ jsx11("input", { type: "radio", className: "accent-[var(--mova-ai-accent,#454545)]", name: `${sortGroupId}-status`, checked: statusFilter === status, onChange: () => setStatusFilter(status) }),
           status === "all" ? "All statuses" : STATUS_META[status].label
         ] }, status)) }) }),
         /* @__PURE__ */ jsxs11(ToolbarPopover, { label: "Sort", icon: /* @__PURE__ */ jsx11(ArrowUpDown, { className: "h-3 w-3" }), children: [
-          /* @__PURE__ */ jsx11("div", { role: "radiogroup", "aria-label": "Sort field", children: ["Manual", "Status", "Priority", "Title", "Created", "Updated"].map((value) => /* @__PURE__ */ jsxs11("label", { className: `flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5 ${sort === value ? "bg-white/5 text-white" : ""}`, children: [
-            /* @__PURE__ */ jsx11("input", { className: "accent-[#28cda0]", type: "radio", name: sortGroupId, checked: sort === value, onChange: () => setSort(value) }),
+          /* @__PURE__ */ jsx11("div", { role: "radiogroup", "aria-label": "Sort field", children: ["Manual", "Status", "Priority", "Title", "Created", "Updated"].map((value) => /* @__PURE__ */ jsxs11("label", { className: `flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)] ${sort === value ? "bg-[var(--mova-ai-hover,#f1f1f1)] text-[color:var(--mova-ai-ink,#202020)]" : ""}`, children: [
+            /* @__PURE__ */ jsx11("input", { className: "accent-[var(--mova-ai-accent,#454545)]", type: "radio", name: sortGroupId, checked: sort === value, onChange: () => setSort(value) }),
             value,
             sort === value ? /* @__PURE__ */ jsx11(Check, { className: "ml-auto h-3 w-3" }) : null
           ] }, value)) }),
-          /* @__PURE__ */ jsxs11("button", { type: "button", disabled: sort === "Manual", onClick: () => setDescending((value) => !value), "aria-label": "Toggle sort direction", className: "flex w-full items-center gap-2 border-t border-white/10 px-2 py-2 text-left disabled:opacity-40", children: [
+          /* @__PURE__ */ jsxs11("button", { type: "button", disabled: sort === "Manual", onClick: () => setDescending((value) => !value), "aria-label": "Toggle sort direction", className: "flex w-full items-center gap-2 border-t border-[var(--mova-ai-border,#dedede)] px-2 py-2 text-left disabled:opacity-40", children: [
             /* @__PURE__ */ jsx11(ArrowUpDown, { className: "h-3 w-3" }),
             descending ? "Descending" : "Ascending"
           ] })
         ] }),
-        /* @__PURE__ */ jsx11(ToolbarPopover, { label: "Display", icon: /* @__PURE__ */ jsx11(SlidersHorizontal, { className: "h-3 w-3" }), children: DISPLAY_FIELDS.map((field) => /* @__PURE__ */ jsxs11("label", { className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-white/5", children: [
-          /* @__PURE__ */ jsx11("input", { className: "accent-[#28cda0]", type: "checkbox", checked: display.includes(field), onChange: () => setDisplay((fields) => fields.includes(field) ? fields.filter((value) => value !== field) : [...fields, field]) }),
+        /* @__PURE__ */ jsx11(ToolbarPopover, { label: "Display", icon: /* @__PURE__ */ jsx11(SlidersHorizontal, { className: "h-3 w-3" }), children: DISPLAY_FIELDS.map((field) => /* @__PURE__ */ jsxs11("label", { className: "flex cursor-pointer items-center gap-2 rounded px-2 py-1.5 hover:bg-[var(--mova-ai-hover,#f1f1f1)]", children: [
+          /* @__PURE__ */ jsx11("input", { className: "accent-[var(--mova-ai-accent,#454545)]", type: "checkbox", checked: display.includes(field), onChange: () => setDisplay((fields) => fields.includes(field) ? fields.filter((value) => value !== field) : [...fields, field]) }),
           field
         ] }, field)) })
       ] })
@@ -4058,7 +3706,7 @@ function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFA
         event.preventDefault();
         closeCreate();
       }
-    }, className: "flex flex-wrap items-center gap-2 border-b border-white/10 bg-white/5 p-3", onSubmit: (event) => {
+    }, className: "flex flex-wrap items-center gap-2 border-b border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-hover,#f1f1f1)] p-3", onSubmit: (event) => {
       event.preventDefault();
       if (!draft.trim()) return;
       let sequence = issues.length + 1;
@@ -4070,15 +3718,15 @@ function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFA
       closeCreate();
       setAnnouncement("Issue created.");
     }, children: [
-      /* @__PURE__ */ jsx11("input", { ref: createInputRef, required: true, "aria-label": "New issue title", placeholder: "Issue title", value: draft, onChange: (event) => setDraft(event.target.value), className: "min-w-0 flex-1 rounded border border-white/10 bg-black/10 px-2 py-1.5 text-sm" }),
-      /* @__PURE__ */ jsx11("select", { "aria-label": "New issue status", value: creating, onChange: (event) => setCreating(event.target.value), className: "rounded bg-[#22221f] p-1 text-xs", children: BOARD_STATUSES.map((status) => /* @__PURE__ */ jsx11("option", { value: status, children: STATUS_META[status].label }, status)) }),
-      /* @__PURE__ */ jsx11("button", { type: "submit", className: "rounded bg-[#28cda0] px-3 py-1.5 text-xs text-[#102d23]", children: "Create" }),
+      /* @__PURE__ */ jsx11("input", { ref: createInputRef, required: true, "aria-label": "New issue title", placeholder: "Issue title", value: draft, onChange: (event) => setDraft(event.target.value), className: "min-w-0 flex-1 rounded border border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-field,#f6f6f6)] px-2 py-1.5 text-sm" }),
+      /* @__PURE__ */ jsx11("select", { "aria-label": "New issue status", value: creating, onChange: (event) => setCreating(event.target.value), className: "rounded bg-[var(--mova-ai-canvas,#f4f4f4)] p-1 text-xs", children: BOARD_STATUSES.map((status) => /* @__PURE__ */ jsx11("option", { value: status, children: STATUS_META[status].label }, status)) }),
+      /* @__PURE__ */ jsx11("button", { type: "submit", className: "rounded bg-[var(--mova-ai-accent,#454545)] px-3 py-1.5 text-xs text-[color:var(--mova-ai-accent-foreground,#fff)]", children: "Create" }),
       /* @__PURE__ */ jsx11("button", { type: "button", onClick: closeCreate, className: "px-2 text-xs", children: "Cancel" })
     ] }) : null,
     /* @__PURE__ */ jsx11(DisplayContext.Provider, { value: display, children: /* @__PURE__ */ jsx11(AnimatePresence5, { mode: "wait", initial: false, children: /* @__PURE__ */ jsx11(motion6.div, { initial: { opacity: 0, y: reduceMotion ? 0 : 5 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: reduceMotion ? 0 : -3 }, transition: { duration: reduceMotion ? 0 : 0.15, ease: [0.22, 1, 0.36, 1] }, children: view === "list" ? /* @__PURE__ */ jsxs11("div", { className: "max-h-[580px] overflow-y-auto", children: [
       filtered.map((issue) => /* @__PURE__ */ jsx11(IssueListRow, { issue }, issue.id)),
-      filtered.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "py-10 text-center text-sm text-[#a5a59f]", children: "No issues match this filter." }) : null,
-      /* @__PURE__ */ jsxs11("button", { ref: listCreateRef, type: "button", onClick: (event) => openCreate(statusFilter === "all" ? "backlog" : statusFilter, event.currentTarget), className: "flex items-center gap-2 px-4 py-3 text-xs text-[#a5a59f] transition-colors hover:text-[#ececea]", children: [
+      filtered.length === 0 ? /* @__PURE__ */ jsx11("p", { className: "py-10 text-center text-sm text-[color:var(--mova-ai-ink-secondary,#666)]", children: "No issues match this filter." }) : null,
+      /* @__PURE__ */ jsxs11("button", { ref: listCreateRef, type: "button", onClick: (event) => openCreate(statusFilter === "all" ? "backlog" : statusFilter, event.currentTarget), className: "flex items-center gap-2 px-4 py-3 text-xs text-[color:var(--mova-ai-ink-secondary,#666)] transition-colors hover:text-[color:var(--mova-ai-ink,#202020)]", children: [
         /* @__PURE__ */ jsx11(Plus, { className: "h-3.5 w-3.5" }),
         "Add issue"
       ] })
@@ -4095,15 +3743,15 @@ function RudderIssueBoard({ theme = "dark", className = "", initialIssues = DEFA
         children: [
           /* @__PURE__ */ jsx11("div", { className: "overflow-x-auto overscroll-x-contain p-3 sm:p-4", children: /* @__PURE__ */ jsxs11("div", { className: "flex min-h-[520px] min-w-max items-stretch gap-3", children: [
             visibleStatuses.map((status) => /* @__PURE__ */ jsx11(Fragment4, { children: /* @__PURE__ */ jsx11(BoardColumn, { issues: grouped[status], status, onCreate: openCreate }) }, status)),
-            hiddenStatuses.length > 0 ? /* @__PURE__ */ jsxs11("div", { className: `motion-kanban-lane flex min-h-0 w-[228px] min-w-[228px] shrink-0 flex-col rounded-[10px] border p-2 transition-colors motion-reduce:transition-none ${overStatus && hiddenStatuses.includes(overStatus) ? "border-white/20 bg-white/[0.055]" : "border-white/[0.09] bg-white/[0.025]"}`, "data-testid": "kanban-hidden-columns", children: [
+            hiddenStatuses.length > 0 ? /* @__PURE__ */ jsxs11("div", { className: `motion-kanban-lane flex min-h-0 w-[228px] min-w-[228px] shrink-0 flex-col rounded-[10px] border p-2 transition-colors motion-reduce:transition-none ${overStatus && hiddenStatuses.includes(overStatus) ? "border-[var(--mova-ai-border-strong,#c8c8c8)] bg-[var(--mova-ai-hover,#f1f1f1)]" : "border-[var(--mova-ai-border,#dedede)] bg-[var(--mova-ai-canvas,#f4f4f4)]"}`, "data-testid": "kanban-hidden-columns", children: [
               /* @__PURE__ */ jsxs11("div", { className: "mb-2 flex items-center gap-2 px-1", children: [
-                /* @__PURE__ */ jsx11("span", { className: "text-xs font-semibold uppercase tracking-wide text-[#8b8b8b]", children: "Hidden columns" }),
-                /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs tabular-nums text-[#5f5f5f]", children: hiddenStatuses.length })
+                /* @__PURE__ */ jsx11("span", { className: "text-xs font-semibold uppercase tracking-wide text-[color:var(--mova-ai-ink-muted,#858585)]", children: "Hidden columns" }),
+                /* @__PURE__ */ jsx11("span", { className: "ml-auto text-xs tabular-nums text-[color:var(--mova-ai-ink-muted,#858585)]", children: hiddenStatuses.length })
               ] }),
               /* @__PURE__ */ jsx11("div", { className: "space-y-2", children: hiddenStatuses.map((status) => /* @__PURE__ */ jsx11(Fragment4, { children: /* @__PURE__ */ jsx11(HiddenStatus, { status, onCreate: openCreate }) }, status)) })
             ] }) : null
           ] }) }),
-          /* @__PURE__ */ jsx11(DragOverlay, { dropAnimation: reduceMotion ? null : { duration: 180, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }, children: activeIssue ? /* @__PURE__ */ jsx11("article", { className: "w-[247px] rotate-[0.4deg] scale-[1.015] overflow-hidden rounded-[9px] border border-white/20 bg-[#242423] p-2.5 shadow-[0_18px_48px_rgba(0,0,0,.48)]", children: /* @__PURE__ */ jsx11(IssueCardBody, { issue: activeIssue }) }) : null })
+          /* @__PURE__ */ jsx11(DragOverlay, { dropAnimation: reduceMotion ? null : { duration: 180, easing: "cubic-bezier(0.22, 1, 0.36, 1)" }, children: activeIssue ? /* @__PURE__ */ jsx11("article", { className: "w-[247px] rotate-[0.4deg] scale-[1.015] overflow-hidden rounded-[9px] border border-[var(--mova-ai-border-strong,#c8c8c8)] bg-[var(--mova-ai-surface,#fff)] p-2.5 shadow-[0_18px_48px_rgba(0,0,0,.48)]", children: /* @__PURE__ */ jsx11(IssueCardBody, { issue: activeIssue }) }) : null })
         ]
       }
     ) }, view) }) })
@@ -4113,7 +3761,7 @@ var rudder_issue_board_default = RudderIssueBoard;
 
 // .generated/ui/animated-sidebar.tsx
 import { Activity, Bookmark, ChevronDown as ChevronDown2, LayoutGrid } from "lucide-react";
-import { useId as useId4, useState as useState13 } from "react";
+import { useId as useId5, useState as useState13 } from "react";
 import { Fragment as Fragment6, jsx as jsx12, jsxs as jsxs12 } from "react/jsx-runtime";
 var SIDEBAR_ITEMS = [
   { id: "send", label: "Work queue", meta: "Current cycle", icon: LayoutGrid },
@@ -4439,7 +4087,7 @@ function AnimatedSidebar({
 } = {}) {
   const [activeItem, setActiveItem] = useState13(initialActiveItem);
   const [isSectionOpen, setIsSectionOpen] = useState13(true);
-  const sectionId = `mova-sidebar-section-${useId4().replace(/:/g, "")}`;
+  const sectionId = `mova-sidebar-section-${useId5().replace(/:/g, "")}`;
   const rootClassName = ["mova-sidebar", className].filter(Boolean).join(" ");
   const selectItem = (id) => {
     setActiveItem(id);
@@ -8317,7 +7965,7 @@ function ExpandingIconTabs() {
 
 // .generated/ui/patterns/gooey-popover.tsx
 import gsap from "gsap";
-import { useCallback as useCallback3, useEffect as useEffect13, useId as useId5, useRef as useRef12, useState as useState23 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect13, useId as useId6, useRef as useRef12, useState as useState23 } from "react";
 import { jsx as jsx167, jsxs as jsxs77 } from "react/jsx-runtime";
 function cn2(...classes) {
   return classes.filter(Boolean).join(" ");
@@ -8358,7 +8006,7 @@ function GooeyPopover({
   contentClassName,
   className
 }) {
-  const filterId = useId5();
+  const filterId = useId6();
   const isControlled = controlledIsOpen !== void 0;
   const [internalIsOpen, setInternalIsOpen] = useState23(false);
   const isOpen = isControlled ? controlledIsOpen : internalIsOpen;