@newtonedev/editor 0.1.12 → 0.2.0

package/src/configurator/hooks/usePreviewColors.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { generateScale, oklchToSrgb, clampSrgb } from '@newtonedev/colors';
+import type { Grading } from '@newtonedev/colors';
+import type { ColorResult } from 'newtone';
+import type { ConfiguratorState } from '../types';
+
+/**
+ * Compute preview swatches for all palettes.
+ * Returns an array of arrays: one preview row per palette.
+ */
+export function usePreviewColors(state: ConfiguratorState, useP3 = false): readonly (readonly ColorResult[])[] {
+  return useMemo(() => {
+    const g = state.globalHueGrading;
+    const grading: Grading | undefined =
+      g.lightIntensity === 0 && g.darkIntensity === 0
+        ? undefined
+        : {
+            light: { hue: g.lightHue, amount: g.lightIntensity },
+            dark: { hue: g.darkHue, amount: g.darkIntensity },
+          };
+
+    return state.palettes.map(p => {
+      const shift = p.localHueGrade
+        ? {
+            hue: p.localHueGrade.hue,
+            amount: p.localHueGrade.intensity,
+            light: p.localHueGrade.side === 'light',
+          }
+        : undefined;
+
+      const scale = generateScale({
+        hue: p.hue,
+        contrast: { light: state.dynamicRange.lightest, dark: state.dynamicRange.darkest },
+        chroma: { amount: p.chromaRatio, balance: p.chromaPeak },
+        grading,
+        shift,
+        isP3: useP3,
+      });
+
+      // Convert Oklch[] → ColorResult[]
+      return scale.map(oklch => {
+        const srgb = clampSrgb(oklchToSrgb(oklch));
+        return { srgb, oklch } as ColorResult;
+      });
+    });
+  }, [state, useP3]);
+}

package/src/configurator/hooks/useWcagValidation.ts

@@ -0,0 +1,133 @@
+import { useMemo } from 'react';
+import { generateScale, oklchToSrgb, clampSrgb } from '@newtonedev/colors';
+import type { Oklch, Grading, Shift } from '@newtonedev/colors';
+import { getWcagContrastRatio } from 'newtone';
+import type { ConfiguratorState } from '../types';
+
+/** Number of positions to sample when searching for the best contrast match. */
+const SEARCH_STEPS = 200;
+const AA_TARGET = 4.5;
+
+/**
+ * Linearly interpolate between steps of a pre-generated scale.
+ * Gives continuous resolution from the fixed-step scale returned by generateScale.
+ */
+function interpolateOklch(scale: Oklch[], t: number): Oklch {
+  const N = scale.length;
+  const fIdx = Math.max(0, Math.min(N - 1, t * (N - 1)));
+  const i0 = Math.floor(fIdx);
+  const i1 = Math.min(i0 + 1, N - 1);
+  const f = fIdx - i0;
+  const a = scale[i0];
+  const b = scale[i1];
+  return {
+    L: a.L + (b.L - a.L) * f,
+    C: a.C + (b.C - a.C) * f,
+    h: a.h + (b.h - a.h) * f,
+  };
+}
+
+export interface WcagValidation {
+  /** WCAG contrast ratio at the key color position (null if no keyColor set) */
+  readonly keyColorContrast: number | null;
+  /** Whether the key color passes WCAG AA for normal text (>= 4.5:1) */
+  readonly passesAA: boolean;
+  /** Whether the key color passes WCAG AA for large text (>= 3:1) */
+  readonly passesAALargeText: boolean;
+  /** The step index where auto contrast search would place the key color [0, 25] */
+  readonly autoStep: number;
+}
+
+function buildShift(lg: { hue: number; intensity: number; side: 'light' | 'dark' }): Shift {
+  return { hue: lg.hue, amount: lg.intensity, light: lg.side === 'light' };
+}
+
+/**
+ * Compute WCAG validation info for a non-primary palette's key color.
+ *
+ * Validates the palette's key color against the primary background
+ * in the current preview mode. Also computes where the auto contrast
+ * search would place the key color (for showing the default position).
+ */
+export function useWcagValidation(
+  state: ConfiguratorState,
+  paletteIndex: number,
+): WcagValidation {
+  return useMemo(() => {
+    const palette = state.palettes[paletteIndex];
+    const primary = state.palettes[0];
+    if (!palette || !primary) {
+      return { keyColorContrast: null, passesAA: true, passesAALargeText: true, autoStep: 13 };
+    }
+
+    const mode = state.preview.mode;
+    const contrast = { light: state.dynamicRange.lightest, dark: state.dynamicRange.darkest };
+
+    const g = state.globalHueGrading;
+    const grading: Grading | undefined =
+      g.lightIntensity === 0 && g.darkIntensity === 0
+        ? undefined
+        : {
+            light: { hue: g.lightHue, amount: g.lightIntensity },
+            dark: { hue: g.darkHue, amount: g.darkIntensity },
+          };
+
+    // Generate primary scale to find background
+    const primaryScale = generateScale({
+      hue: primary.hue,
+      contrast,
+      chroma: { amount: primary.chromaRatio, balance: primary.chromaPeak },
+      grading,
+      shift: primary.localHueGrade ? buildShift(primary.localHueGrade) : undefined,
+    });
+
+    // Background position: light=near-lightest (engineNv≈0.95), dark=near-darkest (engineNv≈0.1)
+    const bgEngineNv = mode === 'light' ? 0.95 : 0.1;
+    const bgT = 1 - bgEngineNv;
+    const bgSrgb = clampSrgb(oklchToSrgb(interpolateOklch(primaryScale, bgT)));
+
+    // Generate palette scale to find key color and auto position
+    const paletteScale = generateScale({
+      hue: palette.hue,
+      contrast,
+      chroma: { amount: palette.chromaRatio, balance: palette.chromaPeak },
+      grading,
+      shift: palette.localHueGrade ? buildShift(palette.localHueGrade) : undefined,
+    });
+
+    // Find auto position: search at fine-grained t intervals for best 4.5:1 contrast
+    let bestSearchIdx = 0;
+    let bestDelta = Infinity;
+    for (let i = 0; i < SEARCH_STEPS; i++) {
+      const t = i / (SEARCH_STEPS - 1);
+      const srgb = clampSrgb(oklchToSrgb(interpolateOklch(paletteScale, t)));
+      const cr = getWcagContrastRatio(srgb, bgSrgb);
+      const delta = Math.abs(cr - AA_TARGET);
+      if (delta < bestDelta) {
+        bestDelta = delta;
+        bestSearchIdx = i;
+      }
+    }
+    // Convert search index to step index: t=0→step 0 (lightest), t=1→step 25 (darkest)
+    const autoStep = Math.round(bestSearchIdx / (SEARCH_STEPS - 1) * 25);
+
+    // Resolve per-mode key color step
+    const effectiveKeyStep = mode === 'dark' ? palette.keyColorStepDark : palette.keyColorStep;
+
+    if (effectiveKeyStep === undefined) {
+      return { keyColorContrast: null, passesAA: true, passesAALargeText: true, autoStep };
+    }
+
+    // Look up the key color in the palette scale: step 0=lightest (t=0), step 25=darkest (t=1)
+    const keyT = Math.max(0, Math.min(25, effectiveKeyStep)) / 25;
+    const keySrgb = clampSrgb(oklchToSrgb(interpolateOklch(paletteScale, keyT)));
+    const cr = getWcagContrastRatio(keySrgb, bgSrgb);
+
+    return {
+      keyColorContrast: cr,
+      passesAA: cr >= 4.5,
+      passesAALargeText: cr >= 3.0,
+      autoStep,
+    };
+  }, [state, paletteIndex]);
+}

package/src/configurator/hue-conversion.ts

@@ -0,0 +1,25 @@
+import { srgbToOklch } from 'newtone';
+import type { Srgb } from 'newtone';
+
+/**
+ * Convert a traditional HSL color wheel hue (0-359) to its equivalent OKLCH hue.
+ *
+ * Uses the fully saturated HSL color (S=1, L=0.5) at the given hue,
+ * converts to sRGB, then extracts the OKLCH hue component.
+ *
+ * Traditional hues: 0=red, 60=yellow, 120=green, 180=cyan, 240=blue, 300=magenta.
+ */
+export function traditionalHueToOklch(hue: number): number {
+  const h = ((hue % 360) + 360) % 360;
+  const x = 1 - Math.abs((h / 60) % 2 - 1);
+
+  let r: number, g: number, b: number;
+  if (h < 60)       { r = 1; g = x; b = 0; }
+  else if (h < 120) { r = x; g = 1; b = 0; }
+  else if (h < 180) { r = 0; g = 1; b = x; }
+  else if (h < 240) { r = 0; g = x; b = 1; }
+  else if (h < 300) { r = x; g = 0; b = 1; }
+  else              { r = 1; g = 0; b = x; }
+
+  return srgbToOklch({ r, g, b } as Srgb).h;
+}

package/src/configurator/state/actions.ts

@@ -0,0 +1,43 @@
+import type { ColorMode } from '@newtonedev/components';
+import type { TextRole } from '@newtonedev/fonts';
+import type { ConfiguratorState, FontSlotConfig, FontScope, SpacingPreset } from '../types';
+
+export type ConfiguratorAction =
+  // Palette actions
+  | { readonly type: 'SET_PALETTE_HUE'; readonly index: number; readonly hue: number }
+  | { readonly type: 'SET_PALETTE_CHROMA_RATIO'; readonly index: number; readonly chromaRatio: number }
+  | { readonly type: 'SET_PALETTE_CHROMA_PEAK'; readonly index: number; readonly chromaPeak: number }
+  | { readonly type: 'SET_PALETTE_LOCAL_HUE_GRADE_INTENSITY'; readonly index: number; readonly intensity: number }
+  | { readonly type: 'SET_PALETTE_LOCAL_HUE_GRADE_HUE'; readonly index: number; readonly hue: number }
+  | { readonly type: 'SET_PALETTE_LOCAL_HUE_GRADE_SIDE'; readonly index: number; readonly side: 'light' | 'dark' }
+  | { readonly type: 'SET_PALETTE_KEY_COLOR_STEP'; readonly index: number; readonly step: number }
+  | { readonly type: 'CLEAR_PALETTE_KEY_COLOR_STEP'; readonly index: number }
+  | { readonly type: 'SET_PALETTE_FROM_HEX'; readonly index: number; readonly hue: number; readonly chromaRatio: number; readonly keyColorStep: number }
+  | { readonly type: 'SET_PALETTE_KEY_COLOR_STEP_DARK'; readonly index: number; readonly step: number }
+  | { readonly type: 'CLEAR_PALETTE_KEY_COLOR_STEP_DARK'; readonly index: number }
+  | { readonly type: 'SET_PALETTE_FROM_HEX_DARK'; readonly index: number; readonly hue: number; readonly chromaRatio: number; readonly keyColorStep: number }
+  // Dynamic range actions
+  | { readonly type: 'SET_LIGHTEST'; readonly value: number }
+  | { readonly type: 'SET_DARKEST'; readonly value: number }
+  // Global hue grading actions
+  | { readonly type: 'SET_GLOBAL_GRADE_LIGHT_INTENSITY'; readonly intensity: number }
+  | { readonly type: 'SET_GLOBAL_GRADE_LIGHT_HUE'; readonly hue: number }
+  | { readonly type: 'SET_GLOBAL_GRADE_DARK_INTENSITY'; readonly intensity: number }
+  | { readonly type: 'SET_GLOBAL_GRADE_DARK_HUE'; readonly hue: number }
+  // Spacing actions
+  | { readonly type: 'SET_SPACING_PRESET'; readonly preset: SpacingPreset }
+  // Roundness actions
+  | { readonly type: 'SET_ROUNDNESS_INTENSITY'; readonly intensity: number }
+  // Typography actions
+  | { readonly type: 'SET_FONT'; readonly scope: FontScope; readonly font: FontSlotConfig }
+  | { readonly type: 'SET_TYPE_SCALE_OFFSET'; readonly offset: number }
+  | { readonly type: 'SET_ROLE_WEIGHT'; readonly role: TextRole; readonly weight: number }
+  // Icons actions
+  | { readonly type: 'SET_ICON_VARIANT'; readonly variant: 'outlined' | 'rounded' | 'sharp' }
+  | { readonly type: 'SET_ICON_WEIGHT'; readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700 }
+  | { readonly type: 'SET_ICON_AUTO_GRADE'; readonly autoGrade: boolean }
+  // Preview actions
+  | { readonly type: 'SET_PREVIEW_MODE'; readonly mode: ColorMode }
+  // Control actions
+  | { readonly type: 'RESET' }
+  | { readonly type: 'LOAD_STATE'; readonly state: ConfiguratorState };

package/src/configurator/state/defaults.ts

@@ -0,0 +1,107 @@
+import type { ConfiguratorState } from '../types';
+
+/**
+ * Default configurator state.
+ * All hue values are OKLCH hues [0, 360).
+ */
+export const DEFAULT_CONFIGURATOR_STATE: ConfiguratorState = {
+  hueSpace: 'oklch',
+  palettes: [
+    {
+      name: 'Primary',
+      hue: 262.64,
+      chromaRatio: 0.24,
+      chromaPeak: 0.5,
+    },
+    {
+      name: 'Secondary',
+      hue: 43.49,
+      chromaRatio: 0.8,
+      chromaPeak: 0.5,
+    },
+    {
+      name: 'Tertiary',
+      hue: 195,
+      chromaRatio: 0.5,
+      chromaPeak: 0.5,
+    },
+    {
+      name: 'Success',
+      hue: 148.13,
+      chromaRatio: 0.64,
+      chromaPeak: 0.5,
+    },
+    {
+      name: 'Warning',
+      hue: 73.27,
+      chromaRatio: 0.8,
+      chromaPeak: 0.5,
+    },
+    {
+      name: 'Error',
+      hue: 29.23,
+      chromaRatio: 0.8,
+      chromaPeak: 0.5,
+    },
+  ],
+  dynamicRange: {
+    lightest: 1,
+    darkest: 1,
+  },
+  globalHueGrading: {
+    lightHue: 52.78,
+    lightIntensity: 0,
+    darkHue: 262.64,
+    darkIntensity: 0,
+  },
+  preview: {
+    mode: 'light',
+  },
+  spacing: {
+    preset: 'md',  // Medium (8px base): default/balanced spacing
+  },
+  roundness: {
+    intensity: 0.5,  // 1.0x multiplier = preserves current hardcoded values
+  },
+  typography: {
+    fonts: {
+      main: {
+        config: {
+          type: 'system',
+          family: 'system-ui',
+          fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        },
+        weights: { regular: 400, medium: 500, bold: 700 },
+      },
+      display: {
+        config: {
+          type: 'system',
+          family: 'system-ui',
+          fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        },
+        weights: { regular: 400, medium: 500, bold: 700 },
+      },
+      mono: {
+        config: {
+          type: 'system',
+          family: 'ui-monospace',
+          fallback: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+        },
+        weights: { regular: 400, medium: 500, bold: 700 },
+      },
+      currency: {
+        config: {
+          type: 'system',
+          family: 'system-ui',
+          fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+        },
+        weights: { regular: 400, medium: 500, bold: 700 },
+      },
+    },
+  },
+  icons: {
+    variant: 'rounded',  // Material Design 3 aesthetic
+    weight: 400,         // Normal weight
+    autoGrade: true,     // Enable mode-aware grade
+  },
+};