@elevasis/ui 2.41.0 → 2.42.0

package/dist/{chunk-WF7CONXF.js → chunk-OJJK27GC.js}

@@ -1,7 +1,7 @@
-import { AppBackground, AmbientBloomGrid, CyberBackground, WaveBackground, FloatingMotes } from './chunk-WLOQ4IBG.js';
 import { z } from 'zod';
 import { createElement, Fragment, useRef, useEffect } from 'react';
 import { jsxs, Fragment as Fragment$1, jsx } from 'react/jsx-runtime';
+import { useComputedColorScheme } from '@mantine/core';
 
 // src/theme/presets/utils.ts
 function hexToRgb(hex) {
@@ -64,6 +64,410 @@ function generateShades(hex) {
   ];
   return targets.map((tl) => hslToHex(h, s, tl));
 }
+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$1, { 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({
+  glowColor: glowColorProp,
+  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 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(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden",
+        perspective: "500px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 0,
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "100%",
+              height: glowHeight,
+              background: glowGradient,
+              pointerEvents: "none"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              left: "-50%",
+              right: "-50%",
+              bottom: 0,
+              height: "70%",
+              backgroundImage: `
+            linear-gradient(${lineColor} 2px, transparent 1px),
+            linear-gradient(90deg, ${lineColor} 2px, transparent 1px)
+          `,
+              backgroundSize: "120px 100px",
+              transform: "rotateX(60deg)",
+              transformOrigin: "bottom center",
+              maskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)",
+              WebkitMaskImage: "linear-gradient(to bottom, transparent 0%, black 100%, black 100%, transparent 100%)"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var KEYFRAMES = `
+@keyframes elevasis-glow-drift {
+  0% { transform: translateY(0) scale(1); opacity: 1; }
+  20% { transform: translateY(-8%) scale(1.12); opacity: 0.7; }
+  40% { transform: translateY(3%) scale(0.92); opacity: 1; }
+  60% { transform: translateY(5%) scale(1.08); opacity: 0.8; }
+  80% { transform: translateY(-4%) scale(0.95); opacity: 0.9; }
+  100% { transform: translateY(0) scale(1); opacity: 1; }
+}
+@keyframes elevasis-glow-drift-alt {
+  0% { transform: translateY(0) scale(1); opacity: 0.8; }
+  25% { transform: translateY(6%) scale(0.9); opacity: 1; }
+  50% { transform: translateY(-7%) scale(1.15); opacity: 0.7; }
+  75% { transform: translateY(-5%) scale(1.05); opacity: 0.9; }
+  100% { transform: translateY(0) scale(1); opacity: 0.8; }
+}
+@keyframes elevasis-glow-drift-slow {
+  0% { transform: translateY(0) scale(1); opacity: 0.9; }
+  33% { transform: translateY(-4%) scale(1.1); opacity: 0.6; }
+  66% { transform: translateY(6%) scale(0.88); opacity: 1; }
+  100% { transform: translateY(0) scale(1); opacity: 0.9; }
+}
+`;
+function RadiantGlow({
+  color = "var(--color-primary)",
+  opacity = 1,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "clip",
+        opacity
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-80%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "200%",
+              height: "200%",
+              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.8%, transparent) 0%, transparent 70%)`,
+              animation: "elevasis-glow-drift 20s ease-in-out infinite",
+              willChange: "transform"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: "-70%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "180%",
+              height: "180%",
+              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 65%)`,
+              animation: "elevasis-glow-drift-alt 24s ease-in-out infinite",
+              willChange: "transform"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "-20%",
+              left: "50%",
+              transform: "translateX(-50%)",
+              width: "120%",
+              height: "120%",
+              background: `radial-gradient(ellipse at center, color-mix(in srgb, ${color} 0.6%, transparent) 0%, transparent 60%)`,
+              animation: "elevasis-glow-drift-slow 28s ease-in-out infinite",
+              willChange: "transform"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+var KEYFRAMES2 = `
+@keyframes elevasis-orb-float-0 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
+  25% { transform: translate(12vw, -8vh) scale(1.2); opacity: 0.8; }
+  50% { transform: translate(-5vw, -15vh) scale(0.9); opacity: 0.4; }
+  75% { transform: translate(8vw, 5vh) scale(1.1); opacity: 0.7; }
+}
+@keyframes elevasis-orb-float-1 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
+  30% { transform: translate(-10vw, 6vh) scale(0.85); opacity: 0.3; }
+  60% { transform: translate(7vw, 12vh) scale(1.15); opacity: 0.7; }
+}
+@keyframes elevasis-orb-float-2 {
+  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.4; }
+  20% { transform: translate(6vw, 10vh) scale(1.3); opacity: 0.7; }
+  50% { transform: translate(-8vw, -4vh) scale(0.8); opacity: 0.3; }
+  80% { transform: translate(3vw, -12vh) scale(1.1); opacity: 0.6; }
+}
+`;
+var ORB_CONFIGS = [
+  { top: "10%", left: "15%", size: "25vw", anim: "elevasis-orb-float-0", dur: "22s" },
+  { top: "60%", left: "70%", size: "30vw", anim: "elevasis-orb-float-1", dur: "28s" },
+  { top: "30%", left: "50%", size: "20vw", anim: "elevasis-orb-float-2", dur: "32s" },
+  { top: "75%", left: "20%", size: "22vw", anim: "elevasis-orb-float-0", dur: "26s" },
+  { top: "5%", left: "75%", size: "18vw", anim: "elevasis-orb-float-1", dur: "30s" },
+  { top: "45%", left: "5%", size: "24vw", anim: "elevasis-orb-float-2", dur: "24s" }
+];
+function FloatingOrbs({
+  color = "var(--color-primary)",
+  count = 6,
+  className
+}) {
+  const orbs = ORB_CONFIGS.slice(0, count);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "clip"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES2 }),
+        orbs.map((orb, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: orb.top,
+              left: orb.left,
+              width: orb.size,
+              height: orb.size,
+              borderRadius: "50%",
+              background: `radial-gradient(circle at center, color-mix(in srgb, ${color} 3%, transparent) 0%, transparent 70%)`,
+              filter: "blur(40px)",
+              animation: `${orb.anim} ${orb.dur} ease-in-out infinite`,
+              willChange: "transform, opacity"
+            }
+          },
+          i
+        ))
+      ]
+    }
+  );
+}
+var KEYFRAMES3 = `
+@keyframes elevasis-grain-shift {
+  0%, 100% { transform: translate(0, 0); }
+  10% { transform: translate(-2%, -3%); }
+  20% { transform: translate(3%, 1%); }
+  30% { transform: translate(-1%, 4%); }
+  40% { transform: translate(4%, -2%); }
+  50% { transform: translate(-3%, 2%); }
+  60% { transform: translate(2%, -4%); }
+  70% { transform: translate(-4%, 1%); }
+  80% { transform: translate(1%, 3%); }
+  90% { transform: translate(3%, -1%); }
+}
+`;
+function FilmGrain({ darkOpacity = 0.02, lightOpacity = 0.06, className }) {
+  const colorScheme = useComputedColorScheme();
+  const opacity = colorScheme === "dark" ? darkOpacity : lightOpacity;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "clip",
+        opacity,
+        mixBlendMode: colorScheme === "dark" ? "screen" : "multiply"
+      },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: KEYFRAMES3 }),
+        /* @__PURE__ */ jsx("svg", { style: { position: "absolute", width: 0, height: 0 }, children: /* @__PURE__ */ jsx("filter", { id: "elevasis-grain", children: /* @__PURE__ */ jsx("feTurbulence", { type: "fractalNoise", baseFrequency: "0.65", numOctaves: "3", stitchTiles: "stitch" }) }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: "-50%",
+              width: "200%",
+              height: "200%",
+              filter: "url(#elevasis-grain)",
+              animation: "elevasis-grain-shift 0.8s steps(4) infinite",
+              willChange: "transform"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function AppBackground({
+  children,
+  gridGlowColor,
+  gridGlowIntensity
+}) {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx(PerspectiveGrid, { glowColor: gridGlowColor, glowIntensity: gridGlowIntensity }),
+    /* @__PURE__ */ jsx(RadiantGlow, {}),
+    /* @__PURE__ */ jsx(FloatingOrbs, {}),
+    /* @__PURE__ */ jsx(FilmGrain, {}),
+    children
+  ] });
+}
+
+// src/theme/presets/default.ts
 var defaultPreset = {
   subtitleFontFamily: '"Inter", sans-serif',
   fontImports: ["https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"],
@@ -264,6 +668,121 @@ var regalPreset = {
     "https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap"
   ]
 };
+var MOTE_COUNT = 4;
+var randRange = (min, max) => min + Math.random() * (max - min);
+var MOTES = Array.from({ length: MOTE_COUNT }, () => {
+  const size = randRange(2, 16);
+  const duration = randRange(50, 90);
+  return {
+    left: randRange(0, 100),
+    size,
+    blur: size / 2,
+    duration,
+    delay: -randRange(0, duration),
+    drift: randRange(-22, 22),
+    pulse: randRange(3, 9),
+    pulseDelay: -randRange(0, 5)
+  };
+});
+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);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .elevasis-floating-mote,
+    .elevasis-floating-mote-inner {
+      animation: none;
+    }
+    .elevasis-floating-mote {
+      opacity: 0;
+    }
+  }
+`;
+function FloatingMotes({
+  coreColor = "var(--color-primary)",
+  haloColor = "color-mix(in srgb, var(--color-primary) 35%, transparent)",
+  bottom = "0"
+}) {
+  return /* @__PURE__ */ jsxs(Fragment$1, { 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 CyberBackground({
+  variant,
+  perspectiveGridRadialGlowIntensity,
+  perspectiveGridLineIntensity
+}) {
+  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$1, { children: [
+    /* @__PURE__ */ jsx(
+      PerspectiveGrid,
+      {
+        lineColor: "var(--color-border)",
+        prominentGlow: true,
+        glowColor,
+        lineIntensity: perspectiveGridLineIntensity
+      }
+    ),
+    /* @__PURE__ */ jsx(RadiantGlow, {}),
+    /* @__PURE__ */ jsx(FloatingOrbs, {}),
+    /* @__PURE__ */ jsx(FloatingMotes, {}),
+    /* @__PURE__ */ jsx(FilmGrain, {})
+  ] });
+}
+
+// src/theme/presets/cyber-volt.ts
 var cyberVoltPreset = {
   background: createElement(
     Fragment,
@@ -334,7 +853,7 @@ var cyberVoltPreset = {
   },
   fontImports: ["https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap"]
 };
-var STYLE = `
+var STYLE3 = `
   div[style*="var(--color-background)"][style*="100vh"] {
     background-color: transparent !important;
     isolation: isolate;
@@ -636,7 +1155,7 @@ function ChromeBackground({ variant, beam }) {
     "--chrome-animation-delay": RANDOM_OFFSET
   };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("style", { children: STYLE }),
+    /* @__PURE__ */ jsx("style", { children: STYLE3 }),
     /* @__PURE__ */ jsx("div", { className: "chrome-bg-root", "data-variant": variant, style, "aria-hidden": "true", children: /* @__PURE__ */ jsxs("div", { className: "chrome-bg-wrapper", children: [
       /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-1" }),
       /* @__PURE__ */ jsx("div", { className: "chrome-bg-beam chrome-bg-beam-2" }),
@@ -939,7 +1458,7 @@ var titaniumPreset = {
     }
   }
 };
-var STYLE2 = `
+var STYLE4 = `
   /* NOTE: does not neutralize AppShellContainer's background paint, unlike
      ChromeBackground / ConstellationBackground. AmbientBloom is designed to
      compose *above* existing background layers (CyberBackground's grid,
@@ -984,7 +1503,7 @@ function AmbientBloom({
   const secondaryPct = `${Math.round(intensity * 80)}%`;
   const tertiaryPct = `${Math.round(intensity * 60)}%`;
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsx("style", { children: STYLE2 }),
+    /* @__PURE__ */ jsx("style", { children: STYLE4 }),
     /* @__PURE__ */ jsxs("div", { className: "elevasis-ambient-bloom", "aria-hidden": "true", children: [
       /* @__PURE__ */ jsx(
         "div",
@@ -1040,6 +1559,139 @@ function AmbientBloom({
     ] })
   ] });
 }
+var STYLE5 = `
+  div[style*="var(--color-background)"][style*="100vh"] {
+    background-color: transparent !important;
+    isolation: isolate;
+  }
+  .wavy-bg-root {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    overflow: hidden;
+    pointer-events: none;
+    background: var(--color-background);
+  }
+  /* Variant palettes (light mode defaults) */
+  .wavy-bg-root[data-variant="nirvana"] {
+    --wavy-wave-front: #fde8e0;
+    --wavy-wave-back: #fef2ec;
+    --wavy-mote-core: rgba(253, 205, 170, 0.85);
+    --wavy-mote-halo: rgba(253, 205, 170, 0.3);
+  }
+  .wavy-bg-root[data-variant="wave"] {
+    --wavy-wave-front: #dbeafe;
+    --wavy-wave-back: #eef4ff;
+    --wavy-mote-core: rgba(125, 180, 255, 0.85);
+    --wavy-mote-halo: rgba(125, 180, 255, 0.3);
+  }
+  .wavy-bg-root[data-variant="honey"] {
+    --wavy-wave-front: #fbeed3;
+    --wavy-wave-back: #fdf5e0;
+    --wavy-mote-core: rgba(230, 170, 50, 0.85);
+    --wavy-mote-halo: rgba(230, 170, 50, 0.3);
+  }
+  .wavy-bg-root[data-variant="canopy"] {
+    --wavy-wave-front: #dcebdf;
+    --wavy-wave-back: #e6f0e8;
+    --wavy-mote-core: rgba(140, 205, 155, 0.85);
+    --wavy-mote-halo: rgba(140, 205, 155, 0.3);
+  }
+  .wavy-bg-root[data-variant="quarry"] {
+    --wavy-wave-front: #dde0e4;
+    --wavy-wave-back: #e6e9ed;
+    --wavy-mote-core: rgba(150, 158, 170, 0.85);
+    --wavy-mote-halo: rgba(150, 158, 170, 0.3);
+  }
+  /* Variant palettes (dark mode overrides) */
+  [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="nirvana"] {
+    --wavy-wave-front: #140804;
+    --wavy-wave-back: #0a0402;
+    --wavy-mote-core: rgba(180, 110, 70, 0.4);
+    --wavy-mote-halo: rgba(180, 110, 70, 0.12);
+  }
+  [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="wave"] {
+    --wavy-wave-front: #050e1c;
+    --wavy-wave-back: #030812;
+    --wavy-mote-core: rgba(90, 160, 230, 0.4);
+    --wavy-mote-halo: rgba(90, 160, 230, 0.12);
+  }
+  [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="honey"] {
+    --wavy-wave-front: #120e05;
+    --wavy-wave-back: #080502;
+    --wavy-mote-core: rgba(232, 168, 32, 0.4);
+    --wavy-mote-halo: rgba(232, 168, 32, 0.12);
+  }
+  [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="canopy"] {
+    --wavy-wave-front: #060f09;
+    --wavy-wave-back: #030805;
+    --wavy-mote-core: rgba(74, 168, 96, 0.4);
+    --wavy-mote-halo: rgba(74, 168, 96, 0.12);
+  }
+  [data-mantine-color-scheme="dark"] .wavy-bg-root[data-variant="quarry"] {
+    --wavy-wave-front: #0d0c0a;
+    --wavy-wave-back: #070605;
+    --wavy-mote-core: rgba(168, 164, 156, 0.4);
+    --wavy-mote-halo: rgba(168, 164, 156, 0.12);
+  }
+  .wavy-bg-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 100%;
+    will-change: transform;
+  }
+  .wavy-bg-layer svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  @keyframes wavy-drift {
+    from { transform: translateX(0); }
+    to   { transform: translateX(-50%); }
+  }
+  .wavy-bg-layer-back {
+    animation: wavy-drift 105s linear infinite;
+  }
+  .wavy-bg-layer-front {
+    animation: wavy-drift 63s linear infinite;
+  }
+  .wavy-bg-wave-back {
+    fill: var(--wavy-wave-back);
+  }
+  .wavy-bg-wave-front {
+    fill: var(--wavy-wave-front);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .wavy-bg-layer-back,
+    .wavy-bg-layer-front {
+      animation: none;
+    }
+  }
+`;
+function WaveBackground({ variant }) {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("style", { children: STYLE5 }),
+    /* @__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",
+        {
+          className: "wavy-bg-wave-back",
+          d: "M0,340 C260,200 520,220 820,340 C1100,480 1340,440 1600,340 C1860,200 2120,220 2420,340 C2700,480 2940,440 3200,340 L3200,900 L0,900 Z"
+        }
+      ) }) }),
+      /* @__PURE__ */ jsx("div", { className: "wavy-bg-layer wavy-bg-layer-front", children: /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 3200 900", preserveAspectRatio: "none", children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          className: "wavy-bg-wave-front",
+          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(FloatingMotes, { coreColor: "var(--wavy-mote-core)", haloColor: "var(--wavy-mote-halo)", bottom: "18%" })
+    ] })
+  ] });
+}
 var canopyPreset = {
   subtitleFontFamily: '"Lora", serif',
   fontImports: [
@@ -2462,4 +3114,4 @@ function getPreset(name, presetsMap) {
   return PRESETS[name] ?? PRESETS.default;
 }
 
-export { PRESETS, THEME_PRESETS, ThemePresetEnum, generateShades, getPreset };
+export { AmbientBloomGrid, AppBackground, CyberBackground, FilmGrain, FloatingMotes, FloatingOrbs, PRESETS, PerspectiveGrid, RadiantGlow, THEME_PRESETS, ThemePresetEnum, WaveBackground, generateShades, getPreset };