@newtonedev/components 0.1.6 → 0.1.8

package/src/registry/registry.ts

@@ -1,12 +1,11 @@
 import type { CategoryMeta, ComponentMeta } from './types';
 
 export const CATEGORIES: readonly CategoryMeta[] = [
-  { id: 'primitives', name: 'Design Primitives', description: 'Core building blocks for theme-aware layouts and typography' },
-  { id: 'actions', name: 'Actions', description: 'Interactive elements that trigger actions' },
-  { id: 'form-controls', name: 'Form Controls', description: 'Input elements for user data entry' },
-  { id: 'range-inputs', name: 'Range Inputs', description: 'Slider controls for numeric and continuous values' },
-  { id: 'layout', name: 'Layout', description: 'Structural and container components' },
-  { id: 'overlays', name: 'Overlays', description: 'Floating and portal-based UI elements' },
+  { id: 'colors', name: 'Colors', description: 'Color palettes and token visualization', icon: 'palette' },
+  { id: 'typography', name: 'Typography', description: 'Text roles, scopes, and weight control', icon: 'text_fields' },
+  { id: 'symbols', name: 'Symbols', description: 'Material Symbols icon browser', icon: 'grid_view' },
+  { id: 'layout', name: 'Layout', description: 'Structural containers — Frame and Wrapper', icon: 'grid_on' },
+  { id: 'components', name: 'Components', description: 'Interactive UI components', icon: 'widgets' },
 ];
 
 export const COMPONENTS: readonly ComponentMeta[] = [
@@ -14,7 +13,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'button',
     name: 'Button',
     importName: 'Button',
-    categoryId: 'actions',
+    categoryId: 'components',
     description: 'Interactive button with multiple variants, sizes, and optional icon',
     hasChildren: true,
     variants: [
@@ -96,7 +95,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'text-input',
     name: 'TextInput',
     importName: 'TextInput',
-    categoryId: 'form-controls',
+    categoryId: 'components',
     description: 'Text input field with label support',
     hasChildren: false,
     variants: [
@@ -123,7 +122,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'select',
     name: 'Select',
     importName: 'Select',
-    categoryId: 'form-controls',
+    categoryId: 'components',
     description: 'Dropdown selector with options',
     hasChildren: false,
     variants: [
@@ -170,7 +169,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'toggle',
     name: 'Toggle',
     importName: 'Toggle',
-    categoryId: 'form-controls',
+    categoryId: 'components',
     description: 'Binary switch component',
     hasChildren: false,
     variants: [
@@ -197,7 +196,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'slider',
     name: 'Slider',
     importName: 'Slider',
-    categoryId: 'range-inputs',
+    categoryId: 'components',
     description: 'Numeric range slider',
     hasChildren: false,
     variants: [
@@ -241,7 +240,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'hue-slider',
     name: 'HueSlider',
     importName: 'HueSlider',
-    categoryId: 'range-inputs',
+    categoryId: 'components',
     description: 'Specialized slider for hue selection (0-360\u00b0)',
     hasChildren: false,
     variants: [
@@ -377,7 +376,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'card',
     name: 'Card',
     importName: 'Card',
-    categoryId: 'layout',
+    categoryId: 'components',
     description: 'Surface container with elevation levels',
     hasChildren: true,
     variants: [
@@ -410,45 +409,59 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'text',
     name: 'Text',
     importName: 'Text',
-    categoryId: 'primitives',
-    description: 'Typography primitive with semantic size, weight, color, font, and lineHeight',
+    categoryId: 'typography',
+    description: 'Typography primitive with semantic scope (font family) and role (purpose)',
     hasChildren: true,
+    previewLayout: 'list',
     variants: [
-      { id: 'default', label: 'Default', props: {} },
-      { id: 'heading', label: 'Heading', props: { size: 'xl', weight: 'bold' } },
-      { id: 'subheading', label: 'Subheading', props: { size: 'lg', weight: 'semibold' } },
-      { id: 'body', label: 'Body', props: { size: 'base' } },
-      { id: 'caption', label: 'Caption', props: { size: 'sm', color: 'secondary' } },
-      { id: 'accent', label: 'Accent', props: { color: 'accent', weight: 'medium' } },
-      { id: 'mono', label: 'Monospace', props: { font: 'mono', size: 'sm' } },
+      { id: 'body', label: 'Body', props: { role: 'body' } },
+      { id: 'headline', label: 'Headline', props: { role: 'headline', scope: 'display' } },
+      { id: 'title', label: 'Title', props: { role: 'title', scope: 'display' } },
+      { id: 'heading', label: 'Heading', props: { role: 'heading' } },
+      { id: 'subheading', label: 'Subheading', props: { role: 'subheading' } },
+      { id: 'label', label: 'Label', props: { role: 'label' } },
+      { id: 'caption', label: 'Caption', props: { role: 'caption', color: 'secondary' } },
+      { id: 'mono', label: 'Monospace', props: { scope: 'mono', role: 'body' } },
+      { id: 'currency', label: 'Currency', props: { scope: 'currency', role: 'body' } },
     ],
     editableProps: [
       {
-        name: 'size',
-        label: 'Size',
+        name: 'scope',
+        label: 'Scope',
         control: 'select',
         options: [
-          { label: 'Extra Small', value: 'xs' },
-          { label: 'Small', value: 'sm' },
-          { label: 'Base', value: 'base' },
-          { label: 'Medium', value: 'md' },
-          { label: 'Large', value: 'lg' },
-          { label: 'Extra Large', value: 'xl' },
-          { label: 'XXL', value: 'xxl' },
+          { label: 'Main', value: 'main' },
+          { label: 'Display', value: 'display' },
+          { label: 'Mono', value: 'mono' },
+          { label: 'Currency', value: 'currency' },
         ],
-        defaultValue: 'base',
+        defaultValue: 'main',
       },
       {
-        name: 'weight',
-        label: 'Weight',
+        name: 'role',
+        label: 'Role',
         control: 'select',
         options: [
-          { label: 'Regular', value: 'regular' },
-          { label: 'Medium', value: 'medium' },
-          { label: 'Semibold', value: 'semibold' },
-          { label: 'Bold', value: 'bold' },
+          { label: 'Headline', value: 'headline' },
+          { label: 'Title', value: 'title' },
+          { label: 'Heading', value: 'heading' },
+          { label: 'Subheading', value: 'subheading' },
+          { label: 'Body', value: 'body' },
+          { label: 'Label', value: 'label' },
+          { label: 'Caption', value: 'caption' },
+        ],
+        defaultValue: 'body',
+      },
+      {
+        name: 'size',
+        label: 'Size',
+        control: 'select',
+        options: [
+          { label: 'Small', value: 'sm' },
+          { label: 'Medium', value: 'md' },
+          { label: 'Large', value: 'lg' },
         ],
-        defaultValue: 'regular',
+        defaultValue: 'md',
       },
       {
         name: 'color',
@@ -466,58 +479,42 @@ export const COMPONENTS: readonly ComponentMeta[] = [
         ],
         defaultValue: 'primary',
       },
-      {
-        name: 'font',
-        label: 'Font',
-        control: 'select',
-        options: [
-          { label: 'Default', value: 'default' },
-          { label: 'Display', value: 'display' },
-          { label: 'Mono', value: 'mono' },
-        ],
-        defaultValue: 'default',
-      },
     ],
   },
   {
     id: 'icon',
     name: 'Icon',
     importName: 'Icon',
-    categoryId: 'primitives',
-    description: 'Material Symbols icon with size, fill, and color',
+    categoryId: 'symbols',
+    description: 'Material Symbols icon with size and fill',
     hasChildren: false,
     variants: [
-      { id: 'home', label: 'Home', props: { name: 'home' } },
-      { id: 'settings', label: 'Settings', props: { name: 'settings' } },
-      { id: 'check', label: 'Check', props: { name: 'check' } },
-      { id: 'add', label: 'Add', props: { name: 'add' } },
-      { id: 'delete', label: 'Delete', props: { name: 'delete' } },
-      { id: 'search', label: 'Search', props: { name: 'search' } },
-      { id: 'filled', label: 'Filled Icon', props: { name: 'favorite', fill: 1 } },
-      { id: 'large', label: 'Large Icon', props: { name: 'star', size: 32 } },
+      { id: 'default', label: 'Default', props: { name: 'add' } },
     ],
     editableProps: [
       {
         name: 'name',
         label: 'Icon Name',
         control: 'text',
-        defaultValue: 'home',
+        defaultValue: 'add',
       },
       {
         name: 'size',
         label: 'Size',
-        control: 'number',
+        control: 'discrete-slider',
+        options: [
+          { label: '20', value: 20 },
+          { label: '24', value: 24 },
+          { label: '40', value: 40 },
+          { label: '48', value: 48 },
+        ],
         defaultValue: 24,
       },
       {
         name: 'fill',
         label: 'Fill',
-        control: 'select',
-        options: [
-          { label: 'Outlined', value: 0 },
-          { label: 'Filled', value: 1 },
-        ],
-        defaultValue: 0,
+        control: 'toggle',
+        defaultValue: false,
       },
     ],
   },
@@ -525,7 +522,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'wrapper',
     name: 'Wrapper',
     importName: 'Wrapper',
-    categoryId: 'primitives',
+    categoryId: 'layout',
     description: 'Lightweight layout container with direction, spacing, and alignment (no theming)',
     hasChildren: true,
     variants: [
@@ -599,7 +596,7 @@ export const COMPONENTS: readonly ComponentMeta[] = [
     id: 'color-scale-slider',
     name: 'ColorScaleSlider',
     importName: 'ColorScaleSlider',
-    categoryId: 'range-inputs',
+    categoryId: 'components',
     description: 'Interactive palette preview slider with color segments',
     hasChildren: false,
     variants: [

package/src/registry/types.ts

@@ -2,6 +2,7 @@ export interface CategoryMeta {
   readonly id: string;
   readonly name: string;
   readonly description: string;
+  readonly icon?: string;
 }
 
 export interface VariantMeta {
@@ -18,7 +19,7 @@ export interface EditablePropOption {
 export interface EditableProp {
   readonly name: string;
   readonly label: string;
-  readonly control: 'select' | 'text' | 'toggle' | 'number';
+  readonly control: 'select' | 'text' | 'toggle' | 'number' | 'discrete-slider';
   readonly options?: readonly EditablePropOption[];
   readonly defaultValue: string | number | boolean;
 }
@@ -30,6 +31,7 @@ export interface ComponentMeta {
   readonly categoryId: string;
   readonly description: string;
   readonly hasChildren: boolean;
+  readonly previewLayout?: 'grid' | 'list';
   readonly variants: readonly VariantMeta[];
   readonly editableProps: readonly EditableProp[];
 }

package/src/theme/NewtoneProvider.tsx

@@ -2,6 +2,7 @@ import React, { createContext, useState, useMemo, useContext } from 'react';
 import type { NewtoneThemeConfig, NewtoneThemeContext, ColorMode } from './types';
 import { DEFAULT_THEME_CONFIG } from './defaults';
 import { GoogleFontLoader } from '../fonts/GoogleFontLoader';
+import { SelfHostedFontLoader } from '../fonts/SelfHostedFontLoader';
 import { IconFontLoader } from '../fonts/IconFontLoader';
 
 const ThemeContext = createContext<NewtoneThemeContext | null>(null);
@@ -10,6 +11,14 @@ export interface NewtoneProviderProps {
   readonly config?: NewtoneThemeConfig;
   readonly initialMode?: ColorMode;
   readonly children: React.ReactNode;
+  /** Optional URL for typography telemetry. When set, adaptive Text instances report observations. */
+  readonly reportingEndpoint?: string;
+  /**
+   * Self-hosted @font-face CSS from the theme API.
+   * When provided, injects this CSS instead of loading from Google CDN.
+   * Falls back to Google CDN when absent or null.
+   */
+  readonly fontFaceCss?: string | null;
 }
 
 /**
@@ -28,6 +37,8 @@ export function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = 'light',
   children,
+  reportingEndpoint,
+  fontFaceCss,
 }: NewtoneProviderProps) {
   const [mode, setMode] = useState<ColorMode>(initialMode);
 
@@ -36,13 +47,18 @@ export function NewtoneProvider({
       config,
       mode,
       setMode,
+      reportingEndpoint,
     }),
-    [config, mode]
+    [config, mode, reportingEndpoint]
   );
 
   return (
     <ThemeContext.Provider value={value}>
-      <GoogleFontLoader fonts={config.typography.fonts} />
+      {fontFaceCss ? (
+        <SelfHostedFontLoader fontFaceCss={fontFaceCss} />
+      ) : (
+        <GoogleFontLoader fonts={config.typography.fonts} />
+      )}
       <IconFontLoader icons={config.icons} />
       {children}
     </ThemeContext.Provider>

package/src/theme/defaults.ts

@@ -11,6 +11,10 @@ import {
   DEFAULT_ERROR_HUE,
   DEFAULT_ERROR_SATURATION,
 } from 'newtone';
+import { DEFAULT_FONT_SLOTS, DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES } from '@newtonedev/fonts';
+
+// Re-export typography defaults from @newtonedev/fonts (canonical source)
+export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES } from '@newtonedev/fonts';
 
 /**
  * Default theme configuration matching playground defaults.
@@ -54,34 +58,10 @@ export const DEFAULT_THEME_CONFIG: NewtoneThemeConfig = {
     pill: 999,
   },
   typography: {
-    fonts: {
-      mono: {
-        type: 'system',
-        family: 'ui-monospace',
-        fallback: 'SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-      },
-      display: {
-        type: 'system',
-        family: 'system-ui',
-        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      },
-      default: {
-        type: 'system',
-        family: 'system-ui',
-        fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-      },
-    },
-    scale: {
-      xs: 10,   // 16 / 1.25^2
-      sm: 13,   // 16 / 1.25
-      base: 16,
-      md: 20,   // 16 * 1.25
-      lg: 25,   // 16 * 1.25^2
-      xl: 31,   // 16 * 1.25^3
-      xxl: 39,  // 16 * 1.25^4
-    },
-    lineHeight: { tight: 1.25, normal: 1.5, relaxed: 1.75 },
-    fontWeight: { regular: 400, medium: 500, semibold: 600, bold: 700 },
+    fonts: DEFAULT_FONT_SLOTS,
+    fontSizes: DEFAULT_FONT_SIZES,
+    lineHeights: DEFAULT_LINE_HEIGHTS,
+    roles: DEFAULT_ROLE_SCALES,
   },
   icons: {
     variant: 'rounded',  // Material Design 3 aesthetic

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