GPU Cubic-Bezier Burst

'use client';

import { useEffect, useRef, useState } from 'react';
import * as THREE from 'three';
import { cn } from '@/lib/utils';
import { useRaf } from '@/hooks/use-raf';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { useResizeObserver } from '@/hooks/use-resize-observer';
import { createRng } from '@/lib/prng';
import { disposeObject, disposeRenderer, hasWebGL, pixelRatio } from '@/lib/webgl';
import { GPU_BEZIER_BURST_FRAG, GPU_BEZIER_BURST_VERT } from '@/components/motion/shaders/gpu-bezier-burst';

/* ==========================================================================
   GPU Cubic-Bezier Burst
   --------------------------------------------------------------------------
   Concentric rings of dots. Fire a sector and its particles burst outward,
   each on its own cubic-bezier easing curve, solved in the vertex shader by
   Newton's method.

   Two ideas carry the component:

   1. The easing lives on the GPU. Control points ride in a per-vertex
      attribute, so 200 particles can have 200 different curves while the CPU
      does nothing per frame but advance a clock. Solving on the CPU would mean
      either one shared easing for the whole burst, or a buffer upload a frame.

   2. Two clocks. `uRotation` is ambient decoration and freezes under reduced
      motion. `uBurstTime` is feedback for something the user did, and keeps
      running. Reduced motion means less gratuitous movement, not an interface
      that stops answering.
   ========================================================================== */

export interface GpuBezierBurstProps {
  /** Concentric rings in the resting field. */
  ringCount?: number;
  /** Dots on the outermost ring; inner rings scale down to keep density even. */
  ringDots?: number;
  /** Radius of the innermost ring, as a fraction of the outermost. */
  innerRadius?: number;
  /** Sectors that can be fired independently. */
  groups?: number;
  /** Burst particles per sector. */
  burstDots?: number;
  /** Ambient ring rotation, radians per second. */
  spinSpeed?: number;
  /** Seconds between automatic firings. */
  chordInterval?: number;
  /** Seconds a single particle's flight lasts. */
  burstDuration?: number;
  /** How far a particle travels, in CSS pixels. */
  burstRadius?: number;
  /** Dot radius multiplier, in CSS pixels. */
  dotScale?: number;
  /** Model-to-pixel scale as a fraction of the container short side. */
  viewScale?: number;
  opacity?: number;
  color?: string;
  burstColor?: string;
  seed?: number | string;
  className?: string;
}

interface Uniforms {
  /** three types `uniforms` as an open record; a closed interface is not assignable. */
  [name: string]: THREE.IUniform;
  uBurstTime: { value: number };
  uRotation: { value: number };
  uViewScale: { value: number };
  uPixelRatio: { value: number };
  uDotScale: { value: number };
  uOpacity: { value: number };
  uBurstDuration: { value: number };
  uBurstRadius: { value: number };
  uColor: { value: THREE.Color };
  uBurstColor: { value: THREE.Color };
}

interface Stage {
  resize: (width: number, height: number) => void;
  step: (dt: number) => void;
}

/** Rotation the ring is frozen at under reduced motion, in radians. */
const STATIC_ROTATION = 0.35;

/**
 * Largest per-particle launch delay, in seconds. A burst whose particles all
 * leave on the same frame reads as one expanding ring; staggering the launches
 * over ~90ms reads as a spray. Kept well under `burstDuration` so the last
 * particle leaves before the first has landed.
 */
const MAX_LAUNCH_DELAY = 0.09;

/** Resting dots are smaller than burst particles so the burst reads as the event. */
const RING_DOT_SCALE = 0.7;
const BURST_DOT_SCALE = 1.15;

// #region critical
export function GpuBezierBurst({
  ringCount = 4,
  ringDots = 190,
  innerRadius = 0.55,
  groups = 6,
  burstDots = 34,
  spinSpeed = 0.18,
  chordInterval = 1.5,
  burstDuration = 0.45,
  burstRadius = 26,
  dotScale = 1,
  viewScale = 0.4,
  opacity = 1,
  color = '#6f757e',
  burstColor = '#ffffff',
  seed = 'gpu-bezier-burst',
  className,
}: GpuBezierBurstProps) {
  const host = useRef<HTMLDivElement>(null);
  const stage = useRef<Stage | null>(null);
  const [unsupported, setUnsupported] = useState(false);

  // Gates the frame loop under reduced motion: no ambient animation, but a
  // burst in flight still needs frames until it lands.
  const [burstLive, setBurstLive] = useState(false);

  const { width, height } = useResizeObserver(host);
  const size = useRef({ width, height });
  size.current = { width, height };

  const reduced = useReducedMotion();
  // Read inside the frame loop rather than closed over, so toggling the OS
  // setting does not tear down and rebuild the GL context.
  const reducedRef = useRef(reduced);
  reducedRef.current = reduced;

  const ready = width > 0 && height > 0;

  useEffect(() => {
    const el = host.current;
    if (!el || !ready) return;

    if (!hasWebGL()) {
      setUnsupported(true);
      return;
    }

    const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
    renderer.setPixelRatio(pixelRatio());
    renderer.setClearAlpha(0);

    const scene = new THREE.Scene();
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
    camera.position.z = 1;

    const rng = createRng(seed);

    const positions: number[] = [];
    const burstData: number[] = [];
    const bezier: number[] = [];

    /* ------------------------------------------------------------------
       Resting rings. Dot count scales with radius so the inner rings are
       not visibly denser than the outer ones — constant dots-per-ring is
       the classic tell of a generated field.
       ------------------------------------------------------------------ */
    for (let r = 0; r < ringCount; r += 1) {
      const t = ringCount === 1 ? 1 : r / (ringCount - 1);
      const radius = innerRadius + (1 - innerRadius) * t;
      const count = Math.max(8, Math.round(ringDots * radius));

      for (let i = 0; i < count; i += 1) {
        const angle = (i / count) * Math.PI * 2 + rng() * 0.01;
        positions.push(Math.cos(angle) * radius, Math.sin(angle) * radius, 0);
        // isBurst 0: these never move, so flight angle, delay and curve are unused.
        burstData.push(0, angle, RING_DOT_SCALE, 0);
        bezier.push(0, 0, 1, 1);
      }
    }

    /* ------------------------------------------------------------------
       Burst particles, grouped into contiguous sectors so firing one is a
       single contiguous write into the start-time buffer. They sit on the
       outer ring invisible until fired: displacing the resting dots
       instead would leave a hole in the ring, then pop them back.
       ------------------------------------------------------------------ */
    const groupRanges: { start: number; end: number }[] = [];
    const restingDots = positions.length / 3;
    const sector = (Math.PI * 2) / groups;

    for (let g = 0; g < groups; g += 1) {
      const start = positions.length / 3;
      const centre = g * sector;

      for (let i = 0; i < burstDots; i += 1) {
        const angle = centre + (rng() - 0.5) * sector * 0.9;
        const radius = 0.94 + rng() * 0.06;
        positions.push(Math.cos(angle) * radius, Math.sin(angle) * radius, 0);
        burstData.push(
          1,
          // Flight direction fans slightly off pure radial, so the burst
          // spreads instead of leaving on rails.
          angle + (rng() - 0.5) * 0.35,
          BURST_DOT_SCALE,
          rng() * MAX_LAUNCH_DELAY,
        );

        /* Each particle gets its own curve, jittered around an ease-out
           (0, 0.9, 0.5, 1). x-coordinates are clamped to 0..1 because the
           solver needs the curve monotonic in x — exactly the constraint
           CSS puts on cubic-bezier(). y is free to overshoot. */
        bezier.push(
          Math.min(1, Math.max(0, rng() * 0.25)),
          0.9 + (rng() - 0.5) * 0.3,
          Math.min(1, Math.max(0, 0.5 + (rng() - 0.5) * 0.4)),
          0.95 + rng() * 0.1,
        );
      }
      groupRanges.push({ start, end: positions.length / 3 });
    }

    const total = positions.length / 3;
    const starts = new Float32Array(total);

    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(Float32Array.from(positions), 3));
    geometry.setAttribute('aBurstData', new THREE.BufferAttribute(Float32Array.from(burstData), 4));
    geometry.setAttribute('aBezier', new THREE.BufferAttribute(Float32Array.from(bezier), 4));

    const startAttribute = new THREE.BufferAttribute(starts, 1);
    // The only buffer that changes at runtime, and only on a firing.
    startAttribute.setUsage(THREE.DynamicDrawUsage);
    geometry.setAttribute('aStart', startAttribute);

    const uniforms: Uniforms = {
      uBurstTime: { value: 0 },
      uRotation: { value: STATIC_ROTATION },
      uViewScale: { value: 1 },
      uPixelRatio: { value: renderer.getPixelRatio() },
      uDotScale: { value: dotScale },
      uOpacity: { value: opacity },
      uBurstDuration: { value: burstDuration },
      uBurstRadius: { value: burstRadius },
      uColor: { value: new THREE.Color(color) },
      uBurstColor: { value: new THREE.Color(burstColor) },
    };

    const material = new THREE.ShaderMaterial({
      vertexShader: GPU_BEZIER_BURST_VERT,
      fragmentShader: GPU_BEZIER_BURST_FRAG,
      uniforms,
      transparent: true,
      depthTest: false,
      depthWrite: false,
    });

    const points = new THREE.Points(geometry, material);
    // Vertices are unit-scale and the real placement happens in the shader, so
    // three's bounding sphere does not describe what is on screen.
    points.frustumCulled = false;
    scene.add(points);

    el.appendChild(renderer.domElement);
    renderer.domElement.style.display = 'block';
    renderer.domElement.style.width = '100%';
    renderer.domElement.style.height = '100%';

    /* -- the two clocks ------------------------------------------------ */
    let rotation = STATIC_ROTATION; // ambient; frozen under reduced motion
    let burstTime = 1; // feedback; always runs. Starts at 1 so a start
    //                    time of 0 can mean 'never fired'.
    let nextFire = chordInterval;
    let liveUntil = 0;
    let cursor = 0;

    const fire = (group: number) => {
      const range = groupRanges[group % groupRanges.length];
      if (!range) return;
      for (let i = range.start; i < range.end; i += 1) starts[i] = burstTime;
      startAttribute.needsUpdate = true;
      liveUntil = burstTime + burstDuration + MAX_LAUNCH_DELAY + 0.05;
      setBurstLive(true);
    };

    const render = () => renderer.render(scene, camera);

    const step = (dt: number) => {
      burstTime += dt;

      if (!reducedRef.current) {
        rotation += dt * spinSpeed;
        if (burstTime >= nextFire) {
          fire(cursor);
          cursor += 1;
          nextFire = burstTime + chordInterval;
        }
      } else if (burstTime > liveUntil) {
        // Nothing in flight and no ambient motion to draw: stand the loop
        // down. Idempotent, so this is safe to call every frame.
        setBurstLive(false);
      }

      uniforms.uRotation.value = rotation;
      uniforms.uBurstTime.value = burstTime;
      render();
    };

    const resize = (w: number, h: number) => {
      renderer.setSize(w, h, false);
      camera.left = -w / 2;
      camera.right = w / 2;
      camera.top = h / 2;
      camera.bottom = -h / 2;
      camera.updateProjectionMatrix();
      uniforms.uViewScale.value = Math.min(w, h) * viewScale;
      uniforms.uPixelRatio.value = renderer.getPixelRatio();
      render();
    };

    /* -- pointer: user-initiated, so it fires under reduced motion too -- */
    const onPointerDown = (event: PointerEvent) => {
      const rect = el.getBoundingClientRect();
      const x = event.clientX - rect.left - rect.width / 2;
      // Screen y grows downward, model y grows upward.
      const y = rect.height / 2 - (event.clientY - rect.top);
      // Undo the ambient rotation so the sector under the cursor is the one
      // that fires, not the one that was there before the ring turned.
      const angle = Math.atan2(y, x) - rotation;
      const normalised = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2);
      fire(Math.round(normalised / sector) % groups);
    };
    el.addEventListener('pointerdown', onPointerDown);

    resize(size.current.width, size.current.height);
    stage.current = { resize, step };

    return () => {
      stage.current = null;
      el.removeEventListener('pointerdown', onPointerDown);
      disposeObject(scene);
      material.dispose();
      disposeRenderer(renderer);
      renderer.domElement.remove();
    };
  }, [
    ready,
    ringCount,
    ringDots,
    innerRadius,
    groups,
    burstDots,
    spinSpeed,
    chordInterval,
    burstDuration,
    burstRadius,
    dotScale,
    viewScale,
    opacity,
    color,
    burstColor,
    seed,
  ]);

  useEffect(() => {
    stage.current?.resize(width, height);
  }, [width, height]);

  useRaf((dt) => stage.current?.step(dt), ready && !unsupported && (!reduced || burstLive));
  // #endregion critical

  return (
    <div
      ref={host}
      className={cn('relative h-full w-full cursor-pointer overflow-hidden', className)}
    >
      {unsupported ? (
        <div className="absolute inset-0 flex items-center justify-center">
          <div className="aspect-square h-[70%] rounded-full border border-line" />
        </div>
      ) : null}
    </div>
  );
}

/* ==========================================================================
   GPU Cubic-Bezier Burst — GLSL
   --------------------------------------------------------------------------
   A CSS cubic-bezier() easing curve, solved in the vertex shader.

   The curve is defined parametrically: for a parameter t you get a point
   (x(t), y(t)), but easing needs y at a given *x*, and there is no closed form
   for t(x) on a cubic. CSS engines solve it numerically; so does this, with
   Newton's method, 8 iterations, per vertex, per frame.

   Why bother when the CPU could compute one eased value and hand it over as a
   uniform? Because then every particle in the burst shares one easing. Here
   the control points ride in an attribute, so each particle carries its own
   curve — one flies out sharply and settles, its neighbour accelerates late —
   and the CPU does nothing per frame but advance a clock.
   ========================================================================== */

/**
 * `aBurstData = vec4(isBurst, flightAngle, sizeScale, delay)`
 * `aBezier    = vec4(p1x, p1y, p2x, p2y)` — the same four numbers CSS takes.
 * `aStart`    = burst-clock time this particle was fired at; 0 means never.
 */
export const GPU_BEZIER_BURST_VERT = /* glsl */ `
attribute vec4 aBurstData;
attribute vec4 aBezier;
attribute float aStart;

uniform float uBurstTime;
uniform float uRotation;
uniform float uViewScale;
uniform float uPixelRatio;
uniform float uDotScale;
uniform float uOpacity;
uniform float uBurstDuration;
uniform float uBurstRadius;

varying float vAlpha;
varying float vAlphaScale;
varying float vBurst;
varying float vHeat;

/* Newton's method converges quadratically on a well-behaved cubic, so 8 steps
   is far past the point of diminishing returns — 4 already lands inside a
   pixel. 8 is cheap insurance for control points near 0 or 1, where the
   derivative gets small and convergence slows. */
const int NEWTON_ITERATIONS = 8;

/* Bail out if the derivative collapses. Without the guard, a curve with a flat
   segment divides by ~0 and t explodes to NaN, which propagates into
   gl_Position and silently drops the vertex. */
const float MIN_DERIVATIVE = 0.000001;

const float MIN_POINT_SIZE = 2.0;
const float UNCLAMPED_MIN_POINT_SIZE = 1.0;

/* Burst dots shrink to 45% as they fly. Constant-size particles read as a
   spray of confetti; shrinking ones read as one thing dissipating. */
const float BURST_END_SIZE = 0.45;

/**
 * Solve y for a given x on the cubic with control points (0,0), (b.xy),
 * (b.zw), (1,1). Both endpoints are pinned, which is why only two points and
 * four numbers are needed, exactly as in CSS.
 */
float cubicBezier(float x, vec4 bezier) {
  float t = x;                       // x is a good first guess: the curve is monotonic in x
  for (int i = 0; i < NEWTON_ITERATIONS; i++) {
    float ct = 1.0 - t;
    // Bernstein form with P0x = 0 and P3x = 1 folded in.
    float bx = 3.0 * ct * ct * t * bezier.x + 3.0 * ct * t * t * bezier.z + t * t * t;
    float dx = 3.0 * ct * ct * bezier.x
             + 6.0 * ct * t * (bezier.z - bezier.x)
             + 3.0 * t * t * (1.0 - bezier.z);
    if (abs(dx) < MIN_DERIVATIVE) break;
    t -= (bx - x) / dx;
    t = clamp(t, 0.0, 1.0);          // control points may overshoot; the parameter may not
  }
  float ct = 1.0 - t;
  return 3.0 * ct * ct * t * bezier.y + 3.0 * ct * t * t * bezier.w + t * t * t;
}

vec2 rotate2(vec2 p, float radians) {
  float c = cos(radians);
  float s = sin(radians);
  return vec2(c * p.x - s * p.y, s * p.x + c * p.y);
}

void main() {
  float isBurst   = aBurstData.x;
  float angle     = aBurstData.y;
  float sizeScale = aBurstData.z;
  float delay     = aBurstData.w;

  vec2 base = rotate2(position.xy, uRotation) * uViewScale;

  // Rest state: ring dots sit still and visible, burst dots are invisible
  // until they are fired. Keeping them as separate dots rather than displacing
  // the ring dots is what stops the ring popping back at the end of a burst.
  float alpha = mix(1.0, 0.0, isBurst);
  float size  = 1.0;
  float heat  = 0.0;

  float age = uBurstTime - aStart - delay;
  if (isBurst > 0.5 && aStart > 0.0 && age >= 0.0 && age <= uBurstDuration) {
    float t = age / uBurstDuration;

    // The whole point of the file: this particle's OWN easing curve.
    float eased = cubicBezier(t, aBezier);

    // uRotation is added to the baked angle so the flight stays radial to the
    // ring while the ring is turning underneath it.
    base += vec2(cos(angle + uRotation), sin(angle + uRotation)) * eased * uBurstRadius;
    alpha = 1.0 - t;                 // linear fade against an eased flight
    size  = mix(1.0, BURST_END_SIZE, t);
    heat  = 1.0 - eased;             // hottest at launch, cooling as it settles
  }

  vBurst = isBurst;
  vHeat  = heat;
  vAlpha = alpha * uOpacity;

  gl_Position = projectionMatrix * modelViewMatrix * vec4(base, 0.0, 1.0);

  float raw       = sizeScale * size * uDotScale * 2.0 * uPixelRatio;
  float unclamped = max(UNCLAMPED_MIN_POINT_SIZE, raw);
  float clamped   = max(MIN_POINT_SIZE, raw);
  vAlphaScale  = (unclamped * unclamped) / (clamped * clamped);
  gl_PointSize = clamped;
}
`;

export const GPU_BEZIER_BURST_FRAG = /* glsl */ `
precision mediump float;

uniform vec3 uColor;
uniform vec3 uBurstColor;

varying float vAlpha;
varying float vAlphaScale;
varying float vBurst;
varying float vHeat;

const float ALPHA_EPSILON = 0.003;

void main() {
  vec2  centered = gl_PointCoord - vec2(0.5);
  float disc = 1.0 - smoothstep(0.43, 0.5, length(centered));

  float alpha = vAlpha * vAlphaScale * disc;
  if (alpha <= ALPHA_EPSILON) discard;

  gl_FragColor = vec4(mix(uColor, uBurstColor, vBurst * vHeat), alpha);
}
`;

/* ==========================================================================
   Seeded randomness.
   --------------------------------------------------------------------------
   `Math.random()` in a particle field means the server and the client
   disagree, which React reports as a hydration mismatch, and it means the
   layout is different on every reload so a visual regression is invisible.
   Every component that scatters something uses a seeded generator instead.
   ========================================================================== */

export type Rng = () => number;

/**
 * mulberry32 — 32-bit, fast, and good enough for visual scatter. Returns a
 * function yielding floats in [0, 1).
 */
export function mulberry32(seed: number): Rng {
  let a = seed >>> 0;
  return function next() {
    a = (a + 0x6d2b79f5) >>> 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

/** Turn any string into a 32-bit seed, so `seed="hero"` is reproducible. */
export function hashSeed(input: string): number {
  let h = 2166136261 >>> 0;
  for (let i = 0; i < input.length; i++) {
    h ^= input.charCodeAt(i);
    h = Math.imul(h, 16777619);
  }
  return h >>> 0;
}

export function createRng(seed: number | string): Rng {
  return mulberry32(typeof seed === 'string' ? hashSeed(seed) : seed);
}

export function randRange(rng: Rng, min: number, max: number): number {
  return min + rng() * (max - min);
}

export function randInt(rng: Rng, min: number, maxExclusive: number): number {
  return Math.floor(randRange(rng, min, maxExclusive));
}

/**
 * Uniform point on a unit sphere. Naive angle-pairing clusters at the poles;
 * this inverts the cosine so density is even.
 */
export function randOnSphere(rng: Rng): [number, number, number] {
  const u = rng() * 2 - 1;
  const theta = rng() * Math.PI * 2;
  const r = Math.sqrt(1 - u * u);
  return [r * Math.cos(theta), r * Math.sin(theta), u];
}

/** Uniform point in a unit disc — `sqrt` prevents crowding at the centre. */
export function randInDisc(rng: Rng): [number, number] {
  const r = Math.sqrt(rng());
  const theta = rng() * Math.PI * 2;
  return [r * Math.cos(theta), r * Math.sin(theta)];
}

/** In-place Fisher-Yates using the supplied generator. */
export function shuffle<T>(rng: Rng, arr: T[]): T[] {
  for (let i = arr.length - 1; i > 0; i--) {
    const j = randInt(rng, 0, i + 1);
    const a = arr[i] as T;
    const b = arr[j] as T;
    arr[i] = b;
    arr[j] = a;
  }
  return arr;
}

'use client';

import { useEffect, useRef } from 'react';

/* ==========================================================================
   One shared requestAnimationFrame loop.
   --------------------------------------------------------------------------
   Forty components each calling requestAnimationFrame means forty callbacks
   the browser schedules separately and forty chances to read layout after a
   write. One loop, one ordered pass, one place to clamp delta time.

   Delta is clamped to 100 ms. Without that, returning to a backgrounded tab
   delivers a multi-second dt and every physics integration in the page
   explodes on the first frame back.
   ========================================================================== */

export type RafCallback = (dt: number, elapsed: number) => void;

const callbacks = new Set<RafCallback>();
let frame = 0;
let last = 0;
let start = 0;

const MAX_DT = 0.1;
const DEFAULT_DT = 1 / 60;

function tick(now: number) {
  frame = requestAnimationFrame(tick);
  const dt = last === 0 ? DEFAULT_DT : Math.min((now - last) / 1000, MAX_DT);
  last = now;
  const elapsed = (now - start) / 1000;
  // Copy: a callback may unsubscribe itself (or another) mid-iteration.
  for (const cb of Array.from(callbacks)) {
    if (callbacks.has(cb)) cb(dt, elapsed);
  }
}

function subscribe(cb: RafCallback) {
  callbacks.add(cb);
  if (frame === 0) {
    start = performance.now();
    last = 0;
    frame = requestAnimationFrame(tick);
  }
  return () => {
    callbacks.delete(cb);
    if (callbacks.size === 0 && frame !== 0) {
      cancelAnimationFrame(frame);
      frame = 0;
      last = 0;
    }
  };
}

/**
 * Run `cb` every frame while `enabled`.
 *
 * The callback is held in a ref, so it does not need to be memoised and the
 * subscription is never torn down just because the closure changed identity.
 */
export function useRaf(cb: RafCallback, enabled = true): void {
  const ref = useRef(cb);
  ref.current = cb;

  useEffect(() => {
    if (!enabled) return;
    return subscribe((dt, elapsed) => ref.current(dt, elapsed));
  }, [enabled]);
}

'use client';

import { useSyncExternalStore } from 'react';

/* ==========================================================================
   prefers-reduced-motion, SSR-safe.
   --------------------------------------------------------------------------
   useSyncExternalStore rather than useState + useEffect: the server snapshot
   is an explicit `false`, so the markup React renders on the server and the
   markup it hydrates with agree, and the real value lands in the same commit
   as hydration instead of one frame later. A useEffect version flashes the
   animated variant before removing it — the exact thing the user asked not to
   see.

   Reduced motion is not "duration: 0". For most components here it means a
   different render: the final state, a static poster, or a paused frame.
   ========================================================================== */

const QUERY = '(prefers-reduced-motion: reduce)';

function subscribe(onChange: () => void) {
  if (typeof window === 'undefined' || !window.matchMedia) return () => {};
  const mql = window.matchMedia(QUERY);
  mql.addEventListener('change', onChange);
  return () => mql.removeEventListener('change', onChange);
}

function getSnapshot() {
  if (typeof window === 'undefined' || !window.matchMedia) return false;
  return window.matchMedia(QUERY).matches;
}

function getServerSnapshot() {
  return false;
}

export function useReducedMotion(): boolean {
  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
}

/** Generic media-query hook, same SSR guarantees. */
export function useMediaQuery(query: string): boolean {
  return useSyncExternalStore(
    (onChange) => {
      if (typeof window === 'undefined' || !window.matchMedia) return () => {};
      const mql = window.matchMedia(query);
      mql.addEventListener('change', onChange);
      return () => mql.removeEventListener('change', onChange);
    },
    () => {
      if (typeof window === 'undefined' || !window.matchMedia) return false;
      return window.matchMedia(query).matches;
    },
    () => false,
  );
}

'use client';

import { useEffect, useState, type RefObject } from 'react';

/* ==========================================================================
   Element size, from one shared ResizeObserver.
   --------------------------------------------------------------------------
   Sized from the element rather than the window because a preview in a grid
   cell resizes when the grid reflows, not when the viewport does. Reading
   `window.innerWidth` is the reason so many canvas components are correct on
   load and wrong after a sidebar opens.
   ========================================================================== */

export interface Size {
  width: number;
  height: number;
}

type Handler = (size: Size) => void;

let observer: ResizeObserver | null = null;
const handlers = new Map<Element, Handler>();

function ensureObserver(): ResizeObserver | null {
  if (typeof ResizeObserver === 'undefined') return null;
  observer ??= new ResizeObserver((entries) => {
    for (const entry of entries) {
      const box = entry.contentBoxSize?.[0];
      const size: Size = box
        ? { width: box.inlineSize, height: box.blockSize }
        : { width: entry.contentRect.width, height: entry.contentRect.height };
      handlers.get(entry.target)?.(size);
    }
  });
  return observer;
}

export function useResizeObserver(ref: RefObject<Element | null>): Size {
  const [size, setSize] = useState<Size>({ width: 0, height: 0 });

  useEffect(() => {
    const el = ref.current;
    const ro = ensureObserver();
    if (!el || !ro) return;

    // Seed synchronously: waiting for the first observer callback leaves one
    // frame where a canvas is sized 0x0, which some drivers log as an error.
    const rect = el.getBoundingClientRect();
    setSize({ width: rect.width, height: rect.height });

    handlers.set(el, (next) =>
      setSize((prev) =>
        prev.width === next.width && prev.height === next.height ? prev : next,
      ),
    );
    ro.observe(el);

    return () => {
      handlers.delete(el);
      ro.unobserve(el);
    };
  }, [ref]);

  return size;
}

import type * as THREE from 'three';

/* ==========================================================================
   WebGL context lifecycle.
   --------------------------------------------------------------------------
   Chromium allows roughly 16 live WebGL contexts per RENDERER PROCESS (8 on
   low-end devices). Creating the 17th does not fail — it fires
   `webglcontextlost` on the OLDEST one, so an unrelated component elsewhere
   on the page goes black. Same-origin iframes share the renderer process, so
   isolating previews in iframes does not raise the ceiling.

   The only real fix is to release contexts on unmount, and `renderer.dispose()`
   ALONE DOES NOT DO THAT. It frees GPU objects but leaves the context itself
   alive until GC decides otherwise, which may be never. `forceContextLoss()`
   is the call that actually hands it back.
   ========================================================================== */

/**
 * Fully release a three.js renderer. Call this in the `useEffect` cleanup of
 * any component that constructs a `WebGLRenderer` — the preview host drives
 * unmount via `<Activity mode="hidden">`, so ordinary cleanup IS the disposal
 * path and nothing component-specific is required.
 */
export function disposeRenderer(renderer: THREE.WebGLRenderer | null | undefined): void {
  if (!renderer) return;

  // Stop the loop first: a queued frame that renders into a lost context
  // throws, and the throw escapes the cleanup function.
  renderer.setAnimationLoop(null);
  renderer.dispose();
  renderer.forceContextLoss();

  const canvas = renderer.domElement;
  if (canvas) {
    // Zeroing the backing store releases the drawing buffer immediately
    // instead of holding width×height×4 bytes until the node is collected.
    canvas.width = 0;
    canvas.height = 0;
  }
}

/**
 * Release a raw WebGL context (ogl, or hand-written GL). The extension is the
 * only portable way to do it; it is absent in some headless configurations,
 * hence the optional call.
 */
export function loseContext(gl: WebGLRenderingContext | WebGL2RenderingContext | null | undefined): void {
  if (!gl) return;
  gl.getExtension('WEBGL_lose_context')?.loseContext();
}

/** Recursively dispose geometries, materials and textures under a root. */
export function disposeObject(root: THREE.Object3D | null | undefined): void {
  if (!root) return;
  root.traverse((obj) => {
    const mesh = obj as THREE.Mesh;
    mesh.geometry?.dispose?.();
    const material = mesh.material;
    if (!material) return;
    const materials = Array.isArray(material) ? material : [material];
    for (const m of materials) {
      for (const value of Object.values(m as unknown as Record<string, unknown>)) {
        if (value && typeof value === 'object' && 'isTexture' in value) {
          (value as THREE.Texture).dispose();
        }
      }
      m.dispose?.();
    }
  });
}

/**
 * Device pixel ratio capped for fill-rate. Above 2 the visual gain is nil and
 * the cost is quadratic; on a 3x phone an uncapped full-screen shader is the
 * single most common cause of a janky first paint.
 */
export function pixelRatio(max = 2): number {
  if (typeof window === 'undefined') return 1;
  return Math.min(window.devicePixelRatio || 1, max);
}

/**
 * Whether WebGL is actually available. Some browsers expose the constructor
 * but fail to create a context (blocklisted GPU, no hardware acceleration);
 * a component that assumes success renders a permanently blank box.
 */
export function hasWebGL(): boolean {
  if (typeof document === 'undefined') return false;
  try {
    const canvas = document.createElement('canvas');
    const gl =
      canvas.getContext('webgl2') ??
      canvas.getContext('webgl') ??
      canvas.getContext('experimental-webgl');
    if (!gl) return false;
    (gl as WebGLRenderingContext).getExtension('WEBGL_lose_context')?.loseContext();
    return true;
  } catch {
    return false;
  }
}