@elevasis/ui 1.24.2 → 1.25.0

package/dist/{chunk-JR2C4XAN.js → chunk-CYXZHBP4.js}

@@ -1,7 +1,118 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useComputedColorScheme } from '@mantine/core';
 
-// src/components/layout/backgrounds/PerspectiveGrid.tsx
+// src/components/layout/backgrounds/AmbientBloomGrid.tsx
+var STYLE = `
+  .elevasis-ambient-bloom-grid {
+    display: none;
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    overflow: hidden;
+  }
+  [data-mantine-color-scheme="dark"] .elevasis-ambient-bloom-grid {
+    display: block;
+  }
+  [data-mantine-color-scheme="dark"] .elevasis-ambient-bloom-grid-lobe {
+    mix-blend-mode: screen;
+  }
+  @keyframes elevasis-ambient-bloom-grid-horizon {
+    0%, 100% { transform: translate(0, 0) scale(1); }
+    50% { transform: translate(0, -1.5%) scale(1.05); }
+  }
+  @keyframes elevasis-ambient-bloom-grid-rim-left {
+    0%, 100% { transform: rotate(68deg) translate(0, 0) scale(1); }
+    50% { transform: rotate(68deg) translate(-2%, 3%) scale(1.06); }
+  }
+  @keyframes elevasis-ambient-bloom-grid-rim-right {
+    0%, 100% { transform: rotate(-68deg) translate(0, 0) scale(1); }
+    50% { transform: rotate(-68deg) translate(2%, 3%) scale(1.06); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .elevasis-ambient-bloom-grid-lobe { animation: none !important; }
+  }
+`;
+var HORIZON = { width: 140, height: 85, bottom: -18, left: -20 };
+var RIM = { width: 160, height: 220, top: -100, offset: -75 };
+function AmbientBloomGrid({
+  color = "var(--color-primary)",
+  intensity = 0.1,
+  size = 1
+}) {
+  const horizonPct = `${Math.round(intensity * 100)}%`;
+  const rimPct = `${Math.round(intensity * 65)}%`;
+  const h = {
+    width: `${HORIZON.width * size}%`,
+    height: `${HORIZON.height * size}%`,
+    bottom: `${HORIZON.bottom * size}%`,
+    left: `${HORIZON.left * size}%`
+  };
+  const r = {
+    width: `${RIM.width * size}%`,
+    height: `${RIM.height * size}%`,
+    top: `${RIM.top * size}%`,
+    offset: `${RIM.offset * size}%`
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: STYLE }),
+    /* @__PURE__ */ jsxs("div", { className: "elevasis-ambient-bloom-grid", "aria-hidden": "true", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "elevasis-ambient-bloom-grid-lobe",
+          style: {
+            position: "absolute",
+            bottom: h.bottom,
+            left: h.left,
+            width: h.width,
+            height: h.height,
+            background: `radial-gradient(ellipse 55% 55% at 50% 100%, color-mix(in srgb, ${color} ${horizonPct}, transparent) 0%, transparent 65%)`,
+            filter: "blur(80px)",
+            animation: "elevasis-ambient-bloom-grid-horizon 30s ease-in-out infinite",
+            willChange: "transform",
+            transformOrigin: "center center"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "elevasis-ambient-bloom-grid-lobe",
+          style: {
+            position: "absolute",
+            top: r.top,
+            left: r.offset,
+            width: r.width,
+            height: r.height,
+            background: `radial-gradient(ellipse 35% 55% at center, color-mix(in srgb, ${color} ${rimPct}, transparent) 0%, transparent 62%)`,
+            filter: "blur(95px)",
+            animation: "elevasis-ambient-bloom-grid-rim-left 38s ease-in-out infinite",
+            willChange: "transform",
+            transformOrigin: "center center"
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "elevasis-ambient-bloom-grid-lobe",
+          style: {
+            position: "absolute",
+            top: r.top,
+            right: r.offset,
+            width: r.width,
+            height: r.height,
+            background: `radial-gradient(ellipse 35% 55% at center, color-mix(in srgb, ${color} ${rimPct}, transparent) 0%, transparent 62%)`,
+            filter: "blur(95px)",
+            animation: "elevasis-ambient-bloom-grid-rim-right 34s ease-in-out infinite",
+            willChange: "transform",
+            transformOrigin: "center center"
+          }
+        }
+      )
+    ] })
+  ] });
+}
 var SUBTLE_DEFAULT_GLOW = "color-mix(in srgb, color-mix(in srgb, var(--color-primary) 20%, var(--color-border)) 30%, transparent)";
 var PROMINENT_DEFAULT_GLOW = "color-mix(in srgb, var(--color-primary) 22%, transparent)";
 function PerspectiveGrid({
@@ -285,238 +396,111 @@ function AppBackground({ children }) {
     children
   ] });
 }
+var MOTE_COUNT = 4;
 var randRange = (min, max) => min + Math.random() * (max - min);
-var FLUX_SPARKS = Array.from({ length: 30 }, () => {
-  const duration = randRange(12, 70);
-  const pulse = randRange(0.8, 2.2);
+var MOTES = Array.from({ length: MOTE_COUNT }, () => {
+  const size = randRange(2, 16);
+  const duration = randRange(50, 90);
   return {
     left: randRange(0, 100),
-    size: randRange(1.5, 4.2),
-    duration,
-    delay: -randRange(0, duration),
-    drift: randRange(-35, 35),
-    peak: randRange(0.18, 0.5),
-    pulse,
-    pulseDelay: -randRange(0, pulse)
-  };
-});
-var FLUX_MOTES = Array.from({ length: 18 }, () => {
-  const duration = randRange(18, 90);
-  const pulse = randRange(1.6, 4);
-  return {
-    left: randRange(-2, 102),
-    size: randRange(3.5, 10),
-    duration,
-    delay: -randRange(0, duration),
-    drift: randRange(-55, 55),
-    blur: randRange(1.5, 5),
-    peak: randRange(0.22, 0.55),
-    pulse,
-    pulseDelay: -randRange(0, pulse)
-  };
-});
-var FLUX_GLOWS = Array.from({ length: 10 }, () => {
-  const duration = randRange(25, 130);
-  const pulse = randRange(3.5, 7);
-  return {
-    left: randRange(-5, 105),
-    size: randRange(3, 22),
+    size,
+    blur: size / 2,
     duration,
     delay: -randRange(0, duration),
-    drift: randRange(-80, 80),
-    blur: randRange(6, 16),
-    opacity: randRange(0.18, 0.42),
-    pulse,
-    pulseDelay: -randRange(0, pulse)
+    drift: randRange(-22, 22),
+    pulse: randRange(3, 9),
+    pulseDelay: -randRange(0, 5)
   };
 });
-var KEYFRAMES4 = `
-@keyframes elevasis-cyber-spark-rise {
-  0% { transform: translate3d(0, 0, 0); opacity: 0; }
-  10% { opacity: var(--cy-peak, 1); }
-  85% { opacity: calc(var(--cy-peak, 1) * 0.9); }
-  100% { transform: translate3d(var(--cy-drift, 0px), -112vh, 0); opacity: 0; }
-}
-@keyframes elevasis-cyber-spark-pulse {
-  0%, 100% { filter: brightness(0.55); transform: scale(0.8); }
-  50% { filter: brightness(1.7); transform: scale(1.25); }
-}
-@keyframes elevasis-cyber-glow-pulse {
-  0%, 100% { transform: scale(0.85); }
-  50% { transform: scale(1.2); }
-}
-@media (prefers-reduced-motion: reduce) {
-  .elevasis-cyber-spark,
-  .elevasis-cyber-spark-inner,
-  .elevasis-cyber-glow,
-  .elevasis-cyber-glow-inner {
-    animation: none !important;
+var STYLE2 = `
+  @keyframes elevasis-mote-rise {
+    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
+    12%  { opacity: 1; }
+    70%  { opacity: 0.85; }
+    100% { transform: translate3d(var(--mote-drift, 0px), -85vh, 0); opacity: 0; }
+  }
+  @keyframes elevasis-mote-pulse {
+    0%, 100% {
+      transform: scale(0.75);
+      filter: blur(var(--mote-blur, 2px)) brightness(0.8);
+    }
+    50% {
+      transform: scale(1.35);
+      filter: blur(calc(var(--mote-blur, 2px) * 1.4)) brightness(1.4);
+    }
   }
-  .elevasis-cyber-spark,
-  .elevasis-cyber-glow {
-    opacity: 0 !important;
+  @media (prefers-reduced-motion: reduce) {
+    .elevasis-floating-mote,
+    .elevasis-floating-mote-inner {
+      animation: none;
+    }
+    .elevasis-floating-mote {
+      opacity: 0;
+    }
   }
-}
 `;
-function FluxGlows() {
-  return /* @__PURE__ */ jsx(Fragment, { children: FLUX_GLOWS.map((g, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "elevasis-cyber-glow",
-      style: {
-        position: "absolute",
-        bottom: "-5%",
-        left: `${g.left}%`,
-        width: `${g.size}px`,
-        height: `${g.size}px`,
-        filter: `blur(${g.blur}px)`,
-        animation: `elevasis-cyber-spark-rise ${g.duration}s linear infinite`,
-        animationDelay: `${g.delay}s`,
-        ["--cy-drift"]: `${g.drift}px`,
-        ["--cy-peak"]: `${g.opacity}`,
-        willChange: "transform, opacity"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-cyber-glow-inner",
-          style: {
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%",
-            background: `radial-gradient(circle, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 60%, transparent) 45%, transparent 75%)`,
-            animation: `elevasis-cyber-glow-pulse ${g.pulse}s ease-in-out infinite`,
-            animationDelay: `${g.pulseDelay}s`,
-            willChange: "transform"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function FluxMotes() {
-  return /* @__PURE__ */ jsx(Fragment, { children: FLUX_MOTES.map((m, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "elevasis-cyber-spark",
-      style: {
-        position: "absolute",
-        bottom: "-3%",
-        left: `${m.left}%`,
-        width: `${m.size}px`,
-        height: `${m.size}px`,
-        filter: `blur(${m.blur}px)`,
-        animation: `elevasis-cyber-spark-rise ${m.duration}s linear infinite`,
-        animationDelay: `${m.delay}s`,
-        ["--cy-drift"]: `${m.drift}px`,
-        ["--cy-peak"]: `${m.peak}`,
-        willChange: "transform, opacity"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-cyber-spark-inner",
-          style: {
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%",
-            background: `radial-gradient(circle, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 70%, transparent) 55%, transparent 90%)`,
-            boxShadow: `0 0 ${m.size * 1.2}px color-mix(in srgb, var(--color-primary) 40%, transparent)`,
-            animation: `elevasis-cyber-spark-pulse ${m.pulse}s ease-in-out infinite`,
-            animationDelay: `${m.pulseDelay}s`,
-            willChange: "transform, filter"
-          }
-        }
-      )
-    },
-    i
-  )) });
-}
-function FluxSparks() {
-  return /* @__PURE__ */ jsx(Fragment, { children: FLUX_SPARKS.map((s, i) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "elevasis-cyber-spark",
-      style: {
-        position: "absolute",
-        bottom: "-2%",
-        left: `${s.left}%`,
-        width: `${s.size}px`,
-        height: `${s.size}px`,
-        animation: `elevasis-cyber-spark-rise ${s.duration}s linear infinite`,
-        animationDelay: `${s.delay}s`,
-        ["--cy-drift"]: `${s.drift}px`,
-        ["--cy-peak"]: `${s.peak}`,
-        willChange: "transform, opacity"
-      },
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "elevasis-cyber-spark-inner",
-          style: {
-            width: "100%",
-            height: "100%",
-            borderRadius: "50%",
-            background: "var(--color-primary)",
-            boxShadow: `0 0 ${s.size * 2.5}px var(--color-primary), 0 0 ${s.size * 5}px color-mix(in srgb, var(--color-primary) 50%, transparent)`,
-            animation: `elevasis-cyber-spark-pulse ${s.pulse}s ease-in-out infinite`,
-            animationDelay: `${s.pulseDelay}s`,
-            willChange: "transform, filter"
+function FloatingMotes({
+  coreColor = "var(--color-primary)",
+  haloColor = "color-mix(in srgb, var(--color-primary) 35%, transparent)",
+  bottom = "0"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: STYLE2 }),
+    /* @__PURE__ */ jsx("div", { "aria-hidden": "true", style: { position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden" }, children: MOTES.map((mote, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "elevasis-floating-mote",
+        style: {
+          position: "absolute",
+          bottom,
+          left: `${mote.left}%`,
+          width: `${mote.size}px`,
+          height: `${mote.size}px`,
+          opacity: 0,
+          transform: "translate3d(0, 0, 0)",
+          animation: `elevasis-mote-rise ${mote.duration}s ease-in-out infinite`,
+          animationDelay: `${mote.delay}s`,
+          willChange: "transform, opacity",
+          ["--mote-drift"]: `${mote.drift}px`,
+          ["--mote-blur"]: `${mote.blur}px`
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "elevasis-floating-mote-inner",
+            style: {
+              width: "100%",
+              height: "100%",
+              borderRadius: "50%",
+              background: `radial-gradient(circle, ${coreColor} 0%, ${haloColor} 45%, transparent 75%)`,
+              filter: `blur(${mote.blur}px)`,
+              animation: `elevasis-mote-pulse ${mote.pulse}s ease-in-out infinite`,
+              animationDelay: `${mote.pulseDelay}s`,
+              willChange: "transform, filter"
+            }
           }
-        }
-      )
-    },
-    i
-  )) });
-}
-function CyberParticles({ variant: _variant, className }) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className,
-      "aria-hidden": "true",
-      style: {
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        overflow: "hidden"
+        )
       },
-      children: [
-        /* @__PURE__ */ jsx("style", { children: KEYFRAMES4 }),
-        /* @__PURE__ */ jsx(FluxGlows, {}),
-        /* @__PURE__ */ jsx(FluxMotes, {}),
-        /* @__PURE__ */ jsx(FluxSparks, {})
-      ]
-    }
-  );
+      i
+    )) })
+  ] });
 }
-function CyberBackground({ variant }) {
-  const glowColor = variant === "chrome" ? void 0 : variant === "volt" || variant === "void" ? "color-mix(in srgb, var(--color-primary) 25%, transparent)" : "color-mix(in srgb, var(--color-primary) 35%, transparent)";
+function CyberBackground({
+  variant,
+  perspectiveGridRadialGlowIntensity
+}) {
+  const defaultIntensity = variant === "chrome" ? 22 : variant === "void" ? 24 : variant === "volt" ? 25 : 28;
+  const intensity = perspectiveGridRadialGlowIntensity ?? defaultIntensity;
+  const glowColor = `color-mix(in srgb, var(--color-primary) ${intensity}%, transparent)`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(PerspectiveGrid, { lineColor: "var(--color-border)", prominentGlow: true, glowColor }),
     /* @__PURE__ */ jsx(RadiantGlow, {}),
     /* @__PURE__ */ jsx(FloatingOrbs, {}),
-    /* @__PURE__ */ jsx(CyberParticles, { variant }),
+    /* @__PURE__ */ jsx(FloatingMotes, {}),
     /* @__PURE__ */ jsx(FilmGrain, {})
   ] });
 }
-var MOTE_COUNT = 24;
-var randRange2 = (min, max) => min + Math.random() * (max - min);
-var MOTES = Array.from({ length: MOTE_COUNT }, () => {
-  const size = randRange2(2, 16);
-  return {
-    left: randRange2(0, 100),
-    size,
-    blur: size / 2,
-    duration: randRange2(28, 52),
-    delay: -randRange2(0, 35),
-    drift: randRange2(-22, 22),
-    pulse: randRange2(3, 9),
-    pulseDelay: -randRange2(0, 5)
-  };
-});
-var STYLE = `
+var STYLE3 = `
   div[style*="var(--color-background)"][style*="100vh"] {
     background-color: transparent !important;
     isolation: isolate;
@@ -620,76 +604,16 @@ var STYLE = `
   .wavy-bg-wave-front {
     fill: var(--wavy-wave-front);
   }
-  .wavy-bg-motes {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
-  }
-  .wavy-bg-mote {
-    position: absolute;
-    bottom: 18%;
-    opacity: 0;
-    transform: translate3d(0, 0, 0);
-    animation: wavy-mote-rise var(--mote-duration, 32s) ease-in-out infinite;
-    animation-delay: var(--mote-delay, 0s);
-    will-change: transform, opacity;
-  }
-  .wavy-bg-mote-inner {
-    width: var(--mote-size, 4px);
-    height: var(--mote-size, 4px);
-    border-radius: 50%;
-    background: radial-gradient(
-      circle,
-      var(--wavy-mote-core) 0%,
-      var(--wavy-mote-halo) 45%,
-      transparent 75%
-    );
-    filter: blur(var(--mote-blur, 2px));
-    animation: wavy-mote-pulse var(--mote-pulse, 5s) ease-in-out infinite;
-    animation-delay: var(--mote-pulse-delay, 0s);
-    will-change: transform, filter;
-  }
-  @keyframes wavy-mote-rise {
-    0% {
-      transform: translate3d(0, 0, 0);
-      opacity: 0;
-    }
-    12% {
-      opacity: 1;
-    }
-    70% {
-      opacity: 0.85;
-    }
-    100% {
-      transform: translate3d(var(--mote-drift, 0px), -85vh, 0);
-      opacity: 0;
-    }
-  }
-  @keyframes wavy-mote-pulse {
-    0%, 100% {
-      transform: scale(0.75);
-      filter: blur(var(--mote-blur, 2px)) brightness(0.8);
-    }
-    50% {
-      transform: scale(1.35);
-      filter: blur(calc(var(--mote-blur, 2px) * 1.4)) brightness(1.4);
-    }
-  }
   @media (prefers-reduced-motion: reduce) {
     .wavy-bg-layer-back,
-    .wavy-bg-layer-front,
-    .wavy-bg-mote,
-    .wavy-bg-mote-inner {
+    .wavy-bg-layer-front {
       animation: none;
     }
-    .wavy-bg-mote {
-      opacity: 0;
-    }
   }
 `;
 function WaveBackground({ variant }) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: STYLE }),
+    /* @__PURE__ */ jsx("style", { children: STYLE3 }),
     /* @__PURE__ */ jsxs("div", { className: "wavy-bg-root", "data-variant": variant, children: [
       /* @__PURE__ */ jsx("div", { className: "wavy-bg-layer wavy-bg-layer-back", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 3200 900", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx(
         "path",
@@ -705,26 +629,9 @@ function WaveBackground({ variant }) {
           d: "M0,640 C280,540 520,560 820,680 C1100,790 1340,760 1600,640 C1880,540 2120,560 2420,680 C2700,790 2940,760 3200,640 L3200,900 L0,900 Z"
         }
       ) }) }),
-      /* @__PURE__ */ jsx("div", { className: "wavy-bg-motes", "aria-hidden": "true", children: MOTES.map((mote, i) => /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "wavy-bg-mote",
-          style: {
-            left: `${mote.left}%`,
-            ["--mote-size"]: `${mote.size}px`,
-            ["--mote-blur"]: `${mote.blur}px`,
-            ["--mote-duration"]: `${mote.duration}s`,
-            ["--mote-delay"]: `${mote.delay}s`,
-            ["--mote-drift"]: `${mote.drift}px`,
-            ["--mote-pulse"]: `${mote.pulse}s`,
-            ["--mote-pulse-delay"]: `${mote.pulseDelay}s`
-          },
-          children: /* @__PURE__ */ jsx("div", { className: "wavy-bg-mote-inner" })
-        },
-        i
-      )) })
+      /* @__PURE__ */ jsx(FloatingMotes, { coreColor: "var(--wavy-mote-core)", haloColor: "var(--wavy-mote-halo)", bottom: "18%" })
     ] })
   ] });
 }
 
-export { AppBackground, CyberBackground, CyberParticles, FilmGrain, FloatingOrbs, PerspectiveGrid, RadiantGlow, WaveBackground };
+export { AmbientBloomGrid, AppBackground, CyberBackground, FilmGrain, FloatingMotes, FloatingOrbs, PerspectiveGrid, RadiantGlow, WaveBackground };