@newtonedev/editor 0.1.6 → 0.1.7

package/dist/index.cjs

@@ -193,6 +193,53 @@ function usePresets({
     revertActivePreset
   };
 }
+async function measureFontCalibrations(fonts) {
+  if (!fonts || typeof document === "undefined") return {};
+  const calibrations = {};
+  const seen = /* @__PURE__ */ new Set();
+  for (const slot of Object.values(fonts)) {
+    const { family, fallback } = slot.config;
+    if (seen.has(family)) continue;
+    seen.add(family);
+    const ratio = await components.measureAvgCharWidth(
+      family,
+      slot.weights.regular,
+      fallback
+    );
+    calibrations[family] = ratio;
+  }
+  return calibrations;
+}
+
+// src/utils/lookupFontMetrics.ts
+async function lookupFontMetrics(fonts, manifestUrl) {
+  if (!fonts || !manifestUrl) return {};
+  try {
+    const res = await fetch(manifestUrl);
+    if (!res.ok) return {};
+    const manifest = await res.json();
+    const result = {};
+    const seen = /* @__PURE__ */ new Set();
+    for (const slot of Object.values(fonts)) {
+      const family = slot.config.family;
+      if (seen.has(family)) continue;
+      seen.add(family);
+      const entry = manifest.families?.[family];
+      if (entry?.metrics) {
+        result[family] = {
+          naturalLineHeightRatio: entry.metrics.naturalLineHeightRatio,
+          verticalCenterOffset: entry.metrics.verticalCenterOffset,
+          features: entry.metrics.features ?? []
+        };
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+
+// src/hooks/useEditorState.ts
 function useEditorState({
   initialState,
   initialIsPublished,
@@ -202,7 +249,8 @@ function useEditorState({
   defaultState,
   persistence,
   onNavigate,
-  initialPreviewView
+  initialPreviewView,
+  manifestUrl
 }) {
   const {
     state: configuratorState,
@@ -219,6 +267,9 @@ function useEditorState({
   const [previewView, setPreviewView] = react.useState(
     initialPreviewView ?? { kind: "overview" }
   );
+  const [activeSectionId, setActiveSectionId] = react.useState(
+    components.CATEGORIES[0]?.id ?? "colors"
+  );
   const [sidebarSelection, setSidebarSelection] = react.useState(null);
   const [propOverrides, setPropOverrides] = react.useState(
     {}
@@ -300,10 +351,11 @@ function useEditorState({
       setPreviewView(view);
       onNavigate?.(view);
       if (view.kind === "component") {
-        setSidebarSelection({
-          scope: "component",
-          componentId: view.componentId
-        });
+        const comp = components.getComponent(view.componentId);
+        const firstVariantId = comp?.variants[0]?.id;
+        setSidebarSelection(
+          firstVariantId ? { scope: "variant", componentId: view.componentId, variantId: firstVariantId } : { scope: "component", componentId: view.componentId }
+        );
         initOverridesFromVariant(view.componentId);
       } else {
         setSidebarSelection(null);
@@ -312,6 +364,30 @@ function useEditorState({
     },
     [onNavigate, initOverridesFromVariant]
   );
+  const handleSectionChange = react.useCallback(
+    (sectionId) => {
+      setActiveSectionId(sectionId);
+      const sectionComponents = components.getComponentsByCategory(sectionId);
+      if (sectionComponents.length === 1) {
+        const comp = sectionComponents[0];
+        const view = { kind: "component", componentId: comp.id };
+        setPreviewView(view);
+        onNavigate?.(view);
+        const firstVariantId = comp.variants[0]?.id;
+        setSidebarSelection(
+          firstVariantId ? { scope: "variant", componentId: comp.id, variantId: firstVariantId } : { scope: "component", componentId: comp.id }
+        );
+        initOverridesFromVariant(comp.id);
+      } else {
+        const view = { kind: "category", categoryId: sectionId };
+        setPreviewView(view);
+        onNavigate?.(view);
+        setSidebarSelection(null);
+        setPropOverrides({});
+      }
+    },
+    [onNavigate, initOverridesFromVariant]
+  );
   const handleSelectVariant = react.useCallback(
     (variantId) => {
       if (previewView.kind === "component") {
@@ -399,17 +475,23 @@ function useEditorState({
     setPublishing(true);
     const currentState = latestStateRef.current;
     const updatedPresets = publishActivePreset(currentState);
+    const [calibrations, fontMetrics] = await Promise.all([
+      measureFontCalibrations(currentState.typography?.fonts),
+      lookupFontMetrics(currentState.typography?.fonts, manifestUrl)
+    ]);
     const { error } = await persistence.onPublish({
       state: currentState,
       presets: updatedPresets,
-      activePresetId
+      activePresetId,
+      calibrations,
+      fontMetrics
     });
     if (!error) {
       setSaveStatus("saved");
       setIsPublished(true);
     }
     setPublishing(false);
-  }, [activePresetId, publishActivePreset, persistence]);
+  }, [activePresetId, publishActivePreset, persistence, manifestUrl]);
   react.useEffect(() => {
     const handleBeforeUnload = (e) => {
       if (saveStatus === "unsaved" || saveStatus === "saving") {
@@ -448,7 +530,9 @@ function useEditorState({
     // Preview
     previewView,
     colorMode,
+    activeSectionId,
     handlePreviewNavigate,
+    handleSectionChange,
     handleSelectVariant,
     handleColorModeChange,
     // Sidebar
@@ -540,2076 +624,1994 @@ function EditorShell({
     }
   );
 }
-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
+function PresetSelector({
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset
 }) {
   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.accent.fill.srgb);
+  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 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]);
+  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.accent.fill.srgb);
+  const warningColor = newtone.srgbToHex(tokens.warning.fill.srgb);
+  const errorColor = newtone.srgbToHex(tokens.error.fill.srgb);
+  const hoverBg = `${borderColor}18`;
+  const activeBg = `${interactiveColor}14`;
   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 } : {}
+    if (!isOpen) return;
+    const handleClickOutside = (e) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
+        setIsOpen(false);
+        setMenuOpenId(null);
+        setRenamingId(null);
+      }
     };
-  }, [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;
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (renamingId && renameInputRef.current) {
+      renameInputRef.current.focus();
+      renameInputRef.current.select();
     }
-    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)`;
+  }, [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());
     }
-    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",
+    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",
       {
-        style: { display: "flex", flexDirection: "column", gap: 8 },
+        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(
-            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",
+            "span",
             {
               style: {
-                display: "flex",
-                gap: 8,
-                alignItems: "flex-end"
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
               },
-              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"
-                  }
-                )
-              ]
+              children: activePreset?.name ?? "Default"
             }
           ),
-          hexError && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.Icon,
             {
+              name: "expand_more",
+              size: 14,
               style: {
-                fontSize: 12,
-                fontWeight: 500,
-                color: newtone.srgbToHex(tokens.error.fill.srgb)
-              },
-              children: hexError
+                transform: isOpen ? "rotate(180deg)" : "none",
+                transition: "transform 150ms ease",
+                flexShrink: 0
+              }
             }
           )
         ]
       }
-    )),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
       "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.accent.fill.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"
-      }
-    }
-  );
-}
-var GRAPH_HEIGHT = 80;
-var GRAPH_COLS = 256;
-var GRAPH_ROWS = 64;
-function strengthToFactor(strength) {
-  switch (strength) {
-    case "none":
-      return 0;
-    case "low":
-      return newtone.HUE_GRADING_STRENGTH_LOW;
-    case "medium":
-      return newtone.HUE_GRADING_STRENGTH_MEDIUM;
-    case "hard":
-      return newtone.HUE_GRADING_STRENGTH_HARD;
-  }
-}
-function blendHues(lightHue, darkHue, wLight, wDark) {
-  const totalW = wLight + wDark;
-  if (totalW === 0) return 0;
-  const delta = ((darkHue - lightHue + 180) % 360 + 360) % 360 - 180;
-  const t = wDark / totalW;
-  const result = lightHue + delta * t;
-  return (result % 360 + 360) % 360;
-}
-function computeGraphData(state) {
-  const { dynamicRange, globalHueGrading } = state;
-  const lightActive = globalHueGrading.light.strength !== "none";
-  const darkActive = globalHueGrading.dark.strength !== "none";
-  const lightOklchHue = configurator.traditionalHueToOklch(globalHueGrading.light.hue);
-  const darkOklchHue = configurator.traditionalHueToOklch(globalHueGrading.dark.hue);
-  const lightFactor = strengthToFactor(globalHueGrading.light.strength);
-  const darkFactor = strengthToFactor(globalHueGrading.dark.strength);
-  const buffer = new Uint8ClampedArray(GRAPH_COLS * GRAPH_ROWS * 4);
-  for (let col = 0; col < GRAPH_COLS; col++) {
-    const nv = 1 - col / (GRAPH_COLS - 1);
-    const L = newtone.resolveLightness(dynamicRange, nv);
-    const wLight = lightActive ? Math.pow(nv, newtone.HUE_GRADING_EASING_POWER) : 0;
-    const wDark = darkActive ? Math.pow(1 - nv, newtone.HUE_GRADING_EASING_POWER) : 0;
-    const totalW = wLight + wDark;
-    let topHue;
-    let topChroma;
-    if (totalW === 0) {
-      topHue = 0;
-      topChroma = 0;
-    } else {
-      if (!lightActive) {
-        topHue = darkOklchHue;
-      } else if (!darkActive) {
-        topHue = lightOklchHue;
-      } else {
-        topHue = blendHues(lightOklchHue, darkOklchHue, wLight, wDark);
-      }
-      topChroma = newtone.findMaxChromaInGamut(L, topHue) * Math.min(totalW, 1);
-    }
-    for (let row = 0; row < GRAPH_ROWS; row++) {
-      const gradingIntensity = row / (GRAPH_ROWS - 1);
-      const C = topChroma * gradingIntensity;
-      const srgb = newtone.clampSrgb(newtone.oklchToSrgb({ L, C, h: topHue }));
-      const canvasY = GRAPH_ROWS - 1 - row;
-      const idx = (canvasY * GRAPH_COLS + col) * 4;
-      buffer[idx] = Math.round(srgb.r * 255);
-      buffer[idx + 1] = Math.round(srgb.g * 255);
-      buffer[idx + 2] = Math.round(srgb.b * 255);
-      buffer[idx + 3] = 255;
-    }
-  }
-  const curvePoints = [];
-  for (let i = 0; i < 26; i++) {
-    const nv = 1 - i / 25;
-    const x = i / 25 * (GRAPH_COLS - 1);
-    const lightContrib = Math.pow(nv, newtone.HUE_GRADING_EASING_POWER) * (lightFactor / newtone.HUE_GRADING_STRENGTH_HARD);
-    const darkContrib = Math.pow(1 - nv, newtone.HUE_GRADING_EASING_POWER) * (darkFactor / newtone.HUE_GRADING_STRENGTH_HARD);
-    const y = clamp(lightContrib + darkContrib, 0, 1);
-    curvePoints.push({ x, y });
-  }
-  return { buffer, curvePoints };
-}
-function DynamicRangeGraph({ state }) {
-  const tokens = components.useTokens();
-  const canvasRef = react.useRef(null);
-  const graphData = react.useMemo(
-    () => computeGraphData(state),
-    [
-      state.dynamicRange.lightest,
-      state.dynamicRange.darkest,
-      state.globalHueGrading.light.strength,
-      state.globalHueGrading.light.hue,
-      state.globalHueGrading.dark.strength,
-      state.globalHueGrading.dark.hue
-    ]
-  );
-  react.useEffect(() => {
-    const canvas = canvasRef.current;
-    if (!canvas) return;
-    canvas.width = GRAPH_COLS;
-    canvas.height = GRAPH_ROWS;
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
-    const imageData = ctx.createImageData(GRAPH_COLS, GRAPH_ROWS);
-    imageData.data.set(graphData.buffer);
-    ctx.putImageData(imageData, 0, 0);
-    const curveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
-    const { curvePoints } = graphData;
-    if (curvePoints.length < 2) return;
-    const mapped = curvePoints.map((p) => ({
-      cx: p.x,
-      cy: (1 - p.y) * (GRAPH_ROWS - 1)
-    }));
-    ctx.beginPath();
-    ctx.strokeStyle = curveColor;
-    ctx.lineWidth = 1.5;
-    ctx.lineJoin = "round";
-    ctx.lineCap = "round";
-    ctx.moveTo(mapped[0].cx, mapped[0].cy);
-    for (let i = 0; i < mapped.length - 1; i++) {
-      const p0 = mapped[Math.max(0, i - 1)];
-      const p1 = mapped[i];
-      const p2 = mapped[i + 1];
-      const p3 = mapped[Math.min(mapped.length - 1, i + 2)];
-      const cp1x = p1.cx + (p2.cx - p0.cx) / 6;
-      const cp1y = p1.cy + (p2.cy - p0.cy) / 6;
-      const cp2x = p2.cx - (p3.cx - p1.cx) / 6;
-      const cp2y = p2.cy - (p3.cy - p1.cy) / 6;
-      ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, p2.cx, p2.cy);
-    }
-    ctx.stroke();
-    ctx.fillStyle = curveColor;
-    for (const p of mapped) {
-      ctx.beginPath();
-      ctx.arc(p.cx, p.cy, 2, 0, Math.PI * 2);
-      ctx.fill();
-    }
-  }, [graphData, tokens]);
-  const borderColor = newtone.srgbToHex(tokens.border.srgb);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "canvas",
-    {
-      ref: canvasRef,
-      style: {
-        width: "100%",
-        height: GRAPH_HEIGHT,
-        borderRadius: 6,
-        border: `1px solid ${borderColor}`,
-        display: "block",
-        overflow: "hidden"
-      }
-    }
-  );
-}
-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.jsx(DynamicRangeGraph, { state }),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center"
+          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("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.accent.fill.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",
+          /* @__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.jsx(components.Icon, { name: "more_vert", size: 14, color: textSecondary })
+                      }
+                    )
+                  ] }),
+                  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: {
-                fontSize: 12,
-                color: textColor,
-                fontFamily: `${fontFamily}, ${currentFont.fallback}`,
-                maxWidth: 140,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
+                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: currentFont.family
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name: "add", size: 14, color: textSecondary }),
+                "New preset"
+              ]
             }
           )
         ]
       }
-    ),
-    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: [
+    )
+  ] });
+}
+var SIDEBAR_WIDTH2 = 360;
+function Sidebar({
+  isDirty,
+  onRevert,
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset
+}) {
+  const tokens = components.useTokens();
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const bgColor = newtone.srgbToHex(tokens.background.srgb);
+  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(
-                "div",
+                "span",
                 {
                   style: {
-                    fontSize: 10,
-                    fontWeight: 600,
-                    color: labelColor,
-                    textTransform: "uppercase",
-                    letterSpacing: 0.5,
-                    padding: "6px 12px 2px"
+                    fontSize: 16,
+                    fontWeight: 700,
+                    color: newtone.srgbToHex(tokens.textPrimary.srgb)
                   },
-                  children: "System"
+                  children: "newtone"
                 }
               ),
-              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",
+                PresetSelector,
                 {
-                  style: {
-                    fontSize: 10,
-                    fontWeight: 600,
-                    color: labelColor,
-                    textTransform: "uppercase",
-                    letterSpacing: 0.5,
-                    padding: "8px 12px 2px"
-                  },
-                  children: CATEGORY_LABELS[category] ?? category
+                  presets,
+                  activePresetId,
+                  publishedPresetId,
+                  onSwitchPreset,
+                  onCreatePreset,
+                  onRenamePreset,
+                  onDeletePreset,
+                  onDuplicatePreset
                 }
-              ),
-              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",
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden"
+            }
+          }
+        ),
+        /* @__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: {
-                  padding: "12px",
-                  fontSize: 12,
-                  color: labelColor,
-                  textAlign: "center"
+                  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: "No fonts found"
+                children: "Revert Changes"
               }
             )
-          ] })
-        ]
-      }
-    )
-  ] });
-}
-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"
+var STATUS_LABEL = {
+  saved: "Saved",
+  saving: "Saving...",
+  unsaved: "Unsaved changes",
+  error: "Save failed"
 };
-function FontsSection({ state, dispatch }) {
+function EditorHeader({
+  saveStatus,
+  isPublished,
+  publishing,
+  onPublish,
+  onRetry,
+  headerSlots
+}) {
   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 });
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const statusColor = {
+    saved: newtone.srgbToHex(tokens.success.fill.srgb),
+    saving: newtone.srgbToHex(tokens.warning.fill.srgb),
+    unsaved: newtone.srgbToHex(tokens.textSecondary.srgb),
+    error: newtone.srgbToHex(tokens.error.fill.srgb)
   };
-  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 spacingPreset = state.spacing?.preset ?? "md";
-  const intensity = state.roundness?.intensity ?? 0.5;
-  const spacingOptions = [
-    { value: "xs", label: "Extra Small" },
-    { value: "sm", label: "Small" },
-    { value: "md", label: "Medium" },
-    { value: "lg", label: "Large" },
-    { value: "xl", label: "Extra Large" }
-  ];
-  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.Select,
-        {
-          value: spacingPreset,
-          onValueChange: (preset) => dispatch({ type: "SET_SPACING_PRESET", preset }),
-          options: spacingOptions,
-          label: "Preset"
-        }
-      )
-    ] }),
-    /* @__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.accent.fill.srgb);
-  const warningColor = newtone.srgbToHex(tokens.warning.fill.srgb);
-  const errorColor = newtone.srgbToHex(tokens.error.fill.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: [
+  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: {
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap"
+                fontSize: 12,
+                color: statusColor[saveStatus],
+                fontWeight: 500
               },
-              children: activePreset?.name ?? "Default"
+              children: STATUS_LABEL[saveStatus]
             }
           ),
+          saveStatus === "error" && /* @__PURE__ */ jsxRuntime.jsx(components.Button, { variant: "tertiary", semantic: "neutral", size: "sm", icon: "refresh", onPress: onRetry, children: "Retry" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            components.Icon,
+            components.Button,
             {
-              name: "expand_more",
-              size: 14,
-              style: {
-                transform: isOpen ? "rotate(180deg)" : "none",
-                transition: "transform 150ms ease",
-                flexShrink: 0
-              }
-            }
-          )
-        ]
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
+              variant: "primary",
+              size: "sm",
+              icon: "publish",
+              onPress: onPublish,
+              disabled: isPublished || publishing,
+              children: publishing ? "Publishing..." : isPublished ? "Published" : "Publish"
+            }
+          ),
+          headerSlots?.right
+        ] })
+      ]
+    }
+  );
+}
+var NAV_WIDTH = 60;
+function PrimaryNav({ activeSectionId, onSelectSection }) {
+  const tokens = components.useTokens();
+  const [hoveredId, setHoveredId] = react.useState(null);
+  const bg = newtone.srgbToHex(tokens.background.srgb);
+  const borderColor = newtone.srgbToHex(tokens.border.srgb);
+  const activeBg = newtone.srgbToHex(tokens.backgroundInteractive.srgb);
+  const iconColor = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const activeIconColor = newtone.srgbToHex(tokens.textPrimary.srgb);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      "aria-label": "Section navigation",
+      style: {
+        width: NAV_WIDTH,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        paddingTop: 12,
+        gap: 4,
+        backgroundColor: bg,
+        borderRight: `1px solid ${borderColor}`
+      },
+      children: components.CATEGORIES.map((category) => {
+        const isActive = activeSectionId === category.id;
+        const isHovered = hoveredId === category.id;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => onSelectSection(category.id),
+            onMouseEnter: () => setHoveredId(category.id),
+            onMouseLeave: () => setHoveredId(null),
+            title: category.name,
+            "aria-current": isActive ? "page" : void 0,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 44,
+              height: 44,
+              borderRadius: 12,
+              border: "none",
+              backgroundColor: isActive ? activeBg : isHovered ? `${borderColor}20` : "transparent",
+              cursor: "pointer",
+              transition: "background-color 150ms"
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              components.Icon,
+              {
+                name: category.icon ?? "circle",
+                size: 24,
+                color: isActive ? activeIconColor : iconColor
+              }
+            )
+          },
+          category.id
+        );
+      })
+    }
+  );
+}
+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.accent.fill.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: {
-          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"
-        },
+          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("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.jsx(components.Icon, { name: "more_vert", size: 14, color: textSecondary })
-                      }
-                    )
-                  ] }),
-                  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"
-                          }
-                        )
-                      ]
-                    }
-                  )
-                ]
+          /* @__PURE__ */ jsxRuntime.jsx(
+            components.ColorScaleSlider,
+            {
+              colors: currentPreview,
+              value: effectiveKeyColor ?? wcag.autoNormalizedValue,
+              onValueChange: (nv) => {
+                setIsHexUserSet(false);
+                dispatch({
+                  type: setKeyColorAction,
+                  index: activePaletteIndex,
+                  normalizedValue: nv
+                });
               },
-              preset.id
-            );
-          }) }),
+              trimEnds: true,
+              snap: true,
+              label: "Key Color",
+              warning: wcagWarning,
+              animateValue: true
+            }
+          ),
           /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+            "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.fill.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.accent.fill.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"
+      }
+    ) })
+  ] });
+}
+
+// ../../../newtone-fonts/dist/index.js
+var ROLE_DEFAULT_WEIGHTS = {
+  headline: 700,
+  title: 700,
+  heading: 500,
+  subheading: 500,
+  body: 400,
+  label: 500,
+  caption: 400
+};
+var BREAKPOINT_ROLE_SCALE = {
+  sm: { headline: 0.67, title: 0.75, heading: 0.82, subheading: 0.9, body: 0.94, label: 0.96, caption: 1 },
+  md: { headline: 0.83, title: 0.88, heading: 0.92, subheading: 0.95, body: 0.97, label: 0.98, caption: 1 },
+  lg: { headline: 1, title: 1, heading: 1, subheading: 1, body: 1, label: 1, caption: 1 }
+};
+function scaleRoleStep(step, scale) {
+  return {
+    fontSize: Math.round(step.fontSize * scale),
+    lineHeight: Math.round(step.lineHeight * scale / 4) * 4
+  };
+}
+var SYSTEM_FONTS = [
+  { family: "system-ui", category: "sans-serif", fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif' },
+  { family: "ui-serif", category: "serif", fallback: '"Iowan Old Style", "Apple Garamond", Baskerville, Georgia, serif' },
+  { family: "ui-monospace", category: "monospace", fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace" }
+];
+function scoreLineBreaks(lineWidths, containerWidth) {
+  if (lineWidths.length <= 1) return 1;
+  if (containerWidth <= 0) return 0;
+  const lineCount = lineWidths.length;
+  const lastLineWidth = lineWidths[lineCount - 1];
+  const lastLineRatio = Math.max(0, Math.min(1, lastLineWidth / containerWidth));
+  let widowScore;
+  if (lastLineRatio >= 0.4 && lastLineRatio <= 0.8) {
+    widowScore = 1;
+  } else if (lastLineRatio < 0.4) {
+    widowScore = lastLineRatio < 0.15 ? lastLineRatio / 0.15 * 0.3 : 0.3 + (lastLineRatio - 0.15) / 0.25 * 0.7;
+  } else {
+    widowScore = 1 - (lastLineRatio - 0.8) / 0.2 * 0.3;
+  }
+  let ragScore;
+  if (lineCount <= 2) {
+    ragScore = 0.8;
+  } else {
+    const bodyLines = lineWidths.slice(0, lineCount - 1);
+    const mean = bodyLines.reduce((sum, w) => sum + w, 0) / bodyLines.length;
+    if (mean <= 0) {
+      ragScore = 0;
+    } else {
+      const variance = bodyLines.reduce((sum, w) => sum + (w - mean) ** 2, 0) / bodyLines.length;
+      const stdDev = Math.sqrt(variance);
+      const cv = stdDev / mean;
+      ragScore = Math.max(0, 1 - cv / 0.15);
+    }
+  }
+  const WIDOW_WEIGHT = 0.65;
+  const RAG_WEIGHT = 0.35;
+  return WIDOW_WEIGHT * widowScore + RAG_WEIGHT * ragScore;
+}
+function estimateLineWidths(characterCount, containerWidth, fontSize, avgCharWidthRatio = 0.55) {
+  const avgCharWidth = fontSize * avgCharWidthRatio;
+  const totalWidth = characterCount * avgCharWidth;
+  if (totalWidth <= containerWidth) {
+    return [totalWidth];
+  }
+  const charsPerLine = Math.max(1, Math.floor(containerWidth / avgCharWidth));
+  const lines = [];
+  let remaining = characterCount;
+  while (remaining > 0) {
+    const charsInLine = Math.min(remaining, charsPerLine);
+    lines.push(charsInLine * avgCharWidth);
+    remaining -= charsInLine;
+  }
+  return lines;
+}
+function resolveResponsiveSize(config, roleScales, measurement, calibrations) {
+  const step = roleScales[config.role][config.size];
+  if (!measurement) {
+    return { fontSize: step.fontSize, lineHeight: step.lineHeight, wasScaled: false };
+  }
+  const ratio = config.fontFamily ? calibrations?.[config.fontFamily] ?? 0.55 : 0.55;
+  const maxFs = config.maxFontSize ?? step.fontSize;
+  const minFs = config.minFontSize ?? Math.max(8, Math.round(step.fontSize * 0.7));
+  const lineHeightRatio = step.lineHeight / step.fontSize;
+  const singleLineWidths = estimateLineWidths(measurement.characterCount, measurement.containerWidth, maxFs, ratio);
+  if (singleLineWidths.length <= 1) {
+    return {
+      fontSize: maxFs,
+      lineHeight: Math.round(maxFs * lineHeightRatio / 4) * 4,
+      wasScaled: false
+    };
+  }
+  let bestFontSize = minFs;
+  let bestScore = -1;
+  for (let fs = maxFs; fs >= minFs; fs--) {
+    const lineWidths = estimateLineWidths(measurement.characterCount, measurement.containerWidth, fs, ratio);
+    const score = scoreLineBreaks(lineWidths, measurement.containerWidth);
+    if (score > bestScore) {
+      bestScore = score;
+      bestFontSize = fs;
+    }
+    if (score >= 0.95) break;
+  }
+  return {
+    fontSize: bestFontSize,
+    lineHeight: Math.round(bestFontSize * lineHeightRatio / 4) * 4,
+    wasScaled: bestFontSize < maxFs
+  };
+}
+var previewLoadedKey = "";
+function preloadFontsForPreview(catalog) {
+  if (catalog.length === 0 || typeof document === "undefined") return;
+  const key = catalog.map((f) => f.family).join(",");
+  if (key === previewLoadedKey) return;
+  previewLoadedKey = key;
+  const families = catalog.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"
+];
+function FontPicker({
+  label,
+  slot,
+  currentFont,
+  onSelect,
+  fontCatalog = []
+}) {
+  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.accent.fill.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(fontCatalog);
+      requestAnimationFrame(() => searchInputRef.current?.focus());
+    }
+  }, [isOpen, fontCatalog]);
+  const filteredGoogleFonts = react.useMemo(() => {
+    const query = search.toLowerCase().trim();
+    let fonts = query ? fontCatalog.filter((f) => f.family.toLowerCase().includes(query)) : fontCatalog;
+    if (slot === "mono") {
+      fonts = fonts.filter((f) => f.category === "monospace");
+    } else if (slot === "currency") {
+      fonts = fonts.filter((f) => f.category === "monospace" || f.category === "sans-serif");
+    }
+    const grouped = {};
+    for (const cat of CATEGORY_ORDER) {
+      const inCategory = fonts.filter((f) => f.category === cat);
+      if (inCategory.length > 0) {
+        grouped[cat] = inCategory;
+      }
+    }
+    return grouped;
+  }, [search, slot, fontCatalog]);
+  const filteredSystemFonts = react.useMemo(() => {
+    const query = search.toLowerCase().trim();
+    let fonts = query ? SYSTEM_FONTS.filter((f) => f.family.toLowerCase().includes(query)) : [...SYSTEM_FONTS];
+    if (slot === "mono") {
+      fonts = fonts.filter((f) => f.category === "monospace");
+    } else if (slot === "currency") {
+      fonts = fonts.filter((f) => f.category !== "serif");
+    }
+    return fonts;
+  }, [search, slot]);
+  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",
             {
-              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"
+                fontSize: 12,
+                color: textColor,
+                fontFamily: `${fontFamily}, ${currentFont.fallback}`,
+                maxWidth: 140,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
               },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(components.Icon, { name: "add", size: 14, color: textSecondary }),
-                "New preset"
-              ]
+              children: currentFont.family
             }
           )
         ]
       }
-    )
-  ] });
-}
-var SIDEBAR_WIDTH2 = 360;
-var ACCORDION_SECTIONS = [
-  { id: "dynamic-range", label: "Dynamic Range", icon: "contrast" },
-  { id: "colors", label: "Colors", icon: "palette" },
-  { id: "fonts", label: "Fonts", icon: "text_fields" },
-  { id: "icons", label: "Icons", icon: "grid_view" },
-  { id: "others", label: "Others", icon: "tune" }
-];
-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: [
+    ),
+    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(
-                "span",
+                "div",
                 {
                   style: {
-                    fontSize: 16,
-                    fontWeight: 700,
-                    color: newtone.srgbToHex(tokens.textPrimary.srgb)
+                    fontSize: 10,
+                    fontWeight: 600,
+                    color: labelColor,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    padding: "8px 12px 2px"
                   },
-                  children: "newtone"
+                  children: CATEGORY_LABELS[category] ?? category
                 }
               ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                PresetSelector,
+              fonts.map((f) => /* @__PURE__ */ jsxRuntime.jsx(
+                FontOption,
                 {
-                  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(components.Icon, { name: section.icon, size: 16 }),
-                        section.label
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        components.Icon,
-                        {
-                          name: "expand_more",
-                          size: 16,
-                          style: {
-                            transform: isOpen ? "rotate(180deg)" : "none",
-                            transition: "transform 150ms ease"
-                          }
-                        }
-                      )
-                    ]
-                  }
-                ),
-                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",
+                  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",
               {
-                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
+                  padding: "12px",
+                  fontSize: 12,
+                  color: labelColor,
+                  textAlign: "center"
                 },
-                children: "Revert Changes"
+                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 STATUS_LABEL = {
-  saved: "Saved",
-  saving: "Saving...",
-  unsaved: "Unsaved changes",
-  error: "Save failed"
-};
-function EditorHeader({
-  saveStatus,
-  isPublished,
-  publishing,
-  onPublish,
-  onRetry,
-  headerSlots
+var DEFAULT_FONT_SYSTEM = {
+  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 getDefaultFontConfig(scope) {
+  return scope === "mono" ? DEFAULT_FONT_MONO : DEFAULT_FONT_SYSTEM;
+}
+function getCurrentFontConfig(state, scope) {
+  return state.typography?.fonts[scope]?.config ?? getDefaultFontConfig(scope);
+}
+var FONT_SCOPES = [
+  { scope: "main", label: "Main", slot: "default" },
+  { scope: "display", label: "Display", slot: "display" },
+  { scope: "mono", label: "Mono", slot: "mono" },
+  { scope: "currency", label: "Currency", slot: "currency" }
+];
+function FontsSection({ state, dispatch, fontCatalog }) {
+  const tokens = components.useTokens();
+  const labelColor = newtone.srgbToHex(tokens.textSecondary.srgb);
+  const handleFontChange = (scope, font) => {
+    const weights = state.typography?.fonts[scope]?.weights ?? { regular: 400, medium: 500, bold: 700 };
+    const slotConfig = { config: font, weights };
+    dispatch({ type: "SET_FONT", scope, font: slotConfig });
+  };
+  const sectionLabelStyle = {
+    fontSize: 11,
+    fontWeight: 600,
+    color: labelColor,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 8
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionLabelStyle, children: "Fonts" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 12 }, children: FONT_SCOPES.map(({ scope, label, slot }) => /* @__PURE__ */ jsxRuntime.jsx(
+        FontPicker,
+        {
+          label,
+          slot,
+          currentFont: getCurrentFontConfig(state, scope),
+          onSelect: (font) => handleFontChange(scope, font),
+          fontCatalog
+        },
+        scope
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionLabelStyle, children: "Type Scale" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        components.Slider,
+        {
+          value: Math.round((state.typography?.typeScaleOffset ?? 0.5) * 100),
+          onValueChange: (v) => dispatch({ type: "SET_TYPE_SCALE_OFFSET", offset: v / 100 }),
+          min: 0,
+          max: 100,
+          label: "Scale",
+          showValue: true
+        }
+      )
+    ] })
+  ] });
+}
+function OthersSection({ state, dispatch }) {
+  const tokens = components.useTokens();
+  const spacingPreset = state.spacing?.preset ?? "md";
+  const intensity = state.roundness?.intensity ?? 0.5;
+  const spacingOptions = [
+    { value: "xs", label: "Extra Small" },
+    { value: "sm", label: "Small" },
+    { value: "md", label: "Medium" },
+    { value: "lg", label: "Large" },
+    { value: "xl", label: "Extra Large" }
+  ];
+  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.Select,
+        {
+          value: spacingPreset,
+          onValueChange: (preset) => dispatch({ type: "SET_SPACING_PRESET", preset }),
+          options: spacingOptions,
+          label: "Preset"
+        }
+      )
+    ] }),
+    /* @__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
+        }
+      )
+    ] })
+  ] });
+}
+var PANEL_WIDTH = 280;
+function ConfiguratorPanel({
+  activeSectionId,
+  state,
+  dispatch,
+  previewColors,
+  colorMode,
+  onColorModeChange,
+  fontCatalog
 }) {
   const tokens = components.useTokens();
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
-  const statusColor = {
-    saved: newtone.srgbToHex(tokens.success.fill.srgb),
-    saving: newtone.srgbToHex(tokens.warning.fill.srgb),
-    unsaved: newtone.srgbToHex(tokens.textSecondary.srgb),
-    error: newtone.srgbToHex(tokens.error.fill.srgb)
-  };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "12px 24px",
-        borderBottom: `1px solid ${borderColor}`,
+        width: PANEL_WIDTH,
+        flexShrink: 0,
+        overflowY: "auto",
+        borderRight: `1px solid ${borderColor}`,
+        padding: 20,
         backgroundColor: newtone.srgbToHex(tokens.background.srgb),
-        flexShrink: 0
+        display: "flex",
+        flexDirection: "column",
+        gap: 24
       },
       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: "tertiary", semantic: "neutral", size: "sm", icon: "refresh", onPress: onRetry, children: "Retry" }),
+        activeSectionId === "colors" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DynamicRangeSection, { state, dispatch }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            components.Button,
+            ColorsSection,
             {
-              variant: "primary",
-              size: "sm",
-              icon: "publish",
-              onPress: onPublish,
-              disabled: isPublished || publishing,
-              children: publishing ? "Publishing..." : isPublished ? "Published" : "Publish"
+              state,
+              dispatch,
+              previewColors,
+              colorMode,
+              onColorModeChange
             }
-          ),
-          headerSlots?.right
-        ] })
+          )
+        ] }),
+        activeSectionId === "typography" && /* @__PURE__ */ jsxRuntime.jsx(FontsSection, { state, dispatch, fontCatalog }),
+        activeSectionId === "symbols" && /* @__PURE__ */ jsxRuntime.jsx(IconsSection, { state, dispatch }),
+        activeSectionId === "layout" && /* @__PURE__ */ jsxRuntime.jsx(OthersSection, { state, dispatch })
       ]
     }
   );
 }
 var TOC_WIDTH = 220;
 function TableOfContents({
+  activeSectionId,
   activeView,
   selectedComponentId,
   onNavigate
@@ -2619,9 +2621,9 @@ function TableOfContents({
   const borderColor = newtone.srgbToHex(tokens.border.srgb);
   const activeColor = newtone.srgbToHex(tokens.accent.fill.srgb);
   const textPrimary = newtone.srgbToHex(tokens.textPrimary.srgb);
-  const textSecondary = newtone.srgbToHex(tokens.textSecondary.srgb);
   const hoverBg = `${borderColor}20`;
-  const isOverviewActive = activeView.kind === "overview";
+  const components$1 = components.getComponentsByCategory(activeSectionId);
+  const isOverviewActive = activeView.kind === "overview" || activeView.kind === "category" && activeView.categoryId === activeSectionId;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "nav",
     {
@@ -2638,7 +2640,7 @@ function TableOfContents({
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
-            onClick: () => onNavigate({ kind: "overview" }),
+            onClick: () => onNavigate({ kind: "category", categoryId: activeSectionId }),
             onMouseEnter: () => setHoveredId("overview"),
             onMouseLeave: () => setHoveredId(null),
             "aria-current": isOverviewActive ? "page" : void 0,
@@ -2658,63 +2660,32 @@ function TableOfContents({
             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);
+        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",
+                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
+          );
         })
       ]
     }
@@ -2782,7 +2753,7 @@ function WrapperPreview(props) {
     /* @__PURE__ */ jsxRuntime.jsx(components.Text, { size: "sm", children: "Item 3" })
   ] });
 }
-function ComponentRenderer({ componentId, props }) {
+function ComponentRenderer({ componentId, props, previewText }) {
   const noop = react.useCallback(() => {
   }, []);
   switch (componentId) {
@@ -2818,11 +2789,12 @@ function ComponentRenderer({ componentId, props }) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         components.Text,
         {
+          scope: props.scope,
+          role: props.role,
           size: props.size,
-          weight: props.weight,
           color: props.color,
-          font: props.font,
-          children: "The quick brown fox"
+          responsive: true,
+          children: previewText || "The quick brown fox"
         }
       );
     case "icon":
@@ -3323,16 +3295,275 @@ function IconBrowserView({
     }
   );
 }
+var ROLE_VARIANT_IDS = /* @__PURE__ */ new Set([
+  "body",
+  "headline",
+  "title",
+  "heading",
+  "subheading",
+  "label",
+  "caption"
+]);
+function getWeightControlType(family, fontCatalog) {
+  if (!family) return { type: "none" };
+  const entry = fontCatalog?.find((f) => f.family === family);
+  if (entry) {
+    if (entry.isVariable) {
+      return {
+        type: "slider",
+        min: entry.weightAxisRange?.min ?? 100,
+        max: entry.weightAxisRange?.max ?? 900
+      };
+    }
+    if (entry.availableWeights && entry.availableWeights.length > 1) {
+      const sorted = [...entry.availableWeights].sort((a, b) => a - b);
+      return { type: "slider", min: sorted[0], max: sorted[sorted.length - 1], stops: sorted };
+    }
+    return { type: "none" };
+  }
+  return { type: "slider", min: 100, max: 900 };
+}
+function WeightSlider({
+  value,
+  min,
+  max,
+  stops,
+  onChange,
+  textColor,
+  accentColor
+}) {
+  const snap = react.useCallback(
+    (v) => {
+      if (!stops) return v;
+      return stops.reduce(
+        (prev, curr) => Math.abs(curr - v) < Math.abs(prev - v) ? curr : prev
+      );
+    },
+    [stops]
+  );
+  const handleChange = react.useCallback(
+    (e) => {
+      onChange(snap(Number(e.target.value)));
+    },
+    [onChange, snap]
+  );
+  const range = max - min;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        flexShrink: 0
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", width: 80 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "range",
+              min,
+              max,
+              step: 1,
+              value,
+              onChange: handleChange,
+              style: {
+                width: 80,
+                accentColor,
+                cursor: "pointer",
+                display: "block"
+              }
+            }
+          ),
+          stops && range > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                position: "relative",
+                width: 80,
+                height: 4,
+                marginTop: -2,
+                pointerEvents: "none"
+              },
+              children: stops.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    position: "absolute",
+                    left: `${(s - min) / range * 100}%`,
+                    width: 2,
+                    height: 4,
+                    backgroundColor: s === value ? accentColor : textColor,
+                    opacity: s === value ? 1 : 0.3,
+                    borderRadius: 1,
+                    transform: "translateX(-50%)"
+                  }
+                },
+                s
+              ))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: 500,
+              color: textColor,
+              width: 28,
+              textAlign: "right",
+              fontVariantNumeric: "tabular-nums"
+            },
+            children: value
+          }
+        )
+      ]
+    }
+  );
+}
+var PREVIEW_TEXT = "The quick brown fox";
+function TextAnnotation({
+  role,
+  roleScales,
+  fontFamily,
+  calibrations,
+  weight,
+  textColor,
+  accentColor,
+  previewText = PREVIEW_TEXT
+}) {
+  const containerRef = react.useRef(null);
+  const [containerWidth, setContainerWidth] = react.useState(null);
+  react.useEffect(() => {
+    const el = containerRef.current?.parentElement;
+    if (!el) return;
+    const observer = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect.width;
+      if (w && w > 0) setContainerWidth(w);
+    });
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+  const step = roleScales[role].md;
+  const minFs = Math.max(8, Math.round(step.fontSize * 0.7));
+  const maxFs = step.fontSize;
+  const resolved = react.useMemo(() => {
+    if (containerWidth == null) return { fontSize: maxFs, lineHeight: step.lineHeight };
+    return resolveResponsiveSize(
+      {
+        role,
+        size: "md",
+        fontFamily,
+        maxFontSize: maxFs,
+        minFontSize: minFs
+      },
+      roleScales,
+      { containerWidth, characterCount: previewText.length },
+      calibrations
+    );
+  }, [role, step, roleScales, fontFamily, calibrations, containerWidth, minFs, maxFs]);
+  const range = maxFs - minFs;
+  const position = range > 0 ? (resolved.fontSize - minFs) / range * 100 : 100;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      style: {
+        marginTop: 4,
+        fontSize: 10,
+        color: textColor,
+        fontVariantNumeric: "tabular-nums",
+        letterSpacing: 0.2
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          resolved.fontSize,
+          "/",
+          resolved.lineHeight,
+          " \xB7 ",
+          weight
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              marginTop: 3
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, textAlign: "right", flexShrink: 0 }, children: minFs }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    height: 1,
+                    backgroundColor: textColor,
+                    opacity: 0.3,
+                    position: "relative"
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: `${position}%`,
+                        top: "50%",
+                        width: 6,
+                        height: 6,
+                        borderRadius: "50%",
+                        backgroundColor: accentColor,
+                        transform: "translate(-50%, -50%)"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, flexShrink: 0 }, children: maxFs })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
 function ComponentDetailView({
   componentId,
   selectedVariantId,
   onSelectVariant,
   propOverrides,
-  onPropOverride
+  onPropOverride,
+  roleWeights,
+  onRoleWeightChange,
+  fontCatalog,
+  scopeFontMap
 }) {
   const tokens = components.useTokens();
+  const { config } = components.useNewtoneTheme();
   const component = components.getComponent(componentId);
   const [hoveredId, setHoveredId] = react.useState(null);
+  const [previewBreakpoint, setPreviewBreakpoint] = react.useState("lg");
+  const [previewText, setPreviewText] = react.useState(PREVIEW_TEXT);
+  const scaledConfig = react.useMemo(() => {
+    if (previewBreakpoint === "lg") return config;
+    const scales = BREAKPOINT_ROLE_SCALE[previewBreakpoint];
+    const baseRoles = config.typography.roles;
+    const scaledRoles = {};
+    for (const role of Object.keys(baseRoles)) {
+      const scale = scales[role];
+      scaledRoles[role] = {};
+      for (const size of ["sm", "md", "lg"]) {
+        const step = baseRoles[role][size];
+        scaledRoles[role][size] = scale === 1 ? step : scaleRoleStep(step, scale);
+      }
+    }
+    return { ...config, typography: { ...config.typography, roles: scaledRoles } };
+  }, [config, previewBreakpoint]);
   if (!component) return null;
   if (componentId === "icon" && propOverrides && onPropOverride) {
     return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -3383,6 +3614,7 @@ function ComponentDetailView({
     );
   }
   const interactiveColor = newtone.srgbToHex(tokens.accent.fill.srgb);
+  const isTextComponent = componentId === "text";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { padding: 32 }, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "h2",
@@ -3404,12 +3636,151 @@ function ComponentDetailView({
           fontSize: 14,
           color: newtone.srgbToHex(tokens.textSecondary.srgb),
           margin: 0,
-          marginBottom: 32
+          marginBottom: isTextComponent ? 16 : 32
         },
         children: component.description
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    isTextComponent && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, marginBottom: 16 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: previewText,
+          onChange: (e) => setPreviewText(e.target.value),
+          placeholder: PREVIEW_TEXT,
+          style: {
+            width: "100%",
+            padding: "8px 12px",
+            fontSize: 14,
+            fontFamily: "'SF Mono', 'Fira Code', Menlo, monospace",
+            color: newtone.srgbToHex(tokens.textPrimary.srgb),
+            backgroundColor: newtone.srgbToHex(tokens.backgroundSunken.srgb),
+            border: `1px solid ${newtone.srgbToHex(tokens.border.srgb)}`,
+            borderRadius: 8,
+            boxSizing: "border-box",
+            outline: "none"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 2 }, children: ["sm", "md", "lg"].map((bp) => {
+        const isActive = previewBreakpoint === bp;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setPreviewBreakpoint(bp),
+            style: {
+              padding: "4px 10px",
+              fontSize: 11,
+              fontWeight: isActive ? 600 : 400,
+              color: isActive ? interactiveColor : newtone.srgbToHex(tokens.textSecondary.srgb),
+              backgroundColor: isActive ? `${interactiveColor}18` : "transparent",
+              border: `1px solid ${isActive ? interactiveColor : newtone.srgbToHex(tokens.border.srgb)}`,
+              borderRadius: 4,
+              cursor: "pointer",
+              textTransform: "uppercase",
+              letterSpacing: 0.5
+            },
+            children: bp
+          },
+          bp
+        );
+      }) })
+    ] }),
+    component.previewLayout === "list" ? /* @__PURE__ */ jsxRuntime.jsx(components.NewtoneProvider, { config: scaledConfig, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, 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);
+      const showWeightControl = isTextComponent && ROLE_VARIANT_IDS.has(variant.id) && onRoleWeightChange;
+      const role = variant.props.role;
+      const scope = variant.props.scope ?? "main";
+      let weightControl = null;
+      if (showWeightControl && role) {
+        const family = scopeFontMap?.[scope];
+        const controlInfo = getWeightControlType(family, fontCatalog);
+        const currentWeight = roleWeights?.[role] ?? ROLE_DEFAULT_WEIGHTS[role] ?? 400;
+        if (controlInfo.type === "slider") {
+          const displayWeight = controlInfo.stops ? controlInfo.stops.reduce(
+            (prev, curr) => Math.abs(curr - currentWeight) < Math.abs(prev - currentWeight) ? curr : prev
+          ) : currentWeight;
+          weightControl = /* @__PURE__ */ jsxRuntime.jsx(
+            WeightSlider,
+            {
+              value: displayWeight,
+              min: controlInfo.min,
+              max: controlInfo.max,
+              stops: controlInfo.stops,
+              onChange: (w) => onRoleWeightChange(role, w),
+              textColor: newtone.srgbToHex(tokens.textSecondary.srgb),
+              accentColor: interactiveColor
+            }
+          );
+        }
+      }
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          onClick: () => onSelectVariant(variant.id),
+          onMouseEnter: () => setHoveredId(variant.id),
+          onMouseLeave: () => setHoveredId(null),
+          style: {
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 16,
+            padding: "12px 16px",
+            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(
+              "span",
+              {
+                style: {
+                  fontSize: 11,
+                  fontWeight: 500,
+                  color: isSelected ? interactiveColor : newtone.srgbToHex(tokens.textSecondary.srgb),
+                  width: 88,
+                  flexShrink: 0,
+                  textTransform: "uppercase",
+                  letterSpacing: 0.5
+                },
+                children: variant.label
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ComponentRenderer,
+                {
+                  componentId,
+                  props: variant.props,
+                  previewText
+                }
+              ),
+              isTextComponent && role && scaledConfig.typography.roles[role] && /* @__PURE__ */ jsxRuntime.jsx(
+                TextAnnotation,
+                {
+                  role,
+                  roleScales: scaledConfig.typography.roles,
+                  fontFamily: scopeFontMap?.[scope],
+                  calibrations: scaledConfig.typography.calibrations,
+                  weight: roleWeights?.[role] ?? ROLE_DEFAULT_WEIGHTS[role] ?? 400,
+                  textColor: newtone.srgbToHex(tokens.textTertiary.srgb),
+                  accentColor: interactiveColor,
+                  previewText
+                }
+              )
+            ] }),
+            weightControl && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: weightControl })
+          ]
+        },
+        variant.id
+      );
+    }) }) }) : /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         style: {
@@ -3488,7 +3859,11 @@ function PreviewWindow({
   onNavigate,
   onSelectVariant,
   propOverrides,
-  onPropOverride
+  onPropOverride,
+  roleWeights,
+  onRoleWeightChange,
+  fontCatalog,
+  scopeFontMap
 }) {
   const tokens = components.useTokens();
   const handleNavigateToCategory = react.useCallback(
@@ -3530,7 +3905,11 @@ function PreviewWindow({
             selectedVariantId,
             onSelectVariant,
             propOverrides,
-            onPropOverride
+            onPropOverride,
+            roleWeights,
+            onRoleWeightChange,
+            fontCatalog,
+            scopeFontMap
           }
         )
       ] })
@@ -4042,7 +4421,9 @@ function Editor({
   persistence,
   headerSlots,
   onNavigate,
-  initialPreviewView
+  initialPreviewView,
+  manifestUrl,
+  fontCatalog
 }) {
   const editor = useEditorState({
     initialState,
@@ -4053,8 +4434,26 @@ function Editor({
     defaultState,
     persistence,
     onNavigate,
-    initialPreviewView
+    initialPreviewView,
+    manifestUrl
   });
+  const roleWeights = editor.configuratorState.typography?.roleWeights;
+  const handleRoleWeightChange = react.useCallback(
+    (role, weight) => {
+      editor.dispatch({ type: "SET_ROLE_WEIGHT", role, weight });
+    },
+    [editor.dispatch]
+  );
+  const scopeFontMap = react.useMemo(() => {
+    const fonts = editor.configuratorState.typography?.fonts;
+    if (!fonts) return {};
+    const map = {};
+    if (fonts.main?.config?.family) map.main = fonts.main.config.family;
+    if (fonts.display?.config?.family) map.display = fonts.display.config.family;
+    if (fonts.mono?.config?.family) map.mono = fonts.mono.config.family;
+    if (fonts.currency?.config?.family) map.currency = fonts.currency.config.family;
+    return map;
+  }, [editor.configuratorState.typography?.fonts]);
   const previewConfig = react.useMemo(
     () => chromeThemeConfig.tokenOverrides ? { ...editor.themeConfig, tokenOverrides: chromeThemeConfig.tokenOverrides } : editor.themeConfig,
     [editor.themeConfig, chromeThemeConfig.tokenOverrides]
@@ -4065,9 +4464,6 @@ function Editor({
       sidebar: /* @__PURE__ */ jsxRuntime.jsx(
         Sidebar,
         {
-          state: editor.configuratorState,
-          dispatch: editor.dispatch,
-          previewColors: editor.previewColors,
           isDirty: editor.isDirty,
           onRevert: editor.handleRevert,
           presets: editor.presets,
@@ -4077,9 +4473,7 @@ function Editor({
           onCreatePreset: editor.createPreset,
           onRenamePreset: editor.renamePreset,
           onDeletePreset: editor.deletePreset,
-          onDuplicatePreset: editor.duplicatePreset,
-          colorMode: editor.colorMode,
-          onColorModeChange: editor.handleColorModeChange
+          onDuplicatePreset: editor.duplicatePreset
         }
       ),
       navbar: /* @__PURE__ */ jsxRuntime.jsx(
@@ -4104,12 +4498,31 @@ function Editor({
           },
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
+              PrimaryNav,
+              {
+                activeSectionId: editor.activeSectionId,
+                onSelectSection: editor.handleSectionChange
+              }
+            ),
+            editor.activeSectionId === "components" ? /* @__PURE__ */ jsxRuntime.jsx(
               TableOfContents,
               {
+                activeSectionId: editor.activeSectionId,
                 activeView: editor.previewView,
                 selectedComponentId: editor.selectedComponentId,
                 onNavigate: editor.handlePreviewNavigate
               }
+            ) : /* @__PURE__ */ jsxRuntime.jsx(
+              ConfiguratorPanel,
+              {
+                activeSectionId: editor.activeSectionId,
+                state: editor.configuratorState,
+                dispatch: editor.dispatch,
+                previewColors: editor.previewColors,
+                colorMode: editor.colorMode,
+                onColorModeChange: editor.handleColorModeChange,
+                fontCatalog
+              }
             ),
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
@@ -4134,7 +4547,11 @@ function Editor({
                         onNavigate: editor.handlePreviewNavigate,
                         onSelectVariant: editor.handleSelectVariant,
                         propOverrides: editor.propOverrides,
-                        onPropOverride: editor.handlePropOverride
+                        onPropOverride: editor.handlePropOverride,
+                        roleWeights,
+                        onRoleWeightChange: handleRoleWeightChange,
+                        fontCatalog,
+                        scopeFontMap
                       }
                     ) })
                   },
@@ -4178,6 +4595,7 @@ exports.OthersSection = OthersSection;
 exports.OverviewView = OverviewView;
 exports.PresetSelector = PresetSelector;
 exports.PreviewWindow = PreviewWindow;
+exports.PrimaryNav = PrimaryNav;
 exports.RightSidebar = RightSidebar;
 exports.Sidebar = Sidebar;
 exports.TableOfContents = TableOfContents;