@newtonedev/editor 0.1.5 → 0.1.7

package/dist/preview/ComponentDetailView.d.ts

@@ -1,9 +1,16 @@
+import type { TextRole } from "@newtonedev/fonts";
+import type { EditorFontEntry } from "../types";
 interface ComponentDetailViewProps {
     readonly componentId: string;
     readonly selectedVariantId: string | null;
-    readonly propOverrides?: Record<string, unknown>;
     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, propOverrides, onSelectVariant, }: 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":"AAMA,UAAU,wBAAwB;IAChC,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,iBAAiB,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1C,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACjD,QAAQ,CAAC,eAAe,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;CACvD;AAED,wBAAgB,mBAAmB,CAAC,EAClC,WAAW,EACX,iBAAiB,EACjB,aAAa,EACb,eAAe,GAChB,EAAE,wBAAwB,kDA2G1B"}
+{"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/preview/IconBrowserView.d.ts

@@ -0,0 +1,7 @@
+interface IconBrowserViewProps {
+    readonly selectedIconName: string;
+    readonly onIconSelect: (name: string) => void;
+}
+export declare function IconBrowserView({ selectedIconName, onIconSelect, }: IconBrowserViewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=IconBrowserView.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconBrowserView.d.ts","sourceRoot":"","sources":["../../src/preview/IconBrowserView.tsx"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,QAAQ,CAAC,gBAAgB,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,EAC9B,gBAAgB,EAChB,YAAY,GACb,EAAE,oBAAoB,2CA8KtB"}

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":"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"}

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.5",
+  "version": "0.1.7",
   "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,
@@ -110,9 +149,14 @@ export function Editor({
                   <PreviewWindow
                     view={editor.previewView}
                     selectedVariantId={editor.selectedVariantId}
-                    propOverrides={editor.propOverrides}
                     onNavigate={editor.handlePreviewNavigate}
                     onSelectVariant={editor.handleSelectVariant}
+                    propOverrides={editor.propOverrides}
+                    onPropOverride={editor.handlePropOverride}
+                    roleWeights={roleWeights}
+                    onRoleWeightChange={handleRoleWeightChange}
+                    fontCatalog={fontCatalog}
+                    scopeFontMap={scopeFontMap}
                   />
                 </div>
               </NewtoneProvider>
@@ -127,6 +171,8 @@ export function Editor({
             onResetOverrides={editor.handleResetOverrides}
             onClose={editor.handleCloseSidebar}
             onScopeToComponent={editor.handleScopeToComponent}
+            previewConfig={previewConfig}
+            colorMode={editor.colorMode}
           />
         }
       />

package/src/components/CodeBlock.tsx

@@ -1,8 +1,9 @@
 import { useState, useCallback } from "react";
-import { useTokens, Button } from "@newtonedev/components";
+import { useTokens, Icon } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 
 export function CopyButton({ text }: { readonly text: string }) {
+  const tokens = useTokens();
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(async () => {
@@ -12,9 +13,31 @@ export function CopyButton({ text }: { readonly text: string }) {
   }, [text]);
 
   return (
-    <Button variant="tertiary" semantic="neutral" size="sm" icon={copied ? "check" : "content_copy"} onPress={handleCopy}>
-      {copied ? "Copied!" : "Copy"}
-    </Button>
+    <button
+      onClick={handleCopy}
+      aria-label={copied ? "Copied" : "Copy code"}
+      style={{
+        background: "none",
+        border: "none",
+        cursor: "pointer",
+        padding: 4,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: srgbToHex(
+          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb,
+        ),
+        transition: "color 150ms ease",
+      }}
+    >
+      <Icon
+        name={copied ? "check" : "content_copy"}
+        size={16}
+        color={srgbToHex(
+          copied ? tokens.accent.fill.srgb : tokens.textTertiary.srgb,
+        )}
+      />
+    </button>
   );
 }
 
@@ -26,24 +49,29 @@ export function CodeBlock({
   const tokens = useTokens();
 
   return (
-    <div style={{ position: "relative" }}>
+    <div
+      style={{
+        backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
+        border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
+        borderRadius: 8,
+        overflow: "hidden",
+      }}
+    >
       <div
         style={{
-          position: "absolute",
-          top: 8,
-          right: 8,
+          display: "flex",
+          justifyContent: "flex-end",
+          padding: "4px 8px",
+          borderBottom: `1px solid ${srgbToHex(tokens.border.srgb)}`,
         }}
       >
         <CopyButton text={code} />
       </div>
       <pre
         style={{
-          backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
-          border: `1px solid ${srgbToHex(tokens.border.srgb)}`,
-          borderRadius: 8,
-          padding: 16,
-          paddingRight: 80,
-          overflow: "auto",
+          padding: "12px 16px",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
           fontSize: 13,
           lineHeight: 1.5,
           fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, monospace",

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/PresetSelector.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef, useEffect, useCallback } from "react";
-import { useTokens } from "@newtonedev/components";
+import { useTokens, Icon } from "@newtonedev/components";
 import { srgbToHex } from "newtone";
 import type { Preset } from "../types";
 import { presetHasUnpublishedChanges } from "../utils/presets";
@@ -145,21 +145,15 @@ export function PresetSelector({
         >
           {activePreset?.name ?? "Default"}
         </span>
-        <svg
-          width={10}
-          height={10}
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth={2}
+        <Icon
+          name="expand_more"
+          size={14}
           style={{
             transform: isOpen ? "rotate(180deg)" : "none",
             transition: "transform 150ms ease",
             flexShrink: 0,
-          }}
-        >
-          <polyline points="6 9 12 15 18 9" />
-        </svg>
+          } as any}
+        />
       </button>
 
       {isOpen && (
@@ -303,16 +297,7 @@ export function PresetSelector({
                             flexShrink: 0,
                           }}
                         >
-                          <svg
-                            width={14}
-                            height={14}
-                            viewBox="0 0 24 24"
-                            fill="currentColor"
-                          >
-                            <circle cx={12} cy={5} r={2} />
-                            <circle cx={12} cy={12} r={2} />
-                            <circle cx={12} cy={19} r={2} />
-                          </svg>
+                          <Icon name="more_vert" size={14} color={textSecondary} />
                         </button>
                       )}
                     </>
@@ -435,17 +420,7 @@ export function PresetSelector({
               cursor: "pointer",
             }}
           >
-            <svg
-              width={14}
-              height={14}
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth={2}
-            >
-              <line x1={12} y1={5} x2={12} y2={19} />
-              <line x1={5} y1={12} x2={19} y2={12} />
-            </svg>
+            <Icon name="add" size={14} color={textSecondary} />
             New preset
           </button>
         </div>