@elevasis/ui 2.10.2 → 2.12.0

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

@@ -267,7 +267,7 @@ var cyberVoltPreset = {
     null,
     createElement(CyberBackground, {
       variant: "void",
-      perspectiveGridRadialGlowIntensity: 6,
+      perspectiveGridRadialGlowIntensity: 5,
       perspectiveGridLineIntensity: 70
     }),
     createElement(AmbientBloomGrid, { intensity: 0.09, size: 1.35 })
@@ -301,20 +301,20 @@ var cyberVoltPreset = {
     primary: "#00A8BD",
     primaryContrast: "#001418",
     background: "#050708",
-    surface: "rgba(0, 60, 80, 0.04)",
+    surface: "rgba(0, 60, 80, 0.03)",
     surfaceHover: "rgba(0, 229, 255, 0.06)",
     elevatedSurface: "rgba(16, 19, 21, 0.85)",
     text: "#E0F7FA",
     textDimmed: "#80DEEA",
     textSubtle: "#82BEC8",
-    border: "rgba(0, 229, 255, 0.08)",
+    border: "rgba(0, 229, 255, 0.09)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(11, 19, 25, 0.32)",
+    glassBackground: "rgba(13, 21, 27, 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)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(0, 229, 255, 0.06), 0 4px 4px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.45), 0 14px 28px -10px rgba(0, 0, 0, 0.45), 0 14px 28px -18px rgba(0, 0, 0, 0.25)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -494,7 +494,7 @@ var STYLE = `
   [data-mantine-color-scheme="light"] .chrome-bg-beam-1 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-1) 10%, var(--chrome-beam-1) 90%, transparent 100%);
     transform: rotate(0deg);
-    --chrome-beam-opacity: 0.09;
+    --chrome-beam-opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-2 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-2) 10%, var(--chrome-beam-2) 90%, transparent 100%);
@@ -504,65 +504,43 @@ var STYLE = `
   [data-mantine-color-scheme="light"] .chrome-bg-beam-3 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-3) 10%, var(--chrome-beam-3) 90%, transparent 100%);
     transform: rotate(45deg);
-    --chrome-beam-opacity: 0.09;
+    --chrome-beam-opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-4 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-4) 10%, var(--chrome-beam-4) 90%, transparent 100%);
     transform: rotate(67.5deg);
-    --chrome-beam-opacity: 0.07;
+    --chrome-beam-opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-5 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-5) 10%, var(--chrome-beam-5) 90%, transparent 100%);
     transform: rotate(90deg);
-    --chrome-beam-opacity: 0.09;
+    --chrome-beam-opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-6 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-6) 10%, var(--chrome-beam-6) 90%, transparent 100%);
     transform: rotate(112.5deg);
-    --chrome-beam-opacity: 0.07;
+    --chrome-beam-opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-7 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-7) 10%, var(--chrome-beam-7) 90%, transparent 100%);
     transform: rotate(135deg);
-    --chrome-beam-opacity: 0.09;
+    --chrome-beam-opacity: 0.08;
   }
   [data-mantine-color-scheme="light"] .chrome-bg-beam-8 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-8) 10%, var(--chrome-beam-8) 90%, transparent 100%);
     transform: rotate(157.5deg);
-    --chrome-beam-opacity: 0.07;
+    --chrome-beam-opacity: 0.08;
   }
 
   /* Midnight light mode: reduce beam intensity by one step */
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-1,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-3,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-5,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-7 {
-    --chrome-beam-opacity: 0.08;
-  }
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-2 {
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam {
     --chrome-beam-opacity: 0.07;
   }
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-4,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-6,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-8 {
-    --chrome-beam-opacity: 0.06;
-  }
 
   /* Aurora light mode: reduce beam intensity by one step */
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-1,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-3,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-5,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-7 {
-    --chrome-beam-opacity: 0.08;
-  }
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-2 {
+  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam {
     --chrome-beam-opacity: 0.07;
   }
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-4,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-6,
-  [data-mantine-color-scheme="light"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-8 {
-    --chrome-beam-opacity: 0.06;
-  }
 
   /* Dark mode: screen blend with low opacity over near-black base */
   [data-mantine-color-scheme="dark"] .chrome-bg-beam {
@@ -571,98 +549,62 @@ var STYLE = `
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-1 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-1) 10%, var(--chrome-beam-1) 90%, transparent 100%);
     transform: rotate(0deg);
-    --chrome-beam-opacity: 0.12;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-2 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-2) 10%, var(--chrome-beam-2) 90%, transparent 100%);
     transform: rotate(22.5deg);
-    --chrome-beam-opacity: 0.1;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-3 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-3) 10%, var(--chrome-beam-3) 90%, transparent 100%);
     transform: rotate(45deg);
-    --chrome-beam-opacity: 0.12;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-4 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-4) 10%, var(--chrome-beam-4) 90%, transparent 100%);
     transform: rotate(67.5deg);
-    --chrome-beam-opacity: 0.1;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-5 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-5) 10%, var(--chrome-beam-5) 90%, transparent 100%);
     transform: rotate(90deg);
-    --chrome-beam-opacity: 0.12;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-6 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-6) 10%, var(--chrome-beam-6) 90%, transparent 100%);
     transform: rotate(112.5deg);
-    --chrome-beam-opacity: 0.1;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-7 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-7) 10%, var(--chrome-beam-7) 90%, transparent 100%);
     transform: rotate(135deg);
-    --chrome-beam-opacity: 0.12;
+    --chrome-beam-opacity: 0.11;
   }
   [data-mantine-color-scheme="dark"] .chrome-bg-beam-8 {
     background: linear-gradient(to right, transparent 0%, var(--chrome-beam-8) 10%, var(--chrome-beam-8) 90%, transparent 100%);
     transform: rotate(157.5deg);
-    --chrome-beam-opacity: 0.1;
+    --chrome-beam-opacity: 0.11;
   }
 
   /* Rose-gold dark mode: reduced brightness */
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-1,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-3,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-5,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-7 {
-    --chrome-beam-opacity: 0.07;
-  }
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-2,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-4,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-6,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam-8 {
-    --chrome-beam-opacity: 0.06;
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="rose-gold"] .chrome-bg-beam {
+    --chrome-beam-opacity: 0.065;
   }
 
   /* 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="titanium"] .chrome-bg-beam {
+    --chrome-beam-opacity: 0.09;
   }
 
   /* Aurora dark mode: softer beams to reduce ambient bloom */
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-1,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-3,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-5,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-7 {
-    --chrome-beam-opacity: 0.12;
-  }
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-2,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-4,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-6,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam-8 {
-    --chrome-beam-opacity: 0.09;
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="aurora"] .chrome-bg-beam {
+    --chrome-beam-opacity: 0.10;
   }
 
   /* Midnight dark mode: slightly brighter beams */
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-1,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-3,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-5,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-7 {
-    --chrome-beam-opacity: 0.14;
-  }
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-2,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-4,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-6,
-  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam-8 {
-    --chrome-beam-opacity: 0.11;
+  [data-mantine-color-scheme="dark"] .chrome-bg-root[data-variant="midnight"] .chrome-bg-beam {
+    --chrome-beam-opacity: 0.12;
   }
 
   @keyframes chrome-rotate {
@@ -675,11 +617,13 @@ var STYLE = `
     }
   }
 `;
+var RANDOM_OFFSET = `${-Math.random() * 180}s`;
 function ChromeBackground({ variant, beam }) {
   const style = {
     "--chrome-beam-width": beam?.width ?? "200vmax",
     "--chrome-beam-height": beam?.height ?? "32vmax",
-    "--chrome-beam-intensity": beam?.intensity ?? 1
+    "--chrome-beam-intensity": beam?.intensity ?? 1,
+    "--chrome-animation-delay": RANDOM_OFFSET
   };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
     /* @__PURE__ */ jsx("style", { children: STYLE }),
@@ -705,7 +649,7 @@ var auroraPreset = {
     beam: {
       width: "240vmax",
       height: "30vmax",
-      intensity: 1
+      intensity: 0.85
     }
   }),
   light: {
@@ -774,7 +718,12 @@ var roseGoldPreset = {
     "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" }),
+  background: createElement(ChromeBackground, {
+    variant: "rose-gold",
+    beam: {
+      intensity: 0.85
+    }
+  }),
   light: {
     primary: "#A8695E",
     primaryContrast: "#ffffff",
@@ -845,7 +794,7 @@ var midnightPreset = {
     beam: {
       width: "240vmax",
       height: "30vmax",
-      intensity: 1
+      intensity: 0.85
     }
   }),
   light: {
@@ -918,7 +867,7 @@ var titaniumPreset = {
     beam: {
       width: "260vmax",
       height: "32vmax",
-      intensity: 1.15
+      intensity: 0.95
     }
   }),
   light: {
@@ -1134,7 +1083,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.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)",
+    cardShadow: "inset 0 1px 0 rgba(74, 168, 96, 0.1), inset 0 0 0 1px rgba(74, 168, 96, 0.04), 0 4px 10px rgba(0, 0, 0, 0.45), 0 12px 28px -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)",
@@ -1230,7 +1179,7 @@ var cyberStrikePreset = {
       perspectiveGridRadialGlowIntensity: 4,
       perspectiveGridLineIntensity: 80
     }),
-    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.3 })
+    createElement(AmbientBloomGrid, { intensity: 0.06, size: 1.3 })
   ),
   light: {
     primary: "#D41840",
@@ -1260,7 +1209,7 @@ var cyberStrikePreset = {
   dark: {
     primary: "#D41840",
     primaryContrast: "#ffffff",
-    background: "#060303",
+    background: "#070303",
     surface: "rgba(80, 20, 30, 0.04)",
     surfaceHover: "rgba(212, 24, 64, 0.06)",
     elevatedSurface: "rgba(16, 12, 12, 0.82)",
@@ -1271,10 +1220,10 @@ var cyberStrikePreset = {
     error: "#D41840",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(18, 19, 20, 0.33)",
+    glassBackground: "rgba(19, 20, 21, 0.32)",
     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)",
+    cardShadow: "inset 0 1px 0 rgba(230, 200, 210, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 4px 6px rgba(0, 0, 0, 0.45), 0 10px 24px -10px rgba(0, 0, 0, .6), 0 20px 20px -16px rgba(0, 0, 0, 0.25)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1305,7 +1254,7 @@ var cyberChromePreset = {
       perspectiveGridRadialGlowIntensity: 8,
       perspectiveGridLineIntensity: 80
     }),
-    createElement(AmbientBloomGrid, { intensity: 0.1, size: 1.3 })
+    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.3 })
   ),
   light: {
     primary: "#64748B",
@@ -1342,14 +1291,14 @@ var cyberChromePreset = {
     text: "#E8EEF5",
     textDimmed: "#B4C0CC",
     textSubtle: "#9EABBC",
-    border: "rgba(122, 142, 166, 0.1)",
+    border: "rgba(122, 142, 166, 0.12)",
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(20, 24, 30, 0.3)",
+    glassBackground: "rgba(22, 26, 32, 0.28)",
     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)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.1), 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.45), 0 14px 20px -10px rgba(0, 0, 0, 0.45), 0 24px 28px -18px rgba(0, 0, 0, 0.25)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1426,10 +1375,10 @@ var cyberVoidPreset = {
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(20, 22, 22, 0.25)",
+    glassBackground: "rgba(21, 23, 23, 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.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)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.1), 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.45), 0 14px 28px -10px rgba(0, 0, 0, 0.5), 0 24px 20px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "80ms",
     durationNormal: "160ms",
     easing: "cubic-bezier(0.16, 1, 0.3, 1)",
@@ -1625,25 +1574,54 @@ var LIGHT_PALETTE = {
   coreBrightenG: -10,
   coreBrightenB: -10
 };
+var POOL_SIZE = 140;
+var particlePool = null;
+var randVelocity = () => (Math.random() - 0.5) * 0.28;
+var randRadius = () => Math.random() < 0.12 ? 1.8 + Math.random() * 1.6 : 0.6 + Math.random() * 1.1;
+function ensurePool(width, height) {
+  if (particlePool) {
+    for (const p of particlePool) {
+      p.x = (p.x % width + width) % width;
+      p.y = (p.y % height + height) % height;
+    }
+    return particlePool;
+  }
+  particlePool = Array.from({ length: POOL_SIZE }, () => ({
+    x: Math.random() * width,
+    y: Math.random() * height,
+    vx: randVelocity(),
+    vy: randVelocity(),
+    radius: randRadius(),
+    pulse: Math.random() * Math.PI * 2,
+    pulseSpeed: 8e-3 + Math.random() * 0.018,
+    hueShift: Math.random()
+  }));
+  return particlePool;
+}
 function ConstellationBackground({
   darkPalette = DARK_PALETTE,
   lightPalette = LIGHT_PALETTE,
-  particles = true
+  particles = true,
+  count = 140,
+  scale = 1
 } = {}) {
   const canvasRef = useRef(null);
   const darkPaletteRef = useRef(darkPalette);
   const lightPaletteRef = useRef(lightPalette);
   const showParticlesRef = useRef(particles);
+  const countRef = useRef(count);
+  const scaleRef = useRef(scale);
   darkPaletteRef.current = darkPalette;
   lightPaletteRef.current = lightPalette;
   showParticlesRef.current = particles;
+  countRef.current = count;
+  scaleRef.current = scale;
   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";
@@ -1666,18 +1644,7 @@ function ConstellationBackground({
       ctx.scale(dpr, dpr);
     };
     setSize();
-    const randVelocity = () => (Math.random() - 0.5) * 0.28;
-    const particles2 = 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 pool = ensurePool(width, height);
     const lerpColor = (t) => {
       const { paletteA: A, paletteB: B, paletteC: C } = palette;
       if (t < 0.5) {
@@ -1689,6 +1656,8 @@ function ConstellationBackground({
     };
     const drawFrame = () => {
       palette = readScheme() === "light" ? lightPaletteRef.current : darkPaletteRef.current;
+      const activeCount = Math.min(countRef.current, pool.length);
+      const s = scaleRef.current;
       ctx.clearRect(0, 0, width, height);
       const gradient = ctx.createRadialGradient(
         width / 2,
@@ -1705,7 +1674,7 @@ function ConstellationBackground({
       ctx.fillRect(0, 0, width, height);
       if (!showParticlesRef.current) return;
       ctx.globalCompositeOperation = palette.compositeOp;
-      for (const p of particles2) {
+      for (const p of pool) {
         p.x += p.vx;
         p.y += p.vy;
         p.pulse += p.pulseSpeed;
@@ -1714,10 +1683,10 @@ function ConstellationBackground({
         if (p.y < 0) p.y += height;
         if (p.y > height) p.y -= height;
       }
-      for (let i = 0; i < particles2.length; i++) {
-        for (let j = i + 1; j < particles2.length; j++) {
-          const a = particles2[i];
-          const b = particles2[j];
+      for (let i = 0; i < activeCount; i++) {
+        for (let j = i + 1; j < activeCount; j++) {
+          const a = pool[i];
+          const b = pool[j];
           const dx = a.x - b.x;
           const dy = a.y - b.y;
           const distSq = dx * dx + dy * dy;
@@ -1735,10 +1704,12 @@ function ConstellationBackground({
           }
         }
       }
-      for (const p of particles2) {
+      for (let i = 0; i < activeCount; i++) {
+        const p = pool[i];
         const pulseScale = 0.8 + Math.sin(p.pulse) * 0.25;
         const [r, g, bl] = lerpColor(p.hueShift);
-        const glowRadius = p.radius * 5 * pulseScale;
+        const scaledRadius = p.radius * s;
+        const glowRadius = scaledRadius * 5 * pulseScale;
         const ri = r | 0;
         const gi = g | 0;
         const bi = bl | 0;
@@ -1755,7 +1726,7 @@ function ConstellationBackground({
         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.arc(p.x, p.y, scaledRadius * pulseScale, 0, Math.PI * 2);
         ctx.fill();
       }
       ctx.globalCompositeOperation = "source-over";
@@ -1823,7 +1794,7 @@ var synapsePreset = {
   ],
   colors: ["#22D3EE", "#020305", "#F0FAFB"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { particles: false }),
+    /* @__PURE__ */ jsx(ConstellationBackground, {}),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.12 })
   ] }),
@@ -1926,7 +1897,7 @@ var cortexPreset = {
   ],
   colors: ["#5A78B4", "#02050E", "#F3F5FA"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: CORTEX_DARK, lightPalette: CORTEX_LIGHT, particles: false }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: CORTEX_DARK, lightPalette: CORTEX_LIGHT, count: 80, scale: 0.85 }),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.12 })
   ] }),
@@ -2029,7 +2000,7 @@ var heliosPreset = {
   ],
   colors: ["#D4B456", "#0A0805", "#FAF7F0"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: HELIOS_DARK, lightPalette: HELIOS_LIGHT, particles: false }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: HELIOS_DARK, lightPalette: HELIOS_LIGHT, count: 90, scale: 0.9 }),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.07 })
   ] }),
@@ -2132,7 +2103,7 @@ var graphitePreset = {
   ],
   colors: ["#9CA3AF", "#08090B", "#F8F9FA"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: GRAPHITE_DARK, lightPalette: GRAPHITE_LIGHT, particles: false }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { darkPalette: GRAPHITE_DARK, lightPalette: GRAPHITE_LIGHT, count: 60, scale: 0.7 }),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.1 })
   ] }),
@@ -2571,8 +2542,8 @@ var componentThemes = {
   HoverCard: HoverCard.extend({
     styles: {
       dropdown: {
-        backgroundColor: "var(--color-surface)",
-        border: "1px solid var(--color-border)",
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
         boxShadow: "var(--standard-box-shadow)"
       }
     }
@@ -2590,12 +2561,18 @@ var componentThemes = {
   Menu: Menu.extend({
     styles: {
       dropdown: {
-        background: "var(--color-surface)",
-        border: "1px solid var(--color-border)"
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
+        boxShadow: "var(--standard-box-shadow)"
       }
     }
   }),
   Modal: Modal.extend({
+    defaultProps: {
+      withCloseButton: false,
+      centered: true,
+      padding: "xs"
+    },
     styles: {
       content: {
         backgroundColor: "var(--color-elevated, var(--color-background))",
@@ -2614,7 +2591,7 @@ var componentThemes = {
   Popover: Popover.extend({
     styles: {
       dropdown: {
-        backgroundColor: "var(--color-surface)",
+        backgroundColor: "var(--glass-background)",
         ...glassBase,
         boxShadow: "var(--standard-box-shadow)"
       }
@@ -2713,9 +2690,10 @@ var componentThemes = {
   Tooltip: Tooltip.extend({
     styles: {
       tooltip: {
-        backgroundColor: "var(--color-surface)",
+        backgroundColor: "var(--glass-background)",
+        ...glassBase,
         color: "var(--color-text)",
-        border: "1px solid var(--color-border)"
+        boxShadow: "var(--standard-box-shadow)"
       }
     }
   })