@elevasis/ui 1.19.0 → 1.20.1

package/dist/chunk-OFAXUZPZ.js

@@ -0,0 +1,2411 @@
+import { CyberBackground, WaveBackground } from './chunk-3DIU726S.js';
+import { createElement, createContext, useRef, useEffect, useContext } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Tooltip, Text, Tabs, Table, Stack, SimpleGrid, Select, Combobox, SegmentedControl, ScrollArea, Paper, Popover, Notification, Modal, Menu, Input, HoverCard, Group, Grid, Flex, Code, Divider, Card, Button, Accordion, createTheme } from '@mantine/core';
+
+// src/theme/presets/utils.ts
+function hexToRgb(hex) {
+  const h = hex.replace("#", "");
+  const full = h.length === 3 ? h.split("").map((c) => c + c).join("") : h;
+  return [parseInt(full.slice(0, 2), 16), parseInt(full.slice(2, 4), 16), parseInt(full.slice(4, 6), 16)];
+}
+function rgbToHsl(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b), min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  if (max === min) return [0, 0, l];
+  const d = max - min;
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+  else if (max === g) h = ((b - r) / d + 2) / 6;
+  else h = ((r - g) / d + 4) / 6;
+  return [h * 360, s, l];
+}
+function hslToHex(h, s, l) {
+  h /= 360;
+  const hue2rgb = (p, q, t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  let r, g, b;
+  if (s === 0) {
+    r = g = b = l;
+  } else {
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+    const p = 2 * l - q;
+    r = hue2rgb(p, q, h + 1 / 3);
+    g = hue2rgb(p, q, h);
+    b = hue2rgb(p, q, h - 1 / 3);
+  }
+  const toHex = (n) => Math.round(Math.min(255, Math.max(0, n * 255))).toString(16).padStart(2, "0");
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+function generateShades(hex) {
+  const [r, g, b] = hexToRgb(hex);
+  const [h, s, l] = rgbToHsl(r, g, b);
+  const targets = [
+    0.95,
+    0.88,
+    0.78,
+    0.65,
+    0.55,
+    0.48,
+    l,
+    Math.max(l - 0.08, 0.08),
+    Math.max(l - 0.16, 0.05),
+    Math.max(l - 0.24, 0.03)
+  ];
+  return targets.map((tl) => hslToHex(h, s, tl));
+}
+
+// src/theme/presets/default.ts
+var defaultPreset = {
+  subtitleFontFamily: '"Inter", sans-serif',
+  fontImports: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"],
+  light: {
+    primary: "#0099ff",
+    primaryContrast: "#ffffff",
+    background: "#ededf0",
+    surface: "#f5f5f5",
+    surfaceHover: "#f2f2f2",
+    text: "#212529",
+    textDimmed: "#495057",
+    textSubtle: "#868e96",
+    border: "#ddd",
+    error: "#dc3545",
+    warning: "#fd7e14",
+    success: "#28a745",
+    glassBackground: "rgba(252, 252, 252, 0.6)",
+    glassBlur: "blur(10px)",
+    shadow: "0px 3px 5px -4px rgba(0, 0, 0, 0.18)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.02), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(0, 0, 0, 0.02), 0 4px 8px rgba(0, 0, 0, 0.02), 0 8px 16px rgba(0, 0, 0, 0.02)",
+    durationFast: "150ms",
+    durationNormal: "250ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSans: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  dark: {
+    primary: "#0099ff",
+    primaryContrast: "#ffffff",
+    background: "#040404",
+    surface: "#111112",
+    surfaceHover: "#191919",
+    text: "#ffffff",
+    textDimmed: "#c1c2c5",
+    textSubtle: "#999999",
+    border: "#1C1C1C",
+    error: "#ff5252",
+    warning: "#ff9800",
+    success: "#4caf50",
+    glassBackground: "rgba(15, 15, 15, 0.6)",
+    glassBlur: "blur(10px)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "150ms",
+    durationNormal: "250ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSans: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  }
+};
+
+// src/theme/presets/tactical.ts
+var tacticalPreset = {
+  light: {
+    primary: "#0099ff",
+    primaryContrast: "#ffffff",
+    background: "#EAEBEE",
+    surface: "#F3F3F6",
+    surfaceHover: "#DFDFE4",
+    text: "#0F1319",
+    textDimmed: "#3B4559",
+    textSubtle: "#5D677B",
+    border: "#C5CCD6",
+    error: "#D32F2F",
+    warning: "#ED6C02",
+    success: "#2E7D32",
+    glassBackground: "rgba(243, 243, 246, 0.6)",
+    glassBlur: "blur(14px)",
+    shadow: "0px 2px 4px -2px rgba(15, 19, 25, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(15, 19, 25, 0.06), 0 4px 8px rgba(15, 19, 25, 0.04)",
+    durationFast: "100ms",
+    durationNormal: "180ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"Chakra Petch", sans-serif'
+  },
+  dark: {
+    primary: "#0099ff",
+    primaryContrast: "#ffffff",
+    background: "#020305",
+    surface: "rgba(15, 17, 25, 0.3)",
+    surfaceHover: "rgba(28, 30, 40, 0.5)",
+    text: "#EFF2F7",
+    textDimmed: "#B0BCD2",
+    textSubtle: "#8898AE",
+    border: "#181C2D",
+    error: "#FF4757",
+    warning: "#FFA502",
+    success: "#2ED573",
+    glassBackground: "rgba(14, 15, 22, 0.5)",
+    glassBlur: "blur(18px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "100ms",
+    durationNormal: "180ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"Chakra Petch", sans-serif'
+  },
+  subtitleFontFamily: '"Chakra Petch", sans-serif',
+  framework: {
+    fontFamily: '"Chakra Petch", sans-serif',
+    headings: {
+      fontFamily: '"Chakra Petch", sans-serif'
+    }
+  },
+  fontImports: ["https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap"]
+};
+
+// src/theme/presets/regal.ts
+var regalPreset = {
+  light: {
+    primary: "#B8922F",
+    primaryContrast: "#ffffff",
+    background: "#F0F0F2",
+    surface: "#F7F7F8",
+    surfaceHover: "#E9E9EB",
+    text: "#2E2E30",
+    textDimmed: "#50505A",
+    textSubtle: "#8E8E96",
+    border: "#CCCCD2",
+    error: "#A83232",
+    warning: "#B87A1A",
+    success: "#3A7A3A",
+    glassBackground: "rgba(247, 247, 248, 0.6)",
+    glassBlur: "blur(12px)",
+    shadow: "0px 2px 6px -2px rgba(20, 20, 20, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(20, 20, 20, 0.06), 0 4px 8px rgba(20, 20, 20, 0.04)",
+    durationFast: "180ms",
+    durationNormal: "320ms",
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Cinzel", serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#D4A843",
+    primaryContrast: "#1A1400",
+    background: "#000000",
+    surface: "#0E0E0E",
+    surfaceHover: "#181818",
+    text: "#F5EEE0",
+    textDimmed: "#C8BA98",
+    textSubtle: "#A89880",
+    border: "#1D1D1D",
+    error: "#E05252",
+    warning: "#D4943C",
+    success: "#4AA84A",
+    glassBackground: "rgba(14, 14, 14, 0.6)",
+    glassBlur: "blur(14px)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(212, 168, 67, 0.08), inset 0 0 0 1px rgba(212, 168, 67, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "180ms",
+    durationNormal: "320ms",
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Cinzel", serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  subtitleFontFamily: '"Raleway", sans-serif',
+  framework: {
+    defaultRadius: "xs",
+    fontFamily: '"Inter", sans-serif',
+    headings: {
+      fontFamily: '"Cinzel", serif',
+      fontWeight: "600"
+    }
+  },
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap"
+  ]
+};
+var cyberVoltPreset = {
+  background: createElement(CyberBackground, { variant: "volt" }),
+  light: {
+    primary: "#0097A7",
+    primaryContrast: "#ffffff",
+    background: "#F5FAFB",
+    surface: "transparent",
+    surfaceHover: "rgba(0, 151, 167, 0.08)",
+    text: "#0A0E14",
+    textDimmed: "#2E3A4D",
+    textSubtle: "#556680",
+    border: "rgba(10, 14, 20, 0.08)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(245, 250, 251, 0.25)",
+    glassBlur: "blur(8px) saturate(180%)",
+    shadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 20px 48px -8px rgba(0, 0, 0, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 24px -8px rgba(0, 0, 0, 0.06), 0 20px 48px -16px rgba(0, 0, 0, 0.04)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"Chakra Petch", sans-serif'
+  },
+  dark: {
+    primary: "#00E5FF",
+    primaryContrast: "#001418",
+    background: "#030506",
+    surface: "transparent",
+    surfaceHover: "rgba(0, 229, 255, 0.06)",
+    text: "#E0F7FA",
+    textDimmed: "#80DEEA",
+    textSubtle: "#5E8A94",
+    border: "rgba(0, 229, 255, 0.14)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(6, 14, 20, 0.4)",
+    glassBlur: "blur(14px) saturate(200%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(0, 229, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"Chakra Petch", sans-serif'
+  },
+  subtitleFontFamily: '"Chakra Petch", sans-serif',
+  framework: {
+    fontFamily: '"Chakra Petch", sans-serif',
+    headings: {
+      fontFamily: '"Chakra Petch", sans-serif'
+    }
+  },
+  fontImports: ["https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap"]
+};
+var STYLE = `
+  div[style*="var(--color-background)"][style*="100vh"] {
+    background-color: transparent !important;
+    isolation: isolate;
+  }
+  .chrome-bg-root {
+    position: fixed;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  /* ============ Light mode variant palettes ============ */
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] {
+    --chrome-base: #F7F5FF;
+    --chrome-origin-glow: rgba(221, 214, 254, 0.5);
+    --chrome-vignette: rgba(30, 15, 60, 0.05);
+    --chrome-beam-1: #A78BFA;
+    --chrome-beam-2: #C4B5FD;
+    --chrome-beam-3: #818CF8;
+    --chrome-beam-4: #A78BFA;
+    --chrome-beam-5: #8B5CF6;
+    --chrome-beam-6: #C4B5FD;
+    --chrome-beam-7: #818CF8;
+    --chrome-beam-8: #A78BFA;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] {
+    --chrome-base: #F2F8F5;
+    --chrome-origin-glow: rgba(167, 243, 208, 0.5);
+    --chrome-vignette: rgba(10, 40, 30, 0.05);
+    --chrome-beam-1: #34D399;
+    --chrome-beam-2: #6EE7B7;
+    --chrome-beam-3: #2DD4BF;
+    --chrome-beam-4: #5EEAD4;
+    --chrome-beam-5: #10B981;
+    --chrome-beam-6: #6EE7B7;
+    --chrome-beam-7: #34D399;
+    --chrome-beam-8: #5EEAD4;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="rose-gold"] {
+    --chrome-base: #F7F2F0;
+    --chrome-origin-glow: rgba(253, 205, 197, 0.5);
+    --chrome-vignette: rgba(45, 21, 22, 0.05);
+    --chrome-beam-1: #FB7185;
+    --chrome-beam-2: #FDA4AF;
+    --chrome-beam-3: #E8A598;
+    --chrome-beam-4: #FDA4AF;
+    --chrome-beam-5: #C07A6F;
+    --chrome-beam-6: #FB923C;
+    --chrome-beam-7: #F472B6;
+    --chrome-beam-8: #FDA4AF;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="ember"] {
+    --chrome-base: #F7F3EF;
+    --chrome-origin-glow: rgba(254, 215, 170, 0.45);
+    --chrome-vignette: rgba(44, 23, 8, 0.05);
+    --chrome-beam-1: #F97316;
+    --chrome-beam-2: #FB923C;
+    --chrome-beam-3: #EA580C;
+    --chrome-beam-4: #FDBA74;
+    --chrome-beam-5: #F59E0B;
+    --chrome-beam-6: #FB923C;
+    --chrome-beam-7: #F97316;
+    --chrome-beam-8: #FDBA74;
+  }
+
+  /* ============ Dark mode variant palettes ============ */
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] {
+    --chrome-base: #050610;
+    --chrome-origin-glow: rgba(100, 116, 139, 0.06);
+    --chrome-vignette: rgba(0, 0, 0, 0.4);
+    --chrome-beam-1: #1E293B;
+    --chrome-beam-2: #334155;
+    --chrome-beam-3: #3B3B5C;
+    --chrome-beam-4: #3730A3;
+    --chrome-beam-5: #475569;
+    --chrome-beam-6: #312E81;
+    --chrome-beam-7: #4C4A6E;
+    --chrome-beam-8: #1E1B4B;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] {
+    --chrome-base: #020807;
+    --chrome-origin-glow: rgba(20, 184, 166, 0.05);
+    --chrome-vignette: rgba(0, 0, 0, 0.4);
+    --chrome-beam-1: #064E3B;
+    --chrome-beam-2: #065F46;
+    --chrome-beam-3: #047857;
+    --chrome-beam-4: #0F766E;
+    --chrome-beam-5: #0D9488;
+    --chrome-beam-6: #115E59;
+    --chrome-beam-7: #134E4A;
+    --chrome-beam-8: #059669;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] {
+    --chrome-base: #070405;
+    --chrome-origin-glow: rgba(232, 165, 152, 0.05);
+    --chrome-vignette: rgba(0, 0, 0, 0.4);
+    --chrome-beam-1: #4C0519;
+    --chrome-beam-2: #881337;
+    --chrome-beam-3: #9F1239;
+    --chrome-beam-4: #7C2D12;
+    --chrome-beam-5: #A8695E;
+    --chrome-beam-6: #C07A6F;
+    --chrome-beam-7: #E8A598;
+    --chrome-beam-8: #C8897C;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] {
+    --chrome-base: #060302;
+    --chrome-origin-glow: rgba(232, 123, 85, 0.05);
+    --chrome-vignette: rgba(0, 0, 0, 0.4);
+    --chrome-beam-1: #431407;
+    --chrome-beam-2: #7C2D12;
+    --chrome-beam-3: #9A3412;
+    --chrome-beam-4: #B45309;
+    --chrome-beam-5: #C2410C;
+    --chrome-beam-6: #92400E;
+    --chrome-beam-7: #EA580C;
+    --chrome-beam-8: #78350F;
+  }
+
+  /* ============ Shared geometry ============ */
+  .chrome-bg-root {
+    background:
+      radial-gradient(ellipse 80% 40% at 50% -25%, var(--chrome-origin-glow), transparent 75%),
+      var(--chrome-base);
+  }
+  .chrome-bg-root::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background:
+      radial-gradient(ellipse 140% 110% at 50% 0%, transparent 65%, var(--chrome-vignette) 100%);
+    pointer-events: none;
+  }
+  .chrome-bg-wrapper {
+    position: absolute;
+    width: 200vmax;
+    height: 200vmax;
+    top: -115vmax;
+    left: -50vmax;
+    animation: chrome-rotate 180s linear infinite;
+    will-change: transform;
+  }
+  .chrome-bg-beam {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 18vmax;
+    filter: blur(55px);
+    transform-origin: center;
+  }
+
+  /* Light mode: multiply blend with low opacity over pale base */
+  [data-mantine-color-scheme="light"] .chrome-bg-beam {
+    mix-blend-mode: multiply;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-1) 25%, var(--chrome-beam-1) 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.09;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-2) 25%, var(--chrome-beam-2) 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.08;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-3) 25%, var(--chrome-beam-3) 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.09;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-4) 25%, var(--chrome-beam-4) 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.07;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-5) 25%, var(--chrome-beam-5) 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.09;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-6) 25%, var(--chrome-beam-6) 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.07;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-7) 25%, var(--chrome-beam-7) 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.09;
+  }
+  [data-mantine-color-scheme="light"] .chrome-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-8) 25%, var(--chrome-beam-8) 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.07;
+  }
+
+  /* Dark mode: screen blend with low opacity over near-black base */
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam {
+    mix-blend-mode: screen;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-1 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-1) 25%, var(--chrome-beam-1) 75%, transparent 95%);
+    transform: rotate(0deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-2 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-2) 25%, var(--chrome-beam-2) 75%, transparent 95%);
+    transform: rotate(22.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-3 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-3) 25%, var(--chrome-beam-3) 75%, transparent 95%);
+    transform: rotate(45deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-4 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-4) 25%, var(--chrome-beam-4) 75%, transparent 95%);
+    transform: rotate(67.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-5 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-5) 25%, var(--chrome-beam-5) 75%, transparent 95%);
+    transform: rotate(90deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-6 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-6) 25%, var(--chrome-beam-6) 75%, transparent 95%);
+    transform: rotate(112.5deg);
+    opacity: 0.1;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-7 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-7) 25%, var(--chrome-beam-7) 75%, transparent 95%);
+    transform: rotate(135deg);
+    opacity: 0.12;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-beam-8 {
+    background: linear-gradient(to right, transparent 5%, var(--chrome-beam-8) 25%, var(--chrome-beam-8) 75%, transparent 95%);
+    transform: rotate(157.5deg);
+    opacity: 0.1;
+  }
+
+  @keyframes chrome-rotate {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .chrome-bg-wrapper {
+      animation: none;
+    }
+  }
+`;
+function ChromeBackground({ variant }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: STYLE }),
+    /* @__PURE__ */ jsx("div", { className: "chrome-bg-root", "data-variant": variant, "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: "chrome-bg-wrapper", children: [
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-1" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-2" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-3" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-4" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-5" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-6" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-7" }),
+      /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-8" })
+    ] }) })
+  ] });
+}
+
+// src/theme/presets/aurora.tsx
+var auroraPreset = {
+  subtitleFontFamily: '"Nunito", sans-serif',
+  fontImports: ["https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap"],
+  background: createElement(ChromeBackground, { variant: "aurora" }),
+  light: {
+    primary: "#00897B",
+    primaryContrast: "#ffffff",
+    background: "#EFF5F3",
+    surface: "transparent",
+    surfaceHover: "rgba(0, 137, 123, 0.08)",
+    text: "#0A1E1A",
+    textDimmed: "#3D5E54",
+    textSubtle: "#507368",
+    border: "rgba(10, 30, 26, 0.08)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(245, 250, 248, 0.55)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(10, 30, 26, 0.04), 0px 8px 24px -8px rgba(16, 185, 129, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(10, 30, 26, 0.05), 0 10px 28px -6px rgba(10, 30, 26, 0.08), 0 30px 56px -14px rgba(16, 185, 129, 0.18)",
+    durationFast: "160ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Nunito", sans-serif',
+    fontSans: '"Nunito", sans-serif'
+  },
+  dark: {
+    primary: "#00A88A",
+    primaryContrast: "#062E26",
+    background: "#020807",
+    surface: "transparent",
+    surfaceHover: "#0E2620",
+    text: "#E0F2F1",
+    textDimmed: "#80CBC4",
+    textSubtle: "#68C8BE",
+    border: "rgba(128, 203, 196, 0.07)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(10, 20, 18, 0.35)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(128, 203, 196, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(16, 185, 129, 0.14)",
+    durationFast: "160ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Nunito", sans-serif',
+    fontSans: '"Nunito", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Nunito", sans-serif',
+    defaultRadius: "xl",
+    headings: {
+      fontFamily: '"Nunito", sans-serif',
+      fontWeight: "700"
+    }
+  }
+};
+var roseGoldPreset = {
+  subtitleFontFamily: '"Lora", serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(ChromeBackground, { variant: "rose-gold" }),
+  light: {
+    primary: "#A8695E",
+    primaryContrast: "#ffffff",
+    background: "#F4F0EE",
+    surface: "transparent",
+    surfaceHover: "rgba(168, 105, 94, 0.08)",
+    text: "#2D1516",
+    textDimmed: "#5A4448",
+    textSubtle: "#9A848A",
+    border: "rgba(45, 21, 22, 0.08)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(250, 246, 245, 0.55)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(45, 21, 22, 0.04), 0px 8px 24px -8px rgba(192, 122, 110, 0.16)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(45, 21, 22, 0.05), 0 10px 28px -6px rgba(45, 21, 22, 0.08), 0 30px 56px -14px rgba(192, 122, 110, 0.18)",
+    durationFast: "160ms",
+    durationNormal: "300ms",
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Playfair Display", serif',
+    fontSans: '"DM Sans", sans-serif'
+  },
+  dark: {
+    primary: "#C8897C",
+    primaryContrast: "#2D1A16",
+    background: "#070405",
+    surface: "transparent",
+    surfaceHover: "#221418",
+    text: "#F5E8E6",
+    textDimmed: "#D8B8B2",
+    textSubtle: "#B89A94",
+    border: "rgba(216, 184, 178, 0.07)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(22, 14, 16, 0.35)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(216, 184, 178, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(200, 137, 124, 0.16)",
+    durationFast: "160ms",
+    durationNormal: "300ms",
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Playfair Display", serif',
+    fontSans: '"DM Sans", sans-serif'
+  },
+  framework: {
+    fontFamily: '"DM Sans", sans-serif',
+    defaultRadius: "xl",
+    headings: {
+      fontFamily: '"Playfair Display", serif',
+      fontWeight: "600"
+    }
+  }
+};
+var midnightPreset = {
+  subtitleFontFamily: '"Outfit", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(ChromeBackground, { variant: "midnight" }),
+  light: {
+    primary: "#475569",
+    primaryContrast: "#ffffff",
+    background: "#F5F3FF",
+    surface: "transparent",
+    surfaceHover: "rgba(71, 85, 105, 0.08)",
+    text: "#0F0A1E",
+    textDimmed: "#3D3758",
+    textSubtle: "#6B6480",
+    border: "rgba(15, 10, 30, 0.08)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(245, 243, 255, 0.55)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(15, 10, 30, 0.04), 0px 8px 24px -8px rgba(139, 92, 246, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(15, 10, 30, 0.05), 0 10px 28px -6px rgba(15, 10, 30, 0.08), 0 30px 56px -14px rgba(139, 92, 246, 0.18)",
+    durationFast: "160ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Outfit", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#64748B",
+    primaryContrast: "#F1F5F9",
+    background: "#060712",
+    surface: "transparent",
+    surfaceHover: "#171A24",
+    text: "#F1F5F9",
+    textDimmed: "#CBD5E1",
+    textSubtle: "#94A3B8",
+    border: "rgba(203, 213, 225, 0.07)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(12, 14, 22, 0.35)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(203, 213, 225, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(100, 116, 139, 0.12)",
+    durationFast: "160ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Outfit", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", sans-serif',
+    defaultRadius: "xl",
+    headings: {
+      fontFamily: '"Outfit", sans-serif',
+      fontWeight: "700"
+    }
+  }
+};
+var emberPreset = {
+  subtitleFontFamily: '"Source Serif 4", serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(ChromeBackground, { variant: "ember" }),
+  light: {
+    primary: "#D4603A",
+    primaryContrast: "#ffffff",
+    background: "#F3EFEB",
+    surface: "transparent",
+    surfaceHover: "rgba(212, 96, 58, 0.08)",
+    text: "#2C1708",
+    textDimmed: "#5E4A3A",
+    textSubtle: "#8D7A6A",
+    border: "rgba(44, 23, 8, 0.08)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(249, 246, 243, 0.55)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(44, 23, 8, 0.04), 0px 8px 24px -8px rgba(212, 96, 58, 0.16)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 1px 2px rgba(44, 23, 8, 0.05), 0 10px 28px -6px rgba(44, 23, 8, 0.08), 0 30px 56px -14px rgba(212, 96, 58, 0.18)",
+    durationFast: "150ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Libre Baskerville", serif',
+    fontSans: '"Source Sans 3", sans-serif'
+  },
+  dark: {
+    primary: "#E87B55",
+    primaryContrast: "#1A0E08",
+    background: "#060302",
+    surface: "transparent",
+    surfaceHover: "#1F1410",
+    text: "#F5EDE6",
+    textDimmed: "#D4B9A0",
+    textSubtle: "#B8A090",
+    border: "rgba(212, 185, 160, 0.07)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(20, 14, 10, 0.35)",
+    glassBlur: "blur(28px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(232, 123, 85, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 2px 8px rgba(0, 0, 0, 0.45), 0 14px 34px -6px rgba(0, 0, 0, 0.55), 0 36px 68px -14px rgba(0, 0, 0, 0.45), 0 48px 96px -24px rgba(249, 115, 22, 0.16)",
+    durationFast: "150ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Libre Baskerville", serif',
+    fontSans: '"Source Sans 3", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Source Sans 3", sans-serif',
+    defaultRadius: "xl",
+    headings: {
+      fontFamily: '"Libre Baskerville", serif',
+      fontWeight: "700"
+    }
+  }
+};
+var honeyPreset = {
+  subtitleFontFamily: '"Outfit", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(WaveBackground, { variant: "honey" }),
+  light: {
+    primary: "#A06A08",
+    primaryContrast: "#ffffff",
+    background: "#FCF9F2",
+    surface: "transparent",
+    surfaceHover: "rgba(160, 106, 8, 0.08)",
+    text: "#2A1F0A",
+    textDimmed: "#5C4820",
+    textSubtle: "#8A7450",
+    border: "rgba(42, 31, 10, 0.08)",
+    error: "#C62828",
+    warning: "#E65100",
+    success: "#33691E",
+    glassBackground: "rgba(251, 247, 240, 0.68)",
+    glassBlur: "blur(24px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(42, 31, 10, 0.04), 0px 8px 24px -8px rgba(160, 106, 8, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(42, 31, 10, 0.04), 0 8px 24px -8px rgba(160, 106, 8, 0.12), 0 24px 48px -16px rgba(160, 106, 8, 0.08)",
+    durationFast: "140ms",
+    durationNormal: "260ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Syne", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#E8A820",
+    primaryContrast: "#1A1200",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "#1C1808",
+    text: "#FDF0D0",
+    textDimmed: "#D8C070",
+    textSubtle: "#B8A060",
+    border: "rgba(216, 192, 112, 0.1)",
+    error: "#EF5350",
+    warning: "#FF8A65",
+    success: "#8BC34A",
+    glassBackground: "rgba(22, 19, 9, 0.35)",
+    glassBlur: "blur(24px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(232, 168, 32, 0.08), inset 0 0 0 1px rgba(232, 168, 32, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "140ms",
+    durationNormal: "260ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Syne", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  framework: {
+    defaultRadius: "xl",
+    fontFamily: '"Inter", sans-serif',
+    headings: {
+      fontFamily: '"Syne", sans-serif'
+    },
+    components: {
+      Title: {
+        styles: { root: { letterSpacing: "-0.06em" } }
+      }
+    }
+  }
+};
+var canopyPreset = {
+  subtitleFontFamily: '"Lora", serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(WaveBackground, { variant: "canopy" }),
+  light: {
+    primary: "#2E7A40",
+    primaryContrast: "#ffffff",
+    background: "#F4F8F5",
+    surface: "transparent",
+    surfaceHover: "rgba(46, 122, 64, 0.08)",
+    text: "#0F2415",
+    textDimmed: "#2D5235",
+    textSubtle: "#5A7D62",
+    border: "rgba(15, 36, 21, 0.08)",
+    error: "#C62828",
+    warning: "#E65100",
+    success: "#33691E",
+    glassBackground: "rgba(244, 248, 245, 0.6)",
+    glassBlur: "blur(24px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(15, 36, 21, 0.04), 0px 8px 24px -8px rgba(46, 122, 64, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(15, 36, 21, 0.04), 0 8px 24px -8px rgba(46, 122, 64, 0.12), 0 24px 48px -16px rgba(46, 122, 64, 0.08)",
+    durationFast: "150ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Fraunces", serif',
+    fontSans: '"Lato", sans-serif'
+  },
+  dark: {
+    primary: "#4AA860",
+    primaryContrast: "#ffffff",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "#162818",
+    text: "#E0F0E4",
+    textDimmed: "#98C8A4",
+    textSubtle: "#80A090",
+    border: "rgba(152, 200, 164, 0.1)",
+    error: "#EF5350",
+    warning: "#FF8A65",
+    success: "#8BC34A",
+    glassBackground: "rgba(16, 23, 18, 0.35)",
+    glassBlur: "blur(18px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(74, 168, 96, 0.08), inset 0 0 0 1px rgba(74, 168, 96, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "150ms",
+    durationNormal: "280ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Fraunces", serif',
+    fontSans: '"Lato", sans-serif'
+  },
+  framework: {
+    defaultRadius: "xl",
+    fontFamily: '"Lato", sans-serif',
+    headings: {
+      fontFamily: '"Fraunces", serif',
+      fontWeight: "600"
+    }
+  }
+};
+
+// src/theme/presets/slate.ts
+var slatePreset = {
+  light: {
+    primary: "#4A6E8E",
+    primaryContrast: "#ffffff",
+    background: "#ECEEF0",
+    surface: "#F3F4F6",
+    surfaceHover: "#E0E3E7",
+    text: "#161C22",
+    textDimmed: "#404C58",
+    textSubtle: "#6A7A88",
+    border: "#C8D0D8",
+    error: "#D32F2F",
+    warning: "#F57C00",
+    success: "#388E3C",
+    glassBackground: "rgba(243, 244, 246, 0.6)",
+    glassBlur: "blur(10px)",
+    shadow: "0px 2px 4px -2px rgba(74, 110, 142, 0.08)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 2px 4px rgba(22, 28, 34, 0.05), 0 4px 8px rgba(22, 28, 34, 0.04)",
+    durationFast: "110ms",
+    durationNormal: "200ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Quantico", sans-serif',
+    fontSans: '"IBM Plex Sans", sans-serif'
+  },
+  dark: {
+    primary: "#6A8FAD",
+    primaryContrast: "#0E1218",
+    background: "#010305",
+    surface: "#0B1015",
+    surfaceHover: "#1C2830",
+    text: "#E8F0F8",
+    textDimmed: "#A8C4DC",
+    textSubtle: "#80A0B0",
+    border: "#182028",
+    error: "#FF5252",
+    warning: "#FFB74D",
+    success: "#69F0AE",
+    glassBackground: "rgba(12, 16, 22, 0.65)",
+    glassBlur: "blur(14px)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(123, 158, 188, 0.08), inset 0 0 0 1px rgba(123, 158, 188, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "110ms",
+    durationNormal: "200ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Quantico", sans-serif',
+    fontSans: '"IBM Plex Sans", sans-serif'
+  },
+  subtitleFontFamily: '"Quantico", sans-serif',
+  framework: {
+    fontFamily: '"IBM Plex Sans", sans-serif',
+    headings: {
+      fontFamily: '"Quantico", sans-serif',
+      fontWeight: "600"
+    }
+  },
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Quantico:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+  ]
+};
+var cyberStrikePreset = {
+  background: createElement(CyberBackground, { variant: "strike" }),
+  light: {
+    primary: "#FF1744",
+    primaryContrast: "#ffffff",
+    background: "#FFF8FA",
+    surface: "transparent",
+    surfaceHover: "rgba(255, 23, 68, 0.08)",
+    text: "#140A0C",
+    textDimmed: "#4D2E35",
+    textSubtle: "#805560",
+    border: "rgba(20, 10, 12, 0.08)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(255, 248, 250, 0.25)",
+    glassBlur: "blur(8px) saturate(180%)",
+    shadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 20px 48px -8px rgba(0, 0, 0, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 24px -8px rgba(0, 0, 0, 0.06), 0 20px 48px -16px rgba(0, 0, 0, 0.04)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"JetBrains Mono", monospace'
+  },
+  dark: {
+    primary: "#FF1744",
+    primaryContrast: "#ffffff",
+    background: "#060404",
+    surface: "transparent",
+    surfaceHover: "rgba(255, 23, 68, 0.06)",
+    text: "#FAE0E4",
+    textDimmed: "#F0A0B0",
+    textSubtle: "#8E6068",
+    border: "rgba(255, 43, 88, 0.19)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(24, 16, 20, 0.4)",
+    glassBlur: "blur(14px) saturate(200%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(255, 23, 68, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"JetBrains Mono", monospace'
+  },
+  subtitleFontFamily: '"Exo 2", sans-serif',
+  framework: {
+    fontFamily: '"JetBrains Mono", monospace',
+    headings: {
+      fontFamily: '"Chakra Petch", sans-serif',
+      fontWeight: "600"
+    }
+  },
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap"
+  ]
+};
+var cyberPunkPreset = {
+  background: createElement(CyberBackground, { variant: "punk" }),
+  light: {
+    primary: "#7C4DFF",
+    primaryContrast: "#ffffff",
+    background: "#FAF8FF",
+    surface: "transparent",
+    surfaceHover: "rgba(124, 77, 255, 0.08)",
+    text: "#0E0A1E",
+    textDimmed: "#342E4D",
+    textSubtle: "#625880",
+    border: "rgba(14, 10, 30, 0.08)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(250, 248, 255, 0.25)",
+    glassBlur: "blur(8px) saturate(180%)",
+    shadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 20px 48px -8px rgba(0, 0, 0, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 24px -8px rgba(0, 0, 0, 0.06), 0 20px 48px -16px rgba(0, 0, 0, 0.04)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"JetBrains Mono", monospace'
+  },
+  dark: {
+    primary: "#7C4DFF",
+    primaryContrast: "#ffffff",
+    background: "#040308",
+    surface: "transparent",
+    surfaceHover: "rgba(124, 77, 255, 0.06)",
+    text: "#F0EAFF",
+    textDimmed: "#D0BBEE",
+    textSubtle: "#7E6E98",
+    border: "rgba(134, 87, 255, 0.19)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(18, 13, 26, 0.4)",
+    glassBlur: "blur(14px) saturate(200%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(124, 77, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Chakra Petch", sans-serif',
+    fontSans: '"JetBrains Mono", monospace'
+  },
+  subtitleFontFamily: '"Exo 2", sans-serif',
+  framework: {
+    fontFamily: '"JetBrains Mono", monospace',
+    headings: {
+      fontFamily: '"Chakra Petch", sans-serif',
+      fontWeight: "500"
+    },
+    components: {
+      Title: {
+        styles: { root: { letterSpacing: "-0.05em", fontWeight: 500 } }
+      }
+    }
+  },
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@300;400;500&display=swap",
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap"
+  ]
+};
+var cyberVoidPreset = {
+  background: createElement(CyberBackground, { variant: "void" }),
+  light: {
+    primary: "#2979FF",
+    primaryContrast: "#ffffff",
+    background: "#F5F8FD",
+    surface: "transparent",
+    surfaceHover: "rgba(41, 121, 255, 0.08)",
+    text: "#0A0D14",
+    textDimmed: "#2E374D",
+    textSubtle: "#556080",
+    border: "rgba(10, 13, 20, 0.08)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(245, 248, 253, 0.25)",
+    glassBlur: "blur(8px) saturate(180%)",
+    shadow: "0px 2px 6px rgba(0, 0, 0, 0.05), 0px 20px 48px -8px rgba(0, 0, 0, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 3px rgba(0, 0, 0, 0.03), 0 8px 24px -8px rgba(0, 0, 0, 0.06), 0 20px 48px -16px rgba(0, 0, 0, 0.04)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Share Tech Mono", monospace',
+    fontSans: '"JetBrains Mono", monospace'
+  },
+  dark: {
+    primary: "#2979FF",
+    primaryContrast: "#ffffff",
+    background: "#030507",
+    surface: "transparent",
+    surfaceHover: "rgba(41, 121, 255, 0.06)",
+    text: "#E0EAFA",
+    textDimmed: "#99BBEE",
+    textSubtle: "#5E7898",
+    border: "rgba(51, 131, 255, 0.2)",
+    error: "#FF1744",
+    warning: "#FF9100",
+    success: "#00E676",
+    glassBackground: "rgba(11, 15, 27, 0.4)",
+    glassBlur: "blur(14px) saturate(200%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(41, 121, 255, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "80ms",
+    durationNormal: "160ms",
+    easing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Share Tech Mono", monospace',
+    fontSans: '"JetBrains Mono", monospace'
+  },
+  subtitleFontFamily: '"Exo 2", sans-serif',
+  framework: {
+    fontFamily: '"JetBrains Mono", monospace',
+    headings: {
+      fontFamily: '"Share Tech Mono", monospace',
+      fontWeight: "400"
+    }
+  },
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap",
+    "https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700&display=swap"
+  ]
+};
+var nirvanaPreset = {
+  subtitleFontFamily: '"Inter", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Cormorant:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(WaveBackground, { variant: "nirvana" }),
+  light: {
+    primary: "#f23801",
+    primaryContrast: "#ffffff",
+    background: "#ffffff",
+    surface: "transparent",
+    surfaceHover: "rgba(242, 56, 1, 0.06)",
+    text: "#000000",
+    textDimmed: "#32373c",
+    textSubtle: "#6b7177",
+    border: "rgba(0, 0, 0, 0.08)",
+    error: "#cf2e2e",
+    warning: "#ff6900",
+    success: "#28a745",
+    glassBackground: "rgba(255, 255, 255, 0.6)",
+    glassBlur: "blur(24px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.04), 0px 8px 24px -8px rgba(242, 56, 1, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px -8px rgba(242, 56, 1, 0.12), 0 24px 48px -16px rgba(242, 56, 1, 0.08)",
+    durationFast: "150ms",
+    durationNormal: "250ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Cormorant", Georgia, "Times New Roman", serif',
+    fontSans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  dark: {
+    primary: "#f23801",
+    primaryContrast: "#ffffff",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "#1a1a1a",
+    text: "#ffffff",
+    textDimmed: "#c8ccd0",
+    textSubtle: "#8a8f95",
+    border: "rgba(255, 255, 255, 0.08)",
+    error: "#ff5252",
+    warning: "#ff9800",
+    success: "#4caf50",
+    glassBackground: "rgba(20, 20, 22, 0.35)",
+    glassBlur: "blur(18px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "150ms",
+    durationNormal: "250ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Cormorant", Georgia, "Times New Roman", serif',
+    fontSans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    defaultRadius: "xl",
+    headings: {
+      fontFamily: '"Cormorant", Georgia, "Times New Roman", serif',
+      fontWeight: "600"
+    }
+  }
+};
+var wavePreset = {
+  subtitleFontFamily: '"Inter", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap"
+  ],
+  background: createElement(WaveBackground, { variant: "wave" }),
+  light: {
+    primary: "#2563eb",
+    primaryContrast: "#ffffff",
+    background: "#f5f8fc",
+    surface: "transparent",
+    surfaceHover: "rgba(37, 99, 235, 0.06)",
+    text: "#0b1220",
+    textDimmed: "#334155",
+    textSubtle: "#64748b",
+    border: "rgba(15, 23, 42, 0.08)",
+    error: "#dc2626",
+    warning: "#f59e0b",
+    success: "#16a34a",
+    glassBackground: "rgba(250, 251, 253, 0.6)",
+    glassBlur: "blur(24px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(15, 23, 42, 0.04), 0px 8px 24px -8px rgba(37, 99, 235, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px -8px rgba(37, 99, 235, 0.12), 0 24px 48px -16px rgba(37, 99, 235, 0.08)",
+    durationFast: "150ms",
+    durationNormal: "250ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  dark: {
+    primary: "#60a5fa",
+    primaryContrast: "#000000",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "#141f36",
+    text: "#f1f5f9",
+    textDimmed: "#cbd5e1",
+    textSubtle: "#94a3b8",
+    border: "rgba(148, 163, 184, 0.1)",
+    error: "#f87171",
+    warning: "#fbbf24",
+    success: "#4ade80",
+    glassBackground: "rgba(16, 16, 18, 0.38)",
+    glassBlur: "blur(18px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 12px 32px -8px rgba(0, 0, 0, 0.6)",
+    cardShadow: "inset 0 1px 0 rgba(148, 197, 255, 0.08), inset 0 0 0 1px rgba(148, 197, 255, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 32px 64px -16px rgba(0, 0, 0, 0.4)",
+    durationFast: "150ms",
+    durationNormal: "250ms",
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    fontSans: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    defaultRadius: "xl",
+    headings: {
+      fontFamily: '"Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+      fontWeight: "600"
+    }
+  }
+};
+var DARK_PALETTE = {
+  bgStops: ["rgba(6, 18, 28, 1)", "rgba(2, 6, 12, 1)", "rgba(0, 0, 0, 1)"],
+  paletteA: [34, 211, 238],
+  // cyan
+  paletteB: [56, 248, 224],
+  // teal
+  paletteC: [129, 140, 248],
+  // violet
+  lineOpacity: 0.22,
+  haloOpacity: 0.22,
+  coreOpacity: 0.8,
+  compositeOp: "lighter",
+  coreBrightenR: 20,
+  coreBrightenG: 10,
+  coreBrightenB: 10
+};
+var LIGHT_PALETTE = {
+  // Soft near-white with faint cyan tint at center, cooler at edges
+  bgStops: ["rgba(245, 253, 255, 1)", "rgba(232, 244, 248, 1)", "rgba(218, 234, 240, 1)"],
+  paletteA: [8, 145, 178],
+  // darker cyan
+  paletteB: [14, 165, 165],
+  // darker teal
+  paletteC: [79, 70, 229],
+  // indigo
+  lineOpacity: 0.22,
+  haloOpacity: 0.14,
+  coreOpacity: 0.7,
+  compositeOp: "source-over",
+  coreBrightenR: -20,
+  coreBrightenG: -10,
+  coreBrightenB: -10
+};
+function ConstellationBackground({
+  darkPalette = DARK_PALETTE,
+  lightPalette = LIGHT_PALETTE
+} = {}) {
+  const canvasRef = useRef(null);
+  const darkPaletteRef = useRef(darkPalette);
+  const lightPaletteRef = useRef(lightPalette);
+  darkPaletteRef.current = darkPalette;
+  lightPaletteRef.current = lightPalette;
+  const redrawRef = useRef(null);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const PARTICLE_COUNT = 140;
+    const CONNECTION_DISTANCE = 160;
+    const readScheme = () => {
+      if (typeof document === "undefined") return "dark";
+      const attr = document.documentElement.getAttribute("data-mantine-color-scheme");
+      return attr === "light" ? "light" : "dark";
+    };
+    let palette = readScheme() === "light" ? lightPaletteRef.current : darkPaletteRef.current;
+    const dpr = window.devicePixelRatio || 1;
+    let width = window.innerWidth;
+    let height = window.innerHeight;
+    let rafId = 0;
+    const setSize = () => {
+      width = window.innerWidth;
+      height = window.innerHeight;
+      canvas.width = width * dpr;
+      canvas.height = height * dpr;
+      canvas.style.width = `${width}px`;
+      canvas.style.height = `${height}px`;
+      ctx.setTransform(1, 0, 0, 1, 0, 0);
+      ctx.scale(dpr, dpr);
+    };
+    setSize();
+    const randVelocity = () => (Math.random() - 0.5) * 0.28;
+    const particles = Array.from({ length: PARTICLE_COUNT }, () => ({
+      x: Math.random() * width,
+      y: Math.random() * height,
+      vx: randVelocity(),
+      vy: randVelocity(),
+      // Mostly small nodes with occasional larger "stars"
+      radius: Math.random() < 0.12 ? 1.8 + Math.random() * 1.6 : 0.6 + Math.random() * 1.1,
+      pulse: Math.random() * Math.PI * 2,
+      pulseSpeed: 8e-3 + Math.random() * 0.018,
+      hueShift: Math.random()
+    }));
+    const lerpColor = (t) => {
+      const { paletteA: A, paletteB: B, paletteC: C } = palette;
+      if (t < 0.5) {
+        const k2 = t * 2;
+        return [A[0] + (B[0] - A[0]) * k2, A[1] + (B[1] - A[1]) * k2, A[2] + (B[2] - A[2]) * k2];
+      }
+      const k = (t - 0.5) * 2;
+      return [B[0] + (C[0] - B[0]) * k, B[1] + (C[1] - B[1]) * k, B[2] + (C[2] - B[2]) * k];
+    };
+    const drawFrame = () => {
+      palette = readScheme() === "light" ? lightPaletteRef.current : darkPaletteRef.current;
+      ctx.clearRect(0, 0, width, height);
+      const gradient = ctx.createRadialGradient(
+        width / 2,
+        height / 2,
+        0,
+        width / 2,
+        height / 2,
+        Math.max(width, height) * 0.75
+      );
+      gradient.addColorStop(0, palette.bgStops[0]);
+      gradient.addColorStop(0.55, palette.bgStops[1]);
+      gradient.addColorStop(1, palette.bgStops[2]);
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, width, height);
+      ctx.globalCompositeOperation = palette.compositeOp;
+      for (const p of particles) {
+        p.x += p.vx;
+        p.y += p.vy;
+        p.pulse += p.pulseSpeed;
+        if (p.x < 0) p.x += width;
+        if (p.x > width) p.x -= width;
+        if (p.y < 0) p.y += height;
+        if (p.y > height) p.y -= height;
+      }
+      for (let i = 0; i < particles.length; i++) {
+        for (let j = i + 1; j < particles.length; j++) {
+          const a = particles[i];
+          const b = particles[j];
+          const dx = a.x - b.x;
+          const dy = a.y - b.y;
+          const distSq = dx * dx + dy * dy;
+          if (distSq < CONNECTION_DISTANCE * CONNECTION_DISTANCE) {
+            const dist = Math.sqrt(distSq);
+            const t = 1 - dist / CONNECTION_DISTANCE;
+            const opacity = t * t * palette.lineOpacity;
+            const [r, g, bl] = lerpColor((a.hueShift + b.hueShift) / 2);
+            ctx.beginPath();
+            ctx.strokeStyle = `rgba(${r | 0}, ${g | 0}, ${bl | 0}, ${opacity})`;
+            ctx.lineWidth = 0.7 + t * 0.6;
+            ctx.moveTo(a.x, a.y);
+            ctx.lineTo(b.x, b.y);
+            ctx.stroke();
+          }
+        }
+      }
+      for (const p of particles) {
+        const pulseScale = 0.8 + Math.sin(p.pulse) * 0.25;
+        const [r, g, bl] = lerpColor(p.hueShift);
+        const glowRadius = p.radius * 5 * pulseScale;
+        const ri = r | 0;
+        const gi = g | 0;
+        const bi = bl | 0;
+        const haloGradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glowRadius);
+        haloGradient.addColorStop(0, `rgba(${ri}, ${gi}, ${bi}, ${palette.haloOpacity})`);
+        haloGradient.addColorStop(0.4, `rgba(${ri}, ${gi}, ${bi}, ${palette.haloOpacity * 0.35})`);
+        haloGradient.addColorStop(1, `rgba(${ri}, ${gi}, ${bi}, 0)`);
+        ctx.fillStyle = haloGradient;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, glowRadius, 0, Math.PI * 2);
+        ctx.fill();
+        const cr = Math.max(0, Math.min(255, r + palette.coreBrightenR)) | 0;
+        const cg = Math.max(0, Math.min(255, g + palette.coreBrightenG)) | 0;
+        const cb = Math.max(0, Math.min(255, bl + palette.coreBrightenB)) | 0;
+        ctx.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${palette.coreOpacity})`;
+        ctx.beginPath();
+        ctx.arc(p.x, p.y, p.radius * pulseScale, 0, Math.PI * 2);
+        ctx.fill();
+      }
+      ctx.globalCompositeOperation = "source-over";
+    };
+    const reducedMotion = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    redrawRef.current = drawFrame;
+    if (reducedMotion) {
+      drawFrame();
+    } else {
+      const loop = () => {
+        drawFrame();
+        rafId = requestAnimationFrame(loop);
+      };
+      rafId = requestAnimationFrame(loop);
+    }
+    const handleResize = () => {
+      setSize();
+    };
+    window.addEventListener("resize", handleResize);
+    const schemeObserver = typeof MutationObserver !== "undefined" ? new MutationObserver(() => {
+      palette = readScheme() === "light" ? lightPaletteRef.current : darkPaletteRef.current;
+      if (reducedMotion) drawFrame();
+    }) : null;
+    schemeObserver?.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["data-mantine-color-scheme"]
+    });
+    return () => {
+      redrawRef.current = null;
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", handleResize);
+      schemeObserver?.disconnect();
+    };
+  }, []);
+  useEffect(() => {
+    redrawRef.current?.();
+  }, [darkPalette, lightPalette]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        div[style*="var(--color-background)"][style*="100vh"] {
+          background-color: transparent !important;
+          isolation: isolate;
+        }
+      ` }),
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: canvasRef,
+        "aria-hidden": "true",
+        style: {
+          position: "fixed",
+          inset: 0,
+          pointerEvents: "none",
+          zIndex: -1
+        }
+      }
+    )
+  ] });
+}
+
+// src/theme/presets/synapse.tsx
+var synapsePreset = {
+  subtitleFontFamily: '"Space Grotesk", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  ],
+  colors: ["#22D3EE", "#020305", "#F0FAFB"],
+  background: createElement(ConstellationBackground),
+  light: {
+    primary: "#0891B2",
+    primaryContrast: "#ffffff",
+    background: "#F0FAFB",
+    surface: "transparent",
+    surfaceHover: "rgba(8, 145, 178, 0.08)",
+    text: "#04141A",
+    textDimmed: "#1A3D48",
+    textSubtle: "#547078",
+    border: "rgba(4, 20, 26, 0.11)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(240, 250, 251, 0.42)",
+    glassBlur: "blur(20px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(4, 20, 26, 0.04), 0px 8px 24px -8px rgba(8, 145, 178, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(4, 20, 26, 0.04), 0 8px 24px -8px rgba(8, 145, 178, 0.12), 0 24px 48px -16px rgba(8, 145, 178, 0.08)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#0EB5CC",
+    primaryContrast: "#ffffff",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "rgba(34, 211, 238, 0.06)",
+    text: "#ECFEFF",
+    textDimmed: "#A5F3FC",
+    textSubtle: "#5F8A94",
+    border: "rgba(34, 211, 238, 0.1)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(6, 12, 16, 0.3)",
+    glassBlur: "blur(14px) saturate(180%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(34, 211, 238, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", sans-serif',
+    defaultRadius: "md",
+    headings: {
+      fontFamily: '"Space Grotesk", sans-serif',
+      fontWeight: "600"
+    }
+  }
+};
+var CORTEX_DARK = {
+  bgStops: ["rgba(4, 10, 26, 1)", "rgba(2, 5, 14, 1)", "rgba(0, 0, 0, 1)"],
+  paletteA: [59, 130, 246],
+  // blue-500
+  paletteB: [96, 165, 250],
+  // blue-400 (lighter)
+  paletteC: [14, 165, 233],
+  // sky-500
+  lineOpacity: 0.22,
+  haloOpacity: 0.22,
+  coreOpacity: 0.8,
+  compositeOp: "lighter",
+  coreBrightenR: 10,
+  coreBrightenG: 15,
+  coreBrightenB: 20
+};
+var CORTEX_LIGHT = {
+  bgStops: ["rgba(240, 246, 255, 1)", "rgba(224, 234, 250, 1)", "rgba(200, 218, 240, 1)"],
+  paletteA: [37, 99, 235],
+  // blue-600
+  paletteB: [29, 78, 216],
+  // blue-700
+  paletteC: [2, 132, 199],
+  // sky-600
+  lineOpacity: 0.22,
+  haloOpacity: 0.14,
+  coreOpacity: 0.7,
+  compositeOp: "source-over",
+  coreBrightenR: -20,
+  coreBrightenG: -10,
+  coreBrightenB: -10
+};
+var cortexPreset = {
+  subtitleFontFamily: '"Space Grotesk", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  ],
+  colors: ["#3B82F6", "#02050E", "#F0F6FF"],
+  background: /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: CORTEX_DARK, lightPalette: CORTEX_LIGHT }),
+  light: {
+    primary: "#2563EB",
+    primaryContrast: "#ffffff",
+    background: "#F0F6FF",
+    surface: "transparent",
+    surfaceHover: "rgba(37, 99, 235, 0.08)",
+    text: "#04102A",
+    textDimmed: "#1A2E5A",
+    textSubtle: "#556B94",
+    border: "rgba(4, 16, 42, 0.11)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(240, 246, 255, 0.42)",
+    glassBlur: "blur(20px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(4, 16, 42, 0.04), 0px 8px 24px -8px rgba(37, 99, 235, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(4, 16, 42, 0.04), 0 8px 24px -8px rgba(37, 99, 235, 0.12), 0 24px 48px -16px rgba(37, 99, 235, 0.08)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#60A5FA",
+    primaryContrast: "#ffffff",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "rgba(59, 130, 246, 0.08)",
+    text: "#EBF4FF",
+    textDimmed: "#BFD9FF",
+    textSubtle: "#5F7A94",
+    border: "rgba(59, 130, 246, 0.13)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(8, 14, 16, 0.3)",
+    glassBlur: "blur(14px) saturate(180%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(59, 130, 246, 0.08), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", sans-serif',
+    defaultRadius: "md",
+    headings: {
+      fontFamily: '"Space Grotesk", sans-serif',
+      fontWeight: "600"
+    }
+  }
+};
+var HELIOS_DARK = {
+  bgStops: ["rgba(26, 16, 4, 1)", "rgba(12, 7, 2, 1)", "rgba(0, 0, 0, 1)"],
+  paletteA: [245, 158, 11],
+  // amber
+  paletteB: [251, 191, 36],
+  // light amber
+  paletteC: [249, 115, 22],
+  // orange
+  lineOpacity: 0.22,
+  haloOpacity: 0.22,
+  coreOpacity: 0.8,
+  compositeOp: "lighter",
+  coreBrightenR: 20,
+  coreBrightenG: 15,
+  coreBrightenB: 5
+};
+var HELIOS_LIGHT = {
+  bgStops: ["rgba(255, 251, 240, 1)", "rgba(250, 240, 220, 1)", "rgba(240, 224, 188, 1)"],
+  paletteA: [180, 83, 9],
+  // amber-700
+  paletteB: [194, 65, 12],
+  // orange-700
+  paletteC: [146, 64, 14],
+  // amber-800
+  lineOpacity: 0.22,
+  haloOpacity: 0.14,
+  coreOpacity: 0.7,
+  compositeOp: "source-over",
+  coreBrightenR: -20,
+  coreBrightenG: -10,
+  coreBrightenB: -10
+};
+var heliosPreset = {
+  subtitleFontFamily: '"Space Grotesk", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  ],
+  colors: ["#F59E0B", "#0C0702", "#FFFBF0"],
+  background: /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: HELIOS_DARK, lightPalette: HELIOS_LIGHT }),
+  light: {
+    primary: "#B45309",
+    primaryContrast: "#ffffff",
+    background: "#FFFBF0",
+    surface: "transparent",
+    surfaceHover: "rgba(180, 83, 9, 0.08)",
+    text: "#1F1504",
+    textDimmed: "#4A3415",
+    textSubtle: "#8A7A55",
+    border: "rgba(31, 21, 4, 0.11)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(255, 251, 240, 0.42)",
+    glassBlur: "blur(20px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(31, 21, 4, 0.04), 0px 8px 24px -8px rgba(180, 83, 9, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(31, 21, 4, 0.04), 0 8px 24px -8px rgba(180, 83, 9, 0.12), 0 24px 48px -16px rgba(180, 83, 9, 0.08)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#FBBF24",
+    primaryContrast: "#1A0F02",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "rgba(245, 158, 11, 0.08)",
+    text: "#FFF7E6",
+    textDimmed: "#FCD98C",
+    textSubtle: "#947A55",
+    border: "rgba(245, 158, 11, 0.1)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(14, 9, 2, 0.32)",
+    glassBlur: "blur(14px) saturate(180%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(245, 158, 11, 0.08), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", sans-serif',
+    defaultRadius: "md",
+    headings: {
+      fontFamily: '"Space Grotesk", sans-serif',
+      fontWeight: "600"
+    }
+  }
+};
+var GRAPHITE_DARK = {
+  bgStops: ["rgba(14, 16, 18, 1)", "rgba(8, 9, 11, 1)", "rgba(0, 0, 0, 1)"],
+  paletteA: [156, 163, 175],
+  // gray-400
+  paletteB: [209, 213, 219],
+  // gray-300
+  paletteC: [107, 114, 128],
+  // gray-500
+  lineOpacity: 0.2,
+  haloOpacity: 0.18,
+  coreOpacity: 0.75,
+  compositeOp: "lighter",
+  coreBrightenR: 12,
+  coreBrightenG: 12,
+  coreBrightenB: 12
+};
+var GRAPHITE_LIGHT = {
+  bgStops: ["rgba(248, 249, 250, 1)", "rgba(236, 238, 241, 1)", "rgba(220, 223, 228, 1)"],
+  paletteA: [75, 85, 99],
+  // gray-600
+  paletteB: [55, 65, 81],
+  // gray-700
+  paletteC: [107, 114, 128],
+  // gray-500
+  lineOpacity: 0.22,
+  haloOpacity: 0.12,
+  coreOpacity: 0.65,
+  compositeOp: "source-over",
+  coreBrightenR: -15,
+  coreBrightenG: -15,
+  coreBrightenB: -15
+};
+var graphitePreset = {
+  subtitleFontFamily: '"Space Grotesk", sans-serif',
+  fontImports: [
+    "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
+  ],
+  colors: ["#9CA3AF", "#08090B", "#F8F9FA"],
+  background: /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: GRAPHITE_DARK, lightPalette: GRAPHITE_LIGHT }),
+  light: {
+    primary: "#4B5563",
+    primaryContrast: "#ffffff",
+    background: "#F8F9FA",
+    surface: "transparent",
+    surfaceHover: "rgba(75, 85, 99, 0.08)",
+    text: "#0F1214",
+    textDimmed: "#2E3338",
+    textSubtle: "#6B7280",
+    border: "rgba(15, 18, 20, 0.11)",
+    error: "#DC2626",
+    warning: "#F59E0B",
+    success: "#16A34A",
+    glassBackground: "rgba(248, 249, 250, 0.42)",
+    glassBlur: "blur(20px) saturate(180%)",
+    shadow: "0px 1px 2px rgba(15, 18, 20, 0.04), 0px 8px 24px -8px rgba(75, 85, 99, 0.14)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(15, 18, 20, 0.04), 0 8px 24px -8px rgba(75, 85, 99, 0.12), 0 24px 48px -16px rgba(75, 85, 99, 0.08)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  dark: {
+    primary: "#D1D5DB",
+    primaryContrast: "#0A0B0D",
+    background: "#000000",
+    surface: "transparent",
+    surfaceHover: "rgba(156, 163, 175, 0.08)",
+    text: "#F3F4F6",
+    textDimmed: "#D1D5DB",
+    textSubtle: "#6B7280",
+    border: "rgba(156, 163, 175, 0.1)",
+    error: "#F87171",
+    warning: "#FBBF24",
+    success: "#4ADE80",
+    glassBackground: "rgba(10, 11, 13, 0.3)",
+    glassBlur: "blur(14px) saturate(200%)",
+    shadow: "0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.4)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.04), inset 0 0 0 1px rgba(156, 163, 175, 0.08), 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 48px -18px rgba(0, 0, 0, 0.35)",
+    durationFast: "120ms",
+    durationNormal: "220ms",
+    easing: "cubic-bezier(0.22, 0, 0.1, 1)",
+    destructiveFg: "#ffffff",
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"Inter", sans-serif'
+  },
+  framework: {
+    fontFamily: '"Inter", sans-serif',
+    defaultRadius: "md",
+    headings: {
+      fontFamily: '"Space Grotesk", sans-serif',
+      fontWeight: "600"
+    }
+  }
+};
+
+// src/theme/presets/index.ts
+var PRESETS = {
+  default: {
+    ...defaultPreset,
+    label: "Default",
+    description: "Clean, neutral design system",
+    colors: ["#0099ff", "#080808", "#f2f2f5"]
+  },
+  tactical: {
+    ...tacticalPreset,
+    label: "Tactical",
+    description: "Tactical command center aesthetic",
+    colors: ["#0099ff", "#020304", "#EAEBEE"]
+  },
+  slate: {
+    ...slatePreset,
+    label: "Slate",
+    description: "Industrial precision",
+    colors: ["#7B9EBC", "#0C1016", "#ECEEF0"]
+  },
+  regal: {
+    ...regalPreset,
+    label: "Regal",
+    description: "Regal black and gold aesthetic",
+    colors: ["#D4A843", "#080604", "#F5F0E8"]
+  },
+  aurora: {
+    ...auroraPreset,
+    label: "Aurora",
+    description: "Serene nature-inspired tones",
+    colors: ["#1DE9B6", "#0A1210", "#EFF5F3"]
+  },
+  "rose-gold": {
+    ...roseGoldPreset,
+    label: "Rose Gold",
+    description: "Warm luxury and elegance",
+    colors: ["#E8A598", "#120C0D", "#F4F0EE"]
+  },
+  midnight: {
+    ...midnightPreset,
+    label: "Midnight",
+    description: "Chrome with violet refractions",
+    colors: ["#94A3B8", "#050210", "#F5F3FF"]
+  },
+  ember: {
+    ...emberPreset,
+    label: "Ember",
+    description: "Earthy terracotta warmth",
+    colors: ["#E87B55", "#120E0A", "#F3EFEB"]
+  },
+  nirvana: {
+    ...nirvanaPreset,
+    label: "Nirvana",
+    description: "Warm peach waves and rising motes",
+    colors: ["#f23801", "#000000", "#ffffff"]
+  },
+  wave: {
+    ...wavePreset,
+    label: "Waves",
+    description: "Cool azure waves and rising cyan motes",
+    colors: ["#2563eb", "#050914", "#f5f8fc"]
+  },
+  canopy: {
+    ...canopyPreset,
+    label: "Canopy",
+    description: "Lush forest grounding",
+    colors: ["#4AA860", "#080F0A", "#EDF3EE"]
+  },
+  honey: {
+    ...honeyPreset,
+    label: "Honey",
+    description: "Warm amber optimism",
+    colors: ["#E8A820", "#110E04", "#F5F0E8"]
+  },
+  "cyber-volt": {
+    ...cyberVoltPreset,
+    label: "Cyber-Volt",
+    description: "Neon-soaked sci-fi interface",
+    colors: ["#00E5FF", "#0A0E14", "#E8EDF2"]
+  },
+  "cyber-void": {
+    ...cyberVoidPreset,
+    label: "Cyber-Void",
+    description: "Cold synthetic digital depths",
+    colors: ["#2979FF", "#0A0D14", "#E8ECF2"]
+  },
+  "cyber-punk": {
+    ...cyberPunkPreset,
+    label: "Cyber-Punk",
+    description: "High-voltage violet neon",
+    colors: ["#7C4DFF", "#0E0A1E", "#E9E6F2"]
+  },
+  "cyber-strike": {
+    ...cyberStrikePreset,
+    label: "Cyber-Strike",
+    description: "Aggressive dystopian neon",
+    colors: ["#FF1744", "#140A0C", "#F2E8EA"]
+  },
+  synapse: {
+    ...synapsePreset,
+    label: "Synapse",
+    description: "Cyan neural constellation",
+    colors: ["#0EB5CC", "#020305", "#F0FAFB"]
+  },
+  cortex: {
+    ...cortexPreset,
+    label: "Cortex",
+    description: "Azure cortical constellation",
+    colors: ["#60A5FA", "#02050E", "#F0F6FF"]
+  },
+  graphite: {
+    ...graphitePreset,
+    label: "Graphite",
+    description: "Monochrome carbon lattice",
+    colors: ["#D1D5DB", "#08090B", "#F8F9FA"]
+  },
+  helios: {
+    ...heliosPreset,
+    label: "Helios",
+    description: "Golden stellar network",
+    colors: ["#FBBF24", "#0C0702", "#FFFBF0"]
+  }
+  // canyon: {
+  //   ...canyonPreset,
+  //   label: 'Canyon',
+  //   description: 'Amber topographic drift',
+  //   colors: ['#F59E0B', '#0A0603', '#FDF8F3']
+  // }
+  // abyss: {
+  //   ...abyssPreset,
+  //   label: 'Abyss',
+  //   description: 'Deep ocean authority',
+  //   colors: ['#1090D8', '#050E18', '#EDF1F5']
+  // },
+  // obsidian: {
+  //   ...obsidianPreset,
+  //   label: 'Obsidian',
+  //   description: 'Monochrome precision and clarity',
+  //   colors: ['#A0A0A8', '#0D0D0F', '#F7F7F8']
+  // }
+};
+function getPreset(name, presetsMap) {
+  if (presetsMap) return presetsMap[name] ?? presetsMap["default"] ?? PRESETS.default;
+  return PRESETS[name] ?? PRESETS.default;
+}
+
+// src/theme/cssVariables.ts
+var TOKEN_VAR_MAP = {
+  primary: "--color-primary",
+  primaryContrast: "--color-primary-contrast",
+  background: "--color-background",
+  surface: "--color-surface",
+  surfaceHover: "--color-surface-hover",
+  text: "--color-text",
+  textDimmed: "--color-text-dimmed",
+  textSubtle: "--color-text-subtle",
+  border: "--color-border",
+  error: "--color-error",
+  warning: "--color-warning",
+  success: "--color-success",
+  glassBackground: "--glass-background",
+  glassBlur: "--glass-blur",
+  shadow: "--standard-box-shadow",
+  cardShadow: "--card-shadow",
+  durationFast: "--duration-fast",
+  durationNormal: "--duration-normal",
+  easing: "--easing",
+  destructiveFg: "--color-destructive-fg",
+  fontHeading: "--font-heading",
+  fontSans: "--font-sans"
+};
+var FRAMEWORK_BRIDGE = {
+  "--mantine-color-text": "var(--color-text)",
+  "--mantine-color-body": "var(--color-background)",
+  "--mantine-color-dimmed": "var(--color-text-dimmed)",
+  // Primary color functional variants — used by Tabs, SegmentedControl, Badge, Button, etc.
+  "--mantine-primary-color-filled": "var(--color-primary)",
+  "--mantine-primary-color-filled-hover": "color-mix(in srgb, var(--color-primary) 90%, black)",
+  "--mantine-primary-color-light": "color-mix(in srgb, var(--color-primary) 15%, transparent)",
+  "--mantine-primary-color-light-hover": "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+  "--mantine-primary-color-light-color": "var(--color-primary)",
+  "--mantine-primary-color-contrast": "var(--color-primary-contrast)",
+  // Active/selected state — used by selectable cards, active filters, plan tiers, etc.
+  "--active-border": "1px solid color-mix(in srgb, var(--color-primary) 40%, var(--color-border))",
+  "--active-background": "color-mix(in srgb, var(--color-primary) 8%, var(--color-surface))"
+};
+function shadesToVars(shades) {
+  const vars = {};
+  for (let i = 0; i < shades.length; i++) {
+    vars[`--mantine-color-primary-${i}`] = shades[i];
+  }
+  return vars;
+}
+function presetToVars(tokens) {
+  const result = {};
+  for (const [key, varName] of Object.entries(TOKEN_VAR_MAP)) {
+    const value = tokens[key];
+    if (value) result[varName] = value;
+  }
+  return result;
+}
+function mapTokens(tokens) {
+  if (!tokens) return {};
+  const result = {};
+  for (const [key, varName] of Object.entries(TOKEN_VAR_MAP)) {
+    const value = tokens[key];
+    if (value) result[varName] = value;
+  }
+  return result;
+}
+function createCssVariablesResolver(tokens, preset, presetsMap) {
+  const resolved = getPreset(preset ?? "default", presetsMap);
+  const lightDefaults = presetToVars(resolved.light);
+  const darkDefaults = presetToVars(resolved.dark);
+  const flat = mapTokens(tokens);
+  const light = mapTokens(tokens?.light);
+  const dark = mapTokens(tokens?.dark);
+  const lightPrimary = tokens?.light?.primary ?? tokens?.primary ?? resolved.light.primary;
+  const darkPrimary = tokens?.dark?.primary ?? tokens?.primary ?? resolved.dark.primary;
+  const lightShades = shadesToVars(generateShades(lightPrimary));
+  const darkShades = shadesToVars(generateShades(darkPrimary));
+  return () => ({
+    variables: { ...FRAMEWORK_BRIDGE },
+    light: { ...lightShades, ...lightDefaults, ...flat, ...light },
+    dark: { ...darkShades, ...darkDefaults, ...flat, ...dark }
+  });
+}
+var DEFAULT_SIZE = "sm";
+var glassBase = {
+  backdropFilter: "var(--glass-blur)",
+  WebkitBackdropFilter: "var(--glass-blur)",
+  border: "1px solid var(--color-border)"
+};
+var componentThemes = {
+  Accordion: Accordion.extend({
+    styles: {
+      item: {
+        borderColor: "var(--color-border)"
+      },
+      content: {
+        backgroundColor: "var(--color-surface)"
+      }
+    }
+  }),
+  Button: Button.extend({
+    styles: {
+      root: {
+        transition: `all var(--duration-fast) var(--easing)`
+      }
+    }
+  }),
+  Card: Card.extend({
+    defaultProps: {
+      p: DEFAULT_SIZE
+    },
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)",
+        ...glassBase,
+        boxShadow: "var(--card-shadow)"
+      }
+    }
+  }),
+  // Checkbox styles are in custom.css to support :checked pseudo-selector
+  Divider: Divider.extend({
+    styles: {
+      root: {
+        borderColor: "var(--color-border)"
+      }
+    }
+  }),
+  Code: Code.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Flex: Flex.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  Grid: Grid.extend({
+    defaultProps: {
+      gutter: DEFAULT_SIZE
+    }
+  }),
+  Group: Group.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  HoverCard: HoverCard.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)",
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Input: Input.extend({
+    styles: {
+      input: {
+        backgroundColor: "var(--color-surface)",
+        border: "none",
+        borderBottom: "1px solid var(--color-border)",
+        borderRadius: "0"
+      }
+    }
+  }),
+  Menu: Menu.extend({
+    styles: {
+      dropdown: {
+        background: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Modal: Modal.extend({
+    styles: {
+      content: {
+        backgroundColor: "var(--color-surface)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  }),
+  Notification: Notification.extend({
+    styles: {
+      root: {
+        backgroundColor: "color-mix(in srgb, var(--color-surface) 90%, transparent)",
+        ...glassBase
+      }
+    }
+  }),
+  Popover: Popover.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)",
+        ...glassBase,
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Paper: Paper.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
+        boxShadow: "var(--card-shadow)",
+        padding: `var(--mantine-spacing-${DEFAULT_SIZE})`
+      }
+    }
+  }),
+  ScrollArea: ScrollArea.extend({
+    defaultProps: {
+      scrollbarSize: 8
+    },
+    styles: {
+      scrollbar: {
+        background: "transparent",
+        '&[data-orientation="vertical"]': {
+          width: "8px"
+        },
+        '&[data-orientation="horizontal"]': {
+          height: "8px"
+        }
+      },
+      thumb: {
+        borderRadius: "var(--mantine-radius-default)",
+        background: "color-mix(in srgb, var(--color-text-subtle) 50%, var(--color-border))",
+        "&:hover": {
+          background: "var(--color-text-subtle)"
+        }
+      }
+    }
+  }),
+  SegmentedControl: SegmentedControl.extend({
+    styles: {
+      root: {
+        backgroundColor: "var(--color-surface)"
+      },
+      indicator: {
+        backgroundColor: "var(--color-surface-hover)",
+        boxShadow: "var(--standard-box-shadow)"
+      }
+    }
+  }),
+  Combobox: Combobox.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "red"
+      }
+    }
+  }),
+  Select: Select.extend({
+    styles: {
+      dropdown: {
+        backgroundColor: "var(--color-surface)"
+      }
+    }
+  }),
+  // Switch styles are in custom.css to support [data-checked] attribute selector
+  SimpleGrid: SimpleGrid.extend({
+    defaultProps: {
+      spacing: DEFAULT_SIZE,
+      verticalSpacing: DEFAULT_SIZE
+    }
+  }),
+  Stack: Stack.extend({
+    defaultProps: {
+      gap: DEFAULT_SIZE
+    }
+  }),
+  Table: Table.extend({
+    defaultProps: {
+      highlightOnHover: true
+    },
+    styles: {
+      table: {
+        "--table-border-color": "var(--color-border)",
+        "--table-highlight-on-hover-color": "var(--color-surface-hover)"
+      }
+    }
+  }),
+  Tabs: Tabs.extend({}),
+  Text: Text.extend({
+    styles: {
+      root: {
+        fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+      }
+    }
+  }),
+  // Timeline styles are in custom.css to override color-scheme-specific selectors
+  Tooltip: Tooltip.extend({
+    styles: {
+      tooltip: {
+        backgroundColor: "var(--color-surface)",
+        color: "var(--color-text)",
+        border: "1px solid var(--color-border)"
+      }
+    }
+  })
+  // Pagination styles are in custom.css to support :not([data-active]) selector
+};
+var mantineThemeOverride = createTheme({
+  defaultRadius: "xs",
+  fontFamily: 'Roboto, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+  cursorType: "pointer",
+  spacing: {
+    xs: "0.5rem",
+    sm: "0.75rem",
+    md: "1rem",
+    lg: "1.5rem",
+    xl: "2rem"
+  },
+  radius: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "0.75rem",
+    lg: "1rem",
+    xl: "1.5rem"
+  },
+  fontSizes: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem"
+  },
+  components: componentThemes
+});
+var PresetsContext = createContext(PRESETS);
+var PresetsProvider = PresetsContext.Provider;
+function usePresetsContext() {
+  return useContext(PresetsContext);
+}
+
+export { PRESETS, PresetsProvider, TOKEN_VAR_MAP, componentThemes, createCssVariablesResolver, generateShades, getPreset, glassBase, mantineThemeOverride, usePresetsContext };