@newtonedev/components 0.1.7 → 0.1.9

package/src/theme/types.ts

@@ -1,20 +1,27 @@
 import type { DynamicRange, PaletteConfig } from 'newtone';
 
+// Re-export font/typography types from @newtonedev/fonts (canonical source)
+export type {
+  FontConfig,
+  FontWeights,
+  FontSlot,
+  FontSizeScale,
+  LineHeightScale,
+  RoleSizeStep,
+  RoleScale,
+  RoleScales,
+  BreakpointKey,
+  Breakpoints,
+  BreakpointRoleScales,
+  FontRuntimeMetrics,
+} from '@newtonedev/fonts';
+import type { FontSlot, FontSizeScale, LineHeightScale, RoleScales, BreakpointRoleScales, FontRuntimeMetrics, TextRole } from '@newtonedev/fonts';
+
 /**
  * Color mode: light or dark
  */
 export type ColorMode = 'light' | 'dark';
 
-/**
- * Font configuration for a single font slot
- */
-export interface FontConfig {
-  readonly type: 'system' | 'google' | 'custom';
-  readonly family: string;       // 'ui-monospace' | 'Roboto' | custom name
-  readonly customUrl?: string;   // Supabase Storage URL for custom fonts
-  readonly fallback: string;     // CSS fallback stack
-}
-
 /**
  * Elevation levels for surfaces (internal)
  * 0 = sunken, 1 = default, 2 = elevated
@@ -118,30 +125,46 @@ export interface NewtoneThemeConfig {
   };
   readonly typography: {
     readonly fonts: {
-      readonly mono: FontConfig;
-      readonly display: FontConfig;
-      readonly default: FontConfig;
-    };
-    readonly scale: {
-      readonly xs: number;    // baseSize / ratio^2
-      readonly sm: number;    // baseSize / ratio
-      readonly base: number;  // baseSize
-      readonly md: number;    // baseSize * ratio
-      readonly lg: number;    // baseSize * ratio^2
-      readonly xl: number;    // baseSize * ratio^3
-      readonly xxl: number;   // baseSize * ratio^4
-    };
-    readonly lineHeight: {
-      readonly tight: number;   // 1.25
-      readonly normal: number;  // 1.5
-      readonly relaxed: number; // 1.75
-    };
-    readonly fontWeight: {
-      readonly regular: number;  // 400
-      readonly medium: number;   // 500
-      readonly semibold: number; // 600
-      readonly bold: number;     // 700
+      readonly main: FontSlot;      // Default/body font (fallback for all scopes)
+      readonly display: FontSlot;   // Headlines, titles, large display text
+      readonly mono: FontSlot;      // Code snippets, technical content
+      readonly currency: FontSlot;  // Monetary amounts, financial data
     };
+    /** Primitive font size scale — numbered tokens ('01'-'16'), values in px. */
+    readonly fontSizes: FontSizeScale;
+    /** Primitive line height scale — numbered tokens ('01'-'16'), values in px. */
+    readonly lineHeights: LineHeightScale;
+    /** Role mapping — pairs fontSizes and lineHeights for each role x size combination. */
+    readonly roles: RoleScales;
+    /**
+     * Per-font avgCharWidth ratios, keyed by font family name.
+     * Measured with canvas at editor publish time (Layer 1 calibration).
+     * Used by resolveResponsiveSize to improve line break estimation accuracy.
+     * Falls back to 0.55 when absent.
+     */
+    readonly calibrations?: Record<string, number>;
+    /**
+     * Pre-computed role scales for each viewport breakpoint (sm/md/lg).
+     * Enables CSS-only consumers to generate @media rules from the theme JSON
+     * without importing newtone-fonts. Runtime components use useBreakpoint
+     * instead and compute scaling on the fly.
+     */
+    readonly breakpointRoles?: BreakpointRoleScales;
+    /**
+     * Per-font OpenType-derived metrics, keyed by font family name.
+     * Extracted from font binaries at upload time, looked up at publish time.
+     * Used by Text for line height correction (adjustLineHeight),
+     * vertical centering (verticalCenterOffset), and font feature validation.
+     * Falls back to Inter-equivalent defaults when absent.
+     */
+    readonly fontMetrics?: Readonly<Record<string, FontRuntimeMetrics>>;
+    /**
+     * Per-role font weight (CSS font-weight 100–900).
+     * Primary weight path — the Text component uses these values directly.
+     * When populated via toThemeConfig, defaults are merged with user overrides.
+     * Per-instance weight prop still takes priority.
+     */
+    readonly roleWeights?: Partial<Record<TextRole, number>>;
   };
   readonly icons: {
     readonly variant: 'outlined' | 'rounded' | 'sharp';
@@ -158,4 +181,11 @@ export interface NewtoneThemeContext {
   readonly config: NewtoneThemeConfig;
   readonly mode: ColorMode;
   readonly setMode: (mode: ColorMode) => void;
+  /**
+   * Optional URL for the typography telemetry reporting endpoint.
+   * When set, the Text component (in responsive mode) will batch and POST
+   * ObserverPayload observations to this URL for cross-site aggregation.
+   * When absent, no telemetry is sent (opt-in).
+   */
+  readonly reportingEndpoint?: string;
 }

package/src/theme/useBreakpoint.ts

@@ -0,0 +1,14 @@
+import { useWindowDimensions } from 'react-native';
+import { getBreakpointForWidth } from '@newtonedev/fonts';
+import type { BreakpointKey } from '@newtonedev/fonts';
+
+/**
+ * Returns the current viewport breakpoint key ('sm' | 'md' | 'lg').
+ *
+ * Uses `useWindowDimensions` from react-native (cross-platform — works
+ * on web via react-native-web) and re-evaluates on window resize.
+ */
+export function useBreakpoint(): BreakpointKey {
+  const { width } = useWindowDimensions();
+  return getBreakpointForWidth(width);
+}

package/src/tokens/computeTokens.ts

@@ -1,6 +1,7 @@
 import { getColor } from 'newtone';
 import type { PaletteConfig } from 'newtone';
-import type { ColorSystemConfig, ColorMode, ElevationLevel, FontConfig, TokenOverrides } from '../theme/types';
+import { fontConfigToFamily } from '@newtonedev/fonts';
+import type { ColorSystemConfig, ColorMode, ElevationLevel, FontSlot, TokenOverrides } from '../theme/types';
 import type { ResolvedTokens, PaletteTokens } from './types';
 
 /**
@@ -115,14 +116,6 @@ export const ERROR_DEFAULTS: PaletteDefaults = {
   },
 };
 
-/**
- * Convert FontConfig to CSS font-family string
- */
-function fontConfigToFamily(font: FontConfig): string {
-  const family = font.family.includes(' ') ? `"${font.family}"` : font.family;
-  return `${family}, ${font.fallback}`;
-}
-
 const clamp = (n: number) => Math.max(0, Math.min(1, n));
 
 /**
@@ -262,10 +255,9 @@ export function computeTokens(
   spacing: { readonly '00': number; readonly '02': number; readonly '04': number; readonly '06': number; readonly '08': number; readonly '10': number; readonly '12': number; readonly '16': number; readonly '20': number; readonly '24': number; readonly '32': number; readonly '40': number; readonly '48': number },
   radius: { readonly none: number; readonly sm: number; readonly md: number; readonly lg: number; readonly xl: number; readonly pill: 999 },
   typography: {
-    readonly fonts: { readonly mono: FontConfig; readonly display: FontConfig; readonly default: FontConfig };
-    readonly scale: { readonly xs: number; readonly sm: number; readonly base: number; readonly md: number; readonly lg: number; readonly xl: number; readonly xxl: number };
-    readonly lineHeight: { readonly tight: number; readonly normal: number; readonly relaxed: number };
-    readonly fontWeight: { readonly regular: number; readonly medium: number; readonly semibold: number; readonly bold: number };
+    readonly fonts: { readonly main: FontSlot; readonly display: FontSlot; readonly mono: FontSlot; readonly currency: FontSlot };
+    readonly fontSizes: { readonly [key: string]: number };
+    readonly lineHeights: { readonly [key: string]: number };
   },
   icons: {
     readonly variant: 'outlined' | 'rounded' | 'sharp';
@@ -493,13 +485,25 @@ export function computeTokens(
     radius,
     typography: {
       fonts: {
-        mono: fontConfigToFamily(typography.fonts.mono),
-        display: fontConfigToFamily(typography.fonts.display),
-        default: fontConfigToFamily(typography.fonts.default),
+        main: {
+          family: fontConfigToFamily(typography.fonts.main.config),
+          weights: typography.fonts.main.weights,
+        },
+        display: {
+          family: fontConfigToFamily(typography.fonts.display.config),
+          weights: typography.fonts.display.weights,
+        },
+        mono: {
+          family: fontConfigToFamily(typography.fonts.mono.config),
+          weights: typography.fonts.mono.weights,
+        },
+        currency: {
+          family: fontConfigToFamily(typography.fonts.currency.config),
+          weights: typography.fonts.currency.weights,
+        },
       },
-      size: typography.scale,
-      lineHeight: typography.lineHeight,
-      weight: typography.fontWeight,
+      fontSizes: typography.fontSizes,
+      lineHeights: typography.lineHeights,
     },
     icons: {
       variant: icons.variant,

package/src/tokens/types.ts

@@ -123,33 +123,19 @@ export interface ResolvedTokens {
     readonly xl: number;
     readonly pill: 999;
   };
-  /** Typography tokens for fonts, sizes, line heights, and weights */
+  /** Typography tokens for fonts (per-scope) and primitive size/lineHeight scales */
   readonly typography: {
+    /** Per-scope font family + weight mapping */
     readonly fonts: {
-      readonly mono: string;      // CSS font-family string
-      readonly display: string;   // CSS font-family string
-      readonly default: string;   // CSS font-family string
-    };
-    readonly size: {
-      readonly xs: number;
-      readonly sm: number;
-      readonly base: number;
-      readonly md: number;
-      readonly lg: number;
-      readonly xl: number;
-      readonly xxl: number;
-    };
-    readonly lineHeight: {
-      readonly tight: number;
-      readonly normal: number;
-      readonly relaxed: number;
-    };
-    readonly weight: {
-      readonly regular: number;
-      readonly medium: number;
-      readonly semibold: number;
-      readonly bold: number;
+      readonly main: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
+      readonly display: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
+      readonly mono: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
+      readonly currency: { readonly family: string; readonly weights: { readonly regular: number; readonly medium: number; readonly bold: number; } };
     };
+    /** Primitive font size scale — numbered tokens ('01'–'16'), values in px */
+    readonly fontSizes: { readonly [key: string]: number };
+    /** Primitive line height scale — numbered tokens ('01'–'16'), values in px */
+    readonly lineHeights: { readonly [key: string]: number };
   };
   /** Icon tokens for Material Symbols configuration */
   readonly icons: {

package/dist/fonts/googleFonts.d.ts

@@ -1,20 +0,0 @@
-export interface GoogleFontEntry {
-    readonly family: string;
-    readonly category: 'sans-serif' | 'serif' | 'monospace' | 'display';
-    readonly fallback: string;
-}
-/**
- * Curated list of popular Google Fonts organized by category.
- * Used by the font picker UI and the GoogleFontLoader.
- */
-export declare const GOOGLE_FONTS: readonly GoogleFontEntry[];
-export interface SystemFontEntry {
-    readonly family: string;
-    readonly category: 'sans-serif' | 'serif' | 'monospace';
-    readonly fallback: string;
-}
-/**
- * System font options that don't require external loading.
- */
-export declare const SYSTEM_FONTS: readonly SystemFontEntry[];
-//# sourceMappingURL=googleFonts.d.ts.map

package/dist/fonts/googleFonts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"googleFonts.d.ts","sourceRoot":"","sources":["../../src/fonts/googleFonts.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,YAAY,GAAG,OAAO,GAAG,WAAW,GAAG,SAAS,CAAC;IACpE,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,eAAe,EAiDlD,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;IACxD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,EAAE,SAAS,eAAe,EAgBlD,CAAC"}

package/src/fonts/googleFonts.ts

@@ -1,87 +0,0 @@
-export interface GoogleFontEntry {
-  readonly family: string;
-  readonly category: 'sans-serif' | 'serif' | 'monospace' | 'display';
-  readonly fallback: string;
-}
-
-/**
- * Curated list of popular Google Fonts organized by category.
- * Used by the font picker UI and the GoogleFontLoader.
- */
-export const GOOGLE_FONTS: readonly GoogleFontEntry[] = [
-  // Sans-serif
-  { family: 'Inter', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Roboto', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Open Sans', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Lato', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Montserrat', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Poppins', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Nunito', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Source Sans 3', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Work Sans', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Raleway', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'DM Sans', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Plus Jakarta Sans', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Outfit', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Space Grotesk', category: 'sans-serif', fallback: 'sans-serif' },
-  { family: 'Manrope', category: 'sans-serif', fallback: 'sans-serif' },
-
-  // Serif
-  { family: 'Playfair Display', category: 'serif', fallback: 'serif' },
-  { family: 'Merriweather', category: 'serif', fallback: 'serif' },
-  { family: 'Lora', category: 'serif', fallback: 'serif' },
-  { family: 'Libre Baskerville', category: 'serif', fallback: 'serif' },
-  { family: 'Source Serif 4', category: 'serif', fallback: 'serif' },
-  { family: 'Bitter', category: 'serif', fallback: 'serif' },
-  { family: 'Cormorant Garamond', category: 'serif', fallback: 'serif' },
-  { family: 'EB Garamond', category: 'serif', fallback: 'serif' },
-  { family: 'Crimson Text', category: 'serif', fallback: 'serif' },
-  { family: 'Noto Serif', category: 'serif', fallback: 'serif' },
-
-  // Monospace
-  { family: 'Fira Code', category: 'monospace', fallback: 'monospace' },
-  { family: 'JetBrains Mono', category: 'monospace', fallback: 'monospace' },
-  { family: 'Source Code Pro', category: 'monospace', fallback: 'monospace' },
-  { family: 'IBM Plex Mono', category: 'monospace', fallback: 'monospace' },
-  { family: 'Roboto Mono', category: 'monospace', fallback: 'monospace' },
-  { family: 'Space Mono', category: 'monospace', fallback: 'monospace' },
-  { family: 'Ubuntu Mono', category: 'monospace', fallback: 'monospace' },
-  { family: 'Inconsolata', category: 'monospace', fallback: 'monospace' },
-
-  // Display
-  { family: 'Abril Fatface', category: 'display', fallback: 'serif' },
-  { family: 'Bebas Neue', category: 'display', fallback: 'sans-serif' },
-  { family: 'Oswald', category: 'display', fallback: 'sans-serif' },
-  { family: 'Righteous', category: 'display', fallback: 'sans-serif' },
-  { family: 'Lobster', category: 'display', fallback: 'cursive' },
-  { family: 'Pacifico', category: 'display', fallback: 'cursive' },
-  { family: 'Comfortaa', category: 'display', fallback: 'sans-serif' },
-  { family: 'Fredoka', category: 'display', fallback: 'sans-serif' },
-];
-
-export interface SystemFontEntry {
-  readonly family: string;
-  readonly category: 'sans-serif' | 'serif' | 'monospace';
-  readonly fallback: string;
-}
-
-/**
- * System font options that don't require external loading.
- */
-export const SYSTEM_FONTS: readonly SystemFontEntry[] = [
-  {
-    family: 'system-ui',
-    category: 'sans-serif',
-    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-  },
-  {
-    family: 'ui-monospace',
-    category: 'monospace',
-    fallback: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-  },
-  {
-    family: 'ui-serif',
-    category: 'serif',
-    fallback: 'Georgia, "Times New Roman", serif',
-  },
-];