@newtonedev/editor 0.1.4 → 0.1.6

package/src/components/Sidebar.tsx

@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useTokens } from "@newtonedev/components";
+import { useTokens, Icon } from "@newtonedev/components";
 import type { ColorMode } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import type { ColorResult } from "newtone";
@@ -18,87 +18,13 @@ import type { Preset } from "../types";
 const SIDEBAR_WIDTH = 360;
 
 const 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" },
 ] as const;
 
-function SectionIcon({ id }: { readonly id: string }) {
-  const props = {
-    width: 16,
-    height: 16,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round" as const,
-    strokeLinejoin: "round" as const,
-  };
-
-  switch (id) {
-    case "dynamic-range":
-      // Sun/contrast icon
-      return (
-        <svg {...props}>
-          <circle cx="12" cy="12" r="5" />
-          <line x1="12" y1="1" x2="12" y2="3" />
-          <line x1="12" y1="21" x2="12" y2="23" />
-          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
-          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
-          <line x1="1" y1="12" x2="3" y2="12" />
-          <line x1="21" y1="12" x2="23" y2="12" />
-          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
-          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
-        </svg>
-      );
-    case "colors":
-      // Palette/droplet icon
-      return (
-        <svg {...props}>
-          <path d="M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" />
-        </svg>
-      );
-    case "fonts":
-      // Type/text icon
-      return (
-        <svg {...props}>
-          <polyline points="4 7 4 4 20 4 20 7" />
-          <line x1="9" y1="20" x2="15" y2="20" />
-          <line x1="12" y1="4" x2="12" y2="20" />
-        </svg>
-      );
-    case "icons":
-      // Grid icon
-      return (
-        <svg {...props}>
-          <rect x="3" y="3" width="7" height="7" />
-          <rect x="14" y="3" width="7" height="7" />
-          <rect x="3" y="14" width="7" height="7" />
-          <rect x="14" y="14" width="7" height="7" />
-        </svg>
-      );
-    case "others":
-      // Sliders icon
-      return (
-        <svg {...props}>
-          <line x1="4" y1="21" x2="4" y2="14" />
-          <line x1="4" y1="10" x2="4" y2="3" />
-          <line x1="12" y1="21" x2="12" y2="12" />
-          <line x1="12" y1="8" x2="12" y2="3" />
-          <line x1="20" y1="21" x2="20" y2="16" />
-          <line x1="20" y1="12" x2="20" y2="3" />
-          <line x1="1" y1="14" x2="7" y2="14" />
-          <line x1="9" y1="8" x2="15" y2="8" />
-          <line x1="17" y1="16" x2="23" y2="16" />
-        </svg>
-      );
-    default:
-      return null;
-  }
-}
-
 interface SidebarProps {
   readonly state: ConfiguratorState;
   readonly dispatch: (action: ConfiguratorAction) => void;
@@ -262,23 +188,17 @@ export function Sidebar({
                 }}
               >
                 <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <SectionIcon id={section.id} />
+                  <Icon name={section.icon} size={16} />
                   {section.label}
                 </span>
-                <svg
-                  width={12}
-                  height={12}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
+                <Icon
+                  name="expand_more"
+                  size={16}
                   style={{
                     transform: isOpen ? "rotate(180deg)" : "none",
                     transition: "transform 150ms ease",
-                  }}
-                >
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                  } as any}
+                />
               </button>
               {isOpen && (
                 <div

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" },
   );
@@ -205,9 +201,20 @@ export function useEditorState({
     }
   }, [sidebarSelection, initOverridesFromVariant]);
 
-  const handlePropOverride = useCallback((propName: string, value: unknown) => {
-    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
-  }, []);
+  const handlePropOverride = useCallback(
+    (propName: string, value: unknown) => {
+      setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+      // Re-open sidebar if closed while viewing a component (e.g. icon browser click)
+      setSidebarSelection((prev) => {
+        if (prev !== null) return prev;
+        if (previewView.kind === "component") {
+          return { scope: "component", componentId: previewView.componentId };
+        }
+        return prev;
+      });
+    },
+    [previewView],
+  );
 
   const handleResetOverrides = useCallback(() => {
     if (sidebarSelection?.scope === "variant") {
@@ -253,16 +260,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 +342,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

@@ -3,19 +3,22 @@ import { useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import { getComponent } from "@newtonedev/components";
 import { ComponentRenderer } from "./ComponentRenderer";
+import { IconBrowserView } from "./IconBrowserView";
 
 interface ComponentDetailViewProps {
   readonly componentId: string;
   readonly selectedVariantId: string | null;
-  readonly propOverrides?: Record<string, unknown>;
   readonly onSelectVariant: (variantId: string) => void;
+  readonly propOverrides?: Record<string, unknown>;
+  readonly onPropOverride?: (name: string, value: unknown) => void;
 }
 
 export function ComponentDetailView({
   componentId,
   selectedVariantId,
-  propOverrides,
   onSelectVariant,
+  propOverrides,
+  onPropOverride,
 }: ComponentDetailViewProps) {
   const tokens = useTokens();
   const component = getComponent(componentId);
@@ -23,7 +26,47 @@ export function ComponentDetailView({
 
   if (!component) return null;
 
-  const interactiveColor = srgbToHex(tokens.interactive.srgb);
+  if (componentId === "icon" && propOverrides && onPropOverride) {
+    return (
+      <div
+        style={{
+          padding: "32px 0 0",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <div style={{ padding: "0 32px", marginBottom: 24 }}>
+          <h2
+            style={{
+              fontSize: 22,
+              fontWeight: 700,
+              color: srgbToHex(tokens.textPrimary.srgb),
+              margin: 0,
+              marginBottom: 4,
+            }}
+          >
+            {component.name}
+          </h2>
+          <p
+            style={{
+              fontSize: 14,
+              color: srgbToHex(tokens.textSecondary.srgb),
+              margin: 0,
+            }}
+          >
+            {component.description}
+          </p>
+        </div>
+        <IconBrowserView
+          selectedIconName={(propOverrides.name as string) ?? "add"}
+          onIconSelect={(name) => onPropOverride("name", name)}
+        />
+      </div>
+    );
+  }
+
+  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
 
   return (
     <div style={{ padding: 32 }}>
@@ -99,11 +142,7 @@ export function ComponentDetailView({
               >
                 <ComponentRenderer
                   componentId={componentId}
-                  props={
-                    isSelected && propOverrides
-                      ? { ...variant.props, ...propOverrides }
-                      : variant.props
-                  }
+                  props={variant.props}
                 />
               </div>
               <span

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;
   }