@newtonedev/editor 0.1.4 → 0.1.5

package/dist/Editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,UAAU,EACV,kBAAkB,GACnB,EAAE,WAAW,2CAwGb"}
+{"version":3,"file":"Editor.d.ts","sourceRoot":"","sources":["../src/Editor.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,wBAAgB,MAAM,CAAC,EACrB,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,iBAAiB,EACjB,WAAW,EACX,WAAW,EACX,UAAU,EACV,kBAAkB,GACnB,EAAE,WAAW,2CA8Gb"}

package/dist/components/sections/DynamicRangeSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DynamicRangeSection.d.ts","sourceRoot":"","sources":["../../../src/components/sections/DynamicRangeSection.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAuQnE,UAAU,wBAAwB;IAChC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACzD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,2CA0H1B"}
+{"version":3,"file":"DynamicRangeSection.d.ts","sourceRoot":"","sources":["../../../src/components/sections/DynamicRangeSection.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAydnE,UAAU,wBAAwB;IAChC,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAClC,QAAQ,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACzD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,QAAQ,GACT,EAAE,wBAAwB,2CA6H1B"}

package/dist/hooks/useEditorState.d.ts

@@ -1,6 +1,6 @@
 import type { ColorMode } from "@newtonedev/components";
 import type { ConfiguratorState } from "@newtonedev/configurator";
-import type { Preset, SaveStatus, ThemeName, PreviewView, SidebarSelection, EditorPersistence } from "../types";
+import type { Preset, SaveStatus, PreviewView, SidebarSelection, EditorPersistence } from "../types";
 interface UseEditorStateOptions {
     readonly initialState: ConfiguratorState;
     readonly initialIsPublished: boolean;
@@ -24,10 +24,8 @@ export declare function useEditorState({ initialState, initialIsPublished, initi
     readonly saveDraft: (state: ConfiguratorState) => Promise<void>;
     readonly previewView: PreviewView;
     readonly colorMode: ColorMode;
-    readonly activeTheme: ThemeName;
     readonly handlePreviewNavigate: (view: PreviewView) => void;
     readonly handleSelectVariant: (variantId: string) => void;
-    readonly handleThemeChange: (theme: ThemeName) => void;
     readonly handleColorModeChange: (mode: ColorMode) => void;
     readonly sidebarSelection: SidebarSelection;
     readonly selectedComponentId: string | null;

package/dist/hooks/useEditorState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useEditorState.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EACV,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAElB,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;CAC3C;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,kBAAkB,GACnB,EAAE,qBAAqB;;;;;;;;;gCA0LN,iBAAiB;;;;2CA/DxB,WAAW;8CAmBN,MAAM;wCA+EV,SAAS;2CAQV,SAAS;;;;;4CA3DgC,MAAM,SAAS,OAAO;;;;;;;;;;;;;;;EA6KzE"}
+{"version":3,"file":"useEditorState.d.ts","sourceRoot":"","sources":["../../src/hooks/useEditorState.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAGlE,OAAO,KAAK,EACV,MAAM,EACN,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,UAAU,CAAC;AAElB,UAAU,qBAAqB;IAC7B,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;CAC3C;AAED,wBAAgB,cAAc,CAAC,EAC7B,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,qBAAqB,EACrB,wBAAwB,EACxB,YAAY,EACZ,WAAW,EACX,UAAU,EACV,kBAAkB,GACnB,EAAE,qBAAqB;;;;;;;;;gCAuLN,iBAAiB;;;2CA/DxB,WAAW;8CAmBN,MAAM;2CA6EX,SAAS;;;;;4CAjDgC,MAAM,SAAS,OAAO;;;;;;;;;;;;;;;EAiKzE"}

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" }
   );
@@ -380,13 +377,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 +438,8 @@ function useEditorState({
     // Preview
     previewView,
     colorMode,
-    activeTheme,
     handlePreviewNavigate,
     handleSelectVariant,
-    handleThemeChange,
     handleColorModeChange,
     // Sidebar
     sidebarSelection,
@@ -491,7 +479,7 @@ function EditorShell({
     {
       style: {
         display: "flex",
-        height: "100vh",
+        height: "100%",
         overflow: "hidden",
         backgroundColor: newtone.srgbToHex(tokens.background.srgb)
       },
@@ -503,7 +491,7 @@ function EditorShell({
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              height: "100vh",
+              height: "100%",
               overflow: "hidden",
               minWidth: 0
             },
@@ -566,7 +554,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 +786,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 +945,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 +1116,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 +1280,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 +1487,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 +1930,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(() => {
@@ -2504,10 +2641,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 +2690,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 +2699,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 +2854,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 +2874,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 +2896,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 +3043,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 +3153,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",
@@ -3122,7 +3242,7 @@ function ComponentDetailView({
   const component = components.getComponent(componentId);
   const [hoveredId, setHoveredId] = react.useState(null);
   if (!component) return null;
-  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
@@ -3412,7 +3532,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
@@ -3650,7 +3770,7 @@ function PropControl({
                 width: 36,
                 height: 20,
                 borderRadius: 10,
-                backgroundColor: value ? newtone.srgbToHex(tokens.interactive.srgb) : newtone.srgbToHex(tokens.border.srgb),
+                backgroundColor: value ? newtone.srgbToHex(tokens.accent.fill.srgb) : newtone.srgbToHex(tokens.border.srgb),
                 position: "relative",
                 transition: "background-color 150ms ease",
                 flexShrink: 0
@@ -3711,6 +3831,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 +3897,23 @@ 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,
+                        propOverrides: editor.propOverrides,
+                        onNavigate: editor.handlePreviewNavigate,
+                        onSelectVariant: editor.handleSelectVariant
+                      }
+                    ) })
                   },
-                  `${editor.colorMode}-${editor.activeTheme}`
+                  editor.colorMode
                 )
               }
             )
@@ -3840,7 +3954,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;