@toolr/ui-design 0.1.0 → 0.1.2

package/dist/index.js

@@ -16,17 +16,12 @@ var FORM_COLORS = {
 };
 
 // components/lib/theme-engine.ts
-var SCALE_KEYS = ["black", "950", "900", "800", "700", "600", "500", "400", "300", "200"];
-var DARK_THEMES = ["oled", "dark", "night", "soft"];
-var LIGHT_THEMES = ["bright", "paper", "muted"];
+var SCALE_KEYS = ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
+var DARK_THEMES = ["dark"];
+var LIGHT_THEMES = ["light"];
 var BASE_THEMES = {
-  oled: { label: "OLED", maxSat: 4, lightness: { black: 0, "950": 0, "900": 2, "800": 4, "700": 10, "600": 20, "500": 40, "400": 60, "300": 80, "200": 88 } },
-  dark: { label: "Dark", maxSat: 8, lightness: { black: 0, "950": 1.5, "900": 4, "800": 7, "700": 13, "600": 22, "500": 41, "400": 61, "300": 81, "200": 88 } },
-  night: { label: "Night", maxSat: 12, lightness: { black: 0, "950": 3, "900": 7, "800": 11, "700": 17, "600": 25, "500": 43, "400": 62, "300": 82, "200": 89 } },
-  soft: { label: "Soft", maxSat: 15, lightness: { black: 0, "950": 5, "900": 10, "800": 15, "700": 22, "600": 30, "500": 46, "400": 64, "300": 83, "200": 90 } },
-  bright: { label: "Bright", maxSat: 6, lightness: { black: 100, "950": 98, "900": 96, "800": 92, "700": 85, "600": 68, "500": 52, "400": 40, "300": 24, "200": 14 } },
-  paper: { label: "Paper", maxSat: 10, lightness: { black: 98, "950": 96, "900": 93, "800": 88, "700": 82, "600": 65, "500": 50, "400": 38, "300": 22, "200": 12 } },
-  muted: { label: "Muted", maxSat: 14, lightness: { black: 95, "950": 93, "900": 89, "800": 84, "700": 78, "600": 62, "500": 48, "400": 36, "300": 20, "200": 10 } }
+  dark: { label: "Dark", maxSat: 22, lightness: { black: 0, "950": 5, "900": 10, "850": 12, "800": 15, "750": 18, "700": 22, "600": 30, "500": 46, "400": 64, "300": 83, "200": 90 } },
+  light: { label: "Light", maxSat: 15, lightness: { black: 98, "950": 96, "900": 93, "850": 91, "800": 88, "750": 85, "700": 82, "600": 65, "500": 50, "400": 38, "300": 22, "200": 12 } }
 };
 var ACCENT_DEFS = [
   { id: "blue", hue: 220, dotColor: "#3b82f6" },
@@ -44,7 +39,7 @@ var ACCENT_DEFS = [
   { id: "neutral", hue: null, dotColor: "#737373" }
 ];
 function satCurve(l) {
-  return Math.min(l / 15, 1) * Math.max(0, 1 - l / 110);
+  return Math.min(l / 10, 1) * Math.max(0, 1 - l / 115);
 }
 function hslToHex(h, s, l) {
   const a = s / 100 * Math.min(l / 100, 1 - l / 100);
@@ -55,11 +50,27 @@ function hslToHex(h, s, l) {
   };
   return `#${f(0)}${f(8)}${f(4)}`;
 }
-function generateScale(theme, hue, maxSat) {
+function alphaToHex(alpha) {
+  return Math.round(Math.min(alpha, 1) * 255).toString(16).padStart(2, "0");
+}
+var SURFACE_KEYS = ["950", "900", "850", "800", "750"];
+var DEFAULT_DIMS = { "950": 1, "900": 2, "850": 3, "800": 4, "750": 5 };
+var DEFAULT_OUTLINE = 30;
+function generateScale(theme, hue, maxSat, dims = DEFAULT_DIMS, outline = DEFAULT_OUTLINE) {
   const lightness = BASE_THEMES[theme].lightness;
+  const glassBase = hue !== null ? hslToHex(hue, 80, 50) : null;
   const result = {};
   for (const key of SCALE_KEYS) {
     const l = lightness[key];
+    const dimVal = dims[key];
+    if (dimVal !== void 0 && dimVal > 0 && glassBase) {
+      result[key] = `${glassBase}${alphaToHex(dimVal / 100)}`;
+      continue;
+    }
+    if (key === "700" && outline > 0 && glassBase) {
+      result[key] = `${glassBase}${alphaToHex(outline / 100)}`;
+      continue;
+    }
     if (hue === null || maxSat === 0) {
       const g = Math.round(255 * l / 100).toString(16).padStart(2, "0");
       result[key] = `#${g}${g}${g}`;
@@ -72,8 +83,8 @@ function generateScale(theme, hue, maxSat) {
 function isLightTheme(themeId) {
   return LIGHT_THEMES.includes(themeId);
 }
-function applyTheme(themeId, accentHue, root = document.documentElement) {
-  const scale = generateScale(themeId, accentHue, BASE_THEMES[themeId].maxSat);
+function applyTheme(themeId, accentHue, dims = DEFAULT_DIMS, outline = DEFAULT_OUTLINE, root = document.documentElement) {
+  const scale = generateScale(themeId, accentHue, BASE_THEMES[themeId].maxSat, dims, outline);
   const light = isLightTheme(themeId);
   for (const key of SCALE_KEYS) {
     const prop = key === "black" ? "--color-black" : `--color-neutral-${key}`;
@@ -82,6 +93,10 @@ function applyTheme(themeId, accentHue, root = document.documentElement) {
   root.style.setProperty("--color-white", light ? "#0a0a0a" : "#ffffff");
   root.style.setProperty("--color-neutral-100", light ? "#1a1a1a" : "#f0f0f0");
   root.style.setProperty("--color-neutral-50", light ? "#0f0f0f" : "#fafafa");
+  const glassBase = accentHue !== null ? hslToHex(accentHue, 80, 50) : null;
+  if (glassBase) {
+    root.style.setProperty("--surface-hover", `${glassBase}${alphaToHex(10 / 100)}`);
+  }
 }
 
 // components/lib/toolr-brand.tsx
@@ -326,7 +341,7 @@ function clampToViewport(coords, tooltipRect) {
   }
   return { top, left };
 }
-var ARROW_BASE_CLASSES = "absolute w-3 h-3 bg-neutral-800 border-neutral-600 rotate-45";
+var ARROW_BASE_CLASSES = "absolute w-3 h-3 bg-[var(--popover)] border-neutral-600 rotate-45";
 function getAlignmentClass(align) {
   if (align === "start") return "left-2";
   if (align === "end") return "right-2";
@@ -422,7 +437,7 @@ function Tooltip({
     "div",
     {
       ref: tooltipRef,
-      className: `fixed px-3 py-1.5 bg-neutral-800 border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === "click" ? "" : "pointer-events-none"} ${multiline ? "whitespace-pre-line" : "whitespace-nowrap"}`,
+      className: `fixed px-3 py-1.5 bg-[var(--popover)] backdrop-blur border border-neutral-600 rounded-lg shadow-xl z-[9999] ${interactive || trigger === "click" ? "" : "pointer-events-none"} ${multiline ? "whitespace-pre-line" : "whitespace-nowrap"}`,
       style: {
         top: coords.top,
         left: coords.left,
@@ -759,6 +774,22 @@ var colorClasses2 = {
   violet: "border-violet-500/50 text-violet-400",
   pink: "border-pink-500/50 text-pink-400"
 };
+var progressFillColors = {
+  neutral: "bg-neutral-500/20",
+  green: "bg-green-500/20",
+  red: "bg-red-500/20",
+  blue: "bg-blue-500/20",
+  yellow: "bg-yellow-500/20",
+  orange: "bg-orange-500/20",
+  purple: "bg-purple-500/20",
+  amber: "bg-amber-500/20",
+  emerald: "bg-emerald-500/20",
+  cyan: "bg-cyan-500/20",
+  indigo: "bg-indigo-500/20",
+  teal: "bg-teal-500/20",
+  violet: "bg-violet-500/20",
+  pink: "bg-pink-500/20"
+};
 var sizeConfig = {
   xss: { height: 14, padding: "px-1", text: "text-[9px]", iconSize: "w-2 h-2", gap: "gap-0.5" },
   xs: { height: 16, padding: "px-1.5", text: "text-[10px]", iconSize: "w-2.5 h-2.5", gap: "gap-1" },
@@ -781,29 +812,39 @@ function Label({
   tooltip,
   size = "sm",
   textTransform,
+  progress,
   onClick,
   className = "",
   testId
 }) {
   const s = sizeConfig[size];
   const cssTransform = textTransform === "lowercase" || textTransform === "uppercase" ? textTransform : void 0;
+  const hasProgress = progress !== void 0 && progress >= 0;
   const baseClasses = [
     `inline-flex items-center ${s.gap}`,
     s.padding,
     s.text,
     "border rounded font-medium leading-none",
+    hasProgress ? "relative overflow-hidden" : "",
     colorClasses2[color],
     onClick ? "cursor-pointer hover:brightness-125 transition-all" : "cursor-help",
     className
   ].filter(Boolean).join(" ");
   const icons = CustomIcon ? [] : !icon ? [] : Array.isArray(icon) ? icon : [icon];
   const content = /* @__PURE__ */ jsxs5(Fragment3, { children: [
-    CustomIcon && /* @__PURE__ */ jsx5("span", { className: `${s.iconSize} flex-shrink-0`, children: /* @__PURE__ */ jsx5(CustomIcon, { className: s.iconSize }) }),
+    hasProgress && /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: `absolute inset-y-0 left-0 ${progressFillColors[color]} rounded-[inherit]`,
+        style: { width: `${Math.min(progress, 100)}%` }
+      }
+    ),
+    CustomIcon && /* @__PURE__ */ jsx5("span", { className: `${s.iconSize} flex-shrink-0 ${hasProgress ? "relative" : ""}`, children: /* @__PURE__ */ jsx5(CustomIcon, { className: s.iconSize }) }),
     icons.map((iconName, i) => {
       const Icon = iconMap[iconName];
-      return Icon ? /* @__PURE__ */ jsx5("span", { className: `${s.iconSize} flex-shrink-0`, children: /* @__PURE__ */ jsx5(Icon, { className: s.iconSize }) }, i) : null;
+      return Icon ? /* @__PURE__ */ jsx5("span", { className: `${s.iconSize} flex-shrink-0 ${hasProgress ? "relative" : ""}`, children: /* @__PURE__ */ jsx5(Icon, { className: s.iconSize }) }, i) : null;
     }),
-    /* @__PURE__ */ jsx5("span", { className: "min-w-0 truncate", style: cssTransform ? { textTransform: cssTransform } : void 0, children: transformText(text, textTransform) })
+    /* @__PURE__ */ jsx5("span", { className: `min-w-0 truncate ${hasProgress ? "relative" : ""}`, style: cssTransform ? { textTransform: cssTransform } : void 0, children: transformText(text, textTransform) })
   ] });
   const labelElement = onClick ? /* @__PURE__ */ jsx5(
     "button",
@@ -1485,14 +1526,21 @@ function ScopeBadge({ scope, size = "xs" }) {
 }
 
 // components/ui/segmented-toggle.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
-var BUTTON_SIZE_CLASSES = {
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
+var ICON_SIZE_CLASSES = {
   xss: "w-[18px] h-[18px]",
   xs: "w-6 h-6",
   sm: "w-7 h-7",
   md: "w-8 h-8",
   lg: "w-9 h-9"
 };
+var TEXT_SIZE_CLASSES = {
+  xss: "h-[18px] px-1.5 text-[9px]",
+  xs: "h-6 px-2 text-[10px]",
+  sm: "h-7 px-2.5 text-xs",
+  md: "h-8 px-3 text-xs",
+  lg: "h-9 px-3.5 text-sm"
+};
 var ROUNDING_CLASSES = {
   xss: "rounded-[3px]",
   xs: "rounded-[5px]",
@@ -1557,13 +1605,18 @@ function SegmentedToggle({
         const isFirst = i === 0;
         const isLast = i === options.length - 1;
         const rounding = isFirst && isLast ? ROUNDING_CLASSES[size] : isFirst ? `rounded-l-[5px]` : isLast ? `rounded-r-[5px]` : "";
-        return /* @__PURE__ */ jsx13(Tooltip, { content: option.tooltip, position: tooltipPosition, children: /* @__PURE__ */ jsx13(
+        const hasLabel = !!option.label;
+        const sizeClass = hasLabel ? TEXT_SIZE_CLASSES[size] : ICON_SIZE_CLASSES[size];
+        return /* @__PURE__ */ jsx13(Tooltip, { content: option.tooltip, position: tooltipPosition, children: /* @__PURE__ */ jsxs8(
           "button",
           {
             onClick: () => onChange(option.value),
             disabled,
-            className: `flex items-center justify-center ${BUTTON_SIZE_CLASSES[size]} ${rounding} text-xs font-medium transition-all cursor-pointer ${isActive ? ACTIVE_COLORS[accentColor] || ACTIVE_COLORS.blue : `text-neutral-400 ${HOVER_COLORS[accentColor] || HOVER_COLORS.blue}`}`,
-            children: option.icon
+            className: `flex items-center justify-center ${sizeClass} ${rounding} font-medium transition-all cursor-pointer ${isActive ? ACTIVE_COLORS[accentColor] || ACTIVE_COLORS.blue : `text-neutral-400 ${HOVER_COLORS[accentColor] || HOVER_COLORS.blue}`}`,
+            children: [
+              option.icon,
+              option.label
+            ]
           }
         ) }, option.value);
       })
@@ -1578,7 +1631,7 @@ function SegmentedToggle({
 // components/ui/resizable-textarea.tsx
 import { useCallback as useCallback2, useRef as useRef4, useState as useState4 } from "react";
 import Editor from "@monaco-editor/react";
-import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var variantClasses2 = {
   filled: "bg-neutral-800 border text-neutral-200 placeholder-neutral-500",
   outline: "bg-transparent border text-neutral-200 placeholder-neutral-500"
@@ -1589,7 +1642,7 @@ function isCodeMode(props) {
 function isChildrenVariant(props) {
   return "children" in props && props.children !== void 0;
 }
-var ResizeSvg = () => /* @__PURE__ */ jsxs8("svg", { className: "w-2.5 h-2.5 text-neutral-600 pointer-events-none", viewBox: "0 0 10 10", children: [
+var ResizeSvg = () => /* @__PURE__ */ jsxs9("svg", { className: "w-2.5 h-2.5 text-neutral-600 pointer-events-none", viewBox: "0 0 10 10", children: [
   /* @__PURE__ */ jsx14("line", { x1: "9", y1: "1", x2: "1", y2: "9", stroke: "currentColor", strokeWidth: "1" }),
   /* @__PURE__ */ jsx14("line", { x1: "9", y1: "4.5", x2: "4.5", y2: "9", stroke: "currentColor", strokeWidth: "1" })
 ] });
@@ -1650,7 +1703,7 @@ function ResizableCode({
   onHeightChange
 }) {
   const { height, onResizeStart } = useResize(minHeight, onHeightChange);
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `relative ${codeWrapperClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ""}`,
@@ -1692,8 +1745,8 @@ function ResizableCode({
                   inherit: true,
                   rules: [],
                   colors: {
-                    "editor.background": variant === "filled" ? "#1f2937" : "#00000000",
-                    "editorGutter.background": variant === "filled" ? "#1f2937" : "#00000000",
+                    "editor.background": variant === "filled" ? "#262626" : "#00000000",
+                    "editorGutter.background": variant === "filled" ? "#262626" : "#00000000",
                     "editor.lineHighlightBackground": "#00000000",
                     "editor.lineHighlightBorder": "#00000000"
                   }
@@ -1732,7 +1785,7 @@ function ResizableChildren({
   if (!resizable) {
     return /* @__PURE__ */ jsx14(Fragment4, { children });
   }
-  return /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       className: `relative ${childrenVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ""}`,
@@ -1782,7 +1835,7 @@ function ResizableField({
   if (!resizable) {
     return /* @__PURE__ */ jsx14("textarea", { ...props, className, style: { resize: "none", ...props.style } });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: `relative ${wrapperClassName ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: `relative ${wrapperClassName ?? ""}`, children: [
     /* @__PURE__ */ jsx14("textarea", { ref: taRef, ...props, className, style: { resize: "none", ...props.style } }),
     /* @__PURE__ */ jsx14(
       "div",
@@ -1816,10 +1869,10 @@ function useDropdownMaxHeight(isOpen, margin = 16) {
 }
 
 // components/ui/select.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var VARIANT_CLASSES2 = {
-  filled: { bg: "bg-neutral-800", hoverBg: "hover:bg-neutral-700", menuBg: "bg-neutral-800" },
-  outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-800", menuBg: "bg-neutral-800/90 backdrop-blur-sm" }
+  filled: { bg: "bg-neutral-800", hoverBg: "hover:bg-neutral-700", menuBg: "bg-[var(--popover)]" },
+  outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-700", menuBg: "bg-[var(--popover)]" }
 };
 var SIZE_CLASSES = {
   xss: "h-[18px] px-1.5 text-[10px]",
@@ -1897,8 +1950,8 @@ function Select({
       close();
     }
   };
-  return /* @__PURE__ */ jsxs9("div", { className: `inline-flex ${className}`, ref, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10("div", { className: `inline-flex ${className}`, ref, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs10(
       "button",
       {
         ref: buttonRef,
@@ -1918,7 +1971,7 @@ function Select({
         "div",
         {
           ref: menuRef,
-          className: `fixed z-[9999] whitespace-nowrap ${v.menuBg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`,
+          className: `fixed z-[9999] whitespace-nowrap ${v.menuBg} backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`,
           style: {
             top: menuPos.top,
             left: align === "right" ? void 0 : menuPos.left,
@@ -1928,7 +1981,7 @@ function Select({
           children: options.map((opt, idx) => {
             const isHighlighted = highlightIdx === idx;
             const isSelected = value === opt.value;
-            return /* @__PURE__ */ jsxs9(
+            return /* @__PURE__ */ jsxs10(
               "button",
               {
                 type: "button",
@@ -1979,11 +2032,11 @@ function useClickOutside(ref, isOpen, onClose) {
 }
 
 // components/ui/filter-dropdown.tsx
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var SEARCH_THRESHOLD = 20;
 var VARIANT_CLASSES3 = {
   filled: { bg: "bg-neutral-800", hoverBg: "hover:bg-neutral-700" },
-  outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-800" }
+  outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-700" }
 };
 function FilterDropdown({
   value,
@@ -2044,8 +2097,8 @@ function FilterDropdown({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs10("div", { className: "relative flex items-center", ref, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11("div", { className: "relative flex items-center", ref, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs11(
       "button",
       {
         onClick: () => setIsOpen(!isOpen),
@@ -2066,8 +2119,8 @@ function FilterDropdown({
         children: /* @__PURE__ */ jsx16(X3, { className: "w-3 h-3" })
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs10("div", { ref: menuRef, className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap ${v.bg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`, children: [
-      showSearch && /* @__PURE__ */ jsx16("div", { className: `sticky top-0 p-1.5 ${v.bg} border-b ${FORM_COLORS[color].border} z-10`, children: /* @__PURE__ */ jsxs10("div", { className: "relative", children: [
+    isOpen && /* @__PURE__ */ jsxs11("div", { ref: menuRef, className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] whitespace-nowrap bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`, children: [
+      showSearch && /* @__PURE__ */ jsx16("div", { className: `sticky top-0 p-1.5 bg-[var(--popover)] border-b ${FORM_COLORS[color].border} z-10`, children: /* @__PURE__ */ jsxs11("div", { className: "relative", children: [
         /* @__PURE__ */ jsx16(Search3, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" }),
         /* @__PURE__ */ jsx16(
           "input",
@@ -2078,11 +2131,11 @@ function FilterDropdown({
             onChange: (e) => setSearch(e.target.value),
             onKeyDown: handleKeyDown,
             placeholder: "Search...",
-            className: `w-full pl-6 pr-2 py-1 text-xs bg-neutral-800 border border-neutral-600 rounded text-neutral-200 placeholder-neutral-500 outline-none ${FORM_COLORS[color].focus}`
+            className: `w-full pl-6 pr-2 py-1 text-xs bg-[var(--popover)] border border-neutral-600 rounded text-neutral-200 placeholder-neutral-500 outline-none ${FORM_COLORS[color].focus}`
           }
         )
       ] }) }),
-      hasAllOption && /* @__PURE__ */ jsxs10(
+      hasAllOption && /* @__PURE__ */ jsxs11(
         "button",
         {
           "data-idx": 0,
@@ -2098,7 +2151,7 @@ function FilterDropdown({
         const idx = i + (hasAllOption ? 1 : 0);
         const isHighlighted = highlightIdx === idx;
         const isSelected = value === opt.value;
-        return /* @__PURE__ */ jsxs10(
+        return /* @__PURE__ */ jsxs11(
           "button",
           {
             "data-idx": idx,
@@ -2120,10 +2173,10 @@ function FilterDropdown({
 // components/ui/sort-dropdown.tsx
 import { useState as useState7, useRef as useRef8, useEffect as useEffect6 } from "react";
 import { ArrowUp as ArrowUp2, ArrowDown as ArrowDown2, ChevronDown as ChevronDown5, Check as Check6 } from "lucide-react";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var VARIANT_CLASSES4 = {
   filled: { bg: "bg-neutral-800", hoverBg: "hover:bg-neutral-700" },
-  outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-800" }
+  outline: { bg: "bg-transparent", hoverBg: "hover:bg-neutral-700" }
 };
 function SortDropdown({
   field,
@@ -2162,8 +2215,8 @@ function SortDropdown({
   };
   const current = fields.find((f) => f.value === field) ?? fields[0];
   const DirIcon = ascending ? ArrowUp2 : ArrowDown2;
-  return /* @__PURE__ */ jsxs11("div", { className: "relative flex items-center", ref, onKeyDown: handleKeyDown, children: [
-    /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12("div", { className: "relative flex items-center", ref, onKeyDown: handleKeyDown, children: [
+    /* @__PURE__ */ jsxs12(
       "button",
       {
         onClick: () => setIsOpen(!isOpen),
@@ -2186,7 +2239,7 @@ function SortDropdown({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx17("div", { ref: menuRef, className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] ${v.bg} border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`, children: fields.map((f, idx) => /* @__PURE__ */ jsxs11(
+    isOpen && /* @__PURE__ */ jsx17("div", { ref: menuRef, className: `absolute right-0 top-full z-50 mt-1 min-w-[140px] bg-[var(--popover)] backdrop-blur border ${FORM_COLORS[color].border} rounded-lg shadow-xl overflow-hidden`, children: fields.map((f, idx) => /* @__PURE__ */ jsxs12(
       "button",
       {
         onClick: () => {
@@ -2206,7 +2259,7 @@ function SortDropdown({
 }
 
 // components/ui/form-actions.tsx
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var PADDING_CLASSES = {
   compact: "pt-2",
   normal: "pt-2 border-t border-neutral-700",
@@ -2238,10 +2291,10 @@ function FormActions({
 }) {
   const showBorder = border ?? DEFAULT_BORDER[padding];
   const base = PADDING_CLASSES[padding];
-  const paddingClass = showBorder ? base : base.replace(/\s*border-t\s+border-\[#374151\]/g, "");
+  const paddingClass = showBorder ? base : base.replace(/\s*border-t\s+border-neutral-700/g, "");
   const hasLeft = onBack || statusText;
-  return /* @__PURE__ */ jsxs12("div", { className: `flex items-center ${hasLeft ? "justify-between" : "justify-end"} gap-2 ${paddingClass}`, children: [
-    hasLeft && /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs13("div", { className: `flex items-center ${hasLeft ? "justify-between" : "justify-end"} gap-2 ${paddingClass}`, children: [
+    hasLeft && /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
       onBack && /* @__PURE__ */ jsx18(
         IconButton,
         {
@@ -2253,7 +2306,7 @@ function FormActions({
       ),
       statusText && /* @__PURE__ */ jsx18("span", { className: "text-xs text-neutral-500", children: statusText })
     ] }),
-    /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-2", children: [
       onMinimize && /* @__PURE__ */ jsx18(
         IconButton,
         {
@@ -2300,7 +2353,7 @@ function FormActions({
 import { useEffect as useEffect7, useRef as useRef9, useState as useState8 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
 import { Info as Info2, AlertTriangle as AlertTriangle2, AlertCircle as AlertCircle2, Check as Check7 } from "lucide-react";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 var SIZE_CLASSES2 = {
   sm: "max-w-sm",
   md: "max-w-md",
@@ -2333,16 +2386,16 @@ function Modal({ isOpen, onClose, title, children, kind = "info", size = "md", h
   }, [isOpen]);
   if (!isOpen) return null;
   return createPortal3(
-    /* @__PURE__ */ jsxs13("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxs14("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
       /* @__PURE__ */ jsx19("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm", onClick: onClose }),
-      /* @__PURE__ */ jsxs13(
+      /* @__PURE__ */ jsxs14(
         "div",
         {
           ref: modalRef,
           "data-testid": testId,
           className: `relative bg-neutral-900 border border-neutral-700 rounded-xl shadow-2xl ${SIZE_CLASSES2[size]} w-full mx-4 overflow-hidden`,
           children: [
-            /* @__PURE__ */ jsxs13("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-neutral-800", children: [
+            /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-neutral-800", children: [
               KIND_ICON[kind],
               /* @__PURE__ */ jsx19("h3", { className: "text-lg font-semibold text-white flex-1", children: title }),
               headerActions?.map((a, i) => /* @__PURE__ */ jsx19(IconButton, { ...a }, i)),
@@ -2393,10 +2446,10 @@ function ConfirmModal({
       onClose();
     }
   };
-  return /* @__PURE__ */ jsxs13(Modal, { isOpen, onClose, title, kind, hideCloseButton: true, children: [
-    /* @__PURE__ */ jsxs13("div", { className: "text-neutral-300 mb-6", children: [
+  return /* @__PURE__ */ jsxs14(Modal, { isOpen, onClose, title, kind, hideCloseButton: true, children: [
+    /* @__PURE__ */ jsxs14("div", { className: "text-neutral-300 mb-6", children: [
       message,
-      warning && /* @__PURE__ */ jsxs13("div", { className: "mt-3 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg", children: [
+      warning && /* @__PURE__ */ jsxs14("div", { className: "mt-3 p-3 bg-amber-500/10 border border-amber-500/30 rounded-lg", children: [
         /* @__PURE__ */ jsx19("p", { className: "text-amber-300 text-sm font-medium", children: warning }),
         warningItems && warningItems.length > 0 && /* @__PURE__ */ jsx19("ul", { className: "mt-2 space-y-1", children: warningItems.map((item, i) => /* @__PURE__ */ jsx19("li", { className: "text-amber-300/80 text-sm ml-4 list-disc", children: item }, i)) })
       ] })
@@ -2424,7 +2477,7 @@ function AlertModal({
   message,
   kind = "info"
 }) {
-  return /* @__PURE__ */ jsxs13(Modal, { isOpen, onClose, title, kind, hideCloseButton: true, children: [
+  return /* @__PURE__ */ jsxs14(Modal, { isOpen, onClose, title, kind, hideCloseButton: true, children: [
     /* @__PURE__ */ jsx19("div", { className: "text-neutral-300 mb-6", children: message }),
     /* @__PURE__ */ jsx19(
       FormActions,
@@ -2563,7 +2616,7 @@ function cn(...inputs) {
 }
 
 // components/ui/selection-grid.tsx
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 var iconMap2 = {
   "check": Check8,
   "settings": Settings3,
@@ -2708,7 +2761,7 @@ function SelectionGrid({
 function GridCard({ item, selected, onClick }) {
   const color = resolveColor(item.color);
   const Icon = item.IconComponent || (item.icon ? iconMap2[item.icon] : void 0);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "button",
     {
       type: "button",
@@ -2737,7 +2790,7 @@ function GridCard({ item, selected, onClick }) {
 function ListCard({ item, selected, onClick }) {
   const color = resolveColor(item.color);
   const Icon = item.IconComponent || (item.icon ? iconMap2[item.icon] : void 0);
-  return /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsxs15(
     "button",
     {
       type: "button",
@@ -2757,7 +2810,7 @@ function ListCard({ item, selected, onClick }) {
             style: { color: item.disabled ? void 0 : item.color || "#9ca3af" }
           }
         ),
-        /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs15("div", { className: "min-w-0", children: [
           /* @__PURE__ */ jsx20("span", { className: "text-xs font-medium text-neutral-200 block", children: item.name }),
           item.description && /* @__PURE__ */ jsx20("span", { className: "text-xs text-neutral-500 block mt-0.5", children: item.description })
         ] })
@@ -2768,7 +2821,7 @@ function ListCard({ item, selected, onClick }) {
 
 // components/ui/execution-details-panel.tsx
 import { AlertTriangle as AlertTriangle3, Info as Info3 } from "lucide-react";
-import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
 function ExecutionDetailsPanel({
   details,
   allowDirectEdits,
@@ -2777,12 +2830,12 @@ function ExecutionDetailsPanel({
   className
 }) {
   const showToggle = onAllowDirectEditsChange !== void 0;
-  return /* @__PURE__ */ jsxs15("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs16("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx21(Info3, { className: "w-4 h-4 text-neutral-500" }),
       /* @__PURE__ */ jsx21("span", { className: "font-medium text-neutral-400 text-sm", children: "Execution Details" })
     ] }),
-    showToggle && /* @__PURE__ */ jsxs15(
+    showToggle && /* @__PURE__ */ jsxs16(
       "div",
       {
         className: "flex items-start gap-2 cursor-pointer",
@@ -2796,19 +2849,19 @@ function ExecutionDetailsPanel({
               className: "mt-0.5"
             }
           ) }),
-          /* @__PURE__ */ jsxs15("div", { children: [
+          /* @__PURE__ */ jsxs16("div", { children: [
             /* @__PURE__ */ jsx21("span", { className: "text-neutral-300 text-sm", children: "Allow direct file edits" }),
             /* @__PURE__ */ jsx21("p", { className: "text-neutral-500 text-xs mt-0.5", children: allowDirectEdits ? "AI will modify files directly. Changes saved immediately." : "Changes will be shown in editor for review." })
           ] })
         ]
       }
     ),
-    warningMessage && /* @__PURE__ */ jsx21("div", { className: "rounded border border-red-500/50 bg-red-500/10 p-2", children: /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-2", children: [
+    warningMessage && /* @__PURE__ */ jsx21("div", { className: "rounded border border-red-500/50 bg-red-500/10 p-2", children: /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-2", children: [
       /* @__PURE__ */ jsx21(AlertTriangle3, { className: "h-4 w-4 text-red-400 shrink-0 mt-0.5" }),
       /* @__PURE__ */ jsx21("p", { className: "text-red-300 text-xs", children: warningMessage })
     ] }) }),
-    details.length > 0 && /* @__PURE__ */ jsx21("div", { className: "space-y-2", children: details.map((row) => /* @__PURE__ */ jsxs15("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsxs15("span", { className: "text-neutral-500 text-xs w-24 shrink-0", children: [
+    details.length > 0 && /* @__PURE__ */ jsx21("div", { className: "space-y-2", children: details.map((row) => /* @__PURE__ */ jsxs16("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxs16("span", { className: "text-neutral-500 text-xs w-24 shrink-0", children: [
         row.label,
         ":"
       ] }),
@@ -2818,7 +2871,7 @@ function ExecutionDetailsPanel({
 }
 
 // components/ui/action-dialog.tsx
-import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var dialogIconMap = {
   "arrow-left": ArrowLeft2,
   "arrow-right": ArrowRight2,
@@ -2953,9 +3006,9 @@ function ActionDialog({
     }
   }
   return createPortal4(
-    /* @__PURE__ */ jsxs16("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
+    /* @__PURE__ */ jsxs17("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [
       /* @__PURE__ */ jsx22("div", { className: "absolute inset-0 bg-black/60 backdrop-blur-sm", onClick: onCancel }),
-      /* @__PURE__ */ jsxs16(
+      /* @__PURE__ */ jsxs17(
         "div",
         {
           className: cn(
@@ -2964,7 +3017,7 @@ function ActionDialog({
             className
           ),
           children: [
-            /* @__PURE__ */ jsxs16("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-neutral-700 flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs17("div", { className: "flex items-center gap-3 px-4 py-3 border-b border-neutral-700 flex-shrink-0", children: [
               Icon && /* @__PURE__ */ jsx22(
                 Icon,
                 {
@@ -2972,7 +3025,7 @@ function ActionDialog({
                   style: iconColor ? { color: iconColor } : void 0
                 }
               ),
-              /* @__PURE__ */ jsxs16("div", { className: "flex flex-col", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "flex flex-col", children: [
                 /* @__PURE__ */ jsx22("span", { className: "text-sm font-semibold text-neutral-200", children: title }),
                 subtitle && /* @__PURE__ */ jsx22("span", { className: "text-xs text-neutral-500", children: subtitle })
               ] }),
@@ -2988,8 +3041,8 @@ function ActionDialog({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxs16("div", { className: "px-4 py-4 overflow-y-auto flex-1 min-h-0 space-y-4", children: [
-              hasSelection && /* @__PURE__ */ jsxs16("div", { children: [
+            /* @__PURE__ */ jsxs17("div", { className: "px-4 py-4 overflow-y-auto flex-1 min-h-0 space-y-4", children: [
+              hasSelection && /* @__PURE__ */ jsxs17("div", { children: [
                 selectionLabel && /* @__PURE__ */ jsx22("div", { className: "text-xs text-neutral-500 mb-2", children: selectionLabel }),
                 /* @__PURE__ */ jsx22(
                   SelectionGrid,
@@ -3004,8 +3057,8 @@ function ActionDialog({
                   }
                 )
               ] }),
-              hasScenarios && /* @__PURE__ */ jsxs16("div", { children: [
-                /* @__PURE__ */ jsxs16("div", { className: "flex items-center justify-between mb-2", children: [
+              hasScenarios && /* @__PURE__ */ jsxs17("div", { children: [
+                /* @__PURE__ */ jsxs17("div", { className: "flex items-center justify-between mb-2", children: [
                   /* @__PURE__ */ jsx22("span", { className: "text-xs text-neutral-500", children: scenarioLabel }),
                   /* @__PURE__ */ jsx22(
                     "button",
@@ -3063,11 +3116,11 @@ function ActionDialog({
 }
 
 // components/ui/setting-row.tsx
-import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function SettingRow(props) {
   const { label, description, disabled, className = "" } = props;
-  return /* @__PURE__ */ jsxs17("div", { className: `flex items-start justify-between gap-4 ${className}`, children: [
-    /* @__PURE__ */ jsxs17("div", { children: [
+  return /* @__PURE__ */ jsxs18("div", { className: `flex items-start justify-between gap-4 ${className}`, children: [
+    /* @__PURE__ */ jsxs18("div", { children: [
       /* @__PURE__ */ jsx23("label", { className: "text-neutral-200 leading-7", children: label }),
       description && /* @__PURE__ */ jsx23("p", { className: "text-sm text-neutral-500", children: description })
     ] }),
@@ -3108,8 +3161,8 @@ function SettingRow(props) {
 }
 
 // components/ui/file-tree.tsx
-import { FileCode as FileCode2, Folder as Folder5, ChevronRight as ChevronRight3, ChevronDown as ChevronDown7 } from "lucide-react";
-import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+import { FileCode as FileCode2, Folder as Folder5, FolderOpen, ChevronRight as ChevronRight3, ChevronDown as ChevronDown7 } from "lucide-react";
+import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
 var ACCENT_SELECTED = {
   blue: "bg-blue-400/20 text-neutral-200",
   purple: "bg-purple-400/20 text-neutral-200",
@@ -3195,16 +3248,16 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
   const base = "flex items-center gap-1.5 py-0.5 px-1 rounded text-xs transition-colors overflow-hidden whitespace-nowrap";
   const selectedClass = ACCENT_SELECTED[accentColor] ?? ACCENT_SELECTED.blue;
   const iconColorClass = ACCENT_ICON[accentColor] ?? ACCENT_ICON.blue;
-  const rowClass = isSelected ? `${base} ${selectedClass}` : isDir ? `${base} cursor-pointer hover:text-neutral-200 text-neutral-400` : `${base} cursor-pointer hover:bg-neutral-700/50 hover:text-neutral-200 text-neutral-400`;
-  return /* @__PURE__ */ jsxs18("li", { children: [
-    /* @__PURE__ */ jsxs18(
+  const rowClass = isSelected ? `${base} ${selectedClass}` : isDir ? `${base} cursor-pointer hover:text-neutral-200 ${iconColorClass}` : `${base} cursor-pointer hover:bg-neutral-700/50 hover:text-neutral-200 ${iconColorClass}`;
+  return /* @__PURE__ */ jsxs19("li", { children: [
+    /* @__PURE__ */ jsxs19(
       "button",
       {
         onClick: isDir ? () => onTogglePath(path) : () => onSelectFile(path),
         className: rowClass,
         children: [
           isDir ? expanded ? /* @__PURE__ */ jsx24(ChevronDown7, { className: "w-3 h-3 shrink-0" }) : /* @__PURE__ */ jsx24(ChevronRight3, { className: "w-3 h-3 shrink-0" }) : /* @__PURE__ */ jsx24("span", { className: "w-3" }),
-          isDir ? /* @__PURE__ */ jsx24(Folder5, { className: `w-3.5 h-3.5 shrink-0 ${iconColorClass}` }) : /* @__PURE__ */ jsx24(FileCode2, { className: `w-3.5 h-3.5 shrink-0 ${isSelected ? iconColorClass : "text-neutral-500"}` }),
+          isDir ? expanded ? /* @__PURE__ */ jsx24(FolderOpen, { className: `w-3.5 h-3.5 shrink-0 ${iconColorClass}` }) : /* @__PURE__ */ jsx24(Folder5, { className: `w-3.5 h-3.5 shrink-0 ${iconColorClass}` }) : /* @__PURE__ */ jsx24(FileCode2, { className: `w-3.5 h-3.5 shrink-0 ${iconColorClass}` }),
           /* @__PURE__ */ jsx24("span", { className: "truncate", children: node.name })
         ]
       }
@@ -3230,7 +3283,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
 
 // components/ui/editor-toolbar.tsx
 import { useState as useState9 } from "react";
-import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
 function EditorToolbar({
   isDirty,
   isSaving = false,
@@ -3258,8 +3311,8 @@ function EditorToolbar({
   if (!showSaveButton && !canReset && !leftActions?.length && !rightActions?.length) {
     return null;
   }
-  return /* @__PURE__ */ jsxs19(Fragment5, { children: [
-    /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800", children: [
+  return /* @__PURE__ */ jsxs20(Fragment5, { children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800", children: [
       /* @__PURE__ */ jsx25("div", { className: "flex items-center gap-2", children: leftActions?.map((a, i) => /* @__PURE__ */ jsx25(IconButton, { ...a }, i)) }),
       isDirty && /* @__PURE__ */ jsx25(
         Label,
@@ -3271,7 +3324,7 @@ function EditorToolbar({
           tooltip: { description: "File has unsaved changes" }
         }
       ),
-      /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
         rightActions?.map((a, i) => /* @__PURE__ */ jsx25(IconButton, { ...a }, i)),
         canReset && onReset && /* @__PURE__ */ jsx25(
           IconButton,
@@ -3315,7 +3368,7 @@ function EditorToolbar({
 // components/ui/bottom-panel-header.tsx
 import { useState as useState10, useRef as useRef10, useEffect as useEffect9, useCallback as useCallback4 } from "react";
 import { RefreshCw as RefreshCw3 } from "lucide-react";
-import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
 var DEFAULT_ACTIVE_TEXT = "text-neutral-300";
 var DEFAULT_INACTIVE_CLASSES = "border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30";
 var TAB_ICON_PADDING = 56;
@@ -3373,7 +3426,7 @@ function BottomPanelHeader({
   const compactTabs = layoutMode === "compact-all";
   const compactBanner = layoutMode === "compact-banner" || layoutMode === "compact-all";
   const bannerStyles = statusBanner?.type === "warning" ? "bg-amber-500/10 border-amber-500/30 text-amber-300" : "bg-blue-500/10 border-blue-500/30 text-blue-300";
-  return /* @__PURE__ */ jsxs20(
+  return /* @__PURE__ */ jsxs21(
     "div",
     {
       ref: containerRef,
@@ -3391,10 +3444,10 @@ function BottomPanelHeader({
               onClick: () => onTabChange(tab.id),
               "data-testid": tab.testId,
               className: `h-[41px] flex items-center justify-center gap-2 ${compactTabs ? "px-3" : "px-4"} text-sm border-b-2 transition-colors cursor-pointer ${baseClasses}`,
-              children: compactTabs ? /* @__PURE__ */ jsxs20("span", { className: "relative flex items-center justify-center w-[18px] h-[18px] flex-shrink-0", children: [
+              children: compactTabs ? /* @__PURE__ */ jsxs21("span", { className: "relative flex items-center justify-center w-[18px] h-[18px] flex-shrink-0", children: [
                 TabIcon2 && /* @__PURE__ */ jsx26(TabIcon2, { className: "w-[18px] h-[18px]" }),
                 tab.count !== void 0 && /* @__PURE__ */ jsx26("span", { className: "absolute -top-1.5 -right-2", children: /* @__PURE__ */ jsx26(Badge, { value: tab.count, color: tab.countColor, size: "xss" }) })
-              ] }) : /* @__PURE__ */ jsxs20(Fragment6, { children: [
+              ] }) : /* @__PURE__ */ jsxs21(Fragment6, { children: [
                 /* @__PURE__ */ jsx26("span", { className: "flex items-center justify-center w-4 h-4 flex-shrink-0", children: TabIcon2 && /* @__PURE__ */ jsx26(TabIcon2, { className: "w-4 h-4" }) }),
                 tab.hideLabel ? /* @__PURE__ */ jsx26("span", { className: "hidden sm:inline", children: tab.label }) : /* @__PURE__ */ jsx26("span", { children: tab.label }),
                 tab.count !== void 0 && /* @__PURE__ */ jsx26(Badge, { value: tab.count, color: tab.countColor, size: "xss" })
@@ -3407,11 +3460,11 @@ function BottomPanelHeader({
           }
           return tabButton;
         }) }),
-        /* @__PURE__ */ jsx26("div", { className: "flex-1 min-w-0 flex items-center justify-center overflow-hidden", children: statusBanner && (compactBanner ? /* @__PURE__ */ jsx26(Tooltip, { content: { description: statusBanner.message }, position: "bottom", children: /* @__PURE__ */ jsx26("div", { className: `flex items-center px-2 py-1.5 ${bannerStyles} rounded text-xs`, children: /* @__PURE__ */ jsx26(RefreshCw3, { className: "w-3 h-3 flex-shrink-0" }) }) }) : /* @__PURE__ */ jsxs20("div", { className: `flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-xs max-w-full`, children: [
+        /* @__PURE__ */ jsx26("div", { className: "flex-1 min-w-0 flex items-center justify-center overflow-hidden", children: statusBanner && (compactBanner ? /* @__PURE__ */ jsx26(Tooltip, { content: { description: statusBanner.message }, position: "bottom", children: /* @__PURE__ */ jsx26("div", { className: `flex items-center px-2 py-1.5 ${bannerStyles} rounded text-xs`, children: /* @__PURE__ */ jsx26(RefreshCw3, { className: "w-3 h-3 flex-shrink-0" }) }) }) : /* @__PURE__ */ jsxs21("div", { className: `flex items-center gap-2 px-2.5 py-1.5 ${bannerStyles} rounded text-xs max-w-full`, children: [
           /* @__PURE__ */ jsx26(RefreshCw3, { className: "w-3 h-3 flex-shrink-0" }),
           /* @__PURE__ */ jsx26("span", { className: "truncate", children: statusBanner.message })
         ] })) }),
-        /* @__PURE__ */ jsxs20("div", { ref: actionsRef, className: "flex items-center gap-1.5 pr-3 flex-shrink-0", children: [
+        /* @__PURE__ */ jsxs21("div", { ref: actionsRef, className: "flex items-center gap-1.5 pr-3 flex-shrink-0", children: [
           actions?.map((a, i) => /* @__PURE__ */ jsx26(IconButton, { ...a }, i)),
           customActions,
           onCollapse && /* @__PURE__ */ jsx26(
@@ -3431,7 +3484,7 @@ function BottomPanelHeader({
 
 // components/ui/frontmatter-form-header.tsx
 import { ChevronRight as ChevronRight4 } from "lucide-react";
-import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 function FrontmatterFormHeader({
   collapsed,
   onToggle,
@@ -3442,8 +3495,8 @@ function FrontmatterFormHeader({
   readOnly
 }) {
   const hasFm = frontmatterEnabled !== false;
-  return /* @__PURE__ */ jsxs21("div", { className: "bg-neutral-900 border-b border-neutral-800 select-none", children: [
-    /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22("div", { className: "bg-neutral-900 border-b border-neutral-800 select-none", children: [
+    /* @__PURE__ */ jsxs22(
       "button",
       {
         type: "button",
@@ -3462,8 +3515,8 @@ function FrontmatterFormHeader({
         ]
       }
     ),
-    !collapsed && /* @__PURE__ */ jsxs21("div", { className: "px-3 pb-3 pt-1", children: [
-      onFrontmatterToggle && /* @__PURE__ */ jsxs21("div", { className: "inline-flex items-center gap-1.5 mb-3", children: [
+    !collapsed && /* @__PURE__ */ jsxs22("div", { className: "px-3 pb-3 pt-1", children: [
+      onFrontmatterToggle && /* @__PURE__ */ jsxs22("div", { className: "inline-flex items-center gap-1.5 mb-3", children: [
         /* @__PURE__ */ jsx27(
           Checkbox,
           {
@@ -3488,7 +3541,7 @@ function FrontmatterFormHeader({
 
 // components/ui/editor-placeholder-card.tsx
 import { useState as useState11, useRef as useRef11, useLayoutEffect as useLayoutEffect3 } from "react";
-import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx28, jsxs as jsxs23 } from "react/jsx-runtime";
 var COLORS = {
   purple: {
     name: "text-purple-400",
@@ -3549,14 +3602,14 @@ function EditorPlaceholderCard({
     } catch {
     }
   };
-  return /* @__PURE__ */ jsxs22("div", { className: `group px-3 py-2.5 ${!hasValue ? "opacity-60" : ""} ${className}`, children: [
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-start justify-between gap-2", children: [
-      /* @__PURE__ */ jsxs22("div", { className: "flex-1 min-w-0", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: `group px-3 py-2.5 ${!hasValue ? "opacity-60" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-start justify-between gap-2", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex-1 min-w-0", children: [
         /* @__PURE__ */ jsx28("code", { className: `text-xs font-mono px-1.5 py-0.5 rounded ${colors.name} ${colors.nameBg}`, children: "{{" + name + "}}" }),
         required && /* @__PURE__ */ jsx28("span", { className: "ml-2 inline-block px-1.5 py-0.5 text-xs font-semibold uppercase bg-red-500/15 text-red-400 border border-red-500/30 rounded", children: "Required" }),
         /* @__PURE__ */ jsx28("p", { className: "text-xs text-neutral-500 mt-1.5 line-clamp-2", children: description })
       ] }),
-      /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-1 shrink-0", children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 shrink-0", children: [
         showCopyPlaceholder && /* @__PURE__ */ jsx28(
           IconButton,
           {
@@ -3582,7 +3635,7 @@ function EditorPlaceholderCard({
         actions?.map((a, i) => /* @__PURE__ */ jsx28(IconButton, { ...a }, i))
       ] })
     ] }),
-    hasValue && /* @__PURE__ */ jsx28("div", { className: "mt-2", children: hideValue ? /* @__PURE__ */ jsxs22(Fragment7, { children: [
+    hasValue && /* @__PURE__ */ jsx28("div", { className: "mt-2", children: hideValue ? /* @__PURE__ */ jsxs23(Fragment7, { children: [
       /* @__PURE__ */ jsx28("span", { className: "text-xs text-neutral-500 font-medium", children: valueLabel }),
       /* @__PURE__ */ jsx28("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx28(
         Input,
@@ -3597,8 +3650,8 @@ function EditorPlaceholderCard({
           color: "neutral"
         }
       ) })
-    ] }) : /* @__PURE__ */ jsxs22(Fragment7, { children: [
-      /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between", children: [
+    ] }) : /* @__PURE__ */ jsxs23(Fragment7, { children: [
+      /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx28("span", { className: "text-xs text-neutral-500 font-medium", children: valueLabel }),
         (isOverflowing || isExpanded) && /* @__PURE__ */ jsx28(
           IconButton,
@@ -3625,7 +3678,7 @@ function EditorPlaceholderCard({
 
 // components/ui/detail-view-wrapper.tsx
 import "react";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs24 } from "react/jsx-runtime";
 function DetailViewWrapper({
   editorContent,
   actions,
@@ -3633,9 +3686,9 @@ function DetailViewWrapper({
   rightSidebar,
   showRightSidebar = false
 }) {
-  return /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex flex-col overflow-hidden min-h-0", children: [
+  return /* @__PURE__ */ jsxs24("div", { className: "flex-1 flex flex-col overflow-hidden min-h-0", children: [
     actions && /* @__PURE__ */ jsx29("div", { className: "flex items-center justify-end border-b border-neutral-800 bg-neutral-950/50 px-2 h-[36px]", children: /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-1", children: actions }) }),
-    /* @__PURE__ */ jsxs23("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
+    /* @__PURE__ */ jsxs24("div", { className: "flex-1 flex overflow-hidden min-h-0", children: [
       /* @__PURE__ */ jsx29("div", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: editorContent && /* @__PURE__ */ jsx29("div", { className: "flex-1 flex flex-col overflow-hidden", children: editorContent }) }),
       showRightSidebar && rightSidebar && /* @__PURE__ */ jsx29("div", { className: "w-[300px] border-l border-neutral-800 overflow-hidden flex-shrink-0", children: rightSidebar })
     ] }),
@@ -3663,7 +3716,7 @@ import {
   Package as Package2,
   Puzzle as Puzzle4
 } from "lucide-react";
-import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx30, jsxs as jsxs25 } from "react/jsx-runtime";
 var TYPE_ICONS = {
   skill: Sparkles4,
   command: Terminal4,
@@ -3808,7 +3861,7 @@ function RegistryCardBadgeRow({ sourceType, pluginType, category, onFilterCatego
   const scopeIcons = knownScopes.map((s) => SCOPE_ICONS[s]).filter(Boolean);
   const hasContent = sourceType || pluginType || category || isInstalled || isDisabled || status?.updateAvailable || status?.modified;
   if (!hasContent) return null;
-  return /* @__PURE__ */ jsxs24("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+  return /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
     sourceType && SOURCE_TYPE_BADGES[sourceType] && /* @__PURE__ */ jsx30(
       Label,
       {
@@ -3874,7 +3927,7 @@ function RegistryCard(props) {
         status: props.status
       }
     );
-    subtitle = /* @__PURE__ */ jsxs24(Fragment8, { children: [
+    subtitle = /* @__PURE__ */ jsxs25(Fragment8, { children: [
       "by ",
       props.author
     ] });
@@ -3922,7 +3975,7 @@ function RegistryCard(props) {
         const typeKey = key === "mcpServers" ? "mcp" : key.replace(/s$/, "");
         const count = counts[typeKey];
         if (!count || count <= 0) return [];
-        return [/* @__PURE__ */ jsx30(Tooltip, { content: { description: `${count} ${count === 1 ? label : labelPlural}` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-0.5", children: [
+        return [/* @__PURE__ */ jsx30(Tooltip, { content: { description: `${count} ${count === 1 ? label : labelPlural}` }, position: "top", children: /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-0.5", children: [
           /* @__PURE__ */ jsx30(Icon, { className: `w-3 h-3 ${color}` }),
           /* @__PURE__ */ jsx30("span", { className: "text-[10px] text-neutral-500", children: count })
         ] }) }, `pkg-${key}`)];
@@ -3941,7 +3994,7 @@ function RegistryCard(props) {
         scopes: displayableScopes
       }
     );
-    subtitle = /* @__PURE__ */ jsxs24(Fragment8, { children: [
+    subtitle = /* @__PURE__ */ jsxs25(Fragment8, { children: [
       "by ",
       props.author
     ] });
@@ -3976,11 +4029,11 @@ function RegistryCard(props) {
     const compatibleTools = props.compatibleTools ?? [];
     bottomLogos = compatibleTools.map((tool) => /* @__PURE__ */ jsx30(Tooltip, { content: { description: `Compatible with ${AI_TOOL_NAMES[tool] ?? tool}` }, position: "top", children: /* @__PURE__ */ jsx30(AiToolIcon, { tool, size: 16 }) }, tool));
     bottomStats = [
-      ...props.stars != null && props.stars > 0 ? [/* @__PURE__ */ jsx30(CardClickable, { onClick: () => props.onSortBy?.("stars"), children: /* @__PURE__ */ jsx30(Tooltip, { content: { description: `${props.stars.toLocaleString()} stars \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-[10px] text-amber-400/80", children: [
+      ...props.stars != null && props.stars > 0 ? [/* @__PURE__ */ jsx30(CardClickable, { onClick: () => props.onSortBy?.("stars"), children: /* @__PURE__ */ jsx30(Tooltip, { content: { description: `${props.stars.toLocaleString()} stars \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-1 text-[10px] text-amber-400/80", children: [
         /* @__PURE__ */ jsx30(Star4, { className: "w-3 h-3" }),
         formatCount(props.stars)
       ] }) }) }, "stars")] : [],
-      ...props.downloads != null && props.downloads > 0 ? [/* @__PURE__ */ jsx30(CardClickable, { onClick: () => props.onSortBy?.("downloads"), children: /* @__PURE__ */ jsx30(Tooltip, { content: { description: `${props.downloads.toLocaleString()} downloads \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-[10px] text-emerald-400/80", children: [
+      ...props.downloads != null && props.downloads > 0 ? [/* @__PURE__ */ jsx30(CardClickable, { onClick: () => props.onSortBy?.("downloads"), children: /* @__PURE__ */ jsx30(Tooltip, { content: { description: `${props.downloads.toLocaleString()} downloads \xB7 Click to sort` }, position: "top", children: /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-1 text-[10px] text-emerald-400/80", children: [
         /* @__PURE__ */ jsx30(Download3, { className: "w-3 h-3" }),
         formatCount(props.downloads)
       ] }) }) }, "downloads")] : []
@@ -4038,7 +4091,7 @@ function RegistryCard(props) {
         scopes: displayableScopes
       }
     );
-    subtitle = /* @__PURE__ */ jsxs24(Fragment8, { children: [
+    subtitle = /* @__PURE__ */ jsxs25(Fragment8, { children: [
       "by ",
       props.author
     ] });
@@ -4073,14 +4126,14 @@ function RegistryCard(props) {
     const allTools = props.allToolKeys ?? [];
     bottomLogos = allTools.map((tool) => /* @__PURE__ */ jsx30(Tooltip, { content: { description: `Compatible with ${AI_TOOL_NAMES[tool] ?? tool}` }, position: "top", children: /* @__PURE__ */ jsx30(AiToolIcon, { tool, size: 14 }) }, tool));
     if (props.installs != null && props.installs > 0) {
-      bottomStats = [/* @__PURE__ */ jsx30(Tooltip, { content: { description: `${props.installs.toLocaleString()} installs` }, position: "top", children: /* @__PURE__ */ jsxs24("span", { className: "flex items-center gap-1 text-[10px] text-neutral-500", children: [
+      bottomStats = [/* @__PURE__ */ jsx30(Tooltip, { content: { description: `${props.installs.toLocaleString()} installs` }, position: "top", children: /* @__PURE__ */ jsxs25("span", { className: "flex items-center gap-1 text-[10px] text-neutral-500", children: [
         /* @__PURE__ */ jsx30(Download3, { className: "w-3 h-3" }),
         props.installs.toLocaleString()
       ] }) }, "installs")];
     }
   }
   const borderClass = flash === "success" ? "border-green-500/60 ring-1 ring-green-500/30 bg-green-500/5" : flash === "error" ? "border-red-500/60 ring-1 ring-red-500/30 bg-red-500/5" : flash === "warning" ? "border-amber-500/60 ring-1 ring-amber-500/30 bg-amber-500/5" : "border-neutral-700";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       role: "button",
@@ -4094,9 +4147,9 @@ function RegistryCard(props) {
         }
       },
       children: [
-        /* @__PURE__ */ jsxs24("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-start justify-between gap-2 mb-2", children: [
           /* @__PURE__ */ jsx30("div", { className: "flex-1 min-w-0 min-h-7 overflow-hidden", children: topLeft }),
-          /* @__PURE__ */ jsx30("div", { className: "relative w-7 h-7 flex items-center justify-center shrink-0", children: isInstalling ? /* @__PURE__ */ jsx30(Loader22, { className: "w-4 h-4 text-blue-400 animate-spin" }) : /* @__PURE__ */ jsxs24(Fragment8, { children: [
+          /* @__PURE__ */ jsx30("div", { className: "relative w-7 h-7 flex items-center justify-center shrink-0", children: isInstalling ? /* @__PURE__ */ jsx30(Loader22, { className: "w-4 h-4 text-blue-400 animate-spin" }) : /* @__PURE__ */ jsxs25(Fragment8, { children: [
             /* @__PURE__ */ jsx30(Tooltip, { content: { description: `${typeLabel} extension` }, position: "top", children: /* @__PURE__ */ jsx30(TypeIcon, { className: `w-4 h-4 group-hover:opacity-0 transition-opacity ${typeIconColor}` }) }),
             installButton && /* @__PURE__ */ jsx30("div", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity", onClick: (e) => e.stopPropagation(), children: installButton })
           ] }) })
@@ -4106,7 +4159,7 @@ function RegistryCard(props) {
         description && /* @__PURE__ */ jsx30("p", { className: "text-xs text-neutral-500 mb-3 flex-grow line-clamp-2", children: description }),
         errorMessage && /* @__PURE__ */ jsx30("p", { className: `text-[11px] mb-2 break-all ${flash === "warning" ? "text-amber-400" : "text-red-400"}`, children: errorMessage }),
         (bottomLogos.length > 0 || bottomStats.length > 0 || updatedAt) && (() => {
-          const dateNode = updatedAt ? /* @__PURE__ */ jsx30(Tooltip, { content: { description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \xB7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }, position: "top", children: /* @__PURE__ */ jsxs24(
+          const dateNode = updatedAt ? /* @__PURE__ */ jsx30(Tooltip, { content: { description: onDateClick ? `Last updated ${formatFullDate(updatedAt)} \xB7 Click to sort by date` : `Last updated ${formatFullDate(updatedAt)}` }, position: "top", children: /* @__PURE__ */ jsxs25(
             "span",
             {
               className: `flex items-center gap-1 text-[10px] text-neutral-500 whitespace-nowrap${onDateClick ? " cursor-pointer hover:brightness-125 transition-all" : ""}`,
@@ -4121,7 +4174,7 @@ function RegistryCard(props) {
             }
           ) }) : null;
           const hasStats = bottomStats.length > 0;
-          return /* @__PURE__ */ jsxs24("div", { className: "mt-auto pt-1 flex items-end", children: [
+          return /* @__PURE__ */ jsxs25("div", { className: "mt-auto pt-1 flex items-end", children: [
             /* @__PURE__ */ jsx30("div", { className: `${hasStats ? "w-1/3" : "w-2/3"} flex flex-wrap gap-1.5 content-end`, children: bottomLogos }),
             hasStats && /* @__PURE__ */ jsx30("div", { className: "w-1/3 flex justify-center items-end gap-2", children: bottomStats }),
             /* @__PURE__ */ jsx30("div", { className: "w-1/3 flex justify-end items-end", children: dateNode })
@@ -4131,13 +4184,13 @@ function RegistryCard(props) {
           if ("renderScopeConfirm" in props && props.renderScopeConfirm) {
             return /* @__PURE__ */ jsx30("div", { onClick: (e) => e.stopPropagation(), children: props.renderScopeConfirm({ isOpen: true, onClose: () => setShowScopeConfirm(false), onConfirm: props.onInstall, name }) });
           }
-          return /* @__PURE__ */ jsx30("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30("div", { className: "fixed inset-0 bg-black/50 z-50 flex items-center justify-center", onClick: () => setShowScopeConfirm(false), children: /* @__PURE__ */ jsxs24("div", { className: "bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm", onClick: (e) => e.stopPropagation(), children: [
+          return /* @__PURE__ */ jsx30("div", { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx30("div", { className: "fixed inset-0 bg-black/50 z-50 flex items-center justify-center", onClick: () => setShowScopeConfirm(false), children: /* @__PURE__ */ jsxs25("div", { className: "bg-neutral-800 border border-neutral-700 rounded-lg p-4 max-w-sm", onClick: (e) => e.stopPropagation(), children: [
             /* @__PURE__ */ jsx30("h3", { className: "text-sm font-medium text-neutral-200 mb-2", children: ALREADY_AT_USER }),
-            /* @__PURE__ */ jsxs24("p", { className: "text-xs text-neutral-400 mb-4", children: [
+            /* @__PURE__ */ jsxs25("p", { className: "text-xs text-neutral-400 mb-4", children: [
               /* @__PURE__ */ jsx30("strong", { className: "text-neutral-300", children: name }),
               " is already installed at user level and available to all projects. Do you also want to install it at project level?"
             ] }),
-            /* @__PURE__ */ jsxs24("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ jsxs25("div", { className: "flex justify-end gap-2", children: [
               /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => setShowScopeConfirm(false), className: "px-3 py-1.5 text-xs text-neutral-400 hover:text-neutral-200 transition-colors cursor-pointer", children: "Cancel" }),
               /* @__PURE__ */ jsx30("button", { type: "button", onClick: () => {
                 setShowScopeConfirm(false);
@@ -4158,7 +4211,7 @@ import { ChevronsUpDown as ChevronsUpDown2, ChevronsDownUp as ChevronsDownUp2 }
 // components/ui/file-structure-section.tsx
 import { useState as useState13, useEffect as useEffect10, useCallback as useCallback5, useRef as useRef12, useMemo } from "react";
 import { FileCode as FileCode3, FolderTree, Loader2 as Loader23, AlertCircle as AlertCircle3, AlignLeft, Code2 as Code22, Type } from "lucide-react";
-import { jsx as jsx31, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs26 } from "react/jsx-runtime";
 var ACCENT_ICON2 = {
   blue: "text-blue-400",
   purple: "text-purple-400",
@@ -4209,7 +4262,7 @@ function renderMarkdownContent(content) {
     }
     i++;
     nodes.push(
-      /* @__PURE__ */ jsxs25("div", { className: "mb-3 font-mono text-[11px] text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "mb-3 font-mono text-[11px] text-neutral-500 border-l-2 border-neutral-700 pl-2 py-0.5", children: [
         /* @__PURE__ */ jsx31("div", { className: "text-neutral-600", children: "---" }),
         fmLines.map((l, j) => /* @__PURE__ */ jsx31("div", { children: l }, j)),
         /* @__PURE__ */ jsx31("div", { className: "text-neutral-600", children: "---" })
@@ -4385,9 +4438,9 @@ function FileStructureSection({
     setFileError(null);
   }, []);
   if (isLoading) {
-    return /* @__PURE__ */ jsxs25("div", { children: [
+    return /* @__PURE__ */ jsxs26("div", { children: [
       /* @__PURE__ */ jsx31("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2", children: "File Structure" }),
-      /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 text-xs text-neutral-500 py-4", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 text-xs text-neutral-500 py-4", children: [
         /* @__PURE__ */ jsx31(Loader23, { className: "w-3.5 h-3.5 animate-spin" }),
         "Loading file tree..."
       ] })
@@ -4397,9 +4450,9 @@ function FileStructureSection({
     return null;
   }
   if (error) {
-    return /* @__PURE__ */ jsxs25("div", { children: [
+    return /* @__PURE__ */ jsxs26("div", { children: [
       /* @__PURE__ */ jsx31("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2", children: "File Structure" }),
-      /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 text-xs text-red-400 py-4", children: [
+      /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 text-xs text-red-400 py-4", children: [
         /* @__PURE__ */ jsx31(AlertCircle3, { className: "w-3.5 h-3.5 shrink-0" }),
         error
       ] })
@@ -4412,11 +4465,11 @@ function FileStructureSection({
     if (mode === "language" && renderPreview) return renderPreview(content, filePath, resolvedLanguage);
     return /* @__PURE__ */ jsx31("pre", { className: "p-3 text-xs font-mono text-white leading-relaxed whitespace-pre-wrap", children: /* @__PURE__ */ jsx31("code", { children: content }) });
   }
-  return /* @__PURE__ */ jsxs25("div", { ref: sectionRef, children: [
+  return /* @__PURE__ */ jsxs26("div", { ref: sectionRef, children: [
     /* @__PURE__ */ jsx31("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2", children: "File Structure" }),
-    /* @__PURE__ */ jsxs25("div", { className: "flex gap-3", style: { height: `${effectiveHeight}px` }, children: [
-      /* @__PURE__ */ jsxs25("div", { className: `flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${effectiveFilePath ? "w-1/3 shrink-0" : "flex-1"}`, children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex items-center px-3 py-2 border-b border-neutral-700 shrink-0 gap-2 min-w-0", children: [
+    /* @__PURE__ */ jsxs26("div", { className: "flex gap-3", style: { height: `${effectiveHeight}px` }, children: [
+      /* @__PURE__ */ jsxs26("div", { className: `flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${effectiveFilePath ? "w-1/3 shrink-0" : "flex-1"}`, children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-center px-3 py-2 border-b border-neutral-700 shrink-0 gap-2 min-w-0", children: [
           /* @__PURE__ */ jsx31(FolderTree, { className: `w-3.5 h-3.5 shrink-0 ${ACCENT_ICON2[accentColor]}` }),
           /* @__PURE__ */ jsx31("span", { className: "text-xs text-neutral-200 truncate flex-1", children: "Files" }),
           /* @__PURE__ */ jsx31(
@@ -4440,8 +4493,8 @@ function FileStructureSection({
           }
         ) })
       ] }),
-      effectiveFilePath && /* @__PURE__ */ jsxs25("div", { className: "flex-1 flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden", children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex items-center px-3 py-2 border-b border-neutral-700 shrink-0 gap-2 min-w-0", children: [
+      effectiveFilePath && /* @__PURE__ */ jsxs26("div", { className: "flex-1 flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden", children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-center px-3 py-2 border-b border-neutral-700 shrink-0 gap-2 min-w-0", children: [
           /* @__PURE__ */ jsx31(FileCode3, { className: `w-3.5 h-3.5 shrink-0 ${ACCENT_ICON2[accentColor]}` }),
           /* @__PURE__ */ jsx31("span", { className: "text-xs text-neutral-200 truncate flex-1", children: selectedFileName }),
           showToggle && /* @__PURE__ */ jsx31(
@@ -4455,7 +4508,7 @@ function FileStructureSection({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-auto", children: fileIsLoading ? /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2 text-xs text-neutral-500 p-3", children: [
+        /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-auto", children: fileIsLoading ? /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2 text-xs text-neutral-500 p-3", children: [
           /* @__PURE__ */ jsx31(Loader23, { className: "w-3.5 h-3.5 animate-spin" }),
           "Loading..."
         ] }) : fileError ? /* @__PURE__ */ jsx31("p", { className: "text-xs text-red-400 p-3", children: fileError }) : fileContent !== null ? renderContent(fileContent, effectiveFilePath) : null })
@@ -4473,7 +4526,7 @@ function FileStructureSection({
 }
 
 // components/ui/registry-detail.tsx
-import { jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs27 } from "react/jsx-runtime";
 var MARKDOWN_CLASSES = "text-sm text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-xs [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-sm [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-900 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs";
 var COLLAPSED_MAX_HEIGHT = 240;
 function CollapsibleTextSection({ children, header }) {
@@ -4496,8 +4549,8 @@ function CollapsibleTextSection({ children, header }) {
     return () => observer.disconnect();
   }, [measure]);
   const showCollapsed = overflows && !expanded;
-  return /* @__PURE__ */ jsxs26("div", { children: [
-    (header || overflows) && /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-2", children: [
+  return /* @__PURE__ */ jsxs27("div", { children: [
+    (header || overflows) && /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-between mb-2", children: [
       header && /* @__PURE__ */ jsx32("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider", children: header }),
       overflows && /* @__PURE__ */ jsx32(
         IconButton,
@@ -4509,7 +4562,7 @@ function CollapsibleTextSection({ children, header }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs26("div", { className: "relative", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "relative", children: [
       /* @__PURE__ */ jsx32(
         "div",
         {
@@ -4525,9 +4578,9 @@ function CollapsibleTextSection({ children, header }) {
 }
 function CompatibleWithSection({ tools }) {
   if (tools.length === 0) return null;
-  return /* @__PURE__ */ jsxs26("div", { children: [
+  return /* @__PURE__ */ jsxs27("div", { children: [
     /* @__PURE__ */ jsx32("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider mb-3", children: "Compatible with" }),
-    /* @__PURE__ */ jsx32("div", { className: "flex items-start gap-3", children: tools.map((tool) => /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-1", children: [
+    /* @__PURE__ */ jsx32("div", { className: "flex items-start gap-3", children: tools.map((tool) => /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center gap-1", children: [
       /* @__PURE__ */ jsx32(AiToolIcon, { tool, size: 18 }),
       /* @__PURE__ */ jsx32("span", { className: "text-[10px] text-neutral-400", children: AI_TOOL_NAMES[tool] ?? tool })
     ] }, tool)) })
@@ -4552,11 +4605,11 @@ function RegistryDetail({
   maxWidth = "max-w-[1440px]",
   children
 }) {
-  return /* @__PURE__ */ jsx32("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxs26("div", { className: `${maxWidth} mx-auto space-y-6`, children: [
+  return /* @__PURE__ */ jsx32("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxs27("div", { className: `${maxWidth} mx-auto space-y-6`, children: [
     aboveHeader,
-    /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-4", children: [
-      /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-3 flex-wrap", children: [
+    /* @__PURE__ */ jsxs27("div", { className: "flex items-start justify-between gap-4", children: [
+      /* @__PURE__ */ jsxs27("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-3 flex-wrap", children: [
           /* @__PURE__ */ jsx32(Icon, { className: `w-6 h-6 shrink-0 ${iconColor}` }),
           /* @__PURE__ */ jsx32("h2", { className: "text-xl font-semibold text-neutral-200", children: title }),
           labels && labels.length > 0 && labels.map((labelProps, i) => /* @__PURE__ */ jsx32(Label, { size: "lg", ...labelProps }, i)),
@@ -4566,7 +4619,7 @@ function RegistryDetail({
       ] }),
       actionButton && /* @__PURE__ */ jsx32("div", { className: "shrink-0", children: actionButton })
     ] }),
-    description && /* @__PURE__ */ jsxs26("div", { children: [
+    description && /* @__PURE__ */ jsxs27("div", { children: [
       /* @__PURE__ */ jsx32("h3", { className: "text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2", children: "Description" }),
       /* @__PURE__ */ jsx32("p", { className: "text-sm text-neutral-400 leading-relaxed", children: description })
     ] }),
@@ -4594,7 +4647,7 @@ function RegistryDetail({
 // components/ui/registry-browser.tsx
 import { useState as useState15, useEffect as useEffect12, useRef as useRef14, useCallback as useCallback7 } from "react";
 import { Search as Search6, ArrowRight as ArrowRight3, RefreshCw as RefreshCw4, Loader2 as Loader24, X as X5, AlertTriangle as AlertTriangle4 } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs28 } from "react/jsx-runtime";
 var PAGE_SIZE = 60;
 function RegistryBrowser({
   isLoading,
@@ -4675,9 +4728,9 @@ function RegistryBrowser({
   }, [needsPaging, loadMore]);
   const visibleItems = needsPaging ? items.slice(0, visibleCount) : items;
   const hasMore = visibleCount < totalCount;
-  return /* @__PURE__ */ jsxs27("div", { ref: scrollRef, className: "h-full overflow-y-auto p-4 pb-8", onScroll: handleScroll, children: [
-    /* @__PURE__ */ jsxs27("div", { className: "sticky top-0 flex items-center gap-2 pb-4", children: [
-      /* @__PURE__ */ jsxs27("div", { className: "relative flex-1 max-w-sm", children: [
+  return /* @__PURE__ */ jsxs28("div", { ref: scrollRef, className: "h-full overflow-y-auto p-4 pb-8", onScroll: handleScroll, children: [
+    /* @__PURE__ */ jsxs28("div", { className: "sticky top-0 flex items-center gap-2 pb-4", children: [
+      /* @__PURE__ */ jsxs28("div", { className: "relative flex-1 max-w-sm", children: [
         /* @__PURE__ */ jsx33(Search6, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500" }),
         /* @__PURE__ */ jsx33(
           Input,
@@ -4754,17 +4807,17 @@ function RegistryBrowser({
       )
     ] }),
     aboveGrid,
-    /* @__PURE__ */ jsx33("div", { className: `${maxWidth} mx-auto relative z-10`, children: isLoading ? /* @__PURE__ */ jsxs27("div", { className: "flex items-center justify-center py-12 text-neutral-500", children: [
+    /* @__PURE__ */ jsx33("div", { className: `${maxWidth} mx-auto relative z-10`, children: isLoading ? /* @__PURE__ */ jsxs28("div", { className: "flex items-center justify-center py-12 text-neutral-500", children: [
       /* @__PURE__ */ jsx33(Loader24, { className: "w-5 h-5 animate-spin mr-2" }),
       loadingMessage
-    ] }) : error ? /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center py-12 text-neutral-500", children: [
+    ] }) : error ? /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center py-12 text-neutral-500", children: [
       /* @__PURE__ */ jsx33(AlertTriangle4, { className: "w-6 h-6 text-amber-400 mb-2" }),
       /* @__PURE__ */ jsx33("p", { className: "text-sm", children: error }),
       onRetry && /* @__PURE__ */ jsx33("button", { onClick: onRetry, className: "mt-2 text-xs text-blue-400 hover:underline cursor-pointer", children: "Try again" })
-    ] }) : isEmpty ? /* @__PURE__ */ jsxs27("div", { className: "flex flex-col items-center justify-center py-12 text-neutral-500", children: [
+    ] }) : isEmpty ? /* @__PURE__ */ jsxs28("div", { className: "flex flex-col items-center justify-center py-12 text-neutral-500", children: [
       /* @__PURE__ */ jsx33("p", { className: "text-sm", children: emptyMessage }),
       hasActiveFilters && onResetFilters && /* @__PURE__ */ jsx33("button", { onClick: onResetFilters, className: "mt-2 text-xs text-blue-400 hover:underline cursor-pointer", children: "Reset filters" })
-    ] }) : /* @__PURE__ */ jsxs27("div", { className: "grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2", children: [
+    ] }) : /* @__PURE__ */ jsxs28("div", { className: "grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2", children: [
       visibleItems.map((item) => /* @__PURE__ */ jsx33(RegistryCard, { ...item }, item.name)),
       hasMore && /* @__PURE__ */ jsx33("div", { ref: sentinelRef, className: "col-span-full h-1" })
     ] }) })
@@ -4858,7 +4911,7 @@ function AiActionButton({
 }
 
 // components/ui/ai-execution-action-buttons.tsx
-import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
 function AiExecutionActionButtons({
   isRunning,
   allDone,
@@ -4898,8 +4951,8 @@ function AiExecutionActionButtons({
     }
   };
   const doneConfig = getDoneButtonConfig();
-  return /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
-    isRunning && !allDone && /* @__PURE__ */ jsxs28(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+    isRunning && !allDone && /* @__PURE__ */ jsxs29(Fragment9, { children: [
       /* @__PURE__ */ jsx35(
         IconButton,
         {
@@ -4947,7 +5000,7 @@ import { Loader2 as Loader25, Send as Send4 } from "lucide-react";
 // components/sections/report-bug/screenshot-uploader.tsx
 import { useCallback as useCallback8, useRef as useRef15, useState as useState16 } from "react";
 import { ImagePlus, X as X6, AlertCircle as AlertCircle4 } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
 var DEFAULT_MAX_SIZE = 20 * 1024 * 1024;
 function formatFileSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -5035,8 +5088,8 @@ function ScreenshotUploader({
     },
     [screenshots, onChange]
   );
-  return /* @__PURE__ */ jsxs29("div", { className: cn("space-y-3", className), children: [
-    /* @__PURE__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30("div", { className: cn("space-y-3", className), children: [
+    /* @__PURE__ */ jsxs30(
       "div",
       {
         onClick: () => !disabled && fileInputRef.current?.click(),
@@ -5049,9 +5102,9 @@ function ScreenshotUploader({
         ),
         children: [
           /* @__PURE__ */ jsx36(ImagePlus, { className: cn("w-6 h-6", isDragging ? "text-blue-400" : "text-neutral-500") }),
-          /* @__PURE__ */ jsxs29("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "text-center", children: [
             /* @__PURE__ */ jsx36("p", { className: "text-sm text-neutral-400", children: isDragging ? "Drop images here" : "Click or drag images to attach" }),
-            /* @__PURE__ */ jsxs29("p", { className: "text-xs text-neutral-500 mt-1", children: [
+            /* @__PURE__ */ jsxs30("p", { className: "text-xs text-neutral-500 mt-1", children: [
               formatFileSize(remainingSize),
               " remaining of ",
               formatFileSize(maxTotalSize)
@@ -5072,11 +5125,11 @@ function ScreenshotUploader({
         ]
       }
     ),
-    error && /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2 text-sm text-red-400", children: [
+    error && /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2 text-sm text-red-400", children: [
       /* @__PURE__ */ jsx36(AlertCircle4, { className: "w-4 h-4 flex-shrink-0" }),
       /* @__PURE__ */ jsx36("span", { children: error })
     ] }),
-    screenshots.length > 0 && /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-3 gap-2", children: screenshots.map((s) => /* @__PURE__ */ jsxs29(
+    screenshots.length > 0 && /* @__PURE__ */ jsx36("div", { className: "grid grid-cols-3 gap-2", children: screenshots.map((s) => /* @__PURE__ */ jsxs30(
       "div",
       {
         className: "relative group aspect-video bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden",
@@ -5089,7 +5142,7 @@ function ScreenshotUploader({
               className: "w-full h-full object-cover"
             }
           ),
-          /* @__PURE__ */ jsxs29("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2", children: [
+          /* @__PURE__ */ jsxs30("div", { className: "absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2", children: [
             /* @__PURE__ */ jsx36(
               "button",
               {
@@ -5110,14 +5163,14 @@ function ScreenshotUploader({
       },
       s.id
     )) }),
-    screenshots.length > 0 && /* @__PURE__ */ jsxs29("div", { className: "flex items-center justify-between text-xs text-neutral-500", children: [
-      /* @__PURE__ */ jsxs29("span", { children: [
+    screenshots.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-between text-xs text-neutral-500", children: [
+      /* @__PURE__ */ jsxs30("span", { children: [
         screenshots.length,
         " image",
         screenshots.length !== 1 ? "s" : "",
         " attached"
       ] }),
-      /* @__PURE__ */ jsxs29("span", { children: [
+      /* @__PURE__ */ jsxs30("span", { children: [
         "Total: ",
         formatFileSize(totalSize)
       ] })
@@ -5240,7 +5293,7 @@ function useReportBug(options) {
 }
 
 // components/sections/report-bug/report-bug-form.tsx
-import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
 function ReportBugForm({
   workerUrl,
   getSystemInfo,
@@ -5290,10 +5343,10 @@ function ReportBugForm({
     handleSubmit
   } = useReportBug(hookOptions);
   const hasErrors = (errorCount ?? 0) > 0 || (warnCount ?? 0) > 0;
-  return /* @__PURE__ */ jsxs30("div", { className: cn("rounded-lg border border-neutral-700 bg-neutral-800", className), children: [
+  return /* @__PURE__ */ jsxs31("div", { className: cn("rounded-lg border border-neutral-700 bg-neutral-800", className), children: [
     /* @__PURE__ */ jsx37("div", { className: "border-b border-neutral-700 px-4 py-3", children: /* @__PURE__ */ jsx37("h3", { className: "text-sm font-medium text-neutral-200", children: "Report a Bug" }) }),
-    /* @__PURE__ */ jsxs30("div", { className: "space-y-4 p-4", children: [
-      /* @__PURE__ */ jsxs30("div", { children: [
+    /* @__PURE__ */ jsxs31("div", { className: "space-y-4 p-4", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx37("label", { className: "mb-2 block text-xs text-neutral-400", children: "Issue Type" }),
         /* @__PURE__ */ jsx37("div", { className: "flex flex-wrap gap-2", children: ISSUE_TYPES.map((type) => /* @__PURE__ */ jsx37(
           "button",
@@ -5309,8 +5362,8 @@ function ReportBugForm({
           type.value
         )) })
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
-        /* @__PURE__ */ jsxs30("label", { className: "mb-1.5 block text-xs text-neutral-400", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
+        /* @__PURE__ */ jsxs31("label", { className: "mb-1.5 block text-xs text-neutral-400", children: [
           "Title ",
           /* @__PURE__ */ jsx37("span", { className: "text-red-400", children: "*" })
         ] }),
@@ -5324,8 +5377,8 @@ function ReportBugForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
-        /* @__PURE__ */ jsxs30("label", { className: "mb-1.5 block text-xs text-neutral-400", children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
+        /* @__PURE__ */ jsxs31("label", { className: "mb-1.5 block text-xs text-neutral-400", children: [
           "Description ",
           /* @__PURE__ */ jsx37("span", { className: "text-red-400", children: "*" })
         ] }),
@@ -5340,7 +5393,7 @@ function ReportBugForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx37("label", { className: "mb-1.5 block text-xs text-neutral-400", children: "Email (optional)" }),
         /* @__PURE__ */ jsx37(
           Input,
@@ -5354,7 +5407,7 @@ function ReportBugForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs30("div", { children: [
+      /* @__PURE__ */ jsxs31("div", { children: [
         /* @__PURE__ */ jsx37("label", { className: "mb-2 block text-xs text-neutral-400", children: "Screenshots (optional, max 20MB total)" }),
         /* @__PURE__ */ jsx37(
           ScreenshotUploader,
@@ -5365,17 +5418,17 @@ function ReportBugForm({
           }
         )
       ] }),
-      hasErrors && errorReport && /* @__PURE__ */ jsxs30("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2.5", children: [
+      hasErrors && errorReport && /* @__PURE__ */ jsxs31("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2.5", children: [
           /* @__PURE__ */ jsx37(Checkbox, { checked: includeLogs, onChange: setIncludeLogs }),
-          /* @__PURE__ */ jsxs30(
+          /* @__PURE__ */ jsxs31(
             "span",
             {
               className: "text-sm text-neutral-400 cursor-pointer select-none",
               onClick: () => setIncludeLogs(!includeLogs),
               children: [
                 "Include error logs",
-                errorCount ? /* @__PURE__ */ jsxs30("span", { className: "text-orange-400 ml-1", children: [
+                errorCount ? /* @__PURE__ */ jsxs31("span", { className: "text-orange-400 ml-1", children: [
                   "(",
                   errorCount,
                   " error",
@@ -5386,10 +5439,10 @@ function ReportBugForm({
             }
           )
         ] }),
-        includeLogs && capturedErrors && capturedErrors.length > 0 && /* @__PURE__ */ jsxs30("div", { className: "rounded-md border border-neutral-700 bg-neutral-900/50", children: [
+        includeLogs && capturedErrors && capturedErrors.length > 0 && /* @__PURE__ */ jsxs31("div", { className: "rounded-md border border-neutral-700 bg-neutral-900/50", children: [
           /* @__PURE__ */ jsx37("div", { className: "px-3 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsx37("span", { className: "text-xs font-medium text-neutral-400", children: "Captured Errors" }) }),
-          /* @__PURE__ */ jsx37("div", { className: "max-h-[200px] overflow-y-auto divide-y divide-neutral-800", children: capturedErrors.map((error) => /* @__PURE__ */ jsx37("div", { className: "px-3 py-2 text-xs", children: /* @__PURE__ */ jsxs30("div", { className: "flex items-start gap-2", children: [
-            error.count > 1 && /* @__PURE__ */ jsxs30("span", { className: "shrink-0 text-orange-400 font-mono font-medium", children: [
+          /* @__PURE__ */ jsx37("div", { className: "max-h-[200px] overflow-y-auto divide-y divide-neutral-800", children: capturedErrors.map((error) => /* @__PURE__ */ jsx37("div", { className: "px-3 py-2 text-xs", children: /* @__PURE__ */ jsxs31("div", { className: "flex items-start gap-2", children: [
+            error.count > 1 && /* @__PURE__ */ jsxs31("span", { className: "shrink-0 text-orange-400 font-mono font-medium", children: [
               "\xD7",
               error.count
             ] }),
@@ -5398,7 +5451,7 @@ function ReportBugForm({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs30("div", { className: "flex items-center justify-end gap-2 border-t border-neutral-700 px-4 py-3", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-end gap-2 border-t border-neutral-700 px-4 py-3", children: [
       isSubmitting && submissionStatus && /* @__PURE__ */ jsx37("span", { className: "text-xs text-neutral-400 mr-auto", children: submissionStatus }),
       onCancel && /* @__PURE__ */ jsx37(
         "button",
@@ -5410,7 +5463,7 @@ function ReportBugForm({
           children: "Cancel"
         }
       ),
-      /* @__PURE__ */ jsxs30(
+      /* @__PURE__ */ jsxs31(
         "button",
         {
           type: "button",
@@ -6103,7 +6156,7 @@ import { RefreshCw as RefreshCw5, AlertCircle as AlertCircle5, Check as Check11,
 // components/sections/golden-snapshots/status-overview.tsx
 import { useState as useState19, useRef as useRef16 } from "react";
 import { Archive, Check as Check10, AlertTriangle as AlertTriangle5, RotateCcw as RotateCcw3 } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 function getComponentVersion(meta, component) {
   return meta?.components[component]?.version;
 }
@@ -6114,7 +6167,7 @@ function renderVersionBadge(meta, color) {
 function VersionStatus({ exists, version, mismatch, defaultColor = "text-green-400/70" }) {
   if (!exists) return /* @__PURE__ */ jsx38("span", { className: "text-red-400", children: "Missing" });
   if (!version) return /* @__PURE__ */ jsx38("span", { className: "text-green-400", children: "Found" });
-  return /* @__PURE__ */ jsxs31("span", { className: `text-xs font-mono ${mismatch ? "text-yellow-400" : defaultColor}`, children: [
+  return /* @__PURE__ */ jsxs32("span", { className: `text-xs font-mono ${mismatch ? "text-yellow-400" : defaultColor}`, children: [
     "v",
     version
   ] });
@@ -6125,12 +6178,12 @@ function SyncStatusBanner({ goldenMeta, liveMeta, components }) {
     const lv = getComponentVersion(liveMeta, comp);
     return gv !== lv;
   }).length;
-  return mismatches === 0 ? /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/5 border border-green-500/20", children: [
+  return mismatches === 0 ? /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-green-500/5 border border-green-500/20", children: [
     /* @__PURE__ */ jsx38(Check10, { className: "w-4 h-4 text-green-400" }),
     /* @__PURE__ */ jsx38("span", { className: "text-sm text-green-400", children: "Golden and Live versions are in sync" })
-  ] }) : /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-yellow-500/5 border border-yellow-500/20", children: [
+  ] }) : /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 px-3 py-2 rounded-lg bg-yellow-500/5 border border-yellow-500/20", children: [
     /* @__PURE__ */ jsx38(AlertTriangle5, { className: "w-4 h-4 text-yellow-400" }),
-    /* @__PURE__ */ jsxs31("span", { className: "text-sm text-yellow-400", children: [
+    /* @__PURE__ */ jsxs32("span", { className: "text-sm text-yellow-400", children: [
       "Version mismatch \u2014 ",
       mismatches,
       " component",
@@ -6156,43 +6209,43 @@ function StatusOverview({
   const resetMenuDropdownRef = useDropdownMaxHeight(showResetMenu);
   useClickOutside(resetMenuRef, showResetMenu, () => setShowResetMenu(false));
   const getLabel = (comp) => componentLabels?.[comp] ?? comp.charAt(0).toUpperCase() + comp.slice(1);
-  return /* @__PURE__ */ jsxs31("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs31("div", { className: "bg-[#181825] rounded-lg p-4 border border-amber-500/30", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-3 mb-3", children: [
+  return /* @__PURE__ */ jsxs32("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "bg-neutral-900 rounded-lg p-4 border border-amber-500/30", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-3 mb-3", children: [
         /* @__PURE__ */ jsx38(Archive, { className: "w-5 h-5 text-amber-400" }),
-        /* @__PURE__ */ jsx38("h3", { className: "text-[#cdd6f4] font-medium", children: "Bundled Seed (App Distribution)" }),
+        /* @__PURE__ */ jsx38("h3", { className: "text-neutral-300 font-medium", children: "Bundled Seed (App Distribution)" }),
         status?.seed.meta && renderVersionBadge(status.seed.meta, "bg-amber-500/20 text-amber-400")
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
-        /* @__PURE__ */ jsxs31("div", { children: [
-          /* @__PURE__ */ jsx38("p", { className: "text-[#6c7086]", children: "Status" }),
+      /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-2 gap-4 text-sm", children: [
+        /* @__PURE__ */ jsxs32("div", { children: [
+          /* @__PURE__ */ jsx38("p", { className: "text-neutral-500", children: "Status" }),
           /* @__PURE__ */ jsx38("p", { className: status?.seed.exists ? "text-green-400" : "text-red-400", children: status?.seed.exists ? "Found" : "Missing" })
         ] }),
-        /* @__PURE__ */ jsxs31("div", { children: [
-          /* @__PURE__ */ jsx38("p", { className: "text-[#6c7086]", children: "Size (compressed)" }),
-          /* @__PURE__ */ jsx38("p", { className: "text-[#cdd6f4]", children: formatBytes(status?.seed.sizeBytes ?? 0) })
+        /* @__PURE__ */ jsxs32("div", { children: [
+          /* @__PURE__ */ jsx38("p", { className: "text-neutral-500", children: "Size (compressed)" }),
+          /* @__PURE__ */ jsx38("p", { className: "text-neutral-300", children: formatBytes(status?.seed.sizeBytes ?? 0) })
         ] }),
-        /* @__PURE__ */ jsxs31("div", { children: [
-          /* @__PURE__ */ jsx38("p", { className: "text-[#6c7086]", children: "Modified" }),
-          /* @__PURE__ */ jsx38("p", { className: "text-[#cdd6f4]", children: status?.seed.modifiedAt ? formatDate(status.seed.modifiedAt) : "N/A" })
+        /* @__PURE__ */ jsxs32("div", { children: [
+          /* @__PURE__ */ jsx38("p", { className: "text-neutral-500", children: "Modified" }),
+          /* @__PURE__ */ jsx38("p", { className: "text-neutral-300", children: status?.seed.modifiedAt ? formatDate(status.seed.modifiedAt) : "N/A" })
         ] })
       ] }),
-      !devtools && /* @__PURE__ */ jsx38("p", { className: "text-xs text-[#585b70] mt-3", children: "A compressed archive shipped with every release containing default configuration and templates. On first launch, the seed is extracted to initialize your local files." })
+      !devtools && /* @__PURE__ */ jsx38("p", { className: "text-xs text-neutral-600 mt-3", children: "A compressed archive shipped with every release containing default configuration and templates. On first launch, the seed is extracted to initialize your local files." })
     ] }),
     status?.goldenMeta && status?.liveMeta && /* @__PURE__ */ jsx38(SyncStatusBanner, { goldenMeta: status.goldenMeta, liveMeta: status.liveMeta, components }),
-    /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-2 gap-4", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "bg-[#181825] rounded-lg p-4 border border-blue-500/30", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 mb-3", children: [
+    /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "bg-neutral-900 rounded-lg p-4 border border-blue-500/30", children: [
+        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 mb-3", children: [
           /* @__PURE__ */ jsx38("div", { className: "w-3 h-3 rounded-full bg-blue-400" }),
-          /* @__PURE__ */ jsx38("h4", { className: "text-[#cdd6f4] font-medium", children: "Golden (Reference)" }),
+          /* @__PURE__ */ jsx38("h4", { className: "text-neutral-300 font-medium", children: "Golden (Reference)" }),
           renderVersionBadge(status?.goldenMeta, "bg-blue-500/20 text-blue-400")
         ] }),
         /* @__PURE__ */ jsx38("div", { className: "space-y-2 text-sm", children: components.map((comp) => {
           const version = getComponentVersion(status?.goldenMeta, comp);
           const dirKey = `${comp}Golden`;
           const dirExists = status?.directories[dirKey]?.exists ?? false;
-          return /* @__PURE__ */ jsxs31("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ jsx38("span", { className: "text-[#6c7086]", children: getLabel(comp) }),
+          return /* @__PURE__ */ jsxs32("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsx38("span", { className: "text-neutral-500", children: getLabel(comp) }),
             /* @__PURE__ */ jsx38(
               VersionStatus,
               {
@@ -6204,14 +6257,14 @@ function StatusOverview({
             )
           ] }, comp);
         }) }),
-        !devtools && /* @__PURE__ */ jsx38("p", { className: "text-xs text-[#585b70] mt-3", children: "Reference copy extracted from the bundled seed. Always overwritten during app updates to match the latest release. Do not edit directly." })
+        !devtools && /* @__PURE__ */ jsx38("p", { className: "text-xs text-neutral-600 mt-3", children: "Reference copy extracted from the bundled seed. Always overwritten during app updates to match the latest release. Do not edit directly." })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "bg-[#181825] rounded-lg p-4 border border-green-500/30", children: [
-        /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 mb-3", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "bg-neutral-900 rounded-lg p-4 border border-green-500/30", children: [
+        /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 mb-3", children: [
           /* @__PURE__ */ jsx38("div", { className: "w-3 h-3 rounded-full bg-green-400" }),
-          /* @__PURE__ */ jsx38("h4", { className: "text-[#cdd6f4] font-medium", children: "Live (Working Copy)" }),
+          /* @__PURE__ */ jsx38("h4", { className: "text-neutral-300 font-medium", children: "Live (Working Copy)" }),
           renderVersionBadge(status?.liveMeta, "bg-green-500/20 text-green-400"),
-          /* @__PURE__ */ jsxs31("div", { className: "ml-auto relative", ref: resetMenuRef, children: [
+          /* @__PURE__ */ jsxs32("div", { className: "ml-auto relative", ref: resetMenuRef, children: [
             /* @__PURE__ */ jsx38(
               IconButton,
               {
@@ -6223,7 +6276,7 @@ function StatusOverview({
                 tooltip: { title: "Reset options", description: "Reset live files to golden" }
               }
             ),
-            showResetMenu && /* @__PURE__ */ jsxs31("div", { ref: resetMenuDropdownRef, className: "absolute right-0 top-full mt-1 w-56 bg-[#1e1e2e] border border-[#313244] rounded-lg shadow-xl z-50 py-1 overflow-hidden", children: [
+            showResetMenu && /* @__PURE__ */ jsxs32("div", { ref: resetMenuDropdownRef, className: "absolute right-0 top-full mt-1 w-56 bg-neutral-850 border border-neutral-700 rounded-lg shadow-xl z-50 py-1 overflow-hidden", children: [
               /* @__PURE__ */ jsx38(
                 "button",
                 {
@@ -6231,19 +6284,19 @@ function StatusOverview({
                     onResetAll();
                     setShowResetMenu(false);
                   },
-                  className: "w-full text-left px-3 py-2 text-sm text-[#cdd6f4] hover:bg-[#313244] transition-colors",
+                  className: "w-full text-left px-3 py-2 text-sm text-neutral-300 hover:bg-neutral-700 transition-colors",
                   children: "Reset All to Golden"
                 }
               ),
-              /* @__PURE__ */ jsx38("div", { className: "border-t border-[#313244] my-1" }),
-              components.map((comp) => /* @__PURE__ */ jsxs31(
+              /* @__PURE__ */ jsx38("div", { className: "border-t border-neutral-700 my-1" }),
+              components.map((comp) => /* @__PURE__ */ jsxs32(
                 "button",
                 {
                   onClick: () => {
                     onResetComponent(comp);
                     setShowResetMenu(false);
                   },
-                  className: "w-full text-left px-3 py-2 text-sm text-[#a6adc8] hover:bg-[#313244] transition-colors",
+                  className: "w-full text-left px-3 py-2 text-sm text-neutral-400 hover:bg-neutral-700 transition-colors",
                   children: [
                     "Reset ",
                     getLabel(comp)
@@ -6260,9 +6313,9 @@ function StatusOverview({
           const dirKey = `${comp}Live`;
           const dirExists = status?.directories[dirKey]?.exists ?? false;
           const mismatch = !!(goldenV && liveV && goldenV !== liveV);
-          return /* @__PURE__ */ jsxs31("div", { className: "flex justify-between items-center", children: [
-            /* @__PURE__ */ jsx38("span", { className: "text-[#6c7086]", children: getLabel(comp) }),
-            /* @__PURE__ */ jsxs31("span", { className: "flex items-center gap-2", children: [
+          return /* @__PURE__ */ jsxs32("div", { className: "flex justify-between items-center", children: [
+            /* @__PURE__ */ jsx38("span", { className: "text-neutral-500", children: getLabel(comp) }),
+            /* @__PURE__ */ jsxs32("span", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx38(VersionStatus, { exists: dirExists || !!liveV, version: liveV, mismatch }),
               /* @__PURE__ */ jsx38(
                 IconButton,
@@ -6278,42 +6331,42 @@ function StatusOverview({
             ] })
           ] }, comp);
         }) }),
-        !devtools && /* @__PURE__ */ jsx38("p", { className: "text-xs text-[#585b70] mt-3", children: "Your active working copy \u2014 what the app uses at runtime. Customizations are made here and preserved across app updates." })
+        !devtools && /* @__PURE__ */ jsx38("p", { className: "text-xs text-neutral-600 mt-3", children: "Your active working copy \u2014 what the app uses at runtime. Customizations are made here and preserved across app updates." })
       ] })
     ] }),
-    !devtools && /* @__PURE__ */ jsxs31("div", { className: "bg-[#181825]/50 border border-[#313244] rounded-lg p-4", children: [
-      /* @__PURE__ */ jsxs31("p", { className: "text-xs font-medium text-[#a6adc8] mb-4", children: [
+    !devtools && /* @__PURE__ */ jsxs32("div", { className: "bg-neutral-900/50 border border-neutral-700 rounded-lg p-4", children: [
+      /* @__PURE__ */ jsxs32("p", { className: "text-xs font-medium text-neutral-400 mb-4", children: [
         "How updates work ",
-        /* @__PURE__ */ jsxs31("span", { className: "font-normal text-[#585b70]", children: [
+        /* @__PURE__ */ jsxs32("span", { className: "font-normal text-neutral-600", children: [
           "\u2014 checked per component (",
           components.map(getLabel).join(", "),
           ")"
         ] })
       ] }),
-      /* @__PURE__ */ jsxs31("div", { className: "grid grid-cols-[auto_auto_auto_auto_auto_auto_auto] items-center gap-x-2 text-xs", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "grid grid-cols-[auto_auto_auto_auto_auto_auto_auto] items-center gap-x-2 text-xs", children: [
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
-        /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] text-base justify-self-center self-end mb-[-4px]", children: "\u2197" }),
-        /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 text-base justify-self-center self-end mb-[-4px]", children: "\u2197" }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsx38(Tooltip, { content: { title: "Live updated", description: "No local customizations were found for this component, so it was automatically updated to match the new golden version." }, multiline: true, maxWidth: 260, children: /* @__PURE__ */ jsx38("div", { className: "rounded bg-green-500/10 border border-green-500/20 px-3 py-1.5 whitespace-nowrap w-full text-center cursor-help", children: /* @__PURE__ */ jsx38("span", { className: "text-green-400 font-medium", children: "Live updated" }) }) }),
-          /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] mt-0.5", children: "no changes" })
+          /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 mt-0.5", children: "no changes" })
         ] }),
-        /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsx38(Tooltip, { content: { title: "App Update", description: "A new version is installed, shipping a fresh seed archive with updated configuration and templates." }, multiline: true, maxWidth: 260, children: /* @__PURE__ */ jsx38("div", { className: "rounded bg-amber-500/10 border border-amber-500/20 px-3 py-1.5 text-center w-full cursor-help", children: /* @__PURE__ */ jsx38("span", { className: "text-amber-400 font-medium", children: "App Update" }) }) }),
-          /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] mt-0.5", children: "ships new seed" })
+          /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 mt-0.5", children: "ships new seed" })
         ] }),
-        /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] text-lg self-start justify-self-center px-2", children: "\u2192" }),
-        /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 text-lg self-start justify-self-center px-2", children: "\u2192" }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsx38(Tooltip, { content: { title: "Golden overwritten", description: "The golden reference directory is always overwritten with the latest seed. This ensures golden always reflects the newest release." }, multiline: true, maxWidth: 260, children: /* @__PURE__ */ jsx38("div", { className: "rounded bg-blue-500/10 border border-blue-500/20 px-3 py-1.5 text-center w-full cursor-help", children: /* @__PURE__ */ jsx38("span", { className: "text-blue-400 font-medium", children: "Golden" }) }) }),
-          /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] mt-0.5", children: "overwritten" })
+          /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 mt-0.5", children: "overwritten" })
         ] }),
-        /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] text-lg self-start justify-self-center px-2", children: "\u2192" }),
-        /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsx38(Tooltip, { content: { title: "Compare per component", description: "Each component is compared individually. If the live version has local changes, it is left untouched." }, multiline: true, maxWidth: 260, children: /* @__PURE__ */ jsx38("div", { className: "rounded bg-[#313244]/50 border border-[#313244] px-3 py-1.5 text-center w-full cursor-help", children: /* @__PURE__ */ jsx38("span", { className: "text-[#a6adc8] font-medium", children: "Compare" }) }) }),
-          /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] mt-0.5", children: "per component" })
+        /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 text-lg self-start justify-self-center px-2", children: "\u2192" }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center", children: [
+          /* @__PURE__ */ jsx38(Tooltip, { content: { title: "Compare per component", description: "Each component is compared individually. If the live version has local changes, it is left untouched." }, multiline: true, maxWidth: 260, children: /* @__PURE__ */ jsx38("div", { className: "rounded bg-neutral-700/50 border border-neutral-700 px-3 py-1.5 text-center w-full cursor-help", children: /* @__PURE__ */ jsx38("span", { className: "text-neutral-400 font-medium", children: "Compare" }) }) }),
+          /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 mt-0.5", children: "per component" })
         ] }),
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
@@ -6322,22 +6375,22 @@ function StatusOverview({
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
         /* @__PURE__ */ jsx38("span", {}),
-        /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] text-base justify-self-center self-start mt-[-20px]", children: "\u2198" }),
-        /* @__PURE__ */ jsxs31("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 text-base justify-self-center self-start mt-[-20px]", children: "\u2198" }),
+        /* @__PURE__ */ jsxs32("div", { className: "flex flex-col items-center", children: [
           /* @__PURE__ */ jsx38(Tooltip, { content: { title: "Live unchanged", description: "Local customizations were detected for this component, so it was left untouched. Use the File Diff tab to review differences, or reset it manually." }, multiline: true, maxWidth: 260, children: /* @__PURE__ */ jsx38("div", { className: "rounded bg-yellow-500/10 border border-yellow-500/20 px-3 py-1.5 whitespace-nowrap w-full text-center cursor-help", children: /* @__PURE__ */ jsx38("span", { className: "text-yellow-400 font-medium", children: "Live unchanged" }) }) }),
-          /* @__PURE__ */ jsx38("span", { className: "text-[#585b70] mt-0.5", children: "has changes" })
+          /* @__PURE__ */ jsx38("span", { className: "text-neutral-600 mt-0.5", children: "has changes" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx38("p", { className: "text-xs text-[#585b70] mt-3", children: "When a component has no local changes, it is automatically updated to match the new golden version. Components with customizations are left untouched to preserve your edits \u2014 use the File Diff tab to review differences and selectively apply changes. You can reset any component to its golden version at any time using the reset buttons above." })
+      /* @__PURE__ */ jsx38("p", { className: "text-xs text-neutral-600 mt-3", children: "When a component has no local changes, it is automatically updated to match the new golden version. Components with customizations are left untouched to preserve your edits \u2014 use the File Diff tab to review differences and selectively apply changes. You can reset any component to its golden version at any time using the reset buttons above." })
     ] }),
-    devtools && manifest && /* @__PURE__ */ jsxs31("div", { className: "bg-[#181825] rounded-lg p-4 border border-[#313244]", children: [
-      /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2 mb-3", children: [
-        /* @__PURE__ */ jsx38(Archive, { className: "w-4 h-4 text-[#6c7086]" }),
-        /* @__PURE__ */ jsx38("h4", { className: "text-[#cdd6f4] font-medium", children: "Local Snapshots" })
+    devtools && manifest && /* @__PURE__ */ jsxs32("div", { className: "bg-neutral-900 rounded-lg p-4 border border-neutral-700", children: [
+      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2 mb-3", children: [
+        /* @__PURE__ */ jsx38(Archive, { className: "w-4 h-4 text-neutral-500" }),
+        /* @__PURE__ */ jsx38("h4", { className: "text-neutral-300 font-medium", children: "Local Snapshots" })
       ] }),
-      /* @__PURE__ */ jsx38("div", { className: "flex gap-6 text-sm", children: /* @__PURE__ */ jsxs31("div", { children: [
-        /* @__PURE__ */ jsx38("span", { className: "text-[#6c7086]", children: "Count: " }),
-        /* @__PURE__ */ jsx38("span", { className: "text-[#cdd6f4]", children: manifest.snapshots.length })
+      /* @__PURE__ */ jsx38("div", { className: "flex gap-6 text-sm", children: /* @__PURE__ */ jsxs32("div", { children: [
+        /* @__PURE__ */ jsx38("span", { className: "text-neutral-500", children: "Count: " }),
+        /* @__PURE__ */ jsx38("span", { className: "text-neutral-300", children: manifest.snapshots.length })
       ] }) })
     ] })
   ] });
@@ -6357,7 +6410,7 @@ import {
   FileCode as FileCode4
 } from "lucide-react";
 import { DiffEditor } from "@monaco-editor/react";
-import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs33 } from "react/jsx-runtime";
 var COMPONENT_COLORS = [
   { text: "text-blue-400", pillBg: "bg-blue-500/20", bg: "bg-blue-500/5", hoverBg: "hover:bg-blue-500/10", border: "border-blue-500/40", line: "border-blue-500/20" },
   { text: "text-purple-400", pillBg: "bg-purple-500/20", bg: "bg-purple-500/5", hoverBg: "hover:bg-purple-500/10", border: "border-purple-500/40", line: "border-purple-500/20" },
@@ -6386,16 +6439,16 @@ function DiffFileItem({ file, isSelected, onSelect, onReset, resettingFile, anyR
   const statusColor = STATUS_COLORS[file.status] ?? "";
   const statusLabel = STATUS_LABELS[file.status] ?? "";
   const icon = renderFileIcon?.(filename, file.component) ?? /* @__PURE__ */ jsx39(FileCode4, { className: "w-3 h-3 flex-shrink-0 text-blue-400/50" });
-  return /* @__PURE__ */ jsxs32(
+  return /* @__PURE__ */ jsxs33(
     "div",
     {
-      className: `flex items-center transition-colors ${isSelected ? "bg-[#313244]" : "hover:bg-[#1e1e2e]"}`,
+      className: `flex items-center transition-colors ${isSelected ? "bg-neutral-700" : "hover:bg-neutral-850"}`,
       children: [
-        /* @__PURE__ */ jsxs32(
+        /* @__PURE__ */ jsxs33(
           "button",
           {
             onClick: () => onSelect(file),
-            className: `flex-1 flex items-center gap-2 px-3 py-1 text-xs ${isSelected ? "text-[#cdd6f4]" : "text-[#a6adc8]"}`,
+            className: `flex-1 flex items-center gap-2 px-3 py-1 text-xs ${isSelected ? "text-neutral-300" : "text-neutral-400"}`,
             children: [
               icon,
               /* @__PURE__ */ jsx39("span", { className: "truncate", children: filename }),
@@ -6445,25 +6498,25 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }) {
     const fileCount = countFiles2(node);
     const color = getComponentColor(colorIndex);
     const displayLabel = isRoot ? componentLabels?.[label] ?? label.charAt(0).toUpperCase() + label.slice(1) : label;
-    const headerClasses = isRoot ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-sm font-medium` : "text-[#6c7086] hover:bg-[#1e1e2e] px-3 py-1.5";
+    const headerClasses = isRoot ? `${color.text} ${color.hoverBg} border-l-2 ${color.border} ${color.bg} px-3 py-2 text-sm font-medium` : "text-neutral-500 hover:bg-neutral-850 px-3 py-1.5";
     const chevronSize = isRoot ? "w-4 h-4" : "w-3 h-3";
-    const countElement = isRoot ? /* @__PURE__ */ jsx39("span", { className: `ml-auto px-1.5 py-0.5 rounded-full text-[10px] font-medium ${color.pillBg} ${color.text}`, children: fileCount }) : /* @__PURE__ */ jsx39("span", { className: "text-[#585b70] ml-auto", children: fileCount });
+    const countElement = isRoot ? /* @__PURE__ */ jsx39("span", { className: `ml-auto px-1.5 py-0.5 rounded-full text-[10px] font-medium ${color.pillBg} ${color.text}`, children: fileCount }) : /* @__PURE__ */ jsx39("span", { className: "text-neutral-600 ml-auto", children: fileCount });
     const containerLineClass = isRoot ? color.line : lineClass;
-    return /* @__PURE__ */ jsxs32("div", { children: [
-      /* @__PURE__ */ jsxs32(
+    return /* @__PURE__ */ jsxs33("div", { children: [
+      /* @__PURE__ */ jsxs33(
         "button",
         {
           onClick: () => toggleCategory(categoryKey),
           className: `w-full flex items-center gap-2 ${headerClasses} transition-colors cursor-pointer`,
           children: [
             isCollapsed ? /* @__PURE__ */ jsx39(ChevronRight5, { className: chevronSize }) : /* @__PURE__ */ jsx39(ChevronDown8, { className: chevronSize }),
-            isRoot ? null : /* @__PURE__ */ jsx39(Folder6, { className: "w-3 h-3 text-[#585b70]" }),
+            isRoot ? null : /* @__PURE__ */ jsx39(Folder6, { className: "w-3 h-3 text-neutral-600" }),
             displayLabel,
             countElement
           ]
         }
       ),
-      !isCollapsed && /* @__PURE__ */ jsxs32("div", { className: `${isRoot ? "ml-2" : "ml-4"} border-l ${containerLineClass}`, children: [
+      !isCollapsed && /* @__PURE__ */ jsxs33("div", { className: `${isRoot ? "ml-2" : "ml-4"} border-l ${containerLineClass}`, children: [
         node.files.map((file) => /* @__PURE__ */ jsx39(
           DiffFileItem,
           {
@@ -6483,31 +6536,31 @@ function DiffFileTreePanel({ sync, componentLabels, renderFileIcon }) {
       ] })
     ] }, categoryKey);
   };
-  return /* @__PURE__ */ jsxs32("div", { className: "w-72 flex-shrink-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ jsx39("div", { className: "p-3 border-b border-[#313244] flex-shrink-0", children: /* @__PURE__ */ jsxs32("div", { className: "flex gap-3 text-xs", children: [
-      /* @__PURE__ */ jsxs32("span", { className: "text-green-400", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "w-72 flex-shrink-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ jsx39("div", { className: "p-3 border-b border-neutral-700 flex-shrink-0", children: /* @__PURE__ */ jsxs33("div", { className: "flex gap-3 text-xs", children: [
+      /* @__PURE__ */ jsxs33("span", { className: "text-green-400", children: [
         "+",
         diff.summary.added
       ] }),
-      /* @__PURE__ */ jsxs32("span", { className: "text-red-400", children: [
+      /* @__PURE__ */ jsxs33("span", { className: "text-red-400", children: [
         "-",
         diff.summary.removed
       ] }),
-      /* @__PURE__ */ jsxs32("span", { className: "text-yellow-400", children: [
+      /* @__PURE__ */ jsxs33("span", { className: "text-yellow-400", children: [
         "~",
         diff.summary.modified
       ] }),
-      /* @__PURE__ */ jsxs32("span", { className: "text-neutral-400", children: [
+      /* @__PURE__ */ jsxs33("span", { className: "text-neutral-400", children: [
         "=",
         diff.summary.unchanged
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between p-2 border-b border-[#313244] flex-shrink-0", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between p-2 border-b border-neutral-700 flex-shrink-0", children: [
       /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-1", children: ["all", "modified", "added", "removed"].map((filter) => /* @__PURE__ */ jsx39(
         "button",
         {
           onClick: () => setDiffFilter(filter),
-          className: `px-2 py-1 rounded text-xs transition-colors cursor-pointer ${diffFilter === filter ? "bg-[#313244] text-[#cdd6f4]" : "text-[#6c7086] hover:text-[#a6adc8]"}`,
+          className: `px-2 py-1 rounded text-xs transition-colors cursor-pointer ${diffFilter === filter ? "bg-neutral-700 text-neutral-300" : "text-neutral-500 hover:text-neutral-400"}`,
           children: filter === "all" ? "All" : filter.charAt(0).toUpperCase() + filter.slice(1)
         },
         filter
@@ -6544,21 +6597,21 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }) {
     devtools
   } = sync;
   if (!selectedDiffFile) {
-    return /* @__PURE__ */ jsx39("div", { className: "flex-1 min-w-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-center h-full text-sm text-[#6c7086]", children: "Select a file from the tree to view differences" }) });
+    return /* @__PURE__ */ jsx39("div", { className: "flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-center h-full text-sm text-neutral-500", children: "Select a file from the tree to view differences" }) });
   }
   const compLabel = componentLabels?.[selectedDiffFile.component] ?? selectedDiffFile.component;
-  return /* @__PURE__ */ jsxs32("div", { className: "flex-1 min-w-0 bg-[#181825] rounded-lg border border-[#313244] overflow-hidden flex flex-col", children: [
-    /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between px-4 py-2 border-b border-[#313244] flex-shrink-0", children: [
-      /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex-1 min-w-0 bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden flex flex-col", children: [
+    /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between px-4 py-2 border-b border-neutral-700 flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx39(FileCode4, { className: "w-4 h-4 flex-shrink-0 text-blue-400/50" }),
-        /* @__PURE__ */ jsxs32("span", { className: "text-sm text-[#cdd6f4] font-medium", children: [
+        /* @__PURE__ */ jsxs33("span", { className: "text-sm text-neutral-300 font-medium", children: [
           selectedDiffFile.component,
           "/",
           selectedDiffFile.path
         ] }),
         devtools && hasUnsavedChanges && /* @__PURE__ */ jsx39("span", { className: "px-2 py-0.5 bg-amber-500/20 text-amber-400 text-xs rounded", children: "Modified" })
       ] }),
-      /* @__PURE__ */ jsx39("span", { className: "text-xs text-[#6c7086]", children: compLabel })
+      /* @__PURE__ */ jsx39("span", { className: "text-xs text-neutral-500", children: compLabel })
     ] }),
     /* @__PURE__ */ jsx39("div", { className: "flex-1 min-h-0", children: goldenContent !== null || liveContent !== null ? /* @__PURE__ */ jsx39(
       DiffEditor,
@@ -6590,13 +6643,13 @@ function DiffEditorPanel({ sync, componentLabels, monacoTheme }) {
         }
       },
       `diff-${selectedDiffFile.path}-${diffSideBySide}`
-    ) : /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-center h-full text-sm text-[#6c7086]", children: "Loading file content..." }) })
+    ) : /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-center h-full text-sm text-neutral-500", children: "Loading file content..." }) })
   ] });
 }
 function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileIcon }) {
   const { diff, diffLoading, selectedDiffFile, diffSideBySide, setDiffSideBySide, saving, hasUnsavedChanges, handleSaveLiveFile, devtools } = sync;
-  return /* @__PURE__ */ jsxs32("div", { className: "flex flex-col h-full", children: [
-    /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-end mb-4 flex-shrink-0", children: /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-2", children: selectedDiffFile && /* @__PURE__ */ jsxs32(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col h-full", children: [
+    /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-end mb-4 flex-shrink-0", children: /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-2", children: selectedDiffFile && /* @__PURE__ */ jsxs33(Fragment10, { children: [
       /* @__PURE__ */ jsx39(
         IconButton,
         {
@@ -6617,17 +6670,17 @@ function FileDiffViewer({ sync, componentLabels, monacoTheme, renderFileIcon })
         }
       )
     ] }) }) }),
-    diffLoading ? /* @__PURE__ */ jsx39("div", { className: "text-sm text-[#6c7086] text-center py-8", children: "Loading diff..." }) : diff ? /* @__PURE__ */ jsxs32("div", { className: "flex gap-4 flex-1 min-h-[400px]", children: [
+    diffLoading ? /* @__PURE__ */ jsx39("div", { className: "text-sm text-neutral-500 text-center py-8", children: "Loading diff..." }) : diff ? /* @__PURE__ */ jsxs33("div", { className: "flex gap-4 flex-1 min-h-[400px]", children: [
       /* @__PURE__ */ jsx39(DiffFileTreePanel, { sync, componentLabels, renderFileIcon }),
       /* @__PURE__ */ jsx39(DiffEditorPanel, { sync, componentLabels, monacoTheme })
-    ] }) : /* @__PURE__ */ jsx39("div", { className: "text-sm text-[#6c7086] text-center py-8", children: "No diff data available. Click refresh to load." })
+    ] }) : /* @__PURE__ */ jsx39("div", { className: "text-sm text-neutral-500 text-center py-8", children: "No diff data available. Click refresh to load." })
   ] });
 }
 
 // components/sections/golden-snapshots/snapshot-manager.tsx
 import { useState as useState20 } from "react";
 import { Archive as Archive2, Pin as Pin4, PinOff, Trash2 as Trash24, RotateCcw as RotateCcw5, Plus as Plus4, Loader2 as Loader26 } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs34 } from "react/jsx-runtime";
 function SnapshotManager({ sync }) {
   const {
     manifest,
@@ -6658,16 +6711,16 @@ function SnapshotManager({ sync }) {
     setDeleteTarget(null);
   };
   if (manifestLoading && !manifest) {
-    return /* @__PURE__ */ jsx40("div", { className: "text-sm text-[#6c7086] text-center py-8", children: "Loading snapshots..." });
+    return /* @__PURE__ */ jsx40("div", { className: "text-sm text-neutral-500 text-center py-8", children: "Loading snapshots..." });
   }
-  return /* @__PURE__ */ jsxs33("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs33("div", { className: "bg-[#181825] rounded-lg p-4 border border-[#313244]", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-3 mb-3", children: [
+  return /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "bg-neutral-900 rounded-lg p-4 border border-neutral-700", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3 mb-3", children: [
         /* @__PURE__ */ jsx40(Plus4, { className: "w-5 h-5 text-green-400" }),
-        /* @__PURE__ */ jsx40("h4", { className: "text-[#cdd6f4] font-medium", children: "Create Snapshot" })
+        /* @__PURE__ */ jsx40("h4", { className: "text-neutral-300 font-medium", children: "Create Snapshot" })
       ] }),
-      /* @__PURE__ */ jsx40("p", { className: "text-xs text-[#585b70] mb-3", children: "Archives the current live state. If components differ from golden, their patch version is auto-bumped." }),
-      /* @__PURE__ */ jsxs33("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx40("p", { className: "text-xs text-neutral-600 mb-3", children: "Archives the current live state. If components differ from golden, their patch version is auto-bumped." }),
+      /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx40("div", { className: "flex-1", children: /* @__PURE__ */ jsx40(
           Input,
           {
@@ -6691,12 +6744,12 @@ function SnapshotManager({ sync }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs33("div", { className: "bg-[#181825] rounded-lg border border-[#313244] overflow-hidden", children: [
-      /* @__PURE__ */ jsxs33("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[#313244]", children: [
-        /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx40(Archive2, { className: "w-4 h-4 text-[#6c7086]" }),
-          /* @__PURE__ */ jsx40("h4", { className: "text-[#cdd6f4] font-medium", children: "Snapshots" }),
-          /* @__PURE__ */ jsxs33("span", { className: "text-xs text-[#6c7086]", children: [
+    /* @__PURE__ */ jsxs34("div", { className: "bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between px-4 py-3 border-b border-neutral-700", children: [
+        /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx40(Archive2, { className: "w-4 h-4 text-neutral-500" }),
+          /* @__PURE__ */ jsx40("h4", { className: "text-neutral-300 font-medium", children: "Snapshots" }),
+          /* @__PURE__ */ jsxs34("span", { className: "text-xs text-neutral-500", children: [
             "(",
             manifest?.snapshots.length ?? 0,
             ")"
@@ -6714,27 +6767,27 @@ function SnapshotManager({ sync }) {
           }
         )
       ] }),
-      !manifest || manifest.snapshots.length === 0 ? /* @__PURE__ */ jsx40("div", { className: "text-sm text-[#6c7086] text-center py-8", children: "No snapshots yet" }) : /* @__PURE__ */ jsx40("div", { className: "divide-y divide-[#313244]", children: [...manifest.snapshots].reverse().map((snap) => /* @__PURE__ */ jsxs33(
+      !manifest || manifest.snapshots.length === 0 ? /* @__PURE__ */ jsx40("div", { className: "text-sm text-neutral-500 text-center py-8", children: "No snapshots yet" }) : /* @__PURE__ */ jsx40("div", { className: "divide-y divide-neutral-700", children: [...manifest.snapshots].reverse().map((snap) => /* @__PURE__ */ jsxs34(
         "div",
         {
           className: `flex items-center gap-3 px-4 py-3 ${snap.version === manifest.activeVersion ? "bg-green-500/5" : ""}`,
           children: [
-            /* @__PURE__ */ jsxs33("div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsxs33("span", { className: "text-sm font-mono text-[#cdd6f4]", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxs34("span", { className: "text-sm font-mono text-neutral-300", children: [
                   "v",
                   snap.version
                 ] }),
                 snap.version === manifest.activeVersion && /* @__PURE__ */ jsx40("span", { className: "px-1.5 py-0.5 bg-green-500/20 text-green-400 text-[10px] rounded font-medium", children: "active" }),
                 snap.pinned && /* @__PURE__ */ jsx40(Pin4, { className: "w-3 h-3 text-amber-400" }),
-                snap.metaVersion && /* @__PURE__ */ jsx40("span", { className: "text-xs text-[#585b70] font-mono", children: snap.metaVersion })
+                snap.metaVersion && /* @__PURE__ */ jsx40("span", { className: "text-xs text-neutral-600 font-mono", children: snap.metaVersion })
               ] }),
-              /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2 mt-0.5", children: [
-                /* @__PURE__ */ jsx40("span", { className: "text-xs text-[#585b70]", children: formatDate(snap.createdAt) }),
-                snap.description && /* @__PURE__ */ jsx40("span", { className: "text-xs text-[#6c7086] truncate", children: snap.description })
+              /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2 mt-0.5", children: [
+                /* @__PURE__ */ jsx40("span", { className: "text-xs text-neutral-600", children: formatDate(snap.createdAt) }),
+                snap.description && /* @__PURE__ */ jsx40("span", { className: "text-xs text-neutral-500 truncate", children: snap.description })
               ] })
             ] }),
-            /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
+            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-1 flex-shrink-0", children: [
               /* @__PURE__ */ jsx40(
                 IconButton,
                 {
@@ -6815,7 +6868,7 @@ function SnapshotManager({ sync }) {
 // components/sections/golden-snapshots/version-manager.tsx
 import { useState as useState21 } from "react";
 import { Tag as Tag4, ArrowUp as ArrowUp4, Loader2 as Loader27 } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs35 } from "react/jsx-runtime";
 function VersionManager({ sync, components, componentLabels }) {
   const { status, handleUpdateComponentVersion, handleBumpVersion } = sync;
   const [globalVersion, setGlobalVersion] = useState21("");
@@ -6849,15 +6902,15 @@ function VersionManager({ sync, components, componentLabels }) {
     setComponentVersion(current);
     setComponentDescription("");
   };
-  return /* @__PURE__ */ jsxs34("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs34("div", { className: "bg-[#181825] rounded-lg p-4 border border-teal-500/30", children: [
-      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-3 mb-3", children: [
+  return /* @__PURE__ */ jsxs35("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "bg-neutral-900 rounded-lg p-4 border border-teal-500/30", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-3 mb-3", children: [
         /* @__PURE__ */ jsx41(Tag4, { className: "w-5 h-5 text-teal-400" }),
-        /* @__PURE__ */ jsx41("h4", { className: "text-[#cdd6f4] font-medium", children: "Golden Version" }),
+        /* @__PURE__ */ jsx41("h4", { className: "text-neutral-300 font-medium", children: "Golden Version" }),
         status?.goldenMeta && /* @__PURE__ */ jsx41("span", { className: "px-2 py-0.5 bg-teal-500/20 text-teal-400 text-xs rounded font-mono", children: status.goldenMeta.version })
       ] }),
-      /* @__PURE__ */ jsx41("p", { className: "text-xs text-[#585b70] mb-3", children: "Bump the overall golden version number. This updates the top-level version in meta.json." }),
-      /* @__PURE__ */ jsxs34("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx41("p", { className: "text-xs text-neutral-600 mb-3", children: "Bump the overall golden version number. This updates the top-level version in meta.json." }),
+      /* @__PURE__ */ jsxs35("div", { className: "flex gap-2", children: [
         /* @__PURE__ */ jsx41("div", { className: "w-32", children: /* @__PURE__ */ jsx41(
           Input,
           {
@@ -6892,25 +6945,25 @@ function VersionManager({ sync, components, componentLabels }) {
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs34("div", { className: "bg-[#181825] rounded-lg border border-[#313244] overflow-hidden", children: [
-      /* @__PURE__ */ jsxs34("div", { className: "px-4 py-3 border-b border-[#313244]", children: [
-        /* @__PURE__ */ jsx41("h4", { className: "text-[#cdd6f4] font-medium", children: "Component Versions" }),
-        /* @__PURE__ */ jsx41("p", { className: "text-xs text-[#585b70] mt-1", children: "Update individual component versions. Click a component to edit." })
+    /* @__PURE__ */ jsxs35("div", { className: "bg-neutral-900 rounded-lg border border-neutral-700 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "px-4 py-3 border-b border-neutral-700", children: [
+        /* @__PURE__ */ jsx41("h4", { className: "text-neutral-300 font-medium", children: "Component Versions" }),
+        /* @__PURE__ */ jsx41("p", { className: "text-xs text-neutral-600 mt-1", children: "Update individual component versions. Click a component to edit." })
       ] }),
-      /* @__PURE__ */ jsx41("div", { className: "divide-y divide-[#313244]", children: components.map((comp) => {
+      /* @__PURE__ */ jsx41("div", { className: "divide-y divide-neutral-700", children: components.map((comp) => {
         const currentVersion = status?.goldenMeta?.components[comp]?.version;
         const liveVersion = status?.liveMeta?.components[comp]?.version;
         const isEditing = editingComponent === comp;
         const mismatch = currentVersion && liveVersion && currentVersion !== liveVersion;
-        return /* @__PURE__ */ jsxs34("div", { className: "px-4 py-3", children: [
-          /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between", children: [
-            /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx41("span", { className: "text-sm text-[#cdd6f4]", children: getLabel(comp) }),
-              currentVersion && /* @__PURE__ */ jsxs34("span", { className: "text-xs font-mono text-[#6c7086]", children: [
+        return /* @__PURE__ */ jsxs35("div", { className: "px-4 py-3", children: [
+          /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx41("span", { className: "text-sm text-neutral-300", children: getLabel(comp) }),
+              currentVersion && /* @__PURE__ */ jsxs35("span", { className: "text-xs font-mono text-neutral-500", children: [
                 "v",
                 currentVersion
               ] }),
-              mismatch && /* @__PURE__ */ jsxs34("span", { className: "text-[10px] text-yellow-400", children: [
+              mismatch && /* @__PURE__ */ jsxs35("span", { className: "text-[10px] text-yellow-400", children: [
                 "(live: v",
                 liveVersion,
                 ")"
@@ -6927,7 +6980,7 @@ function VersionManager({ sync, components, componentLabels }) {
               }
             )
           ] }),
-          isEditing && /* @__PURE__ */ jsxs34("div", { className: "flex gap-2 mt-2", children: [
+          isEditing && /* @__PURE__ */ jsxs35("div", { className: "flex gap-2 mt-2", children: [
             /* @__PURE__ */ jsx41("div", { className: "w-28", children: /* @__PURE__ */ jsx41(
               Input,
               {
@@ -6978,7 +7031,7 @@ function VersionManager({ sync, components, componentLabels }) {
 }
 
 // components/sections/golden-snapshots/golden-sync-panel.tsx
-import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs36 } from "react/jsx-runtime";
 function GoldenSyncPanel({
   api,
   components,
@@ -7054,12 +7107,12 @@ function GoldenSyncPanel({
     { id: "versions", label: "Versions", icon: /* @__PURE__ */ jsx42(Tag5, { className: "w-4 h-4" }), color: "text-teal-400", devtoolsOnly: true }
   ];
   const visibleTabs = tabs.filter((t) => !t.devtoolsOnly || devtools);
-  return /* @__PURE__ */ jsxs35("div", { className: `flex-1 flex flex-col ${activeTab === "diff" ? "overflow-hidden" : "overflow-y-auto"}`, children: [
-    /* @__PURE__ */ jsxs35("div", { className: "flex-shrink-0", children: [
-      /* @__PURE__ */ jsxs35("div", { className: "flex items-start justify-between mb-4", children: [
-        /* @__PURE__ */ jsxs35("div", { className: "space-y-1", children: [
-          /* @__PURE__ */ jsx42("h3", { className: "text-base font-semibold text-[#cdd6f4]", children: TAB_DESCRIPTIONS[activeTab].title }),
-          /* @__PURE__ */ jsx42("p", { className: "text-sm text-[#a6adc8]", children: TAB_DESCRIPTIONS[activeTab].description })
+  return /* @__PURE__ */ jsxs36("div", { className: `flex-1 flex flex-col ${activeTab === "diff" ? "overflow-hidden" : "overflow-y-auto"}`, children: [
+    /* @__PURE__ */ jsxs36("div", { className: "flex-shrink-0", children: [
+      /* @__PURE__ */ jsxs36("div", { className: "flex items-start justify-between mb-4", children: [
+        /* @__PURE__ */ jsxs36("div", { className: "space-y-1", children: [
+          /* @__PURE__ */ jsx42("h3", { className: "text-base font-semibold text-neutral-300", children: TAB_DESCRIPTIONS[activeTab].title }),
+          /* @__PURE__ */ jsx42("p", { className: "text-sm text-neutral-400", children: TAB_DESCRIPTIONS[activeTab].description })
         ] }),
         /* @__PURE__ */ jsx42(
           IconButton,
@@ -7073,7 +7126,7 @@ function GoldenSyncPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx42("div", { className: "flex", children: visibleTabs.map((tab) => /* @__PURE__ */ jsxs35(
+      /* @__PURE__ */ jsx42("div", { className: "flex", children: visibleTabs.map((tab) => /* @__PURE__ */ jsxs36(
         "button",
         {
           onClick: () => handleTabChange(tab.id),
@@ -7085,16 +7138,16 @@ function GoldenSyncPanel({
         },
         tab.id
       )) }),
-      error && /* @__PURE__ */ jsx42("div", { className: "bg-red-500/10 border border-red-500/30 rounded-lg p-4 mt-4", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-3", children: [
+      error && /* @__PURE__ */ jsx42("div", { className: "bg-red-500/10 border border-red-500/30 rounded-lg p-4 mt-4", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx42(AlertCircle5, { className: "w-5 h-5 text-red-400 flex-shrink-0" }),
         /* @__PURE__ */ jsx42("p", { className: "text-red-400 text-sm", children: error })
       ] }) }),
-      lastAction && /* @__PURE__ */ jsx42("div", { className: "bg-green-500/10 border border-green-500/30 rounded-lg p-4 mt-4", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-3", children: [
+      lastAction && /* @__PURE__ */ jsx42("div", { className: "bg-green-500/10 border border-green-500/30 rounded-lg p-4 mt-4", children: /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx42(Check11, { className: "w-5 h-5 text-green-400 flex-shrink-0" }),
         /* @__PURE__ */ jsx42("p", { className: "text-green-400 text-sm", children: lastAction })
       ] }) })
     ] }),
-    /* @__PURE__ */ jsx42("div", { className: activeTab === "diff" ? "flex-1 min-h-0 mt-4" : "space-y-6 mt-4", children: loading && activeTab === "status" ? /* @__PURE__ */ jsx42("div", { className: "text-sm text-[#6c7086] text-center py-8", children: "Loading..." }) : activeTab === "status" ? /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx42("div", { className: activeTab === "diff" ? "flex-1 min-h-0 mt-4" : "space-y-6 mt-4", children: loading && activeTab === "status" ? /* @__PURE__ */ jsx42("div", { className: "text-sm text-neutral-500 text-center py-8", children: "Loading..." }) : activeTab === "status" ? /* @__PURE__ */ jsx42(
       StatusOverview,
       {
         status,
@@ -7249,7 +7302,7 @@ function useToolsPaths({ api, tools, onToolConfigChange }) {
 }
 
 // components/sections/ai-tools-paths/tools-paths-panel.tsx
-import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs37 } from "react/jsx-runtime";
 function ToolsPathsPanel({
   api,
   tools,
@@ -7267,9 +7320,9 @@ function ToolsPathsPanel({
     validateAndUpdatePath,
     toggleEnabled
   } = useToolsPaths({ api, tools, onToolConfigChange });
-  return /* @__PURE__ */ jsxs36("div", { className: cn("w-full", className), children: [
-    /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between mb-4", children: [
-      /* @__PURE__ */ jsx43("p", { className: "text-xs text-[#6c7086] leading-relaxed max-w-xl", children: "Configure CLI paths for AI coding assistants. Specify executable locations to enable integration with your development workflow." }),
+  return /* @__PURE__ */ jsxs37("div", { className: cn("w-full", className), children: [
+    /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx43("p", { className: "text-xs text-neutral-500 leading-relaxed max-w-xl", children: "Configure CLI paths for AI coding assistants. Specify executable locations to enable integration with your development workflow." }),
       /* @__PURE__ */ jsx43(
         IconButton,
         {
@@ -7285,25 +7338,25 @@ function ToolsPathsPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx43("div", { className: "bg-[#181825] border border-[#313244] rounded-lg divide-y divide-[#313244]", children: tools.map((tool) => {
+    /* @__PURE__ */ jsx43("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg divide-y divide-neutral-700", children: tools.map((tool) => {
       const isRefreshing = refreshingTools.has(tool.id);
       const isEnabled = tool.enabled;
       const displayPath = tool.binaryPath || tool.detectedPath || "";
       const hasBeenScanned = scannedTools.has(tool.id) && tool.detected;
-      return /* @__PURE__ */ jsxs36(
+      return /* @__PURE__ */ jsxs37(
         "div",
         {
           className: cn("p-4 space-y-2", !tool.detected && "opacity-60"),
           children: [
-            /* @__PURE__ */ jsxs36("div", { className: "flex items-center justify-between", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "relative flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "relative flex items-center gap-2", children: [
                 renderToolIcon?.(tool.id),
                 /* @__PURE__ */ jsx43(
                   "span",
                   {
                     className: cn(
                       "font-medium",
-                      tool.detected && !isEnabled ? "text-[#6c7086]" : "text-[#cdd6f4]"
+                      tool.detected && !isEnabled ? "text-neutral-500" : "text-neutral-300"
                     ),
                     children: tool.name
                   }
@@ -7313,15 +7366,15 @@ function ToolsPathsPanel({
                   {
                     className: "absolute inset-0 flex items-center pointer-events-none",
                     "aria-hidden": "true",
-                    children: /* @__PURE__ */ jsx43("div", { className: "w-full h-0.5 bg-[#f38ba8]/70 rounded-full" })
+                    children: /* @__PURE__ */ jsx43("div", { className: "w-full h-0.5 bg-red-400/70 rounded-full" })
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-3", children: [
-                tool.detected ? /* @__PURE__ */ jsxs36("span", { className: "flex items-center gap-1 text-xs text-green-400", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3", children: [
+                tool.detected ? /* @__PURE__ */ jsxs37("span", { className: "flex items-center gap-1 text-xs text-green-400", children: [
                   /* @__PURE__ */ jsx43(Check12, { className: "w-3.5 h-3.5" }),
                   "Installed"
-                ] }) : /* @__PURE__ */ jsxs36("span", { className: "flex items-center gap-1 text-xs text-[#6c7086]", children: [
+                ] }) : /* @__PURE__ */ jsxs37("span", { className: "flex items-center gap-1 text-xs text-neutral-500", children: [
                   /* @__PURE__ */ jsx43(X7, { className: "w-3.5 h-3.5" }),
                   "Not Found"
                 ] }),
@@ -7334,9 +7387,9 @@ function ToolsPathsPanel({
                 )
               ] })
             ] }),
-            /* @__PURE__ */ jsxs36("div", { className: "space-y-1", children: [
-              /* @__PURE__ */ jsxs36("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx43(Terminal5, { className: "w-3 h-3 text-[#6c7086]" }),
+            /* @__PURE__ */ jsxs37("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx43(Terminal5, { className: "w-3 h-3 text-neutral-500" }),
                 /* @__PURE__ */ jsx43("div", { className: "flex-1", children: /* @__PURE__ */ jsx43(
                   Input,
                   {
@@ -7344,13 +7397,13 @@ function ToolsPathsPanel({
                     onChange: (newPath) => validateAndUpdatePath(tool.id, newPath),
                     placeholder: `/usr/local/bin/${tool.id}`,
                     size: "sm",
-                    className: displayPath ? "text-white" : "text-[#a6adc8]"
+                    className: displayPath ? "text-white" : "text-neutral-400"
                   }
                 ) }),
                 /* @__PURE__ */ jsx43(
                   IconButton,
                   {
-                    icon: isRefreshing ? /* @__PURE__ */ jsx43(RefreshCw6, { className: "w-3 h-3 text-[#cdd6f4] animate-spin" }) : hasBeenScanned ? /* @__PURE__ */ jsx43(Check12, { className: "w-3 h-3 text-green-400" }) : /* @__PURE__ */ jsx43(RefreshCw6, { className: "w-3 h-3 text-[#cdd6f4]" }),
+                    icon: isRefreshing ? /* @__PURE__ */ jsx43(RefreshCw6, { className: "w-3 h-3 text-neutral-300 animate-spin" }) : hasBeenScanned ? /* @__PURE__ */ jsx43(Check12, { className: "w-3 h-3 text-green-400" }) : /* @__PURE__ */ jsx43(RefreshCw6, { className: "w-3 h-3 text-neutral-300" }),
                     onClick: () => detectTool(tool.id),
                     disabled: isRefreshing,
                     color: hasBeenScanned ? "green" : "neutral",
@@ -7364,8 +7417,8 @@ function ToolsPathsPanel({
                 )
               ] }),
               isEnabled && !displayPath?.includes("/") && !tool.detected && /* @__PURE__ */ jsx43("p", { className: "text-xs text-red-400 pl-5", children: "Path required when enabled. Enter full path to binary." }),
-              tool.detected && !tool.binaryPath && /* @__PURE__ */ jsx43("p", { className: "text-xs text-[#6c7086] pl-5", children: "Using auto-detected path" }),
-              !isEnabled && !displayPath?.includes("/") && !tool.detected && /* @__PURE__ */ jsx43("p", { className: "text-xs text-[#6c7086] pl-5", children: "Tool disabled. Enter path to enable." })
+              tool.detected && !tool.binaryPath && /* @__PURE__ */ jsx43("p", { className: "text-xs text-neutral-500 pl-5", children: "Using auto-detected path" }),
+              !isEnabled && !displayPath?.includes("/") && !tool.detected && /* @__PURE__ */ jsx43("p", { className: "text-xs text-neutral-500 pl-5", children: "Tool disabled. Enter path to enable." })
             ] }),
             tool.detected && !isEnabled && /* @__PURE__ */ jsx43("p", { className: "text-xs text-yellow-500", children: "Tool disabled \u2014 enable to use in your workflow" })
           ]
@@ -7447,7 +7500,7 @@ function useCapturedIssues(options) {
 }
 
 // components/sections/captured-issues/captured-issues-panel.tsx
-import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs38 } from "react/jsx-runtime";
 function CapturedIssuesPanel({
   api,
   errors,
@@ -7470,33 +7523,33 @@ function CapturedIssuesPanel({
     handleDismiss
   } = useCapturedIssues({ api, errors, onDismiss, onSubmitSuccess });
   const hasErrors = errorCount > 0 || warnCount > 0;
-  return /* @__PURE__ */ jsxs37("div", { className: cn("space-y-6", className), children: [
-    hasErrors ? /* @__PURE__ */ jsxs37("div", { className: "bg-[#181825] border border-[#313244] rounded-lg p-4 space-y-4", children: [
-      /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs38("div", { className: cn("space-y-6", className), children: [
+    hasErrors ? /* @__PURE__ */ jsxs38("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4 space-y-4", children: [
+      /* @__PURE__ */ jsx44("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx44(AlertTriangle6, { className: "w-4 h-4 text-red-400" }),
-        /* @__PURE__ */ jsxs37("span", { className: "text-sm text-[#cdd6f4]", children: [
-          errorCount > 0 && /* @__PURE__ */ jsxs37("span", { className: "text-red-400", children: [
+        /* @__PURE__ */ jsxs38("span", { className: "text-sm text-neutral-300", children: [
+          errorCount > 0 && /* @__PURE__ */ jsxs38("span", { className: "text-red-400", children: [
             errorCount,
             " error",
             errorCount !== 1 ? "s" : ""
           ] }),
-          errorCount > 0 && warnCount > 0 && /* @__PURE__ */ jsx44("span", { className: "text-[#6c7086]", children: ", " }),
-          warnCount > 0 && /* @__PURE__ */ jsxs37("span", { className: "text-yellow-400", children: [
+          errorCount > 0 && warnCount > 0 && /* @__PURE__ */ jsx44("span", { className: "text-neutral-500", children: ", " }),
+          warnCount > 0 && /* @__PURE__ */ jsxs38("span", { className: "text-yellow-400", children: [
             warnCount,
             " warning",
             warnCount !== 1 ? "s" : ""
           ] })
         ] })
       ] }) }),
-      /* @__PURE__ */ jsxs37("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx44("p", { className: "text-sm text-[#a6adc8]", children: "Captured Errors" }),
-        /* @__PURE__ */ jsx44("div", { className: "max-h-48 overflow-y-auto bg-[#11111b] border border-[#313244] rounded-lg p-3 space-y-1", children: errors.map((error) => /* @__PURE__ */ jsxs37("div", { className: "text-xs font-mono break-words", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsx44("p", { className: "text-sm text-neutral-400", children: "Captured Errors" }),
+        /* @__PURE__ */ jsx44("div", { className: "max-h-48 overflow-y-auto bg-neutral-950 border border-neutral-700 rounded-lg p-3 space-y-1", children: errors.map((error) => /* @__PURE__ */ jsxs38("div", { className: "text-xs font-mono break-words", children: [
           /* @__PURE__ */ jsx44("span", { className: cn("mr-2 shrink-0", error.level === "warning" ? "text-yellow-400" : "text-red-400"), children: error.count > 1 ? `\xD7${error.count}` : "\u2022" }),
-          /* @__PURE__ */ jsx44("span", { className: "text-[#a6adc8] break-all", children: error.message })
+          /* @__PURE__ */ jsx44("span", { className: "text-neutral-400 break-all", children: error.message })
         ] }, error.fingerprint)) })
       ] }),
-      /* @__PURE__ */ jsxs37("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx44("p", { className: "text-sm text-[#a6adc8]", children: "Add context (optional)" }),
+      /* @__PURE__ */ jsxs38("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsx44("p", { className: "text-sm text-neutral-400", children: "Add context (optional)" }),
         /* @__PURE__ */ jsx44(
           Input,
           {
@@ -7512,7 +7565,7 @@ function CapturedIssuesPanel({
             onChange: (e) => setDescription(e.target.value),
             placeholder: "What were you doing when this happened?",
             rows: 3,
-            className: "w-full px-3 py-1.5 bg-[#313244] border border-[#45475a] rounded-lg text-[#cdd6f4] placeholder-[#6c7086] focus:outline-none focus:border-blue-500 transition-colors resize-none text-sm"
+            className: "w-full px-3 py-1.5 bg-neutral-750 border border-neutral-600 rounded-lg text-neutral-300 placeholder-neutral-500 focus:outline-none focus:border-blue-500 transition-colors resize-none text-sm"
           }
         ),
         /* @__PURE__ */ jsx44(
@@ -7525,7 +7578,7 @@ function CapturedIssuesPanel({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs37("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
+      /* @__PURE__ */ jsxs38("div", { className: "flex items-center justify-end gap-2 pt-2", children: [
         /* @__PURE__ */ jsx44(
           IconButton,
           {
@@ -7550,43 +7603,43 @@ function CapturedIssuesPanel({
           }
         )
       ] })
-    ] }) : /* @__PURE__ */ jsx44("div", { className: "bg-[#181825] border border-[#313244] rounded-lg p-6", children: /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-4", children: [
+    ] }) : /* @__PURE__ */ jsx44("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-6", children: /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-4", children: [
       /* @__PURE__ */ jsx44("div", { className: "w-10 h-10 bg-green-500/10 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ jsx44(Check13, { className: "w-5 h-5 text-green-400" }) }),
-      /* @__PURE__ */ jsxs37("div", { children: [
-        /* @__PURE__ */ jsx44("h3", { className: "text-[#cdd6f4] font-medium", children: "No Issues Captured" }),
-        /* @__PURE__ */ jsx44("p", { className: "text-sm text-[#6c7086]", children: "Everything is running smoothly." })
+      /* @__PURE__ */ jsxs38("div", { children: [
+        /* @__PURE__ */ jsx44("h3", { className: "text-neutral-300 font-medium", children: "No Issues Captured" }),
+        /* @__PURE__ */ jsx44("p", { className: "text-sm text-neutral-500", children: "Everything is running smoothly." })
       ] })
     ] }) }),
-    submittedErrors.length > 0 && /* @__PURE__ */ jsx44("div", { className: "bg-[#181825] border border-[#313244] rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs37("details", { className: "group", children: [
-      /* @__PURE__ */ jsxs37("summary", { className: "flex items-center justify-between p-4 cursor-pointer hover:bg-[#1e1e2e] transition-colors", children: [
-        /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-2", children: [
+    submittedErrors.length > 0 && /* @__PURE__ */ jsx44("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs38("details", { className: "group", children: [
+      /* @__PURE__ */ jsxs38("summary", { className: "flex items-center justify-between p-4 cursor-pointer hover:bg-neutral-850 transition-colors", children: [
+        /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
           /* @__PURE__ */ jsx44(Check13, { className: "w-4 h-4 text-green-400" }),
-          /* @__PURE__ */ jsx44("span", { className: "text-sm text-[#cdd6f4]", children: "Previously Reported" }),
-          /* @__PURE__ */ jsxs37("span", { className: "text-xs text-[#6c7086]", children: [
+          /* @__PURE__ */ jsx44("span", { className: "text-sm text-neutral-300", children: "Previously Reported" }),
+          /* @__PURE__ */ jsxs38("span", { className: "text-xs text-neutral-500", children: [
             "(",
             submittedErrors.length,
             ")"
           ] })
         ] }),
-        /* @__PURE__ */ jsx44(ChevronDown9, { className: "w-4 h-4 text-[#6c7086] transition-transform group-open:rotate-180" })
+        /* @__PURE__ */ jsx44(ChevronDown9, { className: "w-4 h-4 text-neutral-500 transition-transform group-open:rotate-180" })
       ] }),
-      /* @__PURE__ */ jsx44("div", { className: "border-t border-[#313244] p-4 space-y-2", children: submittedErrors.map((error) => /* @__PURE__ */ jsxs37(
+      /* @__PURE__ */ jsx44("div", { className: "border-t border-neutral-700 p-4 space-y-2", children: submittedErrors.map((error) => /* @__PURE__ */ jsxs38(
         "div",
         {
-          className: "flex items-start gap-3 p-3 bg-[#11111b] border border-[#313244] rounded-lg",
+          className: "flex items-start gap-3 p-3 bg-neutral-950 border border-neutral-700 rounded-lg",
           children: [
             /* @__PURE__ */ jsx44(Check13, { className: "w-4 h-4 text-green-400 mt-0.5 shrink-0" }),
-            /* @__PURE__ */ jsxs37("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs38("div", { className: "flex-1 min-w-0", children: [
               /* @__PURE__ */ jsx44(
                 "p",
                 {
-                  className: "text-sm text-[#cdd6f4] font-mono truncate",
+                  className: "text-sm text-neutral-300 font-mono truncate",
                   title: error.message,
                   children: error.message
                 }
               ),
-              /* @__PURE__ */ jsxs37("div", { className: "flex items-center gap-3 mt-1 text-xs text-[#6c7086]", children: [
-                error.count > 0 && /* @__PURE__ */ jsxs37("span", { className: "text-yellow-400/80", children: [
+              /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-3 mt-1 text-xs text-neutral-500", children: [
+                error.count > 0 && /* @__PURE__ */ jsxs38("span", { className: "text-yellow-400/80", children: [
                   "+",
                   error.count,
                   " since"
@@ -7618,7 +7671,7 @@ import {
   History,
   Clock as Clock2
 } from "lucide-react";
-import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs39 } from "react/jsx-runtime";
 function formatRelativeTime2(isoString) {
   const date = new Date(isoString);
   const now = /* @__PURE__ */ new Date();
@@ -7713,7 +7766,7 @@ function highlightMatch(text, query) {
   const lowerQuery = query.toLowerCase();
   const index = lowerText.indexOf(lowerQuery);
   if (index === -1) return text;
-  return /* @__PURE__ */ jsxs38(Fragment11, { children: [
+  return /* @__PURE__ */ jsxs39(Fragment11, { children: [
     text.slice(0, index),
     /* @__PURE__ */ jsx45("span", { className: "bg-yellow-500/30 text-yellow-200", children: text.slice(index, index + query.length) }),
     text.slice(index + query.length)
@@ -7731,15 +7784,15 @@ function SnapshotEntryRow({
 }) {
   const displayName = entry.label || getContentPreview(entry.content) || "Snapshot";
   const isDeleting = deletingSnapshotId === entry.id;
-  return /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39(
     "div",
     {
-      className: "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-[#313244]/50 text-[#a6adc8]",
+      className: "flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-neutral-700/50 text-neutral-400",
       style: { paddingLeft: `${depth * 16 + 8}px` },
       children: [
-        /* @__PURE__ */ jsx45(Clock2, { className: "w-3 h-3 shrink-0 text-[#6c7086]" }),
+        /* @__PURE__ */ jsx45(Clock2, { className: "w-3 h-3 shrink-0 text-neutral-500" }),
         /* @__PURE__ */ jsx45("span", { className: "text-xs flex-1 truncate", children: searchQuery ? highlightMatch(displayName, searchQuery) : displayName }),
-        /* @__PURE__ */ jsx45("span", { className: "text-[10px] text-[#6c7086] shrink-0", title: formatFullDate2(entry.savedAt), children: formatRelativeTime2(entry.savedAt) }),
+        /* @__PURE__ */ jsx45("span", { className: "text-[10px] text-neutral-500 shrink-0", title: formatFullDate2(entry.savedAt), children: formatRelativeTime2(entry.savedAt) }),
         /* @__PURE__ */ jsx45(
           IconButton,
           {
@@ -7770,18 +7823,18 @@ function ExpandableNode({
   searchQuery,
   children
 }) {
-  return /* @__PURE__ */ jsxs38("div", { children: [
-    /* @__PURE__ */ jsxs38(
+  return /* @__PURE__ */ jsxs39("div", { children: [
+    /* @__PURE__ */ jsxs39(
       "button",
       {
         onClick: () => onToggle(path),
-        className: "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-[#a6adc8] hover:bg-[#313244]/50 hover:text-[#cdd6f4]",
+        className: "w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300",
         style: { paddingLeft: `${depth * 16 + 8}px` },
         children: [
           /* @__PURE__ */ jsx45("span", { className: "w-4 h-4 flex items-center justify-center shrink-0", children: isExpanded ? /* @__PURE__ */ jsx45(ChevronDown10, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx45(ChevronRight6, { className: "w-3.5 h-3.5" }) }),
           icon && /* @__PURE__ */ jsx45("span", { className: "shrink-0", children: icon }),
           /* @__PURE__ */ jsx45("span", { className: "truncate flex-1 text-left", children: searchQuery ? highlightMatch(label, searchQuery) : label }),
-          snapshotCount > 0 && /* @__PURE__ */ jsx45("span", { className: "text-xs text-[#6c7086] bg-[#313244] px-1.5 py-0.5 rounded shrink-0", children: snapshotCount })
+          snapshotCount > 0 && /* @__PURE__ */ jsx45("span", { className: "text-xs text-neutral-500 bg-neutral-700 px-1.5 py-0.5 rounded shrink-0", children: snapshotCount })
         ]
       }
     ),
@@ -7811,16 +7864,16 @@ function SnapshotTree({
     return count;
   }, [scopes]);
   if (totalCount === 0) {
-    return /* @__PURE__ */ jsxs38("div", { className: cn("text-sm text-[#6c7086] py-8 text-center", className), children: [
+    return /* @__PURE__ */ jsxs39("div", { className: cn("text-sm text-neutral-500 py-8 text-center", className), children: [
       "No snapshots saved yet.",
       /* @__PURE__ */ jsx45("br", {}),
       /* @__PURE__ */ jsx45("span", { className: "text-xs", children: "Use the camera button in editors to save snapshots." })
     ] });
   }
-  return /* @__PURE__ */ jsxs38("div", { className: cn("flex flex-col gap-3", className), children: [
-    /* @__PURE__ */ jsxs38("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs38("div", { className: "relative flex-1", children: [
-        /* @__PURE__ */ jsx45(Search7, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#6c7086] pointer-events-none" }),
+  return /* @__PURE__ */ jsxs39("div", { className: cn("flex flex-col gap-3", className), children: [
+    /* @__PURE__ */ jsxs39("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs39("div", { className: "relative flex-1", children: [
+        /* @__PURE__ */ jsx45(Search7, { className: "absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500 pointer-events-none" }),
         /* @__PURE__ */ jsx45(
           Input,
           {
@@ -7862,7 +7915,7 @@ function SnapshotTree({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx45("div", { className: "bg-[#181825] border border-[#313244] rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto", children: filteredScopes.length === 0 && searchQuery ? /* @__PURE__ */ jsxs38("p", { className: "text-xs text-[#6c7086] text-center py-4", children: [
+    /* @__PURE__ */ jsx45("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto", children: filteredScopes.length === 0 && searchQuery ? /* @__PURE__ */ jsxs39("p", { className: "text-xs text-neutral-500 text-center py-4", children: [
       "No snapshots match \u201C",
       searchQuery,
       "\u201D"
@@ -7883,7 +7936,7 @@ function SnapshotTree({
             id: category.id,
             path: `${scope.id}/${category.id}`,
             label: category.name,
-            icon: category.icon ? /* @__PURE__ */ jsx45(History, { className: cn("w-3.5 h-3.5", CATEGORY_ICON_COLORS[category.icon] || "text-[#6c7086]") }) : void 0,
+            icon: category.icon ? /* @__PURE__ */ jsx45(History, { className: cn("w-3.5 h-3.5", CATEGORY_ICON_COLORS[category.icon] || "text-neutral-500") }) : void 0,
             snapshotCount: countCategorySnapshots(category),
             depth: 1,
             isExpanded: expandedPaths.has(`${scope.id}/${category.id}`),
@@ -7895,7 +7948,7 @@ function SnapshotTree({
                 id: item.id,
                 path: `${scope.id}/${category.id}/${item.id}`,
                 label: item.name,
-                icon: /* @__PURE__ */ jsx45(History, { className: "w-3.5 h-3.5 text-[#6c7086]" }),
+                icon: /* @__PURE__ */ jsx45(History, { className: "w-3.5 h-3.5 text-neutral-500" }),
                 snapshotCount: item.snapshots.length,
                 depth: 2,
                 isExpanded: expandedPaths.has(`${scope.id}/${category.id}/${item.id}`),
@@ -8010,7 +8063,7 @@ function useSnapshotBrowser({ scopes, api }) {
 }
 
 // components/sections/snapshot-browser/snapshot-browser-panel.tsx
-import { jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs40 } from "react/jsx-runtime";
 var SNAPSHOT_LIMIT_OPTIONS = [5, 10, 15, 20, 25, 30, 40, 50].map((n) => ({
   value: n,
   label: String(n)
@@ -8036,11 +8089,11 @@ function SnapshotBrowserPanel({
     deleteSnapshot,
     deletingSnapshotId
   } = useSnapshotBrowser({ scopes, api });
-  return /* @__PURE__ */ jsxs39("div", { className: cn("space-y-6", className), children: [
-    /* @__PURE__ */ jsx46("div", { className: "bg-[#181825] border border-[#313244] rounded-lg p-4", children: /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs39("div", { children: [
-        /* @__PURE__ */ jsx46("label", { className: "text-[#cdd6f4]", children: "Snapshot Limit" }),
-        /* @__PURE__ */ jsx46("p", { className: "text-sm text-[#6c7086]", children: "Maximum number of snapshots to keep per item (1-50)" })
+  return /* @__PURE__ */ jsxs40("div", { className: cn("space-y-6", className), children: [
+    /* @__PURE__ */ jsx46("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs40("div", { children: [
+        /* @__PURE__ */ jsx46("label", { className: "text-neutral-300", children: "Snapshot Limit" }),
+        /* @__PURE__ */ jsx46("p", { className: "text-sm text-neutral-500", children: "Maximum number of snapshots to keep per item (1-50)" })
       ] }),
       /* @__PURE__ */ jsx46(
         Select,
@@ -8051,11 +8104,11 @@ function SnapshotBrowserPanel({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs39("div", { className: "bg-[#181825] border border-[#313244] rounded-lg p-4", children: [
-      /* @__PURE__ */ jsxs39("div", { className: "flex items-center justify-between mb-3", children: [
-        /* @__PURE__ */ jsxs39("div", { children: [
-          /* @__PURE__ */ jsx46("label", { className: "text-[#cdd6f4]", children: "Browse Snapshots" }),
-          /* @__PURE__ */ jsx46("p", { className: "text-sm text-[#6c7086]", children: totalSnapshotCount === 0 ? "No snapshots saved yet" : `${totalSnapshotCount} snapshot${totalSnapshotCount === 1 ? "" : "s"} stored` })
+    /* @__PURE__ */ jsxs40("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-4", children: [
+      /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between mb-3", children: [
+        /* @__PURE__ */ jsxs40("div", { children: [
+          /* @__PURE__ */ jsx46("label", { className: "text-neutral-300", children: "Browse Snapshots" }),
+          /* @__PURE__ */ jsx46("p", { className: "text-sm text-neutral-500", children: totalSnapshotCount === 0 ? "No snapshots saved yet" : `${totalSnapshotCount} snapshot${totalSnapshotCount === 1 ? "" : "s"} stored` })
         ] }),
         /* @__PURE__ */ jsx46(
           IconButton,
@@ -8089,11 +8142,11 @@ function SnapshotBrowserPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx46("div", { className: "bg-[#181825]/50 border border-[#313244] rounded-lg p-4", children: /* @__PURE__ */ jsxs39("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsx46(HelpCircle3, { className: "w-4 h-4 text-[#6c7086] mt-0.5 shrink-0" }),
-      /* @__PURE__ */ jsxs39("div", { className: "text-sm text-[#6c7086] space-y-2", children: [
-        /* @__PURE__ */ jsx46("p", { children: /* @__PURE__ */ jsx46("strong", { className: "text-[#a6adc8]", children: "How snapshots work:" }) }),
-        /* @__PURE__ */ jsxs39("ul", { className: "list-disc list-inside space-y-1 ml-1", children: [
+    /* @__PURE__ */ jsx46("div", { className: "bg-neutral-900/50 border border-neutral-700 rounded-lg p-4", children: /* @__PURE__ */ jsxs40("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsx46(HelpCircle3, { className: "w-4 h-4 text-neutral-500 mt-0.5 shrink-0" }),
+      /* @__PURE__ */ jsxs40("div", { className: "text-sm text-neutral-500 space-y-2", children: [
+        /* @__PURE__ */ jsx46("p", { children: /* @__PURE__ */ jsx46("strong", { className: "text-neutral-400", children: "How snapshots work:" }) }),
+        /* @__PURE__ */ jsxs40("ul", { className: "list-disc list-inside space-y-1 ml-1", children: [
           /* @__PURE__ */ jsx46("li", { children: "Click \u201CSave Snapshot\u201D in any editor to save the current version" }),
           /* @__PURE__ */ jsx46("li", { children: "When resetting content, you can choose from saved snapshots or the file default" }),
           /* @__PURE__ */ jsx46("li", { children: "Snapshots are stored locally and persist across sessions" }),
@@ -8260,7 +8313,7 @@ function useSnippetsEditor({ api, snippets }) {
 }
 
 // components/sections/snippets-editor/snippets-editor.tsx
-import { jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs41 } from "react/jsx-runtime";
 var MIN_SIDEBAR = 200;
 var MAX_SIDEBAR = 350;
 var DEFAULT_SIDEBAR = 260;
@@ -8309,18 +8362,18 @@ function SnippetsEditor({
   }, [sidebarWidth]);
   const hasSelection = isEditing || isAdding;
   const nameHasError = formError !== null && (formError.includes("name") || formError.includes("Name") || formError.includes("uppercase") || formError.includes("exists"));
-  return /* @__PURE__ */ jsxs40("div", { className: cn("flex flex-col bg-[#181825] border border-[#313244] rounded-lg overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between px-4 py-3 border-b border-[#313244] bg-purple-500/5", children: [
-      /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs41("div", { className: cn("flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between px-4 py-3 border-b border-neutral-700 bg-purple-500/5", children: [
+      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx47(Braces, { className: "w-4 h-4 text-purple-400" }),
-        /* @__PURE__ */ jsx47("h3", { className: "text-sm font-medium text-[#cdd6f4]", children: title }),
-        /* @__PURE__ */ jsx47("span", { className: "px-2 py-0.5 text-xs rounded-full bg-[#313244] text-[#a6adc8]", children: snippets.length })
+        /* @__PURE__ */ jsx47("h3", { className: "text-sm font-medium text-neutral-300", children: title }),
+        /* @__PURE__ */ jsx47("span", { className: "px-2 py-0.5 text-xs rounded-full bg-neutral-700 text-neutral-400", children: snippets.length })
       ] }),
-      /* @__PURE__ */ jsx47("p", { className: "text-xs text-[#6c7086] hidden sm:block", children: description })
+      /* @__PURE__ */ jsx47("p", { className: "text-xs text-neutral-500 hidden sm:block", children: description })
     ] }),
-    /* @__PURE__ */ jsxs40("div", { className: "flex flex-1 min-h-[400px]", children: [
-      /* @__PURE__ */ jsxs40("div", { className: "flex flex-col border-r border-[#313244]", style: { width: sidebarWidth, minWidth: MIN_SIDEBAR }, children: [
-        /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-1.5 p-2 border-b border-[#313244]", children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex flex-1 min-h-[400px]", children: [
+      /* @__PURE__ */ jsxs41("div", { className: "flex flex-col border-r border-neutral-700", style: { width: sidebarWidth, minWidth: MIN_SIDEBAR }, children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1.5 p-2 border-b border-neutral-700", children: [
           /* @__PURE__ */ jsx47("div", { className: "flex-1", children: /* @__PURE__ */ jsx47(
             Input,
             {
@@ -8343,11 +8396,11 @@ function SnippetsEditor({
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs40("div", { className: "flex-1 overflow-y-auto", children: [
-          filteredSnippets.length === 0 && !isAdding && /* @__PURE__ */ jsxs40("div", { className: "text-center py-10 px-4", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex-1 overflow-y-auto", children: [
+          filteredSnippets.length === 0 && !isAdding && /* @__PURE__ */ jsxs41("div", { className: "text-center py-10 px-4", children: [
             /* @__PURE__ */ jsx47(Braces, { className: "w-8 h-8 mx-auto text-purple-400/40 mb-3" }),
-            /* @__PURE__ */ jsx47("p", { className: "text-xs text-[#6c7086] mb-1", children: searchQuery ? "No matching snippets" : "No snippets defined" }),
-            /* @__PURE__ */ jsx47("p", { className: "text-[10px] text-[#45475a]", children: searchQuery ? "Try a different search term" : "Click + to add your first snippet" })
+            /* @__PURE__ */ jsx47("p", { className: "text-xs text-neutral-500 mb-1", children: searchQuery ? "No matching snippets" : "No snippets defined" }),
+            /* @__PURE__ */ jsx47("p", { className: "text-[10px] text-neutral-600", children: searchQuery ? "Try a different search term" : "Click + to add your first snippet" })
           ] }),
           filteredSnippets.map((snippet) => /* @__PURE__ */ jsx47(
             SnippetListItem,
@@ -8382,10 +8435,10 @@ function SnippetsEditor({
           onDelete: isEditing && selectedName ? () => remove(selectedName) : void 0,
           onCancel: isAdding ? cancelForm : void 0
         }
-      ) : /* @__PURE__ */ jsx47("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxs40("div", { className: "text-center max-w-xs", children: [
+      ) : /* @__PURE__ */ jsx47("div", { className: "flex-1 flex items-center justify-center p-6", children: /* @__PURE__ */ jsxs41("div", { className: "text-center max-w-xs", children: [
         /* @__PURE__ */ jsx47(Braces, { className: "w-10 h-10 mx-auto text-purple-400/30 mb-4" }),
-        /* @__PURE__ */ jsx47("p", { className: "text-sm text-[#6c7086] mb-2", children: "Select a snippet to edit" }),
-        /* @__PURE__ */ jsxs40("p", { className: "text-xs text-[#45475a] leading-relaxed", children: [
+        /* @__PURE__ */ jsx47("p", { className: "text-sm text-neutral-500 mb-2", children: "Select a snippet to edit" }),
+        /* @__PURE__ */ jsxs41("p", { className: "text-xs text-neutral-600 leading-relaxed", children: [
           "Choose a snippet from the list, or click",
           " ",
           /* @__PURE__ */ jsx47("span", { className: "text-blue-400", children: "+" }),
@@ -8399,19 +8452,19 @@ function SnippetsEditor({
   ] });
 }
 function SnippetListItem({ snippet, selected, onSelect, onDelete }) {
-  return /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsxs41(
     "div",
     {
       className: cn(
         "group flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors border-l-2",
-        selected ? "bg-[#1e1e2e] border-l-[#89b4fa]" : "border-l-transparent hover:bg-[#1e1e2e]/50"
+        selected ? "bg-neutral-850 border-l-blue-400" : "border-l-transparent hover:bg-neutral-850/50"
       ),
       onClick: onSelect,
       children: [
-        /* @__PURE__ */ jsxs40("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx47("p", { className: "text-xs font-mono font-medium text-[#cdd6f4] truncate", children: snippet.name }),
-          /* @__PURE__ */ jsx47("p", { className: "text-[10px] text-[#6c7086] truncate mt-0.5", children: snippet.description }),
-          snippet.value && /* @__PURE__ */ jsxs40("p", { className: "text-[10px] text-[#45475a] truncate mt-0.5 font-mono", children: [
+        /* @__PURE__ */ jsxs41("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx47("p", { className: "text-xs font-mono font-medium text-neutral-300 truncate", children: snippet.name }),
+          /* @__PURE__ */ jsx47("p", { className: "text-[10px] text-neutral-500 truncate mt-0.5", children: snippet.description }),
+          snippet.value && /* @__PURE__ */ jsxs41("p", { className: "text-[10px] text-neutral-600 truncate mt-0.5 font-mono", children: [
             snippet.value.slice(0, 80),
             snippet.value.length > 80 ? "..." : ""
           ] })
@@ -8424,7 +8477,7 @@ function SnippetListItem({ snippet, selected, onSelect, onDelete }) {
               e.stopPropagation();
               onDelete();
             },
-            className: "opacity-0 group-hover:opacity-100 mt-0.5 p-0.5 rounded text-[#6c7086] hover:text-red-400 hover:bg-red-500/10 transition-all",
+            className: "opacity-0 group-hover:opacity-100 mt-0.5 p-0.5 rounded text-neutral-500 hover:text-red-400 hover:bg-red-500/10 transition-all",
             children: /* @__PURE__ */ jsx47(X10, { className: "w-3 h-3" })
           }
         )
@@ -8444,10 +8497,10 @@ function SnippetForm({
   onDelete,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs40("div", { className: "flex-1 flex flex-col", children: [
-    /* @__PURE__ */ jsxs40("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
-      /* @__PURE__ */ jsxs40("div", { children: [
-        /* @__PURE__ */ jsxs40("label", { className: "block text-xs text-[#6c7086] mb-1.5", children: [
+  return /* @__PURE__ */ jsxs41("div", { className: "flex-1 flex flex-col", children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: [
+      /* @__PURE__ */ jsxs41("div", { children: [
+        /* @__PURE__ */ jsxs41("label", { className: "block text-xs text-neutral-500 mb-1.5", children: [
           "Snippet Name ",
           /* @__PURE__ */ jsx47("span", { className: "text-red-400", children: "*" })
         ] }),
@@ -8461,13 +8514,13 @@ function SnippetForm({
             autoFocus: !isEditing
           }
         ),
-        /* @__PURE__ */ jsxs40("p", { className: "mt-1 text-[10px] text-[#45475a]", children: [
+        /* @__PURE__ */ jsxs41("p", { className: "mt-1 text-[10px] text-neutral-600", children: [
           "Use in prompts as ",
           /* @__PURE__ */ jsx47("span", { className: "font-mono text-purple-400", children: "{{" + (formData.name || "NAME") + "}}" })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs40("div", { children: [
-        /* @__PURE__ */ jsxs40("label", { className: "block text-xs text-[#6c7086] mb-1.5", children: [
+      /* @__PURE__ */ jsxs41("div", { children: [
+        /* @__PURE__ */ jsxs41("label", { className: "block text-xs text-neutral-500 mb-1.5", children: [
           "Description ",
           /* @__PURE__ */ jsx47("span", { className: "text-red-400", children: "*" })
         ] }),
@@ -8480,8 +8533,8 @@ function SnippetForm({
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs40("div", { children: [
-        /* @__PURE__ */ jsx47("label", { className: "block text-xs text-[#6c7086] mb-1.5", children: "Value" }),
+      /* @__PURE__ */ jsxs41("div", { children: [
+        /* @__PURE__ */ jsx47("label", { className: "block text-xs text-neutral-500 mb-1.5", children: "Value" }),
         /* @__PURE__ */ jsx47(
           ResizableTextarea,
           {
@@ -8492,11 +8545,11 @@ function SnippetForm({
             minHeight: 160
           }
         ),
-        /* @__PURE__ */ jsx47("p", { className: "mt-1 text-[10px] text-[#45475a]", children: "Can be a single value, multi-line text, or an entire document" })
+        /* @__PURE__ */ jsx47("p", { className: "mt-1 text-[10px] text-neutral-600", children: "Can be a single value, multi-line text, or an entire document" })
       ] }),
       formError && /* @__PURE__ */ jsx47("div", { className: "px-3 py-2 bg-red-500/10 border border-red-500/30 rounded-lg", children: /* @__PURE__ */ jsx47("p", { className: "text-xs text-red-400", children: formError }) })
     ] }),
-    /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between gap-2 border-t border-[#313244] px-4 py-3", children: [
+    /* @__PURE__ */ jsxs41("div", { className: "flex items-center justify-between gap-2 border-t border-neutral-700 px-4 py-3", children: [
       /* @__PURE__ */ jsx47("div", { children: onDelete && /* @__PURE__ */ jsx47(
         IconButton,
         {
@@ -8508,14 +8561,14 @@ function SnippetForm({
           tooltip: { title: "Delete", description: "Remove this snippet" }
         }
       ) }),
-      /* @__PURE__ */ jsxs40("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
         onCancel && /* @__PURE__ */ jsx47(
           "button",
           {
             type: "button",
             onClick: onCancel,
             disabled: isSaving,
-            className: "rounded-md border border-[#313244] bg-transparent px-3 py-1.5 text-xs text-[#a6adc8] transition-colors hover:bg-[#313244] hover:text-[#cdd6f4] disabled:opacity-50",
+            className: "rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-xs text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-50",
             children: "Cancel"
           }
         ),
@@ -8530,7 +8583,7 @@ function SnippetForm({
             tooltip: { title: "Reset", description: "Revert to saved values" }
           }
         ),
-        /* @__PURE__ */ jsxs40(
+        /* @__PURE__ */ jsxs41(
           "button",
           {
             type: "button",
@@ -8625,7 +8678,7 @@ function usePromptEditor({
 import { useState as useState29, useRef as useRef20, useCallback as useCallback17, useEffect as useEffect19, useMemo as useMemo8 } from "react";
 import Editor2 from "@monaco-editor/react";
 import { Variable, Info as Info5, Search as Search8, X as X11, AlertTriangle as AlertTriangle7 } from "lucide-react";
-import { jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs42 } from "react/jsx-runtime";
 var THEME_NAME = "prompt-editor-dark";
 var themeRegistered2 = false;
 var MIN_SIDEBAR_WIDTH = 220;
@@ -8847,16 +8900,16 @@ ${varInfo.description}${varInfo.example ? `
       (v) => v.name.toLowerCase().includes(search) || v.description.toLowerCase().includes(search) || v.example && v.example.toLowerCase().includes(search)
     );
   }, [variables, variableSearch]);
-  return /* @__PURE__ */ jsxs41("div", { className: `flex w-full h-full bg-[#181825] overflow-hidden ${standalone ? "border border-[#313244] rounded-lg" : ""} ${className}`, children: [
-    /* @__PURE__ */ jsxs41("div", { className: "flex-1 min-w-0 w-0 flex flex-col overflow-hidden", children: [
-      /* @__PURE__ */ jsx48("div", { className: "relative flex h-[26px] bg-[#11111b] shrink-0", children: tools.map((tool) => {
+  return /* @__PURE__ */ jsxs42("div", { className: `flex w-full h-full bg-neutral-900 overflow-hidden ${standalone ? "border border-neutral-700 rounded-lg" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsxs42("div", { className: "flex-1 min-w-0 w-0 flex flex-col overflow-hidden", children: [
+      /* @__PURE__ */ jsx48("div", { className: "relative flex h-[26px] bg-neutral-950 shrink-0", children: tools.map((tool) => {
         const isActive = activeTab === tool.id;
-        const activeColor = tool.activeColor ?? "text-[#89b4fa]";
-        return /* @__PURE__ */ jsxs41(
+        const activeColor = tool.activeColor ?? "text-blue-400";
+        return /* @__PURE__ */ jsxs42(
           "button",
           {
             onClick: () => setActiveTab(tool.id),
-            className: `flex-1 flex items-center justify-center gap-1.5 px-2 text-xs font-medium border-b-2 transition-colors ${isActive ? `border-current ${activeColor} bg-[#1e1e2e]` : "border-[#313244] text-[#6c7086] hover:text-[#a6adc8] hover:bg-[#1e1e2e]/50"}`,
+            className: `flex-1 flex items-center justify-center gap-1.5 px-2 text-xs font-medium border-b-2 transition-colors ${isActive ? `border-current ${activeColor} bg-neutral-850` : "border-neutral-700 text-neutral-500 hover:text-neutral-400 hover:bg-neutral-850/50"}`,
             title: tool.name,
             children: [
               tool.icon ?? /* @__PURE__ */ jsx48(AiToolIcon, { tool: tool.id, size: 14 }),
@@ -8866,9 +8919,9 @@ ${varInfo.description}${varInfo.example ? `
           tool.id
         );
       }) }),
-      checklistMissing && /* @__PURE__ */ jsxs41("div", { className: "flex items-start gap-2 px-3 py-2 bg-[#f38ba8]/10 border-b border-[#f38ba8]/30 shrink-0", children: [
-        /* @__PURE__ */ jsx48(AlertTriangle7, { className: "w-4 h-4 text-[#f38ba8] shrink-0 mt-0.5" }),
-        /* @__PURE__ */ jsxs41("div", { className: "text-xs text-[#f38ba8]", children: [
+      checklistMissing && /* @__PURE__ */ jsxs42("div", { className: "flex items-start gap-2 px-3 py-2 bg-red-400/10 border-b border-red-400/30 shrink-0", children: [
+        /* @__PURE__ */ jsx48(AlertTriangle7, { className: "w-4 h-4 text-red-400 shrink-0 mt-0.5" }),
+        /* @__PURE__ */ jsxs42("div", { className: "text-xs text-red-400", children: [
           /* @__PURE__ */ jsx48("span", { className: "font-medium", children: 'Missing "# Verification Checklist" section.' }),
           " ",
           "When verification is enabled, only content under this heading will be sent to the AI for output validation."
@@ -8926,31 +8979,31 @@ ${varInfo.description}${varInfo.example ? `
         activeTab
       ) })
     ] }),
-    hasVariables && /* @__PURE__ */ jsxs41(
+    hasVariables && /* @__PURE__ */ jsxs42(
       "div",
       {
-        className: "relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col border-l border-[#313244]",
+        className: "relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col border-l border-neutral-700",
         style: { width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH, maxWidth: MAX_SIDEBAR_WIDTH },
         children: [
           /* @__PURE__ */ jsx48(
             "div",
             {
               onPointerDown: handleSidebarMouseDown,
-              className: "absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-[#b4befe]/30 transition-colors z-10"
+              className: "absolute left-0 top-0 bottom-0 w-1 cursor-col-resize hover:bg-violet-400/30 transition-colors z-10"
             }
           ),
-          /* @__PURE__ */ jsxs41("div", { className: "h-[52px] px-3 flex items-center justify-between border-b border-[#313244] shrink-0", children: [
-            /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxs42("div", { className: "h-[52px] px-3 flex items-center justify-between border-b border-neutral-700 shrink-0", children: [
+            /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
               /* @__PURE__ */ jsx48(Variable, { className: "w-4 h-4 text-neutral-500 shrink-0" }),
-              /* @__PURE__ */ jsxs41("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsxs42("div", { className: "min-w-0", children: [
                 /* @__PURE__ */ jsx48("div", { className: "text-xs font-medium text-neutral-400", children: "Placeholders" }),
                 /* @__PURE__ */ jsx48("div", { className: "text-xs text-neutral-600 truncate", children: "Available placeholders" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx48("span", { className: "px-1.5 py-0.5 bg-[#b4befe]/20 text-[#b4befe] rounded text-xs", children: variableSearch.trim() ? `${filteredVariables.length}/${variables.length}` : variables.length })
+            /* @__PURE__ */ jsx48("span", { className: "px-1.5 py-0.5 bg-violet-400/20 text-violet-400 rounded text-xs", children: variableSearch.trim() ? `${filteredVariables.length}/${variables.length}` : variables.length })
           ] }),
-          /* @__PURE__ */ jsx48("div", { className: "px-2.5 py-2 border-b border-[#313244] shrink-0", children: /* @__PURE__ */ jsxs41("div", { className: "relative", children: [
-            /* @__PURE__ */ jsx48(Search8, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-[#6c7086]" }),
+          /* @__PURE__ */ jsx48("div", { className: "px-2.5 py-2 border-b border-neutral-700 shrink-0", children: /* @__PURE__ */ jsxs42("div", { className: "relative", children: [
+            /* @__PURE__ */ jsx48(Search8, { className: "absolute left-2 top-1/2 -translate-y-1/2 w-3 h-3 text-neutral-500" }),
             /* @__PURE__ */ jsx48(
               Input,
               {
@@ -8973,15 +9026,15 @@ ${varInfo.description}${varInfo.example ? `
               }
             )
           ] }) }),
-          /* @__PURE__ */ jsx48("div", { className: "px-3 py-2 border-b border-[#313244] shrink-0", children: /* @__PURE__ */ jsxs41("div", { className: "flex items-center gap-1.5 text-xs text-[#6c7086]", children: [
+          /* @__PURE__ */ jsx48("div", { className: "px-3 py-2 border-b border-neutral-700 shrink-0", children: /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-1.5 text-xs text-neutral-500", children: [
             /* @__PURE__ */ jsx48(Info5, { className: "w-3 h-3 flex-shrink-0" }),
-            /* @__PURE__ */ jsxs41("span", { children: [
+            /* @__PURE__ */ jsxs42("span", { children: [
               "Type ",
-              /* @__PURE__ */ jsx48("code", { className: "text-[#b4befe]", children: "{{" }),
+              /* @__PURE__ */ jsx48("code", { className: "text-violet-400", children: "{{" }),
               " in editor for autocomplete"
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx48("div", { className: "flex-1 overflow-y-auto p-2.5 space-y-2", children: filteredVariables.length > 0 ? filteredVariables.map((variable) => /* @__PURE__ */ jsx48("div", { className: "bg-[#1e1e2e] border border-[#313244] rounded-lg", children: /* @__PURE__ */ jsx48(
+          /* @__PURE__ */ jsx48("div", { className: "flex-1 overflow-y-auto p-2.5 space-y-2", children: filteredVariables.length > 0 ? filteredVariables.map((variable) => /* @__PURE__ */ jsx48("div", { className: "bg-neutral-850 border border-neutral-700 rounded-lg", children: /* @__PURE__ */ jsx48(
             EditorPlaceholderCard,
             {
               name: variable.name,
@@ -8992,7 +9045,7 @@ ${varInfo.description}${varInfo.example ? `
               accentColor: "purple",
               showCopyPlaceholder: true
             }
-          ) }, variable.name)) : variableSearch.trim() ? /* @__PURE__ */ jsxs41("div", { className: "text-center py-4 text-xs text-[#6c7086]", children: [
+          ) }, variable.name)) : variableSearch.trim() ? /* @__PURE__ */ jsxs42("div", { className: "text-center py-4 text-xs text-neutral-500", children: [
             'No placeholders match "',
             variableSearch,
             '"'
@@ -9006,7 +9059,7 @@ ${varInfo.description}${varInfo.example ? `
 // components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx
 import { useState as useState30, useRef as useRef21, useCallback as useCallback18 } from "react";
 import { FileCode as FileCode5, GripVertical as GripVertical3, Crosshair } from "lucide-react";
-import { jsx as jsx49, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs43 } from "react/jsx-runtime";
 var MIN_SIDEBAR_WIDTH2 = 160;
 var MAX_SIDEBAR_WIDTH2 = 320;
 var DEFAULT_SIDEBAR_WIDTH2 = 200;
@@ -9060,32 +9113,32 @@ function FileTypeTabbedPromptEditor({
     target.addEventListener("pointermove", handlePointerMove);
     target.addEventListener("pointerup", handlePointerUp);
   }, [sidebarWidth]);
-  return /* @__PURE__ */ jsxs42("div", { className: `flex w-full max-w-full bg-[#181825] border border-[#313244] rounded-lg overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43("div", { className: `flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs43(
       "div",
       {
-        className: "relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col",
+        className: "relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col",
         style: { width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH2, maxWidth: MAX_SIDEBAR_WIDTH2 },
         children: [
-          /* @__PURE__ */ jsx49("div", { className: "h-[52px] px-3 flex items-center border-b border-[#313244] shrink-0", children: /* @__PURE__ */ jsxs42("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx49("div", { className: "h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0", children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx49(Crosshair, { className: "w-4 h-4 text-neutral-500 shrink-0" }),
-            /* @__PURE__ */ jsxs42("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs43("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx49("div", { className: "text-xs font-medium text-neutral-400", children: selectorLabel }),
               /* @__PURE__ */ jsx49("div", { className: "text-xs text-neutral-600", children: selectorSublabel })
             ] })
           ] }) }),
           /* @__PURE__ */ jsx49("div", { className: "flex-1 overflow-y-auto", children: fileTypes.map((ft) => {
             const isSelected = ft.id === selectedFileType;
-            return /* @__PURE__ */ jsxs42(
+            return /* @__PURE__ */ jsxs43(
               "button",
               {
                 onClick: () => setSelectedFileType(ft.id),
-                className: `w-full min-h-[44px] py-2 flex items-center gap-2.5 px-3 text-left transition-colors ${isSelected ? "bg-[#313244]/50 border-l-2 border-[#89b4fa]" : "hover:bg-[#1e1e2e] border-l-2 border-transparent"}`,
+                className: `w-full min-h-[44px] py-2 flex items-center gap-2.5 px-3 text-left transition-colors ${isSelected ? "bg-neutral-700/50 border-l-2 border-blue-400" : "hover:bg-neutral-850 border-l-2 border-transparent"}`,
                 children: [
-                  /* @__PURE__ */ jsx49("div", { className: `flex-shrink-0 ${isSelected ? "text-[#89b4fa]" : "text-[#6c7086]"}`, children: ft.icon ?? /* @__PURE__ */ jsx49(FileCode5, { className: "w-4 h-4" }) }),
-                  /* @__PURE__ */ jsxs42("div", { className: "min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx49("div", { className: `text-sm font-medium truncate ${isSelected ? "text-[#cdd6f4]" : "text-[#a6adc8]"}`, children: ft.name }),
-                    ft.description && /* @__PURE__ */ jsx49("div", { className: "text-xs text-[#6c7086] mt-0.5 leading-relaxed", children: ft.description })
+                  /* @__PURE__ */ jsx49("div", { className: `flex-shrink-0 ${isSelected ? "text-blue-400" : "text-neutral-500"}`, children: ft.icon ?? /* @__PURE__ */ jsx49(FileCode5, { className: "w-4 h-4" }) }),
+                  /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
+                    /* @__PURE__ */ jsx49("div", { className: `text-sm font-medium truncate ${isSelected ? "text-neutral-300" : "text-neutral-400"}`, children: ft.name }),
+                    ft.description && /* @__PURE__ */ jsx49("div", { className: "text-xs text-neutral-500 mt-0.5 leading-relaxed", children: ft.description })
                   ] })
                 ]
               },
@@ -9096,14 +9149,14 @@ function FileTypeTabbedPromptEditor({
             "div",
             {
               onPointerDown: handleSidebarPointerDown,
-              className: "absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-[#89b4fa]/30 transition-colors z-10 flex items-center justify-center group",
-              children: /* @__PURE__ */ jsx49(GripVertical3, { className: "w-3 h-3 text-[#45475a] group-hover:text-[#6c7086] opacity-0 group-hover:opacity-100 transition-opacity" })
+              className: "absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-blue-400/30 transition-colors z-10 flex items-center justify-center group",
+              children: /* @__PURE__ */ jsx49(GripVertical3, { className: "w-3 h-3 text-neutral-600 group-hover:text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity" })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx49("div", { className: "flex-1 min-w-0 w-0 overflow-hidden border-l border-[#313244]", children: /* @__PURE__ */ jsx49(
+    /* @__PURE__ */ jsx49("div", { className: "flex-1 min-w-0 w-0 overflow-hidden border-l border-neutral-700", children: /* @__PURE__ */ jsx49(
       TabbedPromptEditor,
       {
         prompts: currentPrompts,
@@ -9122,7 +9175,7 @@ function FileTypeTabbedPromptEditor({
 // components/sections/prompt-editor/simulator-prompt-editor.tsx
 import { useState as useState31, useRef as useRef22, useCallback as useCallback19, useMemo as useMemo9 } from "react";
 import { ChevronDown as ChevronDown11, ChevronRight as ChevronRight7, GripVertical as GripVertical4, Crosshair as Crosshair2 } from "lucide-react";
-import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs44 } from "react/jsx-runtime";
 var MIN_SIDEBAR_WIDTH3 = 180;
 var MAX_SIDEBAR_WIDTH3 = 360;
 var DEFAULT_SIDEBAR_WIDTH3 = 220;
@@ -9205,16 +9258,16 @@ function SimulatorPromptEditor({
     target.addEventListener("pointermove", handlePointerMove);
     target.addEventListener("pointerup", handlePointerUp);
   }, [sidebarWidth]);
-  return /* @__PURE__ */ jsxs43("div", { className: `flex w-full max-w-full bg-[#181825] border border-[#313244] rounded-lg overflow-hidden ${className}`, children: [
-    /* @__PURE__ */ jsxs43(
+  return /* @__PURE__ */ jsxs44("div", { className: `flex w-full max-w-full bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxs44(
       "div",
       {
-        className: "relative shrink-0 bg-[#11111b] overflow-hidden flex flex-col",
+        className: "relative shrink-0 bg-neutral-950 overflow-hidden flex flex-col",
         style: { width: sidebarWidth, minWidth: MIN_SIDEBAR_WIDTH3, maxWidth: MAX_SIDEBAR_WIDTH3 },
         children: [
-          /* @__PURE__ */ jsx50("div", { className: "h-[52px] px-3 flex items-center border-b border-[#313244] shrink-0", children: /* @__PURE__ */ jsxs43("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx50("div", { className: "h-[52px] px-3 flex items-center border-b border-neutral-700 shrink-0", children: /* @__PURE__ */ jsxs44("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ jsx50(Crosshair2, { className: "w-4 h-4 text-neutral-500 shrink-0" }),
-            /* @__PURE__ */ jsxs43("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsxs44("div", { className: "min-w-0", children: [
               /* @__PURE__ */ jsx50("div", { className: "text-xs font-medium text-neutral-400", children: "Scenario" }),
               /* @__PURE__ */ jsx50("div", { className: "text-xs text-neutral-600", children: "Select scenario and step" })
             ] })
@@ -9222,31 +9275,31 @@ function SimulatorPromptEditor({
           /* @__PURE__ */ jsx50("div", { className: "flex-1 overflow-y-auto", children: scenarios.map((scenario) => {
             const isExpanded = effectiveExpanded.has(scenario.id);
             const isScenarioActive = selectedScenario === scenario.id;
-            return /* @__PURE__ */ jsxs43("div", { children: [
-              /* @__PURE__ */ jsxs43(
+            return /* @__PURE__ */ jsxs44("div", { children: [
+              /* @__PURE__ */ jsxs44(
                 "button",
                 {
                   onClick: () => toggleScenario(scenario.id),
-                  className: `w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-[#1e1e2e] ${isScenarioActive ? "bg-[#1e1e2e]/50" : ""}`,
+                  className: `w-full min-h-[44px] py-2 flex items-start gap-2 px-3 text-left transition-colors hover:bg-neutral-850 ${isScenarioActive ? "bg-neutral-850/50" : ""}`,
                   children: [
-                    /* @__PURE__ */ jsx50("div", { className: "flex-shrink-0 mt-0.5 text-[#6c7086]", children: isExpanded ? /* @__PURE__ */ jsx50(ChevronDown11, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx50(ChevronRight7, { className: "w-4 h-4" }) }),
-                    /* @__PURE__ */ jsxs43("div", { className: "min-w-0 flex-1", children: [
-                      /* @__PURE__ */ jsx50("div", { className: `text-sm font-medium ${isScenarioActive ? "text-[#cdd6f4]" : "text-[#a6adc8]"}`, children: scenario.name }),
-                      scenario.description && /* @__PURE__ */ jsx50("div", { className: "text-xs text-[#6c7086] mt-0.5 leading-relaxed", children: scenario.description })
+                    /* @__PURE__ */ jsx50("div", { className: "flex-shrink-0 mt-0.5 text-neutral-500", children: isExpanded ? /* @__PURE__ */ jsx50(ChevronDown11, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx50(ChevronRight7, { className: "w-4 h-4" }) }),
+                    /* @__PURE__ */ jsxs44("div", { className: "min-w-0 flex-1", children: [
+                      /* @__PURE__ */ jsx50("div", { className: `text-sm font-medium ${isScenarioActive ? "text-neutral-300" : "text-neutral-400"}`, children: scenario.name }),
+                      scenario.description && /* @__PURE__ */ jsx50("div", { className: "text-xs text-neutral-500 mt-0.5 leading-relaxed", children: scenario.description })
                     ] })
                   ]
                 }
               ),
               isExpanded && /* @__PURE__ */ jsx50("div", { className: "pb-1", children: scenario.steps.map((step) => {
                 const isStepSelected = selectedScenario === scenario.id && selectedStep === step.id;
-                return /* @__PURE__ */ jsxs43(
+                return /* @__PURE__ */ jsxs44(
                   "button",
                   {
                     onClick: () => selectStep(scenario.id, step.id),
-                    className: `w-full h-[32px] flex items-center gap-2 pl-9 pr-3 text-left transition-colors ${isStepSelected ? "bg-[#313244]/50 border-l-2 border-[#89b4fa]" : "hover:bg-[#1e1e2e] border-l-2 border-transparent"}`,
+                    className: `w-full h-[32px] flex items-center gap-2 pl-9 pr-3 text-left transition-colors ${isStepSelected ? "bg-neutral-700/50 border-l-2 border-blue-400" : "hover:bg-neutral-850 border-l-2 border-transparent"}`,
                     children: [
-                      /* @__PURE__ */ jsx50("div", { className: `w-1.5 h-1.5 rounded-full flex-shrink-0 ${isStepSelected ? "bg-[#89b4fa]" : "bg-[#45475a]"}` }),
-                      /* @__PURE__ */ jsx50("span", { className: `text-xs ${isStepSelected ? "text-[#cdd6f4]" : "text-[#a6adc8]"}`, children: step.name })
+                      /* @__PURE__ */ jsx50("div", { className: `w-1.5 h-1.5 rounded-full flex-shrink-0 ${isStepSelected ? "bg-blue-400" : "bg-neutral-600"}` }),
+                      /* @__PURE__ */ jsx50("span", { className: `text-xs ${isStepSelected ? "text-neutral-300" : "text-neutral-400"}`, children: step.name })
                     ]
                   },
                   step.id
@@ -9258,14 +9311,14 @@ function SimulatorPromptEditor({
             "div",
             {
               onPointerDown: handleSidebarPointerDown,
-              className: "absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-[#89b4fa]/30 transition-colors z-10 flex items-center justify-center group",
-              children: /* @__PURE__ */ jsx50(GripVertical4, { className: "w-3 h-3 text-[#45475a] group-hover:text-[#6c7086] opacity-0 group-hover:opacity-100 transition-opacity" })
+              className: "absolute right-0 top-0 bottom-0 w-1.5 cursor-col-resize hover:bg-blue-400/30 transition-colors z-10 flex items-center justify-center group",
+              children: /* @__PURE__ */ jsx50(GripVertical4, { className: "w-3 h-3 text-neutral-600 group-hover:text-neutral-500 opacity-0 group-hover:opacity-100 transition-opacity" })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx50("div", { className: "flex-1 min-w-0 w-0 overflow-hidden border-l border-[#313244]", children: /* @__PURE__ */ jsx50(
+    /* @__PURE__ */ jsx50("div", { className: "flex-1 min-w-0 w-0 overflow-hidden border-l border-neutral-700", children: /* @__PURE__ */ jsx50(
       TabbedPromptEditor,
       {
         prompts: currentPrompts,
@@ -9315,7 +9368,7 @@ import {
   Play as Play4,
   Pause as Pause4
 } from "lucide-react";
-import { jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs45 } from "react/jsx-runtime";
 var iconSubset = {
   settings: Settings6,
   folder: Folder7,
@@ -9359,8 +9412,8 @@ function CollapsibleSection({
 }) {
   const [open, setOpen] = useState32(defaultOpen);
   const Icon = icon ? iconSubset[icon] : void 0;
-  return /* @__PURE__ */ jsxs44("div", { className: cn("border-b border-neutral-700", className), children: [
-    /* @__PURE__ */ jsxs44(
+  return /* @__PURE__ */ jsxs45("div", { className: cn("border-b border-neutral-700", className), children: [
+    /* @__PURE__ */ jsxs45(
       "button",
       {
         type: "button",
@@ -9395,8 +9448,8 @@ function CollapsibleSection({
 
 // components/ui/files-panel.tsx
 import { useState as useState33, useMemo as useMemo10 } from "react";
-import { Folder as Folder8, FolderOpen, File as File5, FileCode as FileCode6, FileText as FileText2, FileJson, Image as Image5, ChevronRight as ChevronRight9, Search as Search10, MoreVertical as MoreVertical3 } from "lucide-react";
-import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Folder as Folder8, FolderOpen as FolderOpen2, File as File5, FileCode as FileCode6, FileText as FileText2, FileJson, Image as Image5, ChevronRight as ChevronRight9, Search as Search10, MoreVertical as MoreVertical3 } from "lucide-react";
+import { jsx as jsx52, jsxs as jsxs46 } from "react/jsx-runtime";
 var iconSubset2 = {
   folder: Folder8,
   file: File5,
@@ -9450,7 +9503,7 @@ function getFileIcon(entry) {
 }
 function getFolderIcon(expanded, entry) {
   if (entry.icon && iconSubset2[entry.icon]) return iconSubset2[entry.icon];
-  return expanded ? FolderOpen : Folder8;
+  return expanded ? FolderOpen2 : Folder8;
 }
 function filterTree(entries, query) {
   const q = query.toLowerCase();
@@ -9472,8 +9525,8 @@ function FileNode({ entry, depth, selectedPath, expandedPaths, onToggleExpand, o
   const isExpanded = isFolder && expandedPaths.has(entry.path);
   const isSelected = !isFolder && selectedPath === entry.path;
   const Icon = isFolder ? getFolderIcon(isExpanded, entry) : getFileIcon(entry);
-  return /* @__PURE__ */ jsxs45("li", { children: [
-    /* @__PURE__ */ jsxs45(
+  return /* @__PURE__ */ jsxs46("li", { children: [
+    /* @__PURE__ */ jsxs46(
       "button",
       {
         type: "button",
@@ -9559,15 +9612,15 @@ function FilesPanel({
       return next;
     });
   }
-  return /* @__PURE__ */ jsxs45("div", { className: cn("flex flex-col bg-neutral-800 rounded-lg overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs45("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-700", children: [
+  return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col bg-neutral-800 rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-700", children: [
       /* @__PURE__ */ jsx52("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-neutral-500", children: "Files" }),
-      /* @__PURE__ */ jsxs45("span", { className: "text-[10px] text-neutral-500", children: [
+      /* @__PURE__ */ jsxs46("span", { className: "text-[10px] text-neutral-500", children: [
         fileCount,
         " files"
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsx52("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs45("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs", children: [
+    showSearch && /* @__PURE__ */ jsx52("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs", children: [
       /* @__PURE__ */ jsx52(Search10, { className: "w-3 h-3 text-neutral-500 shrink-0" }),
       /* @__PURE__ */ jsx52(
         "input",
@@ -9580,7 +9633,7 @@ function FilesPanel({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs45("div", { className: "flex-1 overflow-y-auto py-1", children: [
+    /* @__PURE__ */ jsxs46("div", { className: "flex-1 overflow-y-auto py-1", children: [
       /* @__PURE__ */ jsx52("ul", { children: displayedFiles.map((entry) => /* @__PURE__ */ jsx52(
         FileNode,
         {
@@ -9602,7 +9655,7 @@ function FilesPanel({
 // components/ui/snippets-panel.tsx
 import { useState as useState34, useMemo as useMemo11 } from "react";
 import { Search as Search11 } from "lucide-react";
-import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs47 } from "react/jsx-runtime";
 var LANGUAGE_COLORS = {
   typescript: "#3178c6",
   javascript: "#f7df1e",
@@ -9637,15 +9690,15 @@ function SnippetsPanel({
     () => searchQuery ? snippets.filter((s) => matchesSearch(s, searchQuery.toLowerCase())) : snippets,
     [snippets, searchQuery]
   );
-  return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col bg-neutral-800 rounded-lg overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-700", children: [
+  return /* @__PURE__ */ jsxs47("div", { className: cn("flex flex-col bg-neutral-800 rounded-lg overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between px-3 py-2 border-b border-neutral-700", children: [
       /* @__PURE__ */ jsx53("span", { className: "text-[11px] font-semibold uppercase tracking-wider text-neutral-500", children: "Snippets" }),
-      /* @__PURE__ */ jsxs46("span", { className: "text-[10px] text-neutral-500", children: [
+      /* @__PURE__ */ jsxs47("span", { className: "text-[10px] text-neutral-500", children: [
         snippets.length,
         " snippets"
       ] })
     ] }),
-    showSearch && /* @__PURE__ */ jsx53("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs", children: [
+    showSearch && /* @__PURE__ */ jsx53("div", { className: "px-2 py-2 border-b border-neutral-700", children: /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1.5 px-2 py-1 bg-black border border-neutral-700 rounded text-xs", children: [
       /* @__PURE__ */ jsx53(Search11, { className: "w-3 h-3 text-neutral-500 shrink-0" }),
       /* @__PURE__ */ jsx53(
         "input",
@@ -9658,7 +9711,7 @@ function SnippetsPanel({
         }
       )
     ] }) }),
-    /* @__PURE__ */ jsxs46("div", { className: "flex-1 overflow-y-auto p-2 space-y-2", children: [
+    /* @__PURE__ */ jsxs47("div", { className: "flex-1 overflow-y-auto p-2 space-y-2", children: [
       filteredSnippets.map((snippet) => /* @__PURE__ */ jsx53(
         SnippetCard,
         {
@@ -9674,9 +9727,9 @@ function SnippetsPanel({
 }
 function SnippetCard({ snippet, onInsert, onCopy }) {
   const langColor = snippet.language ? LANGUAGE_COLORS[snippet.language.toLowerCase()] ?? "#6b7280" : "#6b7280";
-  return /* @__PURE__ */ jsxs46("div", { className: "rounded-md border border-neutral-700 bg-neutral-900 hover:border-neutral-600 transition-colors", children: [
-    /* @__PURE__ */ jsxs46("div", { className: "flex items-center justify-between gap-2 px-2.5 py-1.5", children: [
-      /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-2 min-w-0", children: [
+  return /* @__PURE__ */ jsxs47("div", { className: "rounded-md border border-neutral-700 bg-neutral-900 hover:border-neutral-600 transition-colors", children: [
+    /* @__PURE__ */ jsxs47("div", { className: "flex items-center justify-between gap-2 px-2.5 py-1.5", children: [
+      /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-2 min-w-0", children: [
         /* @__PURE__ */ jsx53("span", { className: "text-xs font-medium text-neutral-200 truncate", children: snippet.label }),
         snippet.language && /* @__PURE__ */ jsx53(
           "span",
@@ -9687,7 +9740,7 @@ function SnippetCard({ snippet, onInsert, onCopy }) {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs46("div", { className: "flex items-center gap-0.5 shrink-0", children: [
+      /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-0.5 shrink-0", children: [
         onInsert && /* @__PURE__ */ jsx53(
           IconButton,
           {
@@ -9747,9 +9800,11 @@ import {
   Bot as Bot5,
   Puzzle as Puzzle5,
   Plug as Plug5,
-  Webhook as Webhook5
+  Webhook as Webhook5,
+  House,
+  Package as Package3
 } from "lucide-react";
-import { jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs48 } from "react/jsx-runtime";
 var iconSubset3 = {
   folder: Folder9,
   file: File6,
@@ -9781,7 +9836,9 @@ var iconSubset3 = {
   bot: Bot5,
   puzzle: Puzzle5,
   plug: Plug5,
-  webhook: Webhook5
+  webhook: Webhook5,
+  home: House,
+  "package": Package3
 };
 var sizeConfig2 = {
   xss: { text: "text-[10px]", icon: "w-2.5 h-2.5", px: "px-1", py: "py-0.5", gap: "gap-0.5", sep: "w-2 h-2" },
@@ -9828,22 +9885,29 @@ function Breadcrumb({
   segments,
   separator = "chevron",
   size = "sm",
+  variant = "box",
   className
 }) {
   const s = sizeConfig2[size];
-  return /* @__PURE__ */ jsx54("nav", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx54("div", { className: cn("flex items-center gap-1", s.px, s.py, "bg-neutral-800/50 border border-neutral-700/50 rounded-lg"), children: segments.map((segment, index) => {
+  const isBox = variant === "box";
+  return /* @__PURE__ */ jsx54("nav", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsx54("div", { className: cn(
+    "flex items-center gap-1",
+    isBox && [s.px, s.py, "bg-neutral-800/50 border border-neutral-700/50 rounded-lg"]
+  ), children: segments.map((segment, index) => {
     const isLast = index === segments.length - 1;
     const isClickable = !isLast && !!segment.onClick;
     const colors = segment.color && colorMap[segment.color] ? colorMap[segment.color] : null;
-    return /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1", children: [
+    const isFirstPlain = !isBox && index === 0;
+    return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1", children: [
       index > 0 && /* @__PURE__ */ jsx54(Separator, { type: separator, size }),
-      isClickable ? /* @__PURE__ */ jsxs47(
+      isClickable ? /* @__PURE__ */ jsxs48(
         "button",
         {
           type: "button",
           onClick: segment.onClick,
           className: cn(
-            "flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer",
+            "flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer",
+            isFirstPlain ? "pl-0" : "pl-2",
             s.text,
             "font-medium hover:text-white",
             colors ? [colors.text, `hover:${colors.bg}`] : ["text-neutral-300", "hover:bg-neutral-700/50"]
@@ -9853,11 +9917,12 @@ function Breadcrumb({
             /* @__PURE__ */ jsx54("span", { children: segment.label })
           ]
         }
-      ) : /* @__PURE__ */ jsxs47(
+      ) : /* @__PURE__ */ jsxs48(
         "div",
         {
           className: cn(
-            "flex items-center gap-1.5 px-2 py-0.5 rounded-md",
+            "flex items-center gap-1.5 pr-2 py-0.5 rounded-md",
+            isFirstPlain ? "pl-0" : "pl-2",
             s.text,
             isLast ? ["font-medium bg-neutral-700/50", colors ? colors.text : "text-white"] : ["font-medium", colors ? colors.text : "text-neutral-300"]
           ),
@@ -9912,7 +9977,7 @@ import {
   Plug as Plug6,
   Webhook as Webhook6
 } from "lucide-react";
-import { Fragment as Fragment12, jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx55, jsxs as jsxs49 } from "react/jsx-runtime";
 var iconSubset4 = {
   menu: Menu3,
   home: Home3,
@@ -10027,20 +10092,20 @@ function NavigationBar({
   const closeHistory = useCallback20(() => setHistoryOpen(false), []);
   useClickOutside(historyRef, historyOpen, closeHistory);
   const hasHistoryEntries = historyEntries && historyEntries.length > 0;
-  return /* @__PURE__ */ jsx55("nav", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsxs48("div", { className: cn("flex items-center gap-1", s.px, s.py, "bg-neutral-800/50 border border-neutral-700/50 rounded-lg"), children: [
-    leadingAction && LeadIcon && /* @__PURE__ */ jsxs48(Fragment12, { children: [
+  return /* @__PURE__ */ jsx55("nav", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsxs49("div", { className: cn("flex items-center gap-1", s.px, s.py, "bg-neutral-800/50 border border-neutral-700/50 rounded-lg"), children: [
+    leadingAction && LeadIcon && /* @__PURE__ */ jsxs49(Fragment12, { children: [
       /* @__PURE__ */ jsx55(NavButton, { icon: LeadIcon, onClick: leadingAction.onClick, size }),
       /* @__PURE__ */ jsx55(Divider, { size })
     ] }),
-    hasNav && /* @__PURE__ */ jsxs48(Fragment12, { children: [
-      /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-0.5", children: [
+    hasNav && /* @__PURE__ */ jsxs49(Fragment12, { children: [
+      /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-0.5", children: [
         /* @__PURE__ */ jsx55(NavButton, { icon: ChevronLeft3, onClick: onBack, disabled: !canGoBack, size }),
         /* @__PURE__ */ jsx55(NavButton, { icon: ChevronRight11, onClick: onForward, disabled: !canGoForward, size })
       ] }),
       /* @__PURE__ */ jsx55(Divider, { size })
     ] }),
-    showHistory && /* @__PURE__ */ jsxs48(Fragment12, { children: [
-      /* @__PURE__ */ jsxs48("div", { className: "relative", ref: historyRef, children: [
+    showHistory && /* @__PURE__ */ jsxs49(Fragment12, { children: [
+      /* @__PURE__ */ jsxs49("div", { className: "relative", ref: historyRef, children: [
         /* @__PURE__ */ jsx55(
           NavButton,
           {
@@ -10051,7 +10116,7 @@ function NavigationBar({
             active: historyOpen
           }
         ),
-        historyOpen && hasHistoryEntries && /* @__PURE__ */ jsxs48("div", { className: "absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50", children: [
+        historyOpen && hasHistoryEntries && /* @__PURE__ */ jsxs49("div", { className: "absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-800 border border-neutral-700 rounded-lg shadow-xl z-50", children: [
           /* @__PURE__ */ jsx55("div", { className: "px-3 py-1.5 border-b border-neutral-700/50", children: /* @__PURE__ */ jsx55("p", { className: "text-xs font-medium text-neutral-500", children: "History" }) }),
           /* @__PURE__ */ jsx55("div", { className: "max-h-[300px] overflow-y-auto py-1", children: historyEntries.map((entry, i) => /* @__PURE__ */ jsx55(
             "button",
@@ -10062,7 +10127,7 @@ function NavigationBar({
                 setHistoryOpen(false);
               },
               className: "w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-800 transition-colors cursor-pointer",
-              children: entry.map((seg, segIdx) => /* @__PURE__ */ jsxs48("span", { className: "flex items-center gap-1 min-w-0", children: [
+              children: entry.map((seg, segIdx) => /* @__PURE__ */ jsxs49("span", { className: "flex items-center gap-1 min-w-0", children: [
                 segIdx > 0 && /* @__PURE__ */ jsx55(ChevronRight11, { className: "w-2.5 h-2.5 text-neutral-600 flex-shrink-0" }),
                 seg.icon && /* @__PURE__ */ jsx55(SegmentIcon2, { icon: seg.icon, color: seg.color, size: "xs" }),
                 /* @__PURE__ */ jsx55("span", { className: cn(
@@ -10082,9 +10147,9 @@ function NavigationBar({
       const isLast = index === segments.length - 1;
       const isClickable = !isLast && !!segment.onClick;
       const colors = segment.color && colorMap2[segment.color] ? colorMap2[segment.color] : null;
-      return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1", children: [
+      return /* @__PURE__ */ jsxs49("div", { className: "flex items-center gap-1", children: [
         index > 0 && /* @__PURE__ */ jsx55(SegmentSeparator, { type: separator, size }),
-        isClickable ? /* @__PURE__ */ jsxs48(
+        isClickable ? /* @__PURE__ */ jsxs49(
           "button",
           {
             type: "button",
@@ -10100,7 +10165,7 @@ function NavigationBar({
               /* @__PURE__ */ jsx55("span", { className: "truncate max-w-[200px]", children: segment.label })
             ]
           }
-        ) : /* @__PURE__ */ jsxs48(
+        ) : /* @__PURE__ */ jsxs49(
           "div",
           {
             className: cn(
@@ -10142,7 +10207,7 @@ import {
   Search as Search14,
   Heart as Heart7
 } from "lucide-react";
-import { jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx56, jsxs as jsxs50 } from "react/jsx-runtime";
 var iconSubset5 = {
   folder: Folder11,
   file: File8,
@@ -10245,7 +10310,7 @@ function CompactTab({
     pill: isActive ? cn("bg-neutral-700 font-medium", c.active) : "text-neutral-500 hover:text-neutral-400 hover:bg-neutral-700/50",
     card: isActive ? cn("bg-neutral-800 border-neutral-700", c.active) : "bg-transparent border-transparent text-neutral-500 hover:text-neutral-400 hover:bg-neutral-900"
   }[variant];
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "button",
     {
       type: "button",
@@ -10259,7 +10324,7 @@ function CompactTab({
         variantClass
       ),
       children: [
-        /* @__PURE__ */ jsxs49("span", { className: "relative flex items-center justify-center", children: [
+        /* @__PURE__ */ jsxs50("span", { className: "relative flex items-center justify-center", children: [
           tab.icon && /* @__PURE__ */ jsx56(TabIcon, { icon: tab.icon, size, color: isActive ? tab.color : void 0 }),
           tab.badge !== void 0 && /* @__PURE__ */ jsx56("span", { className: "absolute -top-1.5 -right-2.5", children: /* @__PURE__ */ jsx56(Badge, { value: tab.badge, color: tab.badgeColor, size: "xss" }) })
         ] }),
@@ -10279,7 +10344,7 @@ function UnderlineTab({
   const s = sizeConfig4[size];
   const c = getColors(tab.color);
   const showClose = tab.closable && onClose;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "button",
     {
       type: "button",
@@ -10313,7 +10378,7 @@ function PillTab({
   const s = sizeConfig4[size];
   const c = getColors(tab.color);
   const showClose = tab.closable && onClose;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "button",
     {
       type: "button",
@@ -10346,7 +10411,7 @@ function CardTab({
   const s = sizeConfig4[size];
   const c = getColors(tab.color);
   const showClose = tab.closable && onClose;
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs50(
     "button",
     {
       type: "button",
@@ -10444,7 +10509,7 @@ function TabBar({
 // components/ui/layout-tab-bar.tsx
 import { useState as useState37, useRef as useRef25, useCallback as useCallback22, useEffect as useEffect21 } from "react";
 import { ChevronLeft as ChevronLeft4, ChevronRight as ChevronRight12, X as X13 } from "lucide-react";
-import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs51 } from "react/jsx-runtime";
 var COLORS2 = {
   white: { border: "border-t-white", text: "text-white" },
   blue: { border: "border-t-blue-400", text: "text-blue-400" },
@@ -10564,7 +10629,7 @@ function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className
     window.addEventListener("mousemove", onMove);
     window.addEventListener("mouseup", onUp);
   }, [onReorder]);
-  return /* @__PURE__ */ jsxs50("div", { className: cn("relative flex items-center min-h-12 flex-shrink-0 bg-neutral-900/80 border-b border-neutral-700/50", className), children: [
+  return /* @__PURE__ */ jsxs51("div", { className: cn("relative flex items-center min-h-12 flex-shrink-0 bg-neutral-900/80 border-b border-neutral-700/50", className), children: [
     showLeft && /* @__PURE__ */ jsx57("div", { className: "flex items-center px-2 shrink-0", children: /* @__PURE__ */ jsx57("button", { type: "button", onClick: () => scroll("left"), className: "text-neutral-500 hover:text-neutral-400 transition-colors cursor-pointer", children: /* @__PURE__ */ jsx57(ChevronLeft4, { className: "w-3.5 h-3.5" }) }) }),
     /* @__PURE__ */ jsx57("div", { ref: scrollRef, className: "flex items-end gap-1 px-3 overflow-x-auto flex-1 h-full", style: { scrollbarWidth: "none" }, children: tabs.map((tab, i) => {
       const isActive = tab.id === activeId;
@@ -10576,9 +10641,9 @@ function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className
       const isDragged = drag?.from === i;
       const insertHere = drag && drag.insertAt === i && drag.from !== i && drag.from !== i - 1;
       const insertAfterLast = drag && drag.insertAt === tabs.length && i === tabs.length - 1 && drag.from !== i;
-      return /* @__PURE__ */ jsxs50("div", { className: "relative flex-shrink-0", children: [
+      return /* @__PURE__ */ jsxs51("div", { className: "relative flex-shrink-0", children: [
         insertHere && /* @__PURE__ */ jsx57("div", { className: "absolute -left-1 top-0 bottom-0 w-0.5 bg-blue-500 rounded-full z-10" }),
-        /* @__PURE__ */ jsxs50(
+        /* @__PURE__ */ jsxs51(
           "button",
           {
             type: "button",
@@ -10605,11 +10670,11 @@ function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className
               backgroundImage: getGradient(tab.color, isActive)
             },
             children: [
-              /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-1.5 w-full transition-[padding] duration-150 group-hover:pr-5", children: [
+              /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1.5 w-full transition-[padding] duration-150 group-hover:pr-5", children: [
                 tab.icon && /* @__PURE__ */ jsx57("span", { className: cn("shrink-0 inline-flex", isActive ? iconC : "text-neutral-400"), style: { width: 14, height: 14 }, children: tab.icon }),
                 /* @__PURE__ */ jsx57("span", { className: cn("truncate text-sm font-medium", isActive ? titleC : "text-neutral-300"), children: tab.title })
               ] }),
-              tab.subtitle && /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-1 w-full", children: [
+              tab.subtitle && /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1 w-full", children: [
                 tab.subtitleIcon && /* @__PURE__ */ jsx57("span", { className: cn("shrink-0 inline-flex", isActive ? subIconC : "text-neutral-500"), style: { width: 10, height: 10 }, children: tab.subtitleIcon }),
                 /* @__PURE__ */ jsx57("span", { className: cn("truncate text-xs", isActive ? subC : "text-neutral-500"), children: tab.subtitle })
               ] }),
@@ -10646,12 +10711,12 @@ function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className
       const ghostIconC = getTextClass(t.iconColor || t.titleColor || "white");
       const ghostSubC = getTextClass(t.subtitleColor || t.selectedColor || t.color);
       const ghostSubIconC = getTextClass(t.subtitleIconColor || t.subtitleColor || t.selectedColor || t.color);
-      return /* @__PURE__ */ jsx57("div", { className: "fixed z-50 pointer-events-none opacity-90", style: { left: drag.x + 12, top: drag.y - 20 }, children: /* @__PURE__ */ jsxs50("div", { className: cn("flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800", ghostBorder), children: [
-        /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-1.5", children: [
+      return /* @__PURE__ */ jsx57("div", { className: "fixed z-50 pointer-events-none opacity-90", style: { left: drag.x + 12, top: drag.y - 20 }, children: /* @__PURE__ */ jsxs51("div", { className: cn("flex flex-col gap-0.5 px-2.5 py-1.5 rounded-t-lg border-t-2 shadow-xl bg-neutral-800", ghostBorder), children: [
+        /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1.5", children: [
           t.icon && /* @__PURE__ */ jsx57("span", { className: cn("shrink-0 inline-flex", ghostIconC), style: { width: 14, height: 14 }, children: t.icon }),
           /* @__PURE__ */ jsx57("span", { className: cn("text-sm font-medium", ghostTitleC), children: t.title })
         ] }),
-        t.subtitle && /* @__PURE__ */ jsxs50("div", { className: "flex items-center gap-1", children: [
+        t.subtitle && /* @__PURE__ */ jsxs51("div", { className: "flex items-center gap-1", children: [
           t.subtitleIcon && /* @__PURE__ */ jsx57("span", { className: cn("shrink-0 inline-flex", ghostSubIconC), style: { width: 10, height: 10 }, children: t.subtitleIcon }),
           /* @__PURE__ */ jsx57("span", { className: cn("text-xs", ghostSubC), children: t.subtitle })
         ] })
@@ -10688,7 +10753,7 @@ import {
   Bot as Bot7,
   Plug as Plug7
 } from "lucide-react";
-import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs52 } from "react/jsx-runtime";
 var iconSubset6 = {
   settings: Settings10,
   puzzle: Puzzle7,
@@ -10728,7 +10793,7 @@ function NavCard({
   className
 }) {
   const Icon = icon ? iconSubset6[icon] : void 0;
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs52(
     "button",
     {
       type: "button",
@@ -10759,7 +10824,7 @@ function NavCard({
 
 // components/ui/extension-list-card.tsx
 import { memo, useState as useState38, useRef as useRef26, useCallback as useCallback23, useEffect as useEffect22 } from "react";
-import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs53 } from "react/jsx-runtime";
 var ExtensionListCard = memo(function ExtensionListCard2({
   icon: Icon,
   iconColor,
@@ -10783,7 +10848,7 @@ var ExtensionListCard = memo(function ExtensionListCard2({
     clearTimeout(hoverTimerRef.current);
     setIsHovered(false);
   }, []);
-  return /* @__PURE__ */ jsxs52(
+  return /* @__PURE__ */ jsxs53(
     "div",
     {
       className: cn(
@@ -10796,11 +10861,11 @@ var ExtensionListCard = memo(function ExtensionListCard2({
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children: [
-        /* @__PURE__ */ jsxs52("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs52("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsxs53("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ jsxs53("div", { className: "flex items-start gap-3 min-w-0 flex-1", children: [
             /* @__PURE__ */ jsx59(Icon, { className: cn("w-5 h-5 shrink-0", iconColor) }),
-            /* @__PURE__ */ jsxs52("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsxs52("div", { className: "flex items-center gap-2 flex-wrap", children: [
+            /* @__PURE__ */ jsxs53("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2 flex-wrap", children: [
                 /* @__PURE__ */ jsx59("span", { className: cn("text-sm font-medium", titleClassName), children: title }),
                 badges
               ] }),
@@ -10832,7 +10897,7 @@ import {
   Bot as Bot8,
   Plug as Plug8
 } from "lucide-react";
-import { jsx as jsx60, jsxs as jsxs53 } from "react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs54 } from "react/jsx-runtime";
 var iconSubset7 = {
   settings: Settings11,
   shield: Shield10,
@@ -10872,14 +10937,14 @@ function StatusCard({
   className
 }) {
   const Icon = icon ? iconSubset7[icon] : void 0;
-  return /* @__PURE__ */ jsxs53("div", { className: cn("rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden", className), children: [
-    /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-neutral-700", children: [
+  return /* @__PURE__ */ jsxs54("div", { className: cn("rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden", className), children: [
+    /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-neutral-700", children: [
       Icon && /* @__PURE__ */ jsx60(Icon, { className: "w-4 h-4 shrink-0", style: { color: iconColor } }),
       /* @__PURE__ */ jsx60("h3", { className: "text-sm font-medium text-neutral-200", children: title })
     ] }),
-    /* @__PURE__ */ jsx60("div", { className: "divide-y divide-[#374151]/60", children: items.map((item) => /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
+    /* @__PURE__ */ jsx60("div", { className: "divide-y divide-neutral-700/60", children: items.map((item) => /* @__PURE__ */ jsxs54("div", { className: "flex items-center justify-between px-4 py-2.5", children: [
       /* @__PURE__ */ jsx60("span", { className: "text-xs text-neutral-400", children: item.label }),
-      /* @__PURE__ */ jsxs53("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs54("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx60("span", { className: cn("text-xs font-medium", statusValueColor[item.status]), children: item.value }),
         /* @__PURE__ */ jsx60("span", { className: cn("w-2 h-2 rounded-full shrink-0", statusDotColor[item.status]) })
       ] })
@@ -10898,7 +10963,7 @@ function StatusCard({
 
 // components/ui/snapshot-card.tsx
 import { RefreshCw as RefreshCw7, Eye as Eye10 } from "lucide-react";
-import { jsx as jsx61, jsxs as jsxs54 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs55 } from "react/jsx-runtime";
 var statusStripeColor = {
   synced: "bg-green-400",
   pending: "bg-amber-400",
@@ -10921,10 +10986,10 @@ function SnapshotCard({
   onView,
   className
 }) {
-  return /* @__PURE__ */ jsxs54("div", { className: cn("rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden", className), children: [
+  return /* @__PURE__ */ jsxs55("div", { className: cn("rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden", className), children: [
     /* @__PURE__ */ jsx61("div", { className: cn("h-1", statusStripeColor[status]) }),
-    /* @__PURE__ */ jsxs54("div", { className: "p-4", children: [
-      /* @__PURE__ */ jsxs54("div", { className: "flex items-start justify-between gap-2", children: [
+    /* @__PURE__ */ jsxs55("div", { className: "p-4", children: [
+      /* @__PURE__ */ jsxs55("div", { className: "flex items-start justify-between gap-2", children: [
         /* @__PURE__ */ jsx61("h3", { className: "text-sm font-medium text-neutral-200 truncate", children: title }),
         /* @__PURE__ */ jsx61(
           Label,
@@ -10939,12 +11004,12 @@ function SnapshotCard({
       ] }),
       timestamp && /* @__PURE__ */ jsx61("p", { className: "mt-1 text-[10px] text-neutral-500", children: timestamp }),
       description && /* @__PURE__ */ jsx61("p", { className: "mt-2 text-xs text-neutral-500 leading-relaxed line-clamp-2", children: description }),
-      stats && stats.length > 0 && /* @__PURE__ */ jsx61("div", { className: "mt-3 grid grid-cols-2 gap-x-4 gap-y-2", children: stats.map((stat) => /* @__PURE__ */ jsxs54("div", { children: [
+      stats && stats.length > 0 && /* @__PURE__ */ jsx61("div", { className: "mt-3 grid grid-cols-2 gap-x-4 gap-y-2", children: stats.map((stat) => /* @__PURE__ */ jsxs55("div", { children: [
         /* @__PURE__ */ jsx61("p", { className: "text-[10px] text-neutral-500", children: stat.label }),
         /* @__PURE__ */ jsx61("p", { className: "text-xs font-medium text-neutral-200", children: stat.value })
       ] }, stat.label)) }),
-      (onSync || onView) && /* @__PURE__ */ jsxs54("div", { className: "mt-3 pt-3 border-t border-neutral-700 flex items-center gap-2", children: [
-        onSync && /* @__PURE__ */ jsxs54(
+      (onSync || onView) && /* @__PURE__ */ jsxs55("div", { className: "mt-3 pt-3 border-t border-neutral-700 flex items-center gap-2", children: [
+        onSync && /* @__PURE__ */ jsxs55(
           "button",
           {
             type: "button",
@@ -10956,7 +11021,7 @@ function SnapshotCard({
             ]
           }
         ),
-        onView && /* @__PURE__ */ jsxs54(
+        onView && /* @__PURE__ */ jsxs55(
           "button",
           {
             type: "button",
@@ -11006,7 +11071,7 @@ import {
   Wand2 as Wand26,
   Copy as Copy3
 } from "lucide-react";
-import { jsx as jsx62, jsxs as jsxs55 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs56 } from "react/jsx-runtime";
 var iconSubset8 = {
   info: Info6,
   settings: Settings12,
@@ -11041,13 +11106,13 @@ var iconSubset8 = {
 };
 function DetailSection({ title, icon, rows, className }) {
   const Icon = icon ? iconSubset8[icon] : void 0;
-  return /* @__PURE__ */ jsxs55("div", { className, children: [
-    /* @__PURE__ */ jsxs55("div", { className: "flex items-center gap-2 mb-3", children: [
+  return /* @__PURE__ */ jsxs56("div", { className, children: [
+    /* @__PURE__ */ jsxs56("div", { className: "flex items-center gap-2 mb-3", children: [
       Icon && /* @__PURE__ */ jsx62(Icon, { className: "w-4 h-4 text-neutral-500" }),
       /* @__PURE__ */ jsx62("span", { className: "text-sm font-medium text-neutral-400", children: title })
     ] }),
-    /* @__PURE__ */ jsx62("div", { className: "space-y-2", children: rows.map((row) => /* @__PURE__ */ jsxs55("div", { className: "flex items-start gap-3", children: [
-      /* @__PURE__ */ jsxs55("span", { className: "text-xs text-neutral-500 w-24 shrink-0", children: [
+    /* @__PURE__ */ jsx62("div", { className: "space-y-2", children: rows.map((row) => /* @__PURE__ */ jsxs56("div", { className: "flex items-start gap-3", children: [
+      /* @__PURE__ */ jsxs56("span", { className: "text-xs text-neutral-500 w-24 shrink-0", children: [
         row.label,
         ":"
       ] }),
@@ -11056,10 +11121,77 @@ function DetailSection({ title, icon, rows, className }) {
   ] });
 }
 
+// components/ui/cookie-consent.tsx
+import { useState as useState39, useEffect as useEffect23 } from "react";
+import { jsx as jsx63, jsxs as jsxs57 } from "react/jsx-runtime";
+function CookieConsent({
+  storageKey,
+  accentColor = "cyan",
+  heading = "We value your privacy",
+  description = "This site uses only essential cookies for functionality. No tracking or analytics.",
+  onConsent
+}) {
+  const [isVisible, setIsVisible] = useState39(false);
+  useEffect23(() => {
+    const consent = localStorage.getItem(storageKey);
+    if (!consent) setIsVisible(true);
+  }, [storageKey]);
+  const handleConsent = (choice) => {
+    localStorage.setItem(storageKey, choice);
+    setIsVisible(false);
+    onConsent?.(choice);
+  };
+  if (!isVisible) return null;
+  return /* @__PURE__ */ jsx63("div", { className: "fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900/95 backdrop-blur-sm border-t border-neutral-700/50", children: /* @__PURE__ */ jsxs57("div", { className: "max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4", children: [
+    /* @__PURE__ */ jsxs57("div", { className: "flex-grow", children: [
+      /* @__PURE__ */ jsx63("p", { className: "text-sm text-neutral-200 mb-1", children: heading }),
+      /* @__PURE__ */ jsx63("p", { className: "text-xs text-neutral-400", children: description })
+    ] }),
+    /* @__PURE__ */ jsxs57("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+      /* @__PURE__ */ jsx63(
+        "button",
+        {
+          onClick: () => handleConsent("declined"),
+          className: "px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors",
+          children: "Decline"
+        }
+      ),
+      /* @__PURE__ */ jsx63(
+        "button",
+        {
+          onClick: () => handleConsent("essential"),
+          className: "px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors",
+          children: "Essential Only"
+        }
+      ),
+      /* @__PURE__ */ jsx63(
+        "button",
+        {
+          onClick: () => handleConsent("accepted"),
+          className: `px-3 py-1.5 text-sm h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors bg-${accentColor}-600 border-${accentColor}-500 hover:bg-${accentColor}-500`,
+          children: "Accept All"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx63(
+      IconButton,
+      {
+        icon: "x",
+        color: "neutral",
+        size: "xs",
+        tooltip: { description: "Dismiss" },
+        tooltipPosition: "top",
+        onClick: () => handleConsent("declined"),
+        className: "absolute top-2 right-2 sm:relative sm:top-auto sm:right-auto"
+      }
+    )
+  ] }) });
+}
+
 // components/hooks/use-navigation-history.ts
-import { useState as useState39, useCallback as useCallback24 } from "react";
+import { useState as useState40, useCallback as useCallback24 } from "react";
 function useNavigationHistory(initial, maxEntries = 50) {
-  const [state, setState] = useState39({
+  const [state, setState] = useState40({
     backStack: [],
     current: initial ?? null,
     forwardStack: []
@@ -11116,6 +11248,357 @@ function useNavigationHistory(initial, maxEntries = 50) {
     history: [...state.backStack, ...state.current ? [state.current] : []]
   };
 }
+
+// components/settings/SettingsTreeNav.tsx
+import { useState as useState41, useEffect as useEffect24, useMemo as useMemo12 } from "react";
+import { ChevronRight as ChevronRight13, ChevronDown as ChevronDown12, ChevronsUpDown as ChevronsUpDown5, ChevronsDownUp as ChevronsDownUp5 } from "lucide-react";
+
+// components/settings/settings-tree-utils.ts
+function findNodeByPath(tree, path) {
+  const parts = path.split(".");
+  let current;
+  for (const part of parts) {
+    const found = (current?.children ?? tree).find((n) => n.id === part);
+    if (!found) return null;
+    current = found;
+  }
+  return current ?? null;
+}
+function getBreadcrumbFromPath(tree, path) {
+  const parts = path.split(".");
+  const breadcrumb = [];
+  let currentPath = "";
+  let currentNodes = tree;
+  for (const part of parts) {
+    const node = currentNodes.find((n) => n.id === part);
+    if (!node) break;
+    currentPath = currentPath ? `${currentPath}.${part}` : part;
+    breadcrumb.push({
+      label: node.label,
+      icon: node.icon,
+      path: currentPath
+    });
+    currentNodes = node.children ?? [];
+  }
+  return breadcrumb;
+}
+function isLeafNode(node) {
+  return !node.children || node.children.length === 0;
+}
+function getAllLeafPaths(tree, parentPath = "") {
+  const paths = [];
+  for (const node of tree) {
+    const nodePath = parentPath ? `${parentPath}.${node.id}` : node.id;
+    if (isLeafNode(node)) {
+      paths.push(nodePath);
+    } else if (node.children) {
+      paths.push(...getAllLeafPaths(node.children, nodePath));
+    }
+  }
+  return paths;
+}
+function collectExpandablePaths2(nodes, parentPath = "") {
+  const paths = [];
+  for (const node of nodes) {
+    const nodePath = parentPath ? `${parentPath}.${node.id}` : node.id;
+    if (!isLeafNode(node) && node.children) {
+      paths.push(nodePath);
+      paths.push(...collectExpandablePaths2(node.children, nodePath));
+    }
+  }
+  return paths;
+}
+function getParentPaths(path) {
+  const parts = path.split(".");
+  const parents = [];
+  let current = "";
+  for (let i = 0; i < parts.length - 1; i++) {
+    current = current ? `${current}.${parts[i]}` : parts[i];
+    parents.push(current);
+  }
+  return parents;
+}
+function filterTree2(nodes, query, parentPath = "") {
+  if (!query.trim()) return nodes;
+  const lowerQuery = query.toLowerCase();
+  return nodes.map((node) => {
+    const nodePath = parentPath ? `${parentPath}.${node.id}` : node.id;
+    const labelMatches = node.label.toLowerCase().includes(lowerQuery);
+    if (isLeafNode(node)) {
+      return labelMatches ? node : null;
+    }
+    const filteredChildren = filterTree2(node.children || [], query, nodePath);
+    if (labelMatches) {
+      return node;
+    } else if (filteredChildren.length > 0) {
+      return { ...node, children: filteredChildren };
+    }
+    return null;
+  }).filter((n) => n !== null);
+}
+
+// components/settings/SettingsTreeNav.tsx
+import { Fragment as Fragment13, jsx as jsx64, jsxs as jsxs58 } from "react/jsx-runtime";
+function highlightMatch2(text, query) {
+  if (!query) return text;
+  const lowerText = text.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  const index = lowerText.indexOf(lowerQuery);
+  if (index === -1) return text;
+  return /* @__PURE__ */ jsxs58(Fragment13, { children: [
+    text.slice(0, index),
+    /* @__PURE__ */ jsx64("span", { className: "bg-yellow-500/30 text-yellow-200", children: text.slice(index, index + query.length) }),
+    text.slice(index + query.length)
+  ] });
+}
+function TreeNode({
+  node,
+  path,
+  selectedPath,
+  onSelectPath,
+  expandedPaths,
+  onToggleExpand,
+  depth,
+  searchQuery
+}) {
+  const isLeaf = isLeafNode(node);
+  const isExpanded = expandedPaths.has(path);
+  const isSelected = selectedPath === path;
+  const isInSelectedPath = selectedPath.startsWith(path + ".");
+  const handleClick = () => {
+    if (isLeaf) {
+      onSelectPath(path);
+    } else {
+      onToggleExpand(path);
+    }
+  };
+  return /* @__PURE__ */ jsxs58("div", { children: [
+    /* @__PURE__ */ jsxs58(
+      "button",
+      {
+        onClick: handleClick,
+        className: `
+          w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer
+          ${isSelected ? "bg-blue-500/20 text-blue-400" : isInSelectedPath ? "text-neutral-300" : "text-neutral-400"}
+          ${!isSelected && "hover:bg-neutral-800 hover:text-neutral-200"}
+        `,
+        style: { paddingLeft: `${depth * 12 + 8}px` },
+        children: [
+          !isLeaf && /* @__PURE__ */ jsx64("span", { className: "w-4 h-4 flex items-center justify-center flex-shrink-0", children: isExpanded ? /* @__PURE__ */ jsx64(ChevronDown12, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx64(ChevronRight13, { className: "w-3.5 h-3.5" }) }),
+          isLeaf && /* @__PURE__ */ jsx64("span", { className: "w-4 h-4 flex-shrink-0" }),
+          /* @__PURE__ */ jsx64("span", { className: "flex-shrink-0", children: node.icon }),
+          /* @__PURE__ */ jsx64("span", { className: "truncate", children: searchQuery ? highlightMatch2(node.label, searchQuery) : node.label })
+        ]
+      }
+    ),
+    !isLeaf && isExpanded && node.children && /* @__PURE__ */ jsx64("div", { children: node.children.map((child) => /* @__PURE__ */ jsx64(
+      TreeNode,
+      {
+        node: child,
+        path: `${path}.${child.id}`,
+        selectedPath,
+        onSelectPath,
+        expandedPaths,
+        onToggleExpand,
+        depth: depth + 1,
+        searchQuery
+      },
+      child.id
+    )) })
+  ] });
+}
+function SettingsTreeNav({ tree, selectedPath, onSelectPath }) {
+  const [expandedPaths, setExpandedPaths] = useState41(() => {
+    const expanded = /* @__PURE__ */ new Set();
+    if (selectedPath) {
+      for (const p of getParentPaths(selectedPath)) {
+        expanded.add(p);
+      }
+    }
+    return expanded;
+  });
+  const [searchQuery, setSearchQuery] = useState41("");
+  const allExpandablePaths = useMemo12(() => collectExpandablePaths2(tree), [tree]);
+  const filteredTree = useMemo12(
+    () => filterTree2(tree, searchQuery),
+    [tree, searchQuery]
+  );
+  const collapsedCount = allExpandablePaths.filter((p) => !expandedPaths.has(p)).length;
+  const allCollapsed = collapsedCount === allExpandablePaths.length && allExpandablePaths.length > 0;
+  const allExpanded = collapsedCount === 0;
+  useEffect24(() => {
+    if (selectedPath) {
+      const parents = getParentPaths(selectedPath);
+      const newExpanded = new Set(expandedPaths);
+      let changed = false;
+      for (const p of parents) {
+        if (!newExpanded.has(p)) {
+          newExpanded.add(p);
+          changed = true;
+        }
+      }
+      if (changed) {
+        setExpandedPaths(newExpanded);
+      }
+    }
+  }, [selectedPath]);
+  useEffect24(() => {
+    if (searchQuery.trim()) {
+      setExpandedPaths(new Set(allExpandablePaths));
+    }
+  }, [searchQuery, allExpandablePaths]);
+  const handleToggleExpand = (path) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) {
+        next.delete(path);
+      } else {
+        next.add(path);
+      }
+      return next;
+    });
+  };
+  const handleExpandAll = () => {
+    setExpandedPaths(new Set(allExpandablePaths));
+  };
+  const handleCollapseAll = () => {
+    const parentPaths = getParentPaths(selectedPath);
+    setExpandedPaths(new Set(parentPaths));
+  };
+  return /* @__PURE__ */ jsxs58("nav", { className: "w-56 flex-shrink-0 bg-neutral-900 border-r border-neutral-800 flex flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsx64("div", { className: "p-2 border-b border-neutral-800", children: /* @__PURE__ */ jsxs58("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsx64(
+        Input,
+        {
+          type: "search",
+          placeholder: "Search...",
+          value: searchQuery,
+          onChange: setSearchQuery,
+          size: "sm",
+          variant: "filled"
+        }
+      ),
+      !allExpanded && allExpandablePaths.length > 0 && /* @__PURE__ */ jsx64(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ jsx64(ChevronsUpDown5, { className: "w-3.5 h-3.5" }),
+          onClick: handleExpandAll,
+          size: "sm",
+          color: "neutral",
+          tooltipPosition: "left",
+          tooltip: {
+            title: "Expand All",
+            description: "Expand all sections"
+          }
+        }
+      ),
+      !allCollapsed && allExpandablePaths.length > 0 && /* @__PURE__ */ jsx64(
+        IconButton,
+        {
+          icon: /* @__PURE__ */ jsx64(ChevronsDownUp5, { className: "w-3.5 h-3.5" }),
+          onClick: handleCollapseAll,
+          size: "sm",
+          color: "neutral",
+          tooltipPosition: "left",
+          tooltip: {
+            title: "Collapse All",
+            description: "Collapse all sections"
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx64("div", { className: "flex-1 overflow-y-auto py-2", children: filteredTree.length === 0 && searchQuery ? /* @__PURE__ */ jsxs58("p", { className: "text-xs text-neutral-500 text-center py-4 px-2", children: [
+      'No settings match "',
+      searchQuery,
+      '"'
+    ] }) : filteredTree.map((node) => /* @__PURE__ */ jsx64(
+      TreeNode,
+      {
+        node,
+        path: node.id,
+        selectedPath,
+        onSelectPath,
+        expandedPaths,
+        onToggleExpand: handleToggleExpand,
+        depth: 0,
+        searchQuery
+      },
+      node.id
+    )) })
+  ] });
+}
+
+// components/settings/SettingsPanel.tsx
+import { jsx as jsx65, jsxs as jsxs59 } from "react/jsx-runtime";
+function SettingsPanel({ tree, selectedPath, onSelectPath, children }) {
+  return /* @__PURE__ */ jsxs59("div", { className: "flex-1 flex overflow-hidden", children: [
+    /* @__PURE__ */ jsx65(SettingsTreeNav, { tree, selectedPath, onSelectPath }),
+    /* @__PURE__ */ jsx65("div", { className: "flex-1 overflow-y-auto", children })
+  ] });
+}
+
+// components/settings/SettingsHeader.tsx
+import "react";
+import { RotateCcw as RotateCcw7, Info as Info7 } from "lucide-react";
+import { jsx as jsx66, jsxs as jsxs60 } from "react/jsx-runtime";
+var variantStyles = {
+  default: {
+    border: "border-l-blue-500/60",
+    iconBg: "bg-blue-500/10",
+    iconColor: "text-blue-400"
+  },
+  info: {
+    border: "border-l-cyan-500/60",
+    iconBg: "bg-cyan-500/10",
+    iconColor: "text-cyan-400"
+  },
+  warning: {
+    border: "border-l-orange-500/60",
+    iconBg: "bg-orange-500/10",
+    iconColor: "text-orange-400"
+  },
+  danger: {
+    border: "border-l-red-500/60",
+    iconBg: "bg-red-500/10",
+    iconColor: "text-red-400"
+  }
+};
+function SettingsHeader({
+  description,
+  icon,
+  onReset,
+  resetTooltip,
+  action,
+  variant = "default"
+}) {
+  const styles = variantStyles[variant];
+  return /* @__PURE__ */ jsxs60(
+    "div",
+    {
+      className: `bg-neutral-950 border border-neutral-700 border-l-2 ${styles.border} rounded-lg p-4 flex items-center gap-4`,
+      children: [
+        /* @__PURE__ */ jsx66("div", { className: `flex-shrink-0 w-8 h-8 rounded-lg ${styles.iconBg} flex items-center justify-center`, children: icon ?? /* @__PURE__ */ jsx66(Info7, { className: `w-4 h-4 ${styles.iconColor}` }) }),
+        /* @__PURE__ */ jsx66("p", { className: "flex-1 text-sm text-neutral-400 leading-relaxed", children: description }),
+        /* @__PURE__ */ jsxs60("div", { className: "flex-shrink-0 flex items-center gap-2", children: [
+          action,
+          onReset && /* @__PURE__ */ jsx66(
+            IconButton,
+            {
+              icon: /* @__PURE__ */ jsx66(RotateCcw7, { className: "w-4 h-4" }),
+              onClick: onReset,
+              size: "sm",
+              color: "orange",
+              tooltip: resetTooltip ?? {
+                title: "Reset to Defaults",
+                description: "Restore all settings to their default values"
+              }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
 export {
   ACCENT_DEFS,
   AI_TOOL_LOGOS,
@@ -11135,7 +11618,10 @@ export {
   CollapsibleSection,
   ConfirmBadge,
   ConfirmModal,
+  CookieConsent,
   DARK_THEMES,
+  DEFAULT_DIMS,
+  DEFAULT_OUTLINE,
   DetailSection,
   DetailViewWrapper,
   EditorPlaceholderCard,
@@ -11167,12 +11653,16 @@ export {
   ResizableTextarea,
   SCALE_KEYS,
   SNIPPET_NAME_REGEX,
+  SURFACE_KEYS,
   ScopeBadge,
   ScreenshotUploader,
   SegmentedToggle,
   Select,
   SelectionGrid,
   SettingRow,
+  SettingsHeader,
+  SettingsPanel,
+  SettingsTreeNav,
   SimulatorPromptEditor,
   SnapshotBrowserPanel,
   SnapshotCard,
@@ -11195,15 +11685,22 @@ export {
   applyTheme,
   cn,
   collectDirPaths,
+  collectExpandablePaths2 as collectExpandablePaths,
   createErrorLogger,
+  filterTree2 as filterTree,
+  findNodeByPath,
   formatBytes,
   formatCategory,
   formatDate,
   generateScale,
+  getAllLeafPaths,
+  getBreadcrumbFromPath,
   getLanguage,
   getLanguageFromPath,
+  getParentPaths,
   hslToHex,
   iconMap,
+  isLeafNode,
   isLightTheme,
   satCurve,
   submitIssueReport,