@newtonedev/editor 0.1.8 → 0.1.10

package/dist/utils/lookupFontMetrics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lookupFontMetrics.d.ts","sourceRoot":"","sources":["../../src/utils/lookupFontMetrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,wBAAsB,iBAAiB,CACrC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS,EAC9C,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CA8B7C"}
+{"version":3,"file":"lookupFontMetrics.d.ts","sourceRoot":"","sources":["../../src/utils/lookupFontMetrics.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;GAaG;AACH,wBAAsB,iBAAiB,CACrC,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS,EAC9C,WAAW,EAAE,MAAM,GAAG,SAAS,GAC9B,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CA+B7C"}

package/dist/utils/measureFonts.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"measureFonts.d.ts","sourceRoot":"","sources":["../../src/utils/measureFonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGvD;;;;;;;;;;;;;GAaG;AACH,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS,GAC7C,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAoBjC"}
+{"version":3,"file":"measureFonts.d.ts","sourceRoot":"","sources":["../../src/utils/measureFonts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAGvD;;;;;;;;;;;;;GAaG;AACH,wBAAsB,uBAAuB,CAC3C,KAAK,EAAE,MAAM,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,SAAS,GAC7C,OAAO,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,CAqBjC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newtonedev/editor",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "Shared color system editor for Newtone applications",
   "license": "MIT",
   "repository": {

package/src/Editor.tsx

@@ -23,6 +23,7 @@ export function Editor({
   chromeThemeConfig,
   persistence,
   headerSlots,
+  navFooter,
   onNavigate,
   initialPreviewView,
   manifestUrl,
@@ -80,14 +81,6 @@ export function Editor({
           <Sidebar
             isDirty={editor.isDirty}
             onRevert={editor.handleRevert}
-            presets={editor.presets}
-            activePresetId={editor.activePresetId}
-            publishedPresetId={editor.publishedPresetId}
-            onSwitchPreset={editor.switchPreset}
-            onCreatePreset={editor.createPreset}
-            onRenamePreset={editor.renamePreset}
-            onDeletePreset={editor.deletePreset}
-            onDuplicatePreset={editor.duplicatePreset}
           />
         }
         navbar={
@@ -98,6 +91,14 @@ export function Editor({
             onPublish={editor.handlePublish}
             onRetry={() => editor.saveDraft(editor.latestStateRef.current)}
             headerSlots={headerSlots}
+            presets={editor.presets}
+            activePresetId={editor.activePresetId}
+            publishedPresetId={editor.publishedPresetId}
+            onSwitchPreset={editor.switchPreset}
+            onCreatePreset={editor.createPreset}
+            onRenamePreset={editor.renamePreset}
+            onDeletePreset={editor.deletePreset}
+            onDuplicatePreset={editor.duplicatePreset}
           />
         }
         content={
@@ -112,6 +113,7 @@ export function Editor({
             <PrimaryNav
               activeSectionId={editor.activeSectionId}
               onSelectSection={editor.handleSectionChange}
+              footer={navFooter}
             />
             {editor.activeSectionId === "components" ? (
               <TableOfContents

package/src/components/ConfiguratorPanel.tsx

@@ -23,7 +23,7 @@ interface ConfiguratorPanelProps {
   readonly fontCatalog?: readonly GoogleFontEntry[];
 }
 
-const PANEL_WIDTH = 280;
+const PANEL_WIDTH = 360;
 
 export function ConfiguratorPanel({
   activeSectionId,

package/src/components/EditorHeader.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import { useTokens, Button } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import type { SaveStatus } from "../types";
+import type { SaveStatus, Preset } from "../types";
+import { PresetSelector } from "./PresetSelector";
 
 interface EditorHeaderProps {
   readonly saveStatus: SaveStatus;
@@ -13,6 +14,14 @@ interface EditorHeaderProps {
     readonly left?: ReactNode;
     readonly right?: ReactNode;
   };
+  readonly presets: readonly Preset[];
+  readonly activePresetId: string;
+  readonly publishedPresetId: string | null;
+  readonly onSwitchPreset: (presetId: string) => void;
+  readonly onCreatePreset: (name: string) => Promise<string>;
+  readonly onRenamePreset: (presetId: string, name: string) => void;
+  readonly onDeletePreset: (presetId: string) => Promise<void>;
+  readonly onDuplicatePreset: (presetId: string, name: string) => Promise<string>;
 }
 
 const STATUS_LABEL: Record<SaveStatus, string> = {
@@ -29,6 +38,14 @@ export function EditorHeader({
   onPublish,
   onRetry,
   headerSlots,
+  presets,
+  activePresetId,
+  publishedPresetId,
+  onSwitchPreset,
+  onCreatePreset,
+  onRenamePreset,
+  onDeletePreset,
+  onDuplicatePreset,
 }: EditorHeaderProps) {
   const tokens = useTokens();
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -54,6 +71,16 @@ export function EditorHeader({
     >
       <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
         {headerSlots?.left}
+        <PresetSelector
+          presets={presets}
+          activePresetId={activePresetId}
+          publishedPresetId={publishedPresetId}
+          onSwitchPreset={onSwitchPreset}
+          onCreatePreset={onCreatePreset}
+          onRenamePreset={onRenamePreset}
+          onDeletePreset={onDeletePreset}
+          onDuplicatePreset={onDuplicatePreset}
+        />
       </div>
       <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
         <span

package/src/components/PrimaryNav.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { useState } from "react";
 import { useTokens, Icon, CATEGORIES } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
@@ -5,11 +6,12 @@ import { srgbToHex } from "newtone";
 interface PrimaryNavProps {
   readonly activeSectionId: string | null;
   readonly onSelectSection: (sectionId: string) => void;
+  readonly footer?: ReactNode;
 }
 
 const NAV_WIDTH = 60;
 
-export function PrimaryNav({ activeSectionId, onSelectSection }: PrimaryNavProps) {
+export function PrimaryNav({ activeSectionId, onSelectSection, footer }: PrimaryNavProps) {
   const tokens = useTokens();
   const [hoveredId, setHoveredId] = useState<string | null>(null);
 
@@ -71,6 +73,11 @@ export function PrimaryNav({ activeSectionId, onSelectSection }: PrimaryNavProps
           </button>
         );
       })}
+      {footer && (
+        <div style={{ marginTop: "auto", paddingBottom: 12 }}>
+          {footer}
+        </div>
+      )}
     </nav>
   );
 }

package/src/components/Sidebar.tsx

@@ -1,37 +1,16 @@
 import { useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
-import { PresetSelector } from "./PresetSelector";
-import type { Preset } from "../types";
 
 const SIDEBAR_WIDTH = 360;
 
 interface SidebarProps {
   readonly isDirty: boolean;
   readonly onRevert: () => void;
-  readonly presets: readonly Preset[];
-  readonly activePresetId: string;
-  readonly publishedPresetId: string | null;
-  readonly onSwitchPreset: (presetId: string) => void;
-  readonly onCreatePreset: (name: string) => Promise<string>;
-  readonly onRenamePreset: (presetId: string, name: string) => void;
-  readonly onDeletePreset: (presetId: string) => Promise<void>;
-  readonly onDuplicatePreset: (
-    presetId: string,
-    name: string,
-  ) => Promise<string>;
 }
 
 export function Sidebar({
   isDirty,
   onRevert,
-  presets,
-  activePresetId,
-  publishedPresetId,
-  onSwitchPreset,
-  onCreatePreset,
-  onRenamePreset,
-  onDeletePreset,
-  onDuplicatePreset,
 }: SidebarProps) {
   const tokens = useTokens();
 
@@ -58,7 +37,6 @@ export function Sidebar({
           borderBottom: `1px solid ${borderColor}`,
           display: "flex",
           alignItems: "center",
-          justifyContent: "space-between",
         }}
       >
         <span
@@ -70,16 +48,6 @@ export function Sidebar({
         >
           newtone
         </span>
-        <PresetSelector
-          presets={presets}
-          activePresetId={activePresetId}
-          publishedPresetId={publishedPresetId}
-          onSwitchPreset={onSwitchPreset}
-          onCreatePreset={onCreatePreset}
-          onRenamePreset={onRenamePreset}
-          onDeletePreset={onDeletePreset}
-          onDuplicatePreset={onDuplicatePreset}
-        />
       </div>
 
       {/* Content area (empty for now) */}

package/src/components/TableOfContents.tsx

@@ -13,7 +13,7 @@ interface TableOfContentsProps {
   readonly onNavigate: (view: PreviewView) => void;
 }
 
-const TOC_WIDTH = 220;
+const TOC_WIDTH = 360;
 
 export function TableOfContents({
   activeSectionId,

package/src/hooks/useEditorState.ts

@@ -53,11 +53,13 @@ export function useEditorState({
   const [colorMode, setColorMode] = useState<ColorMode>(
     initialState.preview.mode,
   );
+  const defaultCategoryId = CATEGORIES[0]?.id ?? "colors";
   const [previewView, setPreviewView] = useState<PreviewView>(
-    initialPreviewView ?? { kind: "overview" },
+    initialPreviewView ?? { kind: "category", categoryId: defaultCategoryId },
   );
   const [activeSectionId, setActiveSectionId] = useState<string>(
-    CATEGORIES[0]?.id ?? "colors",
+    (initialPreviewView?.kind === "category" ? initialPreviewView.categoryId : undefined)
+      ?? defaultCategoryId,
   );
   const [sidebarSelection, setSidebarSelection] =
     useState<SidebarSelection>(null);
@@ -187,13 +189,14 @@ export function useEditorState({
       setActiveSectionId(sectionId);
 
       const sectionComponents = getComponentsByCategory(sectionId);
+      // Always notify with the category view so the URL reflects the section.
+      onNavigate?.({ kind: "category", categoryId: 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);
+        setPreviewView({ kind: "component", componentId: comp.id });
         const firstVariantId = comp.variants[0]?.id;
         setSidebarSelection(
           firstVariantId
@@ -204,7 +207,6 @@ export function useEditorState({
       } else {
         const view: PreviewView = { kind: "category", categoryId: sectionId };
         setPreviewView(view);
-        onNavigate?.(view);
         setSidebarSelection(null);
         setPropOverrides({});
       }
@@ -314,26 +316,38 @@ export function useEditorState({
     if (debounceRef.current) clearTimeout(debounceRef.current);
     setPublishing(true);
 
+    const timeout = new Promise<never>((_, reject) =>
+      setTimeout(() => reject(new Error('Publish timed out after 15 s')), 15_000),
+    );
+
     try {
-      const currentState = latestStateRef.current;
-      const updatedPresets = publishActivePreset(currentState);
-      const [calibrations, fontMetrics] = await Promise.all([
-        measureFontCalibrations(currentState.typography?.fonts),
-        lookupFontMetrics(currentState.typography?.fonts, manifestUrl),
+      await Promise.race([
+        (async () => {
+          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) {
+            setSaveStatus("saved");
+            setIsPublished(true);
+          }
+        })(),
+        timeout,
       ]);
-
-      const { error } = await persistence.onPublish({
-        state: currentState,
-        presets: updatedPresets,
-        activePresetId,
-        calibrations,
-        fontMetrics,
-      });
-
-      if (!error) {
-        setSaveStatus("saved");
-        setIsPublished(true);
-      }
+    } catch (err) {
+      // Log publish failures (timeout, network, RLS) for debugging
+      console.error('[Editor] Publish failed:', err);
     } finally {
       setPublishing(false);
     }

package/src/preview/ComponentDetailView.tsx

@@ -296,7 +296,7 @@ export function ComponentDetailView({
   scopeFontMap,
 }: ComponentDetailViewProps) {
   const tokens = useTokens();
-  const { config } = useNewtoneTheme();
+  const { config, mode } = useNewtoneTheme();
   const component = getComponent(componentId);
   const [hoveredId, setHoveredId] = useState<string | null>(null);
   const [previewBreakpoint, setPreviewBreakpoint] = useState<BreakpointKey>("lg");
@@ -436,7 +436,7 @@ export function ComponentDetailView({
       )}
 
       {component.previewLayout === "list" ? (
-        <NewtoneProvider config={scaledConfig}>
+        <NewtoneProvider config={scaledConfig} initialMode={mode} key={mode}>
           <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
             {component.variants.map((variant) => {
               const isSelected = selectedVariantId === variant.id;

package/src/types.ts

@@ -81,6 +81,8 @@ export interface EditorProps {
   readonly chromeThemeConfig: NewtoneThemeConfig;
   readonly persistence: EditorPersistence;
   readonly headerSlots?: EditorHeaderSlots;
+  /** Content rendered at the bottom of the left navigation rail. */
+  readonly navFooter?: ReactNode;
   readonly onNavigate?: (view: PreviewView) => void;
   readonly initialPreviewView?: PreviewView;
   /** URL of the font manifest for metrics lookup at publish time. */

package/src/utils/lookupFontMetrics.ts

@@ -31,6 +31,7 @@ export async function lookupFontMetrics(
     const seen = new Set<string>();
 
     for (const slot of Object.values(fonts) as FontSlot[]) {
+      if (!slot?.config) continue;
       const family = slot.config.family;
       if (seen.has(family)) continue;
       seen.add(family);

package/src/utils/measureFonts.ts

@@ -25,13 +25,14 @@ export async function measureFontCalibrations(
   const seen = new Set<string>();
 
   for (const slot of Object.values(fonts) as FontSlot[]) {
+    if (!slot?.config) continue;
     const { family, fallback } = slot.config;
     if (seen.has(family)) continue;
     seen.add(family);
 
     const ratio = await measureAvgCharWidth(
       family,
-      slot.weights.regular,
+      slot.weights?.regular ?? 400,
       fallback,
     );
     calibrations[family] = ratio;