@newtonedev/editor 0.1.3 → 0.1.5

package/dist/preview/ComponentRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAaA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AAyDD,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,sBAAsB,kDAiC/E"}
+{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AA2ED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,sBAAsB,kDA8D/E"}

package/dist/types.d.ts

@@ -8,7 +8,6 @@ export interface Preset {
     readonly published_state: ConfiguratorState | null;
 }
 export type SaveStatus = "saved" | "saving" | "unsaved" | "error";
-export type ThemeName = "neutral" | "primary" | "secondary" | "strong";
 export type PreviewView = {
     readonly kind: "overview";
 } | {

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/editor",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Shared color system editor for Newtone applications",
   "license": "MIT",
   "repository": {

package/src/Editor.tsx

@@ -1,9 +1,10 @@
+import { useMemo } from "react";
 import { NewtoneProvider } from "@newtonedev/components";
+import type { NewtoneThemeConfig } from "@newtonedev/components";
 import { useEditorState } from "./hooks/useEditorState";
 import { EditorShell } from "./components/EditorShell";
 import { Sidebar } from "./components/Sidebar";
 import { EditorHeader } from "./components/EditorHeader";
-import { ThemeBar } from "./components/ThemeBar";
 import { TableOfContents } from "./components/TableOfContents";
 import { PreviewWindow } from "./components/PreviewWindow";
 import { RightSidebar } from "./components/RightSidebar";
@@ -34,6 +35,17 @@ export function Editor({
     initialPreviewView,
   });
 
+  // Merge token overrides from chrome config into the preview config.
+  // Token overrides (from Token Tuner) are stored separately from configurator
+  // state, but should apply to the preview so components render accurately.
+  const previewConfig: NewtoneThemeConfig = useMemo(
+    () =>
+      chromeThemeConfig.tokenOverrides
+        ? { ...editor.themeConfig, tokenOverrides: chromeThemeConfig.tokenOverrides }
+        : editor.themeConfig,
+    [editor.themeConfig, chromeThemeConfig.tokenOverrides],
+  );
+
   return (
     <NewtoneProvider config={chromeThemeConfig}>
       <EditorShell
@@ -90,15 +102,10 @@ export function Editor({
               }}
             >
               <NewtoneProvider
-                config={editor.themeConfig}
+                config={previewConfig}
                 initialMode={editor.colorMode}
-                initialTheme={editor.activeTheme}
-                key={`${editor.colorMode}-${editor.activeTheme}`}
+                key={editor.colorMode}
               >
-                <ThemeBar
-                  activeTheme={editor.activeTheme}
-                  onThemeChange={editor.handleThemeChange}
-                />
                 <div style={{ flex: 1, overflowY: "auto", minWidth: 0 }}>
                   <PreviewWindow
                     view={editor.previewView}

package/src/components/CodeBlock.tsx

@@ -12,7 +12,7 @@ export function CopyButton({ text }: { readonly text: string }) {
   }, [text]);
 
   return (
-    <Button variant="ghost" size="sm" icon={copied ? "check" : "content_copy"} onPress={handleCopy}>
+    <Button variant="tertiary" semantic="neutral" size="sm" icon={copied ? "check" : "content_copy"} onPress={handleCopy}>
       {copied ? "Copied!" : "Copy"}
     </Button>
   );

package/src/components/EditorHeader.tsx

@@ -34,10 +34,10 @@ export function EditorHeader({
   const borderColor = srgbToHex(tokens.border.srgb);
 
   const statusColor: Record<SaveStatus, string> = {
-    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 (
@@ -66,7 +66,7 @@ export function EditorHeader({
           {STATUS_LABEL[saveStatus]}
         </span>
         {saveStatus === "error" && (
-          <Button variant="ghost" size="sm" icon="refresh" onPress={onRetry}>
+          <Button variant="tertiary" semantic="neutral" size="sm" icon="refresh" onPress={onRetry}>
             Retry
           </Button>
         )}

package/src/components/EditorShell.tsx

@@ -23,7 +23,7 @@ export function EditorShell({
     <div
       style={{
         display: "flex",
-        height: "100vh",
+        height: "100%",
         overflow: "hidden",
         backgroundColor: srgbToHex(tokens.background.srgb),
       }}
@@ -33,7 +33,7 @@ export function EditorShell({
           flex: 1,
           display: "flex",
           flexDirection: "column",
-          height: "100vh",
+          height: "100%",
           overflow: "hidden",
           minWidth: 0,
         }}

package/src/components/FontPicker.tsx

@@ -84,7 +84,7 @@ export 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;

package/src/components/PresetSelector.tsx

@@ -44,9 +44,9 @@ export 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`;
 

package/src/components/RightSidebar.tsx

@@ -105,7 +105,7 @@ export function RightSidebar({
                       padding: 0,
                       fontSize: 14,
                       fontWeight: 500,
-                      color: srgbToHex(tokens.interactive.srgb),
+                      color: srgbToHex(tokens.accent.fill.srgb),
                       whiteSpace: "nowrap",
                     }}
                   >
@@ -339,7 +339,7 @@ function PropControl({
               height: 20,
               borderRadius: 10,
               backgroundColor: value
-                ? srgbToHex(tokens.interactive.srgb)
+                ? srgbToHex(tokens.accent.fill.srgb)
                 : srgbToHex(tokens.border.srgb),
               position: "relative",
               transition: "background-color 150ms ease",

package/src/components/TableOfContents.tsx

@@ -24,7 +24,7 @@ export function TableOfContents({
   const [hoveredId, setHoveredId] = useState<string | null>(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`;

package/src/components/sections/ColorsSection.tsx

@@ -61,7 +61,7 @@ export function ColorsSection({
   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);
 
   // Resolve effective key color for current mode
@@ -350,7 +350,7 @@ export function ColorsSection({
                 style={{
                   fontSize: 12,
                   fontWeight: 500,
-                  color: srgbToHex(tokens.error.srgb),
+                  color: srgbToHex(tokens.error.fill.srgb),
                 }}
               >
                 {hexError}

package/src/components/sections/DynamicRangeSection.tsx

@@ -1,9 +1,20 @@
-import { useState, useRef, useCallback } from "react";
+import { useState, useRef, useCallback, useMemo, useEffect } from "react";
 import { HueSlider, Select, useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
+import {
+  srgbToHex,
+  resolveLightness,
+  findMaxChromaInGamut,
+  oklchToSrgb,
+  clampSrgb,
+  HUE_GRADING_STRENGTH_LOW,
+  HUE_GRADING_STRENGTH_MEDIUM,
+  HUE_GRADING_STRENGTH_HARD,
+  HUE_GRADING_EASING_POWER,
+} from "newtone";
 import type { HueGradingStrength } from "newtone";
 import type { ConfiguratorState } from "@newtonedev/configurator";
 import type { ConfiguratorAction } from "@newtonedev/configurator";
+import { traditionalHueToOklch } from "@newtonedev/configurator";
 
 const STRENGTH_OPTIONS = [
   { label: "None", value: "none" },
@@ -76,7 +87,7 @@ function DualRangeSlider({
     "whites" | "blacks" | null
   >(null);
 
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
   const borderColor = srgbToHex(tokens.border.srgb);
 
   const wDisplay = internalToDisplay(whitesValue);
@@ -264,6 +275,215 @@ function RangeInput({ display, onCommit, toInternal }: RangeInputProps) {
   );
 }
 
+// --- Dynamic Range Graph ---
+
+const GRAPH_HEIGHT = 80;
+const GRAPH_COLS = 256;
+const GRAPH_ROWS = 64;
+
+function strengthToFactor(strength: HueGradingStrength): number {
+  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: number,
+  darkHue: number,
+  wLight: number,
+  wDark: number,
+): number {
+  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;
+}
+
+interface GraphData {
+  readonly buffer: Uint8ClampedArray;
+  readonly curvePoints: readonly { readonly x: number; readonly y: number }[];
+}
+
+function computeGraphData(state: ConfiguratorState): GraphData {
+  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);
+
+    // Easing weights for hue blend at top row (assumes hard strength)
+    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: number;
+    let topChroma: number;
+
+    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 }));
+
+      // Canvas Y=0 is top; row=0 is bottom of our graph
+      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;
+    }
+  }
+
+  // 26-step curve points
+  const curvePoints: { x: number; y: number }[] = [];
+  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 };
+}
+
+interface DynamicRangeGraphProps {
+  readonly state: ConfiguratorState;
+}
+
+function DynamicRangeGraph({ state }: DynamicRangeGraphProps) {
+  const tokens = useTokens();
+  const canvasRef = useRef<HTMLCanvasElement>(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;
+
+    // Draw gradient from pre-computed buffer
+    const imageData = ctx.createImageData(GRAPH_COLS, GRAPH_ROWS);
+    imageData.data.set(graphData.buffer);
+    ctx.putImageData(imageData, 0, 0);
+
+    // Draw 26-step curve overlay
+    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),
+    }));
+
+    // Smooth Catmull-Rom spline
+    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();
+
+    // Draw dots at each of the 26 steps
+    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 (
+    <canvas
+      ref={canvasRef}
+      style={{
+        width: "100%",
+        height: GRAPH_HEIGHT,
+        borderRadius: 6,
+        border: `1px solid ${borderColor}`,
+        display: "block",
+        overflow: "hidden",
+      }}
+    />
+  );
+}
+
 // --- Section ---
 
 interface DynamicRangeSectionProps {
@@ -291,6 +511,9 @@ export function DynamicRangeSection({
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      {/* Dynamic range graph */}
+      <DynamicRangeGraph state={state} />
+
       {/* Labels above slider */}
       <div
         style={{

package/src/hooks/useEditorState.ts

@@ -7,7 +7,6 @@ import { usePresets } from "./usePresets";
 import type {
   Preset,
   SaveStatus,
-  ThemeName,
   PreviewView,
   SidebarSelection,
   EditorPersistence,
@@ -50,9 +49,6 @@ export function useEditorState({
   const [colorMode, setColorMode] = useState<ColorMode>(
     initialState.preview.mode,
   );
-  const [activeTheme, setActiveTheme] = useState<ThemeName>(
-    (initialState.preview.theme as ThemeName) || "neutral",
-  );
   const [previewView, setPreviewView] = useState<PreviewView>(
     initialPreviewView ?? { kind: "overview" },
   );
@@ -253,16 +249,6 @@ export function useEditorState({
     scheduleSave();
   }, [configuratorState, scheduleSave]);
 
-  // --- ThemeBar dispatch handlers ---
-
-  const handleThemeChange = useCallback(
-    (theme: ThemeName) => {
-      setActiveTheme(theme);
-      dispatch({ type: "SET_PREVIEW_THEME", theme });
-    },
-    [dispatch],
-  );
-
   const handleColorModeChange = useCallback(
     (mode: ColorMode) => {
       setColorMode(mode);
@@ -345,10 +331,8 @@ export function useEditorState({
     // Preview
     previewView,
     colorMode,
-    activeTheme,
     handlePreviewNavigate,
     handleSelectVariant,
-    handleThemeChange,
     handleColorModeChange,
 
     // Sidebar

package/src/index.ts

@@ -2,7 +2,6 @@
 export type {
   Preset,
   SaveStatus,
-  ThemeName,
   PreviewView,
   SidebarSelection,
   EditorPersistence,
@@ -35,7 +34,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";
 
 // Sections
 export {

package/src/preview/CategoryView.tsx

@@ -66,7 +66,7 @@ export 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",

package/src/preview/ComponentDetailView.tsx

@@ -23,7 +23,7 @@ export function ComponentDetailView({
 
   if (!component) return null;
 
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
 
   return (
     <div style={{ padding: 32 }}>

package/src/preview/ComponentRenderer.tsx

@@ -7,6 +7,10 @@ import {
   Toggle,
   Slider,
   HueSlider,
+  Frame,
+  Text,
+  Icon,
+  Wrapper,
   useTokens,
 } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
@@ -71,6 +75,24 @@ function CardPreview(props: AnyProps) {
   );
 }
 
+function FramePreview(props: AnyProps) {
+  return (
+    <Frame {...props} style={{ minWidth: 200, minHeight: 60 }}>
+      <Text size="sm">Frame content</Text>
+    </Frame>
+  );
+}
+
+function WrapperPreview(props: AnyProps) {
+  return (
+    <Wrapper {...props} style={{ minWidth: 200 }}>
+      <Text size="sm">Item 1</Text>
+      <Text size="sm">Item 2</Text>
+      <Text size="sm">Item 3</Text>
+    </Wrapper>
+  );
+}
+
 export function ComponentRenderer({ componentId, props }: ComponentRendererProps) {
   const noop = useCallback(() => {}, []);
 
@@ -80,9 +102,11 @@ export function ComponentRenderer({ componentId, props }: ComponentRendererProps
       return (
         <Button
           variant={props.variant as AnyProps}
+          semantic={props.semantic as AnyProps}
           size={props.size as AnyProps}
           icon={icon}
           iconPosition={props.iconPosition as AnyProps}
+          disabled={props.disabled as AnyProps}
           onPress={noop}
         >
           Button
@@ -101,6 +125,33 @@ export function ComponentRenderer({ componentId, props }: ComponentRendererProps
       return <StatefulHueSlider {...props} />;
     case "card":
       return <CardPreview {...props} />;
+    case "text":
+      return (
+        <Text
+          size={props.size as AnyProps}
+          weight={props.weight as AnyProps}
+          color={props.color as AnyProps}
+          font={props.font as AnyProps}
+        >
+          The quick brown fox
+        </Text>
+      );
+    case "icon":
+      return (
+        <Icon
+          name={(props.name as string) ?? "home"}
+          size={props.size as AnyProps}
+          fill={props.fill as AnyProps}
+        />
+      );
+    case "frame":
+      return (
+        <FramePreview {...props} />
+      );
+    case "wrapper":
+      return (
+        <WrapperPreview {...props} />
+      );
     default:
       return null;
   }

package/src/preview/OverviewView.tsx

@@ -128,7 +128,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",

package/src/types.ts

@@ -15,8 +15,6 @@ export interface Preset {
 
 export type SaveStatus = "saved" | "saving" | "unsaved" | "error";
 
-export type ThemeName = "neutral" | "primary" | "secondary" | "strong";
-
 export type PreviewView =
   | { readonly kind: "overview" }
   | { readonly kind: "category"; readonly categoryId: string }

package/dist/components/ThemeBar.d.ts

@@ -1,8 +0,0 @@
-import type { ThemeName } from "../types";
-interface ThemeBarProps {
-    readonly activeTheme: ThemeName;
-    readonly onThemeChange: (theme: ThemeName) => void;
-}
-export declare function ThemeBar({ activeTheme, onThemeChange }: ThemeBarProps): import("react/jsx-runtime").JSX.Element;
-export {};
-//# sourceMappingURL=ThemeBar.d.ts.map

package/dist/components/ThemeBar.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThemeBar.d.ts","sourceRoot":"","sources":["../../src/components/ThemeBar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,UAAU,aAAa;IACrB,QAAQ,CAAC,WAAW,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAC;CACpD;AASD,wBAAgB,QAAQ,CAAC,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,aAAa,2CA0DrE"}