@newtonedev/editor 0.1.6 → 0.1.8

package/src/components/Sidebar.tsx

@@ -1,34 +1,11 @@
-import { useState } from "react";
-import { useTokens, Icon } from "@newtonedev/components";
-import type { ColorMode } from "@newtonedev/components";
+import { useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { ColorResult } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
-import type { ConfiguratorAction } from "@newtonedev/configurator";
-import {
-  ColorsSection,
-  DynamicRangeSection,
-  IconsSection,
-  FontsSection,
-  OthersSection,
-} from "./sections";
 import { PresetSelector } from "./PresetSelector";
 import type { Preset } from "../types";
 
 const SIDEBAR_WIDTH = 360;
 
-const ACCORDION_SECTIONS = [
-  { 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;
-
 interface SidebarProps {
-  readonly state: ConfiguratorState;
-  readonly dispatch: (action: ConfiguratorAction) => void;
-  readonly previewColors: readonly (readonly ColorResult[])[];
   readonly isDirty: boolean;
   readonly onRevert: () => void;
   readonly presets: readonly Preset[];
@@ -42,14 +19,9 @@ interface SidebarProps {
     presetId: string,
     name: string,
   ) => Promise<string>;
-  readonly colorMode: ColorMode;
-  readonly onColorModeChange: (mode: ColorMode) => void;
 }
 
 export function Sidebar({
-  state,
-  dispatch,
-  previewColors,
   isDirty,
   onRevert,
   presets,
@@ -60,52 +32,11 @@ export function Sidebar({
   onRenamePreset,
   onDeletePreset,
   onDuplicatePreset,
-  colorMode,
-  onColorModeChange,
 }: SidebarProps) {
   const tokens = useTokens();
-  const [openSections, setOpenSections] = useState<Set<string>>(
-    new Set(["dynamic-range", "colors"]),
-  );
-  const [hoveredSectionId, setHoveredSectionId] = useState<string | null>(null);
 
   const borderColor = srgbToHex(tokens.border.srgb);
   const bgColor = srgbToHex(tokens.background.srgb);
-  const hoverBg = `${borderColor}10`;
-
-  const toggleSection = (id: string) => {
-    setOpenSections((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const renderSectionContent = (sectionId: string) => {
-    switch (sectionId) {
-      case "dynamic-range":
-        return <DynamicRangeSection state={state} dispatch={dispatch} />;
-      case "colors":
-        return (
-          <ColorsSection
-            state={state}
-            dispatch={dispatch}
-            previewColors={previewColors}
-            colorMode={colorMode}
-            onColorModeChange={onColorModeChange}
-          />
-        );
-      case "icons":
-        return <IconsSection state={state} dispatch={dispatch} />;
-      case "fonts":
-        return <FontsSection state={state} dispatch={dispatch} />;
-      case "others":
-        return <OthersSection state={state} dispatch={dispatch} />;
-      default:
-        return null;
-    }
-  };
 
   return (
     <div
@@ -119,7 +50,7 @@ export function Sidebar({
         backgroundColor: bgColor,
       }}
     >
-      {/* Sticky Header */}
+      {/* Header */}
       <div
         style={{
           flexShrink: 0,
@@ -151,74 +82,16 @@ export function Sidebar({
         />
       </div>
 
-      {/* Scrollable Accordion Area */}
+      {/* Content area (empty for now) */}
       <div
         style={{
           flex: 1,
           overflowY: "auto",
           overflowX: "hidden",
         }}
-      >
-        {ACCORDION_SECTIONS.map((section) => {
-          const isOpen = openSections.has(section.id);
-          const isHovered = hoveredSectionId === section.id;
-
-          return (
-            <div key={section.id}>
-              <button
-                onClick={() => toggleSection(section.id)}
-                onMouseEnter={() => setHoveredSectionId(section.id)}
-                onMouseLeave={() => setHoveredSectionId(null)}
-                aria-expanded={isOpen}
-                aria-controls={`section-${section.id}`}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  padding: "12px 20px",
-                  border: "none",
-                  borderBottom: `1px solid ${borderColor}`,
-                  background: isHovered ? hoverBg : "none",
-                  cursor: "pointer",
-                  fontSize: 14,
-                  fontWeight: 500,
-                  color: srgbToHex(tokens.textPrimary.srgb),
-                  transition: "background-color 100ms ease",
-                }}
-              >
-                <span style={{ display: "flex", alignItems: "center", gap: 8 }}>
-                  <Icon name={section.icon} size={16} />
-                  {section.label}
-                </span>
-                <Icon
-                  name="expand_more"
-                  size={16}
-                  style={{
-                    transform: isOpen ? "rotate(180deg)" : "none",
-                    transition: "transform 150ms ease",
-                  } as any}
-                />
-              </button>
-              {isOpen && (
-                <div
-                  id={`section-${section.id}`}
-                  role="region"
-                  aria-label={section.label}
-                  style={{
-                    padding: "16px 20px",
-                    borderBottom: `1px solid ${borderColor}`,
-                  }}
-                >
-                  {renderSectionContent(section.id)}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
+      />
 
-      {/* Sticky Footer */}
+      {/* Footer */}
       <div
         style={{
           flexShrink: 0,

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={{