@elevasis/ui 2.9.1 → 2.10.1

package/dist/{chunk-47YILFON.js → chunk-6PNHW4X2.js}

@@ -1,4 +1,4 @@
-import { AppBackground, AmbientBloomGrid, CyberBackground, FloatingMotes, WaveBackground } from './chunk-CYXZHBP4.js';
+import { AppBackground, AmbientBloomGrid, CyberBackground, FloatingMotes, WaveBackground } from './chunk-F4TPY6YL.js';
 import { createElement, Fragment, createContext, useRef, useEffect, useContext } from 'react';
 import { jsxs, Fragment as Fragment$1, 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';
@@ -107,7 +107,7 @@ var defaultPreset = {
     elevatedSurface: "rgba(22, 22, 24, 0.93)",
     text: "#ffffff",
     textDimmed: "#c1c2c5",
-    textSubtle: "#999999",
+    textSubtle: "#ABABAB",
     border: "rgba(255, 255, 255, 0.07)",
     error: "#ff5252",
     warning: "#ff9800",
@@ -160,17 +160,17 @@ var tacticalPreset = {
     primary: "#0099ff",
     primaryContrast: "#ffffff",
     background: "#020203",
-    surface: "rgba(18, 19, 21, 0.25)",
+    surface: "rgba(18, 19, 21, 0.2)",
     surfaceHover: "rgba(32, 33, 36, 0.5)",
     elevatedSurface: "rgba(18, 21, 27, 0.85)",
     text: "#EFF1F4",
     textDimmed: "#B0B8C4",
-    textSubtle: "#98A2B3",
+    textSubtle: "#A5AEC0",
     border: "rgba(136, 144, 160, 0.08)",
     error: "#FF4757",
     warning: "#FFA502",
     success: "#2ED573",
-    glassBackground: "rgba(14, 15, 17, 0.55)",
+    glassBackground: "rgba(15, 16, 18, 0.55)",
     glassBlur: "blur(24px) saturate(170%)",
     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.04), inset 0 0 8px -6px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.3)",
@@ -225,12 +225,12 @@ var regalPreset = {
     primary: "#C0A558",
     primaryContrast: "#0A0A0A",
     background: "#020203",
-    surface: "transparent",
+    surface: "rgba(16, 17, 20, 0)",
     surfaceHover: "rgba(180, 180, 188, 0.08)",
     elevatedSurface: "rgba(16, 16, 19, 0.85)",
     text: "#F0F0F2",
     textDimmed: "#C2C2C4",
-    textSubtle: "#96969A",
+    textSubtle: "#ABABAF",
     border: "rgba(255, 255, 255, 0.06)",
     error: "#E05252",
     warning: "#D4943C",
@@ -265,7 +265,11 @@ var cyberVoltPreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "void", perspectiveGridRadialGlowIntensity: 6 }),
+    createElement(CyberBackground, {
+      variant: "void",
+      perspectiveGridRadialGlowIntensity: 6,
+      perspectiveGridLineIntensity: 70
+    }),
     createElement(AmbientBloomGrid, { intensity: 0.09, size: 1.35 })
   ),
   light: {
@@ -296,8 +300,8 @@ var cyberVoltPreset = {
   dark: {
     primary: "#00A8BD",
     primaryContrast: "#001418",
-    background: "#060809",
-    surface: "transparent",
+    background: "#050708",
+    surface: "rgba(0, 60, 80, 0.04)",
     surfaceHover: "rgba(0, 229, 255, 0.06)",
     elevatedSurface: "rgba(16, 19, 21, 0.85)",
     text: "#E0F7FA",
@@ -307,7 +311,7 @@ var cyberVoltPreset = {
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(10, 18, 24, 0.25)",
+    glassBackground: "rgba(11, 19, 25, 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(0, 229, 255, 0.06), 0 4px 4px rgba(0, 0, 0, 0.2), 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.25)",
@@ -380,18 +384,18 @@ var STYLE = `
     --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(225, 195, 165, 0.4);
-    --chrome-vignette: rgba(44, 23, 8, 0.05);
-    --chrome-beam-1: #D4805A;
-    --chrome-beam-2: #D49468;
-    --chrome-beam-3: #BE6A40;
-    --chrome-beam-4: #D9A888;
-    --chrome-beam-5: #C48848;
-    --chrome-beam-6: #D49468;
-    --chrome-beam-7: #D4805A;
-    --chrome-beam-8: #D9A888;
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="titanium"] {
+    --chrome-base: #F1F2F4;
+    --chrome-origin-glow: rgba(180, 186, 196, 0.45);
+    --chrome-vignette: rgba(24, 25, 28, 0.04);
+    --chrome-beam-1: #8B929C;
+    --chrome-beam-2: #9CA3AF;
+    --chrome-beam-3: #7E858F;
+    --chrome-beam-4: #A8B0BA;
+    --chrome-beam-5: #747C88;
+    --chrome-beam-6: #9CA3AF;
+    --chrome-beam-7: #8B929C;
+    --chrome-beam-8: #A8B0BA;
   }
 
   /* ============ Dark mode variant palettes ============ */
@@ -434,18 +438,18 @@ var STYLE = `
     --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(180, 120, 90, 0.05);
-    --chrome-vignette: rgba(0, 0, 0, 0.4);
-    --chrome-beam-1: #8C4830;
-    --chrome-beam-2: #9C5A3A;
-    --chrome-beam-3: #7E4028;
-    --chrome-beam-4: #94583A;
-    --chrome-beam-5: #A05838;
-    --chrome-beam-6: #8A5034;
-    --chrome-beam-7: #A05F38;
-    --chrome-beam-8: #8A4E38;
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] {
+    --chrome-base: #060607;
+    --chrome-origin-glow: rgba(168, 176, 188, 0.07);
+    --chrome-vignette: rgba(0, 0, 0, 0.35);
+    --chrome-beam-1: #3A4252;
+    --chrome-beam-2: #485264;
+    --chrome-beam-3: #323A4A;
+    --chrome-beam-4: #404A5A;
+    --chrome-beam-5: #4E586A;
+    --chrome-beam-6: #3E4858;
+    --chrome-beam-7: #465062;
+    --chrome-beam-8: #364050;
   }
 
   /* ============ Shared geometry ============ */
@@ -619,19 +623,19 @@ var STYLE = `
     --chrome-beam-opacity: 0.06;
   }
 
-  /* Ember dark mode: softened beams to match calmer terracotta palette */
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-1,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-3,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-5,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-7 {
+  /* Titanium dark mode: softened beams for subtle silver shimmer */
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-1,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-3,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-5,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-7 {
+    --chrome-beam-opacity: 0.10;
+  }
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-2,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-4,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-6,
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="titanium"] .chrome-bg-beam-8 {
     --chrome-beam-opacity: 0.08;
   }
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-2,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-4,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-6,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="ember"] .chrome-bg-beam-8 {
-    --chrome-beam-opacity: 0.06;
-  }
 
   /* Aurora dark mode: softer beams to reduce ambient bloom */
   [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-1,
@@ -733,12 +737,12 @@ var auroraPreset = {
     primary: "#00A88A",
     primaryContrast: "#062E26",
     background: "#080E0D",
-    surface: "transparent",
+    surface: "rgba(18, 28, 24, 0)",
     surfaceHover: "rgba(0, 168, 138, 0.10)",
     elevatedSurface: "rgba(19, 26, 24, 0.85)",
     text: "#E0F2F1",
-    textDimmed: "#80CBC4",
-    textSubtle: "#64B0A8",
+    textDimmed: "#8ED4CC",
+    textSubtle: "#78C0B8",
     border: "rgba(128, 203, 196, 0.09)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -746,7 +750,7 @@ var auroraPreset = {
     glassBackground: "rgba(18, 28, 24, 0.3)",
     glassBlur: "blur(28px) saturate(220%)",
     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.07), inset 0 0 0 1px rgba(128, 203, 196, 0.04), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.42), 0 32px 64px -16px rgba(0, 0, 0, 0.25)",
+    cardShadow: "inset 0 1px 0 rgba(128, 203, 196, 0.18), inset 0 0 0 1px rgba(128, 203, 196, 0.04), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 22px -8px rgba(0, 0, 0, 0.6), 0 32px 34px -16px rgba(0, 0, 0, 0.05)",
     durationFast: "160ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -800,12 +804,12 @@ var roseGoldPreset = {
     primary: "#A56B5E",
     primaryContrast: "#2D1A16",
     background: "#0B0809",
-    surface: "transparent",
+    surface: "rgba(35, 27, 31, 0)",
     surfaceHover: "rgba(165, 107, 94, 0.10)",
     elevatedSurface: "rgba(23, 20, 21, 0.85)",
     text: "#F5E8E6",
     textDimmed: "#D8B8B2",
-    textSubtle: "#B89A94",
+    textSubtle: "#C4AAA4",
     border: "rgba(216, 184, 178, 0.06)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -813,7 +817,7 @@ var roseGoldPreset = {
     glassBackground: "rgba(35, 27, 31, 0.32)",
     glassBlur: "blur(28px) saturate(210%)",
     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.07), inset 0 0 0 1px rgba(216, 184, 178, 0.03), 0 2px 8px rgba(0, 0, 0, 0.25), 0 12px 32px -8px rgba(0, 0, 0, 0.32), 0 32px 64px -16px rgba(0, 0, 0, 0.25)",
+    cardShadow: "inset 0 1px 0 rgba(216, 184, 178, 0.25), inset 0 0 0 1px rgba(216, 184, 178, 0.03), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 22px -8px rgba(0, 0, 0, 0.5), 0 20px 24px -16px rgba(0, 0, 0, 0.03)",
     durationFast: "160ms",
     durationNormal: "300ms",
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
@@ -873,20 +877,20 @@ var midnightPreset = {
     primary: "#7888A8",
     primaryContrast: "#F1F5F9",
     background: "#0A0E18",
-    surface: "transparent",
+    surface: "rgba(138, 130, 169, 0.0)",
     surfaceHover: "rgba(120, 136, 168, 0.09)",
     elevatedSurface: "rgba(19, 24, 36, 0.85)",
     text: "#F1F5F9",
     textDimmed: "#CBD5E1",
-    textSubtle: "#94A3B8",
+    textSubtle: "#A0AEC2",
     border: "rgba(193, 203, 215, 0.07)",
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(18, 20, 29, 0.25)",
+    glassBackground: "rgba(18, 20, 29, 0.3)",
     glassBlur: "blur(18px) saturate(210%)",
     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.02), inset 0 0 0 1px rgba(203, 213, 225, 0.01), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.35), 0 32px 64px -16px rgba(0, 0, 0, 0.12)",
+    cardShadow: "inset 0 1px 0 rgba(203, 213, 225, 0.18), inset 0 0 0 1px rgba(203, 213, 225, 0.01), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 22px -8px rgba(0, 0, 0, 0.5), 0 20px 14px -12px rgba(0, 0, 0, 0.15)",
     durationFast: "160ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -903,76 +907,75 @@ var midnightPreset = {
     }
   }
 };
-var emberPreset = {
-  subtitleFontFamily: '"Source Serif 4", serif',
+var titaniumPreset = {
+  subtitleFontFamily: '"Space Grotesk", sans-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"
+    "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap",
+    "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap"
   ],
   background: createElement(ChromeBackground, {
-    variant: "ember",
+    variant: "titanium",
     beam: {
-      width: "240vmax",
-      height: "33vmax",
-      intensity: 1.1
+      width: "260vmax",
+      height: "32vmax",
+      intensity: 1.15
     }
   }),
   light: {
-    primary: "#C26040",
+    primary: "#6B7280",
     primaryContrast: "#ffffff",
-    background: "#F3EFEB",
+    background: "#F1F2F4",
     surface: "transparent",
-    surfaceHover: "rgba(212, 96, 58, 0.08)",
+    surfaceHover: "rgba(107, 114, 128, 0.08)",
     elevatedSurface: "rgba(255, 255, 255, 0.85)",
-    text: "#2C1708",
-    textDimmed: "#5E4A3A",
-    textSubtle: "#8D7A6A",
-    border: "rgba(44, 23, 8, 0.08)",
+    text: "#18191C",
+    textDimmed: "#4B5058",
+    textSubtle: "#808890",
+    border: "rgba(24, 25, 28, 0.08)",
     error: "#DC2626",
     warning: "#F59E0B",
     success: "#16A34A",
-    glassBackground: "rgba(249, 246, 243, 0.55)",
+    glassBackground: "rgba(241, 242, 244, 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)",
+    shadow: "0px 1px 2px rgba(24, 25, 28, 0.04), 0px 8px 24px -8px rgba(107, 114, 128, 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(24, 25, 28, 0.05), 0 10px 28px -6px rgba(24, 25, 28, 0.08), 0 30px 56px -14px rgba(107, 114, 128, 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'
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"DM Sans", sans-serif'
   },
   dark: {
-    primary: "#D07055",
-    primaryContrast: "#1A0E08",
-    background: "#13100F",
-    surface: "transparent",
-    surfaceHover: "rgba(208, 112, 85, 0.10)",
-    elevatedSurface: "rgba(30, 26, 23, 0.85)",
-    text: "#F5EDE6",
-    textDimmed: "#D4B9A0",
-    textSubtle: "#B8A090",
-    border: "rgba(212, 185, 160, 0.09)",
+    primary: "#A8B0BC",
+    primaryContrast: "#0E0F11",
+    background: "#0C0D0F",
+    surface: "rgba(20, 22, 26, 0)",
+    surfaceHover: "rgba(168, 176, 188, 0.10)",
+    elevatedSurface: "rgba(22, 24, 30, 0.85)",
+    text: "#ECF0F4",
+    textDimmed: "#BCC4CE",
+    textSubtle: "#A5AEB8",
+    border: "rgba(188, 196, 206, 0.09)",
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(35, 29, 25, 0.27)",
-    glassBlur: "blur(18px) saturate(175%)",
+    glassBackground: "rgba(20, 22, 26, 0.3)",
+    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(232, 123, 85, 0.12), inset 0 0 0 1px rgba(232, 123, 85, 0.05), 0 2px 8px rgba(0, 0, 0, 0.2), 0 12px 32px -8px rgba(0, 0, 0, 0.45), 0 32px 44px -16px rgba(0, 0, 0, 0.15)",
+    cardShadow: "inset 0 1px 0 rgba(156, 163, 175, 0.2), inset 0 0 0 1px rgba(156, 163, 175, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 22px -8px rgba(0, 0, 0, 0.6), 0 20px 44px -16px rgba(0, 0, 0, 0.03)",
     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'
+    fontHeading: '"Space Grotesk", sans-serif',
+    fontSans: '"DM Sans", sans-serif'
   },
   framework: {
-    fontFamily: '"Source Sans 3", sans-serif',
+    fontFamily: '"DM Sans", sans-serif',
     defaultRadius: "xl",
     headings: {
-      fontFamily: '"Libre Baskerville", serif',
+      fontFamily: '"Space Grotesk", sans-serif',
       fontWeight: "700"
     }
   }
@@ -1118,11 +1121,11 @@ var canopyPreset = {
     primary: "#4AA860",
     primaryContrast: "#ffffff",
     background: "#060A07",
-    surface: "transparent",
+    surface: "rgba(27, 30, 25, 0)",
     surfaceHover: "rgba(74, 168, 96, 0.10)",
     elevatedSurface: "rgba(18, 22, 19, 0.85)",
     text: "#E0F0E4",
-    textDimmed: "#98C8A4",
+    textDimmed: "#A4D0AE",
     textSubtle: "#98B8A8",
     border: "rgba(152, 200, 164, 0.09)",
     error: "#EF5350",
@@ -1131,7 +1134,7 @@ var canopyPreset = {
     glassBackground: "rgba(27, 30, 25, 0.3)",
     glassBlur: "blur(12px) 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.06), 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.2)",
+    cardShadow: "inset 0 1px 0 rgba(74, 168, 96, 0.1), inset 0 0 0 1px rgba(74, 168, 96, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 22px -8px rgba(0, 0, 0, 0.5), 0 12px 24px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -1222,8 +1225,12 @@ var cyberStrikePreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "strike", perspectiveGridRadialGlowIntensity: 6 }),
-    createElement(AmbientBloomGrid, { intensity: 0.08, size: 1.4 })
+    createElement(CyberBackground, {
+      variant: "strike",
+      perspectiveGridRadialGlowIntensity: 4,
+      perspectiveGridLineIntensity: 80
+    }),
+    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.3 })
   ),
   light: {
     primary: "#D41840",
@@ -1253,19 +1260,19 @@ var cyberStrikePreset = {
   dark: {
     primary: "#D41840",
     primaryContrast: "#ffffff",
-    background: "#080606",
-    surface: "transparent",
+    background: "#060303",
+    surface: "rgba(80, 20, 30, 0.04)",
     surfaceHover: "rgba(212, 24, 64, 0.06)",
     elevatedSurface: "rgba(16, 12, 12, 0.82)",
     text: "#FAE0E4",
     textDimmed: "#F0A0B0",
     textSubtle: "#C99CA4",
-    border: "rgba(230, 165, 170, 0.14)",
+    border: "rgba(230, 165, 170, 0.09)",
     error: "#D41840",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(18, 19, 20, 0.25)",
-    glassBlur: "blur(14px) saturate(180%)",
+    glassBackground: "rgba(18, 19, 20, 0.33)",
+    glassBlur: "blur(16px) saturate(190%)",
     shadow: "0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -8px rgba(0, 0, 0, 0.5), 0 20px 48px -16px rgba(0, 0, 0, 0.4)",
     cardShadow: "inset 0 1px 0 rgba(230, 200, 210, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 4px 6px rgba(0, 0, 0, 0.4), 0 10px 24px -10px rgba(0, 0, 0, .6), 0 28px 24px -16px rgba(0, 0, 0, 0.12)",
     durationFast: "80ms",
@@ -1293,7 +1300,11 @@ var cyberChromePreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "chrome", perspectiveGridRadialGlowIntensity: 12 }),
+    createElement(CyberBackground, {
+      variant: "chrome",
+      perspectiveGridRadialGlowIntensity: 8,
+      perspectiveGridLineIntensity: 80
+    }),
     createElement(AmbientBloomGrid, { intensity: 0.1, size: 1.3 })
   ),
   light: {
@@ -1324,18 +1335,18 @@ var cyberChromePreset = {
   dark: {
     primary: "#7A8EA6",
     primaryContrast: "#0B0E12",
-    background: "#020305",
-    surface: "transparent",
+    background: "#030406",
+    surface: "rgba(20, 24, 30, 0)",
     surfaceHover: "rgba(122, 142, 166, 0.09)",
     elevatedSurface: "rgba(16, 20, 26, 0.82)",
     text: "#E8EEF5",
-    textDimmed: "#A8B6C4",
-    textSubtle: "#8A98AC",
-    border: "rgba(122, 142, 166, 0.14)",
+    textDimmed: "#B4C0CC",
+    textSubtle: "#9EABBC",
+    border: "rgba(122, 142, 166, 0.1)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(18, 22, 28, 0.25)",
+    glassBackground: "rgba(20, 24, 30, 0.3)",
     glassBlur: "blur(12px) saturate(185%)",
     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.03), inset 0 0 0 1px rgba(122, 142, 166, 0.04), 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)",
@@ -1369,7 +1380,11 @@ var cyberVoidPreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(CyberBackground, { variant: "void", perspectiveGridRadialGlowIntensity: 6 }),
+    createElement(CyberBackground, {
+      variant: "void",
+      perspectiveGridRadialGlowIntensity: 6,
+      perspectiveGridLineIntensity: 70
+    }),
     createElement(AmbientBloomGrid, { intensity: 0.09, size: 1.35 })
   ),
   light: {
@@ -1401,20 +1416,20 @@ var cyberVoidPreset = {
     primary: "#2468E0",
     primaryContrast: "#ffffff",
     background: "#050709",
-    surface: "transparent",
+    surface: "rgba(30, 55, 120, 0.02)",
     surfaceHover: "rgba(36, 104, 224, 0.08)",
     elevatedSurface: "rgba(16, 19, 24, 0.85)",
     text: "#E0EAFA",
     textDimmed: "#99BBEE",
-    textSubtle: "#8AACCE",
+    textSubtle: "#98B8D4",
     border: "rgba(36, 104, 224, 0.17)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(16, 18, 18, 0.25)",
-    glassBlur: "blur(12px) saturate(180%)",
+    glassBackground: "rgba(20, 22, 22, 0.25)",
+    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(36, 104, 224, 0.06), 0 4px 4px rgba(0, 0, 0, 0.3), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 20px -16px rgba(0, 0, 0, 0.05)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(36, 104, 224, 0.06), 0 4px 4px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 24px 20px -16px rgba(0, 0, 0, 0.05)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1479,12 +1494,12 @@ var nirvanaPreset = {
     primary: "#f23801",
     primaryContrast: "#ffffff",
     background: "#080605",
-    surface: "transparent",
+    surface: "rgba(26, 26, 28, 0)",
     surfaceHover: "rgba(242, 56, 1, 0.10)",
     elevatedSurface: "rgba(20, 17, 15, 0.85)",
     text: "#ffffff",
     textDimmed: "#c8ccd0",
-    textSubtle: "#A2A8AE",
+    textSubtle: "#AEB4BA",
     border: "rgba(255, 255, 255, 0.07)",
     error: "#ff5252",
     warning: "#ff9800",
@@ -1492,7 +1507,7 @@ var nirvanaPreset = {
     glassBackground: "rgba(26, 26, 28, 0.28)",
     glassBlur: "blur(18px) saturate(187%)",
     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.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 4px 14px -2px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.3), 0 30px 30px -16px rgba(0, 0, 0, 0.2)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.13), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 4px 14px -2px rgba(0, 0, 0, 0.5), 0 12px 22px -8px rgba(0, 0, 0, 0.52), 0 16px 20px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "250ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -1547,20 +1562,20 @@ var wavePreset = {
     primary: "#4A90E8",
     primaryContrast: "#000000",
     background: "#030507",
-    surface: "transparent",
+    surface: "rgba(19, 23, 33, 0)",
     surfaceHover: "rgba(74, 144, 232, 0.10)",
     elevatedSurface: "rgba(16, 19, 22, 0.85)",
     text: "#f1f5f9",
     textDimmed: "#cbd5e1",
-    textSubtle: "#94a3b8",
+    textSubtle: "#a0aec2",
     border: "rgba(148, 163, 184, 0.09)",
     error: "#f87171",
     warning: "#fbbf24",
     success: "#4ade80",
-    glassBackground: "rgba(19, 23, 33, 0.3)",
-    glassBlur: "blur(16px) saturate(180%)",
+    glassBackground: "rgba(17, 21, 31, 0.31)",
+    glassBlur: "blur(12px) saturate(180%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.3), 0px 12px 32px -8px rgba(0, 0, 0, 0.4)",
-    cardShadow: "inset 0 1px 0 rgba(148, 197, 255, 0.03), inset 0 0 0 1px rgba(148, 197, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.2)",
+    cardShadow: "inset 0 1px 0 rgba(148, 197, 255, 0.15), inset 0 0 0 1px rgba(148, 197, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.4), 0 12px 18px -8px rgba(0, 0, 0, 0.5), 0 20px 24px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "250ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -1841,7 +1856,7 @@ var synapsePreset = {
     primary: "#0A8A9E",
     primaryContrast: "#ffffff",
     background: "#333333",
-    surface: "transparent",
+    surface: "rgba(10, 16, 20, 0)",
     surfaceHover: "rgba(34, 211, 238, 0.06)",
     elevatedSurface: "rgba(18, 30, 34, 0.78)",
     text: "#ECFEFF",
@@ -1944,12 +1959,12 @@ var cortexPreset = {
     primary: "#6282A8",
     primaryContrast: "#F1F5F9",
     background: "#000000",
-    surface: "transparent",
+    surface: "rgba(10, 14, 20, 0)",
     surfaceHover: "rgba(98, 130, 168, 0.09)",
     elevatedSurface: "rgba(12, 18, 32, 0.82)",
     text: "#EBF4FF",
     textDimmed: "#BFD9FF",
-    textSubtle: "#8AAAC8",
+    textSubtle: "#98B6D0",
     border: "rgba(148, 163, 184, 0.09)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -2046,13 +2061,13 @@ var heliosPreset = {
   dark: {
     primary: "#D4B456",
     primaryContrast: "#1A1505",
-    background: "#0A0805",
-    surface: "transparent",
+    background: "#0F0D0A",
+    surface: "rgba(28, 24, 16, 0)",
     surfaceHover: "rgba(212, 180, 86, 0.07)",
     elevatedSurface: "rgba(22, 20, 14, 0.85)",
     text: "#FFF8E1",
     textDimmed: "#E8D4A0",
-    textSubtle: "#B8AC85",
+    textSubtle: "#C4BA98",
     border: "rgba(216, 200, 160, 0.08)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -2060,7 +2075,7 @@ var heliosPreset = {
     glassBackground: "rgba(28, 24, 16, 0.18)",
     glassBlur: "blur(18px) saturate(170%)",
     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(240, 220, 170, 0.06), inset 0 0 0 1px rgba(216, 200, 160, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.23)",
+    cardShadow: "inset 0 1px 0 rgba(240, 220, 170, 0.06), inset 0 0 0 1px rgba(216, 200, 160, 0.05), 0 1px 2px rgba(0, 0, 0, 0.5), 0 4px 10px rgba(0, 0, 0, 0.5), 0 14px 28px -10px rgba(0, 0, 0, 0.5), 0 24px 28px -18px rgba(0, 0, 0, 0.03)",
     durationFast: "120ms",
     durationNormal: "220ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -2150,12 +2165,12 @@ var graphitePreset = {
     primary: "#8D96A3",
     primaryContrast: "#0A0B0D",
     background: "#000000",
-    surface: "transparent",
+    surface: "rgba(26, 30, 36, 0)",
     surfaceHover: "rgba(156, 163, 175, 0.08)",
     elevatedSurface: "rgba(14, 15, 16, 0.85)",
     text: "#F3F4F6",
     textDimmed: "#D1D5DB",
-    textSubtle: "#949BA6",
+    textSubtle: "#A8B0B9",
     border: "rgba(156, 163, 175, 0.07)",
     error: "#F87171",
     warning: "#FBBF24",
@@ -2220,7 +2235,7 @@ var quarryPreset = {
     primary: "#8B939D",
     primaryContrast: "#101215",
     background: "#07080A",
-    surface: "transparent",
+    surface: "rgba(22, 25, 30, 0)",
     surfaceHover: "rgba(139, 147, 157, 0.08)",
     elevatedSurface: "rgba(18, 20, 23, 0.85)",
     text: "#E8EBEF",
@@ -2233,7 +2248,7 @@ var quarryPreset = {
     glassBackground: "rgba(22, 25, 30, 0.36)",
     glassBlur: "blur(18px) saturate(160%)",
     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(139, 147, 157, 0.06), inset 0 0 0 1px rgba(139, 147, 157, 0.03), 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.25)",
+    cardShadow: "inset 0 1px 0 rgba(139, 147, 157, 0.25), inset 0 0 0 1px rgba(139, 147, 157, 0.03), 0 2px 8px rgba(0, 0, 0, 0.6), 0 12px 22px -8px rgba(0, 0, 0, 0.6), 0 12px 24px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "150ms",
     durationNormal: "280ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -2289,18 +2304,18 @@ var PRESETS = {
     description: "Serene nature-inspired tones",
     colors: ["#1DE9B6", "#0A1210", "#EFF5F3"]
   },
+  titanium: {
+    ...titaniumPreset,
+    label: "Titanium",
+    description: "Silvery grey chrome refraction",
+    colors: ["#A8B0BC", "#0B0C0E", "#F1F2F4"]
+  },
   "rose-gold": {
     ...roseGoldPreset,
     label: "Rose Gold",
     description: "Warm luxury and elegance",
     colors: ["#E8A598", "#120C0D", "#F4F0EE"]
   },
-  ember: {
-    ...emberPreset,
-    label: "Ember",
-    description: "Earthy terracotta warmth",
-    colors: ["#E87B55", "#120E0A", "#F3EFEB"]
-  },
   wave: {
     ...wavePreset,
     label: "Waves",
@@ -2652,7 +2667,7 @@ var componentThemes = {
   Combobox: Combobox.extend({
     styles: {
       dropdown: {
-        backgroundColor: "red"
+        backgroundColor: "var(--color-surface)"
       }
     }
   }),