@newtonedev/configurator 0.1.0 → 0.1.1

package/src/panels/PalettePanel.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { Card, HueSlider, Slider, Select, Toggle, useTokens } from '@newtonedev/components';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { Card, HueSlider, Slider, Select, Toggle, ColorScaleSlider, TextInput, useTokens } from '@newtonedev/components';
 import { srgbToHex } from 'newtone';
-import type { ColorResult } from 'newtone';
-import type { PaletteState } from '../types';
+import type { ColorResult, DynamicRange } from 'newtone';
+import type { ConfiguratorState, PaletteState } from '../types';
 import type { ConfiguratorAction } from '../state/actions';
 import type { DesaturationStrength, HueGradingStrength } from 'newtone';
 import { SEMANTIC_HUE_RANGES } from '../constants';
+import { useWcagValidation } from '../hooks/useWcagValidation';
+import { hexToPaletteParams } from '../hex-conversion';
+import { traditionalHueToOklch } from '../hue-conversion';
 
 const STRENGTH_OPTIONS = [
   { label: 'None', value: 'none' },
@@ -20,11 +23,120 @@ interface PalettePanelProps {
   readonly index: number;
   readonly dispatch: (action: ConfiguratorAction) => void;
   readonly previewColors?: readonly ColorResult[];
+  readonly state: ConfiguratorState;
 }
 
-export function PalettePanel({ palette, index, dispatch, previewColors }: PalettePanelProps) {
+/** 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);
+}
+
+export function PalettePanel({ palette, index, dispatch, previewColors, state }: PalettePanelProps) {
   const tokens = useTokens(1);
   const hueRange = SEMANTIC_HUE_RANGES[index];
+  const isNeutral = index === 0;
+  const mode = state.preview.mode;
+
+  // Resolve per-mode key color
+  const effectiveKeyColor = mode === 'dark' ? palette.keyColorDark : palette.keyColor;
+
+  // Mode-aware action types
+  const setKeyColorAction = mode === 'dark' ? 'SET_PALETTE_KEY_COLOR_DARK' as const : 'SET_PALETTE_KEY_COLOR' as const;
+  const clearKeyColorAction = mode === 'dark' ? 'CLEAR_PALETTE_KEY_COLOR_DARK' as const : 'CLEAR_PALETTE_KEY_COLOR' as const;
+  const hexActionType = mode === 'dark' ? 'SET_PALETTE_FROM_HEX_DARK' as const : 'SET_PALETTE_FROM_HEX' as const;
+
+  // WCAG validation for non-neutral palettes (already mode-aware)
+  const wcag = useWcagValidation(state, index);
+
+  // Hex input state
+  const [hexText, setHexText] = React.useState('');
+  const [hexError, setHexError] = React.useState('');
+  const [isEditingHex, setIsEditingHex] = React.useState(false);
+  const [isHexUserSet, setIsHexUserSet] = React.useState(false);
+
+  // Reset hex input state when mode changes
+  React.useEffect(() => {
+    setHexText('');
+    setHexError('');
+    setIsEditingHex(false);
+    setIsHexUserSet(false);
+  }, [mode]);
+
+  // Compute displayed hex from current key color position
+  const displayedHex = React.useMemo(() => {
+    if (!previewColors || previewColors.length === 0) return '';
+    const nv = effectiveKeyColor ?? wcag.autoNormalizedValue;
+    return getHexAtNv(previewColors, nv);
+  }, [previewColors, effectiveKeyColor, wcag.autoNormalizedValue]);
+
+  // Sync hex text when not actively editing and not user-submitted
+  React.useEffect(() => {
+    if (!isEditingHex && !isHexUserSet) {
+      setHexText(displayedHex);
+    }
+  }, [displayedHex, isEditingHex, isHexUserSet]);
+
+  // Build dynamic range for hex conversion
+  const dynamicRange = React.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 = React.useCallback(() => {
+    setIsEditingHex(false);
+    const trimmed = hexText.trim();
+    if (!trimmed) {
+      setHexError('');
+      return;
+    }
+
+    const hex = trimmed.startsWith('#') ? trimmed : `#${trimmed}`;
+    const params = hexToPaletteParams(hex, dynamicRange);
+
+    if (!params) {
+      setHexError('Invalid hex color');
+      return;
+    }
+
+    setHexError('');
+    setIsHexUserSet(true);
+    dispatch({
+      type: hexActionType,
+      index,
+      hue: params.hue,
+      saturation: params.saturation,
+      keyColor: params.normalizedValue,
+    });
+  }, [hexText, dynamicRange, dispatch, index, hexActionType]);
+
+  const handleClearKeyColor = React.useCallback(() => {
+    dispatch({ type: clearKeyColorAction, index });
+    setHexError('');
+    setIsHexUserSet(false);
+  }, [dispatch, index, clearKeyColorAction]);
+
+  // Build WCAG warning message
+  const wcagWarning = React.useMemo(() => {
+    if (effectiveKeyColor === undefined || wcag.keyColorContrast === null) return undefined;
+    if (wcag.passesAA) return undefined;
+    const ratio = wcag.keyColorContrast.toFixed(1);
+    if (wcag.passesAALargeText) {
+      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]);
 
   return (
     <Card elevation={1} style={styles.container}>
@@ -32,7 +144,52 @@ export function PalettePanel({ palette, index, dispatch, previewColors }: Palett
         {palette.name}
       </Text>
 
-      {previewColors && (
+      {/* Non-neutral: interactive luminosity slider + hex input */}
+      {!isNeutral && previewColors && (
+        <>
+          <ColorScaleSlider
+            colors={previewColors}
+            value={effectiveKeyColor ?? wcag.autoNormalizedValue}
+            onValueChange={(nv) => { setIsHexUserSet(false); dispatch({ type: setKeyColorAction, index, normalizedValue: nv }); }}
+            label="Key Color"
+            warning={wcagWarning}
+            trimEnds
+            snap
+            animateValue
+          />
+          <View style={styles.hexRow}>
+            <View style={styles.hexInputContainer}>
+              <TextInput
+                label="Hex"
+                value={hexText}
+                onChangeText={(text) => {
+                  setIsEditingHex(true);
+                  setHexText(text);
+                  setHexError('');
+                }}
+                onBlur={handleHexSubmit}
+                onSubmitEditing={handleHexSubmit}
+                placeholder="#000000"
+              />
+            </View>
+            {effectiveKeyColor !== undefined && (
+              <Pressable onPress={handleClearKeyColor} style={styles.autoButton}>
+                <Text style={[styles.autoText, { color: srgbToHex(tokens.interactive.srgb) }]}>
+                  Auto
+                </Text>
+              </Pressable>
+            )}
+          </View>
+          {hexError !== '' && (
+            <Text style={[styles.errorText, { color: srgbToHex(tokens.error.srgb) }]}>
+              {hexError}
+            </Text>
+          )}
+        </>
+      )}
+
+      {/* Neutral: static swatches (unchanged) */}
+      {isNeutral && previewColors && (
         <View style={styles.inlineSwatches}>
           {previewColors.map((color, i) => (
             <View
@@ -142,4 +299,23 @@ const styles = StyleSheet.create({
   toggleContainer: {
     paddingBottom: 2,
   },
+  hexRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 8,
+  },
+  hexInputContainer: {
+    flex: 1,
+  },
+  autoButton: {
+    paddingBottom: 6,
+  },
+  autoText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  errorText: {
+    fontSize: 12,
+    fontWeight: '500',
+  },
 });

package/src/state/actions.ts

@@ -1,6 +1,6 @@
 import type { DesaturationStrength, HueGradingStrength } from 'newtone';
 import type { ColorMode, ThemeName } from '@newtonedev/components';
-import type { ConfiguratorState } from '../types';
+import type { ConfiguratorState, FontConfig } from '../types';
 
 export type ConfiguratorAction =
   // Palette actions
@@ -11,6 +11,12 @@ export type ConfiguratorAction =
   | { readonly type: 'SET_PALETTE_HUE_GRADE_STRENGTH'; readonly index: number; readonly strength: HueGradingStrength }
   | { readonly type: 'SET_PALETTE_HUE_GRADE_HUE'; readonly index: number; readonly hue: number }
   | { readonly type: 'SET_PALETTE_HUE_GRADE_DIRECTION'; readonly index: number; readonly direction: 'light' | 'dark' }
+  | { readonly type: 'SET_PALETTE_KEY_COLOR'; readonly index: number; readonly normalizedValue: number }
+  | { readonly type: 'CLEAR_PALETTE_KEY_COLOR'; readonly index: number }
+  | { readonly type: 'SET_PALETTE_FROM_HEX'; readonly index: number; readonly hue: number; readonly saturation: number; readonly keyColor: number }
+  | { readonly type: 'SET_PALETTE_KEY_COLOR_DARK'; readonly index: number; readonly normalizedValue: number }
+  | { readonly type: 'CLEAR_PALETTE_KEY_COLOR_DARK'; readonly index: number }
+  | { readonly type: 'SET_PALETTE_FROM_HEX_DARK'; readonly index: number; readonly hue: number; readonly saturation: number; readonly keyColor: number }
   // Dynamic range actions
   | { readonly type: 'SET_LIGHTEST'; readonly value: number }
   | { readonly type: 'SET_DARKEST'; readonly value: number }
@@ -19,6 +25,20 @@ export type ConfiguratorAction =
   | { readonly type: 'SET_GLOBAL_GRADE_LIGHT_HUE'; readonly hue: number }
   | { readonly type: 'SET_GLOBAL_GRADE_DARK_STRENGTH'; readonly strength: HueGradingStrength }
   | { readonly type: 'SET_GLOBAL_GRADE_DARK_HUE'; readonly hue: number }
+  // Spacing actions
+  | { readonly type: 'SET_SPACING_DENSITY'; readonly density: number }
+  // Roundness actions
+  | { readonly type: 'SET_ROUNDNESS_INTENSITY'; readonly intensity: number }
+  // Typography actions
+  | { readonly type: 'SET_TYPOGRAPHY_BASE_SIZE'; readonly baseSize: number }
+  | { readonly type: 'SET_TYPOGRAPHY_RATIO'; readonly ratio: number }
+  | { readonly type: 'SET_FONT_MONO'; readonly font: FontConfig }
+  | { readonly type: 'SET_FONT_DISPLAY'; readonly font: FontConfig }
+  | { readonly type: 'SET_FONT_DEFAULT'; readonly font: FontConfig }
+  // 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 }
   | { readonly type: 'SET_PREVIEW_THEME'; readonly theme: ThemeName }

package/src/state/defaults.ts

@@ -71,4 +71,35 @@ export const DEFAULT_CONFIGURATOR_STATE: ConfiguratorState = {
     mode: 'light',
     theme: 'neutral',
   },
+  spacing: {
+    density: 0.5,  // 1.0x multiplier = preserves current hardcoded values
+  },
+  roundness: {
+    intensity: 0.5,  // 1.0x multiplier = preserves current hardcoded values
+  },
+  typography: {
+    fonts: {
+      mono: {
+        type: 'system',
+        family: 'ui-monospace',
+        fallback: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+      },
+      display: {
+        type: 'system',
+        family: 'system-ui',
+        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      },
+      default: {
+        type: 'system',
+        family: 'system-ui',
+        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      },
+    },
+    scale: { baseSize: 16, ratio: 1.25 },
+  },
+  icons: {
+    variant: 'rounded',  // Material Design 3 aesthetic
+    weight: 400,         // Normal weight
+    autoGrade: true,     // Enable mode-aware grade
+  },
 };

package/src/state/reducer.ts

@@ -81,6 +81,58 @@ export function configuratorReducer(
         }),
       };
 
+    case 'SET_PALETTE_KEY_COLOR':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          keyColor: clamp(action.normalizedValue, 0, 1),
+        }),
+      };
+
+    case 'CLEAR_PALETTE_KEY_COLOR':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          keyColor: undefined,
+        }),
+      };
+
+    case 'SET_PALETTE_FROM_HEX':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hue: wrapHue(action.hue),
+          saturation: clamp(action.saturation, 0, 100),
+          keyColor: clamp(action.keyColor, 0, 1),
+        }),
+      };
+
+    case 'SET_PALETTE_KEY_COLOR_DARK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          keyColorDark: clamp(action.normalizedValue, 0, 1),
+        }),
+      };
+
+    case 'CLEAR_PALETTE_KEY_COLOR_DARK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          keyColorDark: undefined,
+        }),
+      };
+
+    case 'SET_PALETTE_FROM_HEX_DARK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hue: wrapHue(action.hue),
+          saturation: clamp(action.saturation, 0, 100),
+          keyColorDark: clamp(action.keyColor, 0, 1),
+        }),
+      };
+
     // Dynamic range actions
     case 'SET_LIGHTEST':
       return {
@@ -137,6 +189,135 @@ export function configuratorReducer(
         },
       };
 
+    // Spacing actions
+    case 'SET_SPACING_DENSITY':
+      return {
+        ...state,
+        spacing: {
+          density: clamp(action.density, 0, 1),
+        },
+      };
+
+    // Roundness actions
+    case 'SET_ROUNDNESS_INTENSITY':
+      return {
+        ...state,
+        roundness: {
+          intensity: clamp(action.intensity, 0, 1),
+        },
+      };
+
+    // Typography actions
+    case 'SET_TYPOGRAPHY_BASE_SIZE': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      return {
+        ...state,
+        typography: {
+          fonts: state.typography?.fonts ?? defaultTypography.fonts,
+          scale: {
+            baseSize: clamp(action.baseSize, 12, 24),
+            ratio: state.typography?.scale.ratio ?? defaultTypography.scale.ratio,
+          },
+        },
+      };
+    }
+
+    case 'SET_TYPOGRAPHY_RATIO': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      return {
+        ...state,
+        typography: {
+          fonts: state.typography?.fonts ?? defaultTypography.fonts,
+          scale: {
+            baseSize: state.typography?.scale.baseSize ?? defaultTypography.scale.baseSize,
+            ratio: clamp(action.ratio, 1.1, 1.5),
+          },
+        },
+      };
+    }
+
+    case 'SET_FONT_MONO': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      return {
+        ...state,
+        typography: {
+          fonts: {
+            mono: action.font,
+            display: state.typography?.fonts.display ?? defaultTypography.fonts.display,
+            default: state.typography?.fonts.default ?? defaultTypography.fonts.default,
+          },
+          scale: state.typography?.scale ?? defaultTypography.scale,
+        },
+      };
+    }
+
+    case 'SET_FONT_DISPLAY': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      return {
+        ...state,
+        typography: {
+          fonts: {
+            mono: state.typography?.fonts.mono ?? defaultTypography.fonts.mono,
+            display: action.font,
+            default: state.typography?.fonts.default ?? defaultTypography.fonts.default,
+          },
+          scale: state.typography?.scale ?? defaultTypography.scale,
+        },
+      };
+    }
+
+    case 'SET_FONT_DEFAULT': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      return {
+        ...state,
+        typography: {
+          fonts: {
+            mono: state.typography?.fonts.mono ?? defaultTypography.fonts.mono,
+            display: state.typography?.fonts.display ?? defaultTypography.fonts.display,
+            default: action.font,
+          },
+          scale: state.typography?.scale ?? defaultTypography.scale,
+        },
+      };
+    }
+
+    // Icons actions
+    case 'SET_ICON_VARIANT': {
+      const defaultIcons = DEFAULT_CONFIGURATOR_STATE.icons!;
+      return {
+        ...state,
+        icons: {
+          variant: action.variant,
+          weight: state.icons?.weight ?? defaultIcons.weight,
+          autoGrade: state.icons?.autoGrade ?? defaultIcons.autoGrade,
+        },
+      };
+    }
+
+    case 'SET_ICON_WEIGHT': {
+      const defaultIcons = DEFAULT_CONFIGURATOR_STATE.icons!;
+      return {
+        ...state,
+        icons: {
+          variant: state.icons?.variant ?? defaultIcons.variant,
+          weight: action.weight,
+          autoGrade: state.icons?.autoGrade ?? defaultIcons.autoGrade,
+        },
+      };
+    }
+
+    case 'SET_ICON_AUTO_GRADE': {
+      const defaultIcons = DEFAULT_CONFIGURATOR_STATE.icons!;
+      return {
+        ...state,
+        icons: {
+          variant: state.icons?.variant ?? defaultIcons.variant,
+          weight: state.icons?.weight ?? defaultIcons.weight,
+          autoGrade: action.autoGrade,
+        },
+      };
+    }
+
     // Preview actions
     case 'SET_PREVIEW_MODE':
       return {

package/src/types.ts

@@ -11,6 +11,8 @@ export interface PaletteState {
   readonly hueGradeStrength: HueGradingStrength;          // 'none' | 'low' | 'medium' | 'hard'
   readonly hueGradeHue: number;                           // Traditional HSL hue [0, 359]
   readonly hueGradeDirection: 'light' | 'dark';
+  readonly keyColor?: number;                             // Light mode normalizedValue [0, 1] — undefined = auto
+  readonly keyColorDark?: number;                         // Dark mode normalizedValue [0, 1] — undefined = auto
 }
 
 /** Global hue grading endpoint state */
@@ -19,6 +21,14 @@ export interface HueGradingEndpointState {
   readonly hue: number;                                   // Traditional HSL hue [0, 359]
 }
 
+/** Font configuration for a single font slot */
+export interface FontConfig {
+  readonly type: 'system' | 'google' | 'custom';
+  readonly family: string;       // 'ui-monospace' | 'Roboto' | custom name
+  readonly customUrl?: string;   // Supabase Storage URL for custom fonts
+  readonly fallback: string;     // CSS fallback stack
+}
+
 /** Complete configurator state */
 export interface ConfiguratorState {
   readonly palettes: readonly PaletteState[];
@@ -34,4 +44,26 @@ export interface ConfiguratorState {
     readonly mode: ColorMode;
     readonly theme: ThemeName;
   };
+  readonly spacing?: {
+    readonly density: number;                              // [0, 1] where 0=tight, 1=relaxed
+  };
+  readonly roundness?: {
+    readonly intensity: number;                            // [0, 1] where 0=rectangle, 1=pill
+  };
+  readonly typography?: {
+    readonly fonts: {
+      readonly mono: FontConfig;      // currencies, code, amounts
+      readonly display: FontConfig;   // headlines
+      readonly default: FontConfig;   // fallback
+    };
+    readonly scale: {
+      readonly baseSize: number;  // px (default: 16)
+      readonly ratio: number;     // scale ratio (default: 1.25)
+    };
+  };
+  readonly icons?: {
+    readonly variant: 'outlined' | 'rounded' | 'sharp';
+    readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+    readonly autoGrade: boolean;  // true = mode-aware grade (light=-25, dark=200)
+  };
 }