Single-Draw Orbit Rings

'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 {
  ORBIT_RING_POINTS_FRAG,
  ORBIT_RING_POINTS_VERT,
} from '@/components/motion/shaders/orbit-ring-points';

/* ==========================================================================
   Single-Draw Orbit Rings
   --------------------------------------------------------------------------
   Concentric rings of dots, each ring carrying one bright marker travelling
   it. Every dot in the system — static or orbiting, any ring — is a vertex of
   one `THREE.Points`, so the whole structure is a single draw call no matter
   how many rings you ask for.

   The trick is that `position` carries no information. It is zeroed for every
   vertex; a packed `vec4` attribute says which ring a dot belongs to, at what
   angle, whether it is a path dot or a marker, and how big it is. The vertex
   shader does the rest.
   ========================================================================== */

export interface OrbitRingPointsProps {
  /** Number of concentric rings. Each gets its own marker. */
  ringCount?: number;
  /** Static path dots per ring. */
  dotsPerRing?: number;
  /** Marker angular speed, radians per second. */
  speed?: number;
  /** Outermost ring diameter as a fraction of the container's short side. */
  baseRadius?: number;
  /** Path dot radius in CSS pixels. */
  dotRadius?: number;
  /** Marker radius in CSS pixels. */
  markerRadius?: number;
  /** Overall opacity multiplier applied in the vertex shader. */
  opacity?: number;
  /** Path dot colour. Any value `THREE.Color` accepts. */
  color?: string;
  /** Marker colour. */
  markerColor?: string;
  /** Seed for the angular scatter. Same seed, same ring every reload. */
  seed?: number | string;
  className?: string;
}

interface Uniforms {
  /** three types `uniforms` as an open record; without this the object is not assignable. */
  [name: string]: THREE.IUniform;
  uElapsed: { value: number };
  uExtent: { value: number };
  uPixelRatio: { value: number };
  uOpacity: { value: number };
  uRingCount: { value: number };
  uSpeed: { value: number };
  uBaseRadius: { value: number };
  uColor: { value: THREE.Color };
  uMarkerColor: { value: THREE.Color };
}

interface Stage {
  renderer: THREE.WebGLRenderer;
  scene: THREE.Scene;
  camera: THREE.OrthographicCamera;
  uniforms: Uniforms;
  resize: (width: number, height: number) => void;
  draw: (elapsed: number) => void;
}

/** Marker angle when motion is suppressed: twelve o'clock, cycle not started. */
const STATIC_ELAPSED = 0;

// #region critical
export function OrbitRingPoints({
  ringCount = 5,
  dotsPerRing = 170,
  speed = 0.3,
  baseRadius = 0.75,
  dotRadius = 1,
  markerRadius = 3,
  opacity = 1,
  color = '#8a8f98',
  markerColor = '#ffffff',
  seed = 'orbit-ring-points',
  className,
}: OrbitRingPointsProps) {
  const host = useRef<HTMLDivElement>(null);
  const stage = useRef<Stage | null>(null);
  const [unsupported, setUnsupported] = useState(false);

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

  const reduced = useReducedMotion();
  const ready = width > 0 && height > 0;

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

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

    // `antialias: false` is deliberate: the fragment shader anti-aliases each
    // disc itself with a smoothstep, so MSAA would pay for a whole extra
    // sample buffer to solve a problem that is already solved.
    const renderer = new THREE.WebGLRenderer({ antialias: false, alpha: true });
    renderer.setPixelRatio(pixelRatio());
    renderer.setClearAlpha(0);

    const scene = new THREE.Scene();
    // Orthographic and 1:1 with CSS pixels, so `gl_PointSize` in the shader is
    // a real pixel count and the ring radii are real pixel radii.
    const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0.1, 10);
    camera.position.z = 1;

    const rng = createRng(seed);
    const perRing = dotsPerRing + 1; // path dots + one marker
    const total = ringCount * perRing;

    const positions = new Float32Array(total * 3); // stays all zeros
    const pointData = new Float32Array(total * 4);

    let at = 0;
    for (let ring = 0; ring < ringCount; ring += 1) {
      // Sorting the angles is not cosmetic. Points are drawn in buffer order,
      // and an unsorted ring interleaves near and far dots so the alpha blend
      // stipples along the path instead of reading as one continuous line.
      const angles = new Float32Array(dotsPerRing);
      for (let i = 0; i < dotsPerRing; i += 1) angles[i] = rng() * Math.PI * 2;
      angles.sort();

      for (let i = 0; i < dotsPerRing; i += 1) {
        pointData[at] = 0;
        pointData[at + 1] = ring;
        pointData[at + 2] = angles[i] ?? 0;
        pointData[at + 3] = dotRadius;
        at += 4;
      }

      pointData[at] = 1;
      pointData[at + 1] = ring;
      pointData[at + 2] = rng() * Math.PI * 2;
      pointData[at + 3] = markerRadius;
      at += 4;
    }

    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
    geometry.setAttribute('aPointData', new THREE.BufferAttribute(pointData, 4));

    const uniforms: Uniforms = {
      uElapsed: { value: 0 },
      uExtent: { value: 1 },
      uPixelRatio: { value: renderer.getPixelRatio() },
      uOpacity: { value: opacity },
      uRingCount: { value: ringCount },
      uSpeed: { value: speed },
      uBaseRadius: { value: baseRadius },
      uColor: { value: new THREE.Color(color) },
      uMarkerColor: { value: new THREE.Color(markerColor) },
    };

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

    const points = new THREE.Points(geometry, material);
    // Every vertex sits at the origin, so three computes a bounding sphere of
    // radius zero and culls the entire object the moment the camera is not
    // looking straight at (0,0,0). Displacement happens in the shader, which
    // the culler cannot see.
    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%';

    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();
      // Ring radii scale off the SHORT side. Off the height alone, a wide
      // preview leaves the rings floating in a sea of empty space; off the
      // width alone, a tall one clips them.
      uniforms.uExtent.value = Math.min(w, h);
      uniforms.uPixelRatio.value = renderer.getPixelRatio();
    };

    const draw = (elapsed: number) => {
      uniforms.uElapsed.value = elapsed;
      renderer.render(scene, camera);
    };

    resize(size.current.width, size.current.height);
    stage.current = { renderer, scene, camera, uniforms, resize, draw };
    draw(STATIC_ELAPSED);

    return () => {
      stage.current = null;
      // Order matters: release the scene graph's GPU objects while the
      // context is still alive, then hand the context back.
      disposeObject(scene);
      material.dispose();
      disposeRenderer(renderer);
      renderer.domElement.remove();
    };
  }, [
    ready,
    ringCount,
    dotsPerRing,
    speed,
    baseRadius,
    dotRadius,
    markerRadius,
    opacity,
    color,
    markerColor,
    seed,
  ]);

  // Resize is its own effect so a container reflow costs a `setSize` call
  // rather than a full teardown and rebuild of the buffer.
  useEffect(() => {
    stage.current?.resize(width, height);
    if (reduced) stage.current?.draw(STATIC_ELAPSED);
  }, [width, height, reduced]);

  useRaf((_dt, elapsed) => stage.current?.draw(elapsed), ready && !reduced && !unsupported);
  // #endregion critical

  return (
    <div ref={host} className={cn('relative h-full w-full overflow-hidden', className)}>
      {unsupported ? (
        <div className="absolute inset-0 grid place-items-center">
          <div className="relative aspect-square h-[75%]">
            {Array.from({ length: ringCount }, (_, i) => {
              const scale = 1 - (ringCount - 1 - i) * 0.1;
              return (
                <div
                  key={i}
                  className="absolute rounded-full border border-line"
                  style={{
                    inset: `${(1 - scale) * 50}%`,
                    opacity: 0.2 + 0.6 * (1 - (ringCount - 1 - i) / ringCount),
                  }}
                />
              );
            })}
          </div>
        </div>
      ) : null}
    </div>
  );
}

/* ==========================================================================
   Single-Draw Orbit Rings — GLSL
   --------------------------------------------------------------------------
   Every dot in every ring is one vertex of one `THREE.Points`. The vertex
   shader is the only thing that knows where a dot belongs: `position` stays
   at the origin for all of them and the real screen position is computed here
   from a packed identity attribute.

   Shipped as a `.ts` template literal rather than a `.glsl` file so that
   `npx shadcn add` produces something that compiles without a bundler plugin.
   ========================================================================== */

/**
 * `aPointData = vec4(kind, ringIndex, angle, dotRadius)`
 *
 *   kind       0 = static path dot, 1 = orbiting marker
 *   ringIndex  0 = innermost
 *   angle      radians; for a marker this is its phase offset
 *   dotRadius  CSS pixels before pixel-ratio scaling
 */
export const ORBIT_RING_POINTS_VERT = /* glsl */ `
attribute vec4 aPointData;

uniform float uElapsed;
uniform float uExtent;
uniform float uPixelRatio;
uniform float uOpacity;
uniform float uRingCount;
uniform float uSpeed;
uniform float uBaseRadius;

varying float vAlpha;
varying float vAlphaScale;
varying float vMarker;

/* Only used to dim the wider rings. There is no perspective camera here — the
   projection is orthographic and 1:1 with CSS pixels. A focal length of 800
   makes the outermost ring roughly 30% dimmer than the innermost at typical
   preview sizes, which is enough to read as depth and not enough to read as a
   fade. */
const float FOCAL_LENGTH = 800.0;

/* GPUs quietly refuse point sizes below ~1px and rasterise nothing, so the
   size is clamped and the alpha is corrected for the area that clamping
   invented. See vAlphaScale below. */
const float MIN_POINT_SIZE = 2.0;
const float UNCLAMPED_MIN_POINT_SIZE = 1.0;

/* Rings step 10% apart, outermost at the full base radius. */
const float RING_STEP = 0.1;

const float PI = 3.141592653589793;

void main() {
  float kind      = aPointData.x;
  float ringIndex = aPointData.y;
  float angle     = aPointData.z;
  float dotRadius = aPointData.w;

  float scale      = 1.0 - (uRingCount - 1.0 - ringIndex) * RING_STEP;
  float ringRadius = uBaseRadius * scale * uExtent * 0.5;

  vec2  point;
  float alpha;

  if (kind < 0.5) {
    // Static path dot: fixed angle, dimmed by how far out its ring sits.
    point = vec2(cos(angle), sin(angle)) * ringRadius;
    alpha = 0.15 + 0.65 * max(0.0, FOCAL_LENGTH / (FOCAL_LENGTH + ringRadius));
  } else {
    // Orbiting marker: same ring, angle advanced by the clock. -PI/2 starts it
    // at twelve o'clock, which is where a viewer expects a cycle to begin.
    float orbitAngle = angle - PI * 0.5 + uElapsed * uSpeed;
    point = vec2(cos(orbitAngle), sin(orbitAngle)) * ringRadius;
    alpha = 1.0;
  }

  vAlpha  = alpha * uOpacity;
  vMarker = step(0.5, kind);
  gl_Position = projectionMatrix * modelViewMatrix * vec4(point, 0.0, 1.0);

  /* Area-equivalent alpha compensation. A dot the driver forced to be twice
     as wide covers four times the area, so its alpha is divided by four and
     the total light it emits is unchanged. This is why the field looks
     identical on a 1x monitor and a 3x phone instead of visibly denser on
     one of them. */
  float rawPointSize = dotRadius * 2.0 * uPixelRatio;
  float unclamped    = max(UNCLAMPED_MIN_POINT_SIZE, rawPointSize);
  float pointSize    = max(MIN_POINT_SIZE, rawPointSize);
  vAlphaScale = (unclamped * unclamped) / (pointSize * pointSize);
  gl_PointSize = pointSize;
}
`;

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

uniform vec3 uColor;
uniform vec3 uMarkerColor;

varying float vAlpha;
varying float vAlphaScale;
varying float vMarker;

void main() {
  vec2  centered = gl_PointCoord - vec2(0.5);
  float d = length(centered);
  // ~7% of the radius of soft edge. Enough to read as round at 2px without
  // asking the renderer for MSAA, which is a real cost on a fill-heavy scene.
  float disc = 1.0 - smoothstep(0.43, 0.5, d);

  if (disc <= 0.0 || vAlpha <= 0.0) discard;

  vec3 tint = mix(uColor, uMarkerColor, vMarker);
  gl_FragColor = vec4(tint, vAlpha * vAlphaScale * disc);
}
`;

/* ==========================================================================
   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;
  }
}