@tac-ui/tokens 0.1.0

package/dist/chunk-T3JFXTDW.mjs

@@ -0,0 +1,723 @@
+// src/semantic.ts
+var semanticTokens = {
+  light: {
+    // ── Canvas & Surface (Off-white paper base) ──
+    background: "#FAFAFA",
+    // Off-white base
+    backgroundSubtle: "#F4F4F5",
+    // Slightly darker gray
+    surface: "#FCFCFC",
+    // Just faintly off-white surface
+    surfaceHover: "#F4F4F5",
+    surfaceBase: "#FAFAFA",
+    surfaceElevatedLow: "#FCFCFC",
+    surfaceElevatedMid: "#FCFCFC",
+    surfaceElevatedHigh: "#FCFCFC",
+    card: "#FCFCFC",
+    cardForeground: "#121212",
+    // Barely off-black
+    // ── Text ──
+    foreground: "#121212",
+    muted: "#F4F4F5",
+    mutedForeground: "#71717A",
+    // ── Brand ──
+    primary: "#1E232D",
+    // Iron Navy
+    primaryHover: "#2A303D",
+    // Slightly lighter for hover
+    primaryForeground: "#FAFAFA",
+    secondary: "#E4E4E7",
+    // Darkened from F4F4F5 for better visibility
+    secondaryForeground: "#1E232D",
+    ring: "#1E232D",
+    // ── Point / Accent (Steel Navy) ──
+    point: "#323944",
+    pointHover: "#4A5361",
+    pointForeground: "#FAFAFA",
+    pointSubtle: "rgba(30, 35, 45, 0.08)",
+    // ── Border ──
+    border: "#E4E4E7",
+    input: "#E4E4E7",
+    // ── Gray Scale ──
+    gray50: "#FAFAFA",
+    gray100: "#F4F4F5",
+    gray200: "#E4E4E7",
+    gray300: "#D4D4D8",
+    gray400: "#A1A1AA",
+    gray500: "#71717A",
+    gray600: "#52525B",
+    gray700: "#3F3F46",
+    gray800: "#27272A",
+    gray900: "#18181B",
+    // ── Glass & Effects ──
+    glassBg: "rgba(252, 252, 252, 0.85)",
+    glassBorder: "rgba(18, 18, 18, 0.04)",
+    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.6)",
+    glassPanelShadow: "0 12px 40px rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.02)",
+    accentGlow: "0 0 0 transparent",
+    // ── Gradients ──
+    gradientBrand: "none",
+    gradientBrandHover: "none",
+    gradientSubtle: "none",
+    gradientAccent: "none",
+    gradientAccentVivid: "none",
+    gradientGlow: "none",
+    gradientMesh: "none",
+    gradientSurface: "none",
+    gradientGlowShadow: "none",
+    // ── Shadow ──
+    shadowColor: "rgba(18, 18, 18, 0.05)",
+    // ── Status ──
+    success: "#1A4331",
+    successBg: "#EAF1EC",
+    successForeground: "#1A4331",
+    warning: "#8A6D3B",
+    warningBg: "#F7F3EA",
+    warningForeground: "#8A6D3B",
+    error: "#7C2128",
+    errorBg: "#F4EAEB",
+    errorForeground: "#7C2128",
+    info: "#121212",
+    infoBg: "#FAFAFA",
+    infoForeground: "#121212",
+    // ── Interaction States ──
+    interactiveHover: "rgba(18, 18, 18, 0.04)",
+    interactivePressed: "rgba(18, 18, 18, 0.08)",
+    interactiveFocus: "#121212",
+    interactiveSurfaceTint: "rgba(18, 18, 18, 0.02)",
+    interactiveHoverTint: "rgba(18, 18, 18, 0.04)",
+    focusGlow: "0 0 0 2px #E4E4E7",
+    pointGlow: "0 0 0 2px rgba(18, 18, 18, 0.15)",
+    // ── Components ──
+    btnPrimarySurface: "#1E232D",
+    btnPrimaryHover: "#2A303D",
+    btnPrimaryEnergy: "0 4px 12px rgba(30, 35, 45, 0.16)",
+    btnPrimaryInset: "none",
+    btnSecondarySurface: "#E4E4E7",
+    btnSecondaryHover: "#D4D4D8",
+    btnOutlineBorder: "#E4E4E7",
+    btnOutlineBorderHover: "#D4D4D8",
+    btnOutlineHoverBg: "#F4F4F5",
+    btnGhostHover: "#F4F4F5",
+    btnPointSurface: "#323944",
+    btnPointBorder: "transparent",
+    btnPointHoverSurface: "#4A5361",
+    btnPointHoverBorder: "transparent",
+    btnPointEnergy: "0 4px 12px rgba(50, 57, 68, 0.2)",
+    btnDestructiveSurface: "#7C2128",
+    btnDestructiveHover: "#5B171D",
+    inputBg: "#FCFCFC",
+    inputBorderRest: "#E4E4E7",
+    inputBorderHover: "#A1A1AA",
+    inputHoverGlow: "0 0 0 2px #F4F4F5",
+    inputFocusGlow: "0 0 0 2px #E4E4E7",
+    inputErrorGlow: "0 0 0 2px #F4EAEB",
+    dropdownBg: "#FCFCFC",
+    dropdownShadow: "0 20px 25px -5px rgba(18, 18, 18, 0.08), 0 0 0 1px rgba(18, 18, 18, 0.03)",
+    dropdownItemHover: "#F4F4F5",
+    cardAccentBorder: "#E4E4E7",
+    cardAccentGlow: "none",
+    cardAccentHoverBorder: "#D4D4D8",
+    cardAccentHoverGlow: "0 8px 24px rgba(18, 18, 18, 0.06)"
+  },
+  dark: {
+    // ── Canvas & Surface (High-Contrast Charcoal Base) ──
+    background: "#121214",
+    // Off-black charcoal
+    backgroundSubtle: "#18181A",
+    // Zinc 900
+    surface: "#27272A",
+    // Zinc 800 - distinct from subtle background
+    surfaceHover: "#3F3F46",
+    // Zinc 700
+    surfaceBase: "#121214",
+    surfaceElevatedLow: "#18181A",
+    surfaceElevatedMid: "#27272A",
+    surfaceElevatedHigh: "#3F3F46",
+    card: "#18181A",
+    // Zinc 900
+    cardForeground: "#F4F4F5",
+    // Off-white
+    // ── Text ──
+    foreground: "#F4F4F5",
+    // Off-white
+    muted: "#27272A",
+    // Zinc 800
+    mutedForeground: "#A1A1AA",
+    // Zinc 400
+    // ── Brand (Iron Navy Light / Cold Steel Blue-Gray) ──
+    primary: "#B8C4D9",
+    primaryHover: "#D1DBE8",
+    primaryForeground: "#1E232D",
+    // Deep Iron Navy text
+    secondary: "#27272A",
+    secondaryForeground: "#B8C4D9",
+    ring: "#B8C4D9",
+    // ── Point / Accent (Lighter Steel Blue-Gray) ──
+    point: "#D1DBE8",
+    pointHover: "#E6ECEF",
+    pointForeground: "#1E232D",
+    pointSubtle: "rgba(209, 219, 232, 0.12)",
+    // ── Border (Highly Visible) ──
+    border: "#3F3F46",
+    // Zinc 700
+    input: "#3F3F46",
+    // ── Gray Scale (Zinc) ──
+    gray50: "#121214",
+    gray100: "#18181A",
+    gray200: "#27272A",
+    gray300: "#3F3F46",
+    gray400: "#52525B",
+    gray500: "#71717A",
+    gray600: "#A1A1AA",
+    gray700: "#D4D4D8",
+    gray800: "#E4E4E7",
+    gray900: "#FAFAFA",
+    // ── Glass & Effects ──
+    glassBg: "rgba(18, 18, 20, 0.85)",
+    glassBorder: "rgba(250, 250, 250, 0.1)",
+    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
+    glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
+    accentGlow: "none",
+    // ── Gradients ──
+    gradientBrand: "none",
+    gradientBrandHover: "none",
+    gradientSubtle: "none",
+    gradientAccent: "none",
+    gradientAccentVivid: "none",
+    gradientGlow: "none",
+    gradientMesh: "none",
+    gradientSurface: "none",
+    gradientGlowShadow: "none",
+    // ── Shadow ──
+    shadowColor: "rgba(0, 0, 0, 0.9)",
+    // ── Status (Deep & Clear) ──
+    success: "#34D399",
+    successBg: "rgba(52, 211, 153, 0.15)",
+    successForeground: "#34D399",
+    warning: "#FBBF24",
+    warningBg: "rgba(251, 191, 36, 0.15)",
+    warningForeground: "#FBBF24",
+    error: "#F87171",
+    errorBg: "rgba(248, 113, 113, 0.15)",
+    errorForeground: "#F87171",
+    info: "#FAFAFA",
+    infoBg: "rgba(250, 250, 250, 0.15)",
+    infoForeground: "#FAFAFA",
+    // ── Interaction States ──
+    interactiveHover: "rgba(250, 250, 250, 0.08)",
+    interactivePressed: "rgba(250, 250, 250, 0.12)",
+    interactiveFocus: "#FAFAFA",
+    interactiveSurfaceTint: "rgba(250, 250, 250, 0.04)",
+    interactiveHoverTint: "rgba(250, 250, 250, 0.08)",
+    focusGlow: "0 0 0 2px #3F3F46",
+    pointGlow: "0 0 0 2px rgba(250, 250, 250, 0.3)",
+    // ── Components ──
+    btnPrimarySurface: "#B8C4D9",
+    btnPrimaryHover: "#D1DBE8",
+    btnPrimaryEnergy: "0 4px 16px rgba(184, 196, 217, 0.25)",
+    btnPrimaryInset: "none",
+    btnSecondarySurface: "#27272A",
+    btnSecondaryHover: "#3F3F46",
+    btnOutlineBorder: "#3F3F46",
+    btnOutlineBorderHover: "#52525B",
+    btnOutlineHoverBg: "#27272A",
+    btnGhostHover: "#27272A",
+    btnPointSurface: "#D1DBE8",
+    btnPointBorder: "transparent",
+    btnPointHoverSurface: "#E6ECEF",
+    btnPointHoverBorder: "transparent",
+    btnPointEnergy: "0 4px 16px rgba(209, 219, 232, 0.25)",
+    btnDestructiveSurface: "#7C2128",
+    btnDestructiveHover: "#9A2A32",
+    inputBg: "#18181A",
+    inputBorderRest: "#3F3F46",
+    inputBorderHover: "#52525B",
+    inputHoverGlow: "0 0 0 2px #27272A",
+    inputFocusGlow: "0 0 0 2px #3F3F46",
+    inputErrorGlow: "0 0 0 2px #3E1014",
+    dropdownBg: "#18181A",
+    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250,250,250,0.1)",
+    dropdownItemHover: "#27272A",
+    cardAccentBorder: "#3F3F46",
+    cardAccentGlow: "none",
+    cardAccentHoverBorder: "#52525B",
+    cardAccentHoverGlow: "0 8px 24px rgba(0, 0, 0, 0.8)"
+  }
+};
+
+// src/component.ts
+var component = {
+  button: {
+    sm: { height: 34, paddingX: 18, paddingY: 8, fontSize: 12, borderRadius: 8, iconSize: 16 },
+    md: { height: 42, paddingX: 28, paddingY: 12, fontSize: 13, borderRadius: 10, iconSize: 18 },
+    lg: { height: 50, paddingX: 36, paddingY: 16, fontSize: 15, borderRadius: 14, iconSize: 20 }
+  },
+  input: {
+    height: 42,
+    paddingX: 18,
+    paddingY: 12,
+    fontSize: 14,
+    borderRadius: 10,
+    iconSize: 18,
+    iconPadding: 42
+  },
+  card: {
+    padding: 28,
+    gap: 20,
+    borderRadius: 16,
+    titleSize: 17,
+    bodySize: 14
+  },
+  badge: {
+    paddingX: 12,
+    paddingY: 6,
+    fontSize: 12,
+    fontWeight: 500,
+    borderRadius: 9999
+  },
+  checkbox: {
+    wrapperPaddingX: 16,
+    wrapperPaddingY: 10,
+    wrapperRadius: 10,
+    gap: 12,
+    size: 20,
+    borderRadius: 6,
+    borderWidth: 2,
+    iconSize: 14,
+    labelSize: 14
+  },
+  radio: {
+    wrapperPaddingX: 16,
+    wrapperPaddingY: 10,
+    wrapperRadius: 10,
+    gap: 12,
+    size: 20,
+    borderWidth: 2,
+    checkedBorderWidth: 6,
+    labelSize: 14
+  },
+  switch: {
+    width: 52,
+    height: 32,
+    thumbSize: 24,
+    thumbOffset: 4,
+    thumbTranslateOn: 24,
+    thumbTranslateOff: 4
+  },
+  chip: {
+    paddingX: 16,
+    paddingY: 8,
+    fontSize: 13,
+    borderRadius: 9999,
+    iconSize: 14,
+    iconPaddingX: 12
+  },
+  tabs: {
+    primary: {
+      paddingX: 20,
+      paddingY: 12,
+      fontSize: 14,
+      indicatorHeight: 2
+    },
+    secondary: {
+      paddingX: 20,
+      paddingY: 8,
+      fontSize: 13,
+      containerPadding: 4,
+      containerRadius: 14,
+      itemRadius: 10
+    }
+  },
+  slider: {
+    trackHeight: 6,
+    thumbSize: 20,
+    thumbBorderWidth: 2
+  },
+  tooltip: {
+    simple: { paddingX: 14, paddingY: 8, fontSize: 13, borderRadius: 10 },
+    rich: { paddingX: 16, paddingY: 10, maxWidth: 240, borderRadius: 10 },
+    delay: 150
+  },
+  avatar: {
+    sm: { size: 28, fontSize: 11 },
+    md: { size: 36, fontSize: 14 },
+    lg: { size: 48, fontSize: 18 },
+    xl: { size: 64, fontSize: 24 },
+    statusDot: 10,
+    statusBorder: 2
+  },
+  divider: {
+    thickness: 1,
+    thickThickness: 8,
+    insetMargin: 64,
+    labelSize: 12
+  },
+  progress: {
+    linear: { height: 8, borderRadius: 9999 },
+    circular: { strokeWidth: 4, textSize: 14 }
+  },
+  snackbar: {
+    paddingTop: 16,
+    paddingRight: 18,
+    paddingBottom: 16,
+    paddingLeft: 22,
+    borderRadius: 14,
+    gap: 12,
+    iconSize: 18,
+    messageSize: 14,
+    actionPaddingX: 14,
+    actionPaddingY: 6,
+    actionRadius: 8,
+    actionSize: 13
+  },
+  dialog: {
+    width: 380,
+    borderRadius: 20,
+    headerPaddingX: 28,
+    headerPaddingY: 24,
+    footerPaddingX: 28,
+    footerPaddingY: 20,
+    titleSize: 17,
+    descSize: 14,
+    footerGap: 14
+  },
+  animatedToggle: {
+    size: 40,
+    borderRadius: 10,
+    iconSize: 20
+  }
+};
+
+// src/typography.ts
+var typography = {
+  fontFamily: {
+    primary: "Pretendard",
+    secondary: "Pretendard",
+    display: "Pretendard"
+  },
+  display: {
+    lg: { size: 56, weight: 700, lineHeight: 1.12, letterSpacing: -0.03 },
+    md: { size: 48, weight: 700, lineHeight: 1.12, letterSpacing: -0.025 },
+    sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
+  },
+  heading: {
+    h1: { size: 32, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
+    h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
+    h3: { size: 24, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
+    h4: { size: 20, weight: 500, lineHeight: 1.3, letterSpacing: -0.01 },
+    h5: { size: 16, weight: 500, lineHeight: 1.35, letterSpacing: -5e-3 },
+    h6: { size: 14, weight: 500, lineHeight: 1.4, letterSpacing: 0 }
+  },
+  body: {
+    lg: { size: 17, weight: 400, lineHeight: 1.65, letterSpacing: -0.01 },
+    md: { size: 15, weight: 400, lineHeight: 1.6, letterSpacing: -5e-3 },
+    sm: { size: 13, weight: 400, lineHeight: 1.55, letterSpacing: 0 }
+  },
+  caption: { size: 11, weight: 400, lineHeight: 1.5, letterSpacing: 0.01 },
+  fontWeight: {
+    light: "300",
+    regular: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700"
+  }
+};
+
+// src/spacing.ts
+var spacing = {
+  "2xs": 2,
+  xs: 4,
+  sm: 8,
+  m: 16,
+  lg: 24,
+  xl: 40,
+  "2xl": 56,
+  "3xl": 80
+};
+var radius = {
+  none: 0,
+  xs: 4,
+  sm: 6,
+  m: 10,
+  lg: 14,
+  xl: 20,
+  "2xl": 24,
+  pill: 9999
+};
+var breakpoints = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+var grid = {
+  columns: 12,
+  gutter: 20,
+  margin: {
+    mobile: 20,
+    tablet: 32,
+    desktop: 40
+  }
+};
+var containers = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+
+// src/elevation.ts
+var elevation = {
+  light: {
+    sm: "0 1px 2px rgba(94,94,94,0.04), 0 1px 3px rgba(94,94,94,0.02)",
+    m: "0 2px 4px rgba(94,94,94,0.04), 0 8px 16px rgba(94,94,94,0.04)",
+    lg: "0 4px 8px rgba(94,94,94,0.05), 0 16px 32px rgba(94,94,94,0.06)",
+    xl: "0 8px 16px rgba(94,94,94,0.06), 0 24px 48px rgba(94,94,94,0.08)",
+    glass: "0 4px 24px rgba(94,94,94,0.05), 0 1px 2px rgba(94,94,94,0.02)",
+    glassLg: "0 8px 32px rgba(94,94,94,0.08), 0 2px 4px rgba(94,94,94,0.03)"
+  },
+  dark: {
+    sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
+    m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)",
+    lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)",
+    xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)",
+    glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)",
+    glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)"
+  }
+};
+var elevationLight = elevation.light;
+var zIndex = {
+  hide: -1,
+  base: 0,
+  dropdown: 1e3,
+  sticky: 1100,
+  overlay: 1200,
+  modal: 1300,
+  popover: 1400,
+  tooltip: 1500,
+  toast: 1600
+};
+
+// src/motion.ts
+var DIA_SPRING_DEFAULT = { type: "spring", stiffness: 260, damping: 34, mass: 1 };
+var DIA_SPRING_LIGHT = { type: "spring", stiffness: 260, damping: 34, mass: 0.5 };
+var motion = {
+  duration: {
+    instant: 80,
+    fast: 150,
+    normal: 220,
+    slow: 320,
+    complex: 450
+  },
+  easing: {
+    /** Dia's signature curve — slight overshoot with smooth natural deceleration. */
+    standard: "cubic-bezier(0.22, 1, 0.36, 1)",
+    /** Exit easing — fast acceleration, abrupt departure. */
+    easeIn: "cubic-bezier(0.55, 0, 1, 0.45)",
+    /** Entrance easing — gentle deceleration without overshoot. */
+    easeOut: "cubic-bezier(0, 0.55, 0.45, 1)",
+    /** Symmetric ease — smooth in both directions. */
+    easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)",
+    /** Playful overshoot — for toggles, switches, confirmatory feedback. */
+    bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    /** Stronger spring feel — deliberate physical presence. */
+    spring: "cubic-bezier(0.22, 1.2, 0.36, 1)",
+    /** Subtle rubber-band — elastic resistance with quick snap back. */
+    elastic: "cubic-bezier(0.68, -0.2, 0.265, 1.2)"
+  },
+  /** Framer Motion spring presets calibrated for Dia-style organic feel. */
+  spring: {
+    /** Quick interactive feedback — subtle and responsive. */
+    snappy: { type: "spring", stiffness: 260, damping: 28 },
+    /** Smooth state changes — gentle spring resolution. */
+    gentle: { type: "spring", stiffness: 180, damping: 26 },
+    /** Toggle/switch feel — restrained with minimal bounce. */
+    bouncy: { type: "spring", stiffness: 260, damping: 24 },
+    /** Large layout shifts — deliberate mass with controlled deceleration. */
+    slow: { type: "spring", stiffness: 140, damping: 24 },
+    /** Press/release with life — elastic resistance, mass gives it weight. */
+    elastic: { type: "spring", stiffness: 220, damping: 22, mass: 0.8 },
+    /** Elements appearing — spring resolves cleanly with organic arrival. */
+    entrance: { type: "spring", stiffness: 180, damping: 24, mass: 0.9 }
+  },
+  /** Mass-differentiated spring configs for Dia Browser-like physics interactions. */
+  diaSpring: {
+    default: DIA_SPRING_DEFAULT,
+    light: DIA_SPRING_LIGHT,
+    heavy: { type: "spring", stiffness: 220, damping: 32, mass: 1.5 },
+    magnetic: { type: "spring", stiffness: 340, damping: 38, mass: 0.8 },
+    entrance: { type: "spring", stiffness: 180, damping: 28, mass: 1.2 }
+  },
+  /** Standard animation keyframe presets for reuse across components. */
+  keyframes: {
+    fadeIn: { from: { opacity: "0" }, to: { opacity: "1" } },
+    fadeOut: { from: { opacity: "1" }, to: { opacity: "0" } },
+    /** Blur entrance — element fades in from blurry with subtle upward spring motion. */
+    blurFadeIn: {
+      from: { opacity: "0", filter: "blur(4px)", transform: "translateY(4px)" },
+      to: { opacity: "1", filter: "blur(0px)", transform: "translateY(0)" }
+    },
+    /** Blur scale entrance — deblurs while gently scaling up from slight compression. */
+    blurScaleIn: {
+      from: { opacity: "0", filter: "blur(3px)", transform: "scale(0.98)" },
+      to: { opacity: "1", filter: "blur(0px)", transform: "scale(1)" }
+    },
+    /** Slide entrance from below — element springs up from offset position. */
+    slideInUp: { from: { opacity: "0", transform: "translateY(5px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+    /** Slide entrance from above — element springs down from offset position. */
+    slideInDown: { from: { opacity: "0", transform: "translateY(-5px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+    /** Slide entrance from left — element springs in from offset. */
+    slideInLeft: { from: { opacity: "0", transform: "translateX(-5px)" }, to: { opacity: "1", transform: "translateX(0)" } },
+    /** Slide entrance from right — element springs in from offset. */
+    slideInRight: { from: { opacity: "0", transform: "translateX(5px)" }, to: { opacity: "1", transform: "translateX(0)" } },
+    /** Scale entrance — element inflates from slight compression. */
+    scaleIn: { from: { opacity: "0", transform: "scale(0.98)" }, to: { opacity: "1", transform: "scale(1)" } },
+    scaleOut: { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(0.98)" } },
+    /** Zoom entrance — element arrives from meaningful distance, not just nearby. */
+    zoomIn: { from: { opacity: "0", transform: "scale(0.92)" }, to: { opacity: "1", transform: "scale(1)" } },
+    /** Press feedback — subtle scale to confirm tap/click with physical weight. */
+    pressDown: { from: { transform: "scale(1)" }, to: { transform: "scale(0.98)" } },
+    /** Press keyframes — clean squish held at destination. */
+    elasticPress: {
+      "0%": { transform: "scale(1)" },
+      "50%": { transform: "scale(0.98)" },
+      "100%": { transform: "scale(0.98)" }
+    },
+    /** Release keyframes — spring overshoots slightly then resolves to rest. */
+    elasticRelease: {
+      "0%": { transform: "scale(0.98)" },
+      "50%": { transform: "scale(1.005)" },
+      "100%": { transform: "scale(1)" }
+    },
+    /** Lift — subtle elevation shift on hover, element has mass. */
+    liftUp: { from: { transform: "translateY(0)" }, to: { transform: "translateY(-1px)" } },
+    /** Glow pulse — ambient glow to indicate active state. */
+    glowPulse: {
+      "0%, 100%": { boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)" },
+      "50%": { boxShadow: "0 0 12px 2px color-mix(in srgb, var(--point) 20%, transparent)" }
+    },
+    shimmer: {
+      "0%": { backgroundPosition: "-200% 0" },
+      "100%": { backgroundPosition: "200% 0" }
+    },
+    gradientShimmer: {
+      "0%": { backgroundPosition: "0% 50%" },
+      "50%": { backgroundPosition: "100% 50%" },
+      "100%": { backgroundPosition: "0% 50%" }
+    },
+    /** Gradient glow — soft glow for decorative emphasis. */
+    gradientGlow: {
+      "0%, 100%": { boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)" },
+      "50%": { boxShadow: "0 0 16px 3px color-mix(in srgb, var(--point) 15%, transparent)" }
+    },
+    /** Spotlight pulse — radial glow that breathes gently. */
+    spotlightPulse: {
+      "0%, 100%": { opacity: "0" },
+      "50%": { opacity: "1" }
+    },
+    spin: { from: { transform: "rotate(0deg)" }, to: { transform: "rotate(360deg)" } },
+    pulse: { "0%, 100%": { opacity: "1" }, "50%": { opacity: "0.5" } },
+    bounce: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-2px)" } },
+    /** Float — gentle hovering motion with spring-like rhythm. */
+    float: {
+      "0%, 100%": { transform: "translateY(0)" },
+      "50%": { transform: "translateY(-2px)" }
+    }
+  },
+  /** Glow animation configuration for border glow effects. */
+  glow: {
+    /** Rotation speed in seconds for the border glow sweep. */
+    rotationSpeed: { idle: 3, focused: 1.5 },
+    /** Blur radius in px applied to the glow trail. */
+    blur: { idle: 8, focused: 16 },
+    /** Opacity of the glow sweep. */
+    opacity: { idle: 0.3, focused: 0.6 },
+    /** Conic gradient color stop percentages. */
+    spread: { transparent: 25, start: 40, peak: 50, end: 60, fadeOut: 75 }
+  },
+  /** Layout morphing spring config — for FLIP transitions between components. */
+  morph: {
+    /** Spring config for morph transitions — references diaSpring.default. */
+    spring: DIA_SPRING_DEFAULT,
+    /** Faster variant for small elements. */
+    springFast: { type: "spring", stiffness: 400, damping: 35, mass: 0.8 }
+  }
+};
+var diaSpring = motion.diaSpring;
+
+// src/chart.ts
+var chart = {
+  light: {
+    colors: [
+      "#1E232D",
+      // chart-1: Iron Navy (Primary)
+      "#323944",
+      // chart-2: Steel Navy (Secondary)
+      "#4A5361",
+      // chart-3: Slate Navy (Tertiary)
+      "#71717A",
+      // chart-4: Zinc 500 (Accent 1)
+      "#A1A1AA",
+      // chart-5: Zinc 400 (Accent 2)
+      "#D4D4D8",
+      // chart-6: Zinc 300 (Fill)
+      "#0F172A",
+      // chart-7: Deep Slate 900 (Deep Fill)
+      "#E4E4E7"
+      // chart-8: Zinc 200 (Light Fill)
+    ],
+    grid: "rgba(30, 35, 45, 0.04)",
+    axis: "rgba(30, 35, 45, 0.08)",
+    label: "#71717A",
+    // Zinc 500
+    tooltipBg: "#FFFFFF"
+  },
+  dark: {
+    colors: [
+      "#B8C4D9",
+      // chart-1: Bright Ice Navy (Primary)
+      "#D1DBE8",
+      // chart-2: Ice Steel (Secondary)
+      "#E6ECEF",
+      // chart-3: Pale Silver (Tertiary)
+      "#A1A1AA",
+      // chart-4: Zinc 400 (Accent 1)
+      "#71717A",
+      // chart-5: Zinc 500 (Accent 2)
+      "#808B9D",
+      // chart-6: Cold Steel (Fill)
+      "#FFFFFF",
+      // chart-7: Pure White (Highlight)
+      "#52525B"
+      // chart-8: Zinc 600 (Deep Fill)
+    ],
+    grid: "rgba(255, 255, 255, 0.04)",
+    axis: "rgba(255, 255, 255, 0.06)",
+    label: "#A1A1AA",
+    // Zinc 400
+    tooltipBg: "#18181A"
+    // Off-black chart tooltip matches dropdowns
+  },
+  lineWidth: 1.5,
+  dotSize: 2.5,
+  barRadius: 4,
+  areaOpacity: 0.08
+};
+
+// src/web/unit-utils.ts
+function rem(v) {
+  return `${v / 16}rem`;
+}
+function px(v) {
+  return `${v}px`;
+}
+function ms(v) {
+  return `${v}ms`;
+}
+function unitless(v) {
+  return `${v}`;
+}
+
+export { breakpoints, chart, component, containers, diaSpring, elevation, elevationLight, grid, motion, ms, px, radius, rem, semanticTokens, spacing, typography, unitless, zIndex };