@newtonedev/editor 0.1.5 → 0.1.7

package/src/components/TableOfContents.tsx

@@ -1,13 +1,13 @@
 import { useState } from "react";
 import {
   useTokens,
-  CATEGORIES,
   getComponentsByCategory,
 } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import type { PreviewView } from "../types";
 
 interface TableOfContentsProps {
+  readonly activeSectionId: string;
   readonly activeView: PreviewView;
   readonly selectedComponentId: string | null;
   readonly onNavigate: (view: PreviewView) => void;
@@ -16,6 +16,7 @@ interface TableOfContentsProps {
 const TOC_WIDTH = 220;
 
 export function TableOfContents({
+  activeSectionId,
   activeView,
   selectedComponentId,
   onNavigate,
@@ -26,10 +27,13 @@ export function TableOfContents({
   const borderColor = srgbToHex(tokens.border.srgb);
   const activeColor = srgbToHex(tokens.accent.fill.srgb);
   const textPrimary = srgbToHex(tokens.textPrimary.srgb);
-  const textSecondary = srgbToHex(tokens.textSecondary.srgb);
   const hoverBg = `${borderColor}20`;
 
-  const isOverviewActive = activeView.kind === "overview";
+  const components = getComponentsByCategory(activeSectionId);
+
+  const isOverviewActive =
+    activeView.kind === "overview" ||
+    (activeView.kind === "category" && activeView.categoryId === activeSectionId);
 
   return (
     <nav
@@ -44,7 +48,7 @@ export function TableOfContents({
       }}
     >
       <button
-        onClick={() => onNavigate({ kind: "overview" })}
+        onClick={() => onNavigate({ kind: "category", categoryId: activeSectionId })}
         onMouseEnter={() => setHoveredId("overview")}
         onMouseLeave={() => setHoveredId(null)}
         aria-current={isOverviewActive ? "page" : undefined}
@@ -69,82 +73,41 @@ export function TableOfContents({
         Overview
       </button>
 
-      {CATEGORIES.map((category) => {
-        const components = getComponentsByCategory(category.id);
-        const isCategoryActive =
-          activeView.kind === "category" &&
-          activeView.categoryId === category.id;
+      {components.map((comp) => {
+        const isComponentActive =
+          (activeView.kind === "component" &&
+            activeView.componentId === comp.id) ||
+          selectedComponentId === comp.id;
 
         return (
-          <div key={category.id} style={{ marginTop: 16 }}>
-            <button
-              onClick={() =>
-                onNavigate({ kind: "category", categoryId: category.id })
-              }
-              onMouseEnter={() => setHoveredId(`cat-${category.id}`)}
-              onMouseLeave={() => setHoveredId(null)}
-              aria-current={isCategoryActive ? "page" : undefined}
-              style={{
-                display: "block",
-                width: "100%",
-                padding: "6px 20px",
-                border: "none",
-                background: isCategoryActive
-                  ? `${activeColor}14`
-                  : hoveredId === `cat-${category.id}`
-                    ? hoverBg
-                    : "none",
-                cursor: "pointer",
-                textAlign: "left",
-                fontSize: 11,
-                fontWeight: 600,
-                color: isCategoryActive ? activeColor : textSecondary,
-                textTransform: "uppercase",
-                letterSpacing: 0.5,
-                transition: "background-color 100ms ease",
-              }}
-            >
-              {category.name}
-            </button>
-
-            {components.map((comp) => {
-              const isComponentActive =
-                (activeView.kind === "component" &&
-                  activeView.componentId === comp.id) ||
-                selectedComponentId === comp.id;
-
-              return (
-                <button
-                  key={comp.id}
-                  onClick={() =>
-                    onNavigate({ kind: "component", componentId: comp.id })
-                  }
-                  onMouseEnter={() => setHoveredId(comp.id)}
-                  onMouseLeave={() => setHoveredId(null)}
-                  aria-current={isComponentActive ? "page" : undefined}
-                  style={{
-                    display: "block",
-                    width: "100%",
-                    padding: "4px 20px 4px 32px",
-                    border: "none",
-                    background: isComponentActive
-                      ? `${activeColor}14`
-                      : hoveredId === comp.id
-                        ? hoverBg
-                        : "none",
-                    cursor: "pointer",
-                    textAlign: "left",
-                    fontSize: 13,
-                    fontWeight: isComponentActive ? 600 : 400,
-                    color: isComponentActive ? activeColor : textPrimary,
-                    transition: "background-color 100ms ease",
-                  }}
-                >
-                  {comp.name}
-                </button>
-              );
-            })}
-          </div>
+          <button
+            key={comp.id}
+            onClick={() =>
+              onNavigate({ kind: "component", componentId: comp.id })
+            }
+            onMouseEnter={() => setHoveredId(comp.id)}
+            onMouseLeave={() => setHoveredId(null)}
+            aria-current={isComponentActive ? "page" : undefined}
+            style={{
+              display: "block",
+              width: "100%",
+              padding: "4px 20px",
+              border: "none",
+              background: isComponentActive
+                ? `${activeColor}14`
+                : hoveredId === comp.id
+                  ? hoverBg
+                  : "none",
+              cursor: "pointer",
+              textAlign: "left",
+              fontSize: 13,
+              fontWeight: isComponentActive ? 600 : 400,
+              color: isComponentActive ? activeColor : textPrimary,
+              transition: "background-color 100ms ease",
+            }}
+          >
+            {comp.name}
+          </button>
         );
       })}
     </nav>

package/src/components/sections/DynamicRangeSection.tsx

@@ -1,20 +1,9 @@
-import { useState, useRef, useCallback, useMemo, useEffect } from "react";
+import { useState, useRef, useCallback } from "react";
 import { HueSlider, Select, useTokens } from "@newtonedev/components";
-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 { srgbToHex } 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" },
@@ -275,215 +264,6 @@ 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 {
@@ -511,9 +291,6 @@ 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/components/sections/FontsSection.tsx

@@ -1,18 +1,13 @@
-import { Slider, useTokens } from "@newtonedev/components";
+import { Slider } from "@newtonedev/components";
+import { useTokens } from "@newtonedev/components";
 import type { FontConfig } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorState, FontScope, FontSlotConfig } from "@newtonedev/configurator";
 import type { ConfiguratorAction } from "@newtonedev/configurator";
+import type { GoogleFontEntry } from "@newtonedev/fonts";
 import { FontPicker } from "../FontPicker";
 
-const DEFAULT_FONT_DEFAULT: FontConfig = {
-  type: "system",
-  family: "system-ui",
-  fallback:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-};
-
-const DEFAULT_FONT_DISPLAY: FontConfig = {
+const DEFAULT_FONT_SYSTEM: FontConfig = {
   type: "system",
   family: "system-ui",
   fallback:
@@ -25,107 +20,80 @@ const DEFAULT_FONT_MONO: FontConfig = {
   fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace",
 };
 
+function getDefaultFontConfig(scope: FontScope): FontConfig {
+  return scope === "mono" ? DEFAULT_FONT_MONO : DEFAULT_FONT_SYSTEM;
+}
+
+function getCurrentFontConfig(
+  state: ConfiguratorState,
+  scope: FontScope,
+): FontConfig {
+  return state.typography?.fonts[scope]?.config ?? getDefaultFontConfig(scope);
+}
+
 interface FontsSectionProps {
   readonly state: ConfiguratorState;
   readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly fontCatalog?: readonly GoogleFontEntry[];
 }
 
-export function FontsSection({ state, dispatch }: FontsSectionProps) {
-  const tokens = useTokens();
+const FONT_SCOPES: readonly { scope: FontScope; label: string; slot: "default" | "display" | "mono" | "currency" }[] = [
+  { scope: "main", label: "Main", slot: "default" },
+  { scope: "display", label: "Display", slot: "display" },
+  { scope: "mono", label: "Mono", slot: "mono" },
+  { scope: "currency", label: "Currency", slot: "currency" },
+];
 
-  const baseSize = state.typography?.scale.baseSize ?? 16;
-  const ratio = state.typography?.scale.ratio ?? 1.25;
+export function FontsSection({ state, dispatch, fontCatalog }: FontsSectionProps) {
+  const tokens = useTokens();
 
   const labelColor = srgbToHex(tokens.textSecondary.srgb);
 
-  const handleFontChange = (
-    slot: "default" | "display" | "mono",
-    font: FontConfig,
-  ) => {
-    const actionType = {
-      default: "SET_FONT_DEFAULT",
-      display: "SET_FONT_DISPLAY",
-      mono: "SET_FONT_MONO",
-    }[slot] as "SET_FONT_DEFAULT" | "SET_FONT_DISPLAY" | "SET_FONT_MONO";
-    dispatch({ type: actionType, font });
+  const handleFontChange = (scope: FontScope, font: FontConfig) => {
+    // Preserve existing weight slots when switching font family
+    const weights = state.typography?.fonts[scope]?.weights ?? { regular: 400, medium: 500, bold: 700 };
+    const slotConfig: FontSlotConfig = { config: font, weights };
+    dispatch({ type: "SET_FONT", scope, font: slotConfig });
+  };
+
+  const sectionLabelStyle = {
+    fontSize: 11,
+    fontWeight: 600 as const,
+    color: labelColor,
+    textTransform: "uppercase" as const,
+    letterSpacing: 0.5,
+    marginBottom: 8,
   };
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
       <div>
-        <div
-          style={{
-            fontSize: 11,
-            fontWeight: 600,
-            color: labelColor,
-            textTransform: "uppercase",
-            letterSpacing: 0.5,
-            marginBottom: 8,
-          }}
-        >
-          Scale
-        </div>
+        <div style={sectionLabelStyle}>Fonts</div>
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-          <Slider
-            value={baseSize}
-            onValueChange={(v) =>
-              dispatch({ type: "SET_TYPOGRAPHY_BASE_SIZE", baseSize: v })
-            }
-            min={12}
-            max={24}
-            step={1}
-            label="Base Size"
-            showValue
-          />
-          <Slider
-            value={Math.round(ratio * 100)}
-            onValueChange={(v) =>
-              dispatch({ type: "SET_TYPOGRAPHY_RATIO", ratio: v / 100 })
-            }
-            min={110}
-            max={150}
-            step={5}
-            label="Scale Ratio"
-            showValue
-          />
+          {FONT_SCOPES.map(({ scope, label, slot }) => (
+            <FontPicker
+              key={scope}
+              label={label}
+              slot={slot}
+              currentFont={getCurrentFontConfig(state, scope)}
+              onSelect={(font) => handleFontChange(scope, font)}
+              fontCatalog={fontCatalog}
+            />
+          ))}
         </div>
       </div>
-
       <div>
-        <div
-          style={{
-            fontSize: 11,
-            fontWeight: 600,
-            color: labelColor,
-            textTransform: "uppercase",
-            letterSpacing: 0.5,
-            marginBottom: 8,
-          }}
-        >
-          Fonts
-        </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <FontPicker
-            label="Default"
-            slot="default"
-            currentFont={state.typography?.fonts.default ?? DEFAULT_FONT_DEFAULT}
-            onSelect={(font) => handleFontChange("default", font)}
-          />
-          <FontPicker
-            label="Display"
-            slot="display"
-            currentFont={
-              state.typography?.fonts.display ?? DEFAULT_FONT_DISPLAY
-            }
-            onSelect={(font) => handleFontChange("display", font)}
-          />
-          <FontPicker
-            label="Mono"
-            slot="mono"
-            currentFont={state.typography?.fonts.mono ?? DEFAULT_FONT_MONO}
-            onSelect={(font) => handleFontChange("mono", font)}
-          />
-        </div>
+        <div style={sectionLabelStyle}>Type Scale</div>
+        <Slider
+          value={Math.round((state.typography?.typeScaleOffset ?? 0.5) * 100)}
+          onValueChange={(v) =>
+            dispatch({ type: "SET_TYPE_SCALE_OFFSET", offset: v / 100 })
+          }
+          min={0}
+          max={100}
+          label="Scale"
+          showValue
+        />
       </div>
     </div>
   );