@newtonedev/configurator 0.1.0

package/src/panels/PalettePanel.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { Card, HueSlider, Slider, Select, Toggle, useTokens } from '@newtonedev/components';
+import { srgbToHex } from 'newtone';
+import type { ColorResult } from 'newtone';
+import type { PaletteState } from '../types';
+import type { ConfiguratorAction } from '../state/actions';
+import type { DesaturationStrength, HueGradingStrength } from 'newtone';
+import { SEMANTIC_HUE_RANGES } from '../constants';
+
+const STRENGTH_OPTIONS = [
+  { label: 'None', value: 'none' },
+  { label: 'Low', value: 'low' },
+  { label: 'Medium', value: 'medium' },
+  { label: 'Hard', value: 'hard' },
+];
+
+interface PalettePanelProps {
+  readonly palette: PaletteState;
+  readonly index: number;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly previewColors?: readonly ColorResult[];
+}
+
+export function PalettePanel({ palette, index, dispatch, previewColors }: PalettePanelProps) {
+  const tokens = useTokens(1);
+  const hueRange = SEMANTIC_HUE_RANGES[index];
+
+  return (
+    <Card elevation={1} style={styles.container}>
+      <Text style={[styles.title, { color: srgbToHex(tokens.textPrimary.srgb) }]}>
+        {palette.name}
+      </Text>
+
+      {previewColors && (
+        <View style={styles.inlineSwatches}>
+          {previewColors.map((color, i) => (
+            <View
+              key={i}
+              style={[styles.inlineSwatch, { backgroundColor: srgbToHex(color.srgb) }]}
+            />
+          ))}
+        </View>
+      )}
+
+      <HueSlider
+        value={palette.hue}
+        onValueChange={(hue) => dispatch({ type: 'SET_PALETTE_HUE', index, hue })}
+        label="Hue"
+        showValue
+        {...(hueRange ? { min: hueRange.min, max: hueRange.max } : {})}
+      />
+
+      <Slider
+        value={palette.saturation}
+        onValueChange={(saturation) => dispatch({ type: 'SET_PALETTE_SATURATION', index, saturation })}
+        min={0}
+        max={100}
+        label="Saturation"
+        showValue
+      />
+
+      <View style={styles.row}>
+        <View style={styles.flex}>
+          <Select
+            options={STRENGTH_OPTIONS}
+            value={palette.desaturationStrength}
+            onValueChange={(strength) => dispatch({ type: 'SET_PALETTE_DESAT_STRENGTH', index, strength: strength as DesaturationStrength })}
+            label="Desaturation"
+          />
+        </View>
+        {palette.desaturationStrength !== 'none' && (
+          <View style={styles.toggleContainer}>
+            <Toggle
+              value={palette.desaturationDirection === 'dark'}
+              onValueChange={(v) => dispatch({ type: 'SET_PALETTE_DESAT_DIRECTION', index, direction: v ? 'dark' : 'light' })}
+              label="Invert"
+            />
+          </View>
+        )}
+      </View>
+
+      <View style={styles.row}>
+        <View style={styles.flex}>
+          <Select
+            options={STRENGTH_OPTIONS}
+            value={palette.hueGradeStrength}
+            onValueChange={(strength) => dispatch({ type: 'SET_PALETTE_HUE_GRADE_STRENGTH', index, strength: strength as HueGradingStrength })}
+            label="Hue Grading"
+          />
+        </View>
+        {palette.hueGradeStrength !== 'none' && (
+          <View style={styles.toggleContainer}>
+            <Toggle
+              value={palette.hueGradeDirection === 'dark'}
+              onValueChange={(v) => dispatch({ type: 'SET_PALETTE_HUE_GRADE_DIRECTION', index, direction: v ? 'dark' : 'light' })}
+              label="Invert"
+            />
+          </View>
+        )}
+      </View>
+
+      {palette.hueGradeStrength !== 'none' && (
+        <HueSlider
+          value={palette.hueGradeHue}
+          onValueChange={(hue) => dispatch({ type: 'SET_PALETTE_HUE_GRADE_HUE', index, hue })}
+          label="Grade Target"
+          showValue
+        />
+      )}
+    </Card>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 12,
+    marginBottom: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  inlineSwatches: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 1,
+  },
+  inlineSwatch: {
+    width: 20,
+    height: 16,
+    borderRadius: 2,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 12,
+  },
+  flex: {
+    flex: 1,
+  },
+  toggleContainer: {
+    paddingBottom: 2,
+  },
+});

package/src/panels/PreviewPanel.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import {
+  Card,
+  Button,
+  TextInput,
+  Select,
+  NewtoneProvider,
+  useTokens,
+} from '@newtonedev/components';
+import { srgbToHex } from 'newtone';
+import type { ConfiguratorState } from '../types';
+import type { ConfiguratorAction } from '../state/actions';
+import type { ThemeName, NewtoneThemeConfig } from '@newtonedev/components';
+
+const THEME_OPTIONS = [
+  { label: 'Neutral', value: 'neutral' },
+  { label: 'Primary', value: 'primary' },
+  { label: 'Secondary', value: 'secondary' },
+  { label: 'Strong', value: 'strong' },
+];
+
+interface PreviewPanelProps {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly themeConfig: NewtoneThemeConfig;
+}
+
+/** Inner card that reads tokens from the nested provider, so its background reflects the selected theme. */
+function PreviewCard({
+  state,
+  dispatch,
+}: {
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+}) {
+  const tokens = useTokens(1);
+
+  return (
+    <Card elevation={1} style={styles.container}>
+      <Text style={[styles.title, { color: srgbToHex(tokens.textPrimary.srgb) }]}>
+        Component Preview
+      </Text>
+
+      <View style={styles.controls}>
+        <Select
+          options={THEME_OPTIONS}
+          value={state.preview.theme}
+          onValueChange={(t) => dispatch({ type: 'SET_PREVIEW_THEME', theme: t as ThemeName })}
+          label="Theme"
+        />
+      </View>
+
+      <View style={previewStyles.wrapper}>
+        <View style={previewStyles.row}>
+          <Button variant="primary" size="sm">Primary</Button>
+          <Button variant="secondary" size="sm">Secondary</Button>
+          <Button variant="ghost" size="sm">Ghost</Button>
+          <Button variant="outline" size="sm">Outline</Button>
+        </View>
+
+        <TextInput label="Sample Input" value="Hello, Newtone" onChangeText={() => {}} />
+
+        <View style={previewStyles.row}>
+          <View style={[previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.success.srgb) }]} />
+          <Text style={[previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }]}>Success</Text>
+          <View style={[previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.warning.srgb) }]} />
+          <Text style={[previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }]}>Warning</Text>
+          <View style={[previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.error.srgb) }]} />
+          <Text style={[previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }]}>Error</Text>
+        </View>
+      </View>
+    </Card>
+  );
+}
+
+export function PreviewPanel({ state, dispatch, themeConfig }: PreviewPanelProps) {
+  return (
+    <NewtoneProvider
+      key={`${state.preview.mode}-${state.preview.theme}`}
+      config={themeConfig}
+      initialMode={state.preview.mode}
+      initialTheme={state.preview.theme}
+    >
+      <PreviewCard state={state} dispatch={dispatch} />
+    </NewtoneProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    gap: 12,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    gap: 16,
+  },
+});
+
+const previewStyles = StyleSheet.create({
+  wrapper: {
+    gap: 12,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flexWrap: 'wrap',
+  },
+  statusDot: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+  statusText: {
+    fontSize: 13,
+    marginRight: 8,
+  },
+});

package/src/state/actions.ts

@@ -0,0 +1,27 @@
+import type { DesaturationStrength, HueGradingStrength } from 'newtone';
+import type { ColorMode, ThemeName } from '@newtonedev/components';
+import type { ConfiguratorState } from '../types';
+
+export type ConfiguratorAction =
+  // Palette actions
+  | { readonly type: 'SET_PALETTE_HUE'; readonly index: number; readonly hue: number }
+  | { readonly type: 'SET_PALETTE_SATURATION'; readonly index: number; readonly saturation: number }
+  | { readonly type: 'SET_PALETTE_DESAT_STRENGTH'; readonly index: number; readonly strength: DesaturationStrength }
+  | { readonly type: 'SET_PALETTE_DESAT_DIRECTION'; readonly index: number; readonly direction: 'light' | 'dark' }
+  | { 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' }
+  // 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_STRENGTH'; readonly strength: HueGradingStrength }
+  | { 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 }
+  // Preview actions
+  | { readonly type: 'SET_PREVIEW_MODE'; readonly mode: ColorMode }
+  | { readonly type: 'SET_PREVIEW_THEME'; readonly theme: ThemeName }
+  // Control actions
+  | { readonly type: 'RESET' }
+  | { readonly type: 'LOAD_STATE'; readonly state: ConfiguratorState };

package/src/state/defaults.ts

@@ -0,0 +1,74 @@
+import type { ConfiguratorState } from '../types';
+
+/**
+ * Default configurator state.
+ * Traditional hues match the playground defaults.
+ * These are HSL hues (0=red, 60=yellow, 120=green, etc.),
+ * NOT OKLCH hues — the bridge converts them.
+ */
+export const DEFAULT_CONFIGURATOR_STATE: ConfiguratorState = {
+  palettes: [
+    {
+      name: 'Neutral',
+      hue: 220,
+      saturation: 24,
+      desaturationStrength: 'none',
+      desaturationDirection: 'light',
+      hueGradeStrength: 'none',
+      hueGradeHue: 0,
+      hueGradeDirection: 'light',
+    },
+    {
+      name: 'Accent',
+      hue: 24,
+      saturation: 80,
+      desaturationStrength: 'none',
+      desaturationDirection: 'light',
+      hueGradeStrength: 'none',
+      hueGradeHue: 0,
+      hueGradeDirection: 'light',
+    },
+    {
+      name: 'Success',
+      hue: 145,
+      saturation: 64,
+      desaturationStrength: 'none',
+      desaturationDirection: 'light',
+      hueGradeStrength: 'none',
+      hueGradeHue: 0,
+      hueGradeDirection: 'light',
+    },
+    {
+      name: 'Warning',
+      hue: 40,
+      saturation: 80,
+      desaturationStrength: 'none',
+      desaturationDirection: 'light',
+      hueGradeStrength: 'none',
+      hueGradeHue: 0,
+      hueGradeDirection: 'light',
+    },
+    {
+      name: 'Error',
+      hue: 0,
+      saturation: 80,
+      desaturationStrength: 'none',
+      desaturationDirection: 'light',
+      hueGradeStrength: 'none',
+      hueGradeHue: 0,
+      hueGradeDirection: 'light',
+    },
+  ],
+  dynamicRange: {
+    lightest: 1,
+    darkest: 1,
+  },
+  globalHueGrading: {
+    light: { strength: 'none', hue: 30 },
+    dark: { strength: 'none', hue: 220 },
+  },
+  preview: {
+    mode: 'light',
+    theme: 'neutral',
+  },
+};

package/src/state/reducer.ts

@@ -0,0 +1,163 @@
+import type { ConfiguratorState, PaletteState } from '../types';
+import type { ConfiguratorAction } from './actions';
+import { DEFAULT_CONFIGURATOR_STATE } from './defaults';
+
+function updatePalette(
+  palettes: readonly PaletteState[],
+  index: number,
+  update: Partial<PaletteState>,
+): readonly PaletteState[] {
+  if (index < 0 || index >= palettes.length) return palettes;
+  return palettes.map((p, i) => (i === index ? { ...p, ...update } : p));
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function wrapHue(hue: number): number {
+  return ((hue % 360) + 360) % 360;
+}
+
+export function configuratorReducer(
+  state: ConfiguratorState,
+  action: ConfiguratorAction,
+): ConfiguratorState {
+  switch (action.type) {
+    // Palette actions
+    case 'SET_PALETTE_HUE':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hue: wrapHue(action.hue),
+        }),
+      };
+
+    case 'SET_PALETTE_SATURATION':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          saturation: clamp(action.saturation, 0, 100),
+        }),
+      };
+
+    case 'SET_PALETTE_DESAT_STRENGTH':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          desaturationStrength: action.strength,
+        }),
+      };
+
+    case 'SET_PALETTE_DESAT_DIRECTION':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          desaturationDirection: action.direction,
+        }),
+      };
+
+    case 'SET_PALETTE_HUE_GRADE_STRENGTH':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hueGradeStrength: action.strength,
+        }),
+      };
+
+    case 'SET_PALETTE_HUE_GRADE_HUE':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hueGradeHue: wrapHue(action.hue),
+        }),
+      };
+
+    case 'SET_PALETTE_HUE_GRADE_DIRECTION':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hueGradeDirection: action.direction,
+        }),
+      };
+
+    // Dynamic range actions
+    case 'SET_LIGHTEST':
+      return {
+        ...state,
+        dynamicRange: {
+          ...state.dynamicRange,
+          lightest: clamp(action.value, 0, 1),
+        },
+      };
+
+    case 'SET_DARKEST':
+      return {
+        ...state,
+        dynamicRange: {
+          ...state.dynamicRange,
+          darkest: clamp(action.value, 0, 1),
+        },
+      };
+
+    // Global hue grading actions
+    case 'SET_GLOBAL_GRADE_LIGHT_STRENGTH':
+      return {
+        ...state,
+        globalHueGrading: {
+          ...state.globalHueGrading,
+          light: { ...state.globalHueGrading.light, strength: action.strength },
+        },
+      };
+
+    case 'SET_GLOBAL_GRADE_LIGHT_HUE':
+      return {
+        ...state,
+        globalHueGrading: {
+          ...state.globalHueGrading,
+          light: { ...state.globalHueGrading.light, hue: wrapHue(action.hue) },
+        },
+      };
+
+    case 'SET_GLOBAL_GRADE_DARK_STRENGTH':
+      return {
+        ...state,
+        globalHueGrading: {
+          ...state.globalHueGrading,
+          dark: { ...state.globalHueGrading.dark, strength: action.strength },
+        },
+      };
+
+    case 'SET_GLOBAL_GRADE_DARK_HUE':
+      return {
+        ...state,
+        globalHueGrading: {
+          ...state.globalHueGrading,
+          dark: { ...state.globalHueGrading.dark, hue: wrapHue(action.hue) },
+        },
+      };
+
+    // Preview actions
+    case 'SET_PREVIEW_MODE':
+      return {
+        ...state,
+        preview: { ...state.preview, mode: action.mode },
+      };
+
+    case 'SET_PREVIEW_THEME':
+      return {
+        ...state,
+        preview: { ...state.preview, theme: action.theme },
+      };
+
+    // Control actions
+    case 'RESET':
+      return DEFAULT_CONFIGURATOR_STATE;
+
+    case 'LOAD_STATE':
+      return action.state;
+
+    default:
+      return state;
+  }
+}

package/src/types.ts

@@ -0,0 +1,37 @@
+import type { DesaturationStrength, HueGradingStrength } from 'newtone';
+import type { ColorMode, ThemeName } from '@newtonedev/components';
+
+/** Per-palette state in the configurator (human-readable, traditional hues) */
+export interface PaletteState {
+  readonly name: string;
+  readonly hue: number;                                   // Traditional HSL hue [0, 359]
+  readonly saturation: number;                            // [0, 100]
+  readonly desaturationStrength: DesaturationStrength;    // 'none' | 'low' | 'medium' | 'hard'
+  readonly desaturationDirection: 'light' | 'dark';
+  readonly hueGradeStrength: HueGradingStrength;          // 'none' | 'low' | 'medium' | 'hard'
+  readonly hueGradeHue: number;                           // Traditional HSL hue [0, 359]
+  readonly hueGradeDirection: 'light' | 'dark';
+}
+
+/** Global hue grading endpoint state */
+export interface HueGradingEndpointState {
+  readonly strength: HueGradingStrength;
+  readonly hue: number;                                   // Traditional HSL hue [0, 359]
+}
+
+/** Complete configurator state */
+export interface ConfiguratorState {
+  readonly palettes: readonly PaletteState[];
+  readonly dynamicRange: {
+    readonly lightest: number;                             // [0, 1]
+    readonly darkest: number;                              // [0, 1]
+  };
+  readonly globalHueGrading: {
+    readonly light: HueGradingEndpointState;
+    readonly dark: HueGradingEndpointState;
+  };
+  readonly preview: {
+    readonly mode: ColorMode;
+    readonly theme: ThemeName;
+  };
+}