@newtonedev/editor 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -216,9 +216,6 @@ function useEditorState({
   const [colorMode, setColorMode] = react.useState(
     initialState.preview.mode
   );
-  const [activeTheme, setActiveTheme] = react.useState(
-    initialState.preview.theme || "neutral"
-  );
   const [previewView, setPreviewView] = react.useState(
     initialPreviewView ?? { kind: "overview" }
   );
@@ -341,9 +338,19 @@ function useEditorState({
       initOverridesFromVariant(sidebarSelection.componentId);
     }
   }, [sidebarSelection, initOverridesFromVariant]);
-  const handlePropOverride = react.useCallback((propName, value) => {
-    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
-  }, []);
+  const handlePropOverride = react.useCallback(
+    (propName, value) => {
+      setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+      setSidebarSelection((prev) => {
+        if (prev !== null) return prev;
+        if (previewView.kind === "component") {
+          return { scope: "component", componentId: previewView.componentId };
+        }
+        return prev;
+      });
+    },
+    [previewView]
+  );
   const handleResetOverrides = react.useCallback(() => {
     if (sidebarSelection?.scope === "variant") {
       initOverridesFromVariant(
@@ -380,13 +387,6 @@ function useEditorState({
     setIsPublished(false);
     scheduleSave();
   }, [configuratorState, scheduleSave]);
-  const handleThemeChange = react.useCallback(
-    (theme) => {
-      setActiveTheme(theme);
-      dispatch({ type: "SET_PREVIEW_THEME", theme });
-    },
-    [dispatch]
-  );
   const handleColorModeChange = react.useCallback(
     (mode) => {
       setColorMode(mode);
@@ -448,10 +448,8 @@ function useEditorState({
     // Preview
     previewView,
     colorMode,
-    activeTheme,
     handlePreviewNavigate,
     handleSelectVariant,
-    handleThemeChange,
     handleColorModeChange,
     // Sidebar
     sidebarSelection,
@@ -491,7 +489,7 @@ function EditorShell({
     {
       style: {
         display: "flex",
-        height: "100vh",
+        height: "100%",
         overflow: "hidden",
         backgroundColor: newtone.srgbToHex(tokens.background.srgb)
       },
@@ -503,7 +501,7 @@ function EditorShell({
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              height: "100vh",
+              height: "100%",
               overflow: "hidden",
               minWidth: 0
             },
@@ -566,7 +564,7 @@ function ColorsSection({
   const palette = state.palettes[activePaletteIndex];
   const hueRange = configurator.SEMANTIC_HUE_RANGES[activePaletteIndex];
   const isNeutral = activePaletteIndex === 0;
-  const activeColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const activeColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
   const effectiveKeyColor = colorMode === "dark" ? palette.keyColorDark : palette.keyColor;
   const setKeyColorAction = colorMode === "dark" ? "SET_PALETTE_KEY_COLOR_DARK" : "SET_PALETTE_KEY_COLOR";
@@ -798,7 +796,7 @@ function ColorsSection({
               style: {
                 fontSize: 12,
                 fontWeight: 500,
-                color: newtone.srgbToHex(tokens.error.srgb)
+                color: newtone.srgbToHex(tokens.error.fill.srgb)
               },
               children: hexError
             }
@@ -957,7 +955,7 @@ function DualRangeSlider({
   const tokens = components.useTokens();
   const trackRef = react.useRef(null);
   const [activeThumb, setActiveThumb] = react.useState(null);
-  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
   const wDisplay = internalToDisplay(whitesValue);
   const bDisplay = internalToDisplay(blacksValue);
@@ -1128,6 +1126,154 @@ function RangeInput({ display, onCommit, toInternal }) {
     }
   );
 }
+var GRAPH_HEIGHT = 80;
+var GRAPH_COLS = 256;
+var GRAPH_ROWS = 64;
+function strengthToFactor(strength) {
+  switch (strength) {
+    case "none":
+      return 0;
+    case "low":
+      return newtone.HUE_GRADING_STRENGTH_LOW;
+    case "medium":
+      return newtone.HUE_GRADING_STRENGTH_MEDIUM;
+    case "hard":
+      return newtone.HUE_GRADING_STRENGTH_HARD;
+  }
+}
+function blendHues(lightHue, darkHue, wLight, wDark) {
+  const totalW = wLight + wDark;
+  if (totalW === 0) return 0;
+  const delta = ((darkHue - lightHue + 180) % 360 + 360) % 360 - 180;
+  const t = wDark / totalW;
+  const result = lightHue + delta * t;
+  return (result % 360 + 360) % 360;
+}
+function computeGraphData(state) {
+  const { dynamicRange, globalHueGrading } = state;
+  const lightActive = globalHueGrading.light.strength !== "none";
+  const darkActive = globalHueGrading.dark.strength !== "none";
+  const lightOklchHue = configurator.traditionalHueToOklch(globalHueGrading.light.hue);
+  const darkOklchHue = configurator.traditionalHueToOklch(globalHueGrading.dark.hue);
+  const lightFactor = strengthToFactor(globalHueGrading.light.strength);
+  const darkFactor = strengthToFactor(globalHueGrading.dark.strength);
+  const buffer = new Uint8ClampedArray(GRAPH_COLS * GRAPH_ROWS * 4);
+  for (let col = 0; col < GRAPH_COLS; col++) {
+    const nv = 1 - col / (GRAPH_COLS - 1);
+    const L = newtone.resolveLightness(dynamicRange, nv);
+    const wLight = lightActive ? Math.pow(nv, newtone.HUE_GRADING_EASING_POWER) : 0;
+    const wDark = darkActive ? Math.pow(1 - nv, newtone.HUE_GRADING_EASING_POWER) : 0;
+    const totalW = wLight + wDark;
+    let topHue;
+    let topChroma;
+    if (totalW === 0) {
+      topHue = 0;
+      topChroma = 0;
+    } else {
+      if (!lightActive) {
+        topHue = darkOklchHue;
+      } else if (!darkActive) {
+        topHue = lightOklchHue;
+      } else {
+        topHue = blendHues(lightOklchHue, darkOklchHue, wLight, wDark);
+      }
+      topChroma = newtone.findMaxChromaInGamut(L, topHue) * Math.min(totalW, 1);
+    }
+    for (let row = 0; row < GRAPH_ROWS; row++) {
+      const gradingIntensity = row / (GRAPH_ROWS - 1);
+      const C = topChroma * gradingIntensity;
+      const srgb = newtone.clampSrgb(newtone.oklchToSrgb({ L, C, h: topHue }));
+      const canvasY = GRAPH_ROWS - 1 - row;
+      const idx = (canvasY * GRAPH_COLS + col) * 4;
+      buffer[idx] = Math.round(srgb.r * 255);
+      buffer[idx + 1] = Math.round(srgb.g * 255);
+      buffer[idx + 2] = Math.round(srgb.b * 255);
+      buffer[idx + 3] = 255;
+    }
+  }
+  const curvePoints = [];
+  for (let i = 0; i < 26; i++) {
+    const nv = 1 - i / 25;
+    const x = i / 25 * (GRAPH_COLS - 1);
+    const lightContrib = Math.pow(nv, newtone.HUE_GRADING_EASING_POWER) * (lightFactor / newtone.HUE_GRADING_STRENGTH_HARD);
+    const darkContrib = Math.pow(1 - nv, newtone.HUE_GRADING_EASING_POWER) * (darkFactor / newtone.HUE_GRADING_STRENGTH_HARD);
+    const y = clamp(lightContrib + darkContrib, 0, 1);
+    curvePoints.push({ x, y });
+  }
+  return { buffer, curvePoints };
+}
+function DynamicRangeGraph({ state }) {
+  const tokens = components.useTokens();
+  const canvasRef = react.useRef(null);
+  const graphData = react.useMemo(
+    () => computeGraphData(state),
+    [
+      state.dynamicRange.lightest,
+      state.dynamicRange.darkest,
+      state.globalHueGrading.light.strength,
+      state.globalHueGrading.light.hue,
+      state.globalHueGrading.dark.strength,
+      state.globalHueGrading.dark.hue
+    ]
+  );
+  react.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = GRAPH_COLS;
+    canvas.height = GRAPH_ROWS;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const imageData = ctx.createImageData(GRAPH_COLS, GRAPH_ROWS);
+    imageData.data.set(graphData.buffer);
+    ctx.putImageData(imageData, 0, 0);
+    const curveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
+    const { curvePoints } = graphData;
+    if (curvePoints.length < 2) return;
+    const mapped = curvePoints.map((p) => ({
+      cx: p.x,
+      cy: (1 - p.y) * (GRAPH_ROWS - 1)
+    }));
+    ctx.beginPath();
+    ctx.strokeStyle = curveColor;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    ctx.lineCap = "round";
+    ctx.moveTo(mapped[0].cx, mapped[0].cy);
+    for (let i = 0; i < mapped.length - 1; i++) {
+      const p0 = mapped[Math.max(0, i - 1)];
+      const p1 = mapped[i];
+      const p2 = mapped[i + 1];
+      const p3 = mapped[Math.min(mapped.length - 1, i + 2)];
+      const cp1x = p1.cx + (p2.cx - p0.cx) / 6;
+      const cp1y = p1.cy + (p2.cy - p0.cy) / 6;
+      const cp2x = p2.cx - (p3.cx - p1.cx) / 6;
+      const cp2y = p2.cy - (p3.cy - p1.cy) / 6;
+      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.cx, p2.cy);
+    }
+    ctx.stroke();
+    ctx.fillStyle = curveColor;
+    for (const p of mapped) {
+      ctx.beginPath();
+      ctx.arc(p.cx, p.cy, 2, 0, Math.PI * 2);
+      ctx.fill();
+    }
+  }, [graphData, tokens]);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        width: "100%",
+        height: GRAPH_HEIGHT,
+        borderRadius: 6,
+        border: `1px solid ${borderColor}`,
+        display: "block",
+        overflow: "hidden"
+      }
+    }
+  );
+}
 function DynamicRangeSection({
   state,
   dispatch
@@ -1144,6 +1290,7 @@ function DynamicRangeSection({
   const wDisplay = internalToDisplay(state.dynamicRange.lightest);
   const bDisplay = internalToDisplay(state.dynamicRange.darkest);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(DynamicRangeGraph, { state }),
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -1350,7 +1497,7 @@ function FontPicker({
   const bgColor = newtone.srgbToHex(tokens.backgroundElevated.srgb);
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
   const hoverColor = newtone.srgbToHex(tokens.backgroundSunken.srgb);
-  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   react.useEffect(() => {
     if (!isOpen) return;
     function handleMouseDown(e) {
@@ -1793,9 +1940,9 @@ function PresetSelector({
   const bgColor = newtone.srgbToHex(tokens.background.srgb);
   const textPrimary = newtone.srgbToHex(tokens.textPrimary.srgb);
   const textSecondary = newtone.srgbToHex(tokens.textSecondary.srgb);
-  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
-  const warningColor = newtone.srgbToHex(tokens.warning.srgb);
-  const errorColor = newtone.srgbToHex(tokens.error.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
+  const warningColor = newtone.srgbToHex(tokens.warning.fill.srgb);
+  const errorColor = newtone.srgbToHex(tokens.error.fill.srgb);
   const hoverBg = `${borderColor}18`;
   const activeBg = `${interactiveColor}14`;
   react.useEffect(() => {
@@ -1887,20 +2034,15 @@ function PresetSelector({
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
-            "svg",
+            components.Icon,
             {
-              width: 10,
-              height: 10,
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: 2,
+              name: "expand_more",
+              size: 14,
               style: {
                 transform: isOpen ? "rotate(180deg)" : "none",
                 transition: "transform 150ms ease",
                 flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+              }
             }
           )
         ]
@@ -2048,20 +2190,7 @@ function PresetSelector({
                           borderRadius: 4,
                           flexShrink: 0
                         },
-                        children: /* @__PURE__ */ jsxRuntime.jsxs(
-                          "svg",
-                          {
-                            width: 14,
-                            height: 14,
-                            viewBox: "0 0 24 24",
-                            fill: "currentColor",
-                            children: [
-                              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 5, r: 2 }),
-                              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 2 }),
-                              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 19, r: 2 })
-                            ]
-                          }
-                        )
+                        children: /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name: "more_vert", size: 14, color: textSecondary })
                       }
                     )
                   ] }),
@@ -2180,21 +2309,7 @@ function PresetSelector({
                 cursor: "pointer"
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    width: 14,
-                    height: 14,
-                    viewBox: "0 0 24 24",
-                    fill: "none",
-                    stroke: "currentColor",
-                    strokeWidth: 2,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 12, y1: 5, x2: 12, y2: 19 }),
-                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 5, y1: 12, x2: 19, y2: 12 })
-                    ]
-                  }
-                ),
+                /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name: "add", size: 14, color: textSecondary }),
                 "New preset"
               ]
             }
@@ -2206,67 +2321,12 @@ function PresetSelector({
 }
 var SIDEBAR_WIDTH2 = 360;
 var ACCORDION_SECTIONS = [
-  { id: "dynamic-range", label: "Dynamic Range" },
-  { id: "colors", label: "Colors" },
-  { id: "fonts", label: "Fonts" },
-  { id: "icons", label: "Icons" },
-  { id: "others", label: "Others" }
+  { id: "dynamic-range", label: "Dynamic Range", icon: "contrast" },
+  { id: "colors", label: "Colors", icon: "palette" },
+  { id: "fonts", label: "Fonts", icon: "text_fields" },
+  { id: "icons", label: "Icons", icon: "grid_view" },
+  { id: "others", label: "Others", icon: "tune" }
 ];
-function SectionIcon({ id }) {
-  const props = {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  };
-  switch (id) {
-    case "dynamic-range":
-      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
-      ] });
-    case "colors":
-      return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" }) });
-    case "fonts":
-      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
-      ] });
-    case "icons":
-      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7" }),
-        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7" })
-      ] });
-    case "others":
-      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
-        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
-      ] });
-    default:
-      return null;
-  }
-}
 function Sidebar({
   state,
   dispatch,
@@ -2414,23 +2474,18 @@ function Sidebar({
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { id: section.id }),
+                        /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name: section.icon, size: 16 }),
                         section.label
                       ] }),
                       /* @__PURE__ */ jsxRuntime.jsx(
-                        "svg",
+                        components.Icon,
                         {
-                          width: 12,
-                          height: 12,
-                          viewBox: "0 0 24 24",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: 2,
+                          name: "expand_more",
+                          size: 16,
                           style: {
                             transform: isOpen ? "rotate(180deg)" : "none",
                             transition: "transform 150ms ease"
-                          },
-                          children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                          }
                         }
                       )
                     ]
@@ -2504,10 +2559,10 @@ function EditorHeader({
   const tokens = components.useTokens();
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
   const statusColor = {
-    saved: newtone.srgbToHex(tokens.success.srgb),
-    saving: newtone.srgbToHex(tokens.warning.srgb),
+    saved: newtone.srgbToHex(tokens.success.fill.srgb),
+    saving: newtone.srgbToHex(tokens.warning.fill.srgb),
     unsaved: newtone.srgbToHex(tokens.textSecondary.srgb),
-    error: newtone.srgbToHex(tokens.error.srgb)
+    error: newtone.srgbToHex(tokens.error.fill.srgb)
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -2553,59 +2608,6 @@ function EditorHeader({
     }
   );
 }
-var THEME_CHIPS = [
-  { id: "neutral", label: "Neutral" },
-  { id: "primary", label: "Primary" },
-  { id: "secondary", label: "Secondary" },
-  { id: "strong", label: "Strong" }
-];
-function ThemeBar({ activeTheme, onThemeChange }) {
-  const tokens = components.useTokens();
-  const [hoveredChipId, setHoveredChipId] = react.useState(null);
-  const borderColor = newtone.srgbToHex(tokens.border.srgb);
-  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        padding: "8px 24px",
-        borderBottom: `1px solid ${borderColor}`,
-        backgroundColor: newtone.srgbToHex(tokens.background.srgb),
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8 }, role: "group", "aria-label": "Theme", children: THEME_CHIPS.map((chip) => {
-        const isActive = chip.id === activeTheme;
-        const isHovered = hoveredChipId === chip.id;
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: () => onThemeChange(chip.id),
-            onMouseEnter: () => setHoveredChipId(chip.id),
-            onMouseLeave: () => setHoveredChipId(null),
-            "aria-pressed": isActive,
-            style: {
-              padding: "4px 12px",
-              borderRadius: 16,
-              border: `1px solid ${newtone.srgbToHex(
-                isActive ? tokens.interactive.srgb : tokens.border.srgb
-              )}`,
-              backgroundColor: isActive ? interactiveColor : isHovered ? `${interactiveColor}10` : "transparent",
-              color: isActive ? "#fff" : newtone.srgbToHex(tokens.textPrimary.srgb),
-              fontSize: 12,
-              fontWeight: 500,
-              cursor: "pointer",
-              transition: "background-color 150ms ease"
-            },
-            children: chip.label
-          },
-          chip.id
-        );
-      }) })
-    }
-  );
-}
 var TOC_WIDTH = 220;
 function TableOfContents({
   activeView,
@@ -2615,7 +2617,7 @@ function TableOfContents({
   const tokens = components.useTokens();
   const [hoveredId, setHoveredId] = react.useState(null);
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
-  const activeColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const activeColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   const textPrimary = newtone.srgbToHex(tokens.textPrimary.srgb);
   const textSecondary = newtone.srgbToHex(tokens.textSecondary.srgb);
   const hoverBg = `${borderColor}20`;
@@ -2770,6 +2772,16 @@ function CardPreview(props) {
     )
   ] });
 }
+function FramePreview(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(components.Frame, { ...props, style: { minWidth: 200, minHeight: 60 }, children: /* @__PURE__ */ jsxRuntime.jsx(components.Text, { size: "sm", children: "Frame content" }) });
+}
+function WrapperPreview(props) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.Wrapper, { ...props, style: { minWidth: 200 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(components.Text, { size: "sm", children: "Item 1" }),
+    /* @__PURE__ */ jsxRuntime.jsx(components.Text, { size: "sm", children: "Item 2" }),
+    /* @__PURE__ */ jsxRuntime.jsx(components.Text, { size: "sm", children: "Item 3" })
+  ] });
+}
 function ComponentRenderer({ componentId, props }) {
   const noop = react.useCallback(() => {
   }, []);
@@ -2780,9 +2792,11 @@ function ComponentRenderer({ componentId, props }) {
         components.Button,
         {
           variant: props.variant,
+          semantic: props.semantic,
           size: props.size,
           icon,
           iconPosition: props.iconPosition,
+          disabled: props.disabled,
           onPress: noop,
           children: "Button"
         }
@@ -2800,6 +2814,30 @@ function ComponentRenderer({ componentId, props }) {
       return /* @__PURE__ */ jsxRuntime.jsx(StatefulHueSlider, { ...props });
     case "card":
       return /* @__PURE__ */ jsxRuntime.jsx(CardPreview, { ...props });
+    case "text":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        components.Text,
+        {
+          size: props.size,
+          weight: props.weight,
+          color: props.color,
+          font: props.font,
+          children: "The quick brown fox"
+        }
+      );
+    case "icon":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        components.Icon,
+        {
+          name: props.name ?? "home",
+          size: props.size,
+          fill: props.fill
+        }
+      );
+    case "frame":
+      return /* @__PURE__ */ jsxRuntime.jsx(FramePreview, { ...props });
+    case "wrapper":
+      return /* @__PURE__ */ jsxRuntime.jsx(WrapperPreview, { ...props });
     default:
       return null;
   }
@@ -2923,7 +2961,7 @@ function ComponentCard({
         padding: 20,
         borderRadius: 12,
         border: `1px solid ${newtone.srgbToHex(
-          isHovered ? tokens.interactive.srgb : tokens.border.srgb
+          isHovered ? tokens.accent.fill.srgb : tokens.border.srgb
         )}`,
         backgroundColor: newtone.srgbToHex(tokens.backgroundElevated.srgb),
         cursor: "pointer",
@@ -3033,7 +3071,7 @@ function CategoryView({
                 padding: 24,
                 borderRadius: 12,
                 border: `1px solid ${newtone.srgbToHex(
-                  isHovered ? tokens.interactive.srgb : tokens.border.srgb
+                  isHovered ? tokens.accent.fill.srgb : tokens.border.srgb
                 )}`,
                 backgroundColor: newtone.srgbToHex(tokens.backgroundElevated.srgb),
                 cursor: "pointer",
@@ -3112,17 +3150,239 @@ function CategoryView({
     )
   ] });
 }
+function IconBrowserView({
+  selectedIconName,
+  onIconSelect
+}) {
+  const tokens = components.useTokens();
+  const [search, setSearch] = react.useState("");
+  const [hoveredIcon, setHoveredIcon] = react.useState(null);
+  const scrollRef = react.useRef(null);
+  const filteredCategories = react.useMemo(() => {
+    const q = search.toLowerCase().trim();
+    if (!q) return components.ICON_CATALOG;
+    return components.ICON_CATALOG.map((cat) => ({
+      ...cat,
+      icons: cat.icons.filter((name) => name.includes(q))
+    })).filter((cat) => cat.icons.length > 0);
+  }, [search]);
+  react.useEffect(() => {
+    if (!selectedIconName || !scrollRef.current) return;
+    const el = scrollRef.current.querySelector(
+      `[data-icon="${selectedIconName}"]`
+    );
+    if (el) {
+      el.scrollIntoView({ behavior: "smooth", block: "nearest" });
+    }
+  }, [selectedIconName]);
+  const accentColor = newtone.srgbToHex(tokens.accent.fill.srgb);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        minHeight: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0 32px", flexShrink: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Icon,
+            {
+              name: "search",
+              size: 18,
+              color: newtone.srgbToHex(tokens.textTertiary.srgb),
+              style: {
+                position: "absolute",
+                left: 10,
+                top: 9,
+                pointerEvents: "none"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search icons...",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              style: {
+                width: "100%",
+                padding: "8px 12px 8px 34px",
+                borderRadius: 8,
+                border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+                backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+                color: newtone.srgbToHex(tokens.textPrimary.srgb),
+                fontSize: 13,
+                boxSizing: "border-box",
+                outline: "none"
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: scrollRef,
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: "16px 32px 32px"
+            },
+            children: [
+              filteredCategories.length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  style: {
+                    fontSize: 13,
+                    color: newtone.srgbToHex(tokens.textTertiary.srgb),
+                    textAlign: "center",
+                    marginTop: 32
+                  },
+                  children: "No icons found"
+                }
+              ),
+              filteredCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 24 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h3",
+                  {
+                    style: {
+                      fontSize: 12,
+                      fontWeight: 600,
+                      color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                      textTransform: "uppercase",
+                      letterSpacing: 0.5,
+                      margin: "0 0 8px"
+                    },
+                    children: category.label
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fill, minmax(80px, 1fr))",
+                      gap: 6
+                    },
+                    children: category.icons.map((name) => {
+                      const isSelected = selectedIconName === name;
+                      const isHovered = hoveredIcon === name;
+                      const borderColor = isSelected ? accentColor : isHovered ? `${accentColor}66` : "transparent";
+                      return /* @__PURE__ */ jsxRuntime.jsxs(
+                        "button",
+                        {
+                          "data-icon": name,
+                          onClick: () => onIconSelect(name),
+                          onMouseEnter: () => setHoveredIcon(name),
+                          onMouseLeave: () => setHoveredIcon(null),
+                          style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            gap: 4,
+                            padding: "8px 4px 6px",
+                            borderRadius: 8,
+                            border: `2px solid ${borderColor}`,
+                            backgroundColor: isSelected ? newtone.srgbToHex(tokens.backgroundElevated.srgb) : "transparent",
+                            cursor: "pointer",
+                            transition: "border-color 150ms ease"
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name, size: 40 }),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                style: {
+                                  fontSize: 10,
+                                  color: isSelected ? accentColor : newtone.srgbToHex(tokens.textTertiary.srgb),
+                                  fontWeight: isSelected ? 600 : 400,
+                                  maxWidth: "100%",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  whiteSpace: "nowrap"
+                                },
+                                children: name
+                              }
+                            )
+                          ]
+                        },
+                        name
+                      );
+                    })
+                  }
+                )
+              ] }, category.id))
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function ComponentDetailView({
   componentId,
   selectedVariantId,
+  onSelectVariant,
   propOverrides,
-  onSelectVariant
+  onPropOverride
 }) {
   const tokens = components.useTokens();
   const component = components.getComponent(componentId);
   const [hoveredId, setHoveredId] = react.useState(null);
   if (!component) return null;
-  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  if (componentId === "icon" && propOverrides && onPropOverride) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          padding: "32px 0 0",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: "0 32px", marginBottom: 24 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "h2",
+              {
+                style: {
+                  fontSize: 22,
+                  fontWeight: 700,
+                  color: newtone.srgbToHex(tokens.textPrimary.srgb),
+                  margin: 0,
+                  marginBottom: 4
+                },
+                children: component.name
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "p",
+              {
+                style: {
+                  fontSize: 14,
+                  color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                  margin: 0
+                },
+                children: component.description
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            IconBrowserView,
+            {
+              selectedIconName: propOverrides.name ?? "add",
+              onIconSelect: (name) => onPropOverride("name", name)
+            }
+          )
+        ]
+      }
+    );
+  }
+  const interactiveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
@@ -3197,7 +3457,7 @@ function ComponentDetailView({
                       ComponentRenderer,
                       {
                         componentId,
-                        props: isSelected && propOverrides ? { ...variant.props, ...propOverrides } : variant.props
+                        props: variant.props
                       }
                     )
                   }
@@ -3225,9 +3485,10 @@ function ComponentDetailView({
 function PreviewWindow({
   view,
   selectedVariantId,
-  propOverrides,
   onNavigate,
-  onSelectVariant
+  onSelectVariant,
+  propOverrides,
+  onPropOverride
 }) {
   const tokens = components.useTokens();
   const handleNavigateToCategory = react.useCallback(
@@ -3267,8 +3528,9 @@ function PreviewWindow({
           {
             componentId: view.componentId,
             selectedVariantId,
+            onSelectVariant,
             propOverrides,
-            onSelectVariant
+            onPropOverride
           }
         )
       ] })
@@ -3276,50 +3538,89 @@ function PreviewWindow({
   );
 }
 function CopyButton({ text }) {
+  const tokens = components.useTokens();
   const [copied, setCopied] = react.useState(false);
   const handleCopy = react.useCallback(async () => {
     await navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [text]);
-  return /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "tertiary", semantic: "neutral", size: "sm", icon: copied ? "check" : "content_copy", onPress: handleCopy, children: copied ? "Copied!" : "Copy" });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick: handleCopy,
+      "aria-label": copied ? "Copied" : "Copy code",
+      style: {
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: 4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: newtone.srgbToHex(
+          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb
+        ),
+        transition: "color 150ms ease"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        components.Icon,
+        {
+          name: copied ? "check" : "content_copy",
+          size: 16,
+          color: newtone.srgbToHex(
+            copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb
+          )
+        }
+      )
+    }
+  );
 }
 function CodeBlock({
   code
 }) {
   const tokens = components.useTokens();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          position: "absolute",
-          top: 8,
-          right: 8
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: code })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "pre",
-      {
-        style: {
-          backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
-          border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
-          borderRadius: 8,
-          padding: 16,
-          paddingRight: 80,
-          overflow: "auto",
-          fontSize: 13,
-          lineHeight: 1.5,
-          fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
-          color: newtone.srgbToHex(tokens.textPrimary.srgb),
-          margin: 0
-        },
-        children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code })
-      }
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+        border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+        borderRadius: 8,
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "flex-end",
+              padding: "4px 8px",
+              borderBottom: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: code })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "pre",
+          {
+            style: {
+              padding: "12px 16px",
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              fontSize: 13,
+              lineHeight: 1.5,
+              fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
+              color: newtone.srgbToHex(tokens.textPrimary.srgb),
+              margin: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code })
+          }
+        )
+      ]
+    }
+  );
 }
 function RightSidebar({
   selection,
@@ -3327,7 +3628,9 @@ function RightSidebar({
   onPropOverride,
   onResetOverrides,
   onClose,
-  onScopeToComponent
+  onScopeToComponent,
+  previewConfig,
+  colorMode
 }) {
   const tokens = components.useTokens();
   const visible = selection !== null;
@@ -3380,23 +3683,7 @@ function RightSidebar({
                     display: "flex",
                     alignItems: "center"
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsxs(
-                    "svg",
-                    {
-                      width: 16,
-                      height: 16,
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: 2,
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 19 5 12 12 5" })
-                      ]
-                    }
-                  )
+                  children: /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name: "arrow_back", size: 16, color: newtone.srgbToHex(tokens.textSecondary.srgb) })
                 }
               ),
               selection.scope === "variant" && variant ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -3412,7 +3699,7 @@ function RightSidebar({
                       padding: 0,
                       fontSize: 14,
                       fontWeight: 500,
-                      color: newtone.srgbToHex(tokens.interactive.srgb),
+                      color: newtone.srgbToHex(tokens.accent.fill.srgb),
                       whiteSpace: "nowrap"
                     },
                     children: component.name
@@ -3465,6 +3752,32 @@ function RightSidebar({
               padding: 16
             },
             children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    marginBottom: 20,
+                    borderRadius: 8,
+                    border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    components.NewtoneProvider,
+                    {
+                      config: previewConfig,
+                      initialMode: colorMode,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        PreviewSurface,
+                        {
+                          componentId: selection.componentId,
+                          propOverrides
+                        }
+                      )
+                    },
+                    colorMode
+                  )
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsx(
                 "h3",
                 {
@@ -3532,6 +3845,26 @@ function RightSidebar({
     }
   );
 }
+function PreviewSurface({
+  componentId,
+  propOverrides
+}) {
+  const previewTokens = components.useTokens();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 24,
+        height: 120,
+        backgroundColor: newtone.srgbToHex(previewTokens.backgroundElevated.srgb)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(ComponentRenderer, { componentId, props: propOverrides })
+    }
+  );
+}
 function PropControl({
   prop,
   value,
@@ -3559,41 +3892,17 @@ function PropControl({
     boxSizing: "border-box"
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginBottom: 4 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
       {
         style: {
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          marginBottom: 4
+          fontSize: 12,
+          fontWeight: 500,
+          color: newtone.srgbToHex(tokens.textPrimary.srgb)
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              style: {
-                fontSize: 12,
-                fontWeight: 500,
-                color: newtone.srgbToHex(tokens.textPrimary.srgb)
-              },
-              children: prop.label
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              style: {
-                fontSize: 11,
-                color: newtone.srgbToHex(tokens.textSecondary.srgb),
-                fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace"
-              },
-              children: prop.control
-            }
-          )
-        ]
+        children: prop.label
       }
-    ),
+    ) }),
     prop.control === "select" && prop.options && /* @__PURE__ */ jsxRuntime.jsx(
       components.Select,
       {
@@ -3627,7 +3936,54 @@ function PropControl({
         style: inputStyle
       }
     ),
-    prop.control === "toggle" && /* @__PURE__ */ jsxRuntime.jsxs(
+    prop.control === "discrete-slider" && prop.options && (() => {
+      const options = prop.options;
+      const currentIndex = options.findIndex((o) => o.value === value);
+      const idx = currentIndex >= 0 ? currentIndex : 0;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: options.length - 1,
+            step: 1,
+            value: idx,
+            onChange: (e) => onChange(options[Number(e.target.value)].value),
+            "aria-label": prop.label,
+            style: {
+              width: "100%",
+              accentColor: newtone.srgbToHex(tokens.accent.fill.srgb),
+              cursor: "pointer"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "space-between",
+              marginTop: 2
+            },
+            children: options.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                style: {
+                  fontSize: 11,
+                  fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+                  color: o.value === value ? newtone.srgbToHex(tokens.textPrimary.srgb) : newtone.srgbToHex(tokens.textTertiary.srgb),
+                  fontWeight: o.value === value ? 600 : 400
+                },
+                children: o.label
+              },
+              String(o.value)
+            ))
+          }
+        )
+      ] });
+    })(),
+    prop.control === "toggle" && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         role: "switch",
@@ -3642,47 +3998,35 @@ function PropControl({
           gap: 8,
           cursor: "pointer"
         },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                width: 36,
-                height: 20,
-                borderRadius: 10,
-                backgroundColor: value ? newtone.srgbToHex(tokens.interactive.srgb) : newtone.srgbToHex(tokens.border.srgb),
-                position: "relative",
-                transition: "background-color 150ms ease",
-                flexShrink: 0
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  style: {
-                    width: 16,
-                    height: 16,
-                    borderRadius: 8,
-                    backgroundColor: "#fff",
-                    position: "absolute",
-                    top: 2,
-                    left: value ? 18 : 2,
-                    transition: "left 150ms ease"
-                  }
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 36,
+              height: 20,
+              borderRadius: 10,
+              backgroundColor: value ? newtone.srgbToHex(tokens.accent.fill.srgb) : newtone.srgbToHex(tokens.border.srgb),
+              position: "relative",
+              transition: "background-color 150ms ease",
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  width: 16,
+                  height: 16,
+                  borderRadius: 8,
+                  backgroundColor: "#fff",
+                  position: "absolute",
+                  top: 2,
+                  left: value ? 18 : 2,
+                  transition: "left 150ms ease"
                 }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              style: {
-                fontSize: 12,
-                color: newtone.srgbToHex(tokens.textSecondary.srgb)
-              },
-              children: value ? "true" : "false"
-            }
-          )
-        ]
+              }
+            )
+          }
+        )
       }
     )
   ] });
@@ -3711,6 +4055,10 @@ function Editor({
     onNavigate,
     initialPreviewView
   });
+  const previewConfig = react.useMemo(
+    () => chromeThemeConfig.tokenOverrides ? { ...editor.themeConfig, tokenOverrides: chromeThemeConfig.tokenOverrides } : editor.themeConfig,
+    [editor.themeConfig, chromeThemeConfig.tokenOverrides]
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(components.NewtoneProvider, { config: chromeThemeConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
     EditorShell,
     {
@@ -3773,33 +4121,24 @@ function Editor({
                   overflow: "hidden",
                   minWidth: 0
                 },
-                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                children: /* @__PURE__ */ jsxRuntime.jsx(
                   components.NewtoneProvider,
                   {
-                    config: editor.themeConfig,
+                    config: previewConfig,
                     initialMode: editor.colorMode,
-                    initialTheme: editor.activeTheme,
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        ThemeBar,
-                        {
-                          activeTheme: editor.activeTheme,
-                          onThemeChange: editor.handleThemeChange
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-                        PreviewWindow,
-                        {
-                          view: editor.previewView,
-                          selectedVariantId: editor.selectedVariantId,
-                          propOverrides: editor.propOverrides,
-                          onNavigate: editor.handlePreviewNavigate,
-                          onSelectVariant: editor.handleSelectVariant
-                        }
-                      ) })
-                    ]
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      PreviewWindow,
+                      {
+                        view: editor.previewView,
+                        selectedVariantId: editor.selectedVariantId,
+                        onNavigate: editor.handlePreviewNavigate,
+                        onSelectVariant: editor.handleSelectVariant,
+                        propOverrides: editor.propOverrides,
+                        onPropOverride: editor.handlePropOverride
+                      }
+                    ) })
                   },
-                  `${editor.colorMode}-${editor.activeTheme}`
+                  editor.colorMode
                 )
               }
             )
@@ -3814,7 +4153,9 @@ function Editor({
           onPropOverride: editor.handlePropOverride,
           onResetOverrides: editor.handleResetOverrides,
           onClose: editor.handleCloseSidebar,
-          onScopeToComponent: editor.handleScopeToComponent
+          onScopeToComponent: editor.handleScopeToComponent,
+          previewConfig,
+          colorMode: editor.colorMode
         }
       )
     }
@@ -3840,7 +4181,6 @@ exports.PreviewWindow = PreviewWindow;
 exports.RightSidebar = RightSidebar;
 exports.Sidebar = Sidebar;
 exports.TableOfContents = TableOfContents;
-exports.ThemeBar = ThemeBar;
 exports.findPreset = findPreset;
 exports.presetHasUnpublishedChanges = presetHasUnpublishedChanges;
 exports.updatePresetInArray = updatePresetInArray;