@lovo/matter-react 0.3.0 → 0.4.0

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/MatterScene.tsx","../src/matter-context.ts","../src/useMatterContext.ts","../src/useShaderMaterial.ts","../src/useCursor.ts","../src/useResize.ts","../src/useScroll.ts","../src/useAnimatableUniform.ts","../src/useOverlayPass.ts","../src/FallbackBoundary.tsx","../src/useStaticHint.ts","../src/MatterMonitor.tsx"],"sourcesContent":["// @lovo/matter-react — React binding for Matter.\n\nexport { MatterScene } from './MatterScene.js'\nexport type { MatterSceneProps } from './MatterScene.js'\n\nexport { useMatterContext } from './useMatterContext.js'\nexport type { MatterContextValue } from './matter-context.js'\n\nexport { useShaderMaterial } from './useShaderMaterial.js'\n\nexport { useCursor } from './useCursor.js'\nexport type { CursorSignal } from './useCursor.js'\n\nexport { useResize } from './useResize.js'\nexport type { ResizeSignal, ResizeValue } from './useResize.js'\n\nexport { useScroll } from './useScroll.js'\nexport type { ScrollSignal, ScrollValue } from './useScroll.js'\n\nexport { useAnimatableUniform } from './useAnimatableUniform.js'\nexport type { AnimatableProp, MatterSignal } from './useAnimatableUniform.js'\n\nexport { useOverlayPass } from './useOverlayPass.js'\nexport type { OverlayTransform } from './matter-context.js'\n\nexport { FallbackBoundary } from './FallbackBoundary.js'\nexport type { FallbackBoundaryProps } from './FallbackBoundary.js'\n\nexport { useStaticHint } from './useStaticHint.js'\n\nexport { MatterMonitor } from './MatterMonitor.js'\nexport type { MatterMonitorProps, MonitorAnchor } from './MatterMonitor.js'\n","'use client'\n\nimport { useEffect, useRef, useState, type CSSProperties, type ReactNode } from 'react'\nimport { Scene, OrthographicCamera } from 'three'\nimport { PostProcessing } from 'three/webgpu'\nimport type { Node } from 'three/webgpu'\nimport { pass } from 'three/tsl'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport {\n  createRenderer,\n  MatterScheduler,\n  createVisibilityWatcher,\n  createIntersectionWatcher,\n} from '@lovo/matter'\nimport { MatterContext, type MatterContextValue, type OverlayTransform } from './matter-context.js'\n\nexport interface MatterSceneProps {\n  children?: ReactNode\n  /** Rendered server-side and during WebGPU init. Default: empty. */\n  fallback?: ReactNode\n  className?: string\n  style?: CSSProperties\n  /** Cap on devicePixelRatio. Default: 2. */\n  maxDPR?: number\n}\n\nconst defaultStyle: CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  display: 'block',\n  width: '100%',\n  height: '100%',\n}\n\n/**\n * Owns a canvas, a Three.js renderer (WebGPU + WebGL2 fallback), an\n * orthographic camera covering the canvas, an empty Scene, and a\n * MatterScheduler. Children consume these via useMatterContext().\n */\nexport function MatterScene(props: MatterSceneProps) {\n  const { children, fallback, className, style, maxDPR } = props\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const [ctx, setCtx] = useState<MatterContextValue | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n    if (!canvas) return\n\n    let cancelled = false\n    let cleanup: (() => void) | null = null\n\n    const setup = async () => {\n      try {\n        const renderer = await createRenderer(canvas, { maxDPR })\n        if (cancelled) {\n          renderer.dispose()\n          return\n        }\n        const scene = new Scene()\n        const camera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 10)\n        camera.position.z = 1\n        const postProcessing = new PostProcessing(renderer.three)\n        const scheduler = new MatterScheduler()\n\n        const overlays = new Map<symbol, OverlayTransform>()\n\n        // Allocate the base PassNode once per setup so rebuilds reuse the same\n        // node identity instead of churning a fresh one (and a fresh render\n        // target binding) on every register/unregister.\n        const basePass = pass(scene, camera) as unknown as ShaderNodeObject<Node>\n\n        const rebuildOutputNode = () => {\n          const transforms = Array.from(overlays.values())\n          postProcessing.outputNode = transforms.reduce(\n            (node, transform) => transform(node),\n            basePass,\n          )\n          postProcessing.needsUpdate = true\n        }\n\n        rebuildOutputNode() // initial: just basePass, no overlays\n\n        const registerOverlay = (transform: OverlayTransform): (() => void) => {\n          const key = Symbol('overlay')\n          overlays.set(key, transform)\n          rebuildOutputNode()\n          return () => {\n            overlays.delete(key)\n            rebuildOutputNode()\n          }\n        }\n\n        scheduler.add(() => postProcessing.render())\n        scheduler.start()\n\n        const visibility = createVisibilityWatcher()\n        const intersection = createIntersectionWatcher(canvas)\n\n        const updatePauseState = () => {\n          const shouldRun = visibility.isVisible() && intersection.isInView()\n          if (shouldRun) scheduler.resume()\n          else scheduler.pause()\n        }\n        updatePauseState()\n\n        const unsubVisibility = visibility.subscribe(updatePauseState)\n        const unsubIntersection = intersection.subscribe(updatePauseState)\n\n        const onResize = () => renderer.resize()\n        window.addEventListener('resize', onResize)\n\n        cleanup = () => {\n          unsubVisibility()\n          unsubIntersection()\n          visibility.dispose()\n          intersection.dispose()\n          window.removeEventListener('resize', onResize)\n          scheduler.dispose()\n          renderer.dispose()\n        }\n\n        setCtx({ renderer, scene, camera, scheduler, registerOverlay })\n      } catch (err) {\n        if (cancelled) return\n        const e = err instanceof Error ? err : new Error(String(err))\n        console.error('[MatterScene] renderer init failed:', e)\n        setError(e)\n      }\n    }\n\n    void setup()\n    return () => {\n      cancelled = true\n      cleanup?.()\n      cleanup = null\n      setCtx(null)\n    }\n  }, [maxDPR])\n\n  return (\n    <div className={className} style={{ ...defaultStyle, ...style }}>\n      <canvas ref={canvasRef} style={{ width: '100%', height: '100%', display: 'block' }} />\n      {error ? (\n        <div\n          style={{\n            position: 'absolute',\n            inset: 0,\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            padding: '1rem',\n            color: '#fff',\n            background: 'rgba(120, 30, 30, 0.85)',\n            font: '0.85rem ui-monospace, monospace',\n            whiteSpace: 'pre-wrap',\n            textAlign: 'center',\n          }}\n        >\n          MatterScene init failed:\n          {'\\n'}\n          {error.message}\n        </div>\n      ) : ctx ? (\n        <MatterContext.Provider value={ctx}>{children}</MatterContext.Provider>\n      ) : (\n        (fallback ?? null)\n      )}\n    </div>\n  )\n}\n","import { createContext } from 'react'\nimport type { Scene, Camera } from 'three'\nimport type { Node } from 'three/webgpu'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport type { MatterRenderer, MatterScheduler } from '@lovo/matter'\n\nexport type OverlayTransform = (input: ShaderNodeObject<Node>) => ShaderNodeObject<Node>\n\nexport interface MatterContextValue {\n  renderer: MatterRenderer\n  scene: Scene\n  camera: Camera\n  scheduler: MatterScheduler\n  registerOverlay: (transform: OverlayTransform) => () => void\n}\n\nexport const MatterContext = createContext<MatterContextValue | null>(null)\n","import { useContext } from 'react'\nimport { MatterContext, type MatterContextValue } from './matter-context.js'\n\n/**\n * Read the matter scene context. Returns null when called outside a\n * <MatterScene>; useShaderMaterial and similar hooks check this and\n * auto-provision a scene if missing (auto-wrap behavior).\n */\nexport function useMatterContext(): MatterContextValue | null {\n  return useContext(MatterContext)\n}\n","'use client'\n\nimport { useEffect, useMemo } from 'react'\nimport { MeshBasicNodeMaterial } from 'three/webgpu'\nimport type { Node } from 'three/webgpu'\nimport type { ShaderNodeObject } from 'three/tsl'\n\n/** A TSL fragment that produces a color. Accept any Node or TSL-wrapped node. */\nexport type ColorTSL = Node | ShaderNodeObject<Node>\n\n/**\n * Bind a TSL color expression to a NodeMaterial. Returns the material;\n * caller is responsible for adding it to a mesh and disposing when done.\n *\n * The TSL fragment is computed once via `useMemo` and re-applied if the\n * factory function changes. For dynamic uniforms, mutate `.value` on the\n * uniform nodes — don't recreate the TSL fragment per render.\n */\nexport function useShaderMaterial(build: () => ColorTSL): MeshBasicNodeMaterial {\n  const material = useMemo(() => {\n    const m = new MeshBasicNodeMaterial()\n    m.colorNode = build() as Node\n    return m\n  }, [build])\n\n  useEffect(() => {\n    return () => material.dispose()\n  }, [material])\n\n  return material\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\nimport { CursorInput, type CursorInputOptions, type Vec2 } from '@lovo/matter'\nimport { useMatterContext } from './useMatterContext.js'\n\nexport interface CursorSignal {\n  /** Current smoothed cursor position (Vec2 in 0..1 viewport space). */\n  get(): Vec2\n  /** Subscribe to change events. Returns unsubscribe. */\n  on(event: 'change', cb: (value: Vec2) => void): () => void\n}\n\n// Inert stub returned on the first render before the lifecycle effect\n// has created the real CursorInput. Calling .on returns an unsub no-op.\nconst STUB_SIGNAL: CursorSignal = {\n  get: () => [0.5, 0.5] as const,\n  on: () => () => undefined,\n}\n\n/**\n * React wrapper for CursorInput. Auto-attaches to the parent <MatterScene>'s\n * scheduler if available; otherwise creates a free-running rAF tick.\n *\n * Lifecycle is in a single effect so React 19 Strict Mode's intentional\n * mount→unmount→mount cycle creates a *fresh* CursorInput per real mount\n * instead of disposing a long-lived one (which would silently break the\n * window mousemove listener and the smoothing tick).\n */\nexport function useCursor(opts: CursorInputOptions = {}): CursorSignal {\n  const ctx = useMatterContext()\n  const [input, setInput] = useState<CursorInput | null>(null)\n\n  useEffect(() => {\n    // Plumb the parent <MatterScene>'s canvas as the cursor's normalization\n    // element. Without this, cursor coords are viewport-normalized — fine for\n    // a full-page scene but visibly offset when the canvas sits inside a\n    // smaller wrapper (e.g., 70vh hero). DotField's cell tiling makes the\n    // mismatch obvious; LinearGradient mostly gets away with it. Caller can\n    // override by passing `opts.element` explicitly.\n    const canvas = ctx?.renderer.three.domElement\n    const elementOpt = opts.element ?? (canvas instanceof HTMLElement ? canvas : undefined)\n    const fresh = new CursorInput({ ...opts, element: elementOpt })\n    setInput(fresh)\n\n    let detach: (() => void) | null = null\n    if (ctx?.scheduler) {\n      const client = ({ delta }: { delta: number }) => fresh.tick(delta)\n      ctx.scheduler.add(client)\n      detach = () => ctx.scheduler.remove(client)\n    } else {\n      let raf: number | null = null\n      let lastNow = performance.now()\n      const loop = (now: number) => {\n        const delta = (now - lastNow) / 1000\n        lastNow = now\n        fresh.tick(delta)\n        raf = requestAnimationFrame(loop)\n      }\n      raf = requestAnimationFrame(loop)\n      detach = () => {\n        if (raf !== null) cancelAnimationFrame(raf)\n      }\n    }\n\n    return () => {\n      detach?.()\n      fresh.dispose()\n      setInput(null)\n    }\n    // We intentionally only re-create on ctx change, not opts (which is a\n    // fresh object literal each render). Smoothing tweaks during dev are\n    // applied by remounting the parent component.\n    // oxlint-disable-next-line react/exhaustive-deps\n  }, [ctx])\n\n  return input ?? STUB_SIGNAL\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\nimport { useMatterContext } from './useMatterContext.js'\n\nexport type ResizeValue = readonly [width: number, height: number, dpr: number]\n\nexport interface ResizeSignal {\n  /** Current size in CSS pixels + devicePixelRatio. */\n  get(): ResizeValue\n  on(event: 'change', cb: (value: ResizeValue) => void): () => void\n}\n\n// Inert stub returned on the first render before the lifecycle effect has\n// observed the canvas. Subscribing to it returns a no-op unsubscribe.\nconst STUB_SIGNAL: ResizeSignal = {\n  get: () => [0, 0, 1] as const,\n  on: () => () => undefined,\n}\n\n/**\n * Track the parent <MatterScene>'s canvas size + DPR. Exposes a MatterSignal\n * that components can pass into a TSL uniform to make pixel-aware effects\n * (e.g., DotField's pixel-spacing math).\n *\n * Strict-Mode-safe: lifecycle is in one effect, so React 19's intentional\n * mount→unmount→mount cycle creates a fresh ResizeObserver per real mount\n * (CLAUDE.md gotcha #14).\n *\n * Falls back to the stub signal until the parent context is ready.\n */\nexport function useResize(): ResizeSignal {\n  const ctx = useMatterContext()\n  const [signal, setSignal] = useState<ResizeSignal | null>(null)\n\n  useEffect(() => {\n    if (!ctx) return undefined\n\n    const canvas = ctx.renderer.three.domElement\n    if (!(canvas instanceof HTMLCanvasElement)) return undefined\n\n    let value: ResizeValue = [\n      canvas.clientWidth,\n      canvas.clientHeight,\n      typeof window !== 'undefined' ? window.devicePixelRatio : 1,\n    ]\n    const listeners = new Set<(v: ResizeValue) => void>()\n    const fresh: ResizeSignal = {\n      get: () => value,\n      on: (_event, cb) => {\n        listeners.add(cb)\n        return () => {\n          listeners.delete(cb)\n        }\n      },\n    }\n    setSignal(fresh)\n\n    const emit = () => {\n      const next: ResizeValue = [\n        canvas.clientWidth,\n        canvas.clientHeight,\n        typeof window !== 'undefined' ? window.devicePixelRatio : 1,\n      ]\n      if (next[0] === value[0] && next[1] === value[1] && next[2] === value[2]) return\n      value = next\n      for (const cb of listeners) cb(next)\n    }\n\n    const observer = new ResizeObserver(emit)\n    observer.observe(canvas)\n\n    // Cross-browser DPR-change watch. matchMedia(`(resolution: <dpr>dppx)`)\n    // matches at the *current* DPR; when the user zooms the page the query\n    // stops matching, fires `change`, and we re-arm the watch at the new DPR.\n    // We track the current MQL + handler so we can fully detach in cleanup\n    // (the handler is captured by the listener — passing a fresh closure to\n    // removeEventListener wouldn't actually unregister it).\n    let mql: MediaQueryList | null = null\n    let mqlHandler: (() => void) | null = null\n    const setupDprWatch = () => {\n      if (typeof window === 'undefined') return\n      const dpr = window.devicePixelRatio\n      const next = window.matchMedia(`(resolution: ${dpr}dppx)`)\n      const handler = () => {\n        emit()\n        if (mql && mqlHandler) mql.removeEventListener('change', mqlHandler)\n        setupDprWatch()\n      }\n      next.addEventListener('change', handler)\n      mql = next\n      mqlHandler = handler\n    }\n    setupDprWatch()\n\n    return () => {\n      observer.disconnect()\n      if (mql && mqlHandler) mql.removeEventListener('change', mqlHandler)\n      mql = null\n      mqlHandler = null\n      listeners.clear()\n      setSignal(null)\n    }\n  }, [ctx])\n\n  return signal ?? STUB_SIGNAL\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\n\nexport type ScrollValue = readonly [scrollY: number, progress: number]\n\nexport interface ScrollSignal {\n  /** Current scroll Y (px) and normalized progress in [0,1]. */\n  get(): ScrollValue\n  on(event: 'change', cb: (value: ScrollValue) => void): () => void\n}\n\n// Inert stub returned during SSR + on the first client render before the\n// lifecycle effect attaches. Subscribing to it returns a no-op unsubscribe.\nconst STUB_SIGNAL: ScrollSignal = {\n  get: () => [0, 0] as const,\n  on: () => () => undefined,\n}\n\n/**\n * Track window scroll position. Exposes a MatterSignal of `[scrollY, progress]`\n * where `progress` is `scrollY / max(documentHeight - innerHeight, 1)` clamped\n * to [0, 1]. Listener is rAF-throttled and `passive: true` so it never blocks\n * scrolling.\n *\n * No v1 Tier 1 component consumes this hook; it ships so users can pass\n * `inputs={{ scroll: useScroll() }}` to any Matter component.\n *\n * Strict-Mode-safe: lifecycle is in one effect, so React 19's intentional\n * mount→unmount→mount cycle in dev creates a fresh listener pair per real\n * mount and tears down cleanly on each pseudo-unmount (CLAUDE.md gotcha #14).\n *\n * **Known limitation (v1):** `progress` is computed against whichever\n * `documentHeight` was current when the last scroll fired. If the page grows\n * after mount (async content, font load reflow, expanding panels) without\n * the user scrolling, the denominator goes stale. A future ResizeObserver/\n * MutationObserver pass would close the gap; deferred until a v1 component\n * consumes scroll input.\n */\nexport function useScroll(): ScrollSignal {\n  const [signal, setSignal] = useState<ScrollSignal | null>(null)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return undefined\n\n    const compute = (): ScrollValue => {\n      const y = window.scrollY\n      // For pages shorter than the viewport, `documentHeight - innerHeight` is\n      // <= 0; clamp to 1 to avoid div-by-zero. Progress stays at 0 in that\n      // case because scrollY is also 0.\n      const max = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)\n      const progress = Math.max(0, Math.min(1, y / max))\n      return [y, progress]\n    }\n\n    let value: ScrollValue = compute()\n    const listeners = new Set<(v: ScrollValue) => void>()\n    const fresh: ScrollSignal = {\n      get: () => value,\n      on: (_event, cb) => {\n        listeners.add(cb)\n        return () => {\n          listeners.delete(cb)\n        }\n      },\n    }\n    setSignal(fresh)\n\n    let rafPending = false\n    const onScroll = () => {\n      if (rafPending) return\n      rafPending = true\n      requestAnimationFrame(() => {\n        rafPending = false\n        const next = compute()\n        if (next[0] === value[0] && next[1] === value[1]) return\n        value = next\n        for (const cb of listeners) cb(next)\n      })\n    }\n    window.addEventListener('scroll', onScroll, { passive: true })\n\n    return () => {\n      window.removeEventListener('scroll', onScroll)\n      listeners.clear()\n      setSignal(null)\n    }\n  }, [])\n\n  return signal ?? STUB_SIGNAL\n}\n","'use client'\n\nimport { useEffect, useMemo } from 'react'\nimport { uniform } from 'three/tsl'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport type { Node } from 'three/webgpu'\n\nexport interface MatterSignal<T> {\n  get(): T\n  on(event: 'change', cb: (value: T) => void): () => void\n}\n\nexport type AnimatableProp<T> = T | MatterSignal<T>\n\nconst isSignal = <T>(value: AnimatableProp<T>): value is MatterSignal<T> => {\n  return (\n    typeof value === 'object' &&\n    value !== null &&\n    typeof (value as MatterSignal<T>).get === 'function' &&\n    typeof (value as MatterSignal<T>).on === 'function'\n  )\n}\n\n/**\n * Bind an AnimatableProp<T> to a TSL uniform. Plain values create a\n * static uniform that updates only when the prop changes (React render\n * path). Signals subscribe via .on('change') and write into the uniform\n * imperatively without re-rendering.\n */\nexport function useAnimatableUniform<T>(value: AnimatableProp<T>): ShaderNodeObject<Node> {\n  // Create the uniform once with the initial value; subsequent updates flow\n  // through the effect below (either via signal subscription or direct write).\n  const uniformNode = useMemo(() => {\n    const initial = isSignal(value) ? value.get() : value\n    return uniform(initial) as unknown as ShaderNodeObject<Node>\n    // oxlint-disable-next-line react/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    if (isSignal(value)) {\n      const unsub = value.on('change', (next) => {\n        ;(uniformNode as unknown as { value: T }).value = next\n      })\n      return unsub\n    }\n    ;(uniformNode as unknown as { value: T }).value = value\n    return undefined\n  }, [value, uniformNode])\n\n  return uniformNode\n}\n","'use client'\n\nimport { useEffect, type DependencyList } from 'react'\nimport type { OverlayTransform } from './matter-context.js'\nimport { useMatterContext } from './useMatterContext.js'\n\n/**\n * Register a TSL transform as an overlay pass on the parent <MatterScene>.\n *\n * The transform takes the \"color so far\" — base scene + any earlier\n * overlays as a TSL vec4 node — and returns a modified vec4. Registration\n * happens on mount; unregistration on unmount. The hook re-registers\n * whenever any value in `deps` changes (useEffect semantics): use this\n * for structural changes (e.g., a `mode: 'additive' | 'subtractive'`\n * toggle) that swap the transform function itself. Uniforms captured\n * inside the transform mutate in place, so uniform value changes do\n * NOT need to be in deps.\n *\n * When called outside a <MatterScene> provider, this hook is a no-op.\n * Matches the existing useMatterContext convention.\n */\nexport function useOverlayPass(transform: OverlayTransform, deps: DependencyList): void {\n  const ctx = useMatterContext()\n\n  useEffect(() => {\n    if (!ctx) return\n    const unregister = ctx.registerOverlay(transform)\n    return unregister\n    // The transform captures the latest values via the deps array; we re-register\n    // when deps change. ctx is included so a remounted MatterScene re-attaches.\n    // oxlint-disable-next-line react/exhaustive-deps\n  }, [ctx, ...deps])\n}\n","'use client'\n\nimport { useEffect, useState, type ReactNode } from 'react'\n\nexport interface FallbackBoundaryProps {\n  /** Rendered until WebGPU/WebGL is available on the client. */\n  fallback?: ReactNode\n  children: ReactNode\n}\n\n/**\n * Render `fallback` until the component mounts on the client. Gates the\n * children behind client-only mounting so SSR/no-WebGPU users see a\n * sensible static placeholder rather than a flash of nothing.\n */\nexport function FallbackBoundary({ fallback, children }: FallbackBoundaryProps) {\n  const [mounted, setMounted] = useState(false)\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n  return <>{mounted ? children : (fallback ?? null)}</>\n}\n","'use client'\n\nimport { useEffect } from 'react'\nimport { useMatterContext } from './useMatterContext.js'\n\n/**\n * Opt a component out of the rAF loop while it has no dynamic uniforms.\n *\n * When `hint` is true, the scheduler runs one final flush tick (so any\n * uniform changes since the last frame are rendered) and then halts the\n * rAF loop until either `hint` becomes false or another component in the\n * same scene calls `scheduler.requestRender()`.\n *\n * Use for components whose animation is fully derived from props that don't\n * include `time`, e.g. `<LinearGradient speed={0}>` with no `interactive`.\n */\nexport function useStaticHint(hint: boolean): void {\n  const ctx = useMatterContext()\n  useEffect(() => {\n    if (!ctx) return\n    ctx.scheduler.setIdle(hint)\n    return () => ctx.scheduler.setIdle(false)\n  }, [ctx, hint])\n}\n","'use client'\n\nimport { useEffect, useRef, useState, useContext, type CSSProperties } from 'react'\nimport { MatterContext } from './matter-context.js'\n\nexport type MonitorAnchor = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n\nconst anchorStyle: Record<MonitorAnchor, CSSProperties> = {\n  'top-left': { top: 8, left: 8 },\n  'top-right': { top: 8, right: 8 },\n  'bottom-left': { bottom: 8, left: 8 },\n  'bottom-right': { bottom: 8, right: 8 },\n}\n\nconst baseStyle: CSSProperties = {\n  position: 'absolute',\n  zIndex: 10,\n  padding: '6px 8px',\n  borderRadius: 6,\n  background: 'rgba(0, 0, 0, 0.6)',\n  color: '#fff',\n  font: '11px ui-monospace, monospace',\n  lineHeight: 1.4,\n  pointerEvents: 'none',\n  whiteSpace: 'pre',\n}\n\nexport interface MatterMonitorProps {\n  anchor?: MonitorAnchor\n}\n\n/**\n * Dev-only overlay that displays the current scene's FPS, tick count, and\n * paused/idle state. Reads from the surrounding `<MatterScene>` via context\n * and subscribes to its scheduler. Renders nothing useful if mounted outside\n * a scene.\n */\nexport function MatterMonitor({ anchor = 'top-right' }: MatterMonitorProps) {\n  const ctx = useContext(MatterContext)\n  const [stats, setStats] = useState({ fps: 0, ticks: 0, frames: 0 })\n  const ticksRef = useRef(0)\n  const fpsAccumRef = useRef({ frames: 0, lastSampleAt: 0, fps: 0 })\n\n  useEffect(() => {\n    if (!ctx) return\n    const client = (tick: { now: number }) => {\n      ticksRef.current += 1\n      const acc = fpsAccumRef.current\n      acc.frames += 1\n      if (acc.lastSampleAt === 0) acc.lastSampleAt = tick.now\n      const dt = tick.now - acc.lastSampleAt\n      if (dt >= 500) {\n        acc.fps = Math.round((acc.frames * 1000) / dt)\n        acc.frames = 0\n        acc.lastSampleAt = tick.now\n      }\n      setStats({ fps: acc.fps, ticks: ticksRef.current, frames: acc.frames })\n    }\n    ctx.scheduler.add(client)\n    return () => ctx.scheduler.remove(client)\n  }, [ctx])\n\n  if (!ctx) {\n    return (\n      <div data-testid=\"matter-monitor\" style={{ ...baseStyle, ...anchorStyle[anchor] }}>\n        no scene\n      </div>\n    )\n  }\n\n  return (\n    <div data-testid=\"matter-monitor\" style={{ ...baseStyle, ...anchorStyle[anchor] }}>\n      <span data-testid=\"matter-monitor-fps\">fps: {stats.fps || '—'}</span>\n      {'\\n'}\n      <span data-testid=\"matter-monitor-ticks\">ticks: {stats.ticks}</span>\n    </div>\n  )\n}\n"],"mappings":"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","names":["import_react","import_react","import_react","import_webgpu","import_react","import_matter","import_react","STUB_SIGNAL","import_react","STUB_SIGNAL","import_react","import_tsl","import_react","import_react","import_jsx_runtime","import_react","import_react","import_jsx_runtime"]}
+{"version":3,"sources":["../src/index.ts","../src/components/fallback-boundary/fallback-boundary.tsx","../src/components/shader-monitor/shader-monitor.tsx","../src/context/shader-context.ts","../src/components/shader-scene/shader-scene.tsx","../src/hooks/use-animatable-uniform/use-animatable-uniform.ts","../src/hooks/use-cursor/use-cursor.ts","../src/hooks/use-shader-context/use-shader-context.ts","../src/hooks/use-overlay-pass/use-overlay-pass.ts","../src/hooks/use-resize/use-resize.ts","../src/hooks/use-scroll/use-scroll.ts","../src/hooks/use-shader-material/use-shader-material.ts","../src/hooks/use-static-hint/use-static-hint.ts"],"sourcesContent":["// @lovo/matter-react — React binding for Matter.\n\nexport * from './components/index.js'\nexport * from './hooks/index.js'\n\nexport type { ShaderContextValue, OverlayTransform } from './context/shader-context.js'\n","'use client'\n\nimport { type ReactNode, useEffect, useState } from 'react'\n\nexport interface FallbackBoundaryProps {\n  /** Rendered until WebGPU/WebGL is available on the client. */\n  fallback?: ReactNode\n  children: ReactNode\n}\n\n/**\n * Render `fallback` until the component mounts on the client. Gates the\n * children behind client-only mounting so SSR/no-WebGPU users see a\n * sensible static placeholder rather than a flash of nothing.\n */\nexport function FallbackBoundary({ fallback, children }: FallbackBoundaryProps) {\n  const [mounted, setMounted] = useState(false)\n\n  useEffect(() => {\n    setMounted(true)\n  }, [])\n\n  return <>{mounted ? children : (fallback ?? null)}</>\n}\n","'use client'\n\nimport { type CSSProperties, useContext, useEffect, useRef, useState } from 'react'\n\nimport { ShaderContext } from '../../context/shader-context.js'\n\nexport type MonitorAnchor = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n\nconst anchorStyle: Record<MonitorAnchor, CSSProperties> = {\n  'top-left': { top: 8, left: 8 },\n  'top-right': { top: 8, right: 8 },\n  'bottom-left': { bottom: 8, left: 8 },\n  'bottom-right': { bottom: 8, right: 8 },\n}\n\nconst baseStyle: CSSProperties = {\n  position: 'absolute',\n  zIndex: 10,\n  padding: '6px 8px',\n  borderRadius: 6,\n  background: 'rgba(0, 0, 0, 0.6)',\n  color: '#fff',\n  font: '11px ui-monospace, monospace',\n  lineHeight: 1.4,\n  pointerEvents: 'none',\n  whiteSpace: 'pre',\n}\n\nexport interface ShaderMonitorProps {\n  anchor?: MonitorAnchor\n}\n\n/**\n * Dev-only overlay that displays the current scene's FPS, tick count, and\n * paused/idle state. Reads from the surrounding `<ShaderScene>` via context\n * and subscribes to its scheduler. Renders nothing useful if mounted outside\n * a scene.\n */\nexport function ShaderMonitor({ anchor = 'top-right' }: ShaderMonitorProps) {\n  const ctx = useContext(ShaderContext)\n  const [stats, setStats] = useState({ fps: 0, ticks: 0, frames: 0 })\n  const ticksRef = useRef(0)\n  const fpsAccumRef = useRef({ frames: 0, lastSampleAt: 0, fps: 0 })\n\n  useEffect(() => {\n    if (!ctx) return\n    const client = (tick: { now: number }) => {\n      ticksRef.current += 1\n      const acc = fpsAccumRef.current\n\n      acc.frames += 1\n      if (acc.lastSampleAt === 0) acc.lastSampleAt = tick.now\n      const dt = tick.now - acc.lastSampleAt\n\n      if (dt >= 500) {\n        acc.fps = Math.round((acc.frames * 1000) / dt)\n        acc.frames = 0\n        acc.lastSampleAt = tick.now\n      }\n      setStats({ fps: acc.fps, ticks: ticksRef.current, frames: acc.frames })\n    }\n\n    ctx.scheduler.add(client)\n\n    return () => ctx.scheduler.remove(client)\n  }, [ctx])\n\n  if (!ctx) {\n    return (\n      <div data-testid=\"matter-monitor\" style={{ ...baseStyle, ...anchorStyle[anchor] }}>\n        no scene\n      </div>\n    )\n  }\n\n  return (\n    <div data-testid=\"matter-monitor\" style={{ ...baseStyle, ...anchorStyle[anchor] }}>\n      <span data-testid=\"matter-monitor-fps\">fps: {stats.fps || '—'}</span>\n      {'\\n'}\n      <span data-testid=\"matter-monitor-ticks\">ticks: {stats.ticks}</span>\n    </div>\n  )\n}\n","import type { FrameScheduler, GpuRenderer } from '@lovo/matter'\nimport { createContext } from 'react'\nimport type { Camera, Scene } from 'three'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport type { Node } from 'three/webgpu'\n\nexport type OverlayTransform = (input: ShaderNodeObject<Node>) => ShaderNodeObject<Node>\n\nexport interface ShaderContextValue {\n  renderer: GpuRenderer\n  scene: Scene\n  camera: Camera\n  scheduler: FrameScheduler\n  registerOverlay: (transform: OverlayTransform) => () => void\n}\n\nexport const ShaderContext = createContext<ShaderContextValue | null>(null)\n","'use client'\n\nimport {\n  createIntersectionWatcher,\n  createRenderer,\n  createVisibilityWatcher,\n  FrameScheduler,\n} from '@lovo/matter'\nimport { type CSSProperties, type ReactNode, useEffect, useRef, useState } from 'react'\nimport { OrthographicCamera, Scene } from 'three'\nimport { pass } from 'three/tsl'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport { PostProcessing } from 'three/webgpu'\nimport type { Node } from 'three/webgpu'\n\nimport {\n  type OverlayTransform,\n  ShaderContext,\n  type ShaderContextValue,\n} from '../../context/shader-context.js'\n\nexport interface ShaderSceneProps {\n  children?: ReactNode\n  /** Rendered server-side and during WebGPU init. Default: empty. */\n  fallback?: ReactNode\n  className?: string\n  style?: CSSProperties\n  /** Cap on devicePixelRatio. Default: 2. */\n  maxDPR?: number\n}\n\nconst defaultStyle: CSSProperties = {\n  position: 'absolute',\n  inset: 0,\n  display: 'block',\n  width: '100%',\n  height: '100%',\n}\n\n/**\n * Owns a canvas, a Three.js renderer (WebGPU + WebGL2 fallback), an\n * orthographic camera covering the canvas, an empty Scene, and a\n * FrameScheduler. Children consume these via useShaderContext().\n */\nexport function ShaderScene(props: ShaderSceneProps) {\n  const { children, fallback, className, style, maxDPR } = props\n  const canvasRef = useRef<HTMLCanvasElement>(null)\n  const [ctx, setCtx] = useState<ShaderContextValue | null>(null)\n  const [error, setError] = useState<Error | null>(null)\n\n  useEffect(() => {\n    const canvas = canvasRef.current\n\n    if (!canvas) return\n\n    let cancelled = false\n    let cleanup: (() => void) | null = null\n\n    const setup = async () => {\n      try {\n        const renderer = await createRenderer(canvas, { maxDPR })\n\n        if (cancelled) {\n          renderer.dispose()\n\n          return\n        }\n        const scene = new Scene()\n        const camera = new OrthographicCamera(-1, 1, 1, -1, 0.1, 10)\n\n        camera.position.z = 1\n        const postProcessing = new PostProcessing(renderer.three)\n        const scheduler = new FrameScheduler()\n\n        const overlays = new Map<symbol, OverlayTransform>()\n\n        // Allocate the base PassNode once per setup so rebuilds reuse the same\n        // node identity instead of churning a fresh one (and a fresh render\n        // target binding) on every register/unregister.\n        const basePass = pass(scene, camera)\n\n        const rebuildOutputNode = () => {\n          // ShaderNodeObject<PassNode> isn't structurally assignable to\n          // ShaderNodeObject<Node> (invariant generic methods); a runtime\n          // PassNode is still a Node, so the cast at the reduce seed boundary\n          // is safe. See CLAUDE.md gotcha #5.\n          // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion\n          const seed = basePass as unknown as ShaderNodeObject<Node>\n\n          postProcessing.outputNode = Array.from(overlays.values()).reduce(\n            (node, transform) => transform(node),\n            seed,\n          )\n          postProcessing.needsUpdate = true\n        }\n\n        rebuildOutputNode() // initial: just basePass, no overlays\n\n        const registerOverlay = (transform: OverlayTransform): (() => void) => {\n          const key = Symbol('overlay')\n\n          overlays.set(key, transform)\n          rebuildOutputNode()\n\n          return () => {\n            overlays.delete(key)\n            rebuildOutputNode()\n          }\n        }\n\n        scheduler.add(() => postProcessing.render())\n        scheduler.start()\n\n        const visibility = createVisibilityWatcher()\n        const intersection = createIntersectionWatcher(canvas)\n\n        const updatePauseState = () => {\n          const shouldRun = visibility.isVisible() && intersection.isInView()\n\n          if (shouldRun) scheduler.resume()\n          else scheduler.pause()\n        }\n\n        updatePauseState()\n\n        const unsubVisibility = visibility.subscribe(updatePauseState)\n        const unsubIntersection = intersection.subscribe(updatePauseState)\n\n        const onResize = () => renderer.resize()\n\n        window.addEventListener('resize', onResize)\n\n        cleanup = () => {\n          unsubVisibility()\n          unsubIntersection()\n          visibility.dispose()\n          intersection.dispose()\n          window.removeEventListener('resize', onResize)\n          scheduler.dispose()\n          renderer.dispose()\n        }\n\n        setCtx({ renderer, scene, camera, scheduler, registerOverlay })\n      } catch (err) {\n        if (cancelled) return\n        const e = err instanceof Error ? err : new Error(String(err))\n\n        console.error('[ShaderScene] renderer init failed:', e)\n        setError(e)\n      }\n    }\n\n    void setup()\n\n    return () => {\n      cancelled = true\n      cleanup?.()\n      cleanup = null\n      setCtx(null)\n    }\n  }, [maxDPR])\n\n  let content: ReactNode\n\n  if (error) {\n    content = (\n      <div\n        style={{\n          position: 'absolute',\n          inset: 0,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          padding: '1rem',\n          color: '#fff',\n          background: 'rgba(120, 30, 30, 0.85)',\n          font: '0.85rem ui-monospace, monospace',\n          whiteSpace: 'pre-wrap',\n          textAlign: 'center',\n        }}\n      >\n        ShaderScene init failed:\n        {'\\n'}\n        {error.message}\n      </div>\n    )\n  } else if (ctx) {\n    content = <ShaderContext.Provider value={ctx}>{children}</ShaderContext.Provider>\n  } else {\n    content = fallback ?? null\n  }\n\n  return (\n    <div className={className} style={{ ...defaultStyle, ...style }}>\n      <canvas ref={canvasRef} style={{ width: '100%', height: '100%', display: 'block' }} />\n      {content}\n    </div>\n  )\n}\n","'use client'\n\nimport { useEffect, useMemo } from 'react'\nimport { uniform } from 'three/tsl'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport type { Node } from 'three/webgpu'\n\nexport interface AnimatableSignal<T> {\n  get(): T\n  on(event: 'change', cb: (value: T) => void): () => void\n}\n\nexport type AnimatableProp<T> = T | AnimatableSignal<T>\n\nconst isSignal = <T>(value: AnimatableProp<T>): value is AnimatableSignal<T> => {\n  if (typeof value !== 'object' || value === null) return false\n\n  return (\n    'get' in value &&\n    typeof value.get === 'function' &&\n    'on' in value &&\n    typeof value.on === 'function'\n  )\n}\n\n/**\n * Bind an AnimatableProp<T> to a TSL uniform. Plain values create a\n * static uniform that updates only when the prop changes (React render\n * path). Signals subscribe via .on('change') and write into the uniform\n * imperatively without re-rendering.\n *\n * Returns a chainable TSL node with `.value: T` exposed for callers that\n * need to read the current uniform value imperatively (e.g., to compute\n * derived JS-side math). The runtime object is a UniformNode<T>; we\n * present it as `ShaderNodeObject<Node> & { value: T }` because TSL's\n * generic invariance blocks the more precise type from flowing through\n * downstream consumers like OverlayTransform.\n */\nexport function useAnimatableUniform<T>(\n  value: AnimatableProp<T>,\n): ShaderNodeObject<Node> & { value: T } {\n  // Create the uniform once with the initial value; subsequent updates flow\n  // through the effect below (either via signal subscription or direct write).\n  const uniformNode = useMemo(() => {\n    const initial = isSignal(value) ? value.get() : value\n\n    return uniform(initial)\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [])\n\n  useEffect(() => {\n    if (isSignal(value)) {\n      const unsub = value.on('change', (next) => {\n        uniformNode.value = next\n      })\n\n      return unsub\n    }\n    uniformNode.value = value\n\n    return undefined\n  }, [value, uniformNode])\n\n  // TSL's ShaderNodeObject<UniformNode<T>> isn't structurally assignable to\n  // ShaderNodeObject<Node> because the ShaderNodeObject proxy has invariant\n  // generic methods (label/etc.). Consumers chain `.mul()`/`.add()` which\n  // work on either at runtime; the narrower return type is fine to widen.\n  // eslint-disable-next-line @typescript-eslint/no-unsafe-type-assertion\n  return uniformNode as unknown as ShaderNodeObject<Node> & { value: T }\n}\n","'use client'\n\nimport { CursorInput, type CursorInputOptions, type Vec2 } from '@lovo/matter'\nimport { useEffect, useState } from 'react'\n\nimport { useShaderContext } from '../use-shader-context/use-shader-context.js'\n\nexport interface CursorSignal {\n  /** Current smoothed cursor position (Vec2 in 0..1 viewport space). */\n  get(): Vec2\n  /** Subscribe to change events. Returns unsubscribe. */\n  on(event: 'change', cb: (value: Vec2) => void): () => void\n}\n\n// Inert stub returned on the first render before the lifecycle effect\n// has created the real CursorInput. Calling .on returns an unsub no-op.\nconst STUB_SIGNAL: CursorSignal = {\n  get: () => [0.5, 0.5] as const,\n  on: () => () => undefined,\n}\n\n/**\n * React wrapper for CursorInput. Auto-attaches to the parent <ShaderScene>'s\n * scheduler if available; otherwise creates a free-running rAF tick.\n *\n * Lifecycle is in a single effect so React 19 Strict Mode's intentional\n * mount→unmount→mount cycle creates a *fresh* CursorInput per real mount\n * instead of disposing a long-lived one (which would silently break the\n * window mousemove listener and the smoothing tick).\n */\nexport function useCursor(opts: CursorInputOptions = {}): CursorSignal {\n  const ctx = useShaderContext()\n  const [input, setInput] = useState<CursorInput | null>(null)\n\n  useEffect(() => {\n    // Plumb the parent <ShaderScene>'s canvas as the cursor's normalization\n    // element. Without this, cursor coords are viewport-normalized — fine for\n    // a full-page scene but visibly offset when the canvas sits inside a\n    // smaller wrapper (e.g., 70vh hero). DotField's cell tiling makes the\n    // mismatch obvious; LinearGradient mostly gets away with it. Caller can\n    // override by passing `opts.element` explicitly.\n    const canvas = ctx?.renderer.three.domElement\n    const elementOpt = opts.element ?? (canvas instanceof HTMLElement ? canvas : undefined)\n    const fresh = new CursorInput({ ...opts, element: elementOpt })\n\n    setInput(fresh)\n\n    let detach: (() => void) | null = null\n\n    if (ctx?.scheduler) {\n      const client = ({ delta }: { delta: number }) => fresh.tick(delta)\n\n      ctx.scheduler.add(client)\n      detach = () => ctx.scheduler.remove(client)\n    } else {\n      let raf: number | null = null\n      let lastNow = performance.now()\n      const loop = (now: number) => {\n        const delta = (now - lastNow) / 1000\n\n        lastNow = now\n        fresh.tick(delta)\n        raf = requestAnimationFrame(loop)\n      }\n\n      raf = requestAnimationFrame(loop)\n      detach = () => {\n        if (raf !== null) cancelAnimationFrame(raf)\n      }\n    }\n\n    return () => {\n      detach()\n      fresh.dispose()\n      setInput(null)\n    }\n    // We intentionally only re-create on ctx change, not opts (which is a\n    // fresh object literal each render). Smoothing tweaks during dev are\n    // applied by remounting the parent component.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ctx])\n\n  return input ?? STUB_SIGNAL\n}\n","import { useContext } from 'react'\n\nimport { ShaderContext, type ShaderContextValue } from '../../context/shader-context.js'\n\n/**\n * Read the shader scene context. Returns null when called outside a\n * <ShaderScene>; useShaderMaterial and similar hooks check this.\n */\nexport function useShaderContext(): ShaderContextValue | null {\n  return useContext(ShaderContext)\n}\n","'use client'\n\nimport { type DependencyList, useEffect } from 'react'\n\nimport type { OverlayTransform } from '../../context/shader-context.js'\nimport { useShaderContext } from '../use-shader-context/use-shader-context.js'\n\n/**\n * Register a TSL transform as an overlay pass on the parent <ShaderScene>.\n *\n * The transform takes the \"color so far\" — base scene + any earlier\n * overlays as a TSL vec4 node — and returns a modified vec4. Registration\n * happens on mount; unregistration on unmount. The hook re-registers\n * whenever any value in `deps` changes (useEffect semantics): use this\n * for structural changes (e.g., a `mode: 'additive' | 'subtractive'`\n * toggle) that swap the transform function itself. Uniforms captured\n * inside the transform mutate in place, so uniform value changes do\n * NOT need to be in deps.\n *\n * When called outside a <ShaderScene> provider, this hook is a no-op.\n * Matches the existing useShaderContext convention.\n */\nexport function useOverlayPass(transform: OverlayTransform, deps: DependencyList): void {\n  const ctx = useShaderContext()\n\n  useEffect(() => {\n    if (!ctx) return\n    const unregister = ctx.registerOverlay(transform)\n\n    return unregister\n    // The transform captures the latest values via the deps array; we re-register\n    // when deps change. ctx is included so a remounted ShaderScene re-attaches.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ctx, ...deps])\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\n\nimport { useShaderContext } from '../use-shader-context/use-shader-context.js'\n\nexport type ResizeValue = readonly [width: number, height: number, dpr: number]\n\nexport interface ResizeSignal {\n  /** Current size in CSS pixels + devicePixelRatio. */\n  get(): ResizeValue\n  on(event: 'change', cb: (value: ResizeValue) => void): () => void\n}\n\n// Inert stub returned on the first render before the lifecycle effect has\n// observed the canvas. Subscribing to it returns a no-op unsubscribe.\nconst STUB_SIGNAL: ResizeSignal = {\n  get: () => [0, 0, 1] as const,\n  on: () => () => undefined,\n}\n\n/**\n * Track the parent <ShaderScene>'s canvas size + DPR. Exposes an AnimatableSignal\n * that components can pass into a TSL uniform to make pixel-aware effects\n * (e.g., DotField's pixel-spacing math).\n *\n * Strict-Mode-safe: lifecycle is in one effect, so React 19's intentional\n * mount→unmount→mount cycle creates a fresh ResizeObserver per real mount\n * (CLAUDE.md gotcha #14).\n *\n * Falls back to the stub signal until the parent context is ready.\n */\nexport function useResize(): ResizeSignal {\n  const ctx = useShaderContext()\n  const [signal, setSignal] = useState<ResizeSignal | null>(null)\n\n  useEffect(() => {\n    if (!ctx) return undefined\n\n    const canvas = ctx.renderer.three.domElement\n\n    if (!(canvas instanceof HTMLCanvasElement)) return undefined\n\n    let value: ResizeValue = [\n      canvas.clientWidth,\n      canvas.clientHeight,\n      typeof window !== 'undefined' ? window.devicePixelRatio : 1,\n    ]\n    const listeners = new Set<(v: ResizeValue) => void>()\n    const fresh: ResizeSignal = {\n      get: () => value,\n      on: (_event, cb) => {\n        listeners.add(cb)\n\n        return () => {\n          listeners.delete(cb)\n        }\n      },\n    }\n\n    setSignal(fresh)\n\n    const emit = () => {\n      const next: ResizeValue = [\n        canvas.clientWidth,\n        canvas.clientHeight,\n        typeof window !== 'undefined' ? window.devicePixelRatio : 1,\n      ]\n\n      if (next[0] === value[0] && next[1] === value[1] && next[2] === value[2]) return\n      value = next\n      for (const cb of listeners) cb(next)\n    }\n\n    const observer = new ResizeObserver(emit)\n\n    observer.observe(canvas)\n\n    // Cross-browser DPR-change watch. matchMedia(`(resolution: <dpr>dppx)`)\n    // matches at the *current* DPR; when the user zooms the page the query\n    // stops matching, fires `change`, and we re-arm the watch at the new DPR.\n    // We track the current MQL + handler so we can fully detach in cleanup\n    // (the handler is captured by the listener — passing a fresh closure to\n    // removeEventListener wouldn't actually unregister it).\n    let mql: MediaQueryList | null = null\n    let mqlHandler: (() => void) | null = null\n    const setupDprWatch = () => {\n      if (typeof window === 'undefined') return\n      const dpr = window.devicePixelRatio\n      const next = window.matchMedia(`(resolution: ${dpr}dppx)`)\n      const handler = () => {\n        emit()\n        if (mql && mqlHandler) mql.removeEventListener('change', mqlHandler)\n        setupDprWatch()\n      }\n\n      next.addEventListener('change', handler)\n      mql = next\n      mqlHandler = handler\n    }\n\n    setupDprWatch()\n\n    return () => {\n      observer.disconnect()\n      if (mql && mqlHandler) mql.removeEventListener('change', mqlHandler)\n      mql = null\n      mqlHandler = null\n      listeners.clear()\n      setSignal(null)\n    }\n  }, [ctx])\n\n  return signal ?? STUB_SIGNAL\n}\n","'use client'\n\nimport { useEffect, useState } from 'react'\n\nexport type ScrollValue = readonly [scrollY: number, progress: number]\n\nexport interface ScrollSignal {\n  /** Current scroll Y (px) and normalized progress in [0,1]. */\n  get(): ScrollValue\n  on(event: 'change', cb: (value: ScrollValue) => void): () => void\n}\n\n// Inert stub returned during SSR + on the first client render before the\n// lifecycle effect attaches. Subscribing to it returns a no-op unsubscribe.\nconst STUB_SIGNAL: ScrollSignal = {\n  get: () => [0, 0] as const,\n  on: () => () => undefined,\n}\n\n/**\n * Track window scroll position. Exposes an AnimatableSignal of `[scrollY, progress]`\n * where `progress` is `scrollY / max(documentHeight - innerHeight, 1)` clamped\n * to [0, 1]. Listener is rAF-throttled and `passive: true` so it never blocks\n * scrolling.\n *\n * No v1 Tier 1 component consumes this hook; it ships so users can pass\n * `inputs={{ scroll: useScroll() }}` to any Matter component.\n *\n * Strict-Mode-safe: lifecycle is in one effect, so React 19's intentional\n * mount→unmount→mount cycle in dev creates a fresh listener pair per real\n * mount and tears down cleanly on each pseudo-unmount (CLAUDE.md gotcha #14).\n *\n * **Known limitation (v1):** `progress` is computed against whichever\n * `documentHeight` was current when the last scroll fired. If the page grows\n * after mount (async content, font load reflow, expanding panels) without\n * the user scrolling, the denominator goes stale. A future ResizeObserver/\n * MutationObserver pass would close the gap; deferred until a v1 component\n * consumes scroll input.\n */\nexport function useScroll(): ScrollSignal {\n  const [signal, setSignal] = useState<ScrollSignal | null>(null)\n\n  useEffect(() => {\n    if (typeof window === 'undefined') return undefined\n\n    const compute = (): ScrollValue => {\n      const y = window.scrollY\n      // For pages shorter than the viewport, `documentHeight - innerHeight` is\n      // <= 0; clamp to 1 to avoid div-by-zero. Progress stays at 0 in that\n      // case because scrollY is also 0.\n      const max = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1)\n      const progress = Math.max(0, Math.min(1, y / max))\n\n      return [y, progress]\n    }\n\n    let value: ScrollValue = compute()\n    const listeners = new Set<(v: ScrollValue) => void>()\n    const fresh: ScrollSignal = {\n      get: () => value,\n      on: (_event, cb) => {\n        listeners.add(cb)\n\n        return () => {\n          listeners.delete(cb)\n        }\n      },\n    }\n\n    setSignal(fresh)\n\n    let rafPending = false\n    const onScroll = () => {\n      if (rafPending) return\n      rafPending = true\n      requestAnimationFrame(() => {\n        rafPending = false\n        const next = compute()\n\n        if (next[0] === value[0] && next[1] === value[1]) return\n        value = next\n        for (const cb of listeners) cb(next)\n      })\n    }\n\n    window.addEventListener('scroll', onScroll, { passive: true })\n\n    return () => {\n      window.removeEventListener('scroll', onScroll)\n      listeners.clear()\n      setSignal(null)\n    }\n  }, [])\n\n  return signal ?? STUB_SIGNAL\n}\n","'use client'\n\nimport { useEffect, useMemo } from 'react'\nimport type { ShaderNodeObject } from 'three/tsl'\nimport { MeshBasicNodeMaterial } from 'three/webgpu'\nimport type { Node } from 'three/webgpu'\n\n/** A TSL fragment that produces a color. Accept any Node or TSL-wrapped node. */\nexport type ColorTSL = Node | ShaderNodeObject<Node>\n\n/**\n * Bind a TSL color expression to a NodeMaterial. Returns the material;\n * caller is responsible for adding it to a mesh and disposing when done.\n *\n * The TSL fragment is computed once via `useMemo` and re-applied if the\n * factory function changes. For dynamic uniforms, mutate `.value` on the\n * uniform nodes — don't recreate the TSL fragment per render.\n */\nexport function useShaderMaterial(build: () => ColorTSL): MeshBasicNodeMaterial {\n  const material = useMemo(() => {\n    const m = new MeshBasicNodeMaterial()\n\n    m.colorNode = build()\n\n    return m\n  }, [build])\n\n  useEffect(() => {\n    return () => material.dispose()\n  }, [material])\n\n  return material\n}\n","'use client'\n\nimport { useEffect } from 'react'\n\nimport { useShaderContext } from '../use-shader-context/use-shader-context.js'\n\n/**\n * Opt a component out of the rAF loop while it has no dynamic uniforms.\n *\n * When `hint` is true, the scheduler runs one final flush tick (so any\n * uniform changes since the last frame are rendered) and then halts the\n * rAF loop until either `hint` becomes false or another component in the\n * same scene calls `scheduler.requestRender()`.\n *\n * Use for components whose animation is fully derived from props that don't\n * include `time`, e.g. `<LinearGradient speed={0}>` with no `interactive`.\n */\nexport function useStaticHint(hint: boolean): void {\n  const ctx = useShaderContext()\n\n  useEffect(() => {\n    if (!ctx) return\n    ctx.scheduler.setIdle(hint)\n\n    return () => ctx.scheduler.setIdle(false)\n  }, [ctx, hint])\n}\n"],"mappings":"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","names":["import_react","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_tsl","import_matter","import_react","import_react","import_react","import_react","STUB_SIGNAL","import_react","STUB_SIGNAL","import_react","import_webgpu","import_react"]}

package/dist/index.d.cts

@@ -1,11 +1,35 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode, CSSProperties, DependencyList } from 'react';
-import { Scene, Camera } from 'three';
-import { Node, MeshBasicNodeMaterial } from 'three/webgpu';
 import { ShaderNodeObject } from 'three/tsl';
-import { MatterRenderer, MatterScheduler, Vec2, CursorInputOptions } from '@lovo/matter';
+import { Node, MeshBasicNodeMaterial } from 'three/webgpu';
+import { Vec2, CursorInputOptions, GpuRenderer, FrameScheduler } from '@lovo/matter';
+import { Scene, Camera } from 'three';
+
+interface FallbackBoundaryProps {
+    /** Rendered until WebGPU/WebGL is available on the client. */
+    fallback?: ReactNode;
+    children: ReactNode;
+}
+/**
+ * Render `fallback` until the component mounts on the client. Gates the
+ * children behind client-only mounting so SSR/no-WebGPU users see a
+ * sensible static placeholder rather than a flash of nothing.
+ */
+declare function FallbackBoundary({ fallback, children }: FallbackBoundaryProps): react_jsx_runtime.JSX.Element;
 
-interface MatterSceneProps {
+type MonitorAnchor = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+interface ShaderMonitorProps {
+    anchor?: MonitorAnchor;
+}
+/**
+ * Dev-only overlay that displays the current scene's FPS, tick count, and
+ * paused/idle state. Reads from the surrounding `<ShaderScene>` via context
+ * and subscribes to its scheduler. Renders nothing useful if mounted outside
+ * a scene.
+ */
+declare function ShaderMonitor({ anchor }: ShaderMonitorProps): react_jsx_runtime.JSX.Element;
+
+interface ShaderSceneProps {
     children?: ReactNode;
     /** Rendered server-side and during WebGPU init. Default: empty. */
     fallback?: ReactNode;
@@ -17,37 +41,31 @@ interface MatterSceneProps {
 /**
  * Owns a canvas, a Three.js renderer (WebGPU + WebGL2 fallback), an
  * orthographic camera covering the canvas, an empty Scene, and a
- * MatterScheduler. Children consume these via useMatterContext().
+ * FrameScheduler. Children consume these via useShaderContext().
  */
-declare function MatterScene(props: MatterSceneProps): react_jsx_runtime.JSX.Element;
+declare function ShaderScene(props: ShaderSceneProps): react_jsx_runtime.JSX.Element;
 
-type OverlayTransform = (input: ShaderNodeObject<Node>) => ShaderNodeObject<Node>;
-interface MatterContextValue {
-    renderer: MatterRenderer;
-    scene: Scene;
-    camera: Camera;
-    scheduler: MatterScheduler;
-    registerOverlay: (transform: OverlayTransform) => () => void;
+interface AnimatableSignal<T> {
+    get(): T;
+    on(event: 'change', cb: (value: T) => void): () => void;
 }
-
-/**
- * Read the matter scene context. Returns null when called outside a
- * <MatterScene>; useShaderMaterial and similar hooks check this and
- * auto-provision a scene if missing (auto-wrap behavior).
- */
-declare function useMatterContext(): MatterContextValue | null;
-
-/** A TSL fragment that produces a color. Accept any Node or TSL-wrapped node. */
-type ColorTSL = Node | ShaderNodeObject<Node>;
+type AnimatableProp<T> = T | AnimatableSignal<T>;
 /**
- * Bind a TSL color expression to a NodeMaterial. Returns the material;
- * caller is responsible for adding it to a mesh and disposing when done.
+ * Bind an AnimatableProp<T> to a TSL uniform. Plain values create a
+ * static uniform that updates only when the prop changes (React render
+ * path). Signals subscribe via .on('change') and write into the uniform
+ * imperatively without re-rendering.
  *
- * The TSL fragment is computed once via `useMemo` and re-applied if the
- * factory function changes. For dynamic uniforms, mutate `.value` on the
- * uniform nodes — don't recreate the TSL fragment per render.
+ * Returns a chainable TSL node with `.value: T` exposed for callers that
+ * need to read the current uniform value imperatively (e.g., to compute
+ * derived JS-side math). The runtime object is a UniformNode<T>; we
+ * present it as `ShaderNodeObject<Node> & { value: T }` because TSL's
+ * generic invariance blocks the more precise type from flowing through
+ * downstream consumers like OverlayTransform.
  */
-declare function useShaderMaterial(build: () => ColorTSL): MeshBasicNodeMaterial;
+declare function useAnimatableUniform<T>(value: AnimatableProp<T>): ShaderNodeObject<Node> & {
+    value: T;
+};
 
 interface CursorSignal {
     /** Current smoothed cursor position (Vec2 in 0..1 viewport space). */
@@ -56,7 +74,7 @@ interface CursorSignal {
     on(event: 'change', cb: (value: Vec2) => void): () => void;
 }
 /**
- * React wrapper for CursorInput. Auto-attaches to the parent <MatterScene>'s
+ * React wrapper for CursorInput. Auto-attaches to the parent <ShaderScene>'s
  * scheduler if available; otherwise creates a free-running rAF tick.
  *
  * Lifecycle is in a single effect so React 19 Strict Mode's intentional
@@ -66,6 +84,38 @@ interface CursorSignal {
  */
 declare function useCursor(opts?: CursorInputOptions): CursorSignal;
 
+type OverlayTransform = (input: ShaderNodeObject<Node>) => ShaderNodeObject<Node>;
+interface ShaderContextValue {
+    renderer: GpuRenderer;
+    scene: Scene;
+    camera: Camera;
+    scheduler: FrameScheduler;
+    registerOverlay: (transform: OverlayTransform) => () => void;
+}
+
+/**
+ * Read the shader scene context. Returns null when called outside a
+ * <ShaderScene>; useShaderMaterial and similar hooks check this.
+ */
+declare function useShaderContext(): ShaderContextValue | null;
+
+/**
+ * Register a TSL transform as an overlay pass on the parent <ShaderScene>.
+ *
+ * The transform takes the "color so far" — base scene + any earlier
+ * overlays as a TSL vec4 node — and returns a modified vec4. Registration
+ * happens on mount; unregistration on unmount. The hook re-registers
+ * whenever any value in `deps` changes (useEffect semantics): use this
+ * for structural changes (e.g., a `mode: 'additive' | 'subtractive'`
+ * toggle) that swap the transform function itself. Uniforms captured
+ * inside the transform mutate in place, so uniform value changes do
+ * NOT need to be in deps.
+ *
+ * When called outside a <ShaderScene> provider, this hook is a no-op.
+ * Matches the existing useShaderContext convention.
+ */
+declare function useOverlayPass(transform: OverlayTransform, deps: DependencyList): void;
+
 type ResizeValue = readonly [width: number, height: number, dpr: number];
 interface ResizeSignal {
     /** Current size in CSS pixels + devicePixelRatio. */
@@ -73,7 +123,7 @@ interface ResizeSignal {
     on(event: 'change', cb: (value: ResizeValue) => void): () => void;
 }
 /**
- * Track the parent <MatterScene>'s canvas size + DPR. Exposes a MatterSignal
+ * Track the parent <ShaderScene>'s canvas size + DPR. Exposes an AnimatableSignal
  * that components can pass into a TSL uniform to make pixel-aware effects
  * (e.g., DotField's pixel-spacing math).
  *
@@ -92,7 +142,7 @@ interface ScrollSignal {
     on(event: 'change', cb: (value: ScrollValue) => void): () => void;
 }
 /**
- * Track window scroll position. Exposes a MatterSignal of `[scrollY, progress]`
+ * Track window scroll position. Exposes an AnimatableSignal of `[scrollY, progress]`
  * where `progress` is `scrollY / max(documentHeight - innerHeight, 1)` clamped
  * to [0, 1]. Listener is rAF-throttled and `passive: true` so it never blocks
  * scrolling.
@@ -113,47 +163,17 @@ interface ScrollSignal {
  */
 declare function useScroll(): ScrollSignal;
 
-interface MatterSignal<T> {
-    get(): T;
-    on(event: 'change', cb: (value: T) => void): () => void;
-}
-type AnimatableProp<T> = T | MatterSignal<T>;
-/**
- * Bind an AnimatableProp<T> to a TSL uniform. Plain values create a
- * static uniform that updates only when the prop changes (React render
- * path). Signals subscribe via .on('change') and write into the uniform
- * imperatively without re-rendering.
- */
-declare function useAnimatableUniform<T>(value: AnimatableProp<T>): ShaderNodeObject<Node>;
-
+/** A TSL fragment that produces a color. Accept any Node or TSL-wrapped node. */
+type ColorTSL = Node | ShaderNodeObject<Node>;
 /**
- * Register a TSL transform as an overlay pass on the parent <MatterScene>.
- *
- * The transform takes the "color so far" — base scene + any earlier
- * overlays as a TSL vec4 node — and returns a modified vec4. Registration
- * happens on mount; unregistration on unmount. The hook re-registers
- * whenever any value in `deps` changes (useEffect semantics): use this
- * for structural changes (e.g., a `mode: 'additive' | 'subtractive'`
- * toggle) that swap the transform function itself. Uniforms captured
- * inside the transform mutate in place, so uniform value changes do
- * NOT need to be in deps.
+ * Bind a TSL color expression to a NodeMaterial. Returns the material;
+ * caller is responsible for adding it to a mesh and disposing when done.
  *
- * When called outside a <MatterScene> provider, this hook is a no-op.
- * Matches the existing useMatterContext convention.
- */
-declare function useOverlayPass(transform: OverlayTransform, deps: DependencyList): void;
-
-interface FallbackBoundaryProps {
-    /** Rendered until WebGPU/WebGL is available on the client. */
-    fallback?: ReactNode;
-    children: ReactNode;
-}
-/**
- * Render `fallback` until the component mounts on the client. Gates the
- * children behind client-only mounting so SSR/no-WebGPU users see a
- * sensible static placeholder rather than a flash of nothing.
+ * The TSL fragment is computed once via `useMemo` and re-applied if the
+ * factory function changes. For dynamic uniforms, mutate `.value` on the
+ * uniform nodes — don't recreate the TSL fragment per render.
  */
-declare function FallbackBoundary({ fallback, children }: FallbackBoundaryProps): react_jsx_runtime.JSX.Element;
+declare function useShaderMaterial(build: () => ColorTSL): MeshBasicNodeMaterial;
 
 /**
  * Opt a component out of the rAF loop while it has no dynamic uniforms.
@@ -168,16 +188,4 @@ declare function FallbackBoundary({ fallback, children }: FallbackBoundaryProps)
  */
 declare function useStaticHint(hint: boolean): void;
 
-type MonitorAnchor = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-interface MatterMonitorProps {
-    anchor?: MonitorAnchor;
-}
-/**
- * Dev-only overlay that displays the current scene's FPS, tick count, and
- * paused/idle state. Reads from the surrounding `<MatterScene>` via context
- * and subscribes to its scheduler. Renders nothing useful if mounted outside
- * a scene.
- */
-declare function MatterMonitor({ anchor }: MatterMonitorProps): react_jsx_runtime.JSX.Element;
-
-export { type AnimatableProp, type CursorSignal, FallbackBoundary, type FallbackBoundaryProps, type MatterContextValue, MatterMonitor, type MatterMonitorProps, MatterScene, type MatterSceneProps, type MatterSignal, type MonitorAnchor, type OverlayTransform, type ResizeSignal, type ResizeValue, type ScrollSignal, type ScrollValue, useAnimatableUniform, useCursor, useMatterContext, useOverlayPass, useResize, useScroll, useShaderMaterial, useStaticHint };
+export { type AnimatableProp, type AnimatableSignal, type CursorSignal, FallbackBoundary, type FallbackBoundaryProps, type MonitorAnchor, type OverlayTransform, type ResizeSignal, type ResizeValue, type ScrollSignal, type ScrollValue, type ShaderContextValue, ShaderMonitor, type ShaderMonitorProps, ShaderScene, type ShaderSceneProps, useAnimatableUniform, useCursor, useOverlayPass, useResize, useScroll, useShaderContext, useShaderMaterial, useStaticHint };