@newtonedev/editor 0.1.11 → 0.2.0

package/src/configurator/state/reducer.ts

@@ -0,0 +1,399 @@
+import type { ConfiguratorState, PaletteState } from '../types';
+import type { ConfiguratorAction } from './actions';
+import { DEFAULT_CONFIGURATOR_STATE } from './defaults';
+import { traditionalHueToOklch } from '../hue-conversion';
+
+function updatePalette(
+  palettes: readonly PaletteState[],
+  index: number,
+  update: Partial<PaletteState>,
+): readonly PaletteState[] {
+  if (index < 0 || index >= palettes.length) return palettes;
+  return palettes.map((p, i) => (i === index ? { ...p, ...update } : p));
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+function wrapHue(hue: number): number {
+  return ((hue % 360) + 360) % 360;
+}
+
+function clampStep(step: number): number {
+  return Math.round(Math.max(0, Math.min(25, step)));
+}
+
+/** Default Tertiary palette inserted during migration of 5-palette states. */
+const DEFAULT_TERTIARY: PaletteState = {
+  name: 'Tertiary',
+  hue: 195,
+  chromaRatio: 0.5,
+  chromaPeak: 0.5,
+};
+
+/**
+ * Ensure 6 palettes exist (Primary, Secondary, Tertiary, Success, Warning, Error).
+ * Old states have 5 palettes (no Tertiary). Insert a default Tertiary at index 2
+ * and update legacy palette names (Neutral→Primary, Accent→Secondary).
+ */
+function migratePaletteCount(palettes: readonly PaletteState[]): readonly PaletteState[] {
+  let result = [...palettes];
+
+  // Rename legacy palette names
+  if (result[0]?.name === 'Neutral') result[0] = { ...result[0], name: 'Primary' };
+  if (result[1]?.name === 'Accent') result[1] = { ...result[1], name: 'Secondary' };
+
+  // Insert Tertiary at index 2 if only 5 palettes exist
+  if (result.length === 5) {
+    result.splice(2, 0, DEFAULT_TERTIARY);
+  }
+
+  return result;
+}
+
+/**
+ * Migrate persisted palette state from old format to new format.
+ * Handles:
+ * - Old `saturation` (0-100) → `chromaRatio` (0-1)
+ * - Old `desaturation` (-1 to 1) → `chromaPeak` (0-1, 0.5=natural)
+ * - Old `hueGradeStrength/hueGradeHue/hueGradeDirection` → `localHueGrade`
+ * - Legacy `desaturationStrength/desaturationDirection` era
+ * Idempotent: already-migrated state passes through unchanged.
+ */
+export function migratePaletteState(p: Record<string, unknown>): PaletteState {
+  const result: Record<string, unknown> = { ...p };
+
+  // Migrate saturation [0-100] → chromaRatio [0-1]
+  if (!('chromaRatio' in result) && 'saturation' in result && typeof result.saturation === 'number') {
+    result.chromaRatio = result.saturation / 100;
+    delete result.saturation;
+  }
+
+  // Ensure chromaRatio exists with fallback
+  if (!('chromaRatio' in result)) {
+    result.chromaRatio = 0.5;
+  }
+
+  // Migrate desaturation [-1,1] → chromaPeak [0,1]
+  if (!('chromaPeak' in result)) {
+    if ('desaturation' in result && typeof result.desaturation === 'number') {
+      result.chromaPeak = 0.5 - (result.desaturation as number) * 0.3;
+    } else {
+      result.chromaPeak = 0.5;
+    }
+    delete result.desaturation;
+  }
+
+  // Migrate legacy desaturationStrength/desaturationDirection era
+  if ('desaturationStrength' in result || 'desaturationDirection' in result) {
+    const LEGACY_STRENGTH_MAP: Record<string, number> = { none: 0, low: 0.2, medium: 0.4, hard: 0.6 };
+    const magnitude = LEGACY_STRENGTH_MAP[result.desaturationStrength as string] ?? 0;
+    const sign = result.desaturationDirection === 'dark' ? 1 : -1;
+    const desaturation = magnitude === 0 ? 0 : sign * magnitude;
+    result.chromaPeak = 0.5 - desaturation * 0.3;
+    delete result.desaturationStrength;
+    delete result.desaturationDirection;
+  }
+
+  // Migrate keyColor (float NV [0,1]) → keyColorStep (integer [0,25])
+  if ('keyColor' in result && typeof result.keyColor === 'number' && !('keyColorStep' in result)) {
+    // NV convention: 0=darkest, 1=lightest → step: 0=lightest, 25=darkest
+    result.keyColorStep = Math.round((1 - (result.keyColor as number)) * 25);
+    delete result.keyColor;
+  }
+  if ('keyColorDark' in result && typeof result.keyColorDark === 'number' && !('keyColorStepDark' in result)) {
+    result.keyColorStepDark = Math.round((1 - (result.keyColorDark as number)) * 25);
+    delete result.keyColorDark;
+  }
+
+  // Migrate hueGradeStrength/hueGradeHue/hueGradeDirection → localHueGrade
+  if (!('localHueGrade' in result) && 'hueGradeStrength' in result) {
+    const strengthMap: Record<string, number> = { none: 0, low: 0.06, medium: 0.13, hard: 0.25 };
+    const strength = result.hueGradeStrength as string;
+    const intensity = strengthMap[strength] ?? 0;
+    if (intensity > 0) {
+      result.localHueGrade = {
+        hue: typeof result.hueGradeHue === 'number' ? result.hueGradeHue : 0,
+        intensity,
+        side: result.hueGradeDirection ?? 'light',
+      };
+    }
+    delete result.hueGradeStrength;
+    delete result.hueGradeHue;
+    delete result.hueGradeDirection;
+  }
+
+  return result as unknown as PaletteState;
+}
+
+/**
+ * Migrate persisted ConfiguratorState globalHueGrading from old format.
+ * Old: { light: { strength, hue }, dark: { strength, hue } }
+ * New: { lightHue, lightIntensity, darkHue, darkIntensity }
+ */
+function migrateGlobalHueGrading(g: Record<string, unknown>): ConfiguratorState['globalHueGrading'] {
+  if ('lightIntensity' in g) {
+    return g as unknown as ConfiguratorState['globalHueGrading'];
+  }
+  const strengthMap: Record<string, number> = { none: 0, low: 0.06, medium: 0.13, hard: 0.25 };
+  const light = (g.light ?? {}) as Record<string, unknown>;
+  const dark = (g.dark ?? {}) as Record<string, unknown>;
+  return {
+    lightHue: typeof light.hue === 'number' ? light.hue : 30,
+    lightIntensity: strengthMap[light.strength as string] ?? 0,
+    darkHue: typeof dark.hue === 'number' ? dark.hue : 220,
+    darkIntensity: strengthMap[dark.strength as string] ?? 0,
+  };
+}
+
+/** Convert a palette's hue fields from traditional HSL to OKLCH. */
+function migratePaletteHuesToOklch(p: PaletteState): PaletteState {
+  return {
+    ...p,
+    hue: traditionalHueToOklch(p.hue),
+    ...(p.localHueGrade ? {
+      localHueGrade: { ...p.localHueGrade, hue: traditionalHueToOklch(p.localHueGrade.hue) },
+    } : {}),
+  };
+}
+
+/** Convert global grading hues from traditional HSL to OKLCH. */
+function migrateGlobalHuesToOklch(
+  g: ConfiguratorState['globalHueGrading'],
+): ConfiguratorState['globalHueGrading'] {
+  return {
+    ...g,
+    lightHue: traditionalHueToOklch(g.lightHue),
+    darkHue: traditionalHueToOklch(g.darkHue),
+  };
+}
+
+/**
+ * Migrate a full ConfiguratorState loaded from DB (old or new format) to the current format.
+ * Safe to call on already-migrated state (idempotent).
+ */
+export function migrateConfiguratorState(raw: unknown): ConfiguratorState {
+  const r = raw as Record<string, unknown>;
+  const base = r as unknown as ConfiguratorState;
+
+  let palettes = Array.isArray(r.palettes)
+    ? migratePaletteCount(r.palettes.map((p) => migratePaletteState(p as Record<string, unknown>)))
+    : DEFAULT_CONFIGURATOR_STATE.palettes;
+
+  let globalHueGrading = migrateGlobalHueGrading(
+    (r.globalHueGrading ?? {}) as Record<string, unknown>,
+  );
+
+  // Migrate traditional hues to OKLCH if hueSpace is absent
+  if (!r.hueSpace) {
+    palettes = [...palettes.map(p => migratePaletteHuesToOklch(p))];
+    globalHueGrading = migrateGlobalHuesToOklch(globalHueGrading);
+  }
+
+  return {
+    ...base,
+    hueSpace: 'oklch',
+    palettes,
+    globalHueGrading,
+  };
+}
+
+export function configuratorReducer(
+  state: ConfiguratorState,
+  action: ConfiguratorAction,
+): ConfiguratorState {
+  switch (action.type) {
+    case 'SET_PALETTE_HUE':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { hue: wrapHue(action.hue) }),
+      };
+
+    case 'SET_PALETTE_CHROMA_RATIO':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { chromaRatio: clamp(action.chromaRatio, 0, 1) }),
+      };
+
+    case 'SET_PALETTE_CHROMA_PEAK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { chromaPeak: clamp(action.chromaPeak, 0, 1) }),
+      };
+
+    case 'SET_PALETTE_LOCAL_HUE_GRADE_INTENSITY': {
+      const intensity = clamp(action.intensity, 0, 0.5);
+      if (intensity === 0) {
+        return {
+          ...state,
+          palettes: updatePalette(state.palettes, action.index, { localHueGrade: undefined }),
+        };
+      }
+      const existing = state.palettes[action.index]?.localHueGrade;
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          localHueGrade: { hue: existing?.hue ?? 0, intensity, side: existing?.side ?? 'light' },
+        }),
+      };
+    }
+
+    case 'SET_PALETTE_LOCAL_HUE_GRADE_HUE': {
+      const existing = state.palettes[action.index]?.localHueGrade;
+      if (!existing) return state;
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          localHueGrade: { ...existing, hue: wrapHue(action.hue) },
+        }),
+      };
+    }
+
+    case 'SET_PALETTE_LOCAL_HUE_GRADE_SIDE': {
+      const existing = state.palettes[action.index]?.localHueGrade;
+      if (!existing) return state;
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          localHueGrade: { ...existing, side: action.side },
+        }),
+      };
+    }
+
+    case 'SET_PALETTE_KEY_COLOR_STEP':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { keyColorStep: clampStep(action.step) }),
+      };
+
+    case 'CLEAR_PALETTE_KEY_COLOR_STEP':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { keyColorStep: undefined }),
+      };
+
+    case 'SET_PALETTE_FROM_HEX':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hue: wrapHue(action.hue),
+          chromaRatio: clamp(action.chromaRatio, 0, 1),
+          keyColorStep: clampStep(action.keyColorStep),
+        }),
+      };
+
+    case 'SET_PALETTE_KEY_COLOR_STEP_DARK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { keyColorStepDark: clampStep(action.step) }),
+      };
+
+    case 'CLEAR_PALETTE_KEY_COLOR_STEP_DARK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, { keyColorStepDark: undefined }),
+      };
+
+    case 'SET_PALETTE_FROM_HEX_DARK':
+      return {
+        ...state,
+        palettes: updatePalette(state.palettes, action.index, {
+          hue: wrapHue(action.hue),
+          chromaRatio: clamp(action.chromaRatio, 0, 1),
+          keyColorStepDark: clampStep(action.keyColorStep),
+        }),
+      };
+
+    case 'SET_LIGHTEST':
+      return { ...state, dynamicRange: { ...state.dynamicRange, lightest: clamp(action.value, 0, 1) } };
+
+    case 'SET_DARKEST':
+      return { ...state, dynamicRange: { ...state.dynamicRange, darkest: clamp(action.value, 0, 1) } };
+
+    case 'SET_GLOBAL_GRADE_LIGHT_INTENSITY':
+      return { ...state, globalHueGrading: { ...state.globalHueGrading, lightIntensity: clamp(action.intensity, 0, 0.25) } };
+
+    case 'SET_GLOBAL_GRADE_LIGHT_HUE':
+      return { ...state, globalHueGrading: { ...state.globalHueGrading, lightHue: wrapHue(action.hue) } };
+
+    case 'SET_GLOBAL_GRADE_DARK_INTENSITY':
+      return { ...state, globalHueGrading: { ...state.globalHueGrading, darkIntensity: clamp(action.intensity, 0, 0.25) } };
+
+    case 'SET_GLOBAL_GRADE_DARK_HUE':
+      return { ...state, globalHueGrading: { ...state.globalHueGrading, darkHue: wrapHue(action.hue) } };
+
+    case 'SET_SPACING_PRESET':
+      return { ...state, spacing: { preset: action.preset } };
+
+    case 'SET_ROUNDNESS_INTENSITY':
+      return { ...state, roundness: { intensity: clamp(action.intensity, 0, 1) } };
+
+    case 'SET_FONT': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
+      return { ...state, typography: { fonts: { ...currentFonts, [action.scope]: action.font } } };
+    }
+
+    case 'SET_TYPE_SCALE_OFFSET': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
+      return { ...state, typography: { ...state.typography, fonts: currentFonts, typeScaleOffset: clamp(action.offset, 0, 1) } };
+    }
+
+    case 'SET_ROLE_WEIGHT': {
+      const defaultTypography = DEFAULT_CONFIGURATOR_STATE.typography!;
+      const currentFonts = state.typography?.fonts ?? defaultTypography.fonts;
+      return {
+        ...state,
+        typography: {
+          ...state.typography,
+          fonts: currentFonts,
+          roleWeights: { ...state.typography?.roleWeights, [action.role]: clamp(action.weight, 100, 900) },
+        },
+      };
+    }
+
+    case 'SET_ICON_VARIANT': {
+      const defaultIcons = DEFAULT_CONFIGURATOR_STATE.icons!;
+      return { ...state, icons: { variant: action.variant, weight: state.icons?.weight ?? defaultIcons.weight, autoGrade: state.icons?.autoGrade ?? defaultIcons.autoGrade } };
+    }
+
+    case 'SET_ICON_WEIGHT': {
+      const defaultIcons = DEFAULT_CONFIGURATOR_STATE.icons!;
+      return { ...state, icons: { variant: state.icons?.variant ?? defaultIcons.variant, weight: action.weight, autoGrade: state.icons?.autoGrade ?? defaultIcons.autoGrade } };
+    }
+
+    case 'SET_ICON_AUTO_GRADE': {
+      const defaultIcons = DEFAULT_CONFIGURATOR_STATE.icons!;
+      return { ...state, icons: { variant: state.icons?.variant ?? defaultIcons.variant, weight: state.icons?.weight ?? defaultIcons.weight, autoGrade: action.autoGrade } };
+    }
+
+    case 'SET_PREVIEW_MODE':
+      return { ...state, preview: { ...state.preview, mode: action.mode } };
+
+    case 'RESET':
+      return DEFAULT_CONFIGURATOR_STATE;
+
+    case 'LOAD_STATE': {
+      const raw = action.state as unknown as Record<string, unknown>;
+      let palettes = migratePaletteCount(action.state.palettes.map(
+        (p) => migratePaletteState(p as unknown as Record<string, unknown>),
+      ));
+      let globalHueGrading = migrateGlobalHueGrading(
+        (raw.globalHueGrading ?? {}) as Record<string, unknown>,
+      );
+
+      // Migrate traditional hues to OKLCH if hueSpace is absent
+      if (!raw.hueSpace) {
+        palettes = palettes.map(p => migratePaletteHuesToOklch(p));
+        globalHueGrading = migrateGlobalHuesToOklch(globalHueGrading);
+      }
+
+      return { ...action.state, hueSpace: 'oklch', palettes, globalHueGrading };
+    }
+
+    default:
+      return state;
+  }
+}

package/src/configurator/types.ts

@@ -0,0 +1,65 @@
+import type { ColorMode } from '@newtonedev/components';
+
+// Re-export font types from @newtonedev/fonts (canonical source)
+export type { FontConfig, FontScope } from '@newtonedev/fonts';
+// Backward-compatible alias: configurator historically used this name
+export type { FontSlot as FontSlotConfig } from '@newtonedev/fonts';
+import type { FontSlot, TextRole } from '@newtonedev/fonts';
+
+/** Spacing preset options */
+export type SpacingPreset = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Per-palette state in the configurator */
+export interface PaletteState {
+  readonly name: string;
+  readonly hue: number;                                   // OKLCH hue [0, 360)
+  readonly chromaRatio: number;                           // [0, 1] fraction of max in-gamut chroma
+  readonly chromaPeak: number;                            // [0, 1] where chroma peaks; 0.5 = natural
+  readonly localHueGrade?: {
+    readonly hue: number;                                 // OKLCH hue [0, 360)
+    readonly intensity: number;                           // [0, 0.5]
+    readonly side: 'light' | 'dark';
+  };
+  readonly keyColorStep?: number;                          // Light mode step index [0, 25] — undefined = auto
+  readonly keyColorStepDark?: number;                     // Dark mode step index [0, 25] — undefined = auto
+}
+
+/** Complete configurator state */
+export interface ConfiguratorState {
+  readonly hueSpace?: 'oklch';                             // Present = OKLCH hues; absent = legacy traditional hues
+  readonly palettes: readonly PaletteState[];
+  readonly dynamicRange: {
+    readonly lightest: number;                             // [0, 1]
+    readonly darkest: number;                              // [0, 1]
+  };
+  readonly globalHueGrading: {
+    readonly lightHue: number;                             // OKLCH hue [0, 360)
+    readonly lightIntensity: number;                       // [0, 0.25]
+    readonly darkHue: number;                              // OKLCH hue [0, 360)
+    readonly darkIntensity: number;                        // [0, 0.25]
+  };
+  readonly preview: {
+    readonly mode: ColorMode;
+  };
+  readonly spacing?: {
+    readonly preset: SpacingPreset;                        // xs=6px, sm=7px, md=8px, lg=9px, xl=10px base
+  };
+  readonly roundness?: {
+    readonly intensity: number;                            // [0, 1] where 0=rectangle, 1=pill
+  };
+  readonly typography?: {
+    readonly fonts: {
+      readonly main: FontSlot;       // Body/default font
+      readonly display: FontSlot;    // Headlines, titles
+      readonly mono: FontSlot;       // Code, technical content
+      readonly currency: FontSlot;   // Monetary amounts, financial data
+    };
+    readonly typeScaleOffset?: number;  // [0, 1], 0.5 = identity (default)
+    readonly roleWeights?: Partial<Record<TextRole, number>>;  // CSS font-weight per role (100-900)
+  };
+  readonly icons?: {
+    readonly variant: 'outlined' | 'rounded' | 'sharp';
+    readonly weight: 100 | 200 | 300 | 400 | 500 | 600 | 700;
+    readonly autoGrade: boolean;  // true = mode-aware grade (light=-25, dark=200)
+  };
+}

package/src/hooks/useEditorState.ts

@@ -1,8 +1,9 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { getComponent, CATEGORIES, getComponentsByCategory } from "@newtonedev/components";
 import type { ColorMode } from "@newtonedev/components";
-import type { ConfiguratorState } from "@newtonedev/configurator";
-import { useConfigurator, usePreviewColors } from "@newtonedev/configurator";
+import type { ConfiguratorState } from "../configurator/types";
+import { useConfigurator } from "../configurator/hooks/useConfigurator";
+import { usePreviewColors } from "../configurator/hooks/usePreviewColors";
 import { usePresets } from "./usePresets";
 import type {
   Preset,
@@ -25,6 +26,7 @@ interface UseEditorStateOptions {
   readonly onNavigate?: (view: PreviewView) => void;
   readonly initialPreviewView?: PreviewView;
   readonly manifestUrl?: string;
+  readonly useP3?: boolean;
 }
 
 export function useEditorState({
@@ -38,6 +40,7 @@ export function useEditorState({
   onNavigate,
   initialPreviewView,
   manifestUrl,
+  useP3,
 }: UseEditorStateOptions) {
   // --- Configurator state management ---
   const {
@@ -45,7 +48,7 @@ export function useEditorState({
     dispatch,
     themeConfig,
   } = useConfigurator(initialState);
-  const previewColors = usePreviewColors(configuratorState);
+  const previewColors = usePreviewColors(configuratorState, useP3);
 
   const [saveStatus, setSaveStatus] = useState<SaveStatus>("saved");
   const [isPublished, setIsPublished] = useState(initialIsPublished);
@@ -78,6 +81,7 @@ export function useEditorState({
     (newState: ConfiguratorState) => {
       dispatch({ type: "LOAD_STATE", state: newState });
       initialStateRef.current = newState;
+      latestStateRef.current = newState;
       isInitialMount.current = true;
     },
     [dispatch],
@@ -87,6 +91,8 @@ export function useEditorState({
     if (debounceRef.current) {
       clearTimeout(debounceRef.current);
       debounceRef.current = undefined;
+      // Actually save the pending changes before switching
+      await saveDraftRef.current(latestStateRef.current);
     }
   }, []);
 
@@ -95,7 +101,7 @@ export function useEditorState({
   const {
     presets,
     activePresetId,
-    publishedPresetId,
+    defaultVariantId,
     activePreset,
     switchPreset,
     createPreset,
@@ -103,12 +109,13 @@ export function useEditorState({
     deletePreset,
     duplicatePreset,
     updateActivePresetDraftState,
-    publishActivePreset,
+    publishAllVariants,
     revertActivePreset,
+    setDefaultVariant,
   } = usePresets({
     initialPresets,
     initialActivePresetId,
-    initialPublishedPresetId,
+    initialDefaultVariantId: initialPublishedPresetId,
     defaultState,
     onPresetSwitch: handlePresetSwitch,
     getCurrentState: () => latestStateRef.current,
@@ -282,13 +289,18 @@ export function useEditorState({
     [persistence, updateActivePresetDraftState],
   );
 
+  // Keep a ref so the debounce timer always calls the latest saveDraft
+  const saveDraftRef = useRef(saveDraft);
+  saveDraftRef.current = saveDraft;
+
+  // Stable identity — never changes, so the useEffect below won't re-fire on preset switch
   const scheduleSave = useCallback(() => {
     setSaveStatus("unsaved");
     if (debounceRef.current) clearTimeout(debounceRef.current);
     debounceRef.current = setTimeout(() => {
-      saveDraft(latestStateRef.current);
+      saveDraftRef.current(latestStateRef.current);
     }, 2000);
-  }, [saveDraft]);
+  }, []);
 
   // --- State change detection ---
 
@@ -324,7 +336,7 @@ export function useEditorState({
       await Promise.race([
         (async () => {
           const currentState = latestStateRef.current;
-          const updatedPresets = publishActivePreset(currentState);
+          const updatedPresets = publishAllVariants(currentState);
           const [calibrations, fontMetrics] = await Promise.all([
             measureFontCalibrations(currentState.typography?.fonts),
             lookupFontMetrics(currentState.typography?.fonts, manifestUrl),
@@ -334,6 +346,7 @@ export function useEditorState({
             state: currentState,
             presets: updatedPresets,
             activePresetId,
+            defaultVariantId: defaultVariantId ?? activePresetId,
             calibrations,
             fontMetrics,
           });
@@ -351,7 +364,7 @@ export function useEditorState({
     } finally {
       setPublishing(false);
     }
-  }, [activePresetId, publishActivePreset, persistence, manifestUrl]);
+  }, [activePresetId, defaultVariantId, publishAllVariants, persistence, manifestUrl]);
 
   // --- beforeunload warning ---
   useEffect(() => {
@@ -424,12 +437,13 @@ export function useEditorState({
     // Presets
     presets,
     activePresetId,
-    publishedPresetId,
+    defaultVariantId,
     switchPreset,
     createPreset,
     renamePreset,
     deletePreset,
     duplicatePreset,
+    setDefaultVariant,
 
     // Revert
     isDirty,