@elevasis/ui 2.11.0 → 2.13.0

package/dist/{chunk-24UMQV5B.js → chunk-R73EHHPN.js}

@@ -1,4 +1,4 @@
-import { AppBackground, AmbientBloomGrid, CyberBackground, FloatingMotes, WaveBackground } from './chunk-F4TPY6YL.js';
+import { AppBackground, AmbientBloomGrid, CyberBackground, FloatingMotes, WaveBackground } from './chunk-WLOQ4IBG.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';
@@ -108,14 +108,14 @@ var defaultPreset = {
     text: "#ffffff",
     textDimmed: "#c1c2c5",
     textSubtle: "#ABABAB",
-    border: "rgba(255, 255, 255, 0.07)",
+    border: "rgba(255, 255, 255, 0.06)",
     error: "#ff5252",
     warning: "#ff9800",
     success: "#4caf50",
     glassBackground: "rgba(15, 15, 17, 0.55)",
     glassBlur: "blur(22px) saturate(160%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 8px 24px -8px rgba(0, 0, 0, 0.5), 0px 20px 48px -16px rgba(0, 0, 0, 0.35)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.02), inset 0 0 0 1px rgba(255, 255, 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.3)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 64px -16px rgba(0, 0, 0, 0.3)",
     durationFast: "150ms",
     durationNormal: "250ms",
     easing: "cubic-bezier(0.4, 0, 0.2, 1)",
@@ -128,7 +128,10 @@ var tacticalPreset = {
   background: createElement(
     Fragment,
     null,
-    createElement(AppBackground),
+    createElement(AppBackground, {
+      gridGlowColor: "color-mix(in srgb, #5A6070 30%, transparent)",
+      gridGlowIntensity: 50
+    }),
     createElement(AmbientBloomGrid, { intensity: 0.07, color: "#5A6070", size: 1.2 })
   ),
   light: {
@@ -173,7 +176,7 @@ var tacticalPreset = {
     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)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 8px -6px rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.5), 0 22px 24px -16px rgba(0, 0, 0, 0.3)",
     durationFast: "100ms",
     durationNormal: "180ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -225,7 +228,7 @@ var regalPreset = {
     primary: "#C0A558",
     primaryContrast: "#0A0A0A",
     background: "#020203",
-    surface: "rgba(16, 17, 20, 0)",
+    surface: "rgba(16, 17, 20, .2)",
     surfaceHover: "rgba(180, 180, 188, 0.08)",
     elevatedSurface: "rgba(16, 16, 19, 0.85)",
     text: "#F0F0F2",
@@ -238,7 +241,7 @@ var regalPreset = {
     glassBackground: "rgba(16, 17, 20, 0.45)",
     glassBlur: "blur(18px) saturate(180%)",
     shadow: "0px 1px 2px rgba(0, 0, 0, 0.5), 0px 8px 24px -8px rgba(0, 0, 0, 0.5), 0px 20px 48px -16px rgba(0, 0, 0, 0.35)",
-    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 2px 8px rgba(0, 0, 0, 0.3), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 40px -16px rgba(0, 0, 0, 0.2)",
+    cardShadow: "inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.01), 0 2px 8px rgba(0, 0, 0, 0.5), 0 12px 32px -8px rgba(0, 0, 0, 0.4), 0 32px 40px -16px rgba(0, 0, 0, 0.2)",
     durationFast: "180ms",
     durationNormal: "320ms",
     easing: "cubic-bezier(0.25, 0.1, 0.25, 1)",
@@ -267,7 +270,7 @@ var cyberVoltPreset = {
     null,
     createElement(CyberBackground, {
       variant: "void",
-      perspectiveGridRadialGlowIntensity: 6,
+      perspectiveGridRadialGlowIntensity: 5,
       perspectiveGridLineIntensity: 70
     }),
     createElement(AmbientBloomGrid, { intensity: 0.09, size: 1.35 })
@@ -300,21 +303,21 @@ var cyberVoltPreset = {
   dark: {
     primary: "#00A8BD",
     primaryContrast: "#001418",
-    background: "#050708",
-    surface: "rgba(0, 60, 80, 0.04)",
+    background: "#040607",
+    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)",
@@ -823,8 +826,8 @@ var midnightPreset = {
     fontSans: '"Inter", sans-serif'
   },
   dark: {
-    primary: "#7888A8",
-    primaryContrast: "#F1F5F9",
+    primary: "#4E6288",
+    primaryContrast: "#ffffff",
     background: "#0A0E18",
     surface: "rgba(138, 130, 169, 0.0)",
     surfaceHover: "rgba(120, 136, 168, 0.09)",
@@ -867,11 +870,11 @@ var titaniumPreset = {
     beam: {
       width: "260vmax",
       height: "32vmax",
-      intensity: 0.85
+      intensity: 0.95
     }
   }),
   light: {
-    primary: "#6B7280",
+    primary: "#4A5260",
     primaryContrast: "#ffffff",
     background: "#F1F2F4",
     surface: "transparent",
@@ -896,8 +899,8 @@ var titaniumPreset = {
     fontSans: '"DM Sans", sans-serif'
   },
   dark: {
-    primary: "#A8B0BC",
-    primaryContrast: "#0E0F11",
+    primary: "#5A6472",
+    primaryContrast: "#ffffff",
     background: "#0C0D0F",
     surface: "rgba(20, 22, 26, 0)",
     surfaceHover: "rgba(168, 176, 188, 0.10)",
@@ -1083,7 +1086,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)",
@@ -1149,7 +1152,7 @@ var slatePreset = {
     glassBackground: "rgba(14, 17, 22, 0.58)",
     glassBlur: "blur(22px) 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(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)",
+    cardShadow: "inset 0 1px 0 rgba(123, 158, 188, 0.1), inset 0 0 0 1px rgba(123, 158, 188, 0.04), 0 2px 8px rgba(0, 0, 0, 0.5), 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)",
@@ -1177,9 +1180,9 @@ var cyberStrikePreset = {
     createElement(CyberBackground, {
       variant: "strike",
       perspectiveGridRadialGlowIntensity: 4,
-      perspectiveGridLineIntensity: 80
+      perspectiveGridLineIntensity: 55
     }),
-    createElement(AmbientBloomGrid, { intensity: 0.07, size: 1.3 })
+    createElement(AmbientBloomGrid, { intensity: 0.06, size: 1.3 })
   ),
   light: {
     primary: "#D41840",
@@ -1210,20 +1213,20 @@ var cyberStrikePreset = {
     primary: "#D41840",
     primaryContrast: "#ffffff",
     background: "#060303",
-    surface: "rgba(80, 20, 30, 0.04)",
+    surface: "rgba(80, 20, 30, 0.06)",
     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.09)",
+    border: "rgba(230, 165, 170, 0.12)",
     error: "#D41840",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(18, 19, 20, 0.33)",
+    glassBackground: "rgba(18, 19, 20, 0.36)",
     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)",
@@ -1254,7 +1257,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",
@@ -1291,14 +1294,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)",
     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)",
@@ -1364,8 +1367,8 @@ var cyberVoidPreset = {
   dark: {
     primary: "#2468E0",
     primaryContrast: "#ffffff",
-    background: "#050709",
-    surface: "rgba(30, 55, 120, 0.02)",
+    background: "#040608",
+    surface: "rgba(30, 55, 130, 0.04)",
     surfaceHover: "rgba(36, 104, 224, 0.08)",
     elevatedSurface: "rgba(16, 19, 24, 0.85)",
     text: "#E0EAFA",
@@ -1375,10 +1378,10 @@ var cyberVoidPreset = {
     error: "#FF1744",
     warning: "#FF9100",
     success: "#00E676",
-    glassBackground: "rgba(20, 22, 22, 0.25)",
+    glassBackground: "rgba(19, 21, 21, 0.34)",
     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)",
@@ -1574,25 +1577,57 @@ 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,
+  brightness = 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);
+  const brightnessRef = useRef(brightness);
   darkPaletteRef.current = darkPalette;
   lightPaletteRef.current = lightPalette;
   showParticlesRef.current = particles;
+  countRef.current = count;
+  scaleRef.current = scale;
+  brightnessRef.current = brightness;
   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";
@@ -1615,18 +1650,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) {
@@ -1638,6 +1662,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,
@@ -1653,8 +1679,12 @@ function ConstellationBackground({
       ctx.fillStyle = gradient;
       ctx.fillRect(0, 0, width, height);
       if (!showParticlesRef.current) return;
+      const br = brightnessRef.current;
+      const lineOpacity = palette.lineOpacity * br;
+      const haloOpacity = palette.haloOpacity * br;
+      const coreOpacity = palette.coreOpacity * br;
       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;
@@ -1663,17 +1693,17 @@ 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;
           if (distSq < CONNECTION_DISTANCE * CONNECTION_DISTANCE) {
             const dist = Math.sqrt(distSq);
             const t = 1 - dist / CONNECTION_DISTANCE;
-            const opacity = t * t * palette.lineOpacity;
+            const opacity = t * t * lineOpacity;
             const [r, g, bl] = lerpColor((a.hueShift + b.hueShift) / 2);
             ctx.beginPath();
             ctx.strokeStyle = `rgba(${r | 0}, ${g | 0}, ${bl | 0}, ${opacity})`;
@@ -1684,16 +1714,18 @@ 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;
         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(0, `rgba(${ri}, ${gi}, ${bi}, ${haloOpacity})`);
+        haloGradient.addColorStop(0.4, `rgba(${ri}, ${gi}, ${bi}, ${haloOpacity * 0.35})`);
         haloGradient.addColorStop(1, `rgba(${ri}, ${gi}, ${bi}, 0)`);
         ctx.fillStyle = haloGradient;
         ctx.beginPath();
@@ -1702,9 +1734,9 @@ function ConstellationBackground({
         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.fillStyle = `rgba(${cr}, ${cg}, ${cb}, ${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";
@@ -1772,7 +1804,7 @@ var synapsePreset = {
   ],
   colors: ["#22D3EE", "#020305", "#F0FAFB"],
   background: /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx(ConstellationBackground, { particles: false }),
+    /* @__PURE__ */ jsx(ConstellationBackground, { count: 35, brightness: 1 }),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.12 })
   ] }),
@@ -1843,9 +1875,9 @@ var CORTEX_DARK = {
   // lighter slate-blue
   paletteC: [60, 130, 175],
   // muted teal-blue
-  lineOpacity: 0.22,
-  haloOpacity: 0.22,
-  coreOpacity: 0.8,
+  lineOpacity: 0.42,
+  haloOpacity: 0.4,
+  coreOpacity: 0.92,
   compositeOp: "lighter",
   coreBrightenR: 10,
   coreBrightenG: 15,
@@ -1875,7 +1907,16 @@ 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: 35,
+        scale: 0.85,
+        brightness: 1
+      }
+    ),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.12 })
   ] }),
@@ -1905,10 +1946,10 @@ var cortexPreset = {
     fontSans: '"Inter", sans-serif'
   },
   dark: {
-    primary: "#6282A8",
-    primaryContrast: "#F1F5F9",
+    primary: "#3F5C84",
+    primaryContrast: "#ffffff",
     background: "#000000",
-    surface: "rgba(10, 14, 20, 0)",
+    surface: "rgba(12, 16, 22, 0.04)",
     surfaceHover: "rgba(98, 130, 168, 0.09)",
     elevatedSurface: "rgba(12, 18, 32, 0.82)",
     text: "#EBF4FF",
@@ -1918,10 +1959,10 @@ var cortexPreset = {
     error: "#F87171",
     warning: "#FBBF24",
     success: "#4ADE80",
-    glassBackground: "rgba(10, 14, 20, 0.18)",
+    glassBackground: "rgba(12, 16, 22, 0.18)",
     glassBlur: "blur(15px) saturate(195%)",
     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(180, 200, 230, 0.04), inset 0 0 0 1px rgba(148, 163, 184, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.3), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 48px -18px rgba(0, 0, 0, 0.25)",
+    cardShadow: "inset 0 1px 0 rgba(180, 200, 230, 0.1), inset 0 0 0 1px rgba(148, 163, 184, 0.04), 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 10px rgba(0, 0, 0, 0.35), 0 14px 28px -10px rgba(0, 0, 0, 0.4), 0 24px 28px -16px rgba(0, 0, 0, 0.25)",
     durationFast: "120ms",
     durationNormal: "220ms",
     easing: "cubic-bezier(0.22, 0, 0.1, 1)",
@@ -1946,9 +1987,9 @@ var HELIOS_DARK = {
   // pale warm yellow
   paletteC: [205, 180, 110],
   // muted honey (not brown)
-  lineOpacity: 0.22,
-  haloOpacity: 0.22,
-  coreOpacity: 0.8,
+  lineOpacity: 0.38,
+  haloOpacity: 0.36,
+  coreOpacity: 0.9,
   compositeOp: "lighter",
   coreBrightenR: 25,
   coreBrightenG: 22,
@@ -1978,7 +2019,16 @@ 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: 35,
+        scale: 0.9,
+        brightness: 1
+      }
+    ),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.07 })
   ] }),
@@ -2049,9 +2099,9 @@ var GRAPHITE_DARK = {
   // gray-300
   paletteC: [107, 114, 128],
   // gray-500
-  lineOpacity: 0.2,
-  haloOpacity: 0.18,
-  coreOpacity: 0.75,
+  lineOpacity: 0.52,
+  haloOpacity: 0.48,
+  coreOpacity: 0.94,
   compositeOp: "lighter",
   coreBrightenR: 12,
   coreBrightenG: 12,
@@ -2081,7 +2131,16 @@ 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: 35,
+        scale: 0.7,
+        brightness: 1
+      }
+    ),
     /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(AmbientBloom, { intensity: 0.1 })
   ] }),
@@ -2337,6 +2396,12 @@ var PRESETS = {
     description: "Aggressive dystopian neon",
     colors: ["#FF1744", "#140A0C", "#F2E8EA"]
   }
+  // 'cyber-jade': {
+  //   ...cyberJadePreset,
+  //   label: 'Cyber-Jade',
+  //   description: 'Phosphor-green terminal HUD',
+  //   colors: ['#3DF58A', '#040907', '#F2F8F4']
+  // }
   // honey: {
   //   ...honeyPreset,
   //   label: 'Honey',

package/dist/{chunk-XYSMBMAR.js → chunk-T7R5P5JJ.js}

@@ -1,8 +1,8 @@
 import { FilterBar } from './chunk-PDHTXPSF.js';
 import { CustomModal } from './chunk-GBMNCNHX.js';
-import { AppShellLoader } from './chunk-YEX4MQSY.js';
-import { useAvailablePresets } from './chunk-KDAOCM66.js';
-import { useDeleteCredential, useCreateCredential, useCredentials, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useResources, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useUpdateMemberConfig, useOrganizationMembers, useUpdateCredential, CredentialSchemas, showErrorNotification } from './chunk-DOFVHWAP.js';
+import { AppShellLoader } from './chunk-M25JL54Z.js';
+import { useAvailablePresets } from './chunk-6RWMRQN5.js';
+import { useDeleteCredential, useCreateCredential, useCredentials, MEMBERSHIP_STATUS_COLORS, transformMembershipToTableRow, useUserMemberships, useUpdateWebhookEndpoint, useResources, useDeleteWebhookEndpoint, useCreateWebhookEndpoint, useListWebhookEndpoints, useUpdateMemberConfig, useOrganizationMembers, useUpdateCredential, CredentialSchemas, showErrorNotification } from './chunk-FT27I4S7.js';
 import { ListSkeleton, EmptyState, PageTitleCaption, CardHeader, APIErrorAlert, StatCard } from './chunk-SQQGLGHW.js';
 import { formatDateTime, OAUTH_POPUP_CHECK_INTERVAL, OAUTH_FLOW_TIMEOUT } from './chunk-IOKL7BKE.js';
 import { useInitialization } from './chunk-TUXTSEAF.js';

package/dist/{chunk-F4TPY6YL.js → chunk-WLOQ4IBG.js}

@@ -120,11 +120,13 @@ function PerspectiveGrid({
   lineColor: lineColorProp,
   prominentGlow = false,
   lineIntensity = 100,
+  glowIntensity = 100,
   className
 }) {
   const rawLineColor = lineColorProp ?? "color-mix(in srgb, var(--color-text-subtle) 7%, transparent)";
   const lineColor = lineIntensity < 100 ? `color-mix(in srgb, ${rawLineColor} ${lineIntensity}%, transparent)` : rawLineColor;
-  const glowColor = glowColorProp ?? (prominentGlow ? PROMINENT_DEFAULT_GLOW : SUBTLE_DEFAULT_GLOW);
+  const rawGlowColor = glowColorProp ?? (prominentGlow ? PROMINENT_DEFAULT_GLOW : SUBTLE_DEFAULT_GLOW);
+  const glowColor = glowIntensity < 100 ? `color-mix(in srgb, ${rawGlowColor} ${glowIntensity}%, transparent)` : rawGlowColor;
   const glowHeight = prominentGlow ? "70%" : "60%";
   const glowGradient = prominentGlow ? `radial-gradient(ellipse 100% 80% at 50% 110%, ${glowColor} -10%, transparent 50%)` : `radial-gradient(ellipse 90% 75% at 50% 112%, ${glowColor} -15%, transparent 45%)`;
   return /* @__PURE__ */ jsxs(
@@ -389,9 +391,13 @@ function FilmGrain({ darkOpacity = 0.02, lightOpacity = 0.06, className }) {
     }
   );
 }
-function AppBackground({ children }) {
+function AppBackground({
+  children,
+  gridGlowColor,
+  gridGlowIntensity
+}) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PerspectiveGrid, {}),
+    /* @__PURE__ */ jsx(PerspectiveGrid, { glowColor: gridGlowColor, glowIntensity: gridGlowIntensity }),
     /* @__PURE__ */ jsx(RadiantGlow, {}),
     /* @__PURE__ */ jsx(FloatingOrbs, {}),
     /* @__PURE__ */ jsx(FilmGrain, {}),

package/dist/{chunk-R7WLWGPO.js → chunk-ZB5GAV7J.js}

@@ -1,5 +1,5 @@
 import { ApiClientProvider, useApiClient } from './chunk-NVOCKXUQ.js';
-import { OrganizationProvider } from './chunk-V7XHGJQZ.js';
+import { OrganizationProvider } from './chunk-FL67C3WY.js';
 import { getErrorInfo, getErrorTitle, formatErrorMessage } from './chunk-IOKL7BKE.js';
 import { InitializationProvider } from './chunk-TUXTSEAF.js';
 import { useOrganization } from './chunk-DD3CCMCZ.js';