@newtonedev/editor 0.1.1

package/src/hooks/useEditorState.ts

@@ -0,0 +1,381 @@
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { getComponent } from "@newtonedev/components";
+import type { ColorMode } from "@newtonedev/components";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import { useConfigurator, usePreviewColors } from "@newtonedev/configurator";
+import { usePresets } from "./usePresets";
+import type {
+  Preset,
+  SaveStatus,
+  ThemeName,
+  PreviewView,
+  SidebarSelection,
+  EditorPersistence,
+} from "../types";
+
+interface UseEditorStateOptions {
+  readonly initialState: ConfiguratorState;
+  readonly initialIsPublished: boolean;
+  readonly initialPresets: readonly Preset[];
+  readonly initialActivePresetId: string;
+  readonly initialPublishedPresetId: string | null;
+  readonly defaultState: ConfiguratorState;
+  readonly persistence: EditorPersistence;
+  readonly onNavigate?: (view: PreviewView) => void;
+  readonly initialPreviewView?: PreviewView;
+}
+
+export function useEditorState({
+  initialState,
+  initialIsPublished,
+  initialPresets,
+  initialActivePresetId,
+  initialPublishedPresetId,
+  defaultState,
+  persistence,
+  onNavigate,
+  initialPreviewView,
+}: UseEditorStateOptions) {
+  // --- Configurator state management ---
+  const {
+    state: configuratorState,
+    dispatch,
+    themeConfig,
+  } = useConfigurator(initialState);
+  const previewColors = usePreviewColors(configuratorState);
+
+  const [saveStatus, setSaveStatus] = useState<SaveStatus>("saved");
+  const [isPublished, setIsPublished] = useState(initialIsPublished);
+  const [publishing, setPublishing] = useState(false);
+  const [colorMode, setColorMode] = useState<ColorMode>(
+    initialState.preview.mode,
+  );
+  const [activeTheme, setActiveTheme] = useState<ThemeName>(
+    (initialState.preview.theme as ThemeName) || "neutral",
+  );
+  const [previewView, setPreviewView] = useState<PreviewView>(
+    initialPreviewView ?? { kind: "overview" },
+  );
+  const [sidebarSelection, setSidebarSelection] =
+    useState<SidebarSelection>(null);
+  const [propOverrides, setPropOverrides] = useState<Record<string, unknown>>(
+    {},
+  );
+
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+  const latestStateRef = useRef<ConfiguratorState>(initialState);
+  const isInitialMount = useRef(true);
+  const initialStateRef = useRef(initialState);
+
+  // --- Preset callbacks ---
+
+  const handlePresetSwitch = useCallback(
+    (newState: ConfiguratorState) => {
+      dispatch({ type: "LOAD_STATE", state: newState });
+      initialStateRef.current = newState;
+      isInitialMount.current = true;
+    },
+    [dispatch],
+  );
+
+  const flushPendingSave = useCallback(async () => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = undefined;
+    }
+  }, []);
+
+  // --- Presets ---
+
+  const {
+    presets,
+    activePresetId,
+    publishedPresetId,
+    activePreset,
+    switchPreset,
+    createPreset,
+    renamePreset,
+    deletePreset,
+    duplicatePreset,
+    updateActivePresetDraftState,
+    publishActivePreset,
+    revertActivePreset,
+  } = usePresets({
+    initialPresets,
+    initialActivePresetId,
+    initialPublishedPresetId,
+    defaultState,
+    onPresetSwitch: handlePresetSwitch,
+    getCurrentState: () => latestStateRef.current,
+    flushPendingSave,
+    persistPresets: persistence.persistPresets,
+  });
+
+  // --- Dirty check for revert ---
+
+  const isDirty = useMemo(
+    () =>
+      JSON.stringify(configuratorState) !==
+      JSON.stringify(
+        activePreset.published_state ?? initialStateRef.current,
+      ),
+    [configuratorState, activePreset.published_state],
+  );
+
+  const handleRevert = useCallback(() => {
+    const publishedState = revertActivePreset();
+    const revertTarget = publishedState ?? defaultState;
+    if (
+      window.confirm(
+        "Revert all changes to the last published version of this preset?",
+      )
+    ) {
+      dispatch({ type: "LOAD_STATE", state: revertTarget });
+      initialStateRef.current = revertTarget;
+    }
+  }, [dispatch, revertActivePreset, defaultState]);
+
+  // --- Prop override helpers ---
+
+  const initOverridesFromVariant = useCallback(
+    (componentId: string, variantId?: string) => {
+      const comp = getComponent(componentId);
+      if (!comp) return;
+      const variant = variantId
+        ? comp.variants.find((v) => v.id === variantId)
+        : comp.variants[0];
+      if (variant) {
+        const overrides: Record<string, unknown> = {};
+        for (const prop of comp.editableProps) {
+          overrides[prop.name] = variant.props[prop.name] ?? prop.defaultValue;
+        }
+        setPropOverrides(overrides);
+      }
+    },
+    [],
+  );
+
+  // --- Preview navigation + right sidebar coordination ---
+
+  const handlePreviewNavigate = useCallback(
+    (view: PreviewView) => {
+      setPreviewView(view);
+      onNavigate?.(view);
+
+      if (view.kind === "component") {
+        setSidebarSelection({
+          scope: "component",
+          componentId: view.componentId,
+        });
+        initOverridesFromVariant(view.componentId);
+      } else {
+        setSidebarSelection(null);
+        setPropOverrides({});
+      }
+    },
+    [onNavigate, initOverridesFromVariant],
+  );
+
+  const handleSelectVariant = useCallback(
+    (variantId: string) => {
+      if (previewView.kind === "component") {
+        setSidebarSelection({
+          scope: "variant",
+          componentId: previewView.componentId,
+          variantId,
+        });
+        initOverridesFromVariant(previewView.componentId, variantId);
+      }
+    },
+    [previewView, initOverridesFromVariant],
+  );
+
+  const handleCloseSidebar = useCallback(() => {
+    setSidebarSelection(null);
+    setPropOverrides({});
+  }, []);
+
+  const handleScopeToComponent = useCallback(() => {
+    if (sidebarSelection && sidebarSelection.scope === "variant") {
+      setSidebarSelection({
+        scope: "component",
+        componentId: sidebarSelection.componentId,
+      });
+      initOverridesFromVariant(sidebarSelection.componentId);
+    }
+  }, [sidebarSelection, initOverridesFromVariant]);
+
+  const handlePropOverride = useCallback((propName: string, value: unknown) => {
+    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+  }, []);
+
+  const handleResetOverrides = useCallback(() => {
+    if (sidebarSelection?.scope === "variant") {
+      initOverridesFromVariant(
+        sidebarSelection.componentId,
+        sidebarSelection.variantId,
+      );
+    }
+  }, [sidebarSelection, initOverridesFromVariant]);
+
+  // --- Draft auto-save ---
+
+  const saveDraft = useCallback(
+    async (state: ConfiguratorState) => {
+      setSaveStatus("saving");
+      const updatedPresets = updateActivePresetDraftState(state);
+      const { error } = await persistence.onSaveDraft({
+        state,
+        presets: updatedPresets,
+      });
+      setSaveStatus(error ? "error" : "saved");
+    },
+    [persistence, updateActivePresetDraftState],
+  );
+
+  const scheduleSave = useCallback(() => {
+    setSaveStatus("unsaved");
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      saveDraft(latestStateRef.current);
+    }, 2000);
+  }, [saveDraft]);
+
+  // --- State change detection ---
+
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      return;
+    }
+    latestStateRef.current = configuratorState;
+    setIsPublished(false);
+    scheduleSave();
+  }, [configuratorState, scheduleSave]);
+
+  // --- ThemeBar dispatch handlers ---
+
+  const handleThemeChange = useCallback(
+    (theme: ThemeName) => {
+      setActiveTheme(theme);
+      dispatch({ type: "SET_PREVIEW_THEME", theme });
+    },
+    [dispatch],
+  );
+
+  const handleColorModeChange = useCallback(
+    (mode: ColorMode) => {
+      setColorMode(mode);
+      dispatch({ type: "SET_PREVIEW_MODE", mode });
+    },
+    [dispatch],
+  );
+
+  // --- Publish ---
+
+  const handlePublish = useCallback(async () => {
+    if (debounceRef.current) clearTimeout(debounceRef.current);
+    setPublishing(true);
+
+    const currentState = latestStateRef.current;
+    const updatedPresets = publishActivePreset(currentState);
+
+    const { error } = await persistence.onPublish({
+      state: currentState,
+      presets: updatedPresets,
+      activePresetId,
+    });
+
+    if (!error) {
+      setSaveStatus("saved");
+      setIsPublished(true);
+    }
+    setPublishing(false);
+  }, [activePresetId, publishActivePreset, persistence]);
+
+  // --- beforeunload warning ---
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (saveStatus === "unsaved" || saveStatus === "saving") {
+        e.preventDefault();
+      }
+    };
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload);
+    };
+  }, [saveStatus]);
+
+  // --- Flush pending save on unmount ---
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+        const state = latestStateRef.current;
+        const flushedPresets = updateActivePresetDraftState(state);
+        persistence.onSaveDraft({ state, presets: flushedPresets });
+      }
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const selectedVariantId =
+    sidebarSelection?.scope === "variant" ? sidebarSelection.variantId : null;
+
+  const selectedComponentId =
+    sidebarSelection?.scope === "component" ||
+    sidebarSelection?.scope === "variant"
+      ? sidebarSelection.componentId
+      : null;
+
+  return {
+    // Configurator
+    configuratorState,
+    dispatch,
+    themeConfig,
+    previewColors,
+
+    // Save/publish
+    saveStatus,
+    isPublished,
+    publishing,
+    handlePublish,
+    saveDraft,
+
+    // Preview
+    previewView,
+    colorMode,
+    activeTheme,
+    handlePreviewNavigate,
+    handleSelectVariant,
+    handleThemeChange,
+    handleColorModeChange,
+
+    // Sidebar
+    sidebarSelection,
+    selectedComponentId,
+    selectedVariantId,
+    propOverrides,
+    handlePropOverride,
+    handleResetOverrides,
+    handleCloseSidebar,
+    handleScopeToComponent,
+
+    // Presets
+    presets,
+    activePresetId,
+    publishedPresetId,
+    switchPreset,
+    createPreset,
+    renamePreset,
+    deletePreset,
+    duplicatePreset,
+
+    // Revert
+    isDirty,
+    handleRevert,
+
+    // For retry button
+    latestStateRef,
+  } as const;
+}

package/src/hooks/useHover.ts

@@ -0,0 +1,8 @@
+import { useState, useCallback } from "react";
+
+export function useHover() {
+  const [isHovered, setIsHovered] = useState(false);
+  const onMouseEnter = useCallback(() => setIsHovered(true), []);
+  const onMouseLeave = useCallback(() => setIsHovered(false), []);
+  return { isHovered, hoverProps: { onMouseEnter, onMouseLeave } };
+}

package/src/hooks/usePresets.ts

@@ -0,0 +1,254 @@
+import { useState, useCallback, useRef } from "react";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { Preset } from "../types";
+
+interface UsePresetsOptions {
+  readonly initialPresets: readonly Preset[];
+  readonly initialActivePresetId: string;
+  readonly initialPublishedPresetId: string | null;
+  readonly defaultState: ConfiguratorState;
+  readonly onPresetSwitch: (newState: ConfiguratorState) => void;
+  readonly getCurrentState: () => ConfiguratorState;
+  readonly flushPendingSave: () => Promise<void>;
+  readonly persistPresets: (params: {
+    readonly presets: readonly Preset[];
+    readonly activePresetId: string;
+    readonly publishedPresetId: string | null;
+  }) => Promise<void>;
+}
+
+interface UsePresetsReturn {
+  readonly presets: readonly Preset[];
+  readonly activePresetId: string;
+  readonly publishedPresetId: string | null;
+  readonly activePreset: Preset;
+  readonly switchPreset: (presetId: string) => Promise<void>;
+  readonly createPreset: (name: string) => Promise<string>;
+  readonly renamePreset: (presetId: string, name: string) => void;
+  readonly deletePreset: (presetId: string) => Promise<void>;
+  readonly duplicatePreset: (
+    presetId: string,
+    newName: string,
+  ) => Promise<string>;
+  readonly updateActivePresetDraftState: (
+    state: ConfiguratorState,
+  ) => readonly Preset[];
+  readonly publishActivePreset: (
+    state: ConfiguratorState,
+  ) => readonly Preset[];
+  readonly revertActivePreset: () => ConfiguratorState | null;
+}
+
+export function usePresets({
+  initialPresets,
+  initialActivePresetId,
+  initialPublishedPresetId,
+  defaultState,
+  onPresetSwitch,
+  getCurrentState,
+  flushPendingSave,
+  persistPresets,
+}: UsePresetsOptions): UsePresetsReturn {
+  const [presets, setPresets] = useState<readonly Preset[]>(initialPresets);
+  const [activePresetId, setActivePresetId] = useState(initialActivePresetId);
+  const [publishedPresetId, setPublishedPresetId] = useState<string | null>(
+    initialPublishedPresetId,
+  );
+  const presetsRef = useRef(presets);
+
+  // Keep ref in sync
+  presetsRef.current = presets;
+
+  const activePreset =
+    presets.find((p) => p.id === activePresetId) ?? presets[0];
+
+  // --- Switch active preset ---
+  const switchPreset = useCallback(
+    async (presetId: string) => {
+      if (presetId === activePresetId) return;
+
+      // Flush any pending auto-save for current preset
+      await flushPendingSave();
+
+      // Save current state into the current preset's draft_state before switching
+      const currentState = getCurrentState();
+      const updatedPresets = presetsRef.current.map((p) =>
+        p.id === activePresetId ? { ...p, draft_state: currentState } : p,
+      );
+
+      // Find target preset
+      const target = updatedPresets.find((p) => p.id === presetId);
+      if (!target) return;
+
+      // Update state
+      setPresets(updatedPresets);
+      presetsRef.current = updatedPresets;
+      setActivePresetId(presetId);
+
+      // Load new preset's draft_state into configurator
+      onPresetSwitch(target.draft_state);
+
+      // Persist
+      await persistPresets({
+        presets: updatedPresets,
+        activePresetId: presetId,
+        publishedPresetId,
+      });
+    },
+    [
+      activePresetId,
+      publishedPresetId,
+      flushPendingSave,
+      getCurrentState,
+      onPresetSwitch,
+      persistPresets,
+    ],
+  );
+
+  // --- Create new preset ---
+  const createPreset = useCallback(
+    async (name: string): Promise<string> => {
+      const newPreset: Preset = {
+        id: crypto.randomUUID(),
+        name,
+        draft_state: defaultState,
+        published_state: null,
+      };
+      const newPresets = [...presetsRef.current, newPreset];
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      await persistPresets({
+        presets: newPresets,
+        activePresetId,
+        publishedPresetId,
+      });
+      return newPreset.id;
+    },
+    [defaultState, activePresetId, publishedPresetId, persistPresets],
+  );
+
+  // --- Duplicate preset ---
+  const duplicatePreset = useCallback(
+    async (presetId: string, newName: string): Promise<string> => {
+      const source = presetsRef.current.find((p) => p.id === presetId);
+      if (!source) throw new Error("Preset not found");
+
+      const newPreset: Preset = {
+        id: crypto.randomUUID(),
+        name: newName,
+        draft_state: source.draft_state,
+        published_state: null,
+      };
+      const newPresets = [...presetsRef.current, newPreset];
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      await persistPresets({
+        presets: newPresets,
+        activePresetId,
+        publishedPresetId,
+      });
+      return newPreset.id;
+    },
+    [activePresetId, publishedPresetId, persistPresets],
+  );
+
+  // --- Rename preset ---
+  const renamePreset = useCallback(
+    (presetId: string, name: string) => {
+      const newPresets = presetsRef.current.map((p) =>
+        p.id === presetId ? { ...p, name } : p,
+      );
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      // fire-and-forget
+      persistPresets({
+        presets: newPresets,
+        activePresetId,
+        publishedPresetId,
+      });
+    },
+    [activePresetId, publishedPresetId, persistPresets],
+  );
+
+  // --- Delete preset ---
+  const deletePreset = useCallback(
+    async (presetId: string) => {
+      if (presetsRef.current.length <= 1) return;
+
+      const newPresets = presetsRef.current.filter((p) => p.id !== presetId);
+      let newActiveId = activePresetId;
+      let newPublishedId = publishedPresetId;
+
+      // If deleting active preset, switch to first remaining
+      if (presetId === activePresetId) {
+        newActiveId = newPresets[0].id;
+        onPresetSwitch(newPresets[0].draft_state);
+      }
+
+      // If deleting published preset, clear it
+      if (presetId === publishedPresetId) {
+        newPublishedId = null;
+      }
+
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      setActivePresetId(newActiveId);
+      setPublishedPresetId(newPublishedId);
+      await persistPresets({
+        presets: newPresets,
+        activePresetId: newActiveId,
+        publishedPresetId: newPublishedId,
+      });
+    },
+    [activePresetId, publishedPresetId, onPresetSwitch, persistPresets],
+  );
+
+  // --- Update active preset's draft_state (called during auto-save) ---
+  const updateActivePresetDraftState = useCallback(
+    (state: ConfiguratorState): readonly Preset[] => {
+      const newPresets = presetsRef.current.map((p) =>
+        p.id === activePresetId ? { ...p, draft_state: state } : p,
+      );
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      return newPresets;
+    },
+    [activePresetId],
+  );
+
+  // --- Publish active preset ---
+  const publishActivePreset = useCallback(
+    (state: ConfiguratorState): readonly Preset[] => {
+      const newPresets = presetsRef.current.map((p) =>
+        p.id === activePresetId
+          ? { ...p, draft_state: state, published_state: state }
+          : p,
+      );
+      setPresets(newPresets);
+      presetsRef.current = newPresets;
+      setPublishedPresetId(activePresetId);
+      return newPresets;
+    },
+    [activePresetId],
+  );
+
+  // --- Revert active preset to its published_state ---
+  const revertActivePreset = useCallback((): ConfiguratorState | null => {
+    return activePreset.published_state;
+  }, [activePreset]);
+
+  return {
+    presets,
+    activePresetId,
+    publishedPresetId,
+    activePreset,
+    switchPreset,
+    createPreset,
+    renamePreset,
+    deletePreset,
+    duplicatePreset,
+    updateActivePresetDraftState,
+    publishActivePreset,
+    revertActivePreset,
+  };
+}

package/src/index.ts

@@ -0,0 +1,52 @@
+// Types
+export type {
+  Preset,
+  SaveStatus,
+  ThemeName,
+  PreviewView,
+  SidebarSelection,
+  EditorPersistence,
+  EditorHeaderSlots,
+  EditorProps,
+} from "./types";
+
+// Utilities
+export {
+  findPreset,
+  updatePresetInArray,
+  presetHasUnpublishedChanges,
+} from "./utils/presets";
+
+// Hooks
+export { useHover } from "./hooks/useHover";
+export { usePresets } from "./hooks/usePresets";
+export { useEditorState } from "./hooks/useEditorState";
+
+// Main component
+export { Editor } from "./Editor";
+
+// Presentational components (for advanced composition)
+export { CodeBlock, CopyButton } from "./components/CodeBlock";
+export { EditorHeader } from "./components/EditorHeader";
+export { EditorShell } from "./components/EditorShell";
+export { FontPicker } from "./components/FontPicker";
+export { PresetSelector } from "./components/PresetSelector";
+export { PreviewWindow } from "./components/PreviewWindow";
+export { RightSidebar } from "./components/RightSidebar";
+export { Sidebar } from "./components/Sidebar";
+export { TableOfContents } from "./components/TableOfContents";
+export { ThemeBar } from "./components/ThemeBar";
+
+// Sections
+export {
+  ColorsSection,
+  FontsSection,
+  IconsSection,
+  OthersSection,
+} from "./components/sections";
+
+// Preview
+export { ComponentRenderer } from "./preview/ComponentRenderer";
+export { OverviewView } from "./preview/OverviewView";
+export { CategoryView } from "./preview/CategoryView";
+export { ComponentDetailView } from "./preview/ComponentDetailView";