@newtonedev/editor 0.1.6 → 0.1.7

package/src/components/sections/FontsSection.tsx

@@ -1,18 +1,13 @@
-import { Slider, useTokens } from "@newtonedev/components";
+import { Slider } from "@newtonedev/components";
+import { useTokens } from "@newtonedev/components";
 import type { FontConfig } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorState, FontScope, FontSlotConfig } from "@newtonedev/configurator";
 import type { ConfiguratorAction } from "@newtonedev/configurator";
+import type { GoogleFontEntry } from "@newtonedev/fonts";
 import { FontPicker } from "../FontPicker";
 
-const DEFAULT_FONT_DEFAULT: FontConfig = {
-  type: "system",
-  family: "system-ui",
-  fallback:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-};
-
-const DEFAULT_FONT_DISPLAY: FontConfig = {
+const DEFAULT_FONT_SYSTEM: FontConfig = {
   type: "system",
   family: "system-ui",
   fallback:
@@ -25,107 +20,80 @@ const DEFAULT_FONT_MONO: FontConfig = {
   fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace",
 };
 
+function getDefaultFontConfig(scope: FontScope): FontConfig {
+  return scope === "mono" ? DEFAULT_FONT_MONO : DEFAULT_FONT_SYSTEM;
+}
+
+function getCurrentFontConfig(
+  state: ConfiguratorState,
+  scope: FontScope,
+): FontConfig {
+  return state.typography?.fonts[scope]?.config ?? getDefaultFontConfig(scope);
+}
+
 interface FontsSectionProps {
   readonly state: ConfiguratorState;
   readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly fontCatalog?: readonly GoogleFontEntry[];
 }
 
-export function FontsSection({ state, dispatch }: FontsSectionProps) {
-  const tokens = useTokens();
+const FONT_SCOPES: readonly { scope: FontScope; label: string; slot: "default" | "display" | "mono" | "currency" }[] = [
+  { scope: "main", label: "Main", slot: "default" },
+  { scope: "display", label: "Display", slot: "display" },
+  { scope: "mono", label: "Mono", slot: "mono" },
+  { scope: "currency", label: "Currency", slot: "currency" },
+];
 
-  const baseSize = state.typography?.scale.baseSize ?? 16;
-  const ratio = state.typography?.scale.ratio ?? 1.25;
+export function FontsSection({ state, dispatch, fontCatalog }: FontsSectionProps) {
+  const tokens = useTokens();
 
   const labelColor = srgbToHex(tokens.textSecondary.srgb);
 
-  const handleFontChange = (
-    slot: "default" | "display" | "mono",
-    font: FontConfig,
-  ) => {
-    const actionType = {
-      default: "SET_FONT_DEFAULT",
-      display: "SET_FONT_DISPLAY",
-      mono: "SET_FONT_MONO",
-    }[slot] as "SET_FONT_DEFAULT" | "SET_FONT_DISPLAY" | "SET_FONT_MONO";
-    dispatch({ type: actionType, font });
+  const handleFontChange = (scope: FontScope, font: FontConfig) => {
+    // Preserve existing weight slots when switching font family
+    const weights = state.typography?.fonts[scope]?.weights ?? { regular: 400, medium: 500, bold: 700 };
+    const slotConfig: FontSlotConfig = { config: font, weights };
+    dispatch({ type: "SET_FONT", scope, font: slotConfig });
+  };
+
+  const sectionLabelStyle = {
+    fontSize: 11,
+    fontWeight: 600 as const,
+    color: labelColor,
+    textTransform: "uppercase" as const,
+    letterSpacing: 0.5,
+    marginBottom: 8,
   };
 
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
       <div>
-        <div
-          style={{
-            fontSize: 11,
-            fontWeight: 600,
-            color: labelColor,
-            textTransform: "uppercase",
-            letterSpacing: 0.5,
-            marginBottom: 8,
-          }}
-        >
-          Scale
-        </div>
+        <div style={sectionLabelStyle}>Fonts</div>
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
-          <Slider
-            value={baseSize}
-            onValueChange={(v) =>
-              dispatch({ type: "SET_TYPOGRAPHY_BASE_SIZE", baseSize: v })
-            }
-            min={12}
-            max={24}
-            step={1}
-            label="Base Size"
-            showValue
-          />
-          <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
-          />
+          {FONT_SCOPES.map(({ scope, label, slot }) => (
+            <FontPicker
+              key={scope}
+              label={label}
+              slot={slot}
+              currentFont={getCurrentFontConfig(state, scope)}
+              onSelect={(font) => handleFontChange(scope, font)}
+              fontCatalog={fontCatalog}
+            />
+          ))}
         </div>
       </div>
-
       <div>
-        <div
-          style={{
-            fontSize: 11,
-            fontWeight: 600,
-            color: labelColor,
-            textTransform: "uppercase",
-            letterSpacing: 0.5,
-            marginBottom: 8,
-          }}
-        >
-          Fonts
-        </div>
-        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
-          <FontPicker
-            label="Default"
-            slot="default"
-            currentFont={state.typography?.fonts.default ?? DEFAULT_FONT_DEFAULT}
-            onSelect={(font) => handleFontChange("default", font)}
-          />
-          <FontPicker
-            label="Display"
-            slot="display"
-            currentFont={
-              state.typography?.fonts.display ?? DEFAULT_FONT_DISPLAY
-            }
-            onSelect={(font) => handleFontChange("display", font)}
-          />
-          <FontPicker
-            label="Mono"
-            slot="mono"
-            currentFont={state.typography?.fonts.mono ?? DEFAULT_FONT_MONO}
-            onSelect={(font) => handleFontChange("mono", font)}
-          />
-        </div>
+        <div style={sectionLabelStyle}>Type Scale</div>
+        <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
+        />
       </div>
     </div>
   );

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") {
@@ -276,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) {
@@ -288,7 +334,7 @@ export function useEditorState({
       setIsPublished(true);
     }
     setPublishing(false);
-  }, [activePresetId, publishActivePreset, persistence]);
+  }, [activePresetId, publishActivePreset, persistence, manifestUrl]);
 
   // --- beforeunload warning ---
   useEffect(() => {
@@ -342,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";