@agent-native/toolkit 0.201.1 → 0.202.0-nightly-20261006033736

package/src/app/shared/WaveBackground.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { HeroOceanBackground } from "./ocean/hero-ocean-background.js";
+import { probeWebgpuSupport } from "./ocean/webgpu-support.js";
+import { WebGlWaveBackground } from "./WebGlWaveBackground.js";
+
+type Background = "probing" | "ocean-loading" | "ocean" | "fallback";
+
+export interface WaveBackgroundProps {
+  className?: string;
+}
+
+export function WaveBackground({ className = "" }: WaveBackgroundProps) {
+  const [background, setBackground] = useState<Background>("probing");
+
+  useEffect(() => {
+    const reduced = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    if (reduced?.matches) {
+      setBackground("fallback");
+      return;
+    }
+
+    let cancelled = false;
+    void probeWebgpuSupport().then((support) => {
+      if (!cancelled) {
+        setBackground(support === "supported" ? "ocean-loading" : "fallback");
+      }
+    });
+
+    const demoteToFallback = () => {
+      if (!cancelled) setBackground("fallback");
+    };
+    reduced?.addEventListener("change", demoteToFallback);
+    return () => {
+      cancelled = true;
+      reduced?.removeEventListener("change", demoteToFallback);
+    };
+  }, []);
+
+  const handleOceanError = useCallback(() => setBackground("fallback"), []);
+  const handleOceanReady = useCallback(() => setBackground("ocean"), []);
+
+  return (
+    <>
+      {background !== "ocean" ? (
+        <WebGlWaveBackground
+          className={className}
+          style={{ opacity: "var(--b-hero-shader-opacity, 0.3)" }}
+        />
+      ) : null}
+      {background === "ocean-loading" || background === "ocean" ? (
+        <HeroOceanBackground
+          className={className}
+          onError={handleOceanError}
+          onReady={handleOceanReady}
+        />
+      ) : null}
+    </>
+  );
+}

package/src/app/shared/WebGlWaveBackground.spec.tsx

@@ -0,0 +1,106 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { WebGlWaveBackground } from "./WebGlWaveBackground.js";
+
+let intersectionObserver: TestIntersectionObserver | undefined;
+
+class TestIntersectionObserver {
+  constructor(private readonly callback: IntersectionObserverCallback) {
+    intersectionObserver = this;
+  }
+
+  observe = vi.fn();
+  disconnect = vi.fn();
+  unobserve = vi.fn();
+  takeRecords = () => [];
+
+  notify(isIntersecting: boolean) {
+    this.callback(
+      [{ isIntersecting } as IntersectionObserverEntry],
+      this as unknown as IntersectionObserver,
+    );
+  }
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  vi.unstubAllGlobals();
+  intersectionObserver = undefined;
+});
+
+describe("WebGlWaveBackground", () => {
+  it("stops requesting frames while outside the viewport", () => {
+    let nextFrameId = 0;
+    const callbacks = new Map<number, FrameRequestCallback>();
+    const requestFrame = vi.fn((callback: FrameRequestCallback) => {
+      const id = ++nextFrameId;
+      callbacks.set(id, callback);
+      return id;
+    });
+    const cancelFrame = vi.fn((id: number) => callbacks.delete(id));
+    const gl = {
+      ARRAY_BUFFER: 34962,
+      COMPILE_STATUS: 35713,
+      FRAGMENT_SHADER: 35632,
+      LINK_STATUS: 35714,
+      STATIC_DRAW: 35044,
+      TRIANGLES: 4,
+      VERTEX_SHADER: 35633,
+      attachShader: vi.fn(),
+      bindBuffer: vi.fn(),
+      bufferData: vi.fn(),
+      compileShader: vi.fn(),
+      createBuffer: vi.fn(() => ({})),
+      createProgram: vi.fn(() => ({})),
+      createShader: vi.fn(() => ({})),
+      deleteBuffer: vi.fn(),
+      deleteProgram: vi.fn(),
+      deleteShader: vi.fn(),
+      drawArrays: vi.fn(),
+      enableVertexAttribArray: vi.fn(),
+      getAttribLocation: vi.fn(() => 0),
+      getExtension: vi.fn(() => ({ loseContext: vi.fn() })),
+      getProgramParameter: vi.fn(() => true),
+      getShaderParameter: vi.fn(() => true),
+      getUniformLocation: vi.fn(() => ({})),
+      linkProgram: vi.fn(),
+      shaderSource: vi.fn(),
+      uniform1f: vi.fn(),
+      uniform2f: vi.fn(),
+      uniform3f: vi.fn(),
+      useProgram: vi.fn(),
+      vertexAttribPointer: vi.fn(),
+      viewport: vi.fn(),
+    } as unknown as WebGLRenderingContext;
+
+    vi.stubGlobal("IntersectionObserver", TestIntersectionObserver);
+    vi.stubGlobal("requestAnimationFrame", requestFrame);
+    vi.stubGlobal("cancelAnimationFrame", cancelFrame);
+    vi.spyOn(HTMLCanvasElement.prototype, "getContext").mockImplementation(
+      (() => gl) as typeof HTMLCanvasElement.prototype.getContext,
+    );
+
+    render(<WebGlWaveBackground />);
+
+    expect(intersectionObserver).toBeDefined();
+    act(() => intersectionObserver?.notify(false));
+    expect(requestFrame).not.toHaveBeenCalled();
+
+    act(() => intersectionObserver?.notify(true));
+    expect(requestFrame).toHaveBeenCalledTimes(1);
+
+    act(() => callbacks.get(1)?.(40));
+    expect(requestFrame).toHaveBeenCalledTimes(2);
+
+    const cancelledCallback = callbacks.get(2);
+    act(() => intersectionObserver?.notify(false));
+    expect(cancelFrame).toHaveBeenCalledWith(2);
+
+    act(() => cancelledCallback?.(80));
+    expect(requestFrame).toHaveBeenCalledTimes(2);
+  });
+});

package/src/app/shared/WebGlWaveBackground.tsx

@@ -0,0 +1,499 @@
+import { useEffect, useRef } from "react";
+import type { CSSProperties } from "react";
+
+const vertexShader = `
+attribute vec2 position;
+void main() {
+  gl_Position = vec4(position, 0.0, 1.0);
+}
+`;
+
+const fragmentShader = `
+precision highp float;
+
+uniform float iTime;
+uniform vec2 iResolution;
+uniform vec3 uPointer;
+uniform vec3 uFgColor;
+uniform vec3 uBgColor;
+uniform float uBrightness;
+uniform float uTransparent;
+
+#define S(a, b, t) smoothstep(a, b, t)
+
+const float WAVE_COUNT = 5.;
+const float WAVE_SCALE = 5.5;
+const float FLOW_ANGLE = 119.;
+const float WARP = 0.35;
+const float SPEED = 0.65;
+const float FOCUS_FOLLOW = 0.65;
+const vec2 FOCUS = vec2(0., -0.05);
+const float SPREAD = 1.2;
+const float DOT_DENSITY = 131.;
+const float DOT_SCALE = 1.35;
+const float GLOW = 1.;
+const float SEED = 56.;
+const float VIGNETTE = 1.7;
+const float TONE_GAMMA = 2.6;
+const float FADE_IN_SECONDS = 0.7;
+
+float N21(vec2 p) {
+  p += SEED;
+  vec3 a = fract(vec3(p.xyx) * vec3(213.897, 653.453, 253.098));
+  a += dot(a, a.yzx + 79.76);
+  return fract((a.x + a.y) * a.z);
+}
+
+float valueNoise(vec2 p) {
+  vec2 cell = floor(p);
+  vec2 f = fract(p);
+  float a = N21(cell);
+  float b = N21(cell + vec2(1., 0.));
+  float c = N21(cell + vec2(0., 1.));
+  float d = N21(cell + vec2(1., 1.));
+  vec2 u = f * f * (3. - 2. * f);
+  return mix(a, b, u.x) + (c - a) * u.y * (1. - u.x) + (d - b) * u.x * u.y;
+}
+
+float waveField(vec2 p, float t) {
+  float angle = radians(FLOW_ANGLE);
+  vec2 dir = vec2(cos(angle), sin(angle));
+  vec2 perp = vec2(-dir.y, dir.x);
+  vec2 warpUv = p * 1.1 + vec2(t * 0.14, t * 0.1);
+  float n1 = valueNoise(warpUv);
+  float n2 = valueNoise(warpUv + 5.2);
+  vec2 warped = p + (vec2(n1, n2) - 0.5) * WARP;
+  float along = dot(warped, dir);
+  float across = dot(warped, perp);
+  float field = 0.;
+  float weight = 0.;
+  for (float i = 0.; i < WAVE_COUNT; i += 1.) {
+    float amp = 1. / (1. + i * 0.8);
+    float freq = WAVE_SCALE * (1. + i * 0.55);
+    float drift = t * (1. + i * 0.23) + i * 2.399963;
+    float cross = sin(across * freq * 0.45 - drift * 0.7);
+    field += amp * sin(along * freq + drift + cross * 1.3);
+    weight += amp;
+  }
+  return clamp(field / max(weight, 0.001) * 0.5 + 0.5, 0., 1.);
+}
+
+void mainImage(out vec4 fragColor, in vec2 fragCoord) {
+  vec2 uv = (fragCoord - iResolution.xy * .5) / iResolution.y;
+  vec2 pointerUv = (uPointer.xy - iResolution.xy * .5) / iResolution.y;
+  float t = iTime * SPEED;
+  float cellSize = 1. / DOT_DENSITY;
+  vec2 cell = floor(uv / cellSize);
+  vec2 cellCenter = (cell + 0.5) * cellSize;
+  vec2 cellUv = (uv - cellCenter) / cellSize;
+  float tone = waveField(cellCenter, t);
+  vec2 focus = FOCUS + (pointerUv - FOCUS) * FOCUS_FOLLOW * uPointer.z;
+  float distFromFocus = length(cellCenter - focus) / SPREAD;
+  tone *= exp(-1.6 * distFromFocus * distFromFocus);
+  tone = pow(clamp(tone, 0., 1.), TONE_GAMMA);
+  float radius = sqrt(tone) * 0.5 * DOT_SCALE;
+  float px = (1. / iResolution.y) / cellSize;
+  float edge = max(px * 1.2, 0.004);
+  float dist = length(cellUv);
+  float dotMask = step(0.0001, tone) * (1. - S(radius - edge, radius + edge, dist));
+  float glowTerm = (1. - S(radius, radius + GLOW * 0.9, dist)) * GLOW * tone;
+  float value = clamp(dotMask + glowTerm * 0.6, 0., 1.);
+  value *= clamp(1. - dot(uv, uv) * VIGNETTE, 0., 1.);
+  value *= S(0., FADE_IN_SECONDS, iTime);
+  vec3 lit = mix(uBgColor, uFgColor, value);
+  lit += (uFgColor - uBgColor) * value * tone * (uBrightness - 1.);
+  if (uTransparent > 0.5) {
+    float alpha = clamp(value, 0., 1.);
+    vec3 waveColor = uBgColor + (uFgColor - uBgColor) * (1. + tone * (uBrightness - 1.));
+    fragColor = vec4(clamp(waveColor, 0., 1.) * alpha, alpha);
+  } else {
+    fragColor = vec4(clamp(lit, 0., 1.), 1.);
+  }
+}
+
+void main() {
+  mainImage(gl_FragColor, gl_FragCoord.xy);
+}
+`;
+
+let shaderEpoch = 0;
+
+export interface WebGlWaveBackgroundProps {
+  className?: string;
+  frameRate?: number;
+  transparent?: boolean;
+  style?: CSSProperties;
+}
+
+function hexToRgb01(hex: string): [number, number, number] | null {
+  const normalized = hex.trim().replace(/^#/, "");
+  if (!/^(?:[\da-f]{3}|[\da-f]{6})$/i.test(normalized)) return null;
+  const full =
+    normalized.length === 3
+      ? normalized
+          .split("")
+          .map((part) => `${part}${part}`)
+          .join("")
+      : normalized;
+  const value = Number.parseInt(full, 16);
+  return [
+    ((value >> 16) & 255) / 255,
+    ((value >> 8) & 255) / 255,
+    (value & 255) / 255,
+  ];
+}
+
+export function WebGlWaveBackground({
+  className = "",
+  frameRate = 30,
+  transparent = false,
+  style,
+}: WebGlWaveBackgroundProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const rafRef = useRef<number>(0);
+
+  useEffect(() => {
+    const canvasRaw = canvasRef.current;
+    const containerRaw = containerRef.current;
+    if (!canvasRaw || !containerRaw) return;
+    const canvas: HTMLCanvasElement = canvasRaw;
+    const container: HTMLElement = containerRaw;
+
+    const glRaw = canvas.getContext("webgl", {
+      alpha: transparent,
+      antialias: false,
+      preserveDrawingBuffer: false,
+    });
+    if (!glRaw) return;
+    const gl: WebGLRenderingContext = glRaw;
+
+    function compileShader(type: number, src: string) {
+      const shader = gl.createShader(type);
+      if (!shader) return null;
+      gl.shaderSource(shader, src);
+      gl.compileShader(shader);
+      if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        console.error(gl.getShaderInfoLog(shader));
+        gl.deleteShader(shader);
+        return null;
+      }
+      return shader;
+    }
+
+    const vs = compileShader(gl.VERTEX_SHADER, vertexShader);
+    const fs = compileShader(gl.FRAGMENT_SHADER, fragmentShader);
+    if (!vs || !fs) return;
+
+    const program = gl.createProgram();
+    if (!program) return;
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+      console.error(gl.getProgramInfoLog(program));
+      gl.deleteProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      return;
+    }
+    gl.useProgram(program);
+
+    const buf = gl.createBuffer();
+    if (!buf) {
+      gl.deleteProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      return;
+    }
+    gl.bindBuffer(gl.ARRAY_BUFFER, buf);
+    gl.bufferData(
+      gl.ARRAY_BUFFER,
+      new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),
+      gl.STATIC_DRAW,
+    );
+    const pos = gl.getAttribLocation(program, "position");
+    gl.enableVertexAttribArray(pos);
+    gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
+
+    const uTime = gl.getUniformLocation(program, "iTime");
+    const uRes = gl.getUniformLocation(program, "iResolution");
+    const uPointer = gl.getUniformLocation(program, "uPointer");
+    const uFgColor = gl.getUniformLocation(program, "uFgColor");
+    const uBgColor = gl.getUniformLocation(program, "uBgColor");
+    const uBrightness = gl.getUniformLocation(program, "uBrightness");
+    const uTransparent = gl.getUniformLocation(program, "uTransparent");
+    const reducedMotionQuery =
+      typeof window.matchMedia === "function"
+        ? window.matchMedia("(prefers-reduced-motion: reduce)")
+        : null;
+    let reducedMotion = reducedMotionQuery?.matches ?? false;
+
+    let dpr = 1;
+    let isVisible = false;
+    let visibilityObserver: IntersectionObserver | null = null;
+    let hasPointer = false;
+    let pointerX = 0;
+    let pointerY = 0;
+    let pointerStrength = 0;
+    let targetX = 0;
+    let targetY = 0;
+    let targetStrength = 0;
+
+    function readDarkMode() {
+      const root = document.documentElement;
+      if (root.classList.contains("dark")) return true;
+      if (root.classList.contains("light")) return false;
+      const dataTheme = root.getAttribute("data-theme");
+      if (dataTheme === "dark") return true;
+      if (dataTheme === "light") return false;
+      return (
+        window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false
+      );
+    }
+
+    function readTheme() {
+      const dark = readDarkMode();
+      const fallback = dark
+        ? {
+            bg: [10 / 255, 10 / 255, 10 / 255] as [number, number, number],
+            fg: [174 / 255, 173 / 255, 172 / 255] as [number, number, number],
+            brightness: 3,
+          }
+        : {
+            bg: [250 / 255, 249 / 255, 245 / 255] as [number, number, number],
+            fg: [0, 103 / 255, 127 / 255] as [number, number, number],
+            brightness: 1.15,
+          };
+      const styles = window.getComputedStyle(container);
+      const customBg = hexToRgb01(styles.getPropertyValue("--b-bg-page"));
+      const customFg = hexToRgb01(
+        styles.getPropertyValue("--b-hero-shader-fg"),
+      );
+      const customBrightness = Number.parseFloat(
+        styles.getPropertyValue("--b-hero-shader-brightness"),
+      );
+      return {
+        bg: customBg ?? fallback.bg,
+        fg: customFg ?? fallback.fg,
+        brightness: Number.isFinite(customBrightness)
+          ? customBrightness
+          : fallback.brightness,
+      };
+    }
+
+    let theme = readTheme();
+
+    function easePointer(allowPointer: boolean) {
+      if (!allowPointer) {
+        pointerStrength = 0;
+        return;
+      }
+      pointerX += (targetX - pointerX) * 0.12;
+      pointerY += (targetY - pointerY) * 0.12;
+      pointerStrength += (targetStrength - pointerStrength) * 0.08;
+      if (pointerStrength < 0.001 && targetStrength === 0) {
+        pointerStrength = 0;
+      }
+    }
+
+    function draw(timeSeconds: number, allowPointer = !reducedMotion) {
+      easePointer(allowPointer);
+      gl.uniform1f(uTime, timeSeconds);
+      gl.uniform2f(uRes, canvas.width, canvas.height);
+      gl.uniform3f(uPointer, pointerX, pointerY, pointerStrength);
+      gl.uniform3f(uFgColor, theme.fg[0], theme.fg[1], theme.fg[2]);
+      gl.uniform3f(uBgColor, theme.bg[0], theme.bg[1], theme.bg[2]);
+      gl.uniform1f(uBrightness, theme.brightness);
+      gl.uniform1f(uTransparent, transparent ? 1 : 0);
+      gl.drawArrays(gl.TRIANGLES, 0, 6);
+    }
+
+    function resize() {
+      const w = container.clientWidth;
+      const h = container.clientHeight;
+      dpr = Math.min(window.devicePixelRatio, 1.5);
+      canvas.width = w * dpr;
+      canvas.height = h * dpr;
+      canvas.style.width = w + "px";
+      canvas.style.height = h + "px";
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      if (!hasPointer) {
+        pointerX = targetX = canvas.width * 0.5;
+        pointerY = targetY = canvas.height * 0.5;
+      }
+    }
+
+    function handlePointerMove(event: PointerEvent | MouseEvent) {
+      const rect = container.getBoundingClientRect();
+      if (rect.width <= 0 || rect.height <= 0) return;
+
+      const x = event.clientX - rect.left;
+      const y = event.clientY - rect.top;
+      const inside = x >= 0 && x <= rect.width && y >= 0 && y <= rect.height;
+
+      hasPointer = true;
+      targetX = x * dpr;
+      targetY = (rect.height - y) * dpr;
+      targetStrength = inside ? 1 : 0;
+    }
+
+    function fadePointer() {
+      targetStrength = 0;
+    }
+
+    resize();
+    window.addEventListener("resize", resize);
+    const resizeObserver =
+      typeof ResizeObserver === "undefined" ? null : new ResizeObserver(resize);
+    resizeObserver?.observe(container);
+    window.addEventListener("pointermove", handlePointerMove, {
+      passive: true,
+    });
+    window.addEventListener("mousemove", handlePointerMove, {
+      passive: true,
+    });
+    document.addEventListener("pointerleave", fadePointer, {
+      passive: true,
+    });
+    window.addEventListener("blur", fadePointer);
+
+    const observer = new MutationObserver(() => {
+      theme = readTheme();
+      if (reducedMotion) draw(20, false);
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"],
+    });
+
+    if (!shaderEpoch) shaderEpoch = performance.now();
+    const startTime = shaderEpoch;
+    let lastFrame = 0;
+    const frameBudget = 1000 / Math.max(1, frameRate);
+    const reducedMotionStaticTime = 20;
+
+    function render(now: number) {
+      rafRef.current = 0;
+      if (reducedMotion || !isVisible) return;
+      if (now - lastFrame >= frameBudget) {
+        lastFrame = now;
+        draw((now - startTime) * 0.001);
+      }
+      if (isVisible && !reducedMotion) {
+        rafRef.current = requestAnimationFrame(render);
+      }
+    }
+
+    function startAnimation() {
+      if (!reducedMotion && isVisible && !rafRef.current) {
+        rafRef.current = requestAnimationFrame(render);
+      }
+    }
+
+    function stopAnimation() {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = 0;
+      }
+    }
+
+    function updateVisibility(visible: boolean) {
+      isVisible = visible;
+      if (visible) startAnimation();
+      else stopAnimation();
+    }
+
+    function checkViewport() {
+      const rect = container.getBoundingClientRect();
+      updateVisibility(rect.bottom >= 0 && rect.top <= window.innerHeight);
+    }
+
+    if (typeof IntersectionObserver === "undefined") {
+      window.addEventListener("scroll", checkViewport, {
+        capture: true,
+        passive: true,
+      });
+      window.addEventListener("resize", checkViewport);
+      checkViewport();
+    } else {
+      visibilityObserver = new IntersectionObserver(
+        ([entry]) => updateVisibility(entry?.isIntersecting ?? false),
+        { threshold: 0 },
+      );
+      visibilityObserver.observe(container);
+    }
+
+    function handleReducedMotionChange() {
+      reducedMotion = reducedMotionQuery?.matches ?? false;
+      if (reducedMotion) {
+        stopAnimation();
+        lastFrame = 0;
+        draw(reducedMotionStaticTime, false);
+      } else {
+        startAnimation();
+      }
+    }
+
+    draw(
+      reducedMotion
+        ? reducedMotionStaticTime
+        : (performance.now() - startTime) * 0.001,
+      !reducedMotion,
+    );
+    if (reducedMotionQuery) {
+      reducedMotionQuery.addEventListener("change", handleReducedMotionChange);
+    }
+    if (!reducedMotion) startAnimation();
+
+    return () => {
+      stopAnimation();
+      if (reducedMotionQuery) {
+        reducedMotionQuery.removeEventListener(
+          "change",
+          handleReducedMotionChange,
+        );
+      }
+      observer.disconnect();
+      resizeObserver?.disconnect();
+      visibilityObserver?.disconnect();
+      if (!visibilityObserver) {
+        window.removeEventListener("scroll", checkViewport, true);
+        window.removeEventListener("resize", checkViewport);
+      }
+      window.removeEventListener("resize", resize);
+      window.removeEventListener("pointermove", handlePointerMove);
+      window.removeEventListener("mousemove", handlePointerMove);
+      document.removeEventListener("pointerleave", fadePointer);
+      window.removeEventListener("blur", fadePointer);
+      gl.deleteProgram(program);
+      gl.deleteShader(vs);
+      gl.deleteShader(fs);
+      gl.deleteBuffer(buf);
+      gl.getExtension("WEBGL_lose_context")?.loseContext();
+    };
+  }, [frameRate, transparent]);
+
+  return (
+    <div
+      ref={containerRef}
+      aria-hidden="true"
+      className={className}
+      style={{
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        ...style,
+      }}
+      data-agent-native-wave
+      data-agent-native-starfield
+      data-agent-native-wave-transparent={transparent ? "true" : undefined}
+      data-agent-native-starfield-transparent={transparent ? "true" : undefined}
+    >
+      <canvas
+        ref={canvasRef}
+        style={{ display: "block", width: "100%", height: "100%" }}
+      />
+    </div>
+  );
+}

package/src/app/shared/index.ts

@@ -16,4 +16,5 @@ export * from "./PrimitiveButton.js";
 export * from "./RouteTransitionIndicator.js";
 export * from "./RuntimeConfigNotice.js";
 export * from "./StarfieldBackground.js";
+export * from "./WaveBackground.js";
 export * from "./Turnstile.js";