@newtonedev/components 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,6 +1,6 @@
-import React11, { 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, getColorByContrast, srgbToHex } from 'newtone';
-import { Text, Pressable, View, TextInput as TextInput$1, ScrollView, PanResponder, Animated, StyleSheet } from 'react-native';
+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';
 
 // src/theme/NewtoneProvider.tsx
 var DEFAULT_THEME_CONFIG = {
@@ -17,16 +17,6 @@ var DEFAULT_THEME_CONFIG = {
       { hue: DEFAULT_ERROR_HUE, saturation: DEFAULT_ERROR_SATURATION }
     ]
   },
-  themes: {
-    neutral: { paletteIndex: 0, lightModeNv: 0.95, darkModeNv: 0.1 },
-    primary: { paletteIndex: 1, lightModeNv: 0.95, darkModeNv: 0.1 },
-    secondary: { paletteIndex: 1, lightModeNv: 0.85, darkModeNv: 0.15 },
-    strong: { paletteIndex: 0, lightModeNv: 0.1, darkModeNv: 0.95 }
-  },
-  elevation: {
-    offsets: [-0.02, 0, 0.04]
-    // [sunken, default, elevated]
-  },
   spacing: {
     "00": 0,
     // base * 0
@@ -190,22 +180,18 @@ var ThemeContext = createContext(null);
 function NewtoneProvider({
   config = DEFAULT_THEME_CONFIG,
   initialMode = "light",
-  initialTheme = "neutral",
   children
 }) {
   const [mode, setMode] = useState(initialMode);
-  const [theme, setTheme] = useState(initialTheme);
   const value = useMemo(
     () => ({
       config,
       mode,
-      theme,
-      setMode,
-      setTheme
+      setMode
     }),
-    [config, mode, theme]
+    [config, mode]
   );
-  return /* @__PURE__ */ React11.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React11.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React11.createElement(IconFontLoader, { icons: config.icons }), children);
+  return /* @__PURE__ */ React13.createElement(ThemeContext.Provider, { value }, /* @__PURE__ */ React13.createElement(GoogleFontLoader, { fonts: config.typography.fonts }), /* @__PURE__ */ React13.createElement(IconFontLoader, { icons: config.icons }), children);
 }
 function useNewtoneTheme() {
   const context = useContext(ThemeContext);
@@ -218,19 +204,160 @@ var FrameContext = createContext(null);
 function useFrameContext() {
   return useContext(FrameContext);
 }
+var NEUTRAL_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var ACCENT_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var SUCCESS_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var WARNING_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  }
+};
+var ERROR_DEFAULTS = {
+  light: {
+    background: { elevated: 0, ground: 0.03, sunken: 0.06 },
+    text: { primary: 0.9, secondary: 0.7, tertiary: 0.5, disabled: 0.3 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    border: { enabled: 0.08, focused: 0.16, filled: 0.24 }
+  },
+  dark: {
+    background: { elevated: 0.24, ground: 0.2, sunken: 0.16 },
+    text: { primary: 1, secondary: 0.85, tertiary: 0.7, disabled: 0.55 },
+    action: { enabled: 0.04, hovered: 0.06, pressed: 0.08 },
+    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}`;
 }
-function computeTokens(config, mode, themeMapping, elevation, elevationOffsets, spacing, radius, typography, icons) {
+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];
+  const toEngineNv = (nv) => mode === "light" ? 1 - nv : nv;
+  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
+  const colorAt = (engineNv) => getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    clamp(engineNv),
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const resolveKeyNv = (p) => mode === "dark" ? p.keyNormalizedValueDark : p.keyNormalizedValue;
+  const keyNv = resolveKeyNv(palette);
+  const fillBaseNv = keyNv ?? autoAccentNv;
+  const fillNv = clamp(fillBaseNv + elevationDelta);
+  const fill = colorAt(fillNv);
+  const hoverDir = effectiveTextMode === "light" ? -modeDefaults.action.hovered : modeDefaults.action.hovered;
+  const activeDir = effectiveTextMode === "light" ? -modeDefaults.action.pressed : modeDefaults.action.pressed;
+  const fillHover = colorAt(clamp(fillNv + hoverDir));
+  const fillActive = colorAt(clamp(fillNv + activeDir));
+  const onFill = fill.oklch.L > 0.6 ? neutralTextPrimary : neutralBgElevated;
+  const bgNormalized = elevation === 2 ? modeDefaults.background.elevated : elevation === 1 ? modeDefaults.background.ground : modeDefaults.background.sunken;
+  const bgNv = clamp(toEngineNv(bgNormalized));
+  const background = colorAt(bgNv);
+  const backgroundElevated = colorAt(clamp(toEngineNv(modeDefaults.background.elevated)));
+  const backgroundSunken = colorAt(clamp(toEngineNv(modeDefaults.background.sunken)));
+  const interactiveOffset = modeDefaults.action.enabled;
+  const interactiveNv = clamp(bgNv + (effectiveTextMode === "light" ? -interactiveOffset : interactiveOffset));
+  const backgroundInteractive = colorAt(interactiveNv);
+  const hoverShift = modeDefaults.action.hovered;
+  const activeShift = modeDefaults.action.pressed;
+  const backgroundInteractiveHover = colorAt(clamp(interactiveNv + (effectiveTextMode === "light" ? -hoverShift : hoverShift)));
+  const backgroundInteractiveActive = colorAt(clamp(interactiveNv + (effectiveTextMode === "light" ? -activeShift : activeShift)));
+  const textPrimary = colorAt(clamp(textToEngineNv(modeDefaults.text.primary) + elevationDelta));
+  const textSecondary = colorAt(clamp(textToEngineNv(modeDefaults.text.secondary) + elevationDelta));
+  const textTertiary = colorAt(clamp(textToEngineNv(modeDefaults.text.tertiary) + elevationDelta));
+  const textDisabled = colorAt(clamp(textToEngineNv(modeDefaults.text.disabled) + elevationDelta));
+  const borderOffset = modeDefaults.border.enabled;
+  const borderNv = effectiveTextMode === "light" ? bgNv - borderOffset : bgNv + borderOffset;
+  const border = colorAt(clamp(borderNv));
+  return {
+    fill,
+    fillHover,
+    fillActive,
+    onFill,
+    background,
+    backgroundElevated,
+    backgroundSunken,
+    backgroundInteractive,
+    backgroundInteractiveHover,
+    backgroundInteractiveActive,
+    textPrimary,
+    textSecondary,
+    textTertiary,
+    textDisabled,
+    border
+  };
+}
+function computeTokens(config, mode, elevation, spacing, radius, typography, icons, tokenOverrides) {
   const { dynamicRange, palettes } = config;
-  const palette = palettes[themeMapping.paletteIndex];
+  const palette = palettes[0];
   if (!palette) {
-    throw new Error(`Palette at index ${themeMapping.paletteIndex} not found`);
+    throw new Error("Neutral palette (index 0) not found");
   }
-  const baseNv = mode === "light" ? themeMapping.lightModeNv : themeMapping.darkModeNv;
-  const elevationOffset = elevationOffsets[elevation];
-  const backgroundNv = Math.max(0, Math.min(1, baseNv + elevationOffset));
+  const neutralDefaults = NEUTRAL_DEFAULTS[mode];
+  const toEngineNv = (nv) => mode === "light" ? 1 - nv : nv;
+  const bgElevatedNorm = mode === "light" ? tokenOverrides?.backgroundElevated : tokenOverrides?.backgroundElevatedDark;
+  const bgDefaultNorm = mode === "light" ? tokenOverrides?.backgroundDefault : tokenOverrides?.backgroundDefaultDark;
+  const bgSunkenNorm = mode === "light" ? tokenOverrides?.backgroundSunken : tokenOverrides?.backgroundSunkenDark;
+  const textPrimaryNorm = mode === "light" ? tokenOverrides?.textPrimaryNormalized : tokenOverrides?.textPrimaryNormalizedDark;
+  const textSecondaryNorm = mode === "light" ? tokenOverrides?.textSecondaryNormalized : tokenOverrides?.textSecondaryNormalizedDark;
+  const textTertiaryNorm = mode === "light" ? tokenOverrides?.textTertiaryNormalized : tokenOverrides?.textTertiaryNormalizedDark;
+  const textDisabledNorm = mode === "light" ? tokenOverrides?.textDisabledNormalized : tokenOverrides?.textDisabledNormalizedDark;
+  const bgNormalized = elevation === 2 ? bgElevatedNorm ?? neutralDefaults.background.elevated : elevation === 1 ? bgDefaultNorm ?? neutralDefaults.background.ground : bgSunkenNorm ?? neutralDefaults.background.sunken;
+  const backgroundNv = clamp(toEngineNv(bgNormalized));
+  const elevatedNv = clamp(toEngineNv(bgElevatedNorm ?? neutralDefaults.background.elevated));
+  const sunkenNv = clamp(toEngineNv(bgSunkenNorm ?? neutralDefaults.background.sunken));
+  const elevationDelta = backgroundNv - elevatedNv;
   const effectiveTextMode = backgroundNv >= 0.5 ? "light" : "dark";
   const background = getColor(
     palette.hue,
@@ -240,7 +367,6 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const elevatedNv = Math.max(0, Math.min(1, baseNv + elevationOffsets[2]));
   const backgroundElevated = getColor(
     palette.hue,
     palette.saturation,
@@ -249,7 +375,6 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const sunkenNv = Math.max(0, Math.min(1, baseNv + elevationOffsets[0]));
   const backgroundSunken = getColor(
     palette.hue,
     palette.saturation,
@@ -258,142 +383,148 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
     palette.desaturation,
     palette.paletteHueGrading
   );
-  const textPrimary = getColorByContrast(
+  const INTERACTIVE_COMPONENT_OFFSET = mode === "light" ? tokenOverrides?.interactiveComponentOffset ?? neutralDefaults.action.enabled : tokenOverrides?.interactiveComponentOffsetDark ?? neutralDefaults.action.enabled;
+  const HOVER_SHIFT = mode === "light" ? tokenOverrides?.hoverShift ?? neutralDefaults.action.hovered : tokenOverrides?.hoverShiftDark ?? neutralDefaults.action.hovered;
+  const ACTIVE_SHIFT = mode === "light" ? tokenOverrides?.activeShift ?? neutralDefaults.action.pressed : tokenOverrides?.activeShiftDark ?? neutralDefaults.action.pressed;
+  const BORDER_OFFSET = mode === "light" ? tokenOverrides?.borderOffset ?? neutralDefaults.border.enabled : tokenOverrides?.borderOffsetDark ?? neutralDefaults.border.enabled;
+  const interactiveComponentNv = clamp(backgroundNv + (effectiveTextMode === "light" ? -INTERACTIVE_COMPONENT_OFFSET : INTERACTIVE_COMPONENT_OFFSET));
+  const backgroundInteractive = getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    4.5,
-    effectiveTextMode,
+    interactiveComponentNv,
     palette.desaturation,
-    palette.paletteHueGrading,
-    background
+    palette.paletteHueGrading
   );
-  const textSecondary = getColorByContrast(
+  const neutralHoverNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -HOVER_SHIFT : HOVER_SHIFT));
+  const backgroundInteractiveHover = getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    3,
-    effectiveTextMode,
+    neutralHoverNv,
     palette.desaturation,
-    palette.paletteHueGrading,
-    background
+    palette.paletteHueGrading
   );
-  const accentPalette = palettes[1];
-  if (!accentPalette) {
-    throw new Error("Accent palette (index 1) not found");
-  }
-  const resolveKeyNv = (p) => mode === "dark" ? p.keyNormalizedValueDark : p.keyNormalizedValue;
-  const accentKeyNv = resolveKeyNv(accentPalette);
-  const interactive = accentKeyNv !== void 0 ? getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const neutralActiveNv = clamp(interactiveComponentNv + (effectiveTextMode === "light" ? -ACTIVE_SHIFT : ACTIVE_SHIFT));
+  const backgroundInteractiveActive = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    accentKeyNv,
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
-  ) : getColorByContrast(
-    accentPalette.hue,
-    accentPalette.saturation,
+    neutralActiveNv,
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const textToEngineNv = (nv) => effectiveTextMode === "light" ? 1 - nv : nv;
+  const textPrimary = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    4.5,
-    effectiveTextMode,
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading,
-    background
+    clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
   );
-  const interactiveNv = accentKeyNv ?? (effectiveTextMode === "light" ? 0.3 : 0.7);
-  const interactiveHover = getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textSecondary = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    interactiveNv + (effectiveTextMode === "light" ? -0.05 : 0.05),
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
+    clamp(textToEngineNv(textSecondaryNorm ?? neutralDefaults.text.secondary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
   );
-  const interactiveActive = getColor(
-    accentPalette.hue,
-    accentPalette.saturation,
+  const textTertiary = getColor(
+    palette.hue,
+    palette.saturation,
     dynamicRange,
-    interactiveNv + (effectiveTextMode === "light" ? -0.1 : 0.1),
-    accentPalette.desaturation,
-    accentPalette.paletteHueGrading
+    clamp(textToEngineNv(textTertiaryNorm ?? neutralDefaults.text.tertiary) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
+  );
+  const textDisabled = getColor(
+    palette.hue,
+    palette.saturation,
+    dynamicRange,
+    clamp(textToEngineNv(textDisabledNorm ?? neutralDefaults.text.disabled) + elevationDelta),
+    palette.desaturation,
+    palette.paletteHueGrading
   );
-  const borderNv = effectiveTextMode === "light" ? backgroundNv - 0.1 : backgroundNv + 0.1;
+  const borderNv = effectiveTextMode === "light" ? backgroundNv - BORDER_OFFSET : backgroundNv + BORDER_OFFSET;
   const border = getColor(
     palette.hue,
     palette.saturation,
     dynamicRange,
-    Math.max(0, Math.min(1, borderNv)),
+    clamp(borderNv),
     palette.desaturation,
     palette.paletteHueGrading
   );
+  const autoAccentNv = clamp(textToEngineNv(textPrimaryNorm ?? neutralDefaults.text.primary));
+  const accentPalette = palettes[1];
+  if (!accentPalette) {
+    throw new Error("Accent palette (index 1) not found");
+  }
+  const accent = computePaletteTokens(
+    accentPalette,
+    ACCENT_DEFAULTS,
+    mode,
+    elevation,
+    dynamicRange,
+    elevationDelta,
+    effectiveTextMode,
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  );
   const successPalette = palettes[2];
   const warningPalette = palettes[3];
   const errorPalette = palettes[4];
-  const successKeyNv = successPalette ? resolveKeyNv(successPalette) : void 0;
-  const success = successPalette ? successKeyNv !== void 0 ? getColor(
-    successPalette.hue,
-    successPalette.saturation,
+  const success = successPalette ? computePaletteTokens(
+    successPalette,
+    SUCCESS_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    successKeyNv,
-    successPalette.desaturation,
-    successPalette.paletteHueGrading
-  ) : getColorByContrast(
-    successPalette.hue,
-    successPalette.saturation,
-    dynamicRange,
-    4.5,
+    elevationDelta,
     effectiveTextMode,
-    successPalette.desaturation,
-    successPalette.paletteHueGrading,
-    background
-  ) : interactive;
-  const warningKeyNv = warningPalette ? resolveKeyNv(warningPalette) : void 0;
-  const warning = warningPalette ? warningKeyNv !== void 0 ? getColor(
-    warningPalette.hue,
-    warningPalette.saturation,
-    dynamicRange,
-    warningKeyNv,
-    warningPalette.desaturation,
-    warningPalette.paletteHueGrading
-  ) : getColorByContrast(
-    warningPalette.hue,
-    warningPalette.saturation,
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  ) : accent;
+  const warning = warningPalette ? computePaletteTokens(
+    warningPalette,
+    WARNING_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    4.5,
+    elevationDelta,
     effectiveTextMode,
-    warningPalette.desaturation,
-    warningPalette.paletteHueGrading,
-    background
-  ) : interactive;
-  const errorKeyNv = errorPalette ? resolveKeyNv(errorPalette) : void 0;
-  const error = errorPalette ? errorKeyNv !== void 0 ? getColor(
-    errorPalette.hue,
-    errorPalette.saturation,
-    dynamicRange,
-    errorKeyNv,
-    errorPalette.desaturation,
-    errorPalette.paletteHueGrading
-  ) : getColorByContrast(
-    errorPalette.hue,
-    errorPalette.saturation,
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  ) : accent;
+  const error = errorPalette ? computePaletteTokens(
+    errorPalette,
+    ERROR_DEFAULTS,
+    mode,
+    elevation,
     dynamicRange,
-    4.5,
+    elevationDelta,
     effectiveTextMode,
-    errorPalette.desaturation,
-    errorPalette.paletteHueGrading,
-    background
-  ) : interactive;
+    autoAccentNv,
+    textPrimary,
+    backgroundElevated
+  ) : accent;
   return {
     background,
     backgroundElevated,
     backgroundSunken,
+    backgroundInteractive,
+    backgroundInteractiveHover,
+    backgroundInteractiveActive,
     textPrimary,
     textSecondary,
-    interactive,
-    interactiveHover,
-    interactiveActive,
+    textTertiary,
+    textDisabled,
     border,
+    accent,
     success,
     warning,
     error,
@@ -419,119 +550,222 @@ function computeTokens(config, mode, themeMapping, elevation, elevationOffsets,
 
 // src/tokens/useTokens.ts
 function useTokens(elevation) {
-  const { config, mode, theme: providerTheme } = useNewtoneTheme();
+  const { config, mode } = useNewtoneTheme();
   const frameCtx = useFrameContext();
-  const resolvedTheme = frameCtx?.theme ?? providerTheme;
   const resolvedElevation = elevation ?? frameCtx?.elevation ?? 1;
+  const canReuse = frameCtx !== null && elevation === void 0 && frameCtx.elevation === resolvedElevation;
   return useMemo(() => {
-    const themeMapping = config.themes[resolvedTheme];
-    return computeTokens(
+    if (canReuse) {
+      return { ...frameCtx.tokens, elevation: resolvedElevation };
+    }
+    const tokens = computeTokens(
       config.colorSystem,
       mode,
-      themeMapping,
       resolvedElevation,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
-      config.icons
+      config.icons,
+      config.tokenOverrides
     );
-  }, [config, mode, resolvedTheme, resolvedElevation]);
+    return { ...tokens, elevation: resolvedElevation };
+  }, [config, mode, resolvedElevation, canReuse, frameCtx?.tokens]);
+}
+function computeButtonPadding(size, hasIcon, hasText, iconPosition) {
+  const basePadding = {
+    sm: 8,
+    md: 12,
+    lg: 16
+  };
+  const base = basePadding[size];
+  const textExtra = 8;
+  if (!hasText && hasIcon) {
+    return {
+      paddingLeft: base,
+      paddingRight: base,
+      paddingTop: base,
+      paddingBottom: base
+    };
+  }
+  if (hasText && !hasIcon) {
+    return {
+      paddingLeft: base + textExtra,
+      paddingRight: base + textExtra,
+      paddingTop: base,
+      paddingBottom: base
+    };
+  }
+  if (hasText && hasIcon) {
+    if (iconPosition === "left") {
+      return {
+        paddingLeft: base,
+        paddingRight: base + textExtra,
+        paddingTop: base,
+        paddingBottom: base
+      };
+    } else {
+      return {
+        paddingLeft: base + textExtra,
+        paddingRight: base,
+        paddingTop: base,
+        paddingBottom: base
+      };
+    }
+  }
+  return {
+    paddingLeft: base,
+    paddingRight: base,
+    paddingTop: base,
+    paddingBottom: base
+  };
+}
+function getPaletteTokens(semantic, tokens) {
+  switch (semantic) {
+    case "accent":
+      return tokens.accent;
+    case "success":
+      return tokens.success;
+    case "error":
+      return tokens.error;
+    case "warning":
+      return tokens.warning;
+    default:
+      return void 0;
+  }
 }
-function getSizeConfig(tokens) {
+function getButtonConfig(variant, semantic, size, disabled, tokens) {
+  const sizeConfig = getSizeConfig(size, tokens);
+  const variantColors = getVariantColors(variant, semantic, disabled, tokens);
   return {
+    variantColors,
+    sizeTokens: {
+      padding: sizeConfig.padding,
+      gap: sizeConfig.gap,
+      borderRadius: sizeConfig.borderRadius,
+      textSize: sizeConfig.textSize,
+      iconSize: sizeConfig.iconSize
+    }
+  };
+}
+function getSizeConfig(size, tokens) {
+  const configs = {
     sm: {
-      paddingVertical: tokens.spacing["04"],
-      paddingHorizontal: tokens.spacing["12"],
-      fontSize: tokens.typography.size.sm,
-      borderRadius: tokens.radius.sm,
-      gap: tokens.spacing["04"],
-      iconSize: tokens.typography.size.sm
+      padding: 8,
+      gap: tokens.spacing["08"],
+      borderRadius: 8,
+      textSize: "base",
+      // 16px
+      iconSize: 24
     },
     md: {
-      paddingVertical: tokens.spacing["08"],
-      paddingHorizontal: tokens.spacing["16"],
-      fontSize: tokens.typography.size.base,
-      borderRadius: tokens.radius.md,
+      padding: 12,
       gap: tokens.spacing["08"],
-      iconSize: tokens.typography.size.base
+      borderRadius: 12,
+      textSize: "base",
+      // 16px
+      iconSize: 24
     },
     lg: {
-      paddingVertical: tokens.spacing["12"],
-      paddingHorizontal: tokens.spacing["24"],
-      fontSize: tokens.typography.size.base,
-      borderRadius: tokens.radius.lg,
+      padding: 16,
       gap: tokens.spacing["08"],
-      iconSize: tokens.typography.size.base
+      borderRadius: 16,
+      textSize: "base",
+      // 16px
+      iconSize: 24
     }
   };
+  return configs[size];
 }
-function getButtonStyles(tokens, variant, size, disabled, isIconOnly) {
-  const sizeConfig = getSizeConfig(tokens)[size];
-  const base = {
-    paddingVertical: sizeConfig.paddingVertical,
-    paddingHorizontal: isIconOnly ? sizeConfig.paddingVertical : sizeConfig.paddingHorizontal,
-    borderRadius: sizeConfig.borderRadius,
-    alignItems: "center",
-    justifyContent: "center",
-    flexDirection: "row",
-    gap: sizeConfig.gap
-  };
-  let backgroundColor;
-  let textColor;
-  let borderColor;
-  let borderWidth = 0;
-  switch (variant) {
-    case "primary":
-      backgroundColor = srgbToHex(tokens.interactive.srgb);
-      textColor = srgbToHex(tokens.background.srgb);
-      break;
-    case "secondary":
-      backgroundColor = srgbToHex(tokens.backgroundElevated.srgb);
-      textColor = srgbToHex(tokens.textPrimary.srgb);
-      break;
-    case "outline":
-      backgroundColor = "transparent";
-      textColor = srgbToHex(tokens.interactive.srgb);
-      borderColor = srgbToHex(tokens.border.srgb);
-      borderWidth = 1;
-      break;
-    case "ghost":
-      backgroundColor = "transparent";
-      textColor = srgbToHex(tokens.interactive.srgb);
-      break;
+function getVariantColors(variant, semantic, disabled, tokens) {
+  if (disabled) {
+    const baseColors = getVariantColorsForState(variant, semantic, tokens);
+    const disabledBg = srgbToHex(tokens.backgroundSunken.srgb);
+    return {
+      ...baseColors,
+      bg: disabledBg,
+      hoveredBg: disabledBg,
+      pressedBg: disabledBg,
+      textColor: srgbToHex(tokens.textSecondary.srgb),
+      iconColor: srgbToHex(tokens.textSecondary.srgb)
+    };
+  }
+  return getVariantColorsForState(variant, semantic, tokens);
+}
+function getVariantColorsForState(variant, semantic, tokens) {
+  const paletteTokens = getPaletteTokens(semantic, tokens);
+  if (variant === "primary") {
+    if (semantic === "neutral") {
+      return {
+        bg: srgbToHex(tokens.backgroundInteractive.srgb),
+        hoveredBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveActive.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
+    }
+    return {
+      bg: srgbToHex(paletteTokens.fill.srgb),
+      hoveredBg: srgbToHex(paletteTokens.fillHover.srgb),
+      pressedBg: srgbToHex(paletteTokens.fillActive.srgb),
+      textColor: srgbToHex(paletteTokens.onFill.srgb),
+      iconColor: srgbToHex(paletteTokens.onFill.srgb),
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
+  }
+  if (variant === "secondary") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: srgbToHex(tokens.border.srgb)
+      };
+    }
+    return {
+      bg: srgbToHex(paletteTokens.background.srgb),
+      hoveredBg: srgbToHex(paletteTokens.backgroundInteractive.srgb),
+      pressedBg: srgbToHex(paletteTokens.backgroundInteractiveHover.srgb),
+      textColor: srgbToHex(paletteTokens.fill.srgb),
+      iconColor: srgbToHex(paletteTokens.fill.srgb),
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
+  }
+  if (variant === "tertiary") {
+    if (semantic === "neutral") {
+      return {
+        bg: "transparent",
+        hoveredBg: srgbToHex(tokens.backgroundInteractive.srgb),
+        pressedBg: srgbToHex(tokens.backgroundInteractiveHover.srgb),
+        textColor: srgbToHex(tokens.textPrimary.srgb),
+        iconColor: srgbToHex(tokens.textPrimary.srgb),
+        borderWidth: 1,
+        borderColor: "transparent"
+      };
+    }
+    return {
+      bg: "transparent",
+      hoveredBg: srgbToHex(paletteTokens.background.srgb),
+      pressedBg: srgbToHex(paletteTokens.backgroundInteractive.srgb),
+      textColor: srgbToHex(paletteTokens.fill.srgb),
+      iconColor: srgbToHex(paletteTokens.fill.srgb),
+      borderWidth: 1,
+      borderColor: "transparent"
+    };
   }
-  const resolvedTextColor = disabled ? srgbToHex(tokens.textSecondary.srgb) : textColor;
   return {
-    iconColor: resolvedTextColor,
-    iconSize: sizeConfig.iconSize,
-    styles: StyleSheet.create({
-      base: {
-        ...base,
-        backgroundColor: disabled ? srgbToHex(tokens.backgroundSunken.srgb) : backgroundColor,
-        borderWidth,
-        ...borderColor && { borderColor }
-      },
-      pressed: {
-        backgroundColor: variant === "primary" ? srgbToHex(tokens.interactiveActive.srgb) : variant === "secondary" ? srgbToHex(tokens.backgroundSunken.srgb) : "transparent",
-        opacity: variant === "ghost" || variant === "outline" ? 0.7 : 1
-      },
-      disabled: {
-        opacity: 0.4
-      },
-      text: {
-        fontFamily: tokens.typography.fonts.default,
-        fontSize: sizeConfig.fontSize,
-        fontWeight: tokens.typography.weight.semibold,
-        color: resolvedTextColor
-      },
-      textPressed: {
-        // Color changes handled by parent opacity
-      },
-      textDisabled: {
-        // Color already set in text style via disabled check
-      }
-    })
+    bg: "transparent",
+    hoveredBg: "transparent",
+    pressedBg: "transparent",
+    textColor: srgbToHex(tokens.textPrimary.srgb),
+    iconColor: srgbToHex(tokens.textPrimary.srgb),
+    borderWidth: 0
   };
 }
 function Icon({
@@ -553,13 +787,25 @@ function Icon({
   const tokens = useTokens(elevation);
   const iconStyle = useMemo(() => {
     const fontSize = size ?? tokens.typography.size.base;
-    const opsz = opticalSize ?? fontSize;
+    const getOpticalSize = (size2) => {
+      if (size2 <= 22) return 20;
+      if (size2 <= 32) return 24;
+      if (size2 <= 44) return 40;
+      return 48;
+    };
+    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}`;
     return {
       fontFamily,
       fontSize,
+      width: fontSize,
+      // Explicit width ensures square rendering
+      height: fontSize,
+      // Explicit height ensures square rendering
+      lineHeight: fontSize,
+      // Prevent text line-height from affecting total height
       color: iconColor,
       userSelect: "none",
       // web-only: prevents users from selecting the icon as text
@@ -568,7 +814,7 @@ function Icon({
       ...style
     };
   }, [tokens, size, opticalSize, fill, color, style]);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Text,
     {
       ref,
@@ -582,121 +828,72 @@ function Icon({
     name
   );
 }
-
-// src/Button/Button.tsx
-function Button({
-  children,
-  icon,
-  iconPosition = "left",
-  variant = "primary",
-  size = "md",
-  disabled = false,
-  style,
-  textStyle,
-  ...pressableProps
-}) {
-  const tokens = useTokens(1);
-  const isIconOnly = !!icon && !children;
-  const { styles, iconColor, iconSize } = React11.useMemo(
-    () => getButtonStyles(tokens, variant, size, disabled, isIconOnly),
-    [tokens, variant, size, disabled, isIconOnly]
-  );
-  const renderIcon = () => /* @__PURE__ */ React11.createElement(Icon, { name: icon, size: iconSize, color: iconColor });
-  return /* @__PURE__ */ React11.createElement(
-    Pressable,
-    {
-      style: ({ pressed }) => [
-        styles.base,
-        pressed && !disabled && styles.pressed,
-        disabled && styles.disabled,
-        ...Array.isArray(style) ? style : [style]
-      ],
-      disabled,
-      ...pressableProps
-    },
-    ({ pressed }) => /* @__PURE__ */ React11.createElement(React11.Fragment, null, icon && iconPosition === "left" && renderIcon(), children != null && /* @__PURE__ */ React11.createElement(
-      Text,
-      {
-        style: [
-          styles.text,
-          pressed && !disabled && styles.textPressed,
-          disabled && styles.textDisabled,
-          ...Array.isArray(textStyle) ? textStyle : [textStyle]
-        ]
-      },
-      children
-    ), icon && iconPosition === "right" && renderIcon())
-  );
-}
-function getCardStyles(tokens, disabled) {
-  return StyleSheet.create({
-    container: {
-      backgroundColor: srgbToHex(tokens.background.srgb),
-      borderWidth: 1,
-      borderColor: srgbToHex(tokens.border.srgb),
-      borderRadius: tokens.radius.lg,
-      padding: tokens.spacing["16"],
-      opacity: disabled ? 0.5 : 1
-    }
-  });
+function resolveTextColor(color, tokens) {
+  switch (color) {
+    case "primary":
+      return srgbToHex(tokens.textPrimary.srgb);
+    case "secondary":
+      return srgbToHex(tokens.textSecondary.srgb);
+    case "tertiary":
+      return srgbToHex(tokens.textTertiary.srgb);
+    case "disabled":
+      return srgbToHex(tokens.textDisabled.srgb);
+    case "accent":
+      return srgbToHex(tokens.accent.fill.srgb);
+    case "success":
+      return srgbToHex(tokens.success.fill.srgb);
+    case "warning":
+      return srgbToHex(tokens.warning.fill.srgb);
+    case "error":
+      return srgbToHex(tokens.error.fill.srgb);
+  }
 }
-
-// src/Card/Card.tsx
-function Card({
+function Text2({
   children,
+  size = "base",
+  weight = "regular",
+  color = "primary",
+  font = "default",
+  lineHeight = "normal",
+  align,
+  numberOfLines,
   elevation = 1,
   style,
-  disabled = false
+  // Accessibility
+  accessibilityRole,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
 }) {
   const tokens = useTokens(elevation);
-  const styles = React11.useMemo(
-    () => getCardStyles(tokens, disabled),
-    [tokens, disabled]
+  const resolvedStyle = useMemo(() => {
+    const fontSize = tokens.typography.size[size];
+    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').
+      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
+    };
+  }, [tokens, size, weight, color, font, lineHeight, align]);
+  return /* @__PURE__ */ React13.createElement(
+    Text,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole,
+      style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
+      numberOfLines
+    },
+    children
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
-}
-var hadKeyboardEvent = false;
-var isListenerSetup = false;
-function setupModality() {
-  if (isListenerSetup || typeof document === "undefined") return;
-  isListenerSetup = true;
-  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
-    "Tab",
-    "ArrowUp",
-    "ArrowDown",
-    "ArrowLeft",
-    "ArrowRight",
-    "Enter",
-    " ",
-    "Escape"
-  ]);
-  document.addEventListener("keydown", (e) => {
-    if (NAVIGATION_KEYS.has(e.key)) {
-      hadKeyboardEvent = true;
-    }
-  }, true);
-  document.addEventListener("pointerdown", () => {
-    hadKeyboardEvent = false;
-  }, true);
-  document.addEventListener("mousedown", () => {
-    hadKeyboardEvent = false;
-  }, true);
-}
-function useFocusVisible() {
-  const [isFocusVisible, setIsFocusVisible] = useState(false);
-  useEffect(() => {
-    setupModality();
-  }, []);
-  const onFocus = useCallback(() => {
-    if (hadKeyboardEvent) {
-      setIsFocusVisible(true);
-    }
-  }, []);
-  const onBlur = useCallback(() => {
-    setIsFocusVisible(false);
-  }, []);
-  const focusProps = { onFocus, onBlur };
-  return { isFocusVisible, focusProps };
 }
 
 // src/primitives/Frame/Frame.utils.ts
@@ -793,14 +990,260 @@ function resolveAlignment(align) {
 function resolveJustification(justify) {
   return JUSTIFY_MAP[justify];
 }
-function resolveFlexDirection(direction, reverse) {
-  if (direction === "horizontal") {
-    return reverse ? "row-reverse" : "row";
-  }
-  return reverse ? "column-reverse" : "column";
+function resolveFlexDirection(direction, reverse) {
+  if (direction === "horizontal") {
+    return reverse ? "row-reverse" : "row";
+  }
+  return reverse ? "column-reverse" : "column";
+}
+
+// src/primitives/Wrapper/Wrapper.styles.ts
+function getWrapperStyles(input) {
+  const {
+    tokens,
+    direction = "vertical",
+    wrap = false,
+    reverse = false,
+    align,
+    justify,
+    padding,
+    gap,
+    width,
+    height,
+    minWidth,
+    maxWidth,
+    minHeight,
+    maxHeight
+  } = input;
+  const container = {};
+  container.flexDirection = resolveFlexDirection(direction, reverse);
+  if (wrap) container.flexWrap = "wrap";
+  if (align) container.alignItems = resolveAlignment(align);
+  if (justify) container.justifyContent = resolveJustification(justify);
+  if (padding !== void 0) {
+    const p = resolvePadding(padding, tokens);
+    container.paddingTop = p.top;
+    container.paddingRight = p.right;
+    container.paddingBottom = p.bottom;
+    container.paddingLeft = p.left;
+  }
+  if (gap !== void 0) {
+    const g = resolveGap(gap, tokens);
+    container.rowGap = g.rowGap;
+    container.columnGap = g.columnGap;
+  }
+  Object.assign(container, resolveSizing(width, height));
+  if (minWidth !== void 0) container.minWidth = minWidth;
+  if (maxWidth !== void 0) container.maxWidth = maxWidth;
+  if (minHeight !== void 0) container.minHeight = minHeight;
+  if (maxHeight !== void 0) container.maxHeight = maxHeight;
+  return StyleSheet.create({ c: container }).c;
+}
+
+// src/primitives/Wrapper/Wrapper.tsx
+function Wrapper({
+  children,
+  direction,
+  wrap,
+  reverse,
+  align,
+  justify,
+  padding,
+  gap,
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  style,
+  // Testing & platform
+  testID,
+  nativeID,
+  ref
+}) {
+  const tokens = useTokens(1);
+  const containerStyle = useMemo(
+    () => getWrapperStyles({
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    }),
+    [
+      tokens,
+      direction,
+      wrap,
+      reverse,
+      align,
+      justify,
+      padding,
+      gap,
+      width,
+      height,
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    ]
+  );
+  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
+  return /* @__PURE__ */ React13.createElement(
+    View,
+    {
+      ref,
+      testID,
+      nativeID,
+      accessibilityRole: "none",
+      style: [containerStyle, ...userStyles]
+    },
+    children
+  );
+}
+
+// src/composites/actions/Button/Button.tsx
+function Button({
+  children,
+  icon,
+  iconPosition = "left",
+  variant = "primary",
+  semantic = "neutral",
+  size = "md",
+  disabled = false,
+  style,
+  textStyle,
+  ...pressableProps
+}) {
+  const tokens = useTokens();
+  const { variantColors, sizeTokens } = React13.useMemo(
+    () => getButtonConfig(variant, semantic, size, disabled, tokens),
+    [variant, semantic, size, disabled, tokens]
+  );
+  const padding = React13.useMemo(
+    () => computeButtonPadding(size, !!icon, !!children, iconPosition),
+    [size, icon, children, iconPosition]
+  );
+  return /* @__PURE__ */ React13.createElement(Pressable, { disabled, ...pressableProps }, ({ pressed, hovered }) => (
+    // Wrapper handles layout: direction, gap, alignment (padding via style)
+    /* @__PURE__ */ React13.createElement(
+      Wrapper,
+      {
+        direction: "horizontal",
+        align: "center",
+        justify: "center",
+        gap: sizeTokens.gap,
+        style: [
+          {
+            ...padding,
+            // Asymmetric horizontal padding for text optical balance
+            backgroundColor: pressed && !disabled ? variantColors.pressedBg : hovered && !disabled ? variantColors.hoveredBg : variantColors.bg,
+            borderRadius: sizeTokens.borderRadius,
+            borderWidth: variantColors.borderWidth,
+            // Always 1 for consistent sizing
+            borderColor: variantColors.borderColor || "transparent",
+            opacity: disabled ? 0.4 : 1
+          },
+          ...Array.isArray(style) ? style : style ? [style] : []
+        ]
+      },
+      icon && iconPosition === "left" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor }),
+      children && // Text primitive with semantic props + color style override
+      /* @__PURE__ */ React13.createElement(
+        Text2,
+        {
+          size: sizeTokens.textSize,
+          weight: "semibold",
+          style: [
+            { color: variantColors.textColor },
+            ...Array.isArray(textStyle) ? textStyle : textStyle ? [textStyle] : []
+          ]
+        },
+        children
+      ),
+      icon && iconPosition === "right" && /* @__PURE__ */ React13.createElement(Icon, { name: icon, size: sizeTokens.iconSize, color: variantColors.iconColor })
+    )
+  ));
+}
+function getCardStyles(tokens, disabled) {
+  return StyleSheet.create({
+    container: {
+      backgroundColor: srgbToHex(tokens.background.srgb),
+      borderWidth: 1,
+      borderColor: srgbToHex(tokens.border.srgb),
+      borderRadius: tokens.radius.lg,
+      padding: tokens.spacing["16"],
+      opacity: disabled ? 0.5 : 1
+    }
+  });
+}
+
+// src/composites/layout/Card/Card.tsx
+function Card({
+  children,
+  elevation = 1,
+  style,
+  disabled = false
+}) {
+  const tokens = useTokens(elevation);
+  const styles = React13.useMemo(
+    () => getCardStyles(tokens, disabled),
+    [tokens, disabled]
+  );
+  return /* @__PURE__ */ React13.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, children);
+}
+var hadKeyboardEvent = false;
+var isListenerSetup = false;
+function setupModality() {
+  if (isListenerSetup || typeof document === "undefined") return;
+  isListenerSetup = true;
+  const NAVIGATION_KEYS = /* @__PURE__ */ new Set([
+    "Tab",
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight",
+    "Enter",
+    " ",
+    "Escape"
+  ]);
+  document.addEventListener("keydown", (e) => {
+    if (NAVIGATION_KEYS.has(e.key)) {
+      hadKeyboardEvent = true;
+    }
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+  document.addEventListener("mousedown", () => {
+    hadKeyboardEvent = false;
+  }, true);
+}
+function useFocusVisible() {
+  const [isFocusVisible, setIsFocusVisible] = useState(false);
+  useEffect(() => {
+    setupModality();
+  }, []);
+  const onFocus = useCallback(() => {
+    if (hadKeyboardEvent) {
+      setIsFocusVisible(true);
+    }
+  }, []);
+  const onBlur = useCallback(() => {
+    setIsFocusVisible(false);
+  }, []);
+  const focusProps = { onFocus, onBlur };
+  return { isFocusVisible, focusProps };
 }
-
-// src/primitives/Frame/Frame.styles.ts
 function getFrameStyles(input) {
   const {
     tokens,
@@ -907,9 +1350,9 @@ function getFrameStyles(input) {
 
 // src/primitives/Frame/Frame.tsx
 function wrapTextChildren(children, textStyle) {
-  return React11.Children.map(children, (child) => {
+  return React13.Children.map(children, (child) => {
     if (typeof child === "string" || typeof child === "number") {
-      return /* @__PURE__ */ React11.createElement(Text, { style: textStyle }, child);
+      return /* @__PURE__ */ React13.createElement(Text, { style: textStyle }, child);
     }
     return child;
   });
@@ -921,8 +1364,7 @@ function toElevationLevel(frameElevation) {
 }
 function Frame({
   children,
-  // Theme & elevation
-  theme,
+  // Elevation
   elevation,
   // Layout
   layout,
@@ -961,25 +1403,22 @@ function Frame({
   // Style override
   style
 }) {
-  const { config, mode, theme: providerTheme } = useNewtoneTheme();
+  const { config, mode } = useNewtoneTheme();
   const parentFrameCtx = useFrameContext();
-  const resolvedTheme = theme ?? parentFrameCtx?.theme ?? providerTheme;
   const resolvedFrameElevation = elevation ?? 0;
   const resolvedElevation = elevation !== void 0 ? toElevationLevel(elevation) : parentFrameCtx?.elevation ?? 1;
   const tokens = useMemo(() => {
-    const themeMapping = config.themes[resolvedTheme];
     return computeTokens(
       config.colorSystem,
       mode,
-      themeMapping,
       resolvedElevation,
-      config.elevation.offsets,
       config.spacing,
       config.radius,
       config.typography,
-      config.icons
+      config.icons,
+      config.tokenOverrides
     );
-  }, [config, mode, resolvedTheme, resolvedElevation]);
+  }, [config, mode, resolvedElevation]);
   const styles = useMemo(
     () => getFrameStyles({
       tokens,
@@ -1029,8 +1468,8 @@ function Frame({
     ]
   );
   const contextValue = useMemo(
-    () => ({ theme: resolvedTheme, elevation: resolvedElevation }),
-    [resolvedTheme, resolvedElevation]
+    () => ({ elevation: resolvedElevation, tokens }),
+    [resolvedElevation, tokens]
   );
   const webOverrides = [];
   if (styles.gridWebStyle) {
@@ -1045,7 +1484,7 @@ function Frame({
   const focusRingStyle = isFocusVisible && !disabled ? {
     outlineWidth: 2,
     outlineStyle: "solid",
-    outlineColor: srgbToHex(tokens.interactive.srgb),
+    outlineColor: srgbToHex(tokens.accent.fill.srgb),
     outlineOffset: 2
   } : void 0;
   const webFocusProps = isInteractive ? focusProps : {};
@@ -1062,10 +1501,10 @@ function Frame({
     () => wrapTextChildren(children, textStyle),
     [children, textStyle]
   );
-  return /* @__PURE__ */ React11.createElement(FrameContext.Provider, { value: contextValue }, isInteractive ? (
+  return /* @__PURE__ */ React13.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__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       Pressable,
       {
         ref,
@@ -1090,7 +1529,7 @@ function Frame({
     )
   ) : (
     // Non-interactive Frame: just a plain View with no tap handling.
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       View,
       {
         ref,
@@ -1136,11 +1575,11 @@ function TextInput({
   ...textInputProps
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getTextInputStyles(tokens, disabled),
     [tokens, disabled]
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React11.createElement(
+  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(
     TextInput$1,
     {
       style: styles.input,
@@ -1177,7 +1616,7 @@ function getPopoverStyles(tokens, triggerHeight, offset, maxHeight, width, isOpe
   });
 }
 
-// src/Popover/Popover.tsx
+// src/composites/overlays/Popover/Popover.tsx
 var openPopovers = /* @__PURE__ */ new Set();
 function Popover({
   isOpen,
@@ -1243,15 +1682,15 @@ function Popover({
     [styles.content, contentStyle]
   );
   const webProps = { onKeyDown: handleKeyDown };
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: containerRef,
       style: containerStyles,
       ...webProps
     },
-    /* @__PURE__ */ React11.createElement(View, { onLayout: onTriggerLayout }, trigger),
-    isOpen && /* @__PURE__ */ React11.createElement(View, { style: mergedContentStyles }, children)
+    /* @__PURE__ */ React13.createElement(View, { onLayout: onTriggerLayout }, trigger),
+    isOpen && /* @__PURE__ */ React13.createElement(View, { style: mergedContentStyles }, children)
   );
 }
 function usePopover(options) {
@@ -1274,7 +1713,7 @@ function usePopover(options) {
   return { isOpen, open, close, toggle };
 }
 
-// src/Select/Select.types.ts
+// src/composites/form-controls/Select/Select.types.ts
 function isOptionGroup(item) {
   return "options" in item;
 }
@@ -1448,7 +1887,7 @@ function SelectOptionRow({
   const paddingHorizontal = size === "sm" ? tokens.spacing["08"] : tokens.spacing["12"];
   const fontSize = size === "sm" ? tokens.typography.size.sm : tokens.typography.size.base;
   if (renderOption) {
-    return /* @__PURE__ */ React11.createElement(
+    return /* @__PURE__ */ React13.createElement(
       Pressable,
       {
         onPress: option.disabled ? void 0 : onSelect,
@@ -1459,7 +1898,7 @@ function SelectOptionRow({
       renderOption(option, { isSelected, isFocused })
     );
   }
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: option.disabled ? void 0 : onSelect,
@@ -1488,7 +1927,7 @@ function SelectOptionRow({
         }
       ]
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       Text,
       {
         style: [
@@ -1500,7 +1939,7 @@ function SelectOptionRow({
           },
           isSelected && {
             fontWeight: tokens.typography.weight.semibold,
-            color: srgbToHex(tokens.interactive.srgb)
+            color: srgbToHex(tokens.accent.fill.srgb)
           },
           option.disabled && {
             color: srgbToHex(tokens.textSecondary.srgb)
@@ -1510,12 +1949,12 @@ function SelectOptionRow({
       },
       option.label
     ),
-    isSelected && /* @__PURE__ */ React11.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React11.createElement(
+    isSelected && /* @__PURE__ */ React13.createElement(View, { style: { marginLeft: tokens.spacing["08"] } }, /* @__PURE__ */ React13.createElement(
       Icon,
       {
         name: "check",
         size: fontSize,
-        color: srgbToHex(tokens.interactive.srgb)
+        color: srgbToHex(tokens.accent.fill.srgb)
       }
     ))
   );
@@ -1565,7 +2004,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__ */ React11.createElement(
+  const trigger = /* @__PURE__ */ React13.createElement(
     Pressable,
     {
       onPress: disabled ? void 0 : toggle,
@@ -1575,8 +2014,8 @@ function Select({
       ...triggerWebProps,
       style: styles.trigger
     },
-    renderValue ? renderValue(selectedOption) : /* @__PURE__ */ React11.createElement(Text, { style: styles.triggerText, numberOfLines: 1 }, displayLabel),
-    /* @__PURE__ */ React11.createElement(View, { style: styles.iconWrapper, pointerEvents: "none" }, /* @__PURE__ */ React11.createElement(
+    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(
       Icon,
       {
         name: isOpen ? "expand_less" : "expand_more",
@@ -1585,14 +2024,14 @@ function Select({
       }
     ))
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : style ? [style] : []] }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React11.createElement(
+  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(
     Popover,
     {
       isOpen: isOpen && !disabled,
       onClose: close,
       trigger
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React13.createElement(
       ScrollView,
       {
         bounces: false,
@@ -1601,7 +2040,7 @@ function Select({
       },
       options.map((item) => {
         if (isOptionGroup(item)) {
-          return /* @__PURE__ */ React11.createElement(View, { key: item.label }, /* @__PURE__ */ React11.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React11.createElement(
+          return /* @__PURE__ */ React13.createElement(View, { key: item.label }, /* @__PURE__ */ React13.createElement(Text, { style: styles.groupLabel }, item.label), item.options.map((opt) => /* @__PURE__ */ React13.createElement(
             SelectOptionRow,
             {
               key: opt.value,
@@ -1617,7 +2056,7 @@ function Select({
             }
           )));
         }
-        return /* @__PURE__ */ React11.createElement(
+        return /* @__PURE__ */ React13.createElement(
           SelectOptionRow,
           {
             key: item.value,
@@ -1658,7 +2097,7 @@ function getToggleStyles(tokens, value, disabled) {
       width: TRACK_WIDTH,
       height: TRACK_HEIGHT,
       borderRadius: TRACK_HEIGHT / 2,
-      backgroundColor: value ? srgbToHex(tokens.interactive.srgb) : srgbToHex(tokens.border.srgb),
+      backgroundColor: value ? srgbToHex(tokens.accent.fill.srgb) : srgbToHex(tokens.border.srgb),
       justifyContent: "center",
       paddingHorizontal: THUMB_OFFSET
     },
@@ -1672,7 +2111,7 @@ function getToggleStyles(tokens, value, disabled) {
   });
 }
 
-// src/Toggle/Toggle.tsx
+// src/composites/form-controls/Toggle/Toggle.tsx
 function Toggle({
   value,
   onValueChange,
@@ -1681,16 +2120,16 @@ function Toggle({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getToggleStyles(tokens, value, disabled),
     [tokens, value, disabled]
   );
-  const handlePress = React11.useCallback(() => {
+  const handlePress = React13.useCallback(() => {
     if (!disabled) {
       onValueChange(!value);
     }
   }, [disabled, value, onValueChange]);
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), /* @__PURE__ */ React11.createElement(
+  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(
     Pressable,
     {
       onPress: handlePress,
@@ -1698,7 +2137,7 @@ function Toggle({
       accessibilityRole: "switch",
       accessibilityState: { checked: value, disabled }
     },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.track }, /* @__PURE__ */ React11.createElement(View, { style: styles.thumb }))
+    /* @__PURE__ */ React13.createElement(View, { style: styles.track }, /* @__PURE__ */ React13.createElement(View, { style: styles.thumb }))
   ));
 }
 var TRACK_HEIGHT2 = 6;
@@ -1758,19 +2197,19 @@ function getSliderStyles(tokens, disabled) {
       left: 0,
       height: TRACK_HEIGHT2,
       borderRadius: TRACK_HEIGHT2 / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb)
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
     },
     thumb: {
       position: "absolute",
       width: THUMB_SIZE2,
       height: THUMB_SIZE2,
       borderRadius: THUMB_SIZE2 / 2,
-      backgroundColor: srgbToHex(tokens.interactive.srgb)
+      backgroundColor: srgbToHex(tokens.accent.fill.srgb)
     }
   });
 }
 
-// src/Slider/Slider.tsx
+// src/composites/range-inputs/Slider/Slider.tsx
 function Slider({
   value,
   onValueChange,
@@ -1784,41 +2223,41 @@ function Slider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const trackRef = React11.useRef(null);
-  const trackWidth = React11.useRef(0);
-  const trackPageX = React11.useRef(0);
-  const onValueChangeRef = React11.useRef(onValueChange);
-  const minRef = React11.useRef(min);
-  const maxRef = React11.useRef(max);
-  const stepRef = React11.useRef(step);
-  const disabledRef = React11.useRef(disabled);
-  React11.useEffect(() => {
+  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(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     stepRef.current = step;
   }, [step]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeValue = React11.useCallback((pageX) => {
+  const computeValue = React13.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 = React11.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -1834,7 +2273,7 @@ function Slider({
   const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE2);
   const thumbLeft = ratio * usableWidth;
   const fillWidth = thumbLeft + THUMB_SIZE2 / 2;
-  const handleValueTextSubmit = React11.useCallback(
+  const handleValueTextSubmit = React13.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -1843,12 +2282,12 @@ function Slider({
     },
     [onValueChange, min, max]
   );
-  const [editText, setEditText] = React11.useState(String(value));
-  React11.useEffect(() => {
+  const [editText, setEditText] = React13.useState(String(value));
+  React13.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React11.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React11.createElement(
+  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(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -1860,7 +2299,7 @@ function Slider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React11.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React11.createElement(
+  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value)), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -1873,9 +2312,9 @@ function Slider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.trackRail }),
-    /* @__PURE__ */ React11.createElement(View, { style: [styles.trackFill, { width: fillWidth }] }),
-    /* @__PURE__ */ React11.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__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 }] })
   ));
 }
 var TRACK_HEIGHT3 = 22;
@@ -1985,7 +2424,7 @@ function getHueSliderStyles(tokens, disabled) {
   });
 }
 
-// src/HueSlider/HueSlider.tsx
+// src/composites/range-inputs/HueSlider/HueSlider.tsx
 function HueSlider({
   value,
   onValueChange,
@@ -1998,41 +2437,41 @@ function HueSlider({
   style
 }) {
   const tokens = useTokens(1);
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getHueSliderStyles(tokens, disabled),
     [tokens, disabled]
   );
-  const segments = React11.useMemo(
+  const segments = React13.useMemo(
     () => buildHueSegments(min, max),
     [min, max]
   );
-  const trackRef = React11.useRef(null);
-  const trackWidth = React11.useRef(0);
-  const trackPageX = React11.useRef(0);
-  const onValueChangeRef = React11.useRef(onValueChange);
-  const minRef = React11.useRef(min);
-  const maxRef = React11.useRef(max);
-  const disabledRef = React11.useRef(disabled);
-  React11.useEffect(() => {
+  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(() => {
     onValueChangeRef.current = onValueChange;
   }, [onValueChange]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     minRef.current = min;
   }, [min]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     maxRef.current = max;
   }, [max]);
-  React11.useEffect(() => {
+  React13.useEffect(() => {
     disabledRef.current = disabled;
   }, [disabled]);
-  const computeHue = React11.useCallback((pageX) => {
+  const computeHue = React13.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 = React11.useRef(
+  const panResponder = React13.useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => !disabledRef.current,
       onMoveShouldSetPanResponder: () => !disabledRef.current,
@@ -2048,7 +2487,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 = React11.useCallback(
+  const handleValueTextSubmit = React13.useCallback(
     (text) => {
       const raw = Number(text);
       if (!Number.isNaN(raw)) {
@@ -2057,12 +2496,12 @@ function HueSlider({
     },
     [onValueChange]
   );
-  const [editText, setEditText] = React11.useState(String(value));
-  React11.useEffect(() => {
+  const [editText, setEditText] = React13.useState(String(value));
+  React13.useEffect(() => {
     setEditText(String(value));
   }, [value]);
   const showLabel = label || showValue || editableValue;
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, showLabel && /* @__PURE__ */ React11.createElement(View, { style: styles.labelRow }, label && /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label), editableValue ? /* @__PURE__ */ React11.createElement(
+  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(
     TextInput$1,
     {
       style: styles.valueInput,
@@ -2074,7 +2513,7 @@ function HueSlider({
       selectTextOnFocus: true,
       editable: !disabled
     }
-  ) : showValue && /* @__PURE__ */ React11.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React11.createElement(
+  ) : showValue && /* @__PURE__ */ React13.createElement(Text, { style: styles.value }, value, "\xB0")), /* @__PURE__ */ React13.createElement(
     View,
     {
       ref: trackRef,
@@ -2087,8 +2526,8 @@ function HueSlider({
       },
       ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.gradientTrack }, segments.map((color, i) => /* @__PURE__ */ React11.createElement(View, { key: i, style: [styles.segment, { backgroundColor: color }] }))),
-    /* @__PURE__ */ React11.createElement(View, { style: [styles.thumb, { left: thumbLeft }] })
+    /* @__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 }] })
   ));
 }
 var TRACK_HEIGHT4 = 22;
@@ -2135,295 +2574,131 @@ function getColorScaleSliderStyles(tokens, disabled) {
       backgroundColor: "#ffffff",
       borderWidth: 2,
       borderColor: srgbToHex(tokens.border.srgb)
-    },
-    warning: {
-      fontFamily: tokens.typography.fonts.default,
-      fontSize: tokens.typography.size.xs,
-      fontWeight: tokens.typography.weight.medium,
-      color: srgbToHex(tokens.error.srgb)
-    }
-  });
-}
-
-// src/ColorScaleSlider/ColorScaleSlider.tsx
-function ColorScaleSlider({
-  colors,
-  value,
-  onValueChange,
-  label,
-  warning,
-  trimEnds = false,
-  snap = false,
-  disabled = false,
-  animateValue = false,
-  style
-}) {
-  const tokens = useTokens(1);
-  const styles = React11.useMemo(
-    () => getColorScaleSliderStyles(tokens, disabled),
-    [tokens, disabled]
-  );
-  const trackRef = React11.useRef(null);
-  const trackWidth = React11.useRef(0);
-  const trackPageX = React11.useRef(0);
-  const isDragging = React11.useRef(false);
-  const thumbAnim = React11.useRef(new Animated.Value(0)).current;
-  const onValueChangeRef = React11.useRef(onValueChange);
-  const disabledRef = React11.useRef(disabled);
-  const colorsLengthRef = React11.useRef(colors.length);
-  const trimEndsRef = React11.useRef(trimEnds);
-  const snapRef = React11.useRef(snap);
-  React11.useEffect(() => {
-    onValueChangeRef.current = onValueChange;
-  }, [onValueChange]);
-  React11.useEffect(() => {
-    disabledRef.current = disabled;
-  }, [disabled]);
-  React11.useEffect(() => {
-    colorsLengthRef.current = colors.length;
-  }, [colors.length]);
-  React11.useEffect(() => {
-    trimEndsRef.current = trimEnds;
-  }, [trimEnds]);
-  React11.useEffect(() => {
-    snapRef.current = snap;
-  }, [snap]);
-  const computeNv = React11.useCallback((pageX) => {
-    const localX = pageX - trackPageX.current;
-    const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
-    const totalSteps2 = colorsLengthRef.current - 1;
-    const minNV2 = trimEndsRef.current ? 1 / totalSteps2 : 0;
-    const maxNV2 = trimEndsRef.current ? 1 - 1 / totalSteps2 : 1;
-    const range2 = maxNV2 - minNV2;
-    let nv = maxNV2 - ratio2 * range2;
-    if (snapRef.current && totalSteps2 > 0) {
-      const stepNv = 1 / totalSteps2;
-      nv = Math.round(nv / stepNv) * stepNv;
-      nv = Math.min(maxNV2, Math.max(minNV2, nv));
-    }
-    return nv;
-  }, []);
-  const panResponder = React11.useRef(
-    PanResponder.create({
-      onStartShouldSetPanResponder: () => !disabledRef.current,
-      onMoveShouldSetPanResponder: () => !disabledRef.current,
-      onPanResponderGrant: (evt) => {
-        isDragging.current = true;
-        onValueChangeRef.current(computeNv(evt.nativeEvent.pageX));
-      },
-      onPanResponderMove: (_evt, gestureState) => {
-        onValueChangeRef.current(computeNv(gestureState.moveX));
-      },
-      onPanResponderRelease: () => {
-        isDragging.current = false;
-      },
-      onPanResponderTerminate: () => {
-        isDragging.current = false;
-      }
-    })
-  ).current;
-  const visibleColors = trimEnds ? colors.slice(1, -1) : colors;
-  const totalSteps = colors.length - 1;
-  const minNV = trimEnds ? 1 / totalSteps : 0;
-  const maxNV = trimEnds ? 1 - 1 / totalSteps : 1;
-  const range = maxNV - minNV;
-  const clampedValue = value !== void 0 ? Math.min(maxNV, Math.max(minNV, value)) : (maxNV + minNV) / 2;
-  const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
-  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
-  const thumbLeft = ratio * usableWidth;
-  React11.useEffect(() => {
-    if (isDragging.current || !animateValue) {
-      thumbAnim.setValue(thumbLeft);
-    } else {
-      Animated.timing(thumbAnim, {
-        toValue: thumbLeft,
-        duration: 300,
-        useNativeDriver: false
-      }).start();
-    }
-  }, [thumbLeft, animateValue, thumbAnim]);
-  return /* @__PURE__ */ React11.createElement(View, { style: [styles.container, ...Array.isArray(style) ? style : [style]] }, label && /* @__PURE__ */ React11.createElement(View, { style: styles.labelRow }, /* @__PURE__ */ React11.createElement(Text, { style: styles.label }, label)), /* @__PURE__ */ React11.createElement(
-    View,
-    {
-      ref: trackRef,
-      style: styles.trackContainer,
-      onLayout: (e) => {
-        trackWidth.current = e.nativeEvent.layout.width;
-        const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE4);
-        thumbAnim.setValue(ratio * newUsableWidth);
-        trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
-          if (pageX != null) trackPageX.current = pageX;
-        });
-      },
-      ...panResponder.panHandlers
-    },
-    /* @__PURE__ */ React11.createElement(View, { style: styles.gradientTrack }, visibleColors.map((color, i) => /* @__PURE__ */ React11.createElement(View, { key: i, style: [styles.segment, { backgroundColor: srgbToHex(color.srgb) }] }))),
-    /* @__PURE__ */ React11.createElement(Animated.View, { style: [styles.thumb, { left: thumbAnim }] })
-  ), warning && /* @__PURE__ */ React11.createElement(Text, { style: styles.warning }, warning));
-}
-function getWrapperStyles(input) {
-  const {
-    tokens,
-    direction = "vertical",
-    wrap = false,
-    reverse = false,
-    align,
-    justify,
-    padding,
-    gap,
-    width,
-    height,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
-  } = input;
-  const container = {};
-  container.flexDirection = resolveFlexDirection(direction, reverse);
-  if (wrap) container.flexWrap = "wrap";
-  if (align) container.alignItems = resolveAlignment(align);
-  if (justify) container.justifyContent = resolveJustification(justify);
-  if (padding !== void 0) {
-    const p = resolvePadding(padding, tokens);
-    container.paddingTop = p.top;
-    container.paddingRight = p.right;
-    container.paddingBottom = p.bottom;
-    container.paddingLeft = p.left;
-  }
-  if (gap !== void 0) {
-    const g = resolveGap(gap, tokens);
-    container.rowGap = g.rowGap;
-    container.columnGap = g.columnGap;
-  }
-  Object.assign(container, resolveSizing(width, height));
-  if (minWidth !== void 0) container.minWidth = minWidth;
-  if (maxWidth !== void 0) container.maxWidth = maxWidth;
-  if (minHeight !== void 0) container.minHeight = minHeight;
-  if (maxHeight !== void 0) container.maxHeight = maxHeight;
-  return StyleSheet.create({ c: container }).c;
-}
-
-// src/primitives/Wrapper/Wrapper.tsx
-function Wrapper({
-  children,
-  direction,
-  wrap,
-  reverse,
-  align,
-  justify,
-  padding,
-  gap,
-  width,
-  height,
-  minWidth,
-  maxWidth,
-  minHeight,
-  maxHeight,
-  style,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref
-}) {
-  const tokens = useTokens(1);
-  const containerStyle = useMemo(
-    () => getWrapperStyles({
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    }),
-    [
-      tokens,
-      direction,
-      wrap,
-      reverse,
-      align,
-      justify,
-      padding,
-      gap,
-      width,
-      height,
-      minWidth,
-      maxWidth,
-      minHeight,
-      maxHeight
-    ]
-  );
-  const userStyles = Array.isArray(style) ? style : style ? [style] : [];
-  return /* @__PURE__ */ React11.createElement(
-    View,
-    {
-      ref,
-      testID,
-      nativeID,
-      accessibilityRole: "none",
-      style: [containerStyle, ...userStyles]
-    },
-    children
-  );
-}
-var COLOR_MAP = {
-  primary: "textPrimary",
-  secondary: "textSecondary",
-  interactive: "interactive"
-};
-function Text11({
-  children,
-  size = "base",
-  weight = "regular",
-  color = "primary",
-  font = "default",
-  lineHeight = "normal",
-  align,
-  numberOfLines,
-  elevation = 1,
-  style,
-  // Accessibility
-  accessibilityRole,
-  // Testing & platform
-  testID,
-  nativeID,
-  ref
+    },
+    warning: {
+      fontFamily: tokens.typography.fonts.default,
+      fontSize: tokens.typography.size.xs,
+      fontWeight: tokens.typography.weight.medium,
+      color: srgbToHex(tokens.error.fill.srgb)
+    }
+  });
+}
+
+// src/composites/range-inputs/ColorScaleSlider/ColorScaleSlider.tsx
+function ColorScaleSlider({
+  colors,
+  value,
+  onValueChange,
+  label,
+  warning,
+  trimEnds = false,
+  snap = false,
+  disabled = false,
+  animateValue = false,
+  style
 }) {
-  const tokens = useTokens(elevation);
-  const resolvedStyle = useMemo(() => {
-    const fontSize = tokens.typography.size[size];
-    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').
-      color: srgbToHex(tokens[COLOR_MAP[color]].srgb),
-      // Line height = font size × multiplier (e.g. 16px × 1.5 = 24px line height).
-      lineHeight: fontSize * tokens.typography.lineHeight[lineHeight],
-      textAlign: align
-    };
-  }, [tokens, size, weight, color, font, lineHeight, align]);
-  return /* @__PURE__ */ React11.createElement(
-    Text,
+  const tokens = useTokens(1);
+  const styles = React13.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(() => {
+    onValueChangeRef.current = onValueChange;
+  }, [onValueChange]);
+  React13.useEffect(() => {
+    disabledRef.current = disabled;
+  }, [disabled]);
+  React13.useEffect(() => {
+    colorsLengthRef.current = colors.length;
+  }, [colors.length]);
+  React13.useEffect(() => {
+    trimEndsRef.current = trimEnds;
+  }, [trimEnds]);
+  React13.useEffect(() => {
+    snapRef.current = snap;
+  }, [snap]);
+  const computeNv = React13.useCallback((pageX) => {
+    const localX = pageX - trackPageX.current;
+    const ratio2 = Math.min(1, Math.max(0, localX / trackWidth.current));
+    const totalSteps2 = colorsLengthRef.current - 1;
+    const minNV2 = trimEndsRef.current ? 1 / totalSteps2 : 0;
+    const maxNV2 = trimEndsRef.current ? 1 - 1 / totalSteps2 : 1;
+    const range2 = maxNV2 - minNV2;
+    let nv = maxNV2 - ratio2 * range2;
+    if (snapRef.current && totalSteps2 > 0) {
+      const stepNv = 1 / totalSteps2;
+      nv = Math.round(nv / stepNv) * stepNv;
+      nv = Math.min(maxNV2, Math.max(minNV2, nv));
+    }
+    return nv;
+  }, []);
+  const panResponder = React13.useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabledRef.current,
+      onMoveShouldSetPanResponder: () => !disabledRef.current,
+      onPanResponderGrant: (evt) => {
+        isDragging.current = true;
+        onValueChangeRef.current(computeNv(evt.nativeEvent.pageX));
+      },
+      onPanResponderMove: (_evt, gestureState) => {
+        onValueChangeRef.current(computeNv(gestureState.moveX));
+      },
+      onPanResponderRelease: () => {
+        isDragging.current = false;
+      },
+      onPanResponderTerminate: () => {
+        isDragging.current = false;
+      }
+    })
+  ).current;
+  const visibleColors = trimEnds ? colors.slice(1, -1) : colors;
+  const totalSteps = colors.length - 1;
+  const minNV = trimEnds ? 1 / totalSteps : 0;
+  const maxNV = trimEnds ? 1 - 1 / totalSteps : 1;
+  const range = maxNV - minNV;
+  const clampedValue = value !== void 0 ? Math.min(maxNV, Math.max(minNV, value)) : (maxNV + minNV) / 2;
+  const ratio = range > 0 ? (maxNV - clampedValue) / range : 0.5;
+  const usableWidth = Math.max(0, trackWidth.current - THUMB_SIZE4);
+  const thumbLeft = ratio * usableWidth;
+  React13.useEffect(() => {
+    if (isDragging.current || !animateValue) {
+      thumbAnim.setValue(thumbLeft);
+    } else {
+      Animated.timing(thumbAnim, {
+        toValue: thumbLeft,
+        duration: 300,
+        useNativeDriver: false
+      }).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(
+    View,
     {
-      ref,
-      testID,
-      nativeID,
-      accessibilityRole,
-      style: style ? [resolvedStyle, ...Array.isArray(style) ? style : [style]] : resolvedStyle,
-      numberOfLines
+      ref: trackRef,
+      style: styles.trackContainer,
+      onLayout: (e) => {
+        trackWidth.current = e.nativeEvent.layout.width;
+        const newUsableWidth = Math.max(0, e.nativeEvent.layout.width - THUMB_SIZE4);
+        thumbAnim.setValue(ratio * newUsableWidth);
+        trackRef.current?.measure((_x, _y, _w, _h, pageX) => {
+          if (pageX != null) trackPageX.current = pageX;
+        });
+      },
+      ...panResponder.panHandlers
     },
-    children
-  );
+    /* @__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));
 }
 function getAppShellStyles(tokens) {
   return StyleSheet.create({
@@ -2442,11 +2717,11 @@ function getAppShellStyles(tokens) {
   });
 }
 
-// src/AppShell/AppShell.tsx
+// src/composites/layout/AppShell/AppShell.tsx
 function AppShell({ sidebar, children }) {
   const tokens = useTokens();
-  const styles = React11.useMemo(() => getAppShellStyles(tokens), [tokens]);
-  return /* @__PURE__ */ React11.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React11.createElement(View, { style: styles.main }, children));
+  const styles = React13.useMemo(() => getAppShellStyles(tokens), [tokens]);
+  return /* @__PURE__ */ React13.createElement(View, { style: styles.container }, sidebar, /* @__PURE__ */ React13.createElement(View, { style: styles.main }, children));
 }
 function getSidebarStyles({ tokens, width, bordered }) {
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -2475,7 +2750,7 @@ function getSidebarStyles({ tokens, width, bordered }) {
   });
 }
 
-// src/Sidebar/Sidebar.tsx
+// src/composites/layout/Sidebar/Sidebar.tsx
 function Sidebar({
   children,
   header,
@@ -2484,11 +2759,11 @@ function Sidebar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getSidebarStyles({ tokens, width, bordered }),
     [tokens, width, bordered]
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: styles.container }, header && /* @__PURE__ */ React11.createElement(View, { style: styles.header }, header), /* @__PURE__ */ React11.createElement(ScrollView, { style: styles.body }, children), footer && /* @__PURE__ */ React11.createElement(View, { style: styles.footer }, footer));
+  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));
 }
 function getNavbarStyles({ tokens, height, bordered }) {
   const borderColor = srgbToHex(tokens.border.srgb);
@@ -2517,7 +2792,7 @@ function getNavbarStyles({ tokens, height, bordered }) {
   });
 }
 
-// src/Navbar/Navbar.tsx
+// src/composites/layout/Navbar/Navbar.tsx
 function Navbar({
   children,
   left,
@@ -2526,19 +2801,21 @@ function Navbar({
   bordered = true
 }) {
   const tokens = useTokens();
-  const styles = React11.useMemo(
+  const styles = React13.useMemo(
     () => getNavbarStyles({ tokens, height, bordered }),
     [tokens, height, bordered]
   );
-  return /* @__PURE__ */ React11.createElement(View, { style: styles.container }, children ? children : /* @__PURE__ */ React11.createElement(React11.Fragment, null, /* @__PURE__ */ React11.createElement(View, { style: styles.left }, left), /* @__PURE__ */ React11.createElement(View, { style: styles.right }, right)));
+  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)));
 }
 
 // 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 values" },
-  { id: "layout", name: "Layout", description: "Structural and container components" }
+  { 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" }
 ];
 var COMPONENTS = [
   {
@@ -2551,13 +2828,17 @@ var COMPONENTS = [
     variants: [
       { id: "primary-md", label: "Primary", props: { variant: "primary", size: "md" } },
       { id: "secondary-md", label: "Secondary", props: { variant: "secondary", size: "md" } },
-      { id: "ghost-md", label: "Ghost", props: { variant: "ghost", size: "md" } },
-      { id: "outline-md", label: "Outline", props: { variant: "outline", size: "md" } },
+      { id: "tertiary-md", label: "Tertiary", props: { variant: "tertiary", size: "md" } },
       { id: "primary-sm", label: "Primary Small", props: { variant: "primary", size: "sm" } },
       { id: "primary-lg", label: "Primary Large", props: { variant: "primary", size: "lg" } },
+      { id: "accent-primary", label: "Accent Primary", props: { variant: "primary", size: "md", semantic: "accent" } },
+      { id: "accent-secondary", label: "Accent Secondary", props: { variant: "secondary", size: "md", semantic: "accent" } },
+      { id: "success-primary", label: "Success Primary", props: { variant: "primary", size: "md", semantic: "success" } },
+      { id: "error-primary", label: "Error Primary", props: { variant: "primary", size: "md", semantic: "error" } },
+      { id: "warning-primary", label: "Warning Primary", props: { variant: "primary", size: "md", semantic: "warning" } },
       { id: "icon-left", label: "Icon Left", props: { variant: "primary", size: "md", icon: "add" } },
       { id: "icon-right", label: "Icon Right", props: { variant: "primary", size: "md", icon: "arrow_forward", iconPosition: "right" } },
-      { id: "icon-only", label: "Icon Only", props: { variant: "ghost", size: "md", icon: "settings" } }
+      { id: "icon-only", label: "Icon Only", props: { variant: "tertiary", size: "md", icon: "settings" } }
     ],
     editableProps: [
       {
@@ -2567,11 +2848,23 @@ var COMPONENTS = [
         options: [
           { label: "Primary", value: "primary" },
           { label: "Secondary", value: "secondary" },
-          { label: "Ghost", value: "ghost" },
-          { label: "Outline", value: "outline" }
+          { label: "Tertiary", value: "tertiary" }
         ],
         defaultValue: "primary"
       },
+      {
+        name: "semantic",
+        label: "Semantic",
+        control: "select",
+        options: [
+          { label: "Neutral", value: "neutral" },
+          { label: "Accent", value: "accent" },
+          { label: "Success", value: "success" },
+          { label: "Warning", value: "warning" },
+          { label: "Error", value: "error" }
+        ],
+        defaultValue: "neutral"
+      },
       {
         name: "size",
         label: "Size",
@@ -2919,6 +3212,221 @@ var COMPONENTS = [
         defaultValue: false
       }
     ]
+  },
+  // ── Design Primitives ──
+  {
+    id: "text",
+    name: "Text",
+    importName: "Text",
+    categoryId: "primitives",
+    description: "Typography primitive with semantic size, weight, color, font, and lineHeight",
+    hasChildren: true,
+    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" } }
+    ],
+    editableProps: [
+      {
+        name: "size",
+        label: "Size",
+        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" }
+        ],
+        defaultValue: "base"
+      },
+      {
+        name: "weight",
+        label: "Weight",
+        control: "select",
+        options: [
+          { label: "Regular", value: "regular" },
+          { label: "Medium", value: "medium" },
+          { label: "Semibold", value: "semibold" },
+          { label: "Bold", value: "bold" }
+        ],
+        defaultValue: "regular"
+      },
+      {
+        name: "color",
+        label: "Color",
+        control: "select",
+        options: [
+          { label: "Primary", value: "primary" },
+          { label: "Secondary", value: "secondary" },
+          { label: "Tertiary", value: "tertiary" },
+          { label: "Disabled", value: "disabled" },
+          { label: "Accent", value: "accent" },
+          { label: "Success", value: "success" },
+          { label: "Warning", value: "warning" },
+          { 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"
+      }
+    ]
+  },
+  {
+    id: "icon",
+    name: "Icon",
+    importName: "Icon",
+    categoryId: "primitives",
+    description: "Material Symbols icon with size, fill, and color",
+    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 } }
+    ],
+    editableProps: [
+      {
+        name: "name",
+        label: "Icon Name",
+        control: "text",
+        defaultValue: "home"
+      },
+      {
+        name: "size",
+        label: "Size",
+        control: "number",
+        defaultValue: 24
+      },
+      {
+        name: "fill",
+        label: "Fill",
+        control: "select",
+        options: [
+          { label: "Outlined", value: 0 },
+          { label: "Filled", value: 1 }
+        ],
+        defaultValue: 0
+      }
+    ]
+  },
+  {
+    id: "wrapper",
+    name: "Wrapper",
+    importName: "Wrapper",
+    categoryId: "primitives",
+    description: "Lightweight layout container with direction, spacing, and alignment (no theming)",
+    hasChildren: true,
+    variants: [
+      { id: "vertical", label: "Vertical Stack", props: { direction: "vertical", gap: "md" } },
+      { id: "horizontal", label: "Horizontal Row", props: { direction: "horizontal", gap: "md", align: "center" } },
+      { id: "padded", label: "Padded", props: { padding: "lg", gap: "md" } },
+      { id: "centered", label: "Centered", props: { align: "center", justify: "center", padding: "xl" } }
+    ],
+    editableProps: [
+      {
+        name: "direction",
+        label: "Direction",
+        control: "select",
+        options: [
+          { label: "Vertical", value: "vertical" },
+          { label: "Horizontal", value: "horizontal" }
+        ],
+        defaultValue: "vertical"
+      },
+      {
+        name: "gap",
+        label: "Gap",
+        control: "select",
+        options: [
+          { label: "None", value: "" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ],
+        defaultValue: ""
+      },
+      {
+        name: "padding",
+        label: "Padding",
+        control: "select",
+        options: [
+          { label: "None", value: "" },
+          { label: "Small", value: "sm" },
+          { label: "Medium", value: "md" },
+          { label: "Large", value: "lg" }
+        ],
+        defaultValue: ""
+      },
+      {
+        name: "align",
+        label: "Align",
+        control: "select",
+        options: [
+          { label: "Start", value: "start" },
+          { label: "Center", value: "center" },
+          { label: "End", value: "end" }
+        ],
+        defaultValue: "start"
+      },
+      {
+        name: "justify",
+        label: "Justify",
+        control: "select",
+        options: [
+          { label: "Start", value: "start" },
+          { label: "Center", value: "center" },
+          { label: "End", value: "end" },
+          { label: "Space Between", value: "space-between" }
+        ],
+        defaultValue: "start"
+      }
+    ]
+  },
+  // ── Range Inputs (Addition: ColorScaleSlider) ──
+  {
+    id: "color-scale-slider",
+    name: "ColorScaleSlider",
+    importName: "ColorScaleSlider",
+    categoryId: "range-inputs",
+    description: "Interactive palette preview slider with color segments",
+    hasChildren: false,
+    variants: [
+      { id: "default", label: "Default", props: { label: "Key Color" } }
+    ],
+    editableProps: [
+      {
+        name: "label",
+        label: "Label",
+        control: "text",
+        defaultValue: "Key Color"
+      },
+      {
+        name: "disabled",
+        label: "Disabled",
+        control: "toggle",
+        defaultValue: false
+      }
+    ]
   }
 ];
 function getComponent(id) {
@@ -3087,6 +3595,6 @@ var SYSTEM_FONTS = [
   }
 ];
 
-export { AppShell, Button, CATEGORIES, COMPONENTS, Card, ColorScaleSlider, DEFAULT_THEME_CONFIG, Frame, GOOGLE_FONTS, HueSlider, Icon, Navbar, NewtoneProvider, Popover, SYSTEM_FONTS, Select, Sidebar, Slider, Text11 as Text, TextInput, Toggle, 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, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map