@newtonedev/configurator 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -1,13 +1,13 @@
 'use strict';
 
-var React3 = require('react');
+var React = require('react');
 var reactNative = require('react-native');
 var components = require('@newtonedev/components');
 var newtone = require('newtone');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React__default = /*#__PURE__*/_interopDefault(React);
 
 // src/Configurator.tsx
 
@@ -76,6 +76,42 @@ var DEFAULT_CONFIGURATOR_STATE = {
   preview: {
     mode: "light",
     theme: "neutral"
+  },
+  spacing: {
+    preset: "md"
+    // Medium (8px base): default/balanced spacing
+  },
+  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
   }
 };
 
@@ -142,6 +178,52 @@ function configuratorReducer(state, action) {
           hueGradeDirection: action.direction
         })
       };
+    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: void 0
+        })
+      };
+    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: void 0
+        })
+      };
+    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 {
@@ -192,6 +274,125 @@ function configuratorReducer(state, action) {
           dark: { ...state.globalHueGrading.dark, hue: wrapHue(action.hue) }
         }
       };
+    // Spacing actions
+    case "SET_SPACING_PRESET":
+      return {
+        ...state,
+        spacing: {
+          preset: action.preset
+        }
+      };
+    // 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 {
@@ -245,6 +446,57 @@ function traditionalHueToOklch(hue) {
 }
 
 // src/bridge/toThemeConfig.ts
+var SPACING_PRESET_TO_BASE = {
+  xs: 6,
+  // Extra Small: compact/dense UI
+  sm: 7,
+  // Small: tighter spacing
+  md: 8,
+  // Medium: default/balanced
+  lg: 9,
+  // Large: more spacious
+  xl: 10
+  // Extra Large: maximum spacing
+};
+function roundnessToMultiplier(intensity) {
+  return intensity * 2;
+}
+function computeTypographyScale(baseSize, ratio) {
+  return {
+    xs: Math.round(baseSize / ratio ** 2),
+    sm: Math.round(baseSize / ratio),
+    base: baseSize,
+    md: Math.round(baseSize * ratio),
+    lg: Math.round(baseSize * ratio ** 2),
+    xl: Math.round(baseSize * ratio ** 3),
+    xxl: Math.round(baseSize * ratio ** 4)
+  };
+}
+var DEFAULT_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'
+  }
+};
+var DEFAULT_ICONS = {
+  variant: "rounded",
+  // Material Design 3 aesthetic
+  weight: 400,
+  // Normal weight
+  autoGrade: true
+  // Enable mode-aware grade
+};
 function toThemeConfig(state) {
   const palettes = state.palettes.map((p) => {
     const oklchHue = traditionalHueToOklch(p.hue);
@@ -254,7 +506,14 @@ function toThemeConfig(state) {
       strength: p.hueGradeStrength,
       direction: p.hueGradeDirection
     } : void 0;
-    return { hue: oklchHue, saturation: p.saturation, desaturation, paletteHueGrading };
+    return {
+      hue: oklchHue,
+      saturation: p.saturation,
+      desaturation,
+      paletteHueGrading,
+      ...p.keyColor !== void 0 ? { keyNormalizedValue: p.keyColor } : {},
+      ...p.keyColorDark !== void 0 ? { keyNormalizedValueDark: p.keyColorDark } : {}
+    };
   });
   const light = state.globalHueGrading.light.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.light.hue), strength: state.globalHueGrading.light.strength } : void 0;
   const dark = state.globalHueGrading.dark.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.dark.hue), strength: state.globalHueGrading.dark.strength } : void 0;
@@ -264,6 +523,8 @@ function toThemeConfig(state) {
     darkest: state.dynamicRange.darkest,
     ...hueGrading ? { hueGrading } : {}
   };
+  const spacingBase = SPACING_PRESET_TO_BASE[state.spacing?.preset ?? "md"];
+  const radiusMultiplier = roundnessToMultiplier(state.roundness?.intensity ?? 0.5);
   return {
     colorSystem: { dynamicRange, palettes },
     themes: {
@@ -274,21 +535,56 @@ function toThemeConfig(state) {
     },
     elevation: {
       offsets: [-0.02, 0, 0.04]
-    }
+    },
+    spacing: {
+      "00": Math.round(spacingBase * 0),
+      // Always 0
+      "02": Math.round(spacingBase * 0.25),
+      "04": Math.round(spacingBase * 0.5),
+      "06": Math.round(spacingBase * 0.75),
+      "08": Math.round(spacingBase * 1),
+      // Equals base
+      "10": Math.round(spacingBase * 1.25),
+      "12": Math.round(spacingBase * 1.5),
+      "16": Math.round(spacingBase * 2),
+      "20": Math.round(spacingBase * 2.5),
+      "24": Math.round(spacingBase * 3),
+      "32": Math.round(spacingBase * 4),
+      "40": Math.round(spacingBase * 5),
+      "48": Math.round(spacingBase * 6)
+    },
+    radius: {
+      none: 0,
+      sm: Math.round(4 * radiusMultiplier),
+      md: Math.round(6 * radiusMultiplier),
+      lg: Math.round(8 * radiusMultiplier),
+      xl: Math.round(12 * radiusMultiplier),
+      pill: 999
+    },
+    typography: {
+      fonts: state.typography?.fonts ?? DEFAULT_FONTS,
+      scale: computeTypographyScale(
+        state.typography?.scale.baseSize ?? 16,
+        state.typography?.scale.ratio ?? 1.25
+      ),
+      lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
+      fontWeight: { regular: 400, medium: 500, semibold: 600, bold: 700 }
+    },
+    icons: state.icons ?? DEFAULT_ICONS
   };
 }
 
 // src/hooks/useConfigurator.ts
 function useConfigurator(initialState) {
   const mergedInitial = initialState ? { ...DEFAULT_CONFIGURATOR_STATE, ...initialState } : DEFAULT_CONFIGURATOR_STATE;
-  const [state, dispatch] = React3.useReducer(configuratorReducer, mergedInitial);
-  const themeConfig = React3.useMemo(() => toThemeConfig(state), [state]);
-  const reset = React3.useCallback(() => dispatch({ type: "RESET" }), []);
+  const [state, dispatch] = React.useReducer(configuratorReducer, mergedInitial);
+  const themeConfig = React.useMemo(() => toThemeConfig(state), [state]);
+  const reset = React.useCallback(() => dispatch({ type: "RESET" }), []);
   return { state, dispatch, themeConfig, reset };
 }
 var PREVIEW_STEPS = 26;
 function usePreviewColors(state) {
-  return React3.useMemo(() => {
+  return React.useMemo(() => {
     const light = state.globalHueGrading.light.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.light.hue), strength: state.globalHueGrading.light.strength } : void 0;
     const dark = state.globalHueGrading.dark.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.dark.hue), strength: state.globalHueGrading.dark.strength } : void 0;
     const hueGrading = light || dark ? { light, dark } : void 0;
@@ -315,6 +611,105 @@ var SEMANTIC_HUE_RANGES = {
   4: { min: 345, max: 375 }
   // Error (reds, wraps 0°)
 };
+function useWcagValidation(state, paletteIndex) {
+  return React.useMemo(() => {
+    const palette = state.palettes[paletteIndex];
+    const neutral = state.palettes[0];
+    if (!palette || !neutral) {
+      return { keyColorContrast: null, passesAA: true, passesAALargeText: true, autoNormalizedValue: 0.5 };
+    }
+    const mode = state.preview.mode;
+    const light = state.globalHueGrading.light.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.light.hue), strength: state.globalHueGrading.light.strength } : void 0;
+    const dark = state.globalHueGrading.dark.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.dark.hue), strength: state.globalHueGrading.dark.strength } : void 0;
+    const hueGrading = light || dark ? { light, dark } : void 0;
+    const dynamicRange = {
+      lightest: state.dynamicRange.lightest,
+      darkest: state.dynamicRange.darkest,
+      ...hueGrading ? { hueGrading } : {}
+    };
+    const neutralOklchHue = traditionalHueToOklch(neutral.hue);
+    const neutralDesat = neutral.desaturationStrength !== "none" ? { direction: neutral.desaturationDirection, strength: neutral.desaturationStrength } : void 0;
+    const neutralPhg = neutral.hueGradeStrength !== "none" ? { hue: traditionalHueToOklch(neutral.hueGradeHue), strength: neutral.hueGradeStrength, direction: neutral.hueGradeDirection } : void 0;
+    const backgroundNv = mode === "light" ? 0.95 : 0.1;
+    const background = newtone.getColor(neutralOklchHue, neutral.saturation, dynamicRange, backgroundNv, neutralDesat, neutralPhg);
+    const paletteOklchHue = traditionalHueToOklch(palette.hue);
+    const effectiveTextMode = mode === "light" ? "light" : "dark";
+    const paletteDesat = palette.desaturationStrength !== "none" ? { direction: palette.desaturationDirection, strength: palette.desaturationStrength } : void 0;
+    const palettePhg = palette.hueGradeStrength !== "none" ? { hue: traditionalHueToOklch(palette.hueGradeHue), strength: palette.hueGradeStrength, direction: palette.hueGradeDirection } : void 0;
+    const autoColor = newtone.getColorByContrast(
+      paletteOklchHue,
+      palette.saturation,
+      dynamicRange,
+      4.5,
+      effectiveTextMode,
+      paletteDesat,
+      palettePhg,
+      background
+    );
+    const autoNormalizedValue = newtone.lightnessToNormalizedValue(dynamicRange, autoColor.oklch.L);
+    const effectiveKeyColor = mode === "dark" ? palette.keyColorDark : palette.keyColor;
+    if (effectiveKeyColor === void 0) {
+      return { keyColorContrast: null, passesAA: true, passesAALargeText: true, autoNormalizedValue };
+    }
+    const keyColor = newtone.getColor(
+      paletteOklchHue,
+      palette.saturation,
+      dynamicRange,
+      effectiveKeyColor,
+      paletteDesat,
+      palettePhg
+    );
+    const contrast = newtone.getWcagContrastRatio(keyColor.srgb, background.srgb);
+    return {
+      keyColorContrast: contrast,
+      passesAA: contrast >= 4.5,
+      passesAALargeText: contrast >= 3,
+      autoNormalizedValue
+    };
+  }, [state, paletteIndex]);
+}
+var ACHROMATIC_THRESHOLD = 5e-3;
+var traditionalHueLut = null;
+function buildTraditionalHueLut() {
+  const lut = new Array(360);
+  for (let h = 0; h < 360; h++) {
+    lut[h] = traditionalHueToOklch(h);
+  }
+  return lut;
+}
+function oklchHueToTraditional(oklchHue) {
+  if (!traditionalHueLut) {
+    traditionalHueLut = buildTraditionalHueLut();
+  }
+  const target = (oklchHue % 360 + 360) % 360;
+  let bestHue = 0;
+  let bestDelta = Infinity;
+  for (let h = 0; h < 360; h++) {
+    const raw = Math.abs(traditionalHueLut[h] - target);
+    const delta = Math.min(raw, 360 - raw);
+    if (delta < bestDelta) {
+      bestDelta = delta;
+      bestHue = h;
+    }
+  }
+  return bestHue;
+}
+function hexToPaletteParams(hex, dynamicRange) {
+  const cleaned = hex.startsWith("#") ? hex.slice(1) : hex;
+  if (!/^[0-9a-fA-F]{3}$/.test(cleaned) && !/^[0-9a-fA-F]{6}$/.test(cleaned)) {
+    return null;
+  }
+  const srgb = newtone.hexToSrgb(hex);
+  const oklch = newtone.srgbToOklch(srgb);
+  const normalizedValue = newtone.lightnessToNormalizedValue(dynamicRange, oklch.L);
+  if (oklch.C < ACHROMATIC_THRESHOLD) {
+    return { hue: 0, saturation: 0, normalizedValue };
+  }
+  const hue = oklchHueToTraditional(oklch.h);
+  const maxChroma = newtone.findMaxChromaInGamut(oklch.L, oklch.h);
+  const saturation = maxChroma > 0 ? Math.min(100, Math.round(oklch.C / maxChroma * 100)) : 0;
+  return { hue, saturation, normalizedValue };
+}
 
 // src/panels/PalettePanel.tsx
 var STRENGTH_OPTIONS = [
@@ -323,16 +718,124 @@ var STRENGTH_OPTIONS = [
   { label: "Medium", value: "medium" },
   { label: "Hard", value: "hard" }
 ];
-function PalettePanel({ palette, index, dispatch, previewColors }) {
+function getHexAtNv(previewColors, nv) {
+  const idx = Math.round((1 - nv) * (previewColors.length - 1));
+  const clamped = Math.max(0, Math.min(previewColors.length - 1, idx));
+  return newtone.srgbToHex(previewColors[clamped].srgb);
+}
+function PalettePanel({ palette, index, dispatch, previewColors, state }) {
   const tokens = components.useTokens(1);
   const hueRange = SEMANTIC_HUE_RANGES[index];
-  return /* @__PURE__ */ React3__default.default.createElement(components.Card, { elevation: 1, style: styles.container }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, palette.name), previewColors && /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React3__default.default.createElement(
+  const isNeutral = index === 0;
+  const mode = state.preview.mode;
+  const effectiveKeyColor = mode === "dark" ? palette.keyColorDark : palette.keyColor;
+  const setKeyColorAction = mode === "dark" ? "SET_PALETTE_KEY_COLOR_DARK" : "SET_PALETTE_KEY_COLOR";
+  const clearKeyColorAction = mode === "dark" ? "CLEAR_PALETTE_KEY_COLOR_DARK" : "CLEAR_PALETTE_KEY_COLOR";
+  const hexActionType = mode === "dark" ? "SET_PALETTE_FROM_HEX_DARK" : "SET_PALETTE_FROM_HEX";
+  const wcag = useWcagValidation(state, index);
+  const [hexText, setHexText] = React__default.default.useState("");
+  const [hexError, setHexError] = React__default.default.useState("");
+  const [isEditingHex, setIsEditingHex] = React__default.default.useState(false);
+  const [isHexUserSet, setIsHexUserSet] = React__default.default.useState(false);
+  React__default.default.useEffect(() => {
+    setHexText("");
+    setHexError("");
+    setIsEditingHex(false);
+    setIsHexUserSet(false);
+  }, [mode]);
+  const displayedHex = React__default.default.useMemo(() => {
+    if (!previewColors || previewColors.length === 0) return "";
+    const nv = effectiveKeyColor ?? wcag.autoNormalizedValue;
+    return getHexAtNv(previewColors, nv);
+  }, [previewColors, effectiveKeyColor, wcag.autoNormalizedValue]);
+  React__default.default.useEffect(() => {
+    if (!isEditingHex && !isHexUserSet) {
+      setHexText(displayedHex);
+    }
+  }, [displayedHex, isEditingHex, isHexUserSet]);
+  const dynamicRange = React__default.default.useMemo(() => {
+    const light = state.globalHueGrading.light.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.light.hue), strength: state.globalHueGrading.light.strength } : void 0;
+    const dark = state.globalHueGrading.dark.strength !== "none" ? { hue: traditionalHueToOklch(state.globalHueGrading.dark.hue), strength: state.globalHueGrading.dark.strength } : void 0;
+    const hueGrading = light || dark ? { light, dark } : void 0;
+    return {
+      lightest: state.dynamicRange.lightest,
+      darkest: state.dynamicRange.darkest,
+      ...hueGrading ? { hueGrading } : {}
+    };
+  }, [state.dynamicRange, state.globalHueGrading]);
+  const handleHexSubmit = React__default.default.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__default.default.useCallback(() => {
+    dispatch({ type: clearKeyColorAction, index });
+    setHexError("");
+    setIsHexUserSet(false);
+  }, [dispatch, index, clearKeyColorAction]);
+  const wcagWarning = React__default.default.useMemo(() => {
+    if (effectiveKeyColor === void 0 || wcag.keyColorContrast === null) return void 0;
+    if (wcag.passesAA) return void 0;
+    const ratio = wcag.keyColorContrast.toFixed(1);
+    if (wcag.passesAALargeText) {
+      return `Contrast ${ratio}:1 \u2014 passes large text (AA) but fails normal text (requires 4.5:1)`;
+    }
+    return `Contrast ${ratio}:1 \u2014 fails WCAG AA (requires 4.5:1 for normal text, 3:1 for large text)`;
+  }, [effectiveKeyColor, wcag]);
+  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, palette.name), !isNeutral && previewColors && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
+    components.ColorScaleSlider,
+    {
+      colors: previewColors,
+      value: effectiveKeyColor ?? wcag.autoNormalizedValue,
+      onValueChange: (nv) => {
+        setIsHexUserSet(false);
+        dispatch({ type: setKeyColorAction, index, normalizedValue: nv });
+      },
+      label: "Key Color",
+      warning: wcagWarning,
+      trimEnds: true,
+      snap: true,
+      animateValue: true
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.hexRow }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.hexInputContainer }, /* @__PURE__ */ React__default.default.createElement(
+    components.TextInput,
+    {
+      label: "Hex",
+      value: hexText,
+      onChangeText: (text) => {
+        setIsEditingHex(true);
+        setHexText(text);
+        setHexError("");
+      },
+      onBlur: handleHexSubmit,
+      onSubmitEditing: handleHexSubmit,
+      placeholder: "#000000"
+    }
+  )), effectiveKeyColor !== void 0 && /* @__PURE__ */ React__default.default.createElement(reactNative.Pressable, { onPress: handleClearKeyColor, style: styles.autoButton }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.autoText, { color: newtone.srgbToHex(tokens.interactive.srgb) }] }, "Auto"))), hexError !== "" && /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles.errorText, { color: newtone.srgbToHex(tokens.error.srgb) }] }, hexError)), isNeutral && previewColors && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React__default.default.createElement(
     reactNative.View,
     {
       key: i,
       style: [styles.inlineSwatch, { backgroundColor: newtone.srgbToHex(color.srgb) }]
     }
-  ))), /* @__PURE__ */ React3__default.default.createElement(
+  ))), /* @__PURE__ */ React__default.default.createElement(
     components.HueSlider,
     {
       value: palette.hue,
@@ -341,7 +844,7 @@ function PalettePanel({ palette, index, dispatch, previewColors }) {
       showValue: true,
       ...hueRange ? { min: hueRange.min, max: hueRange.max } : {}
     }
-  ), /* @__PURE__ */ React3__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(
     components.Slider,
     {
       value: palette.saturation,
@@ -351,7 +854,7 @@ function PalettePanel({ palette, index, dispatch, previewColors }) {
       label: "Saturation",
       showValue: true
     }
-  ), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Select,
     {
       options: STRENGTH_OPTIONS,
@@ -359,14 +862,14 @@ function PalettePanel({ palette, index, dispatch, previewColors }) {
       onValueChange: (strength) => dispatch({ type: "SET_PALETTE_DESAT_STRENGTH", index, strength }),
       label: "Desaturation"
     }
-  )), palette.desaturationStrength !== "none" && /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.toggleContainer }, /* @__PURE__ */ React3__default.default.createElement(
+  )), palette.desaturationStrength !== "none" && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.toggleContainer }, /* @__PURE__ */ React__default.default.createElement(
     components.Toggle,
     {
       value: palette.desaturationDirection === "dark",
       onValueChange: (v) => dispatch({ type: "SET_PALETTE_DESAT_DIRECTION", index, direction: v ? "dark" : "light" }),
       label: "Invert"
     }
-  ))), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  ))), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Select,
     {
       options: STRENGTH_OPTIONS,
@@ -374,14 +877,14 @@ function PalettePanel({ palette, index, dispatch, previewColors }) {
       onValueChange: (strength) => dispatch({ type: "SET_PALETTE_HUE_GRADE_STRENGTH", index, strength }),
       label: "Hue Grading"
     }
-  )), palette.hueGradeStrength !== "none" && /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles.toggleContainer }, /* @__PURE__ */ React3__default.default.createElement(
+  )), palette.hueGradeStrength !== "none" && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles.toggleContainer }, /* @__PURE__ */ React__default.default.createElement(
     components.Toggle,
     {
       value: palette.hueGradeDirection === "dark",
       onValueChange: (v) => dispatch({ type: "SET_PALETTE_HUE_GRADE_DIRECTION", index, direction: v ? "dark" : "light" }),
       label: "Invert"
     }
-  ))), palette.hueGradeStrength !== "none" && /* @__PURE__ */ React3__default.default.createElement(
+  ))), palette.hueGradeStrength !== "none" && /* @__PURE__ */ React__default.default.createElement(
     components.HueSlider,
     {
       value: palette.hueGradeHue,
@@ -420,6 +923,25 @@ var styles = reactNative.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"
   }
 });
 var STRENGTH_OPTIONS2 = [
@@ -430,7 +952,7 @@ var STRENGTH_OPTIONS2 = [
 ];
 function GlobalPanel({ state, dispatch }) {
   const tokens = components.useTokens(1);
-  return /* @__PURE__ */ React3__default.default.createElement(components.Card, { elevation: 1, style: styles2.container }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Dynamic Range"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles2.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles2.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Dynamic Range"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Slider,
     {
       value: Math.round(state.dynamicRange.lightest * 100),
@@ -440,7 +962,7 @@ function GlobalPanel({ state, dispatch }) {
       label: "Lightest",
       showValue: true
     }
-  )), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Slider,
     {
       value: Math.round(state.dynamicRange.darkest * 100),
@@ -450,7 +972,7 @@ function GlobalPanel({ state, dispatch }) {
       label: "Darkest",
       showValue: true
     }
-  ))), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Global Hue Grading \u2014 Light End"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  ))), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Global Hue Grading \u2014 Light End"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Select,
     {
       options: STRENGTH_OPTIONS2,
@@ -458,7 +980,7 @@ function GlobalPanel({ state, dispatch }) {
       onValueChange: (s) => dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_STRENGTH", strength: s }),
       label: "Strength"
     }
-  )), state.globalHueGrading.light.strength !== "none" && /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  )), state.globalHueGrading.light.strength !== "none" && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.HueSlider,
     {
       value: state.globalHueGrading.light.hue,
@@ -466,7 +988,7 @@ function GlobalPanel({ state, dispatch }) {
       label: "Target Hue",
       showValue: true
     }
-  ))), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Global Hue Grading \u2014 Dark End"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  ))), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles2.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Global Hue Grading \u2014 Dark End"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.Select,
     {
       options: STRENGTH_OPTIONS2,
@@ -474,7 +996,7 @@ function GlobalPanel({ state, dispatch }) {
       onValueChange: (s) => dispatch({ type: "SET_GLOBAL_GRADE_DARK_STRENGTH", strength: s }),
       label: "Strength"
     }
-  )), state.globalHueGrading.dark.strength !== "none" && /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React3__default.default.createElement(
+  )), state.globalHueGrading.dark.strength !== "none" && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles2.flex }, /* @__PURE__ */ React__default.default.createElement(
     components.HueSlider,
     {
       value: state.globalHueGrading.dark.hue,
@@ -516,7 +1038,7 @@ function PreviewCard({
   dispatch
 }) {
   const tokens = components.useTokens(1);
-  return /* @__PURE__ */ React3__default.default.createElement(components.Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles3.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles3.controls }, /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles3.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles3.controls }, /* @__PURE__ */ React__default.default.createElement(
     components.Select,
     {
       options: THEME_OPTIONS,
@@ -524,11 +1046,11 @@ function PreviewCard({
       onValueChange: (t) => dispatch({ type: "SET_PREVIEW_THEME", theme: t }),
       label: "Theme"
     }
-  )), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: previewStyles.wrapper }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React3__default.default.createElement(components.Button, { variant: "primary", size: "sm" }, "Primary"), /* @__PURE__ */ React3__default.default.createElement(components.Button, { variant: "secondary", size: "sm" }, "Secondary"), /* @__PURE__ */ React3__default.default.createElement(components.Button, { variant: "ghost", size: "sm" }, "Ghost"), /* @__PURE__ */ React3__default.default.createElement(components.Button, { variant: "outline", size: "sm" }, "Outline")), /* @__PURE__ */ React3__default.default.createElement(components.TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
-  } }), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.success.srgb) }] }), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.warning.srgb) }] }), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.error.srgb) }] }), /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.wrapper }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "primary", size: "sm" }, "Primary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "secondary", size: "sm" }, "Secondary"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "ghost", size: "sm" }, "Ghost"), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "outline", size: "sm" }, "Outline")), /* @__PURE__ */ React__default.default.createElement(components.TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
+  } }), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: previewStyles.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.success.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.warning.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [previewStyles.statusDot, { backgroundColor: newtone.srgbToHex(tokens.error.srgb) }] }), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [previewStyles.statusText, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
 }
 function PreviewPanel({ state, dispatch, themeConfig }) {
-  return /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(
     components.NewtoneProvider,
     {
       key: `${state.preview.mode}-${state.preview.theme}`,
@@ -536,7 +1058,7 @@ function PreviewPanel({ state, dispatch, themeConfig }) {
       initialMode: state.preview.mode,
       initialTheme: state.preview.theme
     },
-    /* @__PURE__ */ React3__default.default.createElement(PreviewCard, { state, dispatch })
+    /* @__PURE__ */ React__default.default.createElement(PreviewCard, { state, dispatch })
   );
 }
 var styles3 = reactNative.StyleSheet.create({
@@ -583,7 +1105,11 @@ function toCSS(state) {
       mode,
       config.themes.neutral,
       1,
-      config.elevation.offsets
+      config.elevation.offsets,
+      config.spacing,
+      config.radius,
+      config.typography,
+      config.icons
     );
     const selector = mode === "light" ? ":root" : '[data-theme="dark"]';
     css += `${selector} {
@@ -632,12 +1158,12 @@ function toJSON(state) {
 // src/panels/ExportPanel.tsx
 function ExportPanel({ state }) {
   const tokens = components.useTokens(1);
-  const [format, setFormat] = React3.useState("css");
-  const [copied, setCopied] = React3.useState(false);
-  const output = React3.useMemo(() => {
+  const [format, setFormat] = React.useState("css");
+  const [copied, setCopied] = React.useState(false);
+  const output = React.useMemo(() => {
     return format === "css" ? toCSS(state) : toJSON(state);
   }, [state, format]);
-  const handleCopy = React3.useCallback(() => {
+  const handleCopy = React.useCallback(() => {
     if (typeof navigator !== "undefined" && navigator.clipboard) {
       navigator.clipboard.writeText(output).then(() => {
         setCopied(true);
@@ -645,7 +1171,7 @@ function ExportPanel({ state }) {
       });
     }
   }, [output]);
-  return /* @__PURE__ */ React3__default.default.createElement(components.Card, { elevation: 1, style: styles4.container }, /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [styles4.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Export"), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles4.tabs }, /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles4.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles4.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Export"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles4.tabs }, /* @__PURE__ */ React__default.default.createElement(
     components.Button,
     {
       variant: format === "css" ? "primary" : "ghost",
@@ -653,7 +1179,7 @@ function ExportPanel({ state }) {
       onPress: () => setFormat("css")
     },
     "CSS Variables"
-  ), /* @__PURE__ */ React3__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(
     components.Button,
     {
       variant: format === "json" ? "primary" : "ghost",
@@ -661,7 +1187,7 @@ function ExportPanel({ state }) {
       onPress: () => setFormat("json")
     },
     "JSON"
-  ), /* @__PURE__ */ React3__default.default.createElement(components.Button, { variant: "outline", size: "sm", onPress: handleCopy }, copied ? "Copied!" : "Copy")), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles4.codeBlock, { backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React3__default.default.createElement(
+  ), /* @__PURE__ */ React__default.default.createElement(components.Button, { variant: "outline", size: "sm", onPress: handleCopy }, copied ? "Copied!" : "Copy")), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [styles4.codeBlock, { backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React__default.default.createElement(
     reactNative.Text,
     {
       style: [styles4.code, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }],
@@ -695,6 +1221,113 @@ var styles4 = reactNative.StyleSheet.create({
     lineHeight: 16
   }
 });
+var ICON_VARIANT_OPTIONS = [
+  { label: "Outlined", value: "outlined" },
+  { label: "Rounded", value: "rounded" },
+  { label: "Sharp", value: "sharp" }
+];
+var ICON_WEIGHT_OPTIONS = [
+  { label: "100", value: "100" },
+  { label: "200", value: "200" },
+  { label: "300", value: "300" },
+  { label: "400", value: "400" },
+  { label: "500", value: "500" },
+  { label: "600", value: "600" },
+  { label: "700", value: "700" }
+];
+function DesignPanel({ state, dispatch }) {
+  const tokens = components.useTokens(1);
+  const spacingPreset = state.spacing?.preset ?? "md";
+  const intensity = state.roundness?.intensity ?? 0.5;
+  const baseSize = state.typography?.scale.baseSize ?? 16;
+  const ratio = state.typography?.scale.ratio ?? 1.25;
+  const variant = state.icons?.variant ?? "rounded";
+  const weight = state.icons?.weight ?? 400;
+  return /* @__PURE__ */ React__default.default.createElement(components.Card, { elevation: 1, style: styles5.container }, /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.title, { color: newtone.srgbToHex(tokens.textPrimary.srgb) }] }, "Design System"), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Spacing"), /* @__PURE__ */ React__default.default.createElement(
+    components.Select,
+    {
+      value: spacingPreset,
+      onValueChange: (preset) => dispatch({ type: "SET_SPACING_PRESET", preset }),
+      options: [
+        { value: "xs", label: "Extra Small" },
+        { value: "sm", label: "Small" },
+        { value: "md", label: "Medium" },
+        { value: "lg", label: "Large" },
+        { value: "xl", label: "Extra Large" }
+      ],
+      label: "Preset"
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Roundness"), /* @__PURE__ */ React__default.default.createElement(
+    components.Slider,
+    {
+      value: Math.round(intensity * 100),
+      onValueChange: (v) => dispatch({ type: "SET_ROUNDNESS_INTENSITY", intensity: v / 100 }),
+      min: 0,
+      max: 100,
+      label: "Intensity",
+      showValue: true
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Typography"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
+    components.Slider,
+    {
+      value: baseSize,
+      onValueChange: (v) => dispatch({ type: "SET_TYPOGRAPHY_BASE_SIZE", baseSize: v }),
+      min: 12,
+      max: 24,
+      step: 1,
+      label: "Base Size",
+      showValue: true
+    }
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
+    components.Slider,
+    {
+      value: Math.round(ratio * 100),
+      onValueChange: (v) => dispatch({ type: "SET_TYPOGRAPHY_RATIO", ratio: v / 100 }),
+      min: 110,
+      max: 150,
+      step: 5,
+      label: "Scale Ratio",
+      showValue: true
+    }
+  ))), /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [styles5.subtitle, { color: newtone.srgbToHex(tokens.textSecondary.srgb) }] }, "Icons"), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.row }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
+    components.Select,
+    {
+      options: ICON_VARIANT_OPTIONS,
+      value: variant,
+      onValueChange: (v) => dispatch({ type: "SET_ICON_VARIANT", variant: v }),
+      label: "Variant"
+    }
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles5.flex }, /* @__PURE__ */ React__default.default.createElement(
+    components.Select,
+    {
+      options: ICON_WEIGHT_OPTIONS,
+      value: weight.toString(),
+      onValueChange: (v) => dispatch({ type: "SET_ICON_WEIGHT", weight: parseInt(v) }),
+      label: "Weight"
+    }
+  ))));
+}
+var styles5 = reactNative.StyleSheet.create({
+  container: {
+    gap: 12
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  subtitle: {
+    fontSize: 13,
+    fontWeight: "600",
+    marginTop: 4
+  },
+  row: {
+    flexDirection: "row",
+    gap: 12
+  },
+  flex: {
+    flex: 1
+  }
+});
 
 // src/Configurator.tsx
 function Configurator({
@@ -706,20 +1339,20 @@ function Configurator({
   const { state, dispatch, themeConfig, reset } = useConfigurator(initialState);
   const tokens = components.useTokens(1);
   const { setMode } = components.useNewtoneTheme();
-  const isInitialRender = React3.useRef(true);
-  const [activePaletteIndex, setActivePaletteIndex] = React3.useState(0);
+  const isInitialRender = React.useRef(true);
+  const [activePaletteIndex, setActivePaletteIndex] = React.useState(0);
   const previews = usePreviewColors(state);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     setMode(state.preview.mode);
   }, []);
-  React3.useEffect(() => {
+  React.useEffect(() => {
     if (isInitialRender.current) {
       isInitialRender.current = false;
       return;
     }
     onChange?.(state, themeConfig);
   }, [state, themeConfig, onChange]);
-  return /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: [styles5.container, { backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles5.topBar }, /* @__PURE__ */ React3__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: [styles6.container, { backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topBar }, /* @__PURE__ */ React__default.default.createElement(
     components.Toggle,
     {
       value: state.preview.mode === "dark",
@@ -730,21 +1363,21 @@ function Configurator({
       },
       label: "Dark Mode"
     }
-  )), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles5.topRow }, /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles5.topRowPanel }, /* @__PURE__ */ React3__default.default.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles5.topRowPanel }, /* @__PURE__ */ React3__default.default.createElement(PreviewPanel, { state, dispatch, themeConfig }))), /* @__PURE__ */ React3__default.default.createElement(reactNative.View, { style: styles5.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React3__default.default.createElement(
+  )), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRow }, /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRowPanel }, /* @__PURE__ */ React__default.default.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.topRowPanel }, /* @__PURE__ */ React__default.default.createElement(PreviewPanel, { state, dispatch, themeConfig }))), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.designRow }, /* @__PURE__ */ React__default.default.createElement(DesignPanel, { state, dispatch })), /* @__PURE__ */ React__default.default.createElement(reactNative.View, { style: styles6.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React__default.default.createElement(
     reactNative.Pressable,
     {
       key: index,
       onPress: () => setActivePaletteIndex(index),
       style: [
-        styles5.tab,
+        styles6.tab,
         {
           backgroundColor: index === activePaletteIndex ? newtone.srgbToHex(tokens.background.srgb) : "transparent",
           borderColor: index === activePaletteIndex ? newtone.srgbToHex(tokens.border.srgb) : "transparent"
         }
       ]
     },
-    /* @__PURE__ */ React3__default.default.createElement(reactNative.Text, { style: [
-      styles5.tabText,
+    /* @__PURE__ */ React__default.default.createElement(reactNative.Text, { style: [
+      styles6.tabText,
       {
         color: newtone.srgbToHex(
           index === activePaletteIndex ? tokens.textPrimary.srgb : tokens.textSecondary.srgb
@@ -752,15 +1385,16 @@ function Configurator({
         fontWeight: index === activePaletteIndex ? "700" : "500"
       }
     ] }, palette.name)
-  ))), /* @__PURE__ */ React3__default.default.createElement(
+  ))), /* @__PURE__ */ React__default.default.createElement(
     PalettePanel,
     {
       palette: state.palettes[activePaletteIndex],
       index: activePaletteIndex,
       dispatch,
-      previewColors: previews[activePaletteIndex]
+      previewColors: previews[activePaletteIndex],
+      state
     }
-  ), showExport && /* @__PURE__ */ React3__default.default.createElement(ExportPanel, { state }), /* @__PURE__ */ React3__default.default.createElement(
+  ), showExport && /* @__PURE__ */ React__default.default.createElement(ExportPanel, { state }), /* @__PURE__ */ React__default.default.createElement(
     "button",
     {
       onClick: () => reset(),
@@ -779,7 +1413,7 @@ function Configurator({
     "Reset to Defaults"
   ));
 }
-var styles5 = reactNative.StyleSheet.create({
+var styles6 = reactNative.StyleSheet.create({
   container: {
     borderRadius: 8,
     padding: 16,
@@ -799,6 +1433,9 @@ var styles5 = reactNative.StyleSheet.create({
   topRowPanel: {
     flex: 1
   },
+  designRow: {
+    marginBottom: 4
+  },
   tabBar: {
     flexDirection: "row",
     gap: 4,
@@ -817,11 +1454,15 @@ var styles5 = reactNative.StyleSheet.create({
 
 exports.Configurator = Configurator;
 exports.DEFAULT_CONFIGURATOR_STATE = DEFAULT_CONFIGURATOR_STATE;
+exports.SEMANTIC_HUE_RANGES = SEMANTIC_HUE_RANGES;
+exports.hexToPaletteParams = hexToPaletteParams;
+exports.oklchHueToTraditional = oklchHueToTraditional;
 exports.toCSS = toCSS;
 exports.toJSON = toJSON;
 exports.toThemeConfig = toThemeConfig;
 exports.traditionalHueToOklch = traditionalHueToOklch;
 exports.useConfigurator = useConfigurator;
 exports.usePreviewColors = usePreviewColors;
+exports.useWcagValidation = useWcagValidation;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map