@newtonedev/editor 0.1.12 → 0.2.1

package/src/components/sections/ColorsSection.tsx

@@ -2,7 +2,6 @@ import { useState, useMemo, useCallback, useEffect } from "react";
 import {
   HueSlider,
   Slider,
-  Select,
   Toggle,
   ColorScaleSlider,
   TextInput,
@@ -10,40 +9,42 @@ import {
 } from "@newtonedev/components";
 import type { ColorMode } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { ColorResult, DynamicRange } from "newtone";
-import type { HueGradingStrength } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
-import type { ConfiguratorAction } from "@newtonedev/configurator";
-import {
-  SEMANTIC_HUE_RANGES,
-  useWcagValidation,
-  hexToPaletteParams,
-  traditionalHueToOklch,
-} from "@newtonedev/configurator";
-
-const STRENGTH_OPTIONS = [
-  { label: "None", value: "none" },
-  { label: "Low", value: "low" },
-  { label: "Medium", value: "medium" },
-  { label: "Hard", value: "hard" },
-];
-
+import type { ColorResult } from "newtone";
+import { oklchToP3 } from "@newtonedev/colors";
+import type { ConfiguratorState } from "../../configurator/types";
+import type { ConfiguratorAction } from "../../configurator/state/actions";
+import { SEMANTIC_HUE_RANGES } from "../../configurator/constants";
+import { useWcagValidation } from "../../configurator/hooks/useWcagValidation";
+import { hexToPaletteParams } from "../../configurator/hex-conversion";
 interface ColorsSectionProps {
   readonly state: ConfiguratorState;
   readonly dispatch: (action: ConfiguratorAction) => void;
   readonly previewColors: readonly (readonly ColorResult[])[];
   readonly colorMode: ColorMode;
   readonly onColorModeChange: (mode: ColorMode) => void;
+  readonly activePaletteIndex: number;
+  readonly onActivePaletteChange: (index: number) => void;
+  readonly useP3: boolean;
+}
+
+/** Format a ColorResult as a CSS color string in the appropriate gamut. */
+function colorToCss(color: ColorResult, useP3: boolean): string {
+  if (!useP3) return srgbToHex(color.srgb);
+  const p3 = oklchToP3(color.oklch);
+  const r = Math.max(0, Math.min(1, p3.r));
+  const g = Math.max(0, Math.min(1, p3.g));
+  const b = Math.max(0, Math.min(1, p3.b));
+  return `color(display-p3 ${r.toFixed(5)} ${g.toFixed(5)} ${b.toFixed(5)})`;
 }
 
-/** Get the hex color at a normalizedValue from the preview colors array */
-function getHexAtNv(
-  previewColors: readonly ColorResult[],
-  nv: number,
-): string {
-  const idx = Math.round((1 - nv) * (previewColors.length - 1));
-  const clamped = Math.max(0, Math.min(previewColors.length - 1, idx));
-  return srgbToHex(previewColors[clamped].srgb);
+/** Convert step index [0=lightest, 25=darkest] to NV [0=darkest, 1=lightest] for ColorScaleSlider */
+function stepToNv(step: number): number {
+  return 1 - Math.max(0, Math.min(25, step)) / 25;
+}
+
+/** Convert NV [0=darkest, 1=lightest] to step index [0=lightest, 25=darkest] */
+function nvToStep(nv: number): number {
+  return Math.round((1 - nv) * 25);
 }
 
 export function ColorsSection({
@@ -52,31 +53,33 @@ export function ColorsSection({
   previewColors,
   colorMode,
   onColorModeChange,
+  activePaletteIndex,
+  onActivePaletteChange,
+  useP3,
 }: ColorsSectionProps) {
   const tokens = useTokens();
-  const [activePaletteIndex, setActivePaletteIndex] = useState(0);
   const [modeToggleHovered, setModeToggleHovered] = useState(false);
 
   const palette = state.palettes[activePaletteIndex];
   const hueRange = SEMANTIC_HUE_RANGES[activePaletteIndex];
-  const isNeutral = activePaletteIndex === 0;
+  const isPrimary = activePaletteIndex === 0;
 
-  const activeColor = srgbToHex(tokens.accent.fill.srgb);
-  const borderColor = srgbToHex(tokens.border.srgb);
+  const activeColor = tokens.colors.secondary.emphasis.fontPrimary;
+  const borderColor = tokens.colors.primary.main.fontDisabled;
 
-  // Resolve effective key color for current mode
-  const effectiveKeyColor =
-    colorMode === "dark" ? palette.keyColorDark : palette.keyColor;
+  // Resolve effective key color step for current mode
+  const effectiveKeyStep =
+    colorMode === "dark" ? palette.keyColorStepDark : palette.keyColorStep;
 
   // Mode-aware action types
   const setKeyColorAction =
     colorMode === "dark"
-      ? ("SET_PALETTE_KEY_COLOR_DARK" as const)
-      : ("SET_PALETTE_KEY_COLOR" as const);
+      ? ("SET_PALETTE_KEY_COLOR_STEP_DARK" as const)
+      : ("SET_PALETTE_KEY_COLOR_STEP" as const);
   const clearKeyColorAction =
     colorMode === "dark"
-      ? ("CLEAR_PALETTE_KEY_COLOR_DARK" as const)
-      : ("CLEAR_PALETTE_KEY_COLOR" as const);
+      ? ("CLEAR_PALETTE_KEY_COLOR_STEP_DARK" as const)
+      : ("CLEAR_PALETTE_KEY_COLOR_STEP" as const);
   const hexAction =
     colorMode === "dark"
       ? ("SET_PALETTE_FROM_HEX_DARK" as const)
@@ -99,13 +102,15 @@ export function ColorsSection({
     setIsHexUserSet(false);
   }, [colorMode]);
 
-  // Compute displayed hex from current key color position
+  // Compute displayed hex from current key color step (always sRGB for text input)
   const currentPreview = previewColors[activePaletteIndex];
   const displayedHex = useMemo(() => {
     if (!currentPreview || currentPreview.length === 0) return "";
-    const nv = effectiveKeyColor ?? wcag.autoNormalizedValue;
-    return getHexAtNv(currentPreview, nv);
-  }, [currentPreview, effectiveKeyColor, wcag.autoNormalizedValue]);
+    const step = effectiveKeyStep ?? wcag.autoStep;
+    // step 0=lightest (array start), step 25=darkest (array end)
+    const idx = Math.max(0, Math.min(currentPreview.length - 1, step));
+    return colorToCss(currentPreview[idx], false);
+  }, [currentPreview, effectiveKeyStep, wcag.autoStep]);
 
   // Sync hex text when not actively editing and not user-submitted
   useEffect(() => {
@@ -114,30 +119,6 @@ export function ColorsSection({
     }
   }, [displayedHex, isEditingHex, isHexUserSet]);
 
-  // Build dynamic range for hex conversion
-  const dynamicRange = useMemo((): DynamicRange => {
-    const light =
-      state.globalHueGrading.light.strength !== "none"
-        ? {
-            hue: traditionalHueToOklch(state.globalHueGrading.light.hue),
-            strength: state.globalHueGrading.light.strength,
-          }
-        : undefined;
-    const dark =
-      state.globalHueGrading.dark.strength !== "none"
-        ? {
-            hue: traditionalHueToOklch(state.globalHueGrading.dark.hue),
-            strength: state.globalHueGrading.dark.strength,
-          }
-        : undefined;
-    const hueGrading = light || dark ? { light, dark } : undefined;
-    return {
-      lightest: state.dynamicRange.lightest,
-      darkest: state.dynamicRange.darkest,
-      ...(hueGrading ? { hueGrading } : {}),
-    };
-  }, [state.dynamicRange, state.globalHueGrading]);
-
   const handleHexSubmit = useCallback(() => {
     setIsEditingHex(false);
     const trimmed = hexText.trim();
@@ -147,7 +128,7 @@ export function ColorsSection({
     }
 
     const hex = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
-    const params = hexToPaletteParams(hex, dynamicRange);
+    const params = hexToPaletteParams(hex, state.dynamicRange);
 
     if (!params) {
       setHexError("Invalid hex color");
@@ -160,10 +141,10 @@ export function ColorsSection({
       type: hexAction,
       index: activePaletteIndex,
       hue: params.hue,
-      saturation: params.saturation,
-      keyColor: params.normalizedValue,
+      chromaRatio: params.chromaRatio,
+      keyColorStep: params.stepIndex,
     });
-  }, [hexText, dynamicRange, dispatch, activePaletteIndex, hexAction]);
+  }, [hexText, state.dynamicRange, dispatch, activePaletteIndex, hexAction]);
 
   const handleClearKeyColor = useCallback(() => {
     dispatch({ type: clearKeyColorAction, index: activePaletteIndex });
@@ -173,7 +154,7 @@ export function ColorsSection({
 
   // Build WCAG warning message
   const wcagWarning = useMemo(() => {
-    if (effectiveKeyColor === undefined || wcag.keyColorContrast === null)
+    if (effectiveKeyStep === undefined || wcag.keyColorContrast === null)
       return undefined;
     if (wcag.passesAA) return undefined;
     const ratio = wcag.keyColorContrast.toFixed(1);
@@ -181,7 +162,9 @@ export function ColorsSection({
       return `Contrast ${ratio}:1 — passes large text (AA) but fails normal text (requires 4.5:1)`;
     }
     return `Contrast ${ratio}:1 — fails WCAG AA (requires 4.5:1 for normal text, 3:1 for large text)`;
-  }, [effectiveKeyColor, wcag]);
+  }, [effectiveKeyStep, wcag]);
+
+  const localIntensity = palette.localHueGrade?.intensity ?? 0;
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
@@ -190,27 +173,28 @@ export function ColorsSection({
         {state.palettes.map((_p, index) => {
           const isActive = index === activePaletteIndex;
           const colors = previewColors[index];
-          const isNeutralCircle = index === 0;
-
-          // Per-mode key color for this palette's circle
-          const paletteKeyColor =
-            colorMode === "dark" ? _p.keyColorDark : _p.keyColor;
+          const isPrimaryCircle = index === 0;
+
+          // Per-mode key color step for this palette's circle
+          const paletteKeyStep =
+            colorMode === "dark" ? _p.keyColorStepDark : _p.keyColorStep;
+          const circleStep = paletteKeyStep ?? wcag.autoStep;
+          const circleIdx = !isPrimaryCircle && colors
+            ? Math.max(0, Math.min(colors.length - 1, circleStep))
+            : -1;
           const circleColor =
-            !isNeutralCircle && colors
-              ? getHexAtNv(
-                  colors,
-                  paletteKeyColor ?? wcag.autoNormalizedValue,
-                )
+            !isPrimaryCircle && colors && circleIdx >= 0
+              ? colorToCss(colors[circleIdx], useP3)
               : undefined;
 
           const ringStyle = isActive
-            ? `0 0 0 2px ${srgbToHex(tokens.background.srgb)}, 0 0 0 4px ${activeColor}`
+            ? `0 0 0 2px ${tokens.colors.primary.main.background}, 0 0 0 4px ${activeColor}`
             : "none";
 
           return (
             <button
               key={index}
-              onClick={() => setActivePaletteIndex(index)}
+              onClick={() => onActivePaletteChange(index)}
               aria-label={_p.name}
               aria-pressed={isActive}
               style={{
@@ -224,10 +208,10 @@ export function ColorsSection({
                 transition: "box-shadow 150ms ease",
                 padding: 0,
                 overflow: "hidden",
-                ...(isNeutralCircle
+                ...(isPrimaryCircle
                   ? {
                       background: colors
-                        ? `linear-gradient(to right, ${srgbToHex(colors[0].srgb)} 50%, ${srgbToHex(colors[colors.length - 1].srgb)} 50%)`
+                        ? `linear-gradient(to right, ${colorToCss(colors[0], useP3)} 50%, ${colorToCss(colors[colors.length - 1], useP3)} 50%)`
                         : `linear-gradient(to right, #ffffff 50%, #000000 50%)`,
                     }
                   : { backgroundColor: circleColor ?? borderColor }),
@@ -261,18 +245,19 @@ export function ColorsSection({
             background: modeToggleHovered ? `${borderColor}20` : "none",
             cursor: "pointer",
             fontSize: 12,
-            color: srgbToHex(tokens.textPrimary.srgb),
+            color: tokens.colors.primary.main.fontPrimary,
             transition: "background-color 150ms ease",
           }}
         >
           {colorMode === "light" ? "\u2600" : "\u263E"}
           <span>{colorMode === "light" ? "Light" : "Dark"}</span>
         </button>
+
       </div>
 
       {/* ─── Key Color (mode-specific) ─── */}
       {currentPreview &&
-        (isNeutral ? (
+        (isPrimary ? (
           <div style={{ display: "flex", gap: 1 }}>
             {currentPreview.map((color, i) => (
               <div
@@ -281,7 +266,7 @@ export function ColorsSection({
                   flex: 1,
                   height: 64,
                   borderRadius: 2,
-                  backgroundColor: srgbToHex(color.srgb),
+                  backgroundColor: colorToCss(color, useP3),
                 }}
               />
             ))}
@@ -292,13 +277,13 @@ export function ColorsSection({
           >
             <ColorScaleSlider
               colors={currentPreview}
-              value={effectiveKeyColor ?? wcag.autoNormalizedValue}
+              value={stepToNv(effectiveKeyStep ?? wcag.autoStep)}
               onValueChange={(nv) => {
                 setIsHexUserSet(false);
                 dispatch({
                   type: setKeyColorAction,
                   index: activePaletteIndex,
-                  normalizedValue: nv,
+                  step: nvToStep(nv),
                 });
               }}
               trimEnds
@@ -328,7 +313,7 @@ export function ColorsSection({
                   placeholder="#000000"
                 />
               </div>
-              {effectiveKeyColor !== undefined && (
+              {effectiveKeyStep !== undefined && (
                 <button
                   onClick={handleClearKeyColor}
                   style={{
@@ -350,7 +335,7 @@ export function ColorsSection({
                 style={{
                   fontSize: 12,
                   fontWeight: 500,
-                  color: srgbToHex(tokens.error.fill.srgb),
+                  color: tokens.colors.error.emphasis.fontPrimary,
                 }}
               >
                 {hexError}
@@ -385,84 +370,87 @@ export function ColorsSection({
         />
 
         <Slider
-          value={palette.saturation}
-          onValueChange={(saturation) =>
+          value={Math.round(palette.chromaRatio * 100)}
+          onValueChange={(v) =>
             dispatch({
-              type: "SET_PALETTE_SATURATION",
+              type: "SET_PALETTE_CHROMA_RATIO",
               index: activePaletteIndex,
-              saturation,
+              chromaRatio: v / 100,
             })
           }
           min={0}
           max={100}
-          label="Saturation"
+          label="Chroma"
           editableValue
         />
 
-        {/* Desaturation */}
         <Slider
-          value={Math.round((palette.desaturation ?? 0) * 100)}
+          value={Math.round(palette.chromaPeak * 100)}
           onValueChange={(v) =>
             dispatch({
-              type: "SET_PALETTE_DESATURATION",
+              type: "SET_PALETTE_CHROMA_PEAK",
               index: activePaletteIndex,
-              desaturation: v / 100,
+              chromaPeak: v / 100,
             })
           }
-          min={-100}
+          min={0}
           max={100}
-          label="Desaturation"
+          label="Balance"
           editableValue
+          disabled={palette.chromaRatio <= 0 || palette.chromaRatio >= 1}
         />
 
-        {/* Hue Grading */}
+        {/* Per-palette hue grading */}
         <div style={{ display: "flex", gap: 12, alignItems: "flex-end" }}>
           <div style={{ flex: 1 }}>
-            <Select
-              options={STRENGTH_OPTIONS}
-              value={palette.hueGradeStrength}
-              onValueChange={(strength) =>
+            <Slider
+              value={Math.round(localIntensity * 100)}
+              onValueChange={(v) =>
                 dispatch({
-                  type: "SET_PALETTE_HUE_GRADE_STRENGTH",
+                  type: "SET_PALETTE_LOCAL_HUE_GRADE_INTENSITY",
                   index: activePaletteIndex,
-                  strength: strength as HueGradingStrength,
+                  intensity: v / 100,
                 })
               }
-              label="Hue Grading"
+              min={0}
+              max={50}
+              label="Shift"
+              editableValue
             />
           </div>
-          {palette.hueGradeStrength !== "none" && (
+          {localIntensity > 0 && (
             <div style={{ paddingBottom: 2 }}>
               <Toggle
-                value={palette.hueGradeDirection === "dark"}
+                value={palette.localHueGrade?.side === "dark"}
                 onValueChange={(v) =>
                   dispatch({
-                    type: "SET_PALETTE_HUE_GRADE_DIRECTION",
+                    type: "SET_PALETTE_LOCAL_HUE_GRADE_SIDE",
                     index: activePaletteIndex,
-                    direction: v ? "dark" : "light",
+                    side: v ? "dark" : "light",
                   })
                 }
-                label="Invert"
+                label="Dark"
               />
             </div>
           )}
         </div>
 
-        {palette.hueGradeStrength !== "none" && (
+        {localIntensity > 0 && (
           <HueSlider
-            value={palette.hueGradeHue}
+            value={palette.localHueGrade?.hue ?? palette.hue}
             onValueChange={(hue) =>
               dispatch({
-                type: "SET_PALETTE_HUE_GRADE_HUE",
+                type: "SET_PALETTE_LOCAL_HUE_GRADE_HUE",
                 index: activePaletteIndex,
                 hue,
               })
             }
-            label="Grade Target"
+            label="Shift Hue"
             editableValue
           />
         )}
       </div>
+
     </div>
   );
 }

package/src/components/sections/DynamicRangeSection.tsx

@@ -1,16 +1,7 @@
 import { useState, useRef, useCallback } from "react";
-import { HueSlider, Select, useTokens } from "@newtonedev/components";
-import { srgbToHex } from "newtone";
-import type { HueGradingStrength } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
-import type { ConfiguratorAction } from "@newtonedev/configurator";
-
-const STRENGTH_OPTIONS = [
-  { label: "None", value: "none" },
-  { label: "Low", value: "low" },
-  { label: "Medium", value: "medium" },
-  { label: "Hard", value: "hard" },
-];
+import { HueSlider, Slider, useTokens } from "@newtonedev/components";
+import type { ConfiguratorState } from "../../configurator/types";
+import type { ConfiguratorAction } from "../../configurator/state/actions";
 
 // --- Dual Range Slider ---
 
@@ -76,8 +67,8 @@ function DualRangeSlider({
     "whites" | "blacks" | null
   >(null);
 
-  const interactiveColor = srgbToHex(tokens.accent.fill.srgb);
-  const borderColor = srgbToHex(tokens.border.srgb);
+  const interactiveColor = tokens.colors.secondary.emphasis.fontPrimary;
+  const borderColor = tokens.colors.primary.main.fontDisabled;
 
   const wDisplay = internalToDisplay(whitesValue);
   const bDisplay = internalToDisplay(blacksValue);
@@ -250,10 +241,10 @@ function RangeInput({ display, onCommit, toInternal }: RangeInputProps) {
       style={{
         width: 40,
         padding: "2px 6px",
-        border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        border: `1px solid ${tokens.colors.primary.main.fontDisabled}`,
         borderRadius: 4,
         backgroundColor: "transparent",
-        color: srgbToHex(tokens.textPrimary.srgb),
+        color: tokens.colors.primary.main.fontPrimary,
         fontFamily: "inherit",
         fontSize: 12,
         fontWeight: 500,
@@ -276,7 +267,7 @@ export function DynamicRangeSection({
   dispatch,
 }: DynamicRangeSectionProps) {
   const tokens = useTokens();
-  const labelColor = srgbToHex(tokens.textSecondary.srgb);
+  const labelColor = tokens.colors.primary.main.fontTertiary;
 
   const labelStyle = {
     fontSize: 11,
@@ -289,6 +280,9 @@ export function DynamicRangeSection({
   const wDisplay = internalToDisplay(state.dynamicRange.lightest);
   const bDisplay = internalToDisplay(state.dynamicRange.darkest);
 
+  const lightIntensity = state.globalHueGrading.lightIntensity;
+  const darkIntensity = state.globalHueGrading.darkIntensity;
+
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
       {/* Labels above slider */}
@@ -331,69 +325,61 @@ export function DynamicRangeSection({
         />
       </div>
 
-      {/* Global Hue Grading — Light End */}
+      {/* Global Grading — Light End */}
       <div style={{ ...labelStyle, marginTop: 4 }}>
-        Global Hue Grading — Light
-      </div>
-      <div style={{ display: "flex", gap: 12 }}>
-        <div style={{ flex: 1 }}>
-          <Select
-            options={STRENGTH_OPTIONS}
-            value={state.globalHueGrading.light.strength}
-            onValueChange={(s) =>
-              dispatch({
-                type: "SET_GLOBAL_GRADE_LIGHT_STRENGTH",
-                strength: s as HueGradingStrength,
-              })
-            }
-            label="Strength"
-          />
-        </div>
-        {state.globalHueGrading.light.strength !== "none" && (
-          <div style={{ flex: 1 }}>
-            <HueSlider
-              value={state.globalHueGrading.light.hue}
-              onValueChange={(hue) =>
-                dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_HUE", hue })
-              }
-              label="Target Hue"
-              showValue
-            />
-          </div>
-        )}
+        Grading — Light
       </div>
+      <Slider
+        value={Math.round(lightIntensity * 100)}
+        onValueChange={(v) =>
+          dispatch({
+            type: "SET_GLOBAL_GRADE_LIGHT_INTENSITY",
+            intensity: v / 100,
+          })
+        }
+        min={0}
+        max={25}
+        label="Intensity"
+        editableValue
+      />
+      {lightIntensity > 0 && (
+        <HueSlider
+          value={state.globalHueGrading.lightHue}
+          onValueChange={(hue) =>
+            dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_HUE", hue })
+          }
+          label="Target Hue"
+          showValue
+        />
+      )}
 
-      {/* Global Hue Grading — Dark End */}
+      {/* Global Grading — Dark End */}
       <div style={{ ...labelStyle, marginTop: 4 }}>
-        Global Hue Grading — Dark
-      </div>
-      <div style={{ display: "flex", gap: 12 }}>
-        <div style={{ flex: 1 }}>
-          <Select
-            options={STRENGTH_OPTIONS}
-            value={state.globalHueGrading.dark.strength}
-            onValueChange={(s) =>
-              dispatch({
-                type: "SET_GLOBAL_GRADE_DARK_STRENGTH",
-                strength: s as HueGradingStrength,
-              })
-            }
-            label="Strength"
-          />
-        </div>
-        {state.globalHueGrading.dark.strength !== "none" && (
-          <div style={{ flex: 1 }}>
-            <HueSlider
-              value={state.globalHueGrading.dark.hue}
-              onValueChange={(hue) =>
-                dispatch({ type: "SET_GLOBAL_GRADE_DARK_HUE", hue })
-              }
-              label="Target Hue"
-              showValue
-            />
-          </div>
-        )}
+        Grading — Dark
       </div>
+      <Slider
+        value={Math.round(darkIntensity * 100)}
+        onValueChange={(v) =>
+          dispatch({
+            type: "SET_GLOBAL_GRADE_DARK_INTENSITY",
+            intensity: v / 100,
+          })
+        }
+        min={0}
+        max={25}
+        label="Intensity"
+        editableValue
+      />
+      {darkIntensity > 0 && (
+        <HueSlider
+          value={state.globalHueGrading.darkHue}
+          onValueChange={(hue) =>
+            dispatch({ type: "SET_GLOBAL_GRADE_DARK_HUE", hue })
+          }
+          label="Target Hue"
+          showValue
+        />
+      )}
     </div>
   );
 }