@newtonedev/editor 0.1.6 → 0.1.8

package/dist/preview/ComponentDetailView.d.ts

@@ -1,10 +1,16 @@
+import type { TextRole } from "@newtonedev/fonts";
+import type { EditorFontEntry } from "../types";
 interface ComponentDetailViewProps {
     readonly componentId: string;
     readonly selectedVariantId: string | null;
     readonly onSelectVariant: (variantId: string) => void;
     readonly propOverrides?: Record<string, unknown>;
     readonly onPropOverride?: (name: string, value: unknown) => void;
+    readonly roleWeights?: Partial<Record<TextRole, number>>;
+    readonly onRoleWeightChange?: (role: TextRole, weight: number) => void;
+    readonly fontCatalog?: readonly EditorFontEntry[];
+    readonly scopeFontMap?: Record<string, string>;
 }
-export declare function ComponentDetailView({ componentId, selectedVariantId, onSelectVariant, propOverrides, onPropOverride, }: ComponentDetailViewProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ComponentDetailView({ componentId, selectedVariantId, onSelectVariant, propOverrides, onPropOverride, roleWeights, onRoleWeightChange, fontCatalog, scopeFontMap, }: ComponentDetailViewProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=ComponentDetailView.d.ts.map

package/dist/preview/ComponentDetailView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAOA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,cAAc,GACf,EAAE,wBAAwB,kDA+I1B"}
+{"version":3,"file":"ComponentDetailView.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentDetailView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAuC,MAAM,mBAAmB,CAAC;AAIvF,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAahD,UAAU,wBAAwB;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjE,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC,CAAC;IACzD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;IAClD,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAChD;AA+PD,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,eAAe,EACf,aAAa,EACb,cAAc,EACd,WAAW,EACX,kBAAkB,EAClB,WAAW,EACX,YAAY,GACb,EAAE,wBAAwB,kDA4U1B"}

package/dist/preview/ComponentRenderer.d.ts

@@ -1,7 +1,8 @@
 interface ComponentRendererProps {
     readonly componentId: string;
     readonly props: Record<string, unknown>;
+    readonly previewText?: string;
 }
-export declare function ComponentRenderer({ componentId, props }: ComponentRendererProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ComponentRenderer({ componentId, props, previewText }: ComponentRendererProps): import("react/jsx-runtime").JSX.Element | null;
 export {};
 //# sourceMappingURL=ComponentRenderer.d.ts.map

package/dist/preview/ComponentRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACzC;AA2ED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,sBAAsB,kDA8D/E"}
+{"version":3,"file":"ComponentRenderer.d.ts","sourceRoot":"","sources":["../../src/preview/ComponentRenderer.tsx"],"names":[],"mappings":"AAiBA,UAAU,sBAAsB;IAC9B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC/B;AA2ED,wBAAgB,iBAAiB,CAAC,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,sBAAsB,kDA+D5F"}

package/dist/types.d.ts

@@ -1,6 +1,17 @@
 import type { ConfiguratorState } from "@newtonedev/configurator";
 import type { NewtoneThemeConfig } from "@newtonedev/components";
+import type { FontRuntimeMetrics, GoogleFontEntry } from "@newtonedev/fonts";
 import type { ReactNode } from "react";
+/** Font catalog entry enriched with weight metadata for the editor. */
+export interface EditorFontEntry extends GoogleFontEntry {
+    readonly isVariable?: boolean;
+    readonly availableWeights?: readonly number[];
+    /** Weight axis range for variable fonts (from Google Fonts API wght axis). */
+    readonly weightAxisRange?: {
+        readonly min: number;
+        readonly max: number;
+    };
+}
 export interface Preset {
     readonly id: string;
     readonly name: string;
@@ -38,6 +49,8 @@ export interface EditorPersistence {
         readonly state: ConfiguratorState;
         readonly presets: readonly Preset[];
         readonly activePresetId: string;
+        readonly calibrations?: Record<string, number>;
+        readonly fontMetrics?: Record<string, FontRuntimeMetrics>;
     }) => Promise<{
         error?: unknown;
     }>;
@@ -64,5 +77,9 @@ export interface EditorProps {
     readonly headerSlots?: EditorHeaderSlots;
     readonly onNavigate?: (view: PreviewView) => void;
     readonly initialPreviewView?: PreviewView;
+    /** URL of the font manifest for metrics lookup at publish time. */
+    readonly manifestUrl?: string;
+    /** Curated fonts available in the font picker, enriched with weight metadata. */
+    readonly fontCatalog?: readonly EditorFontEntry[];
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,EAAE,kBAAkB,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC7E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,uEAAuE;AACvE,MAAM,WAAW,eAAgB,SAAQ,eAAe;IACtD,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;IAC9B,QAAQ,CAAC,gBAAgB,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9C,8EAA8E;IAC9E,QAAQ,CAAC,eAAe,CAAC,EAAE;QAAE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;CAC3E;AAID,MAAM,WAAW,MAAM;IACrB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,eAAe,EAAE,iBAAiB,GAAG,IAAI,CAAC;CACpD;AAID,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,CAAC;AAElE,MAAM,MAAM,WAAW,GACnB;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAA;CAAE,GAC7B;IAAE,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAA;CAAE,GAC1D;IAAE,QAAQ,CAAC,IAAI,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAAC;AAEjE,MAAM,MAAM,gBAAgB,GACxB,IAAI,GACJ;IAAE,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC;IAAC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;CAAE,GAC7D;IACE,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,EAAE,MAAM,CAAC;CAC5B,CAAC;AAIN,MAAM,WAAW,iBAAiB;IAChC,+CAA+C;IAC/C,QAAQ,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE;QAC7B,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;QAClC,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;KACrC,KAAK,OAAO,CAAC;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAEnC,iCAAiC;IACjC,QAAQ,CAAC,SAAS,EAAE,CAAC,MAAM,EAAE;QAC3B,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;QAClC,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;QACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;QAChC,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC/C,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC;KAC3D,KAAK,OAAO,CAAC;QAAE,KAAK,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAEnC,gEAAgE;IAChE,QAAQ,CAAC,cAAc,EAAE,CAAC,MAAM,EAAE;QAChC,QAAQ,CAAC,OAAO,EAAE,SAAS,MAAM,EAAE,CAAC;QACpC,QAAQ,CAAC,cAAc,EAAE,MAAM,CAAC;QAChC,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;KAC3C,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACrB;AAID,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,kBAAkB,EAAE,OAAO,CAAC;IACrC,QAAQ,CAAC,cAAc,EAAE,SAAS,MAAM,EAAE,CAAC;IAC3C,QAAQ,CAAC,qBAAqB,EAAE,MAAM,CAAC;IACvC,QAAQ,CAAC,wBAAwB,EAAE,MAAM,GAAG,IAAI,CAAC;IACjD,QAAQ,CAAC,YAAY,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,iBAAiB,EAAE,kBAAkB,CAAC;IAC/C,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC;IACxC,QAAQ,CAAC,WAAW,CAAC,EAAE,iBAAiB,CAAC;IACzC,QAAQ,CAAC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAClD,QAAQ,CAAC,kBAAkB,CAAC,EAAE,WAAW,CAAC;IAC1C,mEAAmE;IACnE,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,iFAAiF;IACjF,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,eAAe,EAAE,CAAC;CACnD"}

package/dist/utils/lookupFontMetrics.d.ts

@@ -0,0 +1,19 @@
+import type { FontScope } from '@newtonedev/fonts';
+import type { FontSlot } from '@newtonedev/components';
+import type { FontRuntimeMetrics } from '@newtonedev/fonts';
+/**
+ * Look up FontRuntimeMetrics for all font scopes from the font manifest.
+ *
+ * Called at publish time alongside measureFontCalibrations. Fetches the
+ * manifest JSON from the given URL and extracts metrics for each unique
+ * font family in the current typography configuration.
+ *
+ * Deduplicates by family name so a font used in multiple scopes is
+ * looked up only once. Returns empty object if manifest is unavailable.
+ *
+ * @param fonts - The typography.fonts record from ConfiguratorState.
+ * @param manifestUrl - URL of the font manifest (e.g., Supabase Storage public URL).
+ * @returns Map of fontFamily → FontRuntimeMetrics.
+ */
+export declare function lookupFontMetrics(fonts: Record<FontScope, FontSlot> | undefined, manifestUrl: string | undefined): Promise<Record<string, FontRuntimeMetrics>>;
+//# sourceMappingURL=lookupFontMetrics.d.ts.map

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

@@ -0,0 +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"}

package/dist/utils/measureFonts.d.ts

@@ -0,0 +1,18 @@
+import type { FontScope } from '@newtonedev/fonts';
+import type { FontSlot } from '@newtonedev/components';
+/**
+ * Measure avgCharWidth ratios for all font scopes at publish time.
+ *
+ * Deduplicates by font family name so a font used in multiple scopes is
+ * measured only once. Waits for fonts to load via `document.fonts.ready`
+ * before measuring, since the editor always preloads fonts for preview.
+ *
+ * Called in `handlePublish` before writing to persistence so that calibration
+ * data is included in the published config served to consumer sites.
+ *
+ * @param fonts - The typography.fonts record from ConfiguratorState.
+ * @returns Map of fontFamily → avgCharWidthRatio (e.g. `{ "Inter": 0.52 }`).
+ *          Returns empty object if called outside a browser context.
+ */
+export declare function measureFontCalibrations(fonts: Record<FontScope, FontSlot> | undefined): Promise<Record<string, number>>;
+//# sourceMappingURL=measureFonts.d.ts.map

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

@@ -0,0 +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"}

package/package.json

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

package/src/Editor.tsx

@@ -1,10 +1,13 @@
-import { useMemo } from "react";
+import { useMemo, useCallback } from "react";
 import { NewtoneProvider } from "@newtonedev/components";
 import type { NewtoneThemeConfig } from "@newtonedev/components";
+import type { TextRole } from "@newtonedev/fonts";
 import { useEditorState } from "./hooks/useEditorState";
 import { EditorShell } from "./components/EditorShell";
 import { Sidebar } from "./components/Sidebar";
 import { EditorHeader } from "./components/EditorHeader";
+import { PrimaryNav } from "./components/PrimaryNav";
+import { ConfiguratorPanel } from "./components/ConfiguratorPanel";
 import { TableOfContents } from "./components/TableOfContents";
 import { PreviewWindow } from "./components/PreviewWindow";
 import { RightSidebar } from "./components/RightSidebar";
@@ -22,6 +25,8 @@ export function Editor({
   headerSlots,
   onNavigate,
   initialPreviewView,
+  manifestUrl,
+  fontCatalog,
 }: EditorProps) {
   const editor = useEditorState({
     initialState,
@@ -33,8 +38,30 @@ export function Editor({
     persistence,
     onNavigate,
     initialPreviewView,
+    manifestUrl,
   });
 
+  // Per-role weight state and handler
+  const roleWeights = editor.configuratorState.typography?.roleWeights;
+  const handleRoleWeightChange = useCallback(
+    (role: TextRole, weight: number) => {
+      editor.dispatch({ type: "SET_ROLE_WEIGHT", role, weight });
+    },
+    [editor.dispatch],
+  );
+
+  // Map font scopes to family names for weight metadata lookup
+  const scopeFontMap = useMemo((): Record<string, string> => {
+    const fonts = editor.configuratorState.typography?.fonts;
+    if (!fonts) return {};
+    const map: Record<string, string> = {};
+    if (fonts.main?.config?.family) map.main = fonts.main.config.family;
+    if (fonts.display?.config?.family) map.display = fonts.display.config.family;
+    if (fonts.mono?.config?.family) map.mono = fonts.mono.config.family;
+    if (fonts.currency?.config?.family) map.currency = fonts.currency.config.family;
+    return map;
+  }, [editor.configuratorState.typography?.fonts]);
+
   // Merge token overrides from chrome config into the preview config.
   // Token overrides (from Token Tuner) are stored separately from configurator
   // state, but should apply to the preview so components render accurately.
@@ -51,9 +78,6 @@ export function Editor({
       <EditorShell
         sidebar={
           <Sidebar
-            state={editor.configuratorState}
-            dispatch={editor.dispatch}
-            previewColors={editor.previewColors}
             isDirty={editor.isDirty}
             onRevert={editor.handleRevert}
             presets={editor.presets}
@@ -64,8 +88,6 @@ export function Editor({
             onRenamePreset={editor.renamePreset}
             onDeletePreset={editor.deletePreset}
             onDuplicatePreset={editor.duplicatePreset}
-            colorMode={editor.colorMode}
-            onColorModeChange={editor.handleColorModeChange}
           />
         }
         navbar={
@@ -87,11 +109,28 @@ export function Editor({
               minWidth: 0,
             }}
           >
-            <TableOfContents
-              activeView={editor.previewView}
-              selectedComponentId={editor.selectedComponentId}
-              onNavigate={editor.handlePreviewNavigate}
+            <PrimaryNav
+              activeSectionId={editor.activeSectionId}
+              onSelectSection={editor.handleSectionChange}
             />
+            {editor.activeSectionId === "components" ? (
+              <TableOfContents
+                activeSectionId={editor.activeSectionId}
+                activeView={editor.previewView}
+                selectedComponentId={editor.selectedComponentId}
+                onNavigate={editor.handlePreviewNavigate}
+              />
+            ) : (
+              <ConfiguratorPanel
+                activeSectionId={editor.activeSectionId}
+                state={editor.configuratorState}
+                dispatch={editor.dispatch}
+                previewColors={editor.previewColors}
+                colorMode={editor.colorMode}
+                onColorModeChange={editor.handleColorModeChange}
+                fontCatalog={fontCatalog}
+              />
+            )}
             <div
               style={{
                 flex: 1,
@@ -114,6 +153,10 @@ export function Editor({
                     onSelectVariant={editor.handleSelectVariant}
                     propOverrides={editor.propOverrides}
                     onPropOverride={editor.handlePropOverride}
+                    roleWeights={roleWeights}
+                    onRoleWeightChange={handleRoleWeightChange}
+                    fontCatalog={fontCatalog}
+                    scopeFontMap={scopeFontMap}
                   />
                 </div>
               </NewtoneProvider>

package/src/components/ConfiguratorPanel.tsx

@@ -0,0 +1,77 @@
+import { useTokens } from "@newtonedev/components";
+import type { ColorMode } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+import type { ColorResult } from "newtone";
+import type { ConfiguratorState } from "@newtonedev/configurator";
+import type { ConfiguratorAction } from "@newtonedev/configurator";
+import type { GoogleFontEntry } from "@newtonedev/fonts";
+import {
+  ColorsSection,
+  DynamicRangeSection,
+  IconsSection,
+  FontsSection,
+  OthersSection,
+} from "./sections";
+
+interface ConfiguratorPanelProps {
+  readonly activeSectionId: string;
+  readonly state: ConfiguratorState;
+  readonly dispatch: (action: ConfiguratorAction) => void;
+  readonly previewColors: readonly (readonly ColorResult[])[];
+  readonly colorMode: ColorMode;
+  readonly onColorModeChange: (mode: ColorMode) => void;
+  readonly fontCatalog?: readonly GoogleFontEntry[];
+}
+
+const PANEL_WIDTH = 280;
+
+export function ConfiguratorPanel({
+  activeSectionId,
+  state,
+  dispatch,
+  previewColors,
+  colorMode,
+  onColorModeChange,
+  fontCatalog,
+}: ConfiguratorPanelProps) {
+  const tokens = useTokens();
+  const borderColor = srgbToHex(tokens.border.srgb);
+
+  return (
+    <div
+      style={{
+        width: PANEL_WIDTH,
+        flexShrink: 0,
+        overflowY: "auto",
+        borderRight: `1px solid ${borderColor}`,
+        padding: 20,
+        backgroundColor: srgbToHex(tokens.background.srgb),
+        display: "flex",
+        flexDirection: "column",
+        gap: 24,
+      }}
+    >
+      {activeSectionId === "colors" && (
+        <>
+          <DynamicRangeSection state={state} dispatch={dispatch} />
+          <ColorsSection
+            state={state}
+            dispatch={dispatch}
+            previewColors={previewColors}
+            colorMode={colorMode}
+            onColorModeChange={onColorModeChange}
+          />
+        </>
+      )}
+      {activeSectionId === "typography" && (
+        <FontsSection state={state} dispatch={dispatch} fontCatalog={fontCatalog} />
+      )}
+      {activeSectionId === "symbols" && (
+        <IconsSection state={state} dispatch={dispatch} />
+      )}
+      {activeSectionId === "layout" && (
+        <OthersSection state={state} dispatch={dispatch} />
+      )}
+    </div>
+  );
+}

package/src/components/FontPicker.tsx

@@ -1,27 +1,29 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { useTokens } from "@newtonedev/components";
-import {
-  GOOGLE_FONTS,
-  SYSTEM_FONTS,
-} from "@newtonedev/components";
-import type { GoogleFontEntry, SystemFontEntry, FontConfig } from "@newtonedev/components";
+import type { FontConfig } from "@newtonedev/components";
+import { SYSTEM_FONTS } from "@newtonedev/fonts";
+import type { GoogleFontEntry, SystemFontEntry } from "@newtonedev/fonts";
 import { srgbToHex } from "newtone";
 
-type FontSlot = "default" | "display" | "mono";
+type FontSlot = "default" | "display" | "mono" | "currency";
 
 interface FontPickerProps {
   readonly label: string;
   readonly slot: FontSlot;
   readonly currentFont: FontConfig;
   readonly onSelect: (font: FontConfig) => void;
+  readonly fontCatalog?: readonly GoogleFontEntry[];
 }
 
-/** Preload all curated Google Fonts for preview on first dropdown open. */
-let previewLoaded = false;
-function preloadFontsForPreview() {
-  if (previewLoaded || typeof document === "undefined") return;
-  previewLoaded = true;
-  const families = GOOGLE_FONTS.map(
+/** Preload curated Google Fonts for preview on first dropdown open. */
+let previewLoadedKey = "";
+function preloadFontsForPreview(catalog: readonly GoogleFontEntry[]) {
+  if (catalog.length === 0 || typeof document === "undefined") return;
+  // Re-preload if the catalog changes (e.g. new fonts curated)
+  const key = catalog.map((f) => f.family).join(",");
+  if (key === previewLoadedKey) return;
+  previewLoadedKey = key;
+  const families = catalog.map(
     (f) => `family=${f.family.replace(/ /g, "+")}:wght@400`,
   ).join("&");
   const url = `https://fonts.googleapis.com/css2?${families}&display=swap`;
@@ -60,18 +62,13 @@ const CATEGORY_ORDER: readonly string[] = [
   "monospace",
   "display",
 ];
-const MONO_CATEGORY_ORDER: readonly string[] = [
-  "monospace",
-  "sans-serif",
-  "serif",
-  "display",
-];
 
 export function FontPicker({
   label,
   slot,
   currentFont,
   onSelect,
+  fontCatalog = [],
 }: FontPickerProps) {
   const tokens = useTokens();
   const [isOpen, setIsOpen] = useState(false);
@@ -103,35 +100,47 @@ export function FontPicker({
 
   useEffect(() => {
     if (isOpen) {
-      preloadFontsForPreview();
+      preloadFontsForPreview(fontCatalog);
       requestAnimationFrame(() => searchInputRef.current?.focus());
     }
-  }, [isOpen]);
-
-  const categoryOrder = slot === "mono" ? MONO_CATEGORY_ORDER : CATEGORY_ORDER;
+  }, [isOpen, fontCatalog]);
 
   const filteredGoogleFonts = useMemo(() => {
     const query = search.toLowerCase().trim();
-    const fonts = query
-      ? GOOGLE_FONTS.filter((f) => f.family.toLowerCase().includes(query))
-      : GOOGLE_FONTS;
+    let fonts: readonly GoogleFontEntry[] = query
+      ? fontCatalog.filter((f) => f.family.toLowerCase().includes(query))
+      : fontCatalog;
+
+    if (slot === "mono") {
+      fonts = fonts.filter((f) => f.category === "monospace");
+    } else if (slot === "currency") {
+      fonts = fonts.filter((f) => f.category === "monospace" || f.category === "sans-serif");
+    }
 
     const grouped: Record<string, GoogleFontEntry[]> = {};
-    for (const cat of categoryOrder) {
+    for (const cat of CATEGORY_ORDER) {
       const inCategory = fonts.filter((f) => f.category === cat);
       if (inCategory.length > 0) {
         grouped[cat] = inCategory;
       }
     }
     return grouped;
-  }, [search, categoryOrder]);
+  }, [search, slot, fontCatalog]);
 
   const filteredSystemFonts = useMemo(() => {
     const query = search.toLowerCase().trim();
-    return query
+    let fonts = query
       ? SYSTEM_FONTS.filter((f) => f.family.toLowerCase().includes(query))
       : [...SYSTEM_FONTS];
-  }, [search]);
+
+    if (slot === "mono") {
+      fonts = fonts.filter((f) => f.category === "monospace");
+    } else if (slot === "currency") {
+      fonts = fonts.filter((f) => f.category !== "serif");
+    }
+
+    return fonts;
+  }, [search, slot]);
 
   const handleSelect = useCallback(
     (font: FontConfig) => {

package/src/components/PreviewWindow.tsx

@@ -1,10 +1,11 @@
 import { useCallback } from "react";
 import { useTokens } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
+import type { TextRole } from "@newtonedev/fonts";
 import { OverviewView } from "../preview/OverviewView";
 import { CategoryView } from "../preview/CategoryView";
 import { ComponentDetailView } from "../preview/ComponentDetailView";
-import type { PreviewView } from "../types";
+import type { PreviewView, EditorFontEntry } from "../types";
 
 interface PreviewWindowProps {
   readonly view: PreviewView;
@@ -13,6 +14,10 @@ interface PreviewWindowProps {
   readonly onSelectVariant: (variantId: string) => void;
   readonly propOverrides?: Record<string, unknown>;
   readonly onPropOverride?: (name: string, value: unknown) => void;
+  readonly roleWeights?: Partial<Record<TextRole, number>>;
+  readonly onRoleWeightChange?: (role: TextRole, weight: number) => void;
+  readonly fontCatalog?: readonly EditorFontEntry[];
+  readonly scopeFontMap?: Record<string, string>;
 }
 
 export function PreviewWindow({
@@ -22,6 +27,10 @@ export function PreviewWindow({
   onSelectVariant,
   propOverrides,
   onPropOverride,
+  roleWeights,
+  onRoleWeightChange,
+  fontCatalog,
+  scopeFontMap,
 }: PreviewWindowProps) {
   const tokens = useTokens();
 
@@ -64,6 +73,10 @@ export function PreviewWindow({
             onSelectVariant={onSelectVariant}
             propOverrides={propOverrides}
             onPropOverride={onPropOverride}
+            roleWeights={roleWeights}
+            onRoleWeightChange={onRoleWeightChange}
+            fontCatalog={fontCatalog}
+            scopeFontMap={scopeFontMap}
           />
         )}
       </div>

package/src/components/PrimaryNav.tsx

@@ -0,0 +1,76 @@
+import { useState } from "react";
+import { useTokens, Icon, CATEGORIES } from "@newtonedev/components";
+import { srgbToHex } from "newtone";
+
+interface PrimaryNavProps {
+  readonly activeSectionId: string | null;
+  readonly onSelectSection: (sectionId: string) => void;
+}
+
+const NAV_WIDTH = 60;
+
+export function PrimaryNav({ activeSectionId, onSelectSection }: PrimaryNavProps) {
+  const tokens = useTokens();
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+
+  const bg = srgbToHex(tokens.background.srgb);
+  const borderColor = srgbToHex(tokens.border.srgb);
+  const activeBg = srgbToHex(tokens.backgroundInteractive.srgb);
+  const iconColor = srgbToHex(tokens.textSecondary.srgb);
+  const activeIconColor = srgbToHex(tokens.textPrimary.srgb);
+
+  return (
+    <nav
+      aria-label="Section navigation"
+      style={{
+        width: NAV_WIDTH,
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        paddingTop: 12,
+        gap: 4,
+        backgroundColor: bg,
+        borderRight: `1px solid ${borderColor}`,
+      }}
+    >
+      {CATEGORIES.map((category) => {
+        const isActive = activeSectionId === category.id;
+        const isHovered = hoveredId === category.id;
+
+        return (
+          <button
+            key={category.id}
+            onClick={() => onSelectSection(category.id)}
+            onMouseEnter={() => setHoveredId(category.id)}
+            onMouseLeave={() => setHoveredId(null)}
+            title={category.name}
+            aria-current={isActive ? "page" : undefined}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 44,
+              height: 44,
+              borderRadius: 12,
+              border: "none",
+              backgroundColor: isActive
+                ? activeBg
+                : isHovered
+                  ? `${borderColor}20`
+                  : "transparent",
+              cursor: "pointer",
+              transition: "background-color 150ms",
+            }}
+          >
+            <Icon
+              name={category.icon ?? "circle"}
+              size={24}
+              color={isActive ? activeIconColor : iconColor}
+            />
+          </button>
+        );
+      })}
+    </nav>
+  );
+}