@newtonedev/configurator 0.1.0

package/dist/index.js

@@ -0,0 +1,814 @@
+import React3, { useReducer, useMemo, useCallback, useRef, useState, useEffect } from 'react';
+import { StyleSheet, View, Pressable, Text } from 'react-native';
+import { computeTokens, useTokens, useNewtoneTheme, Toggle, Card, Slider, Select, HueSlider, NewtoneProvider, Button, TextInput } from '@newtonedev/components';
+import { srgbToOklch, generatePreview, srgbToHex } from 'newtone';
+
+// src/Configurator.tsx
+
+// src/state/defaults.ts
+var DEFAULT_CONFIGURATOR_STATE = {
+  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"
+  }
+};
+
+// src/state/reducer.ts
+function updatePalette(palettes, index, update) {
+  if (index < 0 || index >= palettes.length) return palettes;
+  return palettes.map((p, i) => i === index ? { ...p, ...update } : p);
+}
+function clamp(value, min, max) {
+  return Math.max(min, Math.min(max, value));
+}
+function wrapHue(hue) {
+  return (hue % 360 + 360) % 360;
+}
+function configuratorReducer(state, action) {
+  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;
+  }
+}
+function traditionalHueToOklch(hue) {
+  const h = (hue % 360 + 360) % 360;
+  const x = 1 - Math.abs(h / 60 % 2 - 1);
+  let r, g, b;
+  if (h < 60) {
+    r = 1;
+    g = x;
+    b = 0;
+  } else if (h < 120) {
+    r = x;
+    g = 1;
+    b = 0;
+  } else if (h < 180) {
+    r = 0;
+    g = 1;
+    b = x;
+  } else if (h < 240) {
+    r = 0;
+    g = x;
+    b = 1;
+  } else if (h < 300) {
+    r = x;
+    g = 0;
+    b = 1;
+  } else {
+    r = 1;
+    g = 0;
+    b = x;
+  }
+  return srgbToOklch({ r, g, b }).h;
+}
+
+// src/bridge/toThemeConfig.ts
+function toThemeConfig(state) {
+  const palettes = state.palettes.map((p) => {
+    const oklchHue = traditionalHueToOklch(p.hue);
+    const desaturation = p.desaturationStrength !== "none" ? { direction: p.desaturationDirection, strength: p.desaturationStrength } : void 0;
+    const paletteHueGrading = p.hueGradeStrength !== "none" ? {
+      hue: traditionalHueToOklch(p.hueGradeHue),
+      strength: p.hueGradeStrength,
+      direction: p.hueGradeDirection
+    } : void 0;
+    return { hue: oklchHue, saturation: p.saturation, desaturation, paletteHueGrading };
+  });
+  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 } : {}
+  };
+  return {
+    colorSystem: { dynamicRange, palettes },
+    themes: {
+      neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
+      primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
+      secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
+      strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 }
+    },
+    elevation: {
+      offsets: [-0.02, 0, 0.04]
+    }
+  };
+}
+
+// src/hooks/useConfigurator.ts
+function useConfigurator(initialState) {
+  const mergedInitial = initialState ? { ...DEFAULT_CONFIGURATOR_STATE, ...initialState } : DEFAULT_CONFIGURATOR_STATE;
+  const [state, dispatch] = useReducer(configuratorReducer, mergedInitial);
+  const themeConfig = useMemo(() => toThemeConfig(state), [state]);
+  const reset = useCallback(() => dispatch({ type: "RESET" }), []);
+  return { state, dispatch, themeConfig, reset };
+}
+var PREVIEW_STEPS = 26;
+function usePreviewColors(state) {
+  return 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;
+    const dynamicRange = {
+      lightest: state.dynamicRange.lightest,
+      darkest: state.dynamicRange.darkest,
+      ...hueGrading ? { hueGrading } : {}
+    };
+    return state.palettes.map((p) => {
+      const oklchHue = traditionalHueToOklch(p.hue);
+      const desat = p.desaturationStrength !== "none" ? { direction: p.desaturationDirection, strength: p.desaturationStrength } : void 0;
+      const phg = p.hueGradeStrength !== "none" ? { hue: traditionalHueToOklch(p.hueGradeHue), strength: p.hueGradeStrength, direction: p.hueGradeDirection } : void 0;
+      return generatePreview(oklchHue, p.saturation, dynamicRange, PREVIEW_STEPS, desat, phg);
+    });
+  }, [state]);
+}
+
+// src/constants.ts
+var SEMANTIC_HUE_RANGES = {
+  2: { min: 80, max: 160 },
+  // Success (greens)
+  3: { min: 25, max: 55 },
+  // Warning (yellow/orange)
+  4: { min: 345, max: 375 }
+  // Error (reds, wraps 0°)
+};
+
+// src/panels/PalettePanel.tsx
+var STRENGTH_OPTIONS = [
+  { label: "None", value: "none" },
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "Hard", value: "hard" }
+];
+function PalettePanel({ palette, index, dispatch, previewColors }) {
+  const tokens = useTokens(1);
+  const hueRange = SEMANTIC_HUE_RANGES[index];
+  return /* @__PURE__ */ React3.createElement(Card, { elevation: 1, style: styles.container }, /* @__PURE__ */ React3.createElement(Text, { style: [styles.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, palette.name), previewColors && /* @__PURE__ */ React3.createElement(View, { style: styles.inlineSwatches }, previewColors.map((color, i) => /* @__PURE__ */ React3.createElement(
+    View,
+    {
+      key: i,
+      style: [styles.inlineSwatch, { backgroundColor: srgbToHex(color.srgb) }]
+    }
+  ))), /* @__PURE__ */ React3.createElement(
+    HueSlider,
+    {
+      value: palette.hue,
+      onValueChange: (hue) => dispatch({ type: "SET_PALETTE_HUE", index, hue }),
+      label: "Hue",
+      showValue: true,
+      ...hueRange ? { min: hueRange.min, max: hueRange.max } : {}
+    }
+  ), /* @__PURE__ */ React3.createElement(
+    Slider,
+    {
+      value: palette.saturation,
+      onValueChange: (saturation) => dispatch({ type: "SET_PALETTE_SATURATION", index, saturation }),
+      min: 0,
+      max: 100,
+      label: "Saturation",
+      showValue: true
+    }
+  ), /* @__PURE__ */ React3.createElement(View, { style: styles.row }, /* @__PURE__ */ React3.createElement(View, { style: styles.flex }, /* @__PURE__ */ React3.createElement(
+    Select,
+    {
+      options: STRENGTH_OPTIONS,
+      value: palette.desaturationStrength,
+      onValueChange: (strength) => dispatch({ type: "SET_PALETTE_DESAT_STRENGTH", index, strength }),
+      label: "Desaturation"
+    }
+  )), palette.desaturationStrength !== "none" && /* @__PURE__ */ React3.createElement(View, { style: styles.toggleContainer }, /* @__PURE__ */ React3.createElement(
+    Toggle,
+    {
+      value: palette.desaturationDirection === "dark",
+      onValueChange: (v) => dispatch({ type: "SET_PALETTE_DESAT_DIRECTION", index, direction: v ? "dark" : "light" }),
+      label: "Invert"
+    }
+  ))), /* @__PURE__ */ React3.createElement(View, { style: styles.row }, /* @__PURE__ */ React3.createElement(View, { style: styles.flex }, /* @__PURE__ */ React3.createElement(
+    Select,
+    {
+      options: STRENGTH_OPTIONS,
+      value: palette.hueGradeStrength,
+      onValueChange: (strength) => dispatch({ type: "SET_PALETTE_HUE_GRADE_STRENGTH", index, strength }),
+      label: "Hue Grading"
+    }
+  )), palette.hueGradeStrength !== "none" && /* @__PURE__ */ React3.createElement(View, { style: styles.toggleContainer }, /* @__PURE__ */ React3.createElement(
+    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.createElement(
+    HueSlider,
+    {
+      value: palette.hueGradeHue,
+      onValueChange: (hue) => dispatch({ type: "SET_PALETTE_HUE_GRADE_HUE", index, hue }),
+      label: "Grade Target",
+      showValue: true
+    }
+  ));
+}
+var 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
+  }
+});
+var STRENGTH_OPTIONS2 = [
+  { label: "None", value: "none" },
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "Hard", value: "hard" }
+];
+function GlobalPanel({ state, dispatch }) {
+  const tokens = useTokens(1);
+  return /* @__PURE__ */ React3.createElement(Card, { elevation: 1, style: styles2.container }, /* @__PURE__ */ React3.createElement(Text, { style: [styles2.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Dynamic Range"), /* @__PURE__ */ React3.createElement(View, { style: styles2.row }, /* @__PURE__ */ React3.createElement(View, { style: styles2.flex }, /* @__PURE__ */ React3.createElement(
+    Slider,
+    {
+      value: Math.round(state.dynamicRange.lightest * 100),
+      onValueChange: (v) => dispatch({ type: "SET_LIGHTEST", value: v / 100 }),
+      min: 0,
+      max: 100,
+      label: "Lightest",
+      showValue: true
+    }
+  )), /* @__PURE__ */ React3.createElement(View, { style: styles2.flex }, /* @__PURE__ */ React3.createElement(
+    Slider,
+    {
+      value: Math.round(state.dynamicRange.darkest * 100),
+      onValueChange: (v) => dispatch({ type: "SET_DARKEST", value: v / 100 }),
+      min: 0,
+      max: 100,
+      label: "Darkest",
+      showValue: true
+    }
+  ))), /* @__PURE__ */ React3.createElement(Text, { style: [styles2.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Global Hue Grading \u2014 Light End"), /* @__PURE__ */ React3.createElement(View, { style: styles2.row }, /* @__PURE__ */ React3.createElement(View, { style: styles2.flex }, /* @__PURE__ */ React3.createElement(
+    Select,
+    {
+      options: STRENGTH_OPTIONS2,
+      value: state.globalHueGrading.light.strength,
+      onValueChange: (s) => dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_STRENGTH", strength: s }),
+      label: "Strength"
+    }
+  )), state.globalHueGrading.light.strength !== "none" && /* @__PURE__ */ React3.createElement(View, { style: styles2.flex }, /* @__PURE__ */ React3.createElement(
+    HueSlider,
+    {
+      value: state.globalHueGrading.light.hue,
+      onValueChange: (hue) => dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_HUE", hue }),
+      label: "Target Hue",
+      showValue: true
+    }
+  ))), /* @__PURE__ */ React3.createElement(Text, { style: [styles2.subtitle, { color: srgbToHex(tokens.textSecondary.srgb) }] }, "Global Hue Grading \u2014 Dark End"), /* @__PURE__ */ React3.createElement(View, { style: styles2.row }, /* @__PURE__ */ React3.createElement(View, { style: styles2.flex }, /* @__PURE__ */ React3.createElement(
+    Select,
+    {
+      options: STRENGTH_OPTIONS2,
+      value: state.globalHueGrading.dark.strength,
+      onValueChange: (s) => dispatch({ type: "SET_GLOBAL_GRADE_DARK_STRENGTH", strength: s }),
+      label: "Strength"
+    }
+  )), state.globalHueGrading.dark.strength !== "none" && /* @__PURE__ */ React3.createElement(View, { style: styles2.flex }, /* @__PURE__ */ React3.createElement(
+    HueSlider,
+    {
+      value: state.globalHueGrading.dark.hue,
+      onValueChange: (hue) => dispatch({ type: "SET_GLOBAL_GRADE_DARK_HUE", hue }),
+      label: "Target Hue",
+      showValue: true
+    }
+  ))));
+}
+var styles2 = 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
+  }
+});
+var THEME_OPTIONS = [
+  { label: "Neutral", value: "neutral" },
+  { label: "Primary", value: "primary" },
+  { label: "Secondary", value: "secondary" },
+  { label: "Strong", value: "strong" }
+];
+function PreviewCard({
+  state,
+  dispatch
+}) {
+  const tokens = useTokens(1);
+  return /* @__PURE__ */ React3.createElement(Card, { elevation: 1, style: styles3.container }, /* @__PURE__ */ React3.createElement(Text, { style: [styles3.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Component Preview"), /* @__PURE__ */ React3.createElement(View, { style: styles3.controls }, /* @__PURE__ */ React3.createElement(
+    Select,
+    {
+      options: THEME_OPTIONS,
+      value: state.preview.theme,
+      onValueChange: (t) => dispatch({ type: "SET_PREVIEW_THEME", theme: t }),
+      label: "Theme"
+    }
+  )), /* @__PURE__ */ React3.createElement(View, { style: previewStyles.wrapper }, /* @__PURE__ */ React3.createElement(View, { style: previewStyles.row }, /* @__PURE__ */ React3.createElement(Button, { variant: "primary", size: "sm" }, "Primary"), /* @__PURE__ */ React3.createElement(Button, { variant: "secondary", size: "sm" }, "Secondary"), /* @__PURE__ */ React3.createElement(Button, { variant: "ghost", size: "sm" }, "Ghost"), /* @__PURE__ */ React3.createElement(Button, { variant: "outline", size: "sm" }, "Outline")), /* @__PURE__ */ React3.createElement(TextInput, { label: "Sample Input", value: "Hello, Newtone", onChangeText: () => {
+  } }), /* @__PURE__ */ React3.createElement(View, { style: previewStyles.row }, /* @__PURE__ */ React3.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.success.srgb) }] }), /* @__PURE__ */ React3.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Success"), /* @__PURE__ */ React3.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.warning.srgb) }] }), /* @__PURE__ */ React3.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Warning"), /* @__PURE__ */ React3.createElement(View, { style: [previewStyles.statusDot, { backgroundColor: srgbToHex(tokens.error.srgb) }] }), /* @__PURE__ */ React3.createElement(Text, { style: [previewStyles.statusText, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Error"))));
+}
+function PreviewPanel({ state, dispatch, themeConfig }) {
+  return /* @__PURE__ */ React3.createElement(
+    NewtoneProvider,
+    {
+      key: `${state.preview.mode}-${state.preview.theme}`,
+      config: themeConfig,
+      initialMode: state.preview.mode,
+      initialTheme: state.preview.theme
+    },
+    /* @__PURE__ */ React3.createElement(PreviewCard, { state, dispatch })
+  );
+}
+var styles3 = StyleSheet.create({
+  container: {
+    gap: 12
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  controls: {
+    flexDirection: "row",
+    alignItems: "flex-end",
+    gap: 16
+  }
+});
+var 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
+  }
+});
+function toCSS(state) {
+  const config = toThemeConfig(state);
+  const modes = ["light", "dark"];
+  let css = "";
+  for (const mode of modes) {
+    const tokens = computeTokens(
+      config.colorSystem,
+      mode,
+      config.themes.neutral,
+      1,
+      config.elevation.offsets
+    );
+    const selector = mode === "light" ? ":root" : '[data-theme="dark"]';
+    css += `${selector} {
+`;
+    css += `  --newtone-background: ${srgbToHex(tokens.background.srgb)};
+`;
+    css += `  --newtone-background-elevated: ${srgbToHex(tokens.backgroundElevated.srgb)};
+`;
+    css += `  --newtone-background-sunken: ${srgbToHex(tokens.backgroundSunken.srgb)};
+`;
+    css += `  --newtone-text-primary: ${srgbToHex(tokens.textPrimary.srgb)};
+`;
+    css += `  --newtone-text-secondary: ${srgbToHex(tokens.textSecondary.srgb)};
+`;
+    css += `  --newtone-interactive: ${srgbToHex(tokens.interactive.srgb)};
+`;
+    css += `  --newtone-interactive-hover: ${srgbToHex(tokens.interactiveHover.srgb)};
+`;
+    css += `  --newtone-interactive-active: ${srgbToHex(tokens.interactiveActive.srgb)};
+`;
+    css += `  --newtone-border: ${srgbToHex(tokens.border.srgb)};
+`;
+    css += `  --newtone-success: ${srgbToHex(tokens.success.srgb)};
+`;
+    css += `  --newtone-warning: ${srgbToHex(tokens.warning.srgb)};
+`;
+    css += `  --newtone-error: ${srgbToHex(tokens.error.srgb)};
+`;
+    css += `}
+
+`;
+  }
+  return css;
+}
+
+// src/bridge/toJSON.ts
+function toJSON(state) {
+  const output = {
+    version: "1.0",
+    configuratorState: state,
+    themeConfig: toThemeConfig(state)
+  };
+  return JSON.stringify(output, null, 2);
+}
+
+// src/panels/ExportPanel.tsx
+function ExportPanel({ state }) {
+  const tokens = useTokens(1);
+  const [format, setFormat] = useState("css");
+  const [copied, setCopied] = useState(false);
+  const output = useMemo(() => {
+    return format === "css" ? toCSS(state) : toJSON(state);
+  }, [state, format]);
+  const handleCopy = useCallback(() => {
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      navigator.clipboard.writeText(output).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
+    }
+  }, [output]);
+  return /* @__PURE__ */ React3.createElement(Card, { elevation: 1, style: styles4.container }, /* @__PURE__ */ React3.createElement(Text, { style: [styles4.title, { color: srgbToHex(tokens.textPrimary.srgb) }] }, "Export"), /* @__PURE__ */ React3.createElement(View, { style: styles4.tabs }, /* @__PURE__ */ React3.createElement(
+    Button,
+    {
+      variant: format === "css" ? "primary" : "ghost",
+      size: "sm",
+      onPress: () => setFormat("css")
+    },
+    "CSS Variables"
+  ), /* @__PURE__ */ React3.createElement(
+    Button,
+    {
+      variant: format === "json" ? "primary" : "ghost",
+      size: "sm",
+      onPress: () => setFormat("json")
+    },
+    "JSON"
+  ), /* @__PURE__ */ React3.createElement(Button, { variant: "outline", size: "sm", onPress: handleCopy }, copied ? "Copied!" : "Copy")), /* @__PURE__ */ React3.createElement(View, { style: [styles4.codeBlock, { backgroundColor: srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React3.createElement(
+    Text,
+    {
+      style: [styles4.code, { color: srgbToHex(tokens.textPrimary.srgb) }],
+      selectable: true
+    },
+    output
+  )));
+}
+var styles4 = StyleSheet.create({
+  container: {
+    gap: 12,
+    marginBottom: 12
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: "700"
+  },
+  tabs: {
+    flexDirection: "row",
+    gap: 8
+  },
+  codeBlock: {
+    borderRadius: 6,
+    padding: 12,
+    maxHeight: 300,
+    overflow: "scroll"
+  },
+  code: {
+    fontSize: 11,
+    fontFamily: "monospace",
+    lineHeight: 16
+  }
+});
+
+// src/Configurator.tsx
+function Configurator({
+  initialState,
+  onChange,
+  showExport = true,
+  showPreview = true
+}) {
+  const { state, dispatch, themeConfig, reset } = useConfigurator(initialState);
+  const tokens = useTokens(1);
+  const { setMode } = useNewtoneTheme();
+  const isInitialRender = useRef(true);
+  const [activePaletteIndex, setActivePaletteIndex] = useState(0);
+  const previews = usePreviewColors(state);
+  useEffect(() => {
+    setMode(state.preview.mode);
+  }, []);
+  useEffect(() => {
+    if (isInitialRender.current) {
+      isInitialRender.current = false;
+      return;
+    }
+    onChange?.(state, themeConfig);
+  }, [state, themeConfig, onChange]);
+  return /* @__PURE__ */ React3.createElement(View, { style: [styles5.container, { backgroundColor: srgbToHex(tokens.backgroundSunken.srgb) }] }, /* @__PURE__ */ React3.createElement(View, { style: styles5.topBar }, /* @__PURE__ */ React3.createElement(
+    Toggle,
+    {
+      value: state.preview.mode === "dark",
+      onValueChange: (isDark) => {
+        const mode = isDark ? "dark" : "light";
+        dispatch({ type: "SET_PREVIEW_MODE", mode });
+        setMode(mode);
+      },
+      label: "Dark Mode"
+    }
+  )), /* @__PURE__ */ React3.createElement(View, { style: styles5.topRow }, /* @__PURE__ */ React3.createElement(View, { style: styles5.topRowPanel }, /* @__PURE__ */ React3.createElement(GlobalPanel, { state, dispatch })), showPreview && /* @__PURE__ */ React3.createElement(View, { style: styles5.topRowPanel }, /* @__PURE__ */ React3.createElement(PreviewPanel, { state, dispatch, themeConfig }))), /* @__PURE__ */ React3.createElement(View, { style: styles5.tabBar }, state.palettes.map((palette, index) => /* @__PURE__ */ React3.createElement(
+    Pressable,
+    {
+      key: index,
+      onPress: () => setActivePaletteIndex(index),
+      style: [
+        styles5.tab,
+        {
+          backgroundColor: index === activePaletteIndex ? srgbToHex(tokens.background.srgb) : "transparent",
+          borderColor: index === activePaletteIndex ? srgbToHex(tokens.border.srgb) : "transparent"
+        }
+      ]
+    },
+    /* @__PURE__ */ React3.createElement(Text, { style: [
+      styles5.tabText,
+      {
+        color: srgbToHex(
+          index === activePaletteIndex ? tokens.textPrimary.srgb : tokens.textSecondary.srgb
+        ),
+        fontWeight: index === activePaletteIndex ? "700" : "500"
+      }
+    ] }, palette.name)
+  ))), /* @__PURE__ */ React3.createElement(
+    PalettePanel,
+    {
+      palette: state.palettes[activePaletteIndex],
+      index: activePaletteIndex,
+      dispatch,
+      previewColors: previews[activePaletteIndex]
+    }
+  ), showExport && /* @__PURE__ */ React3.createElement(ExportPanel, { state }), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => reset(),
+      style: {
+        marginTop: 16,
+        padding: "8px 16px",
+        backgroundColor: "#ffffff",
+        color: "#000000",
+        border: "2px solid #000000",
+        borderRadius: 4,
+        fontWeight: 700,
+        fontSize: 14,
+        cursor: "pointer"
+      }
+    },
+    "Reset to Defaults"
+  ));
+}
+var styles5 = StyleSheet.create({
+  container: {
+    borderRadius: 8,
+    padding: 16,
+    gap: 4
+  },
+  topBar: {
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    alignItems: "center",
+    marginBottom: 8
+  },
+  topRow: {
+    flexDirection: "row",
+    gap: 8,
+    marginBottom: 4
+  },
+  topRowPanel: {
+    flex: 1
+  },
+  tabBar: {
+    flexDirection: "row",
+    gap: 4,
+    marginBottom: 4
+  },
+  tab: {
+    paddingVertical: 8,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    borderWidth: 1
+  },
+  tabText: {
+    fontSize: 13
+  }
+});
+
+export { Configurator, DEFAULT_CONFIGURATOR_STATE, toCSS, toJSON, toThemeConfig, traditionalHueToOklch, useConfigurator, usePreviewColors };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map