@newtonedev/editor 0.1.5 → 0.1.7

package/src/hooks/useEditorState.ts

@@ -1,5 +1,5 @@
 import { useState, useCallback, useRef, useEffect, useMemo } from "react";
-import { getComponent } from "@newtonedev/components";
+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";
@@ -11,6 +11,8 @@ import type {
   SidebarSelection,
   EditorPersistence,
 } from "../types";
+import { measureFontCalibrations } from "../utils/measureFonts";
+import { lookupFontMetrics } from "../utils/lookupFontMetrics";
 
 interface UseEditorStateOptions {
   readonly initialState: ConfiguratorState;
@@ -22,6 +24,7 @@ interface UseEditorStateOptions {
   readonly persistence: EditorPersistence;
   readonly onNavigate?: (view: PreviewView) => void;
   readonly initialPreviewView?: PreviewView;
+  readonly manifestUrl?: string;
 }
 
 export function useEditorState({
@@ -34,6 +37,7 @@ export function useEditorState({
   persistence,
   onNavigate,
   initialPreviewView,
+  manifestUrl,
 }: UseEditorStateOptions) {
   // --- Configurator state management ---
   const {
@@ -52,6 +56,9 @@ export function useEditorState({
   const [previewView, setPreviewView] = useState<PreviewView>(
     initialPreviewView ?? { kind: "overview" },
   );
+  const [activeSectionId, setActiveSectionId] = useState<string>(
+    CATEGORIES[0]?.id ?? "colors",
+  );
   const [sidebarSelection, setSidebarSelection] =
     useState<SidebarSelection>(null);
   const [propOverrides, setPropOverrides] = useState<Record<string, unknown>>(
@@ -159,10 +166,13 @@ export function useEditorState({
       onNavigate?.(view);
 
       if (view.kind === "component") {
-        setSidebarSelection({
-          scope: "component",
-          componentId: view.componentId,
-        });
+        const comp = 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);
@@ -172,6 +182,36 @@ export function useEditorState({
     [onNavigate, initOverridesFromVariant],
   );
 
+  const handleSectionChange = useCallback(
+    (sectionId: string) => {
+      setActiveSectionId(sectionId);
+
+      const sectionComponents = getComponentsByCategory(sectionId);
+      if (sectionComponents.length === 1) {
+        // Single-component sections (e.g. Typography, Symbols) skip
+        // the category overview and navigate directly to the component.
+        const comp = sectionComponents[0];
+        const view: PreviewView = { 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: PreviewView = { kind: "category", categoryId: sectionId };
+        setPreviewView(view);
+        onNavigate?.(view);
+        setSidebarSelection(null);
+        setPropOverrides({});
+      }
+    },
+    [onNavigate, initOverridesFromVariant],
+  );
+
   const handleSelectVariant = useCallback(
     (variantId: string) => {
       if (previewView.kind === "component") {
@@ -201,9 +241,20 @@ export function useEditorState({
     }
   }, [sidebarSelection, initOverridesFromVariant]);
 
-  const handlePropOverride = useCallback((propName: string, value: unknown) => {
-    setPropOverrides((prev) => ({ ...prev, [propName]: value }));
-  }, []);
+  const handlePropOverride = useCallback(
+    (propName: string, value: unknown) => {
+      setPropOverrides((prev) => ({ ...prev, [propName]: value }));
+      // Re-open sidebar if closed while viewing a component (e.g. icon browser click)
+      setSidebarSelection((prev) => {
+        if (prev !== null) return prev;
+        if (previewView.kind === "component") {
+          return { scope: "component", componentId: previewView.componentId };
+        }
+        return prev;
+      });
+    },
+    [previewView],
+  );
 
   const handleResetOverrides = useCallback(() => {
     if (sidebarSelection?.scope === "variant") {
@@ -265,11 +316,17 @@ export function useEditorState({
 
     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,
+      calibrations,
+      fontMetrics,
     });
 
     if (!error) {
@@ -277,7 +334,7 @@ export function useEditorState({
       setIsPublished(true);
     }
     setPublishing(false);
-  }, [activePresetId, publishActivePreset, persistence]);
+  }, [activePresetId, publishActivePreset, persistence, manifestUrl]);
 
   // --- beforeunload warning ---
   useEffect(() => {
@@ -331,7 +388,9 @@ export function useEditorState({
     // Preview
     previewView,
     colorMode,
+    activeSectionId,
     handlePreviewNavigate,
+    handleSectionChange,
     handleSelectVariant,
     handleColorModeChange,
 

package/src/index.ts

@@ -7,6 +7,7 @@ export type {
   EditorPersistence,
   EditorHeaderSlots,
   EditorProps,
+  EditorFontEntry,
 } from "./types";
 
 // Utilities
@@ -30,6 +31,7 @@ export { EditorHeader } from "./components/EditorHeader";
 export { EditorShell } from "./components/EditorShell";
 export { FontPicker } from "./components/FontPicker";
 export { PresetSelector } from "./components/PresetSelector";
+export { PrimaryNav } from "./components/PrimaryNav";
 export { PreviewWindow } from "./components/PreviewWindow";
 export { RightSidebar } from "./components/RightSidebar";
 export { Sidebar } from "./components/Sidebar";