@newtonedev/editor 0.1.3 → 0.1.5

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { Preset, SaveStatus, ThemeName, PreviewView, SidebarSelection, EditorPersistence, EditorHeaderSlots, EditorProps, } from "./types";
+export type { Preset, SaveStatus, PreviewView, SidebarSelection, EditorPersistence, EditorHeaderSlots, EditorProps, } from "./types";
 export { findPreset, updatePresetInArray, presetHasUnpublishedChanges, } from "./utils/presets";
 export { useHover } from "./hooks/useHover";
 export { usePresets } from "./hooks/usePresets";
@@ -13,7 +13,6 @@ export { PreviewWindow } from "./components/PreviewWindow";
 export { RightSidebar } from "./components/RightSidebar";
 export { Sidebar } from "./components/Sidebar";
 export { TableOfContents } from "./components/TableOfContents";
-export { ThemeBar } from "./components/ThemeBar";
 export { ColorsSection, FontsSection, IconsSection, OthersSection, } from "./components/sections";
 export { ComponentRenderer } from "./preview/ComponentRenderer";
 export { OverviewView } from "./preview/OverviewView";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,MAAM,EACN,UAAU,EACV,SAAS,EACT,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,2BAA2B,GAC5B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAGjD,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,GACd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,YAAY,EACV,MAAM,EACN,UAAU,EACV,WAAW,EACX,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,UAAU,EACV,mBAAmB,EACnB,2BAA2B,GAC5B,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAGxD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAG/D,OAAO,EACL,aAAa,EACb,YAAY,EACZ,YAAY,EACZ,aAAa,GACd,MAAM,uBAAuB,CAAC;AAG/B,OAAO,EAAE,iBAAiB,EAAE,MAAM,6BAA6B,CAAC;AAChE,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/index.js

@@ -1,7 +1,7 @@
 import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { getComponent, useTokens, ColorScaleSlider, TextInput, HueSlider, Slider, Select, Toggle, GOOGLE_FONTS, SYSTEM_FONTS, Button, CATEGORIES, getComponentsByCategory, getCategory, generateComponentCode, NewtoneProvider, Card } from '@newtonedev/components';
+import { getComponent, useTokens, ColorScaleSlider, TextInput, HueSlider, Slider, Select, Toggle, GOOGLE_FONTS, SYSTEM_FONTS, Button, CATEGORIES, getComponentsByCategory, Icon, Text, getCategory, generateComponentCode, NewtoneProvider, Wrapper, Frame, Card } from '@newtonedev/components';
 import { useConfigurator, usePreviewColors, SEMANTIC_HUE_RANGES, useWcagValidation, traditionalHueToOklch, hexToPaletteParams } from '@newtonedev/configurator';
-import { srgbToHex } from 'newtone';
+import { srgbToHex, resolveLightness, findMaxChromaInGamut, clampSrgb, oklchToSrgb, HUE_GRADING_STRENGTH_HARD, HUE_GRADING_STRENGTH_MEDIUM, HUE_GRADING_STRENGTH_LOW, HUE_GRADING_EASING_POWER } from 'newtone';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/utils/presets.ts
@@ -214,9 +214,6 @@ function useEditorState({
   const [colorMode, setColorMode] = useState(
     initialState.preview.mode
   );
-  const [activeTheme, setActiveTheme] = useState(
-    initialState.preview.theme || "neutral"
-  );
   const [previewView, setPreviewView] = useState(
     initialPreviewView ?? { kind: "overview" }
   );
@@ -378,13 +375,6 @@ function useEditorState({
     setIsPublished(false);
     scheduleSave();
   }, [configuratorState, scheduleSave]);
-  const handleThemeChange = useCallback(
-    (theme) => {
-      setActiveTheme(theme);
-      dispatch({ type: "SET_PREVIEW_THEME", theme });
-    },
-    [dispatch]
-  );
   const handleColorModeChange = useCallback(
     (mode) => {
       setColorMode(mode);
@@ -446,10 +436,8 @@ function useEditorState({
     // Preview
     previewView,
     colorMode,
-    activeTheme,
     handlePreviewNavigate,
     handleSelectVariant,
-    handleThemeChange,
     handleColorModeChange,
     // Sidebar
     sidebarSelection,
@@ -489,7 +477,7 @@ function EditorShell({
     {
       style: {
         display: "flex",
-        height: "100vh",
+        height: "100%",
         overflow: "hidden",
         backgroundColor: srgbToHex(tokens.background.srgb)
       },
@@ -501,7 +489,7 @@ function EditorShell({
               flex: 1,
               display: "flex",
               flexDirection: "column",
-              height: "100vh",
+              height: "100%",
               overflow: "hidden",
               minWidth: 0
             },
@@ -564,7 +552,7 @@ function ColorsSection({
   const palette = state.palettes[activePaletteIndex];
   const hueRange = SEMANTIC_HUE_RANGES[activePaletteIndex];
   const isNeutral = activePaletteIndex === 0;
-  const activeColor = srgbToHex(tokens.interactive.srgb);
+  const activeColor = srgbToHex(tokens.accent.fill.srgb);
   const borderColor = 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";
@@ -796,7 +784,7 @@ function ColorsSection({
               style: {
                 fontSize: 12,
                 fontWeight: 500,
-                color: srgbToHex(tokens.error.srgb)
+                color: srgbToHex(tokens.error.fill.srgb)
               },
               children: hexError
             }
@@ -955,7 +943,7 @@ function DualRangeSlider({
   const tokens = useTokens();
   const trackRef = useRef(null);
   const [activeThumb, setActiveThumb] = useState(null);
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
   const borderColor = srgbToHex(tokens.border.srgb);
   const wDisplay = internalToDisplay(whitesValue);
   const bDisplay = internalToDisplay(blacksValue);
@@ -1126,6 +1114,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 HUE_GRADING_STRENGTH_LOW;
+    case "medium":
+      return HUE_GRADING_STRENGTH_MEDIUM;
+    case "hard":
+      return 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 = traditionalHueToOklch(globalHueGrading.light.hue);
+  const darkOklchHue = 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 = resolveLightness(dynamicRange, nv);
+    const wLight = lightActive ? Math.pow(nv, HUE_GRADING_EASING_POWER) : 0;
+    const wDark = darkActive ? Math.pow(1 - nv, 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 = 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 = clampSrgb(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, HUE_GRADING_EASING_POWER) * (lightFactor / HUE_GRADING_STRENGTH_HARD);
+    const darkContrib = Math.pow(1 - nv, HUE_GRADING_EASING_POWER) * (darkFactor / HUE_GRADING_STRENGTH_HARD);
+    const y = clamp(lightContrib + darkContrib, 0, 1);
+    curvePoints.push({ x, y });
+  }
+  return { buffer, curvePoints };
+}
+function DynamicRangeGraph({ state }) {
+  const tokens = useTokens();
+  const canvasRef = useRef(null);
+  const graphData = 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
+    ]
+  );
+  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 = 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 = srgbToHex(tokens.border.srgb);
+  return /* @__PURE__ */ jsx(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        width: "100%",
+        height: GRAPH_HEIGHT,
+        borderRadius: 6,
+        border: `1px solid ${borderColor}`,
+        display: "block",
+        overflow: "hidden"
+      }
+    }
+  );
+}
 function DynamicRangeSection({
   state,
   dispatch
@@ -1142,6 +1278,7 @@ function DynamicRangeSection({
   const wDisplay = internalToDisplay(state.dynamicRange.lightest);
   const bDisplay = internalToDisplay(state.dynamicRange.darkest);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsx(DynamicRangeGraph, { state }),
     /* @__PURE__ */ jsxs(
       "div",
       {
@@ -1348,7 +1485,7 @@ function FontPicker({
   const bgColor = srgbToHex(tokens.backgroundElevated.srgb);
   const borderColor = srgbToHex(tokens.border.srgb);
   const hoverColor = srgbToHex(tokens.backgroundSunken.srgb);
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
   useEffect(() => {
     if (!isOpen) return;
     function handleMouseDown(e) {
@@ -1791,9 +1928,9 @@ function PresetSelector({
   const bgColor = srgbToHex(tokens.background.srgb);
   const textPrimary = srgbToHex(tokens.textPrimary.srgb);
   const textSecondary = srgbToHex(tokens.textSecondary.srgb);
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
-  const warningColor = srgbToHex(tokens.warning.srgb);
-  const errorColor = srgbToHex(tokens.error.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
+  const warningColor = srgbToHex(tokens.warning.fill.srgb);
+  const errorColor = srgbToHex(tokens.error.fill.srgb);
   const hoverBg = `${borderColor}18`;
   const activeBg = `${interactiveColor}14`;
   useEffect(() => {
@@ -2502,10 +2639,10 @@ function EditorHeader({
   const tokens = useTokens();
   const borderColor = srgbToHex(tokens.border.srgb);
   const statusColor = {
-    saved: srgbToHex(tokens.success.srgb),
-    saving: srgbToHex(tokens.warning.srgb),
+    saved: srgbToHex(tokens.success.fill.srgb),
+    saving: srgbToHex(tokens.warning.fill.srgb),
     unsaved: srgbToHex(tokens.textSecondary.srgb),
-    error: srgbToHex(tokens.error.srgb)
+    error: srgbToHex(tokens.error.fill.srgb)
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -2533,7 +2670,7 @@ function EditorHeader({
               children: STATUS_LABEL[saveStatus]
             }
           ),
-          saveStatus === "error" && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: "refresh", onPress: onRetry, children: "Retry" }),
+          saveStatus === "error" && /* @__PURE__ */ jsx(Button, { variant: "tertiary", semantic: "neutral", size: "sm", icon: "refresh", onPress: onRetry, children: "Retry" }),
           /* @__PURE__ */ jsx(
             Button,
             {
@@ -2551,59 +2688,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 = useTokens();
-  const [hoveredChipId, setHoveredChipId] = useState(null);
-  const borderColor = srgbToHex(tokens.border.srgb);
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        padding: "8px 24px",
-        borderBottom: `1px solid ${borderColor}`,
-        backgroundColor: srgbToHex(tokens.background.srgb),
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ 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__ */ 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 ${srgbToHex(
-                isActive ? tokens.interactive.srgb : tokens.border.srgb
-              )}`,
-              backgroundColor: isActive ? interactiveColor : isHovered ? `${interactiveColor}10` : "transparent",
-              color: isActive ? "#fff" : 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,
@@ -2613,7 +2697,7 @@ function TableOfContents({
   const tokens = useTokens();
   const [hoveredId, setHoveredId] = useState(null);
   const borderColor = srgbToHex(tokens.border.srgb);
-  const activeColor = srgbToHex(tokens.interactive.srgb);
+  const activeColor = srgbToHex(tokens.accent.fill.srgb);
   const textPrimary = srgbToHex(tokens.textPrimary.srgb);
   const textSecondary = srgbToHex(tokens.textSecondary.srgb);
   const hoverBg = `${borderColor}20`;
@@ -2768,6 +2852,16 @@ function CardPreview(props) {
     )
   ] });
 }
+function FramePreview(props) {
+  return /* @__PURE__ */ jsx(Frame, { ...props, style: { minWidth: 200, minHeight: 60 }, children: /* @__PURE__ */ jsx(Text, { size: "sm", children: "Frame content" }) });
+}
+function WrapperPreview(props) {
+  return /* @__PURE__ */ jsxs(Wrapper, { ...props, style: { minWidth: 200 }, children: [
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: "Item 1" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: "Item 2" }),
+    /* @__PURE__ */ jsx(Text, { size: "sm", children: "Item 3" })
+  ] });
+}
 function ComponentRenderer({ componentId, props }) {
   const noop = useCallback(() => {
   }, []);
@@ -2778,9 +2872,11 @@ function ComponentRenderer({ componentId, props }) {
         Button,
         {
           variant: props.variant,
+          semantic: props.semantic,
           size: props.size,
           icon,
           iconPosition: props.iconPosition,
+          disabled: props.disabled,
           onPress: noop,
           children: "Button"
         }
@@ -2798,6 +2894,30 @@ function ComponentRenderer({ componentId, props }) {
       return /* @__PURE__ */ jsx(StatefulHueSlider, { ...props });
     case "card":
       return /* @__PURE__ */ jsx(CardPreview, { ...props });
+    case "text":
+      return /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: props.size,
+          weight: props.weight,
+          color: props.color,
+          font: props.font,
+          children: "The quick brown fox"
+        }
+      );
+    case "icon":
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          name: props.name ?? "home",
+          size: props.size,
+          fill: props.fill
+        }
+      );
+    case "frame":
+      return /* @__PURE__ */ jsx(FramePreview, { ...props });
+    case "wrapper":
+      return /* @__PURE__ */ jsx(WrapperPreview, { ...props });
     default:
       return null;
   }
@@ -2921,7 +3041,7 @@ function ComponentCard({
         padding: 20,
         borderRadius: 12,
         border: `1px solid ${srgbToHex(
-          isHovered ? tokens.interactive.srgb : tokens.border.srgb
+          isHovered ? tokens.accent.fill.srgb : tokens.border.srgb
         )}`,
         backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
         cursor: "pointer",
@@ -3031,7 +3151,7 @@ function CategoryView({
                 padding: 24,
                 borderRadius: 12,
                 border: `1px solid ${srgbToHex(
-                  isHovered ? tokens.interactive.srgb : tokens.border.srgb
+                  isHovered ? tokens.accent.fill.srgb : tokens.border.srgb
                 )}`,
                 backgroundColor: srgbToHex(tokens.backgroundElevated.srgb),
                 cursor: "pointer",
@@ -3120,7 +3240,7 @@ function ComponentDetailView({
   const component = getComponent(componentId);
   const [hoveredId, setHoveredId] = useState(null);
   if (!component) return null;
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
   return /* @__PURE__ */ jsxs("div", { style: { padding: 32 }, children: [
     /* @__PURE__ */ jsx(
       "h2",
@@ -3280,7 +3400,7 @@ function CopyButton({ text }) {
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   }, [text]);
-  return /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", icon: copied ? "check" : "content_copy", onPress: handleCopy, children: copied ? "Copied!" : "Copy" });
+  return /* @__PURE__ */ jsx(Button, { variant: "tertiary", semantic: "neutral", size: "sm", icon: copied ? "check" : "content_copy", onPress: handleCopy, children: copied ? "Copied!" : "Copy" });
 }
 function CodeBlock({
   code
@@ -3410,7 +3530,7 @@ function RightSidebar({
                       padding: 0,
                       fontSize: 14,
                       fontWeight: 500,
-                      color: srgbToHex(tokens.interactive.srgb),
+                      color: srgbToHex(tokens.accent.fill.srgb),
                       whiteSpace: "nowrap"
                     },
                     children: component.name
@@ -3648,7 +3768,7 @@ function PropControl({
                 width: 36,
                 height: 20,
                 borderRadius: 10,
-                backgroundColor: value ? srgbToHex(tokens.interactive.srgb) : srgbToHex(tokens.border.srgb),
+                backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
                 position: "relative",
                 transition: "background-color 150ms ease",
                 flexShrink: 0
@@ -3709,6 +3829,10 @@ function Editor({
     onNavigate,
     initialPreviewView
   });
+  const previewConfig = useMemo(
+    () => chromeThemeConfig.tokenOverrides ? { ...editor.themeConfig, tokenOverrides: chromeThemeConfig.tokenOverrides } : editor.themeConfig,
+    [editor.themeConfig, chromeThemeConfig.tokenOverrides]
+  );
   return /* @__PURE__ */ jsx(NewtoneProvider, { config: chromeThemeConfig, children: /* @__PURE__ */ jsx(
     EditorShell,
     {
@@ -3771,33 +3895,23 @@ function Editor({
                   overflow: "hidden",
                   minWidth: 0
                 },
-                children: /* @__PURE__ */ jsxs(
+                children: /* @__PURE__ */ jsx(
                   NewtoneProvider,
                   {
-                    config: editor.themeConfig,
+                    config: previewConfig,
                     initialMode: editor.colorMode,
-                    initialTheme: editor.activeTheme,
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        ThemeBar,
-                        {
-                          activeTheme: editor.activeTheme,
-                          onThemeChange: editor.handleThemeChange
-                        }
-                      ),
-                      /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minWidth: 0 }, children: /* @__PURE__ */ jsx(
-                        PreviewWindow,
-                        {
-                          view: editor.previewView,
-                          selectedVariantId: editor.selectedVariantId,
-                          propOverrides: editor.propOverrides,
-                          onNavigate: editor.handlePreviewNavigate,
-                          onSelectVariant: editor.handleSelectVariant
-                        }
-                      ) })
-                    ]
+                    children: /* @__PURE__ */ jsx("div", { style: { flex: 1, overflowY: "auto", minWidth: 0 }, children: /* @__PURE__ */ jsx(
+                      PreviewWindow,
+                      {
+                        view: editor.previewView,
+                        selectedVariantId: editor.selectedVariantId,
+                        propOverrides: editor.propOverrides,
+                        onNavigate: editor.handlePreviewNavigate,
+                        onSelectVariant: editor.handleSelectVariant
+                      }
+                    ) })
                   },
-                  `${editor.colorMode}-${editor.activeTheme}`
+                  editor.colorMode
                 )
               }
             )
@@ -3819,6 +3933,6 @@ function Editor({
   ) });
 }
 
-export { CategoryView, CodeBlock, ColorsSection, ComponentDetailView, ComponentRenderer, CopyButton, Editor, EditorHeader, EditorShell, FontPicker, FontsSection, IconsSection, OthersSection, OverviewView, PresetSelector, PreviewWindow, RightSidebar, Sidebar, TableOfContents, ThemeBar, findPreset, presetHasUnpublishedChanges, updatePresetInArray, useEditorState, useHover, usePresets };
+export { CategoryView, CodeBlock, ColorsSection, ComponentDetailView, ComponentRenderer, CopyButton, Editor, EditorHeader, EditorShell, FontPicker, FontsSection, IconsSection, OthersSection, OverviewView, PresetSelector, PreviewWindow, RightSidebar, Sidebar, TableOfContents, findPreset, presetHasUnpublishedChanges, updatePresetInArray, useEditorState, useHover, usePresets };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map