@newtonedev/editor 0.1.6 → 0.1.7

package/src/types.ts

@@ -1,7 +1,16 @@
 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 };
+}
+
 // --- Data types ---
 
 export interface Preset {
@@ -43,6 +52,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 }>;
 
   /** Persist preset metadata (used by preset CRUD operations). */
@@ -72,4 +83,8 @@ 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[];
 }

package/src/utils/lookupFontMetrics.ts

@@ -0,0 +1,52 @@
+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 async function lookupFontMetrics(
+  fonts: Record<FontScope, FontSlot> | undefined,
+  manifestUrl: string | undefined,
+): Promise<Record<string, FontRuntimeMetrics>> {
+  if (!fonts || !manifestUrl) return {};
+
+  try {
+    const res = await fetch(manifestUrl);
+    if (!res.ok) return {};
+    const manifest = await res.json();
+
+    const result: Record<string, FontRuntimeMetrics> = {};
+    const seen = new Set<string>();
+
+    for (const slot of Object.values(fonts) as FontSlot[]) {
+      const family = slot.config.family;
+      if (seen.has(family)) continue;
+      seen.add(family);
+
+      const entry = manifest.families?.[family];
+      if (entry?.metrics) {
+        result[family] = {
+          naturalLineHeightRatio: entry.metrics.naturalLineHeightRatio,
+          verticalCenterOffset: entry.metrics.verticalCenterOffset,
+          features: entry.metrics.features ?? [],
+        };
+      }
+    }
+
+    return result;
+  } catch {
+    return {};
+  }
+}

package/src/utils/measureFonts.ts

@@ -0,0 +1,41 @@
+import type { FontScope } from '@newtonedev/fonts';
+import type { FontSlot } from '@newtonedev/components';
+import { measureAvgCharWidth } 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 async function measureFontCalibrations(
+  fonts: Record<FontScope, FontSlot> | undefined,
+): Promise<Record<string, number>> {
+  if (!fonts || typeof document === 'undefined') return {};
+
+  const calibrations: Record<string, number> = {};
+  const seen = new Set<string>();
+
+  for (const slot of Object.values(fonts) as FontSlot[]) {
+    const { family, fallback } = slot.config;
+    if (seen.has(family)) continue;
+    seen.add(family);
+
+    const ratio = await measureAvgCharWidth(
+      family,
+      slot.weights.regular,
+      fallback,
+    );
+    calibrations[family] = ratio;
+  }
+
+  return calibrations;
+}