@newtonedev/components 0.1.6 → 0.1.8

package/dist/index.js

@@ -1,6 +1,8 @@
-import React13, { createContext, useState, useMemo, useContext, useEffect, useCallback, useRef } from 'react';
-import { DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE, getColor, srgbToHex } from 'newtone';
-import { Text, View, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
+import React14, { createContext, useState, useMemo, useEffect, useContext, useCallback, useRef } from 'react';
+import { srgbToHex, getColor, DEFAULT_NEUTRAL_SATURATION, DEFAULT_NEUTRAL_HUE, DEFAULT_ACCENT_SATURATION, DEFAULT_ACCENT_HUE, DEFAULT_SUCCESS_SATURATION, DEFAULT_SUCCESS_HUE, DEFAULT_WARNING_SATURATION, DEFAULT_WARNING_HUE, DEFAULT_ERROR_SATURATION, DEFAULT_ERROR_HUE } from 'newtone';
+import { ROLE_DEFAULT_WEIGHTS, BREAKPOINT_ROLE_SCALE, scaleRoleStep, SEMANTIC_WEIGHT_MAP, resolveResponsiveSize, estimateLineWidths, REFERENCE_LINE_HEIGHT_RATIO, buildFontFeatureSettings, getBreakpointForWidth, fontConfigToFamily, DEFAULT_ROLE_SCALES, DEFAULT_LINE_HEIGHTS, DEFAULT_FONT_SIZES, DEFAULT_FONT_SLOTS, buildGoogleFontsUrl } from '@newtonedev/fonts';
+export { DEFAULT_FONT_SIZES, DEFAULT_LINE_HEIGHTS, DEFAULT_ROLE_SCALES, buildGoogleFontsUrl } from '@newtonedev/fonts';
+import { Text, View, useWindowDimensions, Pressable, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
 
 // src/theme/NewtoneProvider.tsx
 var DEFAULT_THEME_CONFIG = {
@@ -54,40 +56,10 @@ var DEFAULT_THEME_CONFIG = {
     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",
@@ -99,20 +71,6 @@ var DEFAULT_THEME_CONFIG = {
   }
 };
 
-// src/fonts/buildGoogleFontsUrl.ts
-function buildGoogleFontsUrl(fonts) {
-  const googleFonts = [fonts.mono, fonts.display, fonts.default].filter(
-    (f) => f.type === "google"
-  );
-  if (googleFonts.length === 0) return null;
-  const unique = [...new Map(googleFonts.map((f) => [f.family, f])).values()];
-  const families = unique.map((f) => {
-    const encoded = f.family.replace(/ /g, "+");
-    return `family=${encoded}:wght@400;500;600;700`;
-  });
-  return `https://fonts.googleapis.com/css2?${families.join("&")}&display=swap`;
-}
-
 // src/fonts/GoogleFontLoader.tsx
 function GoogleFontLoader({ fonts }) {
   const linkRef = useRef(null);
@@ -138,15 +96,52 @@ function GoogleFontLoader({ fonts }) {
       }
     };
   }, [
-    fonts.mono.family,
-    fonts.mono.type,
-    fonts.display.family,
-    fonts.display.type,
-    fonts.default.family,
-    fonts.default.type
+    fonts.main.config.family,
+    fonts.main.config.type,
+    fonts.main.weights.regular,
+    fonts.main.weights.medium,
+    fonts.main.weights.bold,
+    fonts.display.config.family,
+    fonts.display.config.type,
+    fonts.display.weights.regular,
+    fonts.display.weights.medium,
+    fonts.display.weights.bold,
+    fonts.mono.config.family,
+    fonts.mono.config.type,
+    fonts.mono.weights.regular,
+    fonts.mono.weights.medium,
+    fonts.mono.weights.bold,
+    fonts.currency.config.family,
+    fonts.currency.config.type,
+    fonts.currency.weights.regular,
+    fonts.currency.weights.medium,
+    fonts.currency.weights.bold
   ]);
   return null;
 }
+function SelfHostedFontLoader({ fontFaceCss }) {
+  const styleRef = useRef(null);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (styleRef.current) {
+      styleRef.current.remove();
+      styleRef.current = null;
+    }
+    if (!fontFaceCss) return;
+    const style = document.createElement("style");
+    style.setAttribute("data-newtone-fonts", "self-hosted");
+    style.textContent = fontFaceCss;
+    document.head.appendChild(style);
+    styleRef.current = style;
+    return () => {
+      if (styleRef.current) {
+        styleRef.current.remove();
+        styleRef.current = null;
+      }
+    };
+  }, [fontFaceCss]);
+  return null;
+}
 function IconFontLoader({ icons }) {
   const linkRef = useRef(null);
   useEffect(() => {
@@ -180,18 +175,21 @@ var ThemeContext = createContext(null);
 function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = "light",
-  children
+  children,
+  reportingEndpoint,
+  fontFaceCss
 }) {
   const [mode, setMode] = useState(initialMode);
   const value = useMemo(
     () => ({
       config,
       mode,
-      setMode
+      setMode,
+      reportingEndpoint
     }),
-    [config, mode]
+    [config, mode, reportingEndpoint]
   );
-  return /* @__PURE__ */ React13.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React13.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React13.createElement(IconFontLoader, { icons: config.icons }), children);
+  return /* @__PURE__ */ React14.createElement(ThemeContext.Provider, { value }, fontFaceCss ? /* @__PURE__ */ React14.createElement(SelfHostedFontLoader, { fontFaceCss }) : /* @__PURE__ */ React14.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React14.createElement(IconFontLoader, { icons: config.icons }), children);
 }
 function useNewtoneTheme() {
   const context = useContext(ThemeContext);
@@ -274,10 +272,6 @@ var ERROR_DEFAULTS = {
     border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
   }
 };
-function fontConfigToFamily(font) {
-  const family = font.family.includes(" ") ? `"${font.family}"` : font.family;
-  return `${family}, ${font.fallback}`;
-}
 var clamp = (n) => Math.max(0, Math.min(1, n));
 function computePaletteTokens(palette, defaults, mode, elevation, dynamicRange, elevationDelta, effectiveTextMode, autoAccentNv, neutralTextPrimary, neutralBgElevated) {
   const modeDefaults = defaults[mode];
@@ -532,13 +526,25 @@ function computeTokens(config, mode, elevation, spacing, radius, typography, ico
     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,
@@ -653,7 +659,7 @@ function getSizeConfig(size, tokens) {
       padding: 8,
       gap: tokens.spacing["08"],
       borderRadius: 8,
-      textSize: "base",
+      textSize: "md",
       // 16px
       iconSize: 24
     },
@@ -661,7 +667,7 @@ function getSizeConfig(size, tokens) {
       padding: 12,
       gap: tokens.spacing["08"],
       borderRadius: 12,
-      textSize: "base",
+      textSize: "md",
       // 16px
       iconSize: 24
     },
@@ -669,7 +675,7 @@ function getSizeConfig(size, tokens) {
       padding: 16,
       gap: tokens.spacing["08"],
       borderRadius: 16,
-      textSize: "base",
+      textSize: "md",
       // 16px
       iconSize: 24
     }
@@ -774,9 +780,7 @@ function Icon({
   opticalSize,
   fill = 0,
   color,
-  elevation = 1,
   style,
-  onPress,
   // Accessibility
   accessibilityLabel,
   // Testing & platform
@@ -784,9 +788,9 @@ function Icon({
   nativeID,
   ref
 }) {
-  const tokens = useTokens(elevation);
+  const tokens = useTokens();
   const iconStyle = useMemo(() => {
-    const fontSize = size ?? tokens.typography.size.base;
+    const fontSize = size ?? tokens.typography.fontSizes["05"];
     const getOpticalSize = (size2) => {
       if (size2 <= 22) return 20;
       if (size2 <= 32) return 24;
@@ -796,7 +800,8 @@ function Icon({
     const opsz = opticalSize ?? getOpticalSize(fontSize);
     const iconColor = color ?? srgbToHex(tokens.textPrimary.srgb);
     const fontFamily = `Material Symbols ${tokens.icons.variant.charAt(0).toUpperCase() + tokens.icons.variant.slice(1)}`;
-    const fontVariationSettings = `'FILL' ${fill}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
+    const fillValue = typeof fill === "boolean" ? fill ? 1 : 0 : fill;
+    const fontVariationSettings = `'FILL' ${fillValue}, 'wght' ${tokens.icons.weight}, 'GRAD' ${tokens.icons.grade}, 'opsz' ${opsz}`;
     return {
       fontFamily,
       fontSize,
@@ -814,7 +819,7 @@ function Icon({
       ...style
     };
   }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Text,
     {
       ref,
@@ -822,12 +827,123 @@ function Icon({
       nativeID,
       accessibilityLabel,
       importantForAccessibility: accessibilityLabel ? "yes" : "no-hide-descendants",
-      style: iconStyle,
-      onPress
+      style: iconStyle
     },
     name
   );
 }
+
+// src/fonts/measureFont.ts
+var REF_STRING = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789 ";
+async function measureAvgCharWidth(fontFamily, fontWeight, fallback, fontSize = 16) {
+  if (typeof document === "undefined") return 0.55;
+  try {
+    await document.fonts.load(`${fontWeight} ${fontSize}px "${fontFamily}"`);
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return 0.55;
+    ctx.font = `${fontWeight} ${fontSize}px "${fontFamily}", ${fallback}`;
+    const ratio = ctx.measureText(REF_STRING).width / REF_STRING.length / fontSize;
+    return Math.round(ratio * 1e3) / 1e3;
+  } catch {
+    return 0.55;
+  }
+}
+
+// src/fonts/useLocalCalibration.ts
+var STORAGE_KEY = "newtone:font-metrics:v1";
+var TTL_MS = 7 * 24 * 60 * 60 * 1e3;
+function readCache() {
+  if (typeof localStorage === "undefined") return {};
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    return raw ? JSON.parse(raw) : {};
+  } catch {
+    return {};
+  }
+}
+function writeCache(cache) {
+  if (typeof localStorage === "undefined") return;
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(cache));
+  } catch {
+  }
+}
+function cacheKey(fontFamily, fontWeight) {
+  return `${fontFamily}:${fontWeight}`;
+}
+function useLocalCalibration(fontFamily, fontWeight, fallback, baseCalibration) {
+  const key = cacheKey(fontFamily, fontWeight);
+  const [ratio, setRatio] = useState(() => {
+    const cache = readCache();
+    const entry = cache[key];
+    if (entry && Date.now() - entry.measuredAt < TTL_MS) {
+      return entry.ratio;
+    }
+    return baseCalibration ?? 0.55;
+  });
+  useEffect(() => {
+    const cache = readCache();
+    const entry = cache[key];
+    if (entry && Date.now() - entry.measuredAt < TTL_MS) {
+      if (entry.ratio !== ratio) setRatio(entry.ratio);
+      return;
+    }
+    let cancelled = false;
+    measureAvgCharWidth(fontFamily, fontWeight, fallback).then((measured) => {
+      if (cancelled) return;
+      const updated = { ...readCache(), [key]: { ratio: measured, measuredAt: Date.now() } };
+      writeCache(updated);
+      setRatio(measured);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [key, fontFamily, fontWeight, fallback]);
+  return ratio;
+}
+
+// src/fonts/useTypographyCalibrations.ts
+function useTypographyCalibrations() {
+  const { config } = useNewtoneTheme();
+  return config.typography.calibrations ?? {};
+}
+
+// src/fonts/reportQueue.ts
+var queue = [];
+var flushTimer;
+function flush() {
+  if (queue.length === 0) return;
+  const byEndpoint = /* @__PURE__ */ new Map();
+  for (const item of queue) {
+    const group = byEndpoint.get(item.endpoint) ?? [];
+    group.push(item.payload);
+    byEndpoint.set(item.endpoint, group);
+  }
+  queue.length = 0;
+  for (const [endpoint, observations] of byEndpoint) {
+    fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ observations }),
+      // keepalive: true allows the request to outlive the page
+      keepalive: true
+    }).catch(() => {
+    });
+  }
+}
+function enqueueObservation(endpoint, payload) {
+  queue.push({ endpoint, payload });
+  if (flushTimer !== void 0) clearTimeout(flushTimer);
+  flushTimer = setTimeout(flush, 2e3);
+}
+function useBreakpoint() {
+  const { width } = useWindowDimensions();
+  return getBreakpointForWidth(width);
+}
+
+// src/primitives/Text/Text.tsx
+var TextScopeContext = createContext(null);
 function resolveTextColor(color, tokens) {
   switch (color) {
     case "primary":
@@ -848,53 +964,188 @@ function resolveTextColor(color, tokens) {
       return srgbToHex(tokens.error.fill.srgb);
   }
 }
-function Text2({
+var ADAPTIVE_ROLES = /* @__PURE__ */ new Set(["headline", "title", "heading", "subheading"]);
+var ROLE_HEADING_LEVEL = {
+  headline: 1,
+  title: 2,
+  heading: 3
+};
+function extractCharacterCount(node) {
+  if (typeof node === "string") return node.length;
+  if (typeof node === "number") return String(node).length;
+  if (!node) return 0;
+  if (Array.isArray(node)) {
+    return node.reduce((sum, child) => sum + extractCharacterCount(child), 0);
+  }
+  if (typeof node === "object" && "props" in node) {
+    return extractCharacterCount(node.props?.children);
+  }
+  return 0;
+}
+function TextBase({
   children,
-  size = "base",
-  weight = "regular",
+  scope = "main",
+  role = "body",
   color = "primary",
-  font = "default",
-  lineHeight = "normal",
+  size: sizeOverride,
   align,
   numberOfLines,
   elevation = 1,
   style,
-  // Accessibility
-  accessibilityRole,
-  // Testing & platform
+  accessibilityRole: accessibilityRoleOverride,
   testID,
   nativeID,
-  ref
+  ref,
+  responsive = false,
+  centerVertically = false,
+  features
 }) {
   const tokens = useTokens(elevation);
+  const { config, reportingEndpoint } = useNewtoneTheme();
+  const size = sizeOverride ?? "md";
+  const fontSlot = tokens.typography.fonts[scope];
+  const resolvedFontWeight = config.typography.roleWeights?.[role] ?? ROLE_DEFAULT_WEIGHTS[role];
+  const breakpoint = useBreakpoint();
+  const baseStep = config.typography.roles[role][size];
+  const bpScale = BREAKPOINT_ROLE_SCALE[breakpoint][role];
+  const step = bpScale === 1 ? baseStep : scaleRoleStep(baseStep, bpScale);
+  const calibrations = useTypographyCalibrations();
+  const fontSlotFull = config.typography.fonts[scope];
+  const localRatio = useLocalCalibration(
+    fontSlot.family,
+    SEMANTIC_WEIGHT_MAP.regular,
+    fontSlotFull.config.fallback,
+    calibrations[fontSlot.family]
+  );
+  const isAdaptive = ADAPTIVE_ROLES.has(role);
+  const [containerWidth, setContainerWidth] = useState(null);
+  const characterCount = useMemo(() => extractCharacterCount(children), [children]);
+  const resolvedStep = useMemo(
+    () => resolveResponsiveSize(
+      {
+        role,
+        size,
+        responsive: responsive && isAdaptive,
+        fontFamily: fontSlot.family,
+        maxFontSize: step.fontSize,
+        minFontSize: Math.max(8, Math.round(step.fontSize * 0.7))
+      },
+      config.typography.roles,
+      containerWidth != null ? { containerWidth, characterCount } : void 0,
+      { [fontSlot.family]: localRatio }
+    ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [role, size, responsive, isAdaptive, fontSlot.family, step.fontSize, config.typography.roles, containerWidth, characterCount, localRatio]
+  );
+  useEffect(() => {
+    if (!reportingEndpoint || !responsive || !isAdaptive || containerWidth == null) return;
+    const lineWidths = estimateLineWidths(characterCount, containerWidth, resolvedStep.fontSize, localRatio);
+    const lastLine = lineWidths[lineWidths.length - 1];
+    enqueueObservation(reportingEndpoint, {
+      fontFamily: fontSlot.family,
+      fontWeight: resolvedFontWeight,
+      role,
+      size,
+      fontSize: resolvedStep.fontSize,
+      containerWidth,
+      characterCount,
+      lineCount: lineWidths.length,
+      lastLineRatio: containerWidth > 0 ? lastLine / containerWidth : 1
+    });
+  }, [reportingEndpoint, resolvedStep.fontSize, containerWidth]);
   const resolvedStyle = useMemo(() => {
-    const fontSize = tokens.typography.size[size];
+    const activeStep = responsive && isAdaptive ? resolvedStep : step;
+    const currentMetrics = config.typography.fontMetrics?.[fontSlot.family];
+    const correctedLineHeight = currentMetrics ? Math.round(activeStep.lineHeight * currentMetrics.naturalLineHeightRatio / REFERENCE_LINE_HEIGHT_RATIO / 4) * 4 : activeStep.lineHeight;
+    const vcOffset = centerVertically && currentMetrics ? Math.round(currentMetrics.verticalCenterOffset * activeStep.fontSize * 2) / 2 : 0;
+    const activeFeatures = features ? currentMetrics?.features ? features.filter((tag) => currentMetrics.features.includes(tag)) : [...features] : [];
+    const featureSettings = activeFeatures.length > 0 ? buildFontFeatureSettings(activeFeatures) : void 0;
     return {
-      // Font family from the theme (e.g. 'default' → 'Inter', 'mono' → 'JetBrains Mono').
-      fontFamily: tokens.typography.fonts[font],
-      fontSize,
-      // Font weight is stored as a number (e.g. 400, 600) but React Native expects a string.
-      fontWeight: String(tokens.typography.weight[weight]),
-      // Convert the theme color from internal sRGB format to a hex string (e.g. '#1a1a1a').
+      fontFamily: fontSlot.family,
+      fontSize: activeStep.fontSize,
+      fontWeight: String(resolvedFontWeight),
       color: resolveTextColor(color, tokens),
-      // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
-      lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
-      textAlign: align
+      lineHeight: correctedLineHeight,
+      textAlign: align,
+      ...vcOffset !== 0 ? { transform: [{ translateY: vcOffset }] } : {},
+      ...featureSettings ? { fontFeatureSettings: featureSettings } : {}
     };
-  }, [tokens, size, weight, color, font, lineHeight, align]);
-  return /* @__PURE__ */ React13.createElement(
+  }, [tokens, fontSlot, step, resolvedStep, responsive, isAdaptive, resolvedFontWeight, color, align, config.typography.fontMetrics, centerVertically, features]);
+  const inferredA11yRole = role === "headline" || role === "title" || role === "heading" ? "header" : void 0;
+  const effectiveA11yRole = accessibilityRoleOverride ?? inferredA11yRole;
+  const ariaLevel = effectiveA11yRole === "header" ? ROLE_HEADING_LEVEL[role] : void 0;
+  const scopeCtx = useMemo(() => ({ weights: SEMANTIC_WEIGHT_MAP }), []);
+  const textNode = /* @__PURE__ */ React14.createElement(TextScopeContext.Provider, { value: scopeCtx }, /* @__PURE__ */ React14.createElement(
     Text,
     {
       ref,
       testID,
       nativeID,
-      accessibilityRole,
+      accessibilityRole: effectiveA11yRole,
+      "aria-level": ariaLevel,
       style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
       numberOfLines
     },
     children
+  ));
+  if (responsive && isAdaptive) {
+    return /* @__PURE__ */ React14.createElement(
+      View,
+      {
+        onLayout: (e) => {
+          const w = e.nativeEvent.layout.width;
+          if (w > 0) setContainerWidth(w);
+        },
+        style: { width: "100%" }
+      },
+      textNode
+    );
+  }
+  return textNode;
+}
+function TextSpan({ children, color, weight, italic, underline, highlight, style }) {
+  const tokens = useTokens(1);
+  const scopeCtx = useContext(TextScopeContext);
+  const spanStyle = useMemo(() => {
+    const s = {};
+    if (color) s.color = resolveTextColor(color, tokens);
+    if (weight && scopeCtx) s.fontWeight = String(scopeCtx.weights[weight]);
+    if (italic) s.fontStyle = "italic";
+    if (underline) s.textDecorationLine = "underline";
+    if (highlight) s.backgroundColor = resolveTextColor(highlight, tokens);
+    return s;
+  }, [tokens, scopeCtx, color, weight, italic, underline, highlight]);
+  return React14.createElement(
+    Text,
+    { style: style ? [spanStyle, ...Array.isArray(style) ? style : [style]] : spanStyle },
+    children
   );
 }
+function TextBold(props) {
+  return React14.createElement(TextSpan, { ...props, weight: "bold" });
+}
+function TextMedium(props) {
+  return React14.createElement(TextSpan, { ...props, weight: "medium" });
+}
+function TextItalic(props) {
+  return React14.createElement(TextSpan, { ...props, italic: true });
+}
+function TextUnderline(props) {
+  return React14.createElement(TextSpan, { ...props, underline: true });
+}
+function TextHighlight(props) {
+  return React14.createElement(TextSpan, props);
+}
+
+// src/primitives/Text/index.ts
+var Text2 = Object.assign(TextBase, {
+  Span: TextSpan,
+  Bold: TextBold,
+  Medium: TextMedium,
+  Italic: TextItalic,
+  Underline: TextUnderline,
+  Highlight: TextHighlight
+});
 
 // src/primitives/Frame/Frame.utils.ts
 function resolveSpacing(value, tokens) {
@@ -1098,7 +1349,7 @@ function Wrapper({
     ]
   );
   const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     View,
     {
       ref,
@@ -1125,17 +1376,17 @@ function Button({
   ...pressableProps
 }) {
   const tokens = useTokens();
-  const { variantColors, sizeTokens } = React13.useMemo(
+  const { variantColors, sizeTokens } = React14.useMemo(
     () => getButtonConfig(variant, semantic, size, disabled, tokens),
     [variant, semantic, size, disabled, tokens]
   );
-  const padding = React13.useMemo(
+  const padding = React14.useMemo(
     () => computeButtonPadding(size, !!icon, !!children, iconPosition),
     [size, icon, children, iconPosition]
   );
-  return /* @__PURE__ */ React13.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
+  return /* @__PURE__ */ React14.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
     // Wrapper handles layout: direction, gap, alignment (padding via style)
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       Wrapper,
       {
         direction: "horizontal",
@@ -1156,13 +1407,14 @@ function Button({
           ...Array.isArray(style) ? style : style ? [style] : []
         ]
       },
-      icon && iconPosition === "left" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+      icon && iconPosition === "left" && /* @__PURE__ */ React14.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
       children && // Text primitive with semantic props + color style override
-      /* @__PURE__ */ React13.createElement(
+      /* @__PURE__ */ React14.createElement(
         Text2,
         {
+          role: "label",
           size: sizeTokens.textSize,
-          weight: "semibold",
+          centerVertically: true,
           style: [
             { color: variantColors.textColor },
             ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
@@ -1170,7 +1422,7 @@ function Button({
         },
         children
       ),
-      icon && iconPosition === "right" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+      icon && iconPosition === "right" && /* @__PURE__ */ React14.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
     )
   ));
 }
@@ -1195,11 +1447,11 @@ function Card({
   disabled = false
 }) {
   const tokens = useTokens(elevation);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getCardStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
 }
 var hadKeyboardEvent = false;
 var isListenerSetup = false;
@@ -1350,9 +1602,9 @@ function getFrameStyles(input) {
 
 // src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
-  return React13.Children.map(children, (child) => {
+  return React14.Children.map(children, (child) => {
     if (typeof child === "string" || typeof child === "number") {
-      return /* @__PURE__ */ React13.createElement(Text, { style: textStyle }, child);
+      return /* @__PURE__ */ React14.createElement(Text, { style: textStyle }, child);
     }
     return child;
   });
@@ -1491,9 +1743,9 @@ function Frame({
   const textStyle = useMemo(
     () => ({
       color: srgbToHex(tokens.textPrimary.srgb),
-      fontSize: tokens.typography.size.base,
-      fontFamily: tokens.typography.fonts.default,
-      lineHeight: tokens.typography.size.base * tokens.typography.lineHeight.normal
+      fontSize: tokens.typography.fontSizes["05"],
+      fontFamily: tokens.typography.fonts.main.family,
+      lineHeight: tokens.typography.lineHeights["06"]
     }),
     [tokens]
   );
@@ -1501,10 +1753,10 @@ function Frame({
     () => wrapTextChildren(children, textStyle),
     [children, textStyle]
   );
-  return /* @__PURE__ */ React13.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
+  return /* @__PURE__ */ React14.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
     // Pressable handles taps. When href is set, react-native-web renders
     // it as an <a> tag so it works like a regular link on the web.
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       Pressable,
       {
         ref,
@@ -1529,7 +1781,7 @@ function Frame({
     )
   ) : (
     // Non-interactive Frame: just a plain View with no tap handling.
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       View,
       {
         ref,
@@ -1549,20 +1801,20 @@ function getTextInputStyles(tokens, disabled) {
       gap: tokens.spacing["04"]
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     input: {
-      fontFamily: tokens.typography.fonts.default,
+      fontFamily: tokens.typography.fonts.main.family,
       backgroundColor: srgbToHex(tokens.backgroundSunken.srgb),
       borderWidth: 1,
       borderColor: srgbToHex(tokens.border.srgb),
       borderRadius: tokens.radius.md,
       paddingVertical: tokens.spacing["08"],
       paddingHorizontal: tokens.spacing["12"],
-      fontSize: tokens.typography.size.base,
+      fontSize: tokens.typography.fontSizes["05"],
       color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb),
       opacity: disabled ? 0.5 : 1
     }
@@ -1575,11 +1827,11 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getTextInputStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React14.createElement(
     TextInput$1,
     {
       style: styles.input,
@@ -1682,15 +1934,15 @@ function Popover({
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React13.createElement(View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React13.createElement(View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React14.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React14.createElement(View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
@@ -1719,7 +1971,7 @@ function isOptionGroup(item) {
 }
 function getSelectStyles(tokens, disabled, size, isOpen) {
   const isSm = size === "sm";
-  const fontSize = isSm ? tokens.typography.size.sm : tokens.typography.size.base;
+  const fontSize = isSm ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   const iconSize = fontSize + 2;
   const iconSpace = iconSize + tokens.spacing["08"];
   const paddingVertical = isSm ? tokens.spacing["04"] : tokens.spacing["08"];
@@ -1730,9 +1982,9 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       zIndex: isOpen ? 999 : 0
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     trigger: {
@@ -1749,7 +2001,7 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
     },
     triggerText: {
       flex: 1,
-      fontFamily: tokens.typography.fonts.default,
+      fontFamily: tokens.typography.fonts.main.family,
       fontSize,
       color: disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb)
     },
@@ -1761,9 +2013,9 @@ function getSelectStyles(tokens, disabled, size, isOpen) {
       justifyContent: "center"
     },
     groupLabel: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["01"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb),
       textTransform: "uppercase",
       letterSpacing: 0.5,
@@ -1885,9 +2137,9 @@ function SelectOptionRow({
   const tokens = useTokens(1);
   const paddingVertical = size === "sm" ? tokens.spacing["04"] : tokens.spacing["08"];
   const paddingHorizontal = size === "sm" ? tokens.spacing["08"] : tokens.spacing["12"];
-  const fontSize = size === "sm" ? tokens.typography.size.sm : tokens.typography.size.base;
+  const fontSize = size === "sm" ? tokens.typography.fontSizes["04"] : tokens.typography.fontSizes["05"];
   if (renderOption) {
-    return /* @__PURE__ */ React13.createElement(
+    return /* @__PURE__ */ React14.createElement(
       Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -1898,7 +2150,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -1927,18 +2179,18 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       Text,
       {
         style: [
           {
             flex: 1,
-            fontFamily: tokens.typography.fonts.default,
+            fontFamily: tokens.typography.fonts.main.family,
             fontSize,
             color: srgbToHex(tokens.textPrimary.srgb)
           },
           isSelected && {
-            fontWeight: tokens.typography.weight.semibold,
+            fontWeight: tokens.typography.fonts.main.weights.medium,
             color: srgbToHex(tokens.accent.fill.srgb)
           },
           option.disabled && {
@@ -1949,7 +2201,7 @@ function SelectOptionRow({
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React13.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React13.createElement(
+    isSelected && /* @__PURE__ */ React14.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React14.createElement(
       Icon,
       {
         name: "check",
@@ -2004,7 +2256,7 @@ function Select({
   const displayLabel = selectedOption?.label ?? placeholder ?? value;
   const iconColor = disabled ? srgbToHex(tokens.textSecondary.srgb) : srgbToHex(tokens.textPrimary.srgb);
   const triggerWebProps = { onKeyDown: handleKeyDown };
-  const trigger = /* @__PURE__ */ React13.createElement(
+  const trigger = /* @__PURE__ */ React14.createElement(
     Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -2014,24 +2266,24 @@ function Select({
       ...triggerWebProps,
       style: styles.trigger
     },
-    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React13.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
-    /* @__PURE__ */ React13.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React13.createElement(
+    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React14.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
+    /* @__PURE__ */ React14.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React14.createElement(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
-        size: size === "sm" ? tokens.typography.size.sm + 2 : tokens.typography.size.base + 2,
+        size: size === "sm" ? tokens.typography.fontSizes["04"] + 2 : tokens.typography.fontSizes["05"] + 2,
         color: iconColor
       }
     ))
   );
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React14.createElement(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React13.createElement(
+    /* @__PURE__ */ React14.createElement(
       ScrollView,
       {
         bounces: false,
@@ -2040,7 +2292,7 @@ function Select({
       },
       options.map((item) => {
         if (isOptionGroup(item)) {
-          return /* @__PURE__ */ React13.createElement(View, { key: item.label }, /* @__PURE__ */ React13.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React13.createElement(
+          return /* @__PURE__ */ React14.createElement(View, { key: item.label }, /* @__PURE__ */ React14.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React14.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -2056,7 +2308,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React13.createElement(
+        return /* @__PURE__ */ React14.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -2088,9 +2340,9 @@ function getToggleStyles(tokens, value, disabled) {
       opacity: disabled ? 0.5 : 1
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     track: {
@@ -2120,16 +2372,16 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getToggleStyles(tokens, value, disabled),
     [tokens, value, disabled]
   );
-  const handlePress = React13.useCallback(() => {
+  const handlePress = React14.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React14.createElement(
     Pressable,
     {
       onPress: handlePress,
@@ -2137,7 +2389,7 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React13.createElement(View, { style: styles.track }, /* @__PURE__ */ React13.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React14.createElement(View, { style: styles.track }, /* @__PURE__ */ React14.createElement(View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
@@ -2154,15 +2406,15 @@ function getSliderStyles(tokens, disabled) {
       alignItems: "center"
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     value: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textPrimary.srgb)
     },
     valueInput: {
@@ -2174,9 +2426,9 @@ function getSliderStyles(tokens, disabled) {
       borderRadius: 4,
       backgroundColor: "transparent",
       color: srgbToHex(tokens.textPrimary.srgb),
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       textAlign: "right"
     },
     trackContainer: {
@@ -2223,41 +2475,41 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React13.useRef(null);
-  const trackWidth = React13.useRef(0);
-  const trackPageX = React13.useRef(0);
-  const onValueChangeRef = React13.useRef(onValueChange);
-  const minRef = React13.useRef(min);
-  const maxRef = React13.useRef(max);
-  const stepRef = React13.useRef(step);
-  const disabledRef = React13.useRef(disabled);
-  React13.useEffect(() => {
+  const trackRef = React14.useRef(null);
+  const trackWidth = React14.useRef(0);
+  const trackPageX = React14.useRef(0);
+  const onValueChangeRef = React14.useRef(onValueChange);
+  const minRef = React14.useRef(min);
+  const maxRef = React14.useRef(max);
+  const stepRef = React14.useRef(step);
+  const disabledRef = React14.useRef(disabled);
+  React14.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React13.useCallback((pageX) => {
+  const computeValue = React14.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const raw = minRef.current + ratio2 * (maxRef.current - minRef.current);
     const stepped = Math.round(raw / stepRef.current) * stepRef.current;
     return Math.min(maxRef.current, Math.max(minRef.current, stepped));
   }, []);
-  const panResponder = React13.useRef(
+  const panResponder = React14.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2273,7 +2525,7 @@ function Slider({
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
-  const handleValueTextSubmit = React13.useCallback(
+  const handleValueTextSubmit = React14.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2282,12 +2534,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React13.useState(String(value));
-  React13.useEffect(() => {
+  const [editText, setEditText] = React14.useState(String(value));
+  React14.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React14.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React14.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2299,7 +2551,7 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React13.createElement(
+  ) : showValue && /* @__PURE__ */ React14.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React14.createElement(
     View,
     {
       ref: trackRef,
@@ -2312,9 +2564,9 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React13.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React13.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
-    /* @__PURE__ */ React13.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React14.createElement(View, { style: styles.trackRail }),
+    /* @__PURE__ */ React14.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
+    /* @__PURE__ */ React14.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
@@ -2370,15 +2622,15 @@ function getHueSliderStyles(tokens, disabled) {
       alignItems: "center"
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     value: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textPrimary.srgb)
     },
     valueInput: {
@@ -2390,9 +2642,9 @@ function getHueSliderStyles(tokens, disabled) {
       borderRadius: 4,
       backgroundColor: "transparent",
       color: srgbToHex(tokens.textPrimary.srgb),
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       textAlign: "right"
     },
     trackContainer: {
@@ -2437,41 +2689,41 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React13.useMemo(
+  const segments = React14.useMemo(
     () => buildHueSegments(min, max),
     [min, max]
   );
-  const trackRef = React13.useRef(null);
-  const trackWidth = React13.useRef(0);
-  const trackPageX = React13.useRef(0);
-  const onValueChangeRef = React13.useRef(onValueChange);
-  const minRef = React13.useRef(min);
-  const maxRef = React13.useRef(max);
-  const disabledRef = React13.useRef(disabled);
-  React13.useEffect(() => {
+  const trackRef = React14.useRef(null);
+  const trackWidth = React14.useRef(0);
+  const trackPageX = React14.useRef(0);
+  const onValueChangeRef = React14.useRef(onValueChange);
+  const minRef = React14.useRef(min);
+  const maxRef = React14.useRef(max);
+  const disabledRef = React14.useRef(disabled);
+  React14.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React13.useCallback((pageX) => {
+  const computeHue = React14.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const raw = minRef.current + ratio2 * (maxRef.current - minRef.current);
     const stepped = Math.round(raw);
     return (stepped % 360 + 360) % 360;
   }, []);
-  const panResponder = React13.useRef(
+  const panResponder = React14.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2487,7 +2739,7 @@ function HueSlider({
   const ratio = max > min ? (sliderValue - min) / (max - min) : 0;
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE3);
   const thumbLeft = ratio * usableWidth;
-  const handleValueTextSubmit = React13.useCallback(
+  const handleValueTextSubmit = React14.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2496,12 +2748,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React13.useState(String(value));
-  React13.useEffect(() => {
+  const [editText, setEditText] = React14.useState(String(value));
+  React14.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React14.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React14.createElement(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2513,7 +2765,7 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React13.createElement(
+  ) : showValue && /* @__PURE__ */ React14.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React14.createElement(
     View,
     {
       ref: trackRef,
@@ -2526,8 +2778,8 @@ function HueSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React13.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React13.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
-    /* @__PURE__ */ React13.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__PURE__ */ React14.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React14.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
+    /* @__PURE__ */ React14.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
   ));
 }
 var TRACK_HEIGHT4 = 22;
@@ -2544,9 +2796,9 @@ function getColorScaleSliderStyles(tokens, disabled) {
       alignItems: "center"
     },
     label: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.sm,
-      fontWeight: tokens.typography.weight.semibold,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["04"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.textSecondary.srgb)
     },
     trackContainer: {
@@ -2576,9 +2828,9 @@ function getColorScaleSliderStyles(tokens, disabled) {
       borderColor: srgbToHex(tokens.border.srgb)
     },
     warning: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.medium,
+      fontFamily: tokens.typography.fonts.main.family,
+      fontSize: tokens.typography.fontSizes["01"],
+      fontWeight: tokens.typography.fonts.main.weights.medium,
       color: srgbToHex(tokens.error.fill.srgb)
     }
   });
@@ -2598,36 +2850,36 @@ function ColorScaleSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getColorScaleSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React13.useRef(null);
-  const trackWidth = React13.useRef(0);
-  const trackPageX = React13.useRef(0);
-  const isDragging = React13.useRef(false);
-  const thumbAnim = React13.useRef(new Animated.Value(0)).current;
-  const onValueChangeRef = React13.useRef(onValueChange);
-  const disabledRef = React13.useRef(disabled);
-  const colorsLengthRef = React13.useRef(colors.length);
-  const trimEndsRef = React13.useRef(trimEnds);
-  const snapRef = React13.useRef(snap);
-  React13.useEffect(() => {
+  const trackRef = React14.useRef(null);
+  const trackWidth = React14.useRef(0);
+  const trackPageX = React14.useRef(0);
+  const isDragging = React14.useRef(false);
+  const thumbAnim = React14.useRef(new Animated.Value(0)).current;
+  const onValueChangeRef = React14.useRef(onValueChange);
+  const disabledRef = React14.useRef(disabled);
+  const colorsLengthRef = React14.useRef(colors.length);
+  const trimEndsRef = React14.useRef(trimEnds);
+  const snapRef = React14.useRef(snap);
+  React14.useEffect(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     colorsLengthRef.current = colors.length;
   }, [colors.length]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     trimEndsRef.current = trimEnds;
   }, [trimEnds]);
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     snapRef.current = snap;
   }, [snap]);
-  const computeNv = React13.useCallback((pageX) => {
+  const computeNv = React14.useCallback((pageX) => {
     const localX = pageX - trackPageX.current;
     const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
     const totalSteps2 = colorsLengthRef.current - 1;
@@ -2642,7 +2894,7 @@ function ColorScaleSlider({
     }
     return nv;
   }, []);
-  const panResponder = React13.useRef(
+  const panResponder = React14.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2670,7 +2922,7 @@ function ColorScaleSlider({
   const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
   const thumbLeft = ratio * usableWidth;
-  React13.useEffect(() => {
+  React14.useEffect(() => {
     if (isDragging.current || !animateValue) {
       thumbAnim.setValue(thumbLeft);
     } else {
@@ -2681,7 +2933,7 @@ function ColorScaleSlider({
       }).start();
     }
   }, [thumbLeft, animateValue, thumbAnim]);
-  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React13.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React13.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React14.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React14.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React14.createElement(
     View,
     {
       ref: trackRef,
@@ -2696,9 +2948,9 @@ function ColorScaleSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React13.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React13.createElement(View, { key: i, style: [styles.segment, { backgroundColor: srgbToHex(color.srgb) }] }))),
-    /* @__PURE__ */ React13.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
-  ), warning && /* @__PURE__ */ React13.createElement(Text, { style: styles.warning }, warning));
+    /* @__PURE__ */ React14.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React14.createElement(View, { key: i, style: [styles.segment, { backgroundColor: srgbToHex(color.srgb) }] }))),
+    /* @__PURE__ */ React14.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
+  ), warning && /* @__PURE__ */ React14.createElement(Text, { style: styles.warning }, warning));
 }
 function getAppShellStyles(tokens) {
   return StyleSheet.create({
@@ -2720,8 +2972,8 @@ function getAppShellStyles(tokens) {
 // src/composites/layout/AppShell/AppShell.tsx
 function AppShell({ sidebar, children }) {
   const tokens = useTokens();
-  const styles = React13.useMemo(() => getAppShellStyles(tokens), [tokens]);
-  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React13.createElement(View, { style: styles.main }, children));
+  const styles = React14.useMemo(() => getAppShellStyles(tokens), [tokens]);
+  return /* @__PURE__ */ React14.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React14.createElement(View, { style: styles.main }, children));
 }
 function getSidebarStyles({ tokens, width, bordered }) {
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -2759,11 +3011,11 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getSidebarStyles({ tokens, width, bordered }),
     [tokens, width, bordered]
   );
-  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React13.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React13.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React13.createElement(View, { style: styles.footer }, footer));
+  return /* @__PURE__ */ React14.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React14.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React14.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React14.createElement(View, { style: styles.footer }, footer));
 }
 function getNavbarStyles({ tokens, height, bordered }) {
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -2801,28 +3053,27 @@ function Navbar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React13.useMemo(
+  const styles = React14.useMemo(
     () => getNavbarStyles({ tokens, height, bordered }),
     [tokens, height, bordered]
   );
-  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React13.createElement(View, { style: styles.right }, right)));
+  return /* @__PURE__ */ React14.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React14.createElement(View, { style: styles.right }, right)));
 }
 
 // src/registry/registry.ts
 var CATEGORIES = [
-  { 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 \u2014 Frame and Wrapper", icon: "grid_on" },
+  { id: "components", name: "Components", description: "Interactive UI components", icon: "widgets" }
 ];
 var COMPONENTS = [
   {
     id: "button",
     name: "Button",
     importName: "Button",
-    categoryId: "actions",
+    categoryId: "components",
     description: "Interactive button with multiple variants, sizes, and optional icon",
     hasChildren: true,
     variants: [
@@ -2904,7 +3155,7 @@ var COMPONENTS = [
     id: "text-input",
     name: "TextInput",
     importName: "TextInput",
-    categoryId: "form-controls",
+    categoryId: "components",
     description: "Text input field with label support",
     hasChildren: false,
     variants: [
@@ -2931,7 +3182,7 @@ var COMPONENTS = [
     id: "select",
     name: "Select",
     importName: "Select",
-    categoryId: "form-controls",
+    categoryId: "components",
     description: "Dropdown selector with options",
     hasChildren: false,
     variants: [
@@ -2978,7 +3229,7 @@ var COMPONENTS = [
     id: "toggle",
     name: "Toggle",
     importName: "Toggle",
-    categoryId: "form-controls",
+    categoryId: "components",
     description: "Binary switch component",
     hasChildren: false,
     variants: [
@@ -3005,7 +3256,7 @@ var COMPONENTS = [
     id: "slider",
     name: "Slider",
     importName: "Slider",
-    categoryId: "range-inputs",
+    categoryId: "components",
     description: "Numeric range slider",
     hasChildren: false,
     variants: [
@@ -3049,7 +3300,7 @@ var COMPONENTS = [
     id: "hue-slider",
     name: "HueSlider",
     importName: "HueSlider",
-    categoryId: "range-inputs",
+    categoryId: "components",
     description: "Specialized slider for hue selection (0-360\xB0)",
     hasChildren: false,
     variants: [
@@ -3185,7 +3436,7 @@ var COMPONENTS = [
     id: "card",
     name: "Card",
     importName: "Card",
-    categoryId: "layout",
+    categoryId: "components",
     description: "Surface container with elevation levels",
     hasChildren: true,
     variants: [
@@ -3218,45 +3469,59 @@ var COMPONENTS = [
     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: "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: "Regular", value: "regular" },
-          { label: "Medium", value: "medium" },
-          { label: "Semibold", value: "semibold" },
-          { label: "Bold", value: "bold" }
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
         ],
-        defaultValue: "regular"
+        defaultValue: "md"
       },
       {
         name: "color",
@@ -3273,17 +3538,6 @@ var COMPONENTS = [
           { label: "Error", value: "error" }
         ],
         defaultValue: "primary"
-      },
-      {
-        name: "font",
-        label: "Font",
-        control: "select",
-        options: [
-          { label: "Default", value: "default" },
-          { label: "Display", value: "display" },
-          { label: "Mono", value: "mono" }
-        ],
-        defaultValue: "default"
       }
     ]
   },
@@ -3291,41 +3545,36 @@ var COMPONENTS = [
     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
       }
     ]
   },
@@ -3333,7 +3582,7 @@ var COMPONENTS = [
     id: "wrapper",
     name: "Wrapper",
     importName: "Wrapper",
-    categoryId: "primitives",
+    categoryId: "layout",
     description: "Lightweight layout container with direction, spacing, and alignment (no theming)",
     hasChildren: true,
     variants: [
@@ -3407,7 +3656,7 @@ var COMPONENTS = [
     id: "color-scale-slider",
     name: "ColorScaleSlider",
     importName: "ColorScaleSlider",
-    categoryId: "range-inputs",
+    categoryId: "components",
     description: "Interactive palette preview slider with color segments",
     hasChildren: false,
     variants: [
@@ -3450,6 +3699,7 @@ var HANDLER_PROPS = {
 };
 var CHILDREN_CONTENT = {
   button: "Button",
+  text: "The quick brown fox",
   card: "{/* content */}",
   frame: "{/* content */}"
 };
@@ -3529,72 +3779,232 @@ function formatProp(name, value) {
   return `${name}={${JSON.stringify(value)}}`;
 }
 
-// src/fonts/googleFonts.ts
-var GOOGLE_FONTS = [
-  // 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" }
-];
-var SYSTEM_FONTS = [
+// src/registry/icons.ts
+var ICON_CATALOG = [
+  {
+    id: "navigation",
+    label: "Navigation",
+    icons: [
+      "home",
+      "menu",
+      "close",
+      "arrow_back",
+      "arrow_forward",
+      "arrow_upward",
+      "arrow_downward",
+      "chevron_left",
+      "chevron_right",
+      "expand_more",
+      "expand_less",
+      "first_page",
+      "last_page",
+      "more_vert",
+      "more_horiz",
+      "unfold_more",
+      "unfold_less",
+      "subdirectory_arrow_right"
+    ]
+  },
+  {
+    id: "actions",
+    label: "Actions",
+    icons: [
+      "search",
+      "settings",
+      "done",
+      "add",
+      "remove",
+      "delete",
+      "edit",
+      "save",
+      "refresh",
+      "undo",
+      "redo",
+      "download",
+      "upload",
+      "share",
+      "print",
+      "content_copy",
+      "content_paste",
+      "open_in_new",
+      "launch",
+      "drag_indicator",
+      "tune",
+      "sort",
+      "filter_list"
+    ]
+  },
   {
-    family: "system-ui",
-    category: "sans-serif",
-    fallback: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
+    id: "communication",
+    label: "Communication",
+    icons: [
+      "mail",
+      "chat",
+      "call",
+      "notifications",
+      "forum",
+      "send",
+      "inbox",
+      "drafts",
+      "mark_email_read",
+      "contact_mail",
+      "alternate_email",
+      "comment",
+      "chat_bubble",
+      "sms",
+      "voicemail"
+    ]
+  },
+  {
+    id: "content",
+    label: "Content",
+    icons: [
+      "add_circle",
+      "remove_circle",
+      "check_circle",
+      "cancel",
+      "flag",
+      "bookmark",
+      "star",
+      "favorite",
+      "thumb_up",
+      "thumb_down",
+      "push_pin",
+      "link",
+      "link_off",
+      "bolt",
+      "label",
+      "inventory_2",
+      "visibility",
+      "visibility_off"
+    ]
+  },
+  {
+    id: "media",
+    label: "Media",
+    icons: [
+      "play_arrow",
+      "pause",
+      "stop",
+      "skip_next",
+      "skip_previous",
+      "fast_forward",
+      "fast_rewind",
+      "replay",
+      "shuffle",
+      "repeat",
+      "volume_up",
+      "volume_off",
+      "music_note",
+      "image",
+      "photo_camera",
+      "videocam",
+      "mic"
+    ]
+  },
+  {
+    id: "file",
+    label: "File & Folder",
+    icons: [
+      "folder",
+      "folder_open",
+      "create_new_folder",
+      "description",
+      "file_copy",
+      "attach_file",
+      "cloud",
+      "cloud_upload",
+      "cloud_download",
+      "cloud_off",
+      "storage",
+      "snippet_folder"
+    ]
   },
   {
-    family: "ui-monospace",
-    category: "monospace",
-    fallback: "SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+    id: "social",
+    label: "Social & People",
+    icons: [
+      "person",
+      "group",
+      "person_add",
+      "person_remove",
+      "people",
+      "face",
+      "sentiment_satisfied",
+      "sentiment_dissatisfied",
+      "public",
+      "workspace_premium",
+      "emoji_events",
+      "military_tech"
+    ]
+  },
+  {
+    id: "alerts",
+    label: "Alerts & Status",
+    icons: [
+      "error",
+      "warning",
+      "info",
+      "help",
+      "check_circle",
+      "report",
+      "new_releases",
+      "notification_important",
+      "priority_high",
+      "verified",
+      "shield",
+      "security",
+      "lock",
+      "lock_open"
+    ]
   },
   {
-    family: "ui-serif",
-    category: "serif",
-    fallback: 'Georgia, "Times New Roman", serif'
+    id: "device",
+    label: "Device & Hardware",
+    icons: [
+      "phone_android",
+      "computer",
+      "tablet_mac",
+      "watch",
+      "keyboard",
+      "mouse",
+      "headphones",
+      "speaker",
+      "monitor",
+      "devices",
+      "memory",
+      "battery_full",
+      "wifi",
+      "bluetooth",
+      "usb",
+      "dark_mode",
+      "light_mode"
+    ]
+  },
+  {
+    id: "editor",
+    label: "Editor & Formatting",
+    icons: [
+      "format_bold",
+      "format_italic",
+      "format_underlined",
+      "format_list_bulleted",
+      "format_list_numbered",
+      "format_quote",
+      "format_align_left",
+      "format_align_center",
+      "format_align_right",
+      "title",
+      "text_fields",
+      "code",
+      "palette",
+      "color_lens",
+      "brush",
+      "auto_fix_high"
+    ]
   }
 ];
 
-export { ACCENT_DEFAULTS, AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, ERROR_DEFAULTS, Frame, GOOGLE_FONTS, HueSlider, Icon, NEUTRAL_DEFAULTS, Navbar, NewtoneProvider, Popover, SUCCESS_DEFAULTS, SYSTEM_FONTS, Select, Sidebar, Slider, Text2 as Text, TextInput, Toggle, WARNING_DEFAULTS, Wrapper, buildGoogleFontsUrl, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, useFocusVisible, useFrameContext, useNewtoneTheme, usePopover, useTokens };
+export { ACCENT_DEFAULTS, AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, ERROR_DEFAULTS, Frame, HueSlider, ICON_CATALOG, Icon, NEUTRAL_DEFAULTS, Navbar, NewtoneProvider, Popover, SUCCESS_DEFAULTS, Select, Sidebar, Slider, Text2 as Text, TextInput, Toggle, WARNING_DEFAULTS, Wrapper, computeTokens, generateComponentCode, getCategory, getComponent, getComponentsByCategory, isOptionGroup, measureAvgCharWidth, useFocusVisible, useFrameContext, useLocalCalibration, useNewtoneTheme, usePopover, useTokens, useTypographyCalibrations };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map