Drag Marquee

'use client';

import gsap from 'gsap';
import {
  Children,
  isValidElement,
  useCallback,
  useEffect,
  useRef,
  useState,
  type ReactNode,
} from 'react';
import { cn } from '@/lib/utils';
import { useGsap } from '@/hooks/use-gsap';
import { useInView } from '@/hooks/use-in-view';
import { useReducedMotion } from '@/hooks/use-reduced-motion';
import { useResizeObserver } from '@/hooks/use-resize-observer';
import { clamp } from '@/lib/damp';
import { createRng } from '@/lib/prng';
import { mod } from '@/lib/wrap';

/* ==========================================================================
   Drag Marquee
   --------------------------------------------------------------------------
   A row that drifts forever, that you can grab and throw, and that scatters
   its cards while your hand is down.

   Three ideas hold it together.

   1. **One unwrapped number.** Everything — the idle drift, the drag, the
      throw — adds to a single accumulator that is never corrected. It walks
      off to -50000 and nobody cares. The wrap happens once, in the tween's
      `modifiers`, as `mod(x, period) - period`. Because a true modulo is
      total, a delta of 4.3 periods in one frame lands in exactly the right
      place; the usual `if (x < -period) x += period` correction only ever
      undoes one period, so a fast flick or a tab that was backgrounded for a
      second lands the row on the wrong tile and the seam tears.

   2. **The wrap is invisible on the near side.** For `x` already inside
      `[-period, 0)`, `mod(x, period) - period === x`, so the modifier is the
      identity in the range the row normally lives in and only bites when the
      accumulator leaves it. Nothing snaps at the boundary because the two
      sides of the boundary paint the same pixels.

   3. **Enough copies that the seam is never on screen.** `period` is the
      measured width of one copy of the children, gap included, and the row
      holds `ceil(hostWidth / period) + 1` copies. With `x` bounded to one
      period, the visible window can never run past the last copy.

   The throw needs no plugin: `power3.out` is `p(t) = 1 - (1 - t)^3`, so
   `p'(0) = 3`, and a tween of duration `D` that covers `Δ` leaves at `3Δ/D`
   px/s. Retargeting the follow tween to `x + v·D/3` on release therefore
   continues the gesture at the exact speed the hand left it.
   ========================================================================== */

export interface DragMarqueeProps {
  /** One tile per child. The set is duplicated as many times as it takes. */
  children: ReactNode;
  /** Idle drift in px/s. Positive drifts left; 0 parks the row. */
  speed?: number;
  /** Pixels between tiles. Applied inside a copy so it also spans the seam. */
  gap?: number;
  /** Seconds the row takes to catch up with the pointer. Also the throw time. */
  smoothing?: number;
  /** Scatter distance on press, as a percentage of each tile's own size. */
  scatter?: number;
  /** Half-range of the per-tile rotation on press, in degrees. */
  spin?: number;
  /** Tile scale while the pointer is down. */
  pressScale?: number;
  /** Seconds of the scatter in and back out. */
  scatterDuration?: number;
  /** Seeds the scatter. Same seed, same arrangement, on server and client. */
  seed?: number | string;
  className?: string;
  /** Applied to every tile — size the items here. */
  tileClassName?: string;
  'aria-label'?: string;
}

const SPEED = 60;
const GAP = 24;
const SMOOTHING = 0.5;
const SCATTER = 6;
const SPIN = 10;
const PRESS_SCALE = 0.95;
const SCATTER_DURATION = 0.5;

/** Initial slope of `power3.out`. `d/dt [1 - (1 - t)^3]` at t = 0. */
const POWER3_OUT_SLOPE = 3;
/** Pixels of travel before a press counts as a drag rather than a tap. */
const DRAG_THRESHOLD = 5;
/** Seconds of gesture history the release velocity is measured over. */
const VELOCITY_WINDOW = 0.07;
/** px/s. Above this a fling is a mis-measurement, not a throw. */
const MAX_VELOCITY = 4000;
/** Hard cap on how far one throw may carry, in pixels. */
const MAX_THROW = 1200;
/**
 * Two copies is the minimum that can hide a seam; eight is a guard against a
 * one-word tile in a wide hero producing hundreds of nodes.
 */
const MIN_COPIES = 2;
const MAX_COPIES = 8;

export function DragMarquee({
  children,
  speed = SPEED,
  gap = GAP,
  smoothing = SMOOTHING,
  scatter = SCATTER,
  spin = SPIN,
  pressScale = PRESS_SCALE,
  scatterDuration = SCATTER_DURATION,
  seed = 'drag-marquee',
  className,
  tileClassName,
  'aria-label': ariaLabel = 'Marquee',
}: DragMarqueeProps) {
  const hostRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const copyRef = useRef<HTMLDivElement>(null);

  /** The unwrapped accumulator. Drift, drag and throw all add to this. */
  const rawRef = useRef(0);
  /** What the tween actually animates. Its `x` is already wrapped. */
  const proxyRef = useRef({ x: 0 });
  /** Measured width of one copy, gap included. Read live inside the modifier. */
  const periodRef = useRef(0);
  const xToRef = useRef<ReturnType<typeof gsap.quickTo> | null>(null);
  const scatterRef = useRef<gsap.core.Timeline | null>(null);
  const pressedRef = useRef(false);

  const [copies, setCopies] = useState(MIN_COPIES);

  const reduced = useReducedMotion();
  const hostSize = useResizeObserver(hostRef);
  const copySize = useResizeObserver(copyRef);
  const { inView } = useInView(hostRef);

  const tiles = Children.toArray(children);
  const perCopy = tiles.length;

  // #region critical
  /** The only place the track's transform is written. */
  const paint = useCallback(() => {
    const track = trackRef.current;
    if (!track) return;
    track.style.transform = `translate3d(${proxyRef.current.x.toFixed(2)}px, 0px, 0px)`;
  }, []);

  /**
   * Move the accumulator to `value`. With motion allowed this retargets the
   * follow tween — `quickTo` reuses one tween and one `PropTween` rather than
   * allocating a tween per frame — and the wrap happens in its modifier. With
   * reduced motion there is no tween, so the wrap is applied here instead.
   */
  const push = useCallback(
    (value: number) => {
      rawRef.current = value;
      const xTo = xToRef.current;
      if (xTo) {
        xTo(value);
        return;
      }
      const period = periodRef.current;
      proxyRef.current.x = period < 1 ? 0 : mod(value, period) - period;
      paint();
    },
    [paint],
  );

  /**
   * One follow tween for the life of the component. The wrap lives in
   * `modifiers`, which post-processes the value on its way to the target and
   * never feeds back: `resetTo` advances the tween's start from its own
   * `s + ratio * c`, not by re-reading `proxy.x`. Put the wrap anywhere else
   * — in `onUpdate`, say — and the next retarget interpolates from a value the
   * tween does not believe in, and the row lurches a full period.
   */
  useEffect(() => {
    const proxy = proxyRef.current;
    if (reduced) {
      xToRef.current = null;
      return;
    }

    const xTo = gsap.quickTo(proxy, 'x', {
      duration: smoothing,
      ease: 'power3',
      modifiers: {
        // Reads the ref, so a resize changes the period without rebuilding
        // the tween — rebuilding mid-throw would restart the ease from rest.
        x: (value: number) => {
          const period = periodRef.current;
          return period < 1 ? 0 : mod(value, period) - period;
        },
      },
      onUpdate: paint,
    });
    xToRef.current = xTo;

    return () => {
      xToRef.current = null;
      gsap.killTweensOf(proxy);
    };
  }, [reduced, smoothing, paint]);

  useEffect(() => {
    const host = hostRef.current;
    if (!host) return;

    let pointerId: number | null = null;
    let lastX = 0;
    let pressX = 0;
    let pressY = 0;
    let moved = false;
    let swallowClick = false;
    /** Rolling window: the accumulator and clock at the start of the window. */
    let sampleRaw = 0;
    let sampleTime = 0;

    const now = () => performance.now() / 1000;

    const onPointerDown = (e: PointerEvent) => {
      // One pointer owns the row. A second finger arriving mid-throw would
      // otherwise reset the origin and the row would jump.
      if (pointerId !== null || !e.isPrimary) return;
      if (e.pointerType === 'mouse' && e.button !== 0) return;

      pointerId = e.pointerId;
      lastX = e.clientX;
      pressX = e.clientX;
      pressY = e.clientY;
      moved = false;
      sampleRaw = rawRef.current;
      sampleTime = now();
      pressedRef.current = true;

      // Capture on press, not once the threshold is crossed: by then the
      // pointer may already have left the element and `pointermove` would have
      // stopped arriving.
      host.setPointerCapture(e.pointerId);
      // Scatter on press, like a physical stack of cards being pinned — the
      // press, not the drag, is what the eye reads as "I have hold of this".
      scatterRef.current?.play();
    };

    const onPointerMove = (e: PointerEvent) => {
      if (pointerId !== e.pointerId) return;

      const dx = e.clientX - lastX;
      lastX = e.clientX;

      if (!moved) {
        if (Math.hypot(e.clientX - pressX, e.clientY - pressY) < DRAG_THRESHOLD) return;
        moved = true;
      }

      push(rawRef.current + dx);

      // Retire the velocity window once it is full. Measuring over a window
      // rather than off the last delta is what stops "drag, pause, lift" from
      // throwing the row: with no movement there are no events, the window
      // never advances, and the measured speed decays toward zero on its own.
      const t = now();
      if (t - sampleTime > VELOCITY_WINDOW) {
        sampleRaw = rawRef.current;
        sampleTime = t;
      }
    };

    /**
     * Idempotent. Called from `pointerup`, `pointercancel` and
     * `lostpointercapture`, all three of which can be the last event a gesture
     * produces, and at least one of which always arrives — including when the
     * pointer is released outside the window or the OS takes it away for a
     * gesture of its own. Guarding on `pointerId` makes the extra calls no-ops
     * instead of a double throw, and it is what stops a drag that ended
     * off-screen from leaving the row stuck mid-throw with the cards still
     * scattered.
     */
    const finish = (e: PointerEvent) => {
      if (pointerId !== e.pointerId) return;
      const id = pointerId;
      pointerId = null;
      pressedRef.current = false;

      const elapsed = now() - sampleTime;
      const velocity =
        moved && elapsed > 0
          ? clamp((rawRef.current - sampleRaw) / elapsed, -MAX_VELOCITY, MAX_VELOCITY)
          : 0;

      swallowClick = moved;
      moved = false;

      if (host.hasPointerCapture(id)) host.releasePointerCapture(id);
      scatterRef.current?.reverse();

      if (velocity !== 0) {
        // v·D/3 is the distance a `power3.out` of duration D covers when it
        // departs at v. Retargeting by exactly that hands the row over from
        // the finger without a change of speed.
        push(
          rawRef.current +
            clamp((velocity * smoothing) / POWER3_OUT_SLOPE, -MAX_THROW, MAX_THROW),
        );
      }
    };

    // Capture phase, ahead of any child's own handler. A drag ends with a
    // `click` on whatever happens to be under the pointer, so without this the
    // gesture that scrolls the row also activates a card.
    const onClick = (e: MouseEvent) => {
      if (!swallowClick) return;
      swallowClick = false;
      e.preventDefault();
      e.stopPropagation();
    };

    const onKeyDown = (e: KeyboardEvent) => {
      const direction = e.key === 'ArrowRight' ? 1 : e.key === 'ArrowLeft' ? -1 : 0;
      if (direction === 0) return;
      e.preventDefault();
      const step = perCopy > 0 ? periodRef.current / perCopy : periodRef.current;
      push(rawRef.current + direction * step);
    };

    host.addEventListener('pointerdown', onPointerDown);
    host.addEventListener('pointermove', onPointerMove);
    host.addEventListener('pointerup', finish);
    host.addEventListener('pointercancel', finish);
    host.addEventListener('lostpointercapture', finish);
    host.addEventListener('click', onClick, true);
    host.addEventListener('keydown', onKeyDown);

    return () => {
      host.removeEventListener('pointerdown', onPointerDown);
      host.removeEventListener('pointermove', onPointerMove);
      host.removeEventListener('pointerup', finish);
      host.removeEventListener('pointercancel', finish);
      host.removeEventListener('lostpointercapture', finish);
      host.removeEventListener('click', onClick, true);
      host.removeEventListener('keydown', onKeyDown);
      if (pointerId !== null && host.hasPointerCapture(pointerId)) {
        host.releasePointerCapture(pointerId);
      }
      pointerId = null;
      pressedRef.current = false;
    };
  }, [push, smoothing, perCopy]);
  // #endregion critical

  /**
   * Measure one copy and decide how many there need to be.
   * `getBoundingClientRect`, not `offsetWidth`: the latter rounds to whole
   * pixels, and half a pixel of error in the period is half a pixel of gap
   * that only ever shows up at the seam.
   */
  useEffect(() => {
    const host = hostRef.current;
    const copy = copyRef.current;
    if (!host || !copy) return;

    const width = copy.getBoundingClientRect().width;
    if (width < 1) return;
    periodRef.current = width;

    setCopies(clamp(Math.ceil(host.clientWidth / width) + 1, MIN_COPIES, MAX_COPIES));
  }, [hostSize.width, copySize.width, perCopy, gap]);

  /**
   * Idle drift. `gsap.ticker` rather than a second rAF loop so the drift and
   * the follow tween are updated in the same tick — on separate loops the row
   * is one frame stale every other frame, which reads as a shimmer.
   */
  useEffect(() => {
    // Off-screen rows do not need to be redrawn 60 times a second. Where
    // there is no IntersectionObserver at all the gate opens rather than
    // closes — a missing API should cost battery, not the animation.
    const gated = typeof IntersectionObserver !== 'undefined' && !inView;
    if (reduced || speed === 0 || gated) return;

    const tick = (_time: number, deltaTime: number) => {
      // The drift stops while the pointer is down. Left running, the row
      // creeps out from under the finger, which is exactly the thing the
      // one-to-one tracking is there to avoid.
      if (pressedRef.current) return;
      push(rawRef.current - (deltaTime / 1000) * speed);
    };

    gsap.ticker.add(tick);
    return () => {
      gsap.ticker.remove(tick);
    };
  }, [reduced, speed, inView, push]);

  /**
   * The scatter. One paused timeline, played forwards on press and reversed on
   * release — never rebuilt per press. A press/release flag in the deps would
   * make `revert()` strip the inline transforms GSAP wrote, so the reverse
   * would start from the stylesheet default and animate nowhere.
   */
  useGsap(
    gsap,
    () => {
      const track = trackRef.current;
      if (!track || reduced || perCopy === 0) return;

      const nodes = Array.from(track.querySelectorAll<HTMLElement>('[data-kx-tile]'));
      if (nodes.length === 0) return;

      // Seeded, and indexed by position *within* a copy, so every copy of a
      // tile scatters identically. Per-node randomness makes the duplicate
      // visible the moment the cards move.
      const rng = createRng(seed);
      const spread = Array.from({ length: perCopy }, () => ({
        rotate: (rng() - 0.5) * 2 * spin,
        x: (rng() - 0.5) * 2 * scatter,
        y: (rng() - 0.5) * 2 * scatter,
      }));

      const at = (i: number) => spread[i % perCopy];

      const tl = gsap.timeline({ paused: true });
      tl.to(nodes, {
        rotate: (i: number) => at(i)?.rotate ?? 0,
        xPercent: (i: number) => at(i)?.x ?? 0,
        yPercent: (i: number) => at(i)?.y ?? 0,
        scale: pressScale,
        duration: scatterDuration,
        // `back.inOut` overshoots at both ends, so the cards spring apart and
        // spring back rather than easing politely in both directions.
        ease: 'back.inOut(3)',
      });
      scatterRef.current = tl;

      return () => {
        scatterRef.current = null;
      };
    },
    hostRef,
    [reduced, copies, perCopy, scatter, spin, pressScale, scatterDuration, seed],
  );

  const copyIndices = Array.from({ length: copies }, (_unused, i) => i);

  return (
    <div
      ref={hostRef}
      role="group"
      aria-label={ariaLabel}
      tabIndex={0}
      className={cn(
        // `touch-action: none`, not `pan-y`: on a phone the browser claims the
        // first 10 px of a horizontal drag for a scroll unless the element
        // says outright that it wants every pointer event.
        'relative h-full w-full touch-none select-none overflow-hidden',
        'cursor-grab active:cursor-grabbing focus-visible:outline-none',
        className,
      )}
    >
      <div
        ref={trackRef}
        className="flex h-full w-max flex-nowrap items-center will-change-transform"
      >
        {copyIndices.map((copyIndex) => (
          <div
            key={copyIndex}
            ref={copyIndex === 0 ? copyRef : undefined}
            // Only the first copy is real content. The rest are wallpaper, and
            // a screen reader that reads the list four times is a bug.
            aria-hidden={copyIndex > 0 || undefined}
            className="flex shrink-0 flex-nowrap items-center"
          >
            {tiles.map((tile, i) => (
              <div
                key={isValidElement(tile) && tile.key !== null ? tile.key : i}
                data-kx-tile=""
                // The gap is a trailing margin inside the copy rather than
                // `gap` on the track: a track-level gap sits *between* copies
                // too, so the measured copy width no longer equals the wrap
                // period and the seam gains one gap of drift per lap.
                style={{ marginRight: `${gap}px` }}
                className={cn('shrink-0', tileClassName)}
              >
                {tile}
              </div>
            ))}
          </div>
        ))}
      </div>
    </div>
  );
}

/* ==========================================================================
   Frame-rate-independent interpolation.
   --------------------------------------------------------------------------
   The everywhere-idiom `x += (target - x) * 0.1` is a bug: it converges twice
   as fast on a 120 Hz display as on a 60 Hz one, so the same code feels
   different on different hardware and visibly speeds up when the browser
   drops frames. `damp` fixes it by raising the retention factor to the power
   of elapsed time, which is the exact continuous form of the same curve.
   ========================================================================== */

/**
 * Fraction of the remaining distance to close this frame.
 *
 * @param smoothing Fraction of the gap that REMAINS after one second.
 *   Smaller is snappier. 0.001 ≈ very fast, 0.01 ≈ fast, 0.1 ≈ soft,
 *   0.5 ≈ slow drift.
 * @param dt Seconds elapsed since the previous frame.
 */
export function dampFactor(smoothing: number, dt: number): number {
  return 1 - Math.pow(smoothing, dt);
}

/** Move `current` toward `target` at a rate independent of frame rate. */
export function damp(
  current: number,
  target: number,
  smoothing: number,
  dt: number,
): number {
  return current + (target - current) * dampFactor(smoothing, dt);
}

/**
 * The per-frame lerp constant an author measured at 60fps, converted into the
 * `smoothing` argument `damp` wants. Lets a source that says "0.1 per frame"
 * be ported without re-tuning by eye:
 *
 *   damp(x, t, perFrameToSmoothing(0.1), dt)
 */
export function perFrameToSmoothing(alpha: number, baseFps = 60): number {
  return Math.pow(1 - alpha, baseFps);
}

export function lerp(a: number, b: number, t: number): number {
  return a + (b - a) * t;
}

export function clamp(v: number, min: number, max: number): number {
  return v < min ? min : v > max ? max : v;
}

export function inverseLerp(a: number, b: number, v: number): number {
  return a === b ? 0 : (v - a) / (b - a);
}

export function mapRange(
  v: number,
  inMin: number,
  inMax: number,
  outMin: number,
  outMax: number,
  doClamp = true,
): number {
  const t = inverseLerp(inMin, inMax, v);
  const r = lerp(outMin, outMax, doClamp ? clamp(t, 0, 1) : t);
  return r;
}

/** GLSL `smoothstep`, same semantics, for parity between JS and shader code. */
export function smoothstep(edge0: number, edge1: number, x: number): number {
  const t = clamp(inverseLerp(edge0, edge1, x), 0, 1);
  return t * t * (3 - 2 * t);
}

/**
 * Gaussian falloff, `exp(-d²)`. Yields 1.000 / 0.368 / 0.018 / 0.0001 at
 * distances 0 / 1 / 2 / 3 — a continuous focus scalar with no thresholds and
 * no branches, which is why carousels that use it feel analogue rather than
 * stepped.
 */
export function gaussian(distance: number, falloff = 1): number {
  const d = distance * falloff;
  return Math.exp(-(d * d));
}

/* ==========================================================================
   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, type DependencyList, type RefObject } from 'react';

/* ==========================================================================
   gsap.context() with the teardown wired up.
   --------------------------------------------------------------------------
   Every animation, ScrollTrigger and SplitText created inside the callback is
   recorded by the context and killed by `ctx.revert()`. `revert()` — not
   `kill()` — is the one that also restores inline styles GSAP wrote, which is
   what stops a component from unmounting mid-tween and leaving a stray
   `transform` on a DOM node that React then reuses.

   Under React 19 StrictMode every effect runs twice in development. Without a
   context that reverts, you get two ScrollTriggers on the same element, each
   scrubbing the same property, and a 2x-speed animation that only reproduces
   in dev.
   ========================================================================== */

type ContextFunc = (context: {
  add: (fn: () => void) => void;
  [key: string]: unknown;
}) => void | (() => void);

interface GsapLike {
  context: (
    fn: ContextFunc,
    scope?: Element | string | object,
  ) => { revert: () => void };
}

/**
 * Runs `callback` inside a `gsap.context()` scoped to `scope`, reverting on
 * unmount and whenever `deps` change.
 *
 * `gsap` is passed in rather than imported so this hook carries no dependency
 * of its own — the component that animates is the one that imports GSAP.
 */
export function useGsap(
  gsap: GsapLike,
  callback: ContextFunc,
  scope: RefObject<Element | null>,
  deps: DependencyList = [],
): void {
  const callbackRef = useRef(callback);
  callbackRef.current = callback;

  useEffect(() => {
    const el = scope.current;
    if (!el) return;

    const ctx = gsap.context((self) => callbackRef.current(self), el);
    return () => ctx.revert();
    // `callback` is deliberately excluded: it is held in a ref so callers do
    // not have to memoise it. Re-run by changing `deps`.
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [gsap, scope, ...deps]);
}

'use client';

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

/* ==========================================================================
   IntersectionObserver, sharing one observer per option set.
   --------------------------------------------------------------------------
   A hundred cards each constructing their own observer is a hundred observers
   the compositor has to service. Keying a shared observer by its options
   collapses that to one per distinct configuration — in practice, two or
   three for the whole site.
   ========================================================================== */

export interface InViewState {
  inView: boolean;
  /** 0-1. The preview slot allocator ranks candidates by this. */
  ratio: number;
}

export interface UseInViewOptions {
  root?: Element | null;
  rootMargin?: string;
  /** Single number or list, same meaning as the native option. */
  threshold?: number | number[];
  /** Stop observing after the first time it becomes visible. */
  once?: boolean;
}

type Entry = {
  observer: IntersectionObserver;
  handlers: Map<Element, (e: IntersectionObserverEntry) => void>;
};

const pools = new Map<string, Entry>();

function poolFor(options: UseInViewOptions): Entry {
  const key = JSON.stringify({
    rootMargin: options.rootMargin ?? '0px',
    threshold: options.threshold ?? 0,
  });
  const existing = pools.get(key);
  if (existing) return existing;

  const handlers = new Map<Element, (e: IntersectionObserverEntry) => void>();
  const observer = new IntersectionObserver(
    (entries) => {
      for (const entry of entries) handlers.get(entry.target)?.(entry);
    },
    {
      root: options.root ?? null,
      rootMargin: options.rootMargin ?? '0px',
      threshold: options.threshold ?? 0,
    },
  );
  const created: Entry = { observer, handlers };
  pools.set(key, created);
  return created;
}

export function useInView(
  ref: RefObject<Element | null>,
  options: UseInViewOptions = {},
): InViewState {
  const [state, setState] = useState<InViewState>({ inView: false, ratio: 0 });
  const { root = null, rootMargin = '0px', once = false } = options;
  const thresholdKey = JSON.stringify(options.threshold ?? 0);
  const done = useRef(false);

  useEffect(() => {
    const el = ref.current;
    if (!el || typeof IntersectionObserver === 'undefined') return;
    if (once && done.current) return;

    const pool = poolFor({
      root,
      rootMargin,
      threshold: JSON.parse(thresholdKey) as number | number[],
    });

    const handle = (entry: IntersectionObserverEntry) => {
      setState({ inView: entry.isIntersecting, ratio: entry.intersectionRatio });
      if (once && entry.isIntersecting) {
        done.current = true;
        pool.handlers.delete(el);
        pool.observer.unobserve(el);
      }
    };

    pool.handlers.set(el, handle);
    pool.observer.observe(el);

    return () => {
      pool.handlers.delete(el);
      pool.observer.unobserve(el);
    };
  }, [ref, root, rootMargin, thresholdKey, once]);

  return state;
}

'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;
}

/* ==========================================================================
   Ring index arithmetic.
   --------------------------------------------------------------------------
   Anything that loops — a drum carousel, an infinite marquee, a cylinder of
   image planes — needs to answer "how far is item i from position p" in a way
   that treats the sequence as a circle. A plain `i - p` says item 0 is 18 away
   from item 18 in a list of 19, when really it is 1 step back.
   ========================================================================== */

/** True modulo. Unlike `%`, the result is never negative. */
export function mod(n: number, m: number): number {
  return ((n % m) + m) % m;
}

/**
 * Shortest signed distance from `position` to index `i` around a ring of
 * `count` items. Result is in `(-count/2, count/2]`; negative means "behind".
 *
 * This one function is what makes a finite array behave like an infinite one.
 */
export function wrappedOffset(i: number, position: number, count: number): number {
  if (count <= 0) return 0;
  let offset = mod(i - position, count);
  if (offset > count / 2) offset -= count;
  return offset;
}

/** Wrap `value` into `[min, max)`, e.g. an angle into `[-PI, PI)`. */
export function wrapRange(value: number, min: number, max: number): number {
  const span = max - min;
  if (span <= 0) return min;
  return mod(value - min, span) + min;
}

/** Wrap an index into `[0, count)`. Accepts fractional and negative input. */
export function wrapIndex(i: number, count: number): number {
  return count <= 0 ? 0 : mod(i, count);
}

/**
 * Shortest signed angular distance from `a` to `b` in radians, in `(-PI, PI]`.
 * Prevents a rotation tween from taking the long way round.
 */
export function shortestAngle(a: number, b: number): number {
  return wrapRange(b - a, -Math.PI, Math.PI);
}