@newtonedev/editor 0.1.1

package/dist/index.cjs

@@ -0,0 +1,3846 @@
+'use strict';
+
+var react = require('react');
+var components = require('@newtonedev/components');
+var configurator = require('@newtonedev/configurator');
+var newtone = require('newtone');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/utils/presets.ts
+function findPreset(presets, presetId) {
+  return presets.find((p) => p.id === presetId);
+}
+function updatePresetInArray(presets, presetId, updater) {
+  return presets.map((p) => p.id === presetId ? updater(p) : p);
+}
+function presetHasUnpublishedChanges(preset) {
+  if (preset.published_state === null) return true;
+  return JSON.stringify(preset.draft_state) !== JSON.stringify(preset.published_state);
+}
+function useHover() {
+  const [isHovered, setIsHovered] = react.useState(false);
+  const onMouseEnter = react.useCallback(() => setIsHovered(true), []);
+  const onMouseLeave = react.useCallback(() => setIsHovered(false), []);
+  return { isHovered, hoverProps: { onMouseEnter, onMouseLeave } };
+}
+function usePresets({
+  initialPresets,
+  initialActivePresetId,
+  initialPublishedPresetId,
+  defaultState,
+  onPresetSwitch,
+  getCurrentState,
+  flushPendingSave,
+  persistPresets
+}) {
+  const [presets, setPresets] = react.useState(initialPresets);
+  const [activePresetId, setActivePresetId] = react.useState(initialActivePresetId);
+  const [publishedPresetId, setPublishedPresetId] = react.useState(
+    initialPublishedPresetId
+  );
+  const presetsRef = react.useRef(presets);
+  presetsRef.current = presets;
+  const activePreset = presets.find((p) => p.id === activePresetId) ?? presets[0];
+  const switchPreset = react.useCallback(
+    async (presetId) => {
+      if (presetId === activePresetId) return;
+      await flushPendingSave();
+      const currentState = getCurrentState();
+      const updatedPresets = presetsRef.current.map(
+        (p) => p.id === activePresetId ? { ...p, draft_state: currentState } : p
+      );
+      const target = updatedPresets.find((p) => p.id === presetId);
+      if (!target) return;
+      setPresets(updatedPresets);
+      presetsRef.current = updatedPresets;
+      setActivePresetId(presetId);
+      onPresetSwitch(target.draft_state);
+      await persistPresets({
+        presets: updatedPresets,
+        activePresetId: presetId,
+        publishedPresetId
+      });
+    },
+    [
+      activePresetId,
+      publishedPresetId,
+      flushPendingSave,
+      getCurrentState,
+      onPresetSwitch,
+      persistPresets
+    ]
+  );
+  const createPreset = react.useCallback(
+    async (name) => {
+      const newPreset = {
+        id: crypto.randomUUID(),
+        name,
+        draft_state: defaultState,
+        published_state: null
+      };
+      const newPresets = [...presetsRef.current, newPreset];
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      await persistPresets({
+        presets: newPresets,
+        activePresetId,
+        publishedPresetId
+      });
+      return newPreset.id;
+    },
+    [defaultState, activePresetId, publishedPresetId, persistPresets]
+  );
+  const duplicatePreset = react.useCallback(
+    async (presetId, newName) => {
+      const source = presetsRef.current.find((p) => p.id === presetId);
+      if (!source) throw new Error("Preset not found");
+      const newPreset = {
+        id: crypto.randomUUID(),
+        name: newName,
+        draft_state: source.draft_state,
+        published_state: null
+      };
+      const newPresets = [...presetsRef.current, newPreset];
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      await persistPresets({
+        presets: newPresets,
+        activePresetId,
+        publishedPresetId
+      });
+      return newPreset.id;
+    },
+    [activePresetId, publishedPresetId, persistPresets]
+  );
+  const renamePreset = react.useCallback(
+    (presetId, name) => {
+      const newPresets = presetsRef.current.map(
+        (p) => p.id === presetId ? { ...p, name } : p
+      );
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      persistPresets({
+        presets: newPresets,
+        activePresetId,
+        publishedPresetId
+      });
+    },
+    [activePresetId, publishedPresetId, persistPresets]
+  );
+  const deletePreset = react.useCallback(
+    async (presetId) => {
+      if (presetsRef.current.length <= 1) return;
+      const newPresets = presetsRef.current.filter((p) => p.id !== presetId);
+      let newActiveId = activePresetId;
+      let newPublishedId = publishedPresetId;
+      if (presetId === activePresetId) {
+        newActiveId = newPresets[0].id;
+        onPresetSwitch(newPresets[0].draft_state);
+      }
+      if (presetId === publishedPresetId) {
+        newPublishedId = null;
+      }
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      setActivePresetId(newActiveId);
+      setPublishedPresetId(newPublishedId);
+      await persistPresets({
+        presets: newPresets,
+        activePresetId: newActiveId,
+        publishedPresetId: newPublishedId
+      });
+    },
+    [activePresetId, publishedPresetId, onPresetSwitch, persistPresets]
+  );
+  const updateActivePresetDraftState = react.useCallback(
+    (state) => {
+      const newPresets = presetsRef.current.map(
+        (p) => p.id === activePresetId ? { ...p, draft_state: state } : p
+      );
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      return newPresets;
+    },
+    [activePresetId]
+  );
+  const publishActivePreset = react.useCallback(
+    (state) => {
+      const newPresets = presetsRef.current.map(
+        (p) => p.id === activePresetId ? { ...p, draft_state: state, published_state: state } : p
+      );
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      setPublishedPresetId(activePresetId);
+      return newPresets;
+    },
+    [activePresetId]
+  );
+  const revertActivePreset = react.useCallback(() => {
+    return activePreset.published_state;
+  }, [activePreset]);
+  return {
+    presets,
+    activePresetId,
+    publishedPresetId,
+    activePreset,
+    switchPreset,
+    createPreset,
+    renamePreset,
+    deletePreset,
+    duplicatePreset,
+    updateActivePresetDraftState,
+    publishActivePreset,
+    revertActivePreset
+  };
+}
+function useEditorState({
+  initialState,
+  initialIsPublished,
+  initialPresets,
+  initialActivePresetId,
+  initialPublishedPresetId,
+  defaultState,
+  persistence,
+  onNavigate,
+  initialPreviewView
+}) {
+  const {
+    state: configuratorState,
+    dispatch,
+    themeConfig
+  } = configurator.useConfigurator(initialState);
+  const previewColors = configurator.usePreviewColors(configuratorState);
+  const [saveStatus, setSaveStatus] = react.useState("saved");
+  const [isPublished, setIsPublished] = react.useState(initialIsPublished);
+  const [publishing, setPublishing] = react.useState(false);
+  const [colorMode, setColorMode] = react.useState(
+    initialState.preview.mode
+  );
+  const [activeTheme, setActiveTheme] = react.useState(
+    initialState.preview.theme || "neutral"
+  );
+  const [previewView, setPreviewView] = react.useState(
+    initialPreviewView ?? { kind: "overview" }
+  );
+  const [sidebarSelection, setSidebarSelection] = react.useState(null);
+  const [propOverrides, setPropOverrides] = react.useState(
+    {}
+  );
+  const debounceRef = react.useRef(void 0);
+  const latestStateRef = react.useRef(initialState);
+  const isInitialMount = react.useRef(true);
+  const initialStateRef = react.useRef(initialState);
+  const handlePresetSwitch = react.useCallback(
+    (newState) => {
+      dispatch({ type: "LOAD_STATE", state: newState });
+      initialStateRef.current = newState;
+      isInitialMount.current = true;
+    },
+    [dispatch]
+  );
+  const flushPendingSave = react.useCallback(async () => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = void 0;
+    }
+  }, []);
+  const {
+    presets,
+    activePresetId,
+    publishedPresetId,
+    activePreset,
+    switchPreset,
+    createPreset,
+    renamePreset,
+    deletePreset,
+    duplicatePreset,
+    updateActivePresetDraftState,
+    publishActivePreset,
+    revertActivePreset
+  } = usePresets({
+    initialPresets,
+    initialActivePresetId,
+    initialPublishedPresetId,
+    defaultState,
+    onPresetSwitch: handlePresetSwitch,
+    getCurrentState: () => latestStateRef.current,
+    flushPendingSave,
+    persistPresets: persistence.persistPresets
+  });
+  const isDirty = react.useMemo(
+    () => JSON.stringify(configuratorState) !== JSON.stringify(
+      activePreset.published_state ?? initialStateRef.current
+    ),
+    [configuratorState, activePreset.published_state]
+  );
+  const handleRevert = react.useCallback(() => {
+    const publishedState = revertActivePreset();
+    const revertTarget = publishedState ?? defaultState;
+    if (window.confirm(
+      "Revert all changes to the last published version of this preset?"
+    )) {
+      dispatch({ type: "LOAD_STATE", state: revertTarget });
+      initialStateRef.current = revertTarget;
+    }
+  }, [dispatch, revertActivePreset, defaultState]);
+  const initOverridesFromVariant = react.useCallback(
+    (componentId, variantId) => {
+      const comp = components.getComponent(componentId);
+      if (!comp) return;
+      const variant = variantId ? comp.variants.find((v) => v.id === variantId) : comp.variants[0];
+      if (variant) {
+        const overrides = {};
+        for (const prop of comp.editableProps) {
+          overrides[prop.name] = variant.props[prop.name] ?? prop.defaultValue;
+        }
+        setPropOverrides(overrides);
+      }
+    },
+    []
+  );
+  const handlePreviewNavigate = react.useCallback(
+    (view) => {
+      setPreviewView(view);
+      onNavigate?.(view);
+      if (view.kind === "component") {
+        setSidebarSelection({
+          scope: "component",
+          componentId: view.componentId
+        });
+        initOverridesFromVariant(view.componentId);
+      } else {
+        setSidebarSelection(null);
+        setPropOverrides({});
+      }
+    },
+    [onNavigate, initOverridesFromVariant]
+  );
+  const handleSelectVariant = react.useCallback(
+    (variantId) => {
+      if (previewView.kind === "component") {
+        setSidebarSelection({
+          scope: "variant",
+          componentId: previewView.componentId,
+          variantId
+        });
+        initOverridesFromVariant(previewView.componentId, variantId);
+      }
+    },
+    [previewView, initOverridesFromVariant]
+  );
+  const handleCloseSidebar = react.useCallback(() => {
+    setSidebarSelection(null);
+    setPropOverrides({});
+  }, []);
+  const handleScopeToComponent = react.useCallback(() => {
+    if (sidebarSelection && sidebarSelection.scope === "variant") {
+      setSidebarSelection({
+        scope: "component",
+        componentId: sidebarSelection.componentId
+      });
+      initOverridesFromVariant(sidebarSelection.componentId);
+    }
+  }, [sidebarSelection, initOverridesFromVariant]);
+  const handlePropOverride = react.useCallback((propName, value) => {
+    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+  }, []);
+  const handleResetOverrides = react.useCallback(() => {
+    if (sidebarSelection?.scope === "variant") {
+      initOverridesFromVariant(
+        sidebarSelection.componentId,
+        sidebarSelection.variantId
+      );
+    }
+  }, [sidebarSelection, initOverridesFromVariant]);
+  const saveDraft = react.useCallback(
+    async (state) => {
+      setSaveStatus("saving");
+      const updatedPresets = updateActivePresetDraftState(state);
+      const { error } = await persistence.onSaveDraft({
+        state,
+        presets: updatedPresets
+      });
+      setSaveStatus(error ? "error" : "saved");
+    },
+    [persistence, updateActivePresetDraftState]
+  );
+  const scheduleSave = react.useCallback(() => {
+    setSaveStatus("unsaved");
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      saveDraft(latestStateRef.current);
+    }, 2e3);
+  }, [saveDraft]);
+  react.useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    latestStateRef.current = configuratorState;
+    setIsPublished(false);
+    scheduleSave();
+  }, [configuratorState, scheduleSave]);
+  const handleThemeChange = react.useCallback(
+    (theme) => {
+      setActiveTheme(theme);
+      dispatch({ type: "SET_PREVIEW_THEME", theme });
+    },
+    [dispatch]
+  );
+  const handleColorModeChange = react.useCallback(
+    (mode) => {
+      setColorMode(mode);
+      dispatch({ type: "SET_PREVIEW_MODE", mode });
+    },
+    [dispatch]
+  );
+  const handlePublish = react.useCallback(async () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setPublishing(true);
+    const currentState = latestStateRef.current;
+    const updatedPresets = publishActivePreset(currentState);
+    const { error } = await persistence.onPublish({
+      state: currentState,
+      presets: updatedPresets,
+      activePresetId
+    });
+    if (!error) {
+      setSaveStatus("saved");
+      setIsPublished(true);
+    }
+    setPublishing(false);
+  }, [activePresetId, publishActivePreset, persistence]);
+  react.useEffect(() => {
+    const handleBeforeUnload = (e) => {
+      if (saveStatus === "unsaved" || saveStatus === "saving") {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [saveStatus]);
+  react.useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        const state = latestStateRef.current;
+        const flushedPresets = updateActivePresetDraftState(state);
+        persistence.onSaveDraft({ state, presets: flushedPresets });
+      }
+    };
+  }, []);
+  const selectedVariantId = sidebarSelection?.scope === "variant" ? sidebarSelection.variantId : null;
+  const selectedComponentId = sidebarSelection?.scope === "component" || sidebarSelection?.scope === "variant" ? sidebarSelection.componentId : null;
+  return {
+    // Configurator
+    configuratorState,
+    dispatch,
+    themeConfig,
+    previewColors,
+    // Save/publish
+    saveStatus,
+    isPublished,
+    publishing,
+    handlePublish,
+    saveDraft,
+    // Preview
+    previewView,
+    colorMode,
+    activeTheme,
+    handlePreviewNavigate,
+    handleSelectVariant,
+    handleThemeChange,
+    handleColorModeChange,
+    // Sidebar
+    sidebarSelection,
+    selectedComponentId,
+    selectedVariantId,
+    propOverrides,
+    handlePropOverride,
+    handleResetOverrides,
+    handleCloseSidebar,
+    handleScopeToComponent,
+    // Presets
+    presets,
+    activePresetId,
+    publishedPresetId,
+    switchPreset,
+    createPreset,
+    renamePreset,
+    deletePreset,
+    duplicatePreset,
+    // Revert
+    isDirty,
+    handleRevert,
+    // For retry button
+    latestStateRef
+  };
+}
+var SIDEBAR_WIDTH = 360;
+function EditorShell({
+  sidebar,
+  navbar,
+  content,
+  rightPanel
+}) {
+  const tokens = components.useTokens();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        height: "100vh",
+        overflow: "hidden",
+        backgroundColor: newtone.srgbToHex(tokens.background.srgb)
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              display: "flex",
+              flexDirection: "column",
+              height: "100vh",
+              overflow: "hidden",
+              minWidth: 0
+            },
+            children: [
+              navbar,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    flex: 1,
+                    overflow: "hidden"
+                  },
+                  children: content
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              width: SIDEBAR_WIDTH,
+              flexShrink: 0,
+              overflow: "hidden"
+            },
+            children: [
+              sidebar,
+              rightPanel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var STRENGTH_OPTIONS = [
+  { label: "None", value: "none" },
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "Hard", value: "hard" }
+];
+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 ColorsSection({
+  state,
+  dispatch,
+  previewColors,
+  colorMode,
+  onColorModeChange
+}) {
+  const tokens = components.useTokens();
+  const [activePaletteIndex, setActivePaletteIndex] = react.useState(0);
+  const [modeToggleHovered, setModeToggleHovered] = react.useState(false);
+  const palette = state.palettes[activePaletteIndex];
+  const hueRange = configurator.SEMANTIC_HUE_RANGES[activePaletteIndex];
+  const isNeutral = activePaletteIndex === 0;
+  const activeColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const effectiveKeyColor = colorMode === "dark" ? palette.keyColorDark : palette.keyColor;
+  const setKeyColorAction = colorMode === "dark" ? "SET_PALETTE_KEY_COLOR_DARK" : "SET_PALETTE_KEY_COLOR";
+  const clearKeyColorAction = colorMode === "dark" ? "CLEAR_PALETTE_KEY_COLOR_DARK" : "CLEAR_PALETTE_KEY_COLOR";
+  const hexAction = colorMode === "dark" ? "SET_PALETTE_FROM_HEX_DARK" : "SET_PALETTE_FROM_HEX";
+  const wcag = configurator.useWcagValidation(state, activePaletteIndex);
+  const [hexText, setHexText] = react.useState("");
+  const [hexError, setHexError] = react.useState("");
+  const [isEditingHex, setIsEditingHex] = react.useState(false);
+  const [isHexUserSet, setIsHexUserSet] = react.useState(false);
+  react.useEffect(() => {
+    setHexText("");
+    setHexError("");
+    setIsEditingHex(false);
+    setIsHexUserSet(false);
+  }, [colorMode]);
+  const currentPreview = previewColors[activePaletteIndex];
+  const displayedHex = react.useMemo(() => {
+    if (!currentPreview || currentPreview.length === 0) return "";
+    const nv = effectiveKeyColor ?? wcag.autoNormalizedValue;
+    return getHexAtNv(currentPreview, nv);
+  }, [currentPreview, effectiveKeyColor, wcag.autoNormalizedValue]);
+  react.useEffect(() => {
+    if (!isEditingHex && !isHexUserSet) {
+      setHexText(displayedHex);
+    }
+  }, [displayedHex, isEditingHex, isHexUserSet]);
+  const dynamicRange = react.useMemo(() => {
+    const light = state.globalHueGrading.light.strength !== "none" ? {
+      hue: configurator.traditionalHueToOklch(state.globalHueGrading.light.hue),
+      strength: state.globalHueGrading.light.strength
+    } : void 0;
+    const dark = state.globalHueGrading.dark.strength !== "none" ? {
+      hue: configurator.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.useCallback(() => {
+    setIsEditingHex(false);
+    const trimmed = hexText.trim();
+    if (!trimmed) {
+      setHexError("");
+      return;
+    }
+    const hex = trimmed.startsWith("#") ? trimmed : `#${trimmed}`;
+    const params = configurator.hexToPaletteParams(hex, dynamicRange);
+    if (!params) {
+      setHexError("Invalid hex color");
+      return;
+    }
+    setHexError("");
+    setIsHexUserSet(true);
+    dispatch({
+      type: hexAction,
+      index: activePaletteIndex,
+      hue: params.hue,
+      saturation: params.saturation,
+      keyColor: params.normalizedValue
+    });
+  }, [hexText, dynamicRange, dispatch, activePaletteIndex, hexAction]);
+  const handleClearKeyColor = react.useCallback(() => {
+    dispatch({ type: clearKeyColorAction, index: activePaletteIndex });
+    setHexError("");
+    setIsHexUserSet(false);
+  }, [dispatch, activePaletteIndex, clearKeyColorAction]);
+  const wcagWarning = react.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
+      state.palettes.map((_p, index) => {
+        const isActive = index === activePaletteIndex;
+        const colors = previewColors[index];
+        const isNeutralCircle = index === 0;
+        const paletteKeyColor = colorMode === "dark" ? _p.keyColorDark : _p.keyColor;
+        const circleColor = !isNeutralCircle && colors ? getHexAtNv(
+          colors,
+          paletteKeyColor ?? wcag.autoNormalizedValue
+        ) : void 0;
+        const ringStyle = isActive ? `0 0 0 2px ${newtone.srgbToHex(tokens.background.srgb)}, 0 0 0 4px ${activeColor}` : "none";
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setActivePaletteIndex(index),
+            "aria-label": _p.name,
+            "aria-pressed": isActive,
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: "50%",
+              border: "none",
+              cursor: "pointer",
+              flexShrink: 0,
+              boxShadow: ringStyle,
+              transition: "box-shadow 150ms ease",
+              padding: 0,
+              overflow: "hidden",
+              ...isNeutralCircle ? {
+                background: colors ? `linear-gradient(to right, ${newtone.srgbToHex(colors[0].srgb)} 50%, ${newtone.srgbToHex(colors[colors.length - 1].srgb)} 50%)` : `linear-gradient(to right, #ffffff 50%, #000000 50%)`
+              } : { backgroundColor: circleColor ?? borderColor }
+            }
+          },
+          index
+        );
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 } }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => onColorModeChange(colorMode === "light" ? "dark" : "light"),
+          onMouseEnter: () => setModeToggleHovered(true),
+          onMouseLeave: () => setModeToggleHovered(false),
+          "aria-label": colorMode === "light" ? "Switch to dark mode" : "Switch to light mode",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: 6,
+            padding: "4px 10px",
+            borderRadius: 6,
+            border: `1px solid ${borderColor}`,
+            background: modeToggleHovered ? `${borderColor}20` : "none",
+            cursor: "pointer",
+            fontSize: 12,
+            color: newtone.srgbToHex(tokens.textPrimary.srgb),
+            transition: "background-color 150ms ease"
+          },
+          children: [
+            colorMode === "light" ? "\u2600" : "\u263E",
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: colorMode === "light" ? "Light" : "Dark" })
+          ]
+        }
+      )
+    ] }),
+    currentPreview && (isNeutral ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 1 }, children: currentPreview.map((color, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          flex: 1,
+          height: 64,
+          borderRadius: 2,
+          backgroundColor: newtone.srgbToHex(color.srgb)
+        }
+      },
+      i
+    )) }) : /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", gap: 8 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.ColorScaleSlider,
+            {
+              colors: currentPreview,
+              value: effectiveKeyColor ?? wcag.autoNormalizedValue,
+              onValueChange: (nv) => {
+                setIsHexUserSet(false);
+                dispatch({
+                  type: setKeyColorAction,
+                  index: activePaletteIndex,
+                  normalizedValue: nv
+                });
+              },
+              trimEnds: true,
+              snap: true,
+              label: "Key Color",
+              warning: wcagWarning,
+              animateValue: true
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                gap: 8,
+                alignItems: "flex-end"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  components.TextInput,
+                  {
+                    label: "Hex",
+                    value: hexText,
+                    onChangeText: (text) => {
+                      setIsEditingHex(true);
+                      setHexText(text);
+                      setHexError("");
+                    },
+                    onBlur: handleHexSubmit,
+                    onSubmitEditing: handleHexSubmit,
+                    placeholder: "#000000"
+                  }
+                ) }),
+                effectiveKeyColor !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: handleClearKeyColor,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: "0 0 6px",
+                      fontSize: 13,
+                      fontWeight: 600,
+                      color: activeColor
+                    },
+                    children: "Auto"
+                  }
+                )
+              ]
+            }
+          ),
+          hexError && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                fontSize: 12,
+                fontWeight: 500,
+                color: newtone.srgbToHex(tokens.error.srgb)
+              },
+              children: hexError
+            }
+          )
+        ]
+      }
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          height: 1,
+          backgroundColor: borderColor,
+          margin: "4px 0"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components.HueSlider,
+        {
+          value: palette.hue,
+          onValueChange: (hue) => dispatch({
+            type: "SET_PALETTE_HUE",
+            index: activePaletteIndex,
+            hue
+          }),
+          label: "Hue",
+          editableValue: true,
+          ...hueRange ? { min: hueRange.min, max: hueRange.max } : {}
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components.Slider,
+        {
+          value: palette.saturation,
+          onValueChange: (saturation) => dispatch({
+            type: "SET_PALETTE_SATURATION",
+            index: activePaletteIndex,
+            saturation
+          }),
+          min: 0,
+          max: 100,
+          label: "Saturation",
+          editableValue: true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, alignItems: "flex-end" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          components.Select,
+          {
+            options: STRENGTH_OPTIONS,
+            value: palette.desaturationStrength,
+            onValueChange: (strength) => dispatch({
+              type: "SET_PALETTE_DESAT_STRENGTH",
+              index: activePaletteIndex,
+              strength
+            }),
+            label: "Desaturation"
+          }
+        ) }),
+        palette.desaturationStrength !== "none" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          components.Toggle,
+          {
+            value: palette.desaturationDirection === "dark",
+            onValueChange: (v) => dispatch({
+              type: "SET_PALETTE_DESAT_DIRECTION",
+              index: activePaletteIndex,
+              direction: v ? "dark" : "light"
+            }),
+            label: "Invert"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, alignItems: "flex-end" }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          components.Select,
+          {
+            options: STRENGTH_OPTIONS,
+            value: palette.hueGradeStrength,
+            onValueChange: (strength) => dispatch({
+              type: "SET_PALETTE_HUE_GRADE_STRENGTH",
+              index: activePaletteIndex,
+              strength
+            }),
+            label: "Hue Grading"
+          }
+        ) }),
+        palette.hueGradeStrength !== "none" && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          components.Toggle,
+          {
+            value: palette.hueGradeDirection === "dark",
+            onValueChange: (v) => dispatch({
+              type: "SET_PALETTE_HUE_GRADE_DIRECTION",
+              index: activePaletteIndex,
+              direction: v ? "dark" : "light"
+            }),
+            label: "Invert"
+          }
+        ) })
+      ] }),
+      palette.hueGradeStrength !== "none" && /* @__PURE__ */ jsxRuntime.jsx(
+        components.HueSlider,
+        {
+          value: palette.hueGradeHue,
+          onValueChange: (hue) => dispatch({
+            type: "SET_PALETTE_HUE_GRADE_HUE",
+            index: activePaletteIndex,
+            hue
+          }),
+          label: "Grade Target",
+          editableValue: true
+        }
+      )
+    ] })
+  ] });
+}
+var STRENGTH_OPTIONS2 = [
+  { label: "None", value: "none" },
+  { label: "Low", value: "low" },
+  { label: "Medium", value: "medium" },
+  { label: "Hard", value: "hard" }
+];
+var TRACK_HEIGHT = 8;
+var THUMB_SIZE = 18;
+var ZONE_FRAC = 1 / 3;
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+function internalToDisplay(internal) {
+  return clamp(Math.round(internal * 10), 0, 10);
+}
+function displayToInternal(display) {
+  return clamp(display, 0, 10) / 10;
+}
+function posToWhitesDisplay(pos) {
+  const ratio = clamp(pos / ZONE_FRAC, 0, 1);
+  return Math.round(10 * (1 - ratio));
+}
+function posToBlacksDisplay(pos) {
+  const ratio = clamp((pos - (1 - ZONE_FRAC)) / ZONE_FRAC, 0, 1);
+  return Math.round(ratio * 10);
+}
+function whitesDisplayToPos(display) {
+  return (10 - display) / 10 * ZONE_FRAC;
+}
+function blacksDisplayToPos(display) {
+  return 1 - ZONE_FRAC + display / 10 * ZONE_FRAC;
+}
+function DualRangeSlider({
+  whitesValue,
+  blacksValue,
+  onWhitesChange,
+  onBlacksChange
+}) {
+  const tokens = components.useTokens();
+  const trackRef = react.useRef(null);
+  const [activeThumb, setActiveThumb] = react.useState(null);
+  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const wDisplay = internalToDisplay(whitesValue);
+  const bDisplay = internalToDisplay(blacksValue);
+  const wPos = whitesDisplayToPos(wDisplay);
+  const bPos = blacksDisplayToPos(bDisplay);
+  const getPosRatio = react.useCallback((clientX) => {
+    if (!trackRef.current) return 0;
+    const rect = trackRef.current.getBoundingClientRect();
+    return clamp((clientX - rect.left) / rect.width, 0, 1);
+  }, []);
+  const handlePointerDown = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      const pos = getPosRatio(e.clientX);
+      if (pos <= ZONE_FRAC) {
+        setActiveThumb("whites");
+        onWhitesChange(displayToInternal(posToWhitesDisplay(pos)));
+      } else if (pos >= 1 - ZONE_FRAC) {
+        setActiveThumb("blacks");
+        onBlacksChange(displayToInternal(posToBlacksDisplay(pos)));
+      } else {
+        return;
+      }
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [getPosRatio, onWhitesChange, onBlacksChange]
+  );
+  const handlePointerMove = react.useCallback(
+    (e) => {
+      if (!activeThumb) return;
+      const pos = getPosRatio(e.clientX);
+      if (activeThumb === "whites") {
+        onWhitesChange(displayToInternal(posToWhitesDisplay(pos)));
+      } else {
+        onBlacksChange(displayToInternal(posToBlacksDisplay(pos)));
+      }
+    },
+    [activeThumb, getPosRatio, onWhitesChange, onBlacksChange]
+  );
+  const handlePointerUp = react.useCallback(() => {
+    setActiveThumb(null);
+  }, []);
+  const trackTop = (THUMB_SIZE - TRACK_HEIGHT) / 2;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: `0 ${THUMB_SIZE / 2}px` }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: trackRef,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerUp,
+      style: {
+        position: "relative",
+        height: THUMB_SIZE,
+        cursor: activeThumb ? "grabbing" : "pointer",
+        touchAction: "none",
+        userSelect: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: 0,
+              right: 0,
+              top: trackTop,
+              height: TRACK_HEIGHT,
+              borderRadius: TRACK_HEIGHT / 2,
+              background: "linear-gradient(to right, white, black)",
+              border: `1px solid ${borderColor}`,
+              boxSizing: "border-box"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `${wPos * 100}%`,
+              width: `${(bPos - wPos) * 100}%`,
+              top: trackTop,
+              height: TRACK_HEIGHT,
+              backgroundColor: interactiveColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `calc(${wPos * 100}% - ${THUMB_SIZE / 2}px)`,
+              top: 0,
+              width: THUMB_SIZE,
+              height: THUMB_SIZE,
+              borderRadius: THUMB_SIZE / 2,
+              backgroundColor: interactiveColor,
+              pointerEvents: "none",
+              zIndex: activeThumb === "whites" ? 2 : 1
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: `calc(${bPos * 100}% - ${THUMB_SIZE / 2}px)`,
+              top: 0,
+              width: THUMB_SIZE,
+              height: THUMB_SIZE,
+              borderRadius: THUMB_SIZE / 2,
+              backgroundColor: interactiveColor,
+              pointerEvents: "none",
+              zIndex: activeThumb === "blacks" ? 2 : 1
+            }
+          }
+        )
+      ]
+    }
+  ) });
+}
+function RangeInput({ display, onCommit, toInternal }) {
+  const tokens = components.useTokens();
+  const [text, setText] = react.useState(String(display));
+  const [isEditing, setIsEditing] = react.useState(false);
+  const displayText = isEditing ? text : String(display);
+  const commit = () => {
+    setIsEditing(false);
+    const parsed = parseInt(text, 10);
+    if (isNaN(parsed)) {
+      setText(String(display));
+      return;
+    }
+    const clamped = clamp(Math.round(parsed), 0, 10);
+    onCommit(toInternal(clamped));
+    setText(String(clamped));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      type: "text",
+      inputMode: "numeric",
+      value: displayText,
+      onChange: (e) => {
+        setIsEditing(true);
+        setText(e.target.value);
+      },
+      onBlur: commit,
+      onKeyDown: (e) => {
+        if (e.key === "Enter") commit();
+      },
+      style: {
+        width: 40,
+        padding: "2px 6px",
+        border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+        borderRadius: 4,
+        backgroundColor: "transparent",
+        color: newtone.srgbToHex(tokens.textPrimary.srgb),
+        fontFamily: "inherit",
+        fontSize: 12,
+        fontWeight: 500,
+        textAlign: "center",
+        outline: "none"
+      }
+    }
+  );
+}
+function DynamicRangeSection({
+  state,
+  dispatch
+}) {
+  const tokens = components.useTokens();
+  const labelColor = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const labelStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    color: labelColor,
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  };
+  const wDisplay = internalToDisplay(state.dynamicRange.lightest);
+  const bDisplay = internalToDisplay(state.dynamicRange.darkest);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: "Whites" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: "Blacks" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DualRangeSlider,
+      {
+        whitesValue: state.dynamicRange.lightest,
+        blacksValue: state.dynamicRange.darkest,
+        onWhitesChange: (v) => dispatch({ type: "SET_LIGHTEST", value: v }),
+        onBlacksChange: (v) => dispatch({ type: "SET_DARKEST", value: v })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RangeInput,
+            {
+              display: wDisplay,
+              onCommit: (v) => dispatch({ type: "SET_LIGHTEST", value: v }),
+              toInternal: displayToInternal
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            RangeInput,
+            {
+              display: bDisplay,
+              onCommit: (v) => dispatch({ type: "SET_DARKEST", value: v }),
+              toInternal: displayToInternal
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...labelStyle, marginTop: 4 }, children: "Global Hue Grading \u2014 Light" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        components.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__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        components.HueSlider,
+        {
+          value: state.globalHueGrading.light.hue,
+          onValueChange: (hue) => dispatch({ type: "SET_GLOBAL_GRADE_LIGHT_HUE", hue }),
+          label: "Target Hue",
+          showValue: true
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { ...labelStyle, marginTop: 4 }, children: "Global Hue Grading \u2014 Dark" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        components.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__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        components.HueSlider,
+        {
+          value: state.globalHueGrading.dark.hue,
+          onValueChange: (hue) => dispatch({ type: "SET_GLOBAL_GRADE_DARK_HUE", hue }),
+          label: "Target Hue",
+          showValue: true
+        }
+      ) })
+    ] })
+  ] });
+}
+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 IconsSection({ state, dispatch }) {
+  const variant = state.icons?.variant ?? "rounded";
+  const weight = state.icons?.weight ?? 400;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      components.Select,
+      {
+        options: ICON_VARIANT_OPTIONS,
+        value: variant,
+        onValueChange: (v) => dispatch({
+          type: "SET_ICON_VARIANT",
+          variant: v
+        }),
+        label: "Variant"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      components.Select,
+      {
+        options: ICON_WEIGHT_OPTIONS,
+        value: weight.toString(),
+        onValueChange: (v) => dispatch({
+          type: "SET_ICON_WEIGHT",
+          weight: parseInt(v)
+        }),
+        label: "Weight"
+      }
+    ) })
+  ] });
+}
+var previewLoaded = false;
+function preloadFontsForPreview() {
+  if (previewLoaded || typeof document === "undefined") return;
+  previewLoaded = true;
+  const families = components.GOOGLE_FONTS.map(
+    (f) => `family=${f.family.replace(/ /g, "+")}:wght@400`
+  ).join("&");
+  const url = `https://fonts.googleapis.com/css2?${families}&display=swap`;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+function googleFontToConfig(entry) {
+  return {
+    type: "google",
+    family: entry.family,
+    fallback: entry.fallback
+  };
+}
+function systemFontToConfig(entry) {
+  return {
+    type: "system",
+    family: entry.family,
+    fallback: entry.fallback
+  };
+}
+var CATEGORY_LABELS = {
+  "sans-serif": "Sans Serif",
+  serif: "Serif",
+  monospace: "Monospace",
+  display: "Display"
+};
+var CATEGORY_ORDER = [
+  "sans-serif",
+  "serif",
+  "monospace",
+  "display"
+];
+var MONO_CATEGORY_ORDER = [
+  "monospace",
+  "sans-serif",
+  "serif",
+  "display"
+];
+function FontPicker({
+  label,
+  slot,
+  currentFont,
+  onSelect
+}) {
+  const tokens = components.useTokens();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [search, setSearch] = react.useState("");
+  const containerRef = react.useRef(null);
+  const searchInputRef = react.useRef(null);
+  const labelColor = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const textColor = newtone.srgbToHex(tokens.textPrimary.srgb);
+  const bgColor = newtone.srgbToHex(tokens.backgroundElevated.srgb);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const hoverColor = newtone.srgbToHex(tokens.backgroundSunken.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  react.useEffect(() => {
+    if (!isOpen) return;
+    function handleMouseDown(e) {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (isOpen) {
+      preloadFontsForPreview();
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen]);
+  const categoryOrder = slot === "mono" ? MONO_CATEGORY_ORDER : CATEGORY_ORDER;
+  const filteredGoogleFonts = react.useMemo(() => {
+    const query = search.toLowerCase().trim();
+    const fonts = query ? components.GOOGLE_FONTS.filter((f) => f.family.toLowerCase().includes(query)) : components.GOOGLE_FONTS;
+    const grouped = {};
+    for (const cat of categoryOrder) {
+      const inCategory = fonts.filter((f) => f.category === cat);
+      if (inCategory.length > 0) {
+        grouped[cat] = inCategory;
+      }
+    }
+    return grouped;
+  }, [search, categoryOrder]);
+  const filteredSystemFonts = react.useMemo(() => {
+    const query = search.toLowerCase().trim();
+    return query ? components.SYSTEM_FONTS.filter((f) => f.family.toLowerCase().includes(query)) : [...components.SYSTEM_FONTS];
+  }, [search]);
+  const handleSelect = react.useCallback(
+    (font) => {
+      onSelect(font);
+      setIsOpen(false);
+      setSearch("");
+    },
+    [onSelect]
+  );
+  const fontFamily = currentFont.family.includes(" ") ? `"${currentFont.family}"` : currentFont.family;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+          padding: "6px 10px",
+          borderRadius: 6,
+          border: `1px solid ${isOpen ? interactiveColor : borderColor}`,
+          background: "transparent",
+          cursor: "pointer",
+          outline: "none"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: labelColor }, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                color: textColor,
+                fontFamily: `${fontFamily}, ${currentFont.fallback}`,
+                maxWidth: 140,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: currentFont.family
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: 0,
+          right: 0,
+          zIndex: 100,
+          background: bgColor,
+          border: `1px solid ${borderColor}`,
+          borderRadius: 8,
+          boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
+          maxHeight: 320,
+          display: "flex",
+          flexDirection: "column",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 8px 4px" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ref: searchInputRef,
+              type: "text",
+              value: search,
+              onChange: (e) => setSearch(e.target.value),
+              placeholder: "Search fonts...",
+              style: {
+                width: "100%",
+                padding: "6px 8px",
+                fontSize: 12,
+                borderRadius: 4,
+                border: `1px solid ${borderColor}`,
+                background: "transparent",
+                color: textColor,
+                outline: "none",
+                boxSizing: "border-box"
+              }
+            }
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { overflowY: "auto", padding: "4px 0" }, children: [
+            filteredSystemFonts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: labelColor,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    padding: "6px 12px 2px"
+                  },
+                  children: "System"
+                }
+              ),
+              filteredSystemFonts.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+                FontOption,
+                {
+                  family: f.family,
+                  fallback: f.fallback,
+                  isSelected: currentFont.family === f.family && currentFont.type === "system",
+                  textColor,
+                  hoverColor,
+                  interactiveColor,
+                  onSelect: () => handleSelect(systemFontToConfig(f))
+                },
+                f.family
+              ))
+            ] }),
+            Object.entries(filteredGoogleFonts).map(([category, fonts]) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: labelColor,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    padding: "8px 12px 2px"
+                  },
+                  children: CATEGORY_LABELS[category] ?? category
+                }
+              ),
+              fonts.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+                FontOption,
+                {
+                  family: f.family,
+                  fallback: f.fallback,
+                  isSelected: currentFont.family === f.family && currentFont.type === "google",
+                  textColor,
+                  hoverColor,
+                  interactiveColor,
+                  onSelect: () => handleSelect(googleFontToConfig(f))
+                },
+                f.family
+              ))
+            ] }, category)),
+            filteredSystemFonts.length === 0 && Object.keys(filteredGoogleFonts).length === 0 && /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  padding: "12px",
+                  fontSize: 12,
+                  color: labelColor,
+                  textAlign: "center"
+                },
+                children: "No fonts found"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function FontOption({
+  family,
+  fallback,
+  isSelected,
+  textColor,
+  hoverColor,
+  interactiveColor,
+  onSelect
+}) {
+  const [hovered, setHovered] = react.useState(false);
+  const fontFamily = family.includes(" ") ? `"${family}"` : family;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick: onSelect,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        display: "block",
+        width: "100%",
+        padding: "5px 12px",
+        fontSize: 13,
+        fontFamily: `${fontFamily}, ${fallback}`,
+        color: isSelected ? interactiveColor : textColor,
+        background: hovered ? hoverColor : "transparent",
+        border: "none",
+        cursor: "pointer",
+        textAlign: "left",
+        outline: "none",
+        fontWeight: isSelected ? 600 : 400
+      },
+      children: family
+    }
+  );
+}
+var DEFAULT_FONT_DEFAULT = {
+  type: "system",
+  family: "system-ui",
+  fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+};
+var DEFAULT_FONT_DISPLAY = {
+  type: "system",
+  family: "system-ui",
+  fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+};
+var DEFAULT_FONT_MONO = {
+  type: "system",
+  family: "ui-monospace",
+  fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+};
+function FontsSection({ state, dispatch }) {
+  const tokens = components.useTokens();
+  const baseSize = state.typography?.scale.baseSize ?? 16;
+  const ratio = state.typography?.scale.ratio ?? 1.25;
+  const labelColor = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const handleFontChange = (slot, font) => {
+    const actionType = {
+      default: "SET_FONT_DEFAULT",
+      display: "SET_FONT_DISPLAY",
+      mono: "SET_FONT_MONO"
+    }[slot];
+    dispatch({ type: actionType, font });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            color: labelColor,
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8
+          },
+          children: "Scale"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          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__ */ jsxRuntime.jsx(
+          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__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            color: labelColor,
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8
+          },
+          children: "Fonts"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FontPicker,
+          {
+            label: "Default",
+            slot: "default",
+            currentFont: state.typography?.fonts.default ?? DEFAULT_FONT_DEFAULT,
+            onSelect: (font) => handleFontChange("default", font)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FontPicker,
+          {
+            label: "Display",
+            slot: "display",
+            currentFont: state.typography?.fonts.display ?? DEFAULT_FONT_DISPLAY,
+            onSelect: (font) => handleFontChange("display", font)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          FontPicker,
+          {
+            label: "Mono",
+            slot: "mono",
+            currentFont: state.typography?.fonts.mono ?? DEFAULT_FONT_MONO,
+            onSelect: (font) => handleFontChange("mono", font)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function OthersSection({ state, dispatch }) {
+  const tokens = components.useTokens();
+  const density = state.spacing?.density ?? 0.5;
+  const intensity = state.roundness?.intensity ?? 0.5;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            color: newtone.srgbToHex(tokens.textSecondary.srgb),
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8
+          },
+          children: "Spacing"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components.Slider,
+        {
+          value: Math.round(density * 100),
+          onValueChange: (v) => dispatch({ type: "SET_SPACING_DENSITY", density: v / 100 }),
+          min: 0,
+          max: 100,
+          label: "Density",
+          showValue: true
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: {
+            fontSize: 11,
+            fontWeight: 600,
+            color: newtone.srgbToHex(tokens.textSecondary.srgb),
+            textTransform: "uppercase",
+            letterSpacing: 0.5,
+            marginBottom: 8
+          },
+          children: "Roundness"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        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
+        }
+      )
+    ] })
+  ] });
+}
+function PresetSelector({
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset
+}) {
+  const tokens = components.useTokens();
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [renamingId, setRenamingId] = react.useState(null);
+  const [renameValue, setRenameValue] = react.useState("");
+  const [menuOpenId, setMenuOpenId] = react.useState(null);
+  const [hoveredId, setHoveredId] = react.useState(null);
+  const [hoveredAction, setHoveredAction] = react.useState(null);
+  const dropdownRef = react.useRef(null);
+  const renameInputRef = react.useRef(null);
+  const activePreset = presets.find((p) => p.id === activePresetId);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const bgColor = newtone.srgbToHex(tokens.background.srgb);
+  const textPrimary = newtone.srgbToHex(tokens.textPrimary.srgb);
+  const textSecondary = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const warningColor = newtone.srgbToHex(tokens.warning.srgb);
+  const errorColor = newtone.srgbToHex(tokens.error.srgb);
+  const hoverBg = `${borderColor}18`;
+  const activeBg = `${interactiveColor}14`;
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setMenuOpenId(null);
+        setRenamingId(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (renamingId && renameInputRef.current) {
+      renameInputRef.current.focus();
+      renameInputRef.current.select();
+    }
+  }, [renamingId]);
+  const handleCreate = react.useCallback(async () => {
+    const name = `Preset ${presets.length + 1}`;
+    const newId = await onCreatePreset(name);
+    onSwitchPreset(newId);
+    setIsOpen(false);
+  }, [presets.length, onCreatePreset, onSwitchPreset]);
+  const handleStartRename = react.useCallback(
+    (presetId, currentName) => {
+      setRenamingId(presetId);
+      setRenameValue(currentName);
+      setMenuOpenId(null);
+    },
+    []
+  );
+  const handleCommitRename = react.useCallback(() => {
+    if (renamingId && renameValue.trim()) {
+      onRenamePreset(renamingId, renameValue.trim());
+    }
+    setRenamingId(null);
+  }, [renamingId, renameValue, onRenamePreset]);
+  const handleDelete = react.useCallback(
+    async (presetId) => {
+      if (presets.length <= 1) return;
+      if (window.confirm("Delete this preset? This cannot be undone.")) {
+        await onDeletePreset(presetId);
+      }
+      setMenuOpenId(null);
+    },
+    [presets.length, onDeletePreset]
+  );
+  const handleDuplicate = react.useCallback(
+    async (presetId, sourceName) => {
+      const newId = await onDuplicatePreset(presetId, `${sourceName} (copy)`);
+      onSwitchPreset(newId);
+      setMenuOpenId(null);
+      setIsOpen(false);
+    },
+    [onDuplicatePreset, onSwitchPreset]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setIsOpen(!isOpen),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: 6,
+          padding: "4px 10px",
+          borderRadius: 6,
+          border: `1px solid ${borderColor}`,
+          backgroundColor: "transparent",
+          color: textPrimary,
+          fontSize: 12,
+          fontWeight: 500,
+          cursor: "pointer",
+          maxWidth: 160
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: activePreset?.name ?? "Default"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "svg",
+            {
+              width: 10,
+              height: 10,
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: 2,
+              style: {
+                transform: isOpen ? "rotate(180deg)" : "none",
+                transition: "transform 150ms ease",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+            }
+          )
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: "calc(100% + 4px)",
+          left: 0,
+          width: 260,
+          backgroundColor: bgColor,
+          border: `1px solid ${borderColor}`,
+          borderRadius: 8,
+          boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+          zIndex: 100,
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxHeight: 240, overflowY: "auto", padding: "4px 0" }, children: presets.map((preset) => {
+            const isActive = preset.id === activePresetId;
+            const isPublishedPreset = preset.id === publishedPresetId;
+            const hasChanges = presetHasUnpublishedChanges(preset);
+            const isHovered = hoveredId === preset.id;
+            const isRenaming = renamingId === preset.id;
+            const isMenuShown = menuOpenId === preset.id;
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                onMouseEnter: () => setHoveredId(preset.id),
+                onMouseLeave: () => setHoveredId(null),
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "6px 12px",
+                  backgroundColor: isActive ? activeBg : isHovered ? hoverBg : "transparent",
+                  cursor: isRenaming ? "default" : "pointer",
+                  transition: "background-color 100ms ease",
+                  position: "relative"
+                },
+                children: [
+                  isRenaming ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: renameInputRef,
+                      value: renameValue,
+                      onChange: (e) => setRenameValue(e.target.value),
+                      onBlur: handleCommitRename,
+                      onKeyDown: (e) => {
+                        if (e.key === "Enter") handleCommitRename();
+                        if (e.key === "Escape") setRenamingId(null);
+                      },
+                      style: {
+                        flex: 1,
+                        fontSize: 13,
+                        padding: "2px 6px",
+                        border: `1px solid ${interactiveColor}`,
+                        borderRadius: 4,
+                        backgroundColor: bgColor,
+                        color: textPrimary,
+                        outline: "none"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs(
+                      "div",
+                      {
+                        onClick: () => {
+                          onSwitchPreset(preset.id);
+                          setIsOpen(false);
+                        },
+                        style: {
+                          flex: 1,
+                          display: "flex",
+                          alignItems: "center",
+                          gap: 6,
+                          minWidth: 0
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 13,
+                                fontWeight: isActive ? 600 : 400,
+                                color: textPrimary,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              children: preset.name
+                            }
+                          ),
+                          hasChanges && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              title: "Unpublished changes",
+                              style: {
+                                width: 6,
+                                height: 6,
+                                borderRadius: "50%",
+                                backgroundColor: warningColor,
+                                flexShrink: 0
+                              }
+                            }
+                          ),
+                          isPublishedPreset && /* @__PURE__ */ jsxRuntime.jsx(
+                            "span",
+                            {
+                              style: {
+                                fontSize: 10,
+                                fontWeight: 600,
+                                color: interactiveColor,
+                                padding: "1px 4px",
+                                borderRadius: 3,
+                                border: `1px solid ${interactiveColor}`,
+                                flexShrink: 0,
+                                lineHeight: "14px"
+                              },
+                              children: "API"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    (isHovered || isMenuShown) && /* @__PURE__ */ jsxRuntime.jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          setMenuOpenId(isMenuShown ? null : preset.id);
+                        },
+                        style: {
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          width: 24,
+                          height: 24,
+                          border: "none",
+                          background: "none",
+                          color: textSecondary,
+                          cursor: "pointer",
+                          borderRadius: 4,
+                          flexShrink: 0
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsxs(
+                          "svg",
+                          {
+                            width: 14,
+                            height: 14,
+                            viewBox: "0 0 24 24",
+                            fill: "currentColor",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 5, r: 2 }),
+                              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 12, r: 2 }),
+                              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: 12, cy: 19, r: 2 })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  ] }),
+                  isMenuShown && !isRenaming && /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        top: 0,
+                        right: -140,
+                        width: 130,
+                        backgroundColor: bgColor,
+                        border: `1px solid ${borderColor}`,
+                        borderRadius: 6,
+                        boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+                        zIndex: 101,
+                        overflow: "hidden"
+                      },
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleStartRename(preset.id, preset.name);
+                            },
+                            onMouseEnter: () => setHoveredAction("rename"),
+                            onMouseLeave: () => setHoveredAction(null),
+                            style: {
+                              display: "block",
+                              width: "100%",
+                              padding: "8px 12px",
+                              border: "none",
+                              backgroundColor: hoveredAction === "rename" ? hoverBg : "transparent",
+                              color: textPrimary,
+                              fontSize: 12,
+                              textAlign: "left",
+                              cursor: "pointer"
+                            },
+                            children: "Rename"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDuplicate(preset.id, preset.name);
+                            },
+                            onMouseEnter: () => setHoveredAction("duplicate"),
+                            onMouseLeave: () => setHoveredAction(null),
+                            style: {
+                              display: "block",
+                              width: "100%",
+                              padding: "8px 12px",
+                              border: "none",
+                              backgroundColor: hoveredAction === "duplicate" ? hoverBg : "transparent",
+                              color: textPrimary,
+                              fontSize: 12,
+                              textAlign: "left",
+                              cursor: "pointer"
+                            },
+                            children: "Duplicate"
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            onClick: (e) => {
+                              e.stopPropagation();
+                              handleDelete(preset.id);
+                            },
+                            onMouseEnter: () => setHoveredAction("delete"),
+                            onMouseLeave: () => setHoveredAction(null),
+                            disabled: presets.length <= 1,
+                            style: {
+                              display: "block",
+                              width: "100%",
+                              padding: "8px 12px",
+                              border: "none",
+                              backgroundColor: hoveredAction === "delete" ? hoverBg : "transparent",
+                              color: presets.length <= 1 ? textSecondary : errorColor,
+                              fontSize: 12,
+                              textAlign: "left",
+                              cursor: presets.length <= 1 ? "not-allowed" : "pointer",
+                              opacity: presets.length <= 1 ? 0.5 : 1
+                            },
+                            children: "Delete"
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              },
+              preset.id
+            );
+          }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: handleCreate,
+              onMouseEnter: () => setHoveredAction("create"),
+              onMouseLeave: () => setHoveredAction(null),
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                width: "100%",
+                padding: "10px 12px",
+                border: "none",
+                borderTop: `1px solid ${borderColor}`,
+                backgroundColor: hoveredAction === "create" ? hoverBg : "transparent",
+                color: textSecondary,
+                fontSize: 13,
+                cursor: "pointer"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "svg",
+                  {
+                    width: 14,
+                    height: 14,
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "currentColor",
+                    strokeWidth: 2,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 12, y1: 5, x2: 12, y2: 19 }),
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: 5, y1: 12, x2: 19, y2: 12 })
+                    ]
+                  }
+                ),
+                "New preset"
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var SIDEBAR_WIDTH2 = 360;
+var ACCORDION_SECTIONS = [
+  { id: "dynamic-range", label: "Dynamic Range" },
+  { id: "colors", label: "Colors" },
+  { id: "fonts", label: "Fonts" },
+  { id: "icons", label: "Icons" },
+  { id: "others", label: "Others" }
+];
+function SectionIcon({ id }) {
+  const props = {
+    width: 16,
+    height: 16,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+  switch (id) {
+    case "dynamic-range":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "1", x2: "12", y2: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "23" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "4.22", x2: "5.64", y2: "5.64" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "18.36", x2: "19.78", y2: "19.78" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "12", x2: "3", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "21", y1: "12", x2: "23", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.22", y1: "19.78", x2: "5.64", y2: "18.36" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18.36", y1: "5.64", x2: "19.78", y2: "4.22" })
+      ] });
+    case "colors":
+      return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0z" }) });
+    case "fonts":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "4 7 4 4 20 4 20 7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "20", x2: "15", y2: "20" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "4", x2: "12", y2: "20" })
+      ] });
+    case "icons":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "7", height: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "3", width: "7", height: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "14", width: "7", height: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14", y: "14", width: "7", height: "7" })
+      ] });
+    case "others":
+      return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...props, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "21", x2: "4", y2: "14" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4", y1: "10", x2: "4", y2: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "21", x2: "12", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "8", x2: "12", y2: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "21", x2: "20", y2: "16" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20", y1: "12", x2: "20", y2: "3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "1", y1: "14", x2: "7", y2: "14" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "9", y1: "8", x2: "15", y2: "8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "17", y1: "16", x2: "23", y2: "16" })
+      ] });
+    default:
+      return null;
+  }
+}
+function Sidebar({
+  state,
+  dispatch,
+  previewColors,
+  isDirty,
+  onRevert,
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset,
+  colorMode,
+  onColorModeChange
+}) {
+  const tokens = components.useTokens();
+  const [openSections, setOpenSections] = react.useState(
+    /* @__PURE__ */ new Set(["dynamic-range", "colors"])
+  );
+  const [hoveredSectionId, setHoveredSectionId] = react.useState(null);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const bgColor = newtone.srgbToHex(tokens.background.srgb);
+  const hoverBg = `${borderColor}10`;
+  const toggleSection = (id) => {
+    setOpenSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+  const renderSectionContent = (sectionId) => {
+    switch (sectionId) {
+      case "dynamic-range":
+        return /* @__PURE__ */ jsxRuntime.jsx(DynamicRangeSection, { state, dispatch });
+      case "colors":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          ColorsSection,
+          {
+            state,
+            dispatch,
+            previewColors,
+            colorMode,
+            onColorModeChange
+          }
+        );
+      case "icons":
+        return /* @__PURE__ */ jsxRuntime.jsx(IconsSection, { state, dispatch });
+      case "fonts":
+        return /* @__PURE__ */ jsxRuntime.jsx(FontsSection, { state, dispatch });
+      case "others":
+        return /* @__PURE__ */ jsxRuntime.jsx(OthersSection, { state, dispatch });
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        width: SIDEBAR_WIDTH2,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        height: "100vh",
+        borderLeft: `1px solid ${borderColor}`,
+        backgroundColor: bgColor
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "16px 20px",
+              borderBottom: `1px solid ${borderColor}`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 16,
+                    fontWeight: 700,
+                    color: newtone.srgbToHex(tokens.textPrimary.srgb)
+                  },
+                  children: "newtone"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                PresetSelector,
+                {
+                  presets,
+                  activePresetId,
+                  publishedPresetId,
+                  onSwitchPreset,
+                  onCreatePreset,
+                  onRenamePreset,
+                  onDeletePreset,
+                  onDuplicatePreset
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden"
+            },
+            children: ACCORDION_SECTIONS.map((section) => {
+              const isOpen = openSections.has(section.id);
+              const isHovered = hoveredSectionId === section.id;
+              return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    onClick: () => toggleSection(section.id),
+                    onMouseEnter: () => setHoveredSectionId(section.id),
+                    onMouseLeave: () => setHoveredSectionId(null),
+                    "aria-expanded": isOpen,
+                    "aria-controls": `section-${section.id}`,
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      width: "100%",
+                      padding: "12px 20px",
+                      border: "none",
+                      borderBottom: `1px solid ${borderColor}`,
+                      background: isHovered ? hoverBg : "none",
+                      cursor: "pointer",
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: newtone.srgbToHex(tokens.textPrimary.srgb),
+                      transition: "background-color 100ms ease"
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(SectionIcon, { id: section.id }),
+                        section.label
+                      ] }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "svg",
+                        {
+                          width: 12,
+                          height: 12,
+                          viewBox: "0 0 24 24",
+                          fill: "none",
+                          stroke: "currentColor",
+                          strokeWidth: 2,
+                          style: {
+                            transform: isOpen ? "rotate(180deg)" : "none",
+                            transition: "transform 150ms ease"
+                          },
+                          children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
+                        }
+                      )
+                    ]
+                  }
+                ),
+                isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    id: `section-${section.id}`,
+                    role: "region",
+                    "aria-label": section.label,
+                    style: {
+                      padding: "16px 20px",
+                      borderBottom: `1px solid ${borderColor}`
+                    },
+                    children: renderSectionContent(section.id)
+                  }
+                )
+              ] }, section.id);
+            })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flexShrink: 0,
+              padding: "12px 20px",
+              borderTop: `1px solid ${borderColor}`
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                disabled: !isDirty,
+                onClick: onRevert,
+                "aria-label": "Revert all changes to the last saved version",
+                style: {
+                  width: "100%",
+                  padding: "8px 16px",
+                  borderRadius: 6,
+                  border: `1px solid ${borderColor}`,
+                  backgroundColor: "transparent",
+                  color: isDirty ? newtone.srgbToHex(tokens.textPrimary.srgb) : newtone.srgbToHex(tokens.textSecondary.srgb),
+                  fontSize: 13,
+                  cursor: isDirty ? "pointer" : "not-allowed",
+                  opacity: isDirty ? 1 : 0.5
+                },
+                children: "Revert Changes"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+var STATUS_LABEL = {
+  saved: "Saved",
+  saving: "Saving...",
+  unsaved: "Unsaved changes",
+  error: "Save failed"
+};
+function EditorHeader({
+  saveStatus,
+  isPublished,
+  publishing,
+  onPublish,
+  onRetry,
+  headerSlots
+}) {
+  const tokens = components.useTokens();
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const statusColor = {
+    saved: newtone.srgbToHex(tokens.success.srgb),
+    saving: newtone.srgbToHex(tokens.warning.srgb),
+    unsaved: newtone.srgbToHex(tokens.textSecondary.srgb),
+    error: newtone.srgbToHex(tokens.error.srgb)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "12px 24px",
+        borderBottom: `1px solid ${borderColor}`,
+        backgroundColor: newtone.srgbToHex(tokens.background.srgb),
+        flexShrink: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: 16 }, children: headerSlots?.left }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                color: statusColor[saveStatus],
+                fontWeight: 500
+              },
+              children: STATUS_LABEL[saveStatus]
+            }
+          ),
+          saveStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "sm", icon: "refresh", onPress: onRetry, children: "Retry" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Button,
+            {
+              variant: "primary",
+              size: "sm",
+              icon: "publish",
+              onPress: onPublish,
+              disabled: isPublished || publishing,
+              children: publishing ? "Publishing..." : isPublished ? "Published" : "Publish"
+            }
+          ),
+          headerSlots?.right
+        ] })
+      ]
+    }
+  );
+}
+var THEME_CHIPS = [
+  { id: "neutral", label: "Neutral" },
+  { id: "primary", label: "Primary" },
+  { id: "secondary", label: "Secondary" },
+  { id: "strong", label: "Strong" }
+];
+function ThemeBar({ activeTheme, onThemeChange }) {
+  const tokens = components.useTokens();
+  const [hoveredChipId, setHoveredChipId] = react.useState(null);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        padding: "8px 24px",
+        borderBottom: `1px solid ${borderColor}`,
+        backgroundColor: newtone.srgbToHex(tokens.background.srgb),
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 8 }, role: "group", "aria-label": "Theme", children: THEME_CHIPS.map((chip) => {
+        const isActive = chip.id === activeTheme;
+        const isHovered = hoveredChipId === chip.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onThemeChange(chip.id),
+            onMouseEnter: () => setHoveredChipId(chip.id),
+            onMouseLeave: () => setHoveredChipId(null),
+            "aria-pressed": isActive,
+            style: {
+              padding: "4px 12px",
+              borderRadius: 16,
+              border: `1px solid ${newtone.srgbToHex(
+                isActive ? tokens.interactive.srgb : tokens.border.srgb
+              )}`,
+              backgroundColor: isActive ? interactiveColor : isHovered ? `${interactiveColor}10` : "transparent",
+              color: isActive ? "#fff" : newtone.srgbToHex(tokens.textPrimary.srgb),
+              fontSize: 12,
+              fontWeight: 500,
+              cursor: "pointer",
+              transition: "background-color 150ms ease"
+            },
+            children: chip.label
+          },
+          chip.id
+        );
+      }) })
+    }
+  );
+}
+var TOC_WIDTH = 220;
+function TableOfContents({
+  activeView,
+  selectedComponentId,
+  onNavigate
+}) {
+  const tokens = components.useTokens();
+  const [hoveredId, setHoveredId] = react.useState(null);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const activeColor = newtone.srgbToHex(tokens.interactive.srgb);
+  const textPrimary = newtone.srgbToHex(tokens.textPrimary.srgb);
+  const textSecondary = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const hoverBg = `${borderColor}20`;
+  const isOverviewActive = activeView.kind === "overview";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "nav",
+    {
+      "aria-label": "Component navigation",
+      style: {
+        width: TOC_WIDTH,
+        flexShrink: 0,
+        overflowY: "auto",
+        borderRight: `1px solid ${borderColor}`,
+        padding: "16px 0",
+        backgroundColor: newtone.srgbToHex(tokens.background.srgb)
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onNavigate({ kind: "overview" }),
+            onMouseEnter: () => setHoveredId("overview"),
+            onMouseLeave: () => setHoveredId(null),
+            "aria-current": isOverviewActive ? "page" : void 0,
+            style: {
+              display: "block",
+              width: "100%",
+              padding: "6px 20px",
+              border: "none",
+              background: isOverviewActive ? `${activeColor}14` : hoveredId === "overview" ? hoverBg : "none",
+              cursor: "pointer",
+              textAlign: "left",
+              fontSize: 13,
+              fontWeight: isOverviewActive ? 600 : 400,
+              color: isOverviewActive ? activeColor : textPrimary,
+              transition: "background-color 100ms ease"
+            },
+            children: "Overview"
+          }
+        ),
+        components.CATEGORIES.map((category) => {
+          const components$1 = components.getComponentsByCategory(category.id);
+          const isCategoryActive = activeView.kind === "category" && activeView.categoryId === category.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 16 }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                onClick: () => onNavigate({ kind: "category", categoryId: category.id }),
+                onMouseEnter: () => setHoveredId(`cat-${category.id}`),
+                onMouseLeave: () => setHoveredId(null),
+                "aria-current": isCategoryActive ? "page" : void 0,
+                style: {
+                  display: "block",
+                  width: "100%",
+                  padding: "6px 20px",
+                  border: "none",
+                  background: isCategoryActive ? `${activeColor}14` : hoveredId === `cat-${category.id}` ? hoverBg : "none",
+                  cursor: "pointer",
+                  textAlign: "left",
+                  fontSize: 11,
+                  fontWeight: 600,
+                  color: isCategoryActive ? activeColor : textSecondary,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5,
+                  transition: "background-color 100ms ease"
+                },
+                children: category.name
+              }
+            ),
+            components$1.map((comp) => {
+              const isComponentActive = activeView.kind === "component" && activeView.componentId === comp.id || selectedComponentId === comp.id;
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => onNavigate({ kind: "component", componentId: comp.id }),
+                  onMouseEnter: () => setHoveredId(comp.id),
+                  onMouseLeave: () => setHoveredId(null),
+                  "aria-current": isComponentActive ? "page" : void 0,
+                  style: {
+                    display: "block",
+                    width: "100%",
+                    padding: "4px 20px 4px 32px",
+                    border: "none",
+                    background: isComponentActive ? `${activeColor}14` : hoveredId === comp.id ? hoverBg : "none",
+                    cursor: "pointer",
+                    textAlign: "left",
+                    fontSize: 13,
+                    fontWeight: isComponentActive ? 600 : 400,
+                    color: isComponentActive ? activeColor : textPrimary,
+                    transition: "background-color 100ms ease"
+                  },
+                  children: comp.name
+                },
+                comp.id
+              );
+            })
+          ] }, category.id);
+        })
+      ]
+    }
+  );
+}
+function StatefulToggle(props) {
+  const [value, setValue] = react.useState(props.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.Toggle, { ...props, value, onValueChange: setValue });
+}
+function StatefulSlider(props) {
+  const [value, setValue] = react.useState(props.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.Slider, { ...props, value, onValueChange: setValue });
+}
+function StatefulHueSlider(props) {
+  const [value, setValue] = react.useState(props.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.HueSlider, { ...props, value, onValueChange: setValue });
+}
+function StatefulTextInput(props) {
+  const [value, setValue] = react.useState(props.value ?? "");
+  return /* @__PURE__ */ jsxRuntime.jsx(components.TextInput, { ...props, value, onChangeText: setValue });
+}
+function StatefulSelect(props) {
+  const [value, setValue] = react.useState(props.value);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.Select, { ...props, value, onValueChange: setValue });
+}
+function CardPreview(props) {
+  const tokens = components.useTokens();
+  return /* @__PURE__ */ jsxRuntime.jsxs(components.Card, { ...props, style: { padding: 20, minWidth: 200 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          fontSize: 14,
+          fontWeight: 600,
+          color: newtone.srgbToHex(tokens.textPrimary.srgb),
+          marginBottom: 8
+        },
+        children: "Card Title"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          fontSize: 13,
+          color: newtone.srgbToHex(tokens.textSecondary.srgb),
+          lineHeight: 1.4
+        },
+        children: [
+          "Sample card content at elevation ",
+          String(props.elevation ?? 0),
+          "."
+        ]
+      }
+    )
+  ] });
+}
+function ComponentRenderer({ componentId, props }) {
+  const noop = react.useCallback(() => {
+  }, []);
+  switch (componentId) {
+    case "button": {
+      const icon = props.icon || void 0;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        components.Button,
+        {
+          variant: props.variant,
+          size: props.size,
+          icon,
+          iconPosition: props.iconPosition,
+          onPress: noop,
+          children: "Button"
+        }
+      );
+    }
+    case "text-input":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatefulTextInput, { ...props });
+    case "select":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatefulSelect, { ...props });
+    case "toggle":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatefulToggle, { ...props });
+    case "slider":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatefulSlider, { ...props });
+    case "hue-slider":
+      return /* @__PURE__ */ jsxRuntime.jsx(StatefulHueSlider, { ...props });
+    case "card":
+      return /* @__PURE__ */ jsxRuntime.jsx(CardPreview, { ...props });
+    default:
+      return null;
+  }
+}
+function OverviewView({
+  onNavigateToCategory,
+  onNavigateToComponent
+}) {
+  const tokens = components.useTokens();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        style: {
+          fontSize: 22,
+          fontWeight: 700,
+          color: newtone.srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+          marginBottom: 4
+        },
+        children: "Component Library"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        style: {
+          fontSize: 14,
+          color: newtone.srgbToHex(tokens.textSecondary.srgb),
+          margin: 0,
+          marginBottom: 32
+        },
+        children: "Browse components to see how your color system affects them."
+      }
+    ),
+    components.CATEGORIES.map((category) => {
+      const components$1 = components.getComponentsByCategory(category.id);
+      if (components$1.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginBottom: 32 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => onNavigateToCategory(category.id),
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+              margin: 0,
+              marginBottom: 16,
+              display: "block"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 16,
+                    fontWeight: 600,
+                    color: newtone.srgbToHex(tokens.textPrimary.srgb)
+                  },
+                  children: category.name
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 13,
+                    color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                    marginLeft: 8
+                  },
+                  children: category.description
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(240px, 1fr))",
+              gap: 16
+            },
+            children: components$1.map((component) => /* @__PURE__ */ jsxRuntime.jsx(
+              ComponentCard,
+              {
+                componentId: component.id,
+                name: component.name,
+                description: component.description,
+                defaultVariantProps: component.variants[0]?.props ?? {},
+                onClick: () => onNavigateToComponent(component.id)
+              },
+              component.id
+            ))
+          }
+        )
+      ] }, category.id);
+    })
+  ] });
+}
+function ComponentCard({
+  componentId,
+  name,
+  description,
+  defaultVariantProps,
+  onClick
+}) {
+  const tokens = components.useTokens();
+  const { isHovered, hoverProps } = useHover();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick,
+      ...hoverProps,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        padding: 20,
+        borderRadius: 12,
+        border: `1px solid ${newtone.srgbToHex(
+          isHovered ? tokens.interactive.srgb : tokens.border.srgb
+        )}`,
+        backgroundColor: newtone.srgbToHex(tokens.backgroundElevated.srgb),
+        cursor: "pointer",
+        textAlign: "left",
+        transform: isHovered ? "translateY(-1px)" : "none",
+        boxShadow: isHovered ? "0 2px 8px rgba(0,0,0,0.08)" : "none",
+        transition: "border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: 16,
+              marginBottom: 16,
+              borderRadius: 8,
+              backgroundColor: newtone.srgbToHex(tokens.background.srgb),
+              minHeight: 60
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(ComponentRenderer, { componentId, props: defaultVariantProps })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              fontSize: 14,
+              fontWeight: 600,
+              color: newtone.srgbToHex(tokens.textPrimary.srgb),
+              marginBottom: 4
+            },
+            children: name
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              fontSize: 12,
+              color: newtone.srgbToHex(tokens.textSecondary.srgb),
+              lineHeight: 1.4
+            },
+            children: description
+          }
+        )
+      ]
+    }
+  );
+}
+function CategoryView({
+  categoryId,
+  onNavigateToComponent
+}) {
+  const tokens = components.useTokens();
+  const category = components.getCategory(categoryId);
+  const components$1 = components.getComponentsByCategory(categoryId);
+  const [hoveredId, setHoveredId] = react.useState(null);
+  if (!category) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        style: {
+          fontSize: 22,
+          fontWeight: 700,
+          color: newtone.srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+          marginBottom: 4
+        },
+        children: category.name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        style: {
+          fontSize: 14,
+          color: newtone.srgbToHex(tokens.textSecondary.srgb),
+          margin: 0,
+          marginBottom: 32
+        },
+        children: category.description
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+          gap: 20
+        },
+        children: components$1.map((component) => {
+          const isHovered = hoveredId === component.id;
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => onNavigateToComponent(component.id),
+              onMouseEnter: () => setHoveredId(component.id),
+              onMouseLeave: () => setHoveredId(null),
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                padding: 24,
+                borderRadius: 12,
+                border: `1px solid ${newtone.srgbToHex(
+                  isHovered ? tokens.interactive.srgb : tokens.border.srgb
+                )}`,
+                backgroundColor: newtone.srgbToHex(tokens.backgroundElevated.srgb),
+                cursor: "pointer",
+                textAlign: "left",
+                transform: isHovered ? "translateY(-1px)" : "none",
+                boxShadow: isHovered ? "0 2px 8px rgba(0,0,0,0.08)" : "none",
+                transition: "border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: 20,
+                      marginBottom: 16,
+                      borderRadius: 8,
+                      backgroundColor: newtone.srgbToHex(tokens.background.srgb),
+                      minHeight: 60
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ComponentRenderer,
+                      {
+                        componentId: component.id,
+                        props: component.variants[0]?.props ?? {}
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 15,
+                      fontWeight: 600,
+                      color: newtone.srgbToHex(tokens.textPrimary.srgb),
+                      marginBottom: 4
+                    },
+                    children: component.name
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 13,
+                      color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                      lineHeight: 1.4
+                    },
+                    children: component.description
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 12,
+                      color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                      marginTop: 8
+                    },
+                    children: [
+                      component.variants.length,
+                      " variant",
+                      component.variants.length !== 1 ? "s" : ""
+                    ]
+                  }
+                )
+              ]
+            },
+            component.id
+          );
+        })
+      }
+    )
+  ] });
+}
+function ComponentDetailView({
+  componentId,
+  selectedVariantId,
+  propOverrides,
+  onSelectVariant
+}) {
+  const tokens = components.useTokens();
+  const component = components.getComponent(componentId);
+  const [hoveredId, setHoveredId] = react.useState(null);
+  if (!component) return null;
+  const interactiveColor = newtone.srgbToHex(tokens.interactive.srgb);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        style: {
+          fontSize: 22,
+          fontWeight: 700,
+          color: newtone.srgbToHex(tokens.textPrimary.srgb),
+          margin: 0,
+          marginBottom: 4
+        },
+        children: component.name
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        style: {
+          fontSize: 14,
+          color: newtone.srgbToHex(tokens.textSecondary.srgb),
+          margin: 0,
+          marginBottom: 32
+        },
+        children: component.description
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+          gap: 16
+        },
+        children: component.variants.map((variant) => {
+          const isSelected = selectedVariantId === variant.id;
+          const isHovered = hoveredId === variant.id;
+          const borderColor = isSelected ? interactiveColor : isHovered ? `${interactiveColor}66` : newtone.srgbToHex(tokens.border.srgb);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              onClick: () => onSelectVariant(variant.id),
+              onMouseEnter: () => setHoveredId(variant.id),
+              onMouseLeave: () => setHoveredId(null),
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "stretch",
+                padding: 16,
+                borderRadius: 12,
+                border: `2px solid ${borderColor}`,
+                backgroundColor: newtone.srgbToHex(tokens.backgroundElevated.srgb),
+                cursor: "pointer",
+                textAlign: "left",
+                transition: "border-color 150ms ease"
+              },
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      padding: 20,
+                      marginBottom: 12,
+                      borderRadius: 8,
+                      backgroundColor: newtone.srgbToHex(tokens.background.srgb),
+                      minHeight: 56
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ComponentRenderer,
+                      {
+                        componentId,
+                        props: isSelected && propOverrides ? { ...variant.props, ...propOverrides } : variant.props
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 13,
+                      fontWeight: isSelected ? 600 : 500,
+                      color: isSelected ? interactiveColor : newtone.srgbToHex(tokens.textPrimary.srgb)
+                    },
+                    children: variant.label
+                  }
+                )
+              ]
+            },
+            variant.id
+          );
+        })
+      }
+    )
+  ] });
+}
+function PreviewWindow({
+  view,
+  selectedVariantId,
+  propOverrides,
+  onNavigate,
+  onSelectVariant
+}) {
+  const tokens = components.useTokens();
+  const handleNavigateToCategory = react.useCallback(
+    (categoryId) => onNavigate({ kind: "category", categoryId }),
+    [onNavigate]
+  );
+  const handleNavigateToComponent = react.useCallback(
+    (componentId) => onNavigate({ kind: "component", componentId }),
+    [onNavigate]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        backgroundColor: newtone.srgbToHex(tokens.background.srgb)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, overflowY: "auto" }, children: [
+        view.kind === "overview" && /* @__PURE__ */ jsxRuntime.jsx(
+          OverviewView,
+          {
+            onNavigateToCategory: handleNavigateToCategory,
+            onNavigateToComponent: handleNavigateToComponent
+          }
+        ),
+        view.kind === "category" && /* @__PURE__ */ jsxRuntime.jsx(
+          CategoryView,
+          {
+            categoryId: view.categoryId,
+            onNavigateToComponent: handleNavigateToComponent
+          }
+        ),
+        view.kind === "component" && /* @__PURE__ */ jsxRuntime.jsx(
+          ComponentDetailView,
+          {
+            componentId: view.componentId,
+            selectedVariantId,
+            propOverrides,
+            onSelectVariant
+          }
+        )
+      ] })
+    }
+  );
+}
+function CopyButton({ text }) {
+  const [copied, setCopied] = react.useState(false);
+  const handleCopy = react.useCallback(async () => {
+    await navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2e3);
+  }, [text]);
+  return /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "ghost", size: "sm", icon: copied ? "check" : "content_copy", onPress: handleCopy, children: copied ? "Copied!" : "Copy" });
+}
+function CodeBlock({
+  code
+}) {
+  const tokens = components.useTokens();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 8,
+          right: 8
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(CopyButton, { text: code })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "pre",
+      {
+        style: {
+          backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+          border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+          borderRadius: 8,
+          padding: 16,
+          paddingRight: 80,
+          overflow: "auto",
+          fontSize: 13,
+          lineHeight: 1.5,
+          fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",
+          color: newtone.srgbToHex(tokens.textPrimary.srgb),
+          margin: 0
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code })
+      }
+    )
+  ] });
+}
+function RightSidebar({
+  selection,
+  propOverrides,
+  onPropOverride,
+  onResetOverrides,
+  onClose,
+  onScopeToComponent
+}) {
+  const tokens = components.useTokens();
+  const visible = selection !== null;
+  const component = selection ? components.getComponent(selection.componentId) : null;
+  const variant = selection?.scope === "variant" ? component?.variants.find((v) => v.id === selection.variantId) : null;
+  const code = component ? components.generateComponentCode(component, propOverrides) : "";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "aside",
+    {
+      "aria-label": "Component inspector",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 1,
+        transform: visible ? "translateX(0)" : "translateX(100%)",
+        opacity: visible ? 1 : 0,
+        transition: "transform 200ms ease, opacity 150ms ease",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: newtone.srgbToHex(tokens.background.srgb),
+        borderLeft: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`
+      },
+      children: selection && component && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              padding: "12px 16px",
+              borderBottom: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+              flexShrink: 0
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onClose,
+                  "aria-label": "Back to controls",
+                  style: {
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    padding: 4,
+                    color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                    fontSize: 16,
+                    lineHeight: 1,
+                    flexShrink: 0,
+                    display: "flex",
+                    alignItems: "center"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsxs(
+                    "svg",
+                    {
+                      width: 16,
+                      height: 16,
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: 2,
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "12", x2: "5", y2: "12" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "12 19 5 12 12 5" })
+                      ]
+                    }
+                  )
+                }
+              ),
+              selection.scope === "variant" && variant ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: onScopeToComponent,
+                    "aria-label": `Back to ${component.name} overview`,
+                    style: {
+                      background: "none",
+                      border: "none",
+                      cursor: "pointer",
+                      padding: 0,
+                      fontSize: 14,
+                      fontWeight: 500,
+                      color: newtone.srgbToHex(tokens.interactive.srgb),
+                      whiteSpace: "nowrap"
+                    },
+                    children: component.name
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 13,
+                      color: newtone.srgbToHex(tokens.textSecondary.srgb)
+                    },
+                    children: "/"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    style: {
+                      fontSize: 14,
+                      fontWeight: 600,
+                      color: newtone.srgbToHex(tokens.textPrimary.srgb),
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    },
+                    children: variant.label
+                  }
+                )
+              ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 600,
+                    color: newtone.srgbToHex(tokens.textPrimary.srgb)
+                  },
+                  children: component.name
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              padding: 16
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    margin: 0,
+                    marginBottom: 16
+                  },
+                  children: "Properties"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: component.editableProps.map((prop) => /* @__PURE__ */ jsxRuntime.jsx(
+                PropControl,
+                {
+                  prop,
+                  value: propOverrides[prop.name] ?? prop.defaultValue,
+                  onChange: (value) => onPropOverride(prop.name, value)
+                },
+                prop.name
+              )) }),
+              selection.scope === "variant" && /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: onResetOverrides,
+                  "aria-label": "Reset properties to variant defaults",
+                  style: {
+                    marginTop: 20,
+                    width: "100%",
+                    padding: "8px 12px",
+                    borderRadius: 6,
+                    border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+                    backgroundColor: "transparent",
+                    color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                    fontSize: 13,
+                    cursor: "pointer"
+                  },
+                  children: "Reset to variant defaults"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 600,
+                    color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    margin: 0,
+                    marginTop: 24,
+                    marginBottom: 12
+                  },
+                  children: "Code"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, { code })
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+function PropControl({
+  prop,
+  value,
+  onChange
+}) {
+  const tokens = components.useTokens();
+  const handleToggleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === " " || e.key === "Enter") {
+        e.preventDefault();
+        onChange(!value);
+      }
+    },
+    [onChange, value]
+  );
+  const inputStyle = {
+    width: "100%",
+    padding: "6px 10px",
+    borderRadius: 6,
+    border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+    backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+    color: newtone.srgbToHex(tokens.textPrimary.srgb),
+    fontSize: 13,
+    fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+    boxSizing: "border-box"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          marginBottom: 4
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                fontWeight: 500,
+                color: newtone.srgbToHex(tokens.textPrimary.srgb)
+              },
+              children: prop.label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 11,
+                color: newtone.srgbToHex(tokens.textSecondary.srgb),
+                fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace"
+              },
+              children: prop.control
+            }
+          )
+        ]
+      }
+    ),
+    prop.control === "select" && prop.options && /* @__PURE__ */ jsxRuntime.jsx(
+      components.Select,
+      {
+        options: prop.options.map((o) => ({
+          label: o.label,
+          value: String(o.value)
+        })),
+        value: String(value),
+        onValueChange: (v) => {
+          const option = prop.options.find((o) => String(o.value) === v);
+          if (option) onChange(option.value);
+        },
+        size: "sm"
+      }
+    ),
+    prop.control === "text" && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        value: String(value),
+        onChange: (e) => onChange(e.target.value),
+        style: inputStyle
+      }
+    ),
+    prop.control === "number" && /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "number",
+        value: Number(value),
+        onChange: (e) => onChange(Number(e.target.value)),
+        style: inputStyle
+      }
+    ),
+    prop.control === "toggle" && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "switch",
+        "aria-checked": !!value,
+        "aria-label": prop.label,
+        tabIndex: 0,
+        onClick: () => onChange(!value),
+        onKeyDown: handleToggleKeyDown,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8,
+          cursor: "pointer"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                width: 36,
+                height: 20,
+                borderRadius: 10,
+                backgroundColor: value ? newtone.srgbToHex(tokens.interactive.srgb) : newtone.srgbToHex(tokens.border.srgb),
+                position: "relative",
+                transition: "background-color 150ms ease",
+                flexShrink: 0
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    width: 16,
+                    height: 16,
+                    borderRadius: 8,
+                    backgroundColor: "#fff",
+                    position: "absolute",
+                    top: 2,
+                    left: value ? 18 : 2,
+                    transition: "left 150ms ease"
+                  }
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 12,
+                color: newtone.srgbToHex(tokens.textSecondary.srgb)
+              },
+              children: value ? "true" : "false"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function Editor({
+  initialState,
+  initialIsPublished,
+  initialPresets,
+  initialActivePresetId,
+  initialPublishedPresetId,
+  defaultState,
+  chromeThemeConfig,
+  persistence,
+  headerSlots,
+  onNavigate,
+  initialPreviewView
+}) {
+  const editor = useEditorState({
+    initialState,
+    initialIsPublished,
+    initialPresets,
+    initialActivePresetId,
+    initialPublishedPresetId,
+    defaultState,
+    persistence,
+    onNavigate,
+    initialPreviewView
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(components.NewtoneProvider, { config: chromeThemeConfig, children: /* @__PURE__ */ jsxRuntime.jsx(
+    EditorShell,
+    {
+      sidebar: /* @__PURE__ */ jsxRuntime.jsx(
+        Sidebar,
+        {
+          state: editor.configuratorState,
+          dispatch: editor.dispatch,
+          previewColors: editor.previewColors,
+          isDirty: editor.isDirty,
+          onRevert: editor.handleRevert,
+          presets: editor.presets,
+          activePresetId: editor.activePresetId,
+          publishedPresetId: editor.publishedPresetId,
+          onSwitchPreset: editor.switchPreset,
+          onCreatePreset: editor.createPreset,
+          onRenamePreset: editor.renamePreset,
+          onDeletePreset: editor.deletePreset,
+          onDuplicatePreset: editor.duplicatePreset,
+          colorMode: editor.colorMode,
+          onColorModeChange: editor.handleColorModeChange
+        }
+      ),
+      navbar: /* @__PURE__ */ jsxRuntime.jsx(
+        EditorHeader,
+        {
+          saveStatus: editor.saveStatus,
+          isPublished: editor.isPublished,
+          publishing: editor.publishing,
+          onPublish: editor.handlePublish,
+          onRetry: () => editor.saveDraft(editor.latestStateRef.current),
+          headerSlots
+        }
+      ),
+      content: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          style: {
+            flex: 1,
+            display: "flex",
+            overflow: "hidden",
+            minWidth: 0
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              TableOfContents,
+              {
+                activeView: editor.previewView,
+                selectedComponentId: editor.selectedComponentId,
+                onNavigate: editor.handlePreviewNavigate
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                style: {
+                  flex: 1,
+                  display: "flex",
+                  flexDirection: "column",
+                  overflow: "hidden",
+                  minWidth: 0
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  components.NewtoneProvider,
+                  {
+                    config: editor.themeConfig,
+                    initialMode: editor.colorMode,
+                    initialTheme: editor.activeTheme,
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        ThemeBar,
+                        {
+                          activeTheme: editor.activeTheme,
+                          onThemeChange: editor.handleThemeChange
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1, overflowY: "auto", minWidth: 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                        PreviewWindow,
+                        {
+                          view: editor.previewView,
+                          selectedVariantId: editor.selectedVariantId,
+                          propOverrides: editor.propOverrides,
+                          onNavigate: editor.handlePreviewNavigate,
+                          onSelectVariant: editor.handleSelectVariant
+                        }
+                      ) })
+                    ]
+                  },
+                  `${editor.colorMode}-${editor.activeTheme}`
+                )
+              }
+            )
+          ]
+        }
+      ),
+      rightPanel: /* @__PURE__ */ jsxRuntime.jsx(
+        RightSidebar,
+        {
+          selection: editor.sidebarSelection,
+          propOverrides: editor.propOverrides,
+          onPropOverride: editor.handlePropOverride,
+          onResetOverrides: editor.handleResetOverrides,
+          onClose: editor.handleCloseSidebar,
+          onScopeToComponent: editor.handleScopeToComponent
+        }
+      )
+    }
+  ) });
+}
+
+exports.CategoryView = CategoryView;
+exports.CodeBlock = CodeBlock;
+exports.ColorsSection = ColorsSection;
+exports.ComponentDetailView = ComponentDetailView;
+exports.ComponentRenderer = ComponentRenderer;
+exports.CopyButton = CopyButton;
+exports.Editor = Editor;
+exports.EditorHeader = EditorHeader;
+exports.EditorShell = EditorShell;
+exports.FontPicker = FontPicker;
+exports.FontsSection = FontsSection;
+exports.IconsSection = IconsSection;
+exports.OthersSection = OthersSection;
+exports.OverviewView = OverviewView;
+exports.PresetSelector = PresetSelector;
+exports.PreviewWindow = PreviewWindow;
+exports.RightSidebar = RightSidebar;
+exports.Sidebar = Sidebar;
+exports.TableOfContents = TableOfContents;
+exports.ThemeBar = ThemeBar;
+exports.findPreset = findPreset;
+exports.presetHasUnpublishedChanges = presetHasUnpublishedChanges;
+exports.updatePresetInArray = updatePresetInArray;
+exports.useEditorState = useEditorState;
+exports.useHover = useHover;
+exports.usePresets = usePresets;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map