@lovo/matter-react 0.4.1 → 0.6.0

package/dist/index.js

@@ -37,29 +37,29 @@ var baseStyle = {
   whiteSpace: "pre"
 };
 function ShaderMonitor({ anchor = "top-right" }) {
-  const ctx = useContext(ShaderContext);
+  const shaderContext = useContext(ShaderContext);
   const [stats, setStats] = useState2({ fps: 0, ticks: 0, frames: 0 });
   const ticksRef = useRef(0);
   const fpsAccumRef = useRef({ frames: 0, lastSampleAt: 0, fps: 0 });
   useEffect2(() => {
-    if (!ctx) return;
-    const client = (tick) => {
+    if (!shaderContext) return;
+    const schedulerTickHandler = (tick) => {
       ticksRef.current += 1;
-      const acc = fpsAccumRef.current;
-      acc.frames += 1;
-      if (acc.lastSampleAt === 0) acc.lastSampleAt = tick.now;
-      const dt = tick.now - acc.lastSampleAt;
-      if (dt >= 500) {
-        acc.fps = Math.round(acc.frames * 1e3 / dt);
-        acc.frames = 0;
-        acc.lastSampleAt = tick.now;
+      const fpsAccumulator = fpsAccumRef.current;
+      fpsAccumulator.frames += 1;
+      if (fpsAccumulator.lastSampleAt === 0) fpsAccumulator.lastSampleAt = tick.now;
+      const deltaTimeSinceLastSample = tick.now - fpsAccumulator.lastSampleAt;
+      if (deltaTimeSinceLastSample >= 500) {
+        fpsAccumulator.fps = Math.round(fpsAccumulator.frames * 1e3 / deltaTimeSinceLastSample);
+        fpsAccumulator.frames = 0;
+        fpsAccumulator.lastSampleAt = tick.now;
       }
-      setStats({ fps: acc.fps, ticks: ticksRef.current, frames: acc.frames });
+      setStats({ fps: fpsAccumulator.fps, ticks: ticksRef.current, frames: fpsAccumulator.frames });
     };
-    ctx.scheduler.add(client);
-    return () => ctx.scheduler.remove(client);
-  }, [ctx]);
-  if (!ctx) {
+    shaderContext.scheduler.add(schedulerTickHandler);
+    return () => shaderContext.scheduler.remove(schedulerTickHandler);
+  }, [shaderContext]);
+  if (!shaderContext) {
     return /* @__PURE__ */ jsx2("div", { "data-testid": "matter-monitor", style: { ...baseStyle, ...anchorStyle[anchor] }, children: "no scene" });
   }
   return /* @__PURE__ */ jsxs("div", { "data-testid": "matter-monitor", style: { ...baseStyle, ...anchorStyle[anchor] }, children: [
@@ -76,17 +76,50 @@ function ShaderMonitor({ anchor = "top-right" }) {
 }
 
 // src/components/shader-scene/shader-scene.tsx
+import { useEffect as useEffect4, useRef as useRef2, useState as useState4 } from "react";
 import {
   createIntersectionWatcher,
   createRenderer,
   createVisibilityWatcher,
   FrameScheduler
 } from "@lovo/matter";
-import { useEffect as useEffect3, useRef as useRef2, useState as useState3 } from "react";
 import { OrthographicCamera, Scene } from "three";
-import { pass } from "three/tsl";
+import { pass, vec4 } from "three/tsl";
 import { PostProcessing } from "three/webgpu";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+
+// src/hooks/use-display-gamut/use-display-gamut.ts
+import { useEffect as useEffect3, useState as useState3 } from "react";
+var P3_QUERY = "(color-gamut: p3)";
+function detectGamut() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return "srgb";
+  }
+  return window.matchMedia(P3_QUERY).matches ? "p3" : "srgb";
+}
+function useDisplayGamut(preference) {
+  const [resolved, setResolved] = useState3(
+    () => preference === "auto" ? detectGamut() : preference
+  );
+  useEffect3(() => {
+    if (preference !== "auto") {
+      setResolved(preference);
+      return;
+    }
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      setResolved("srgb");
+      return;
+    }
+    const mediaQuery = window.matchMedia(P3_QUERY);
+    const update = () => setResolved(mediaQuery.matches ? "p3" : "srgb");
+    update();
+    mediaQuery.addEventListener("change", update);
+    return () => mediaQuery.removeEventListener("change", update);
+  }, [preference]);
+  return resolved;
+}
+
+// src/components/shader-scene/shader-scene.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var defaultStyle = {
   position: "absolute",
   inset: 0,
@@ -95,18 +128,21 @@ var defaultStyle = {
   height: "100%"
 };
 function ShaderScene(props) {
-  const { children, fallback, className, style, maxDPR } = props;
+  const { children, fallback, className, style, maxDPR, gamut = "auto" } = props;
+  const resolvedGamut = useDisplayGamut(gamut);
   const canvasRef = useRef2(null);
-  const [ctx, setCtx] = useState3(null);
-  const [error, setError] = useState3(null);
-  useEffect3(() => {
+  const [shaderContext, setShaderContext] = useState4(null);
+  const [error, setError] = useState4(null);
+  const [firstFramePainted, setFirstFramePainted] = useState4(false);
+  useEffect4(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     let cancelled = false;
     let cleanup = null;
+    let firstPaintRaf = null;
     const setup = async () => {
       try {
-        const renderer = await createRenderer(canvas, { maxDPR });
+        const renderer = await createRenderer(canvas, { maxDPR, gamut: resolvedGamut });
         if (cancelled) {
           renderer.dispose();
           return;
@@ -117,12 +153,11 @@ function ShaderScene(props) {
         const postProcessing = new PostProcessing(renderer.three);
         const scheduler = new FrameScheduler();
         const overlays = /* @__PURE__ */ new Map();
-        const basePass = pass(scene, camera);
+        const basePassNode = vec4(pass(scene, camera));
         const rebuildOutputNode = () => {
-          const seed = basePass;
           postProcessing.outputNode = Array.from(overlays.values()).reduce(
-            (node, transform) => transform(node),
-            seed
+            (currentPipeline, transform) => transform(currentPipeline),
+            basePassNode
           );
           postProcessing.needsUpdate = true;
         };
@@ -136,7 +171,18 @@ function ShaderScene(props) {
             rebuildOutputNode();
           };
         };
-        scheduler.add(() => postProcessing.render());
+        let firstPaintSignaled = false;
+        const renderFrame = () => {
+          postProcessing.render();
+          if (!firstPaintSignaled && (scene.children.length > 0 || overlays.size > 0)) {
+            firstPaintSignaled = true;
+            firstPaintRaf = requestAnimationFrame(() => {
+              firstPaintRaf = null;
+              if (!cancelled) setFirstFramePainted(true);
+            });
+          }
+        };
+        scheduler.add(renderFrame);
         scheduler.start();
         const visibility = createVisibilityWatcher();
         const intersection = createIntersectionWatcher(canvas);
@@ -148,33 +194,38 @@ function ShaderScene(props) {
         updatePauseState();
         const unsubVisibility = visibility.subscribe(updatePauseState);
         const unsubIntersection = intersection.subscribe(updatePauseState);
-        const onResize = () => renderer.resize();
-        window.addEventListener("resize", onResize);
+        const resizeObserver = new ResizeObserver(() => renderer.resize());
+        resizeObserver.observe(canvas);
         cleanup = () => {
           unsubVisibility();
           unsubIntersection();
           visibility.dispose();
           intersection.dispose();
-          window.removeEventListener("resize", onResize);
+          resizeObserver.disconnect();
           scheduler.dispose();
           renderer.dispose();
         };
-        setCtx({ renderer, scene, camera, scheduler, registerOverlay });
-      } catch (err) {
+        setShaderContext({ renderer, scene, camera, scheduler, registerOverlay });
+      } catch (caughtError) {
         if (cancelled) return;
-        const e = err instanceof Error ? err : new Error(String(err));
-        console.error("[ShaderScene] renderer init failed:", e);
-        setError(e);
+        const normalizedError = caughtError instanceof Error ? caughtError : new Error(String(caughtError));
+        console.error("[ShaderScene] renderer init failed:", normalizedError);
+        setError(normalizedError);
       }
     };
     void setup();
     return () => {
       cancelled = true;
+      if (firstPaintRaf !== null) {
+        cancelAnimationFrame(firstPaintRaf);
+        firstPaintRaf = null;
+      }
       cleanup?.();
       cleanup = null;
-      setCtx(null);
+      setShaderContext(null);
+      setFirstFramePainted(false);
     };
-  }, [maxDPR]);
+  }, [maxDPR, resolvedGamut]);
   let content;
   if (error) {
     content = /* @__PURE__ */ jsxs2(
@@ -200,10 +251,11 @@ function ShaderScene(props) {
         ]
       }
     );
-  } else if (ctx) {
-    content = /* @__PURE__ */ jsx3(ShaderContext.Provider, { value: ctx, children });
   } else {
-    content = fallback ?? null;
+    content = /* @__PURE__ */ jsxs2(Fragment2, { children: [
+      shaderContext && /* @__PURE__ */ jsx3(ShaderContext.Provider, { value: shaderContext, children }),
+      !firstFramePainted && (fallback ?? null)
+    ] });
   }
   return /* @__PURE__ */ jsxs2("div", { className, style: { ...defaultStyle, ...style }, children: [
     /* @__PURE__ */ jsx3("canvas", { ref: canvasRef, style: { width: "100%", height: "100%", display: "block" } }),
@@ -212,7 +264,7 @@ function ShaderScene(props) {
 }
 
 // src/hooks/use-animatable-uniform/use-animatable-uniform.ts
-import { useEffect as useEffect4, useMemo } from "react";
+import { useEffect as useEffect5, useMemo } from "react";
 import { uniform } from "three/tsl";
 var isSignal = (value) => {
   if (typeof value !== "object" || value === null) return false;
@@ -223,7 +275,7 @@ function useAnimatableUniform(value) {
     const initial = isSignal(value) ? value.get() : value;
     return uniform(initial);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isSignal(value)) {
       const unsub = value.on("change", (next) => {
         uniformNode.value = next;
@@ -237,8 +289,8 @@ function useAnimatableUniform(value) {
 }
 
 // src/hooks/use-cursor/use-cursor.ts
+import { useEffect as useEffect6, useState as useState5 } from "react";
 import { CursorInput } from "@lovo/matter";
-import { useEffect as useEffect5, useState as useState4 } from "react";
 
 // src/hooks/use-shader-context/use-shader-context.ts
 import { useContext as useContext2 } from "react";
@@ -252,81 +304,91 @@ var STUB_SIGNAL = {
   on: () => () => void 0
 };
 function useCursor(opts = {}) {
-  const ctx = useShaderContext();
-  const [input, setInput] = useState4(null);
-  useEffect5(() => {
-    const canvas = ctx?.renderer.three.domElement;
-    const elementOpt = opts.element ?? (canvas instanceof HTMLElement ? canvas : void 0);
-    const fresh = new CursorInput({ ...opts, element: elementOpt });
-    setInput(fresh);
+  const shaderContext = useShaderContext();
+  const [input, setInput] = useState5(null);
+  useEffect6(() => {
+    const canvas = shaderContext?.renderer.three.domElement;
+    const resolvedElement = opts.element ?? (canvas instanceof HTMLElement ? canvas : void 0);
+    const newCursorInput = new CursorInput({ ...opts, element: resolvedElement });
+    setInput(newCursorInput);
     let detach = null;
-    if (ctx?.scheduler) {
-      const client = ({ delta }) => fresh.tick(delta);
-      ctx.scheduler.add(client);
-      detach = () => ctx.scheduler.remove(client);
+    if (shaderContext?.scheduler) {
+      const schedulerTickHandler = ({ delta }) => newCursorInput.tick(delta);
+      shaderContext.scheduler.add(schedulerTickHandler);
+      detach = () => shaderContext.scheduler.remove(schedulerTickHandler);
     } else {
-      let raf = null;
+      let animationFrameId = null;
       let lastNow = performance.now();
       const loop = (now) => {
         const delta = (now - lastNow) / 1e3;
         lastNow = now;
-        fresh.tick(delta);
-        raf = requestAnimationFrame(loop);
+        newCursorInput.tick(delta);
+        animationFrameId = requestAnimationFrame(loop);
       };
-      raf = requestAnimationFrame(loop);
+      animationFrameId = requestAnimationFrame(loop);
       detach = () => {
-        if (raf !== null) cancelAnimationFrame(raf);
+        if (animationFrameId !== null) cancelAnimationFrame(animationFrameId);
       };
     }
     return () => {
       detach();
-      fresh.dispose();
+      newCursorInput.dispose();
       setInput(null);
     };
-  }, [ctx]);
+  }, [shaderContext]);
   return input ?? STUB_SIGNAL;
 }
 
 // src/hooks/use-overlay-pass/use-overlay-pass.ts
-import { useEffect as useEffect6 } from "react";
-function useOverlayPass(transform, deps) {
-  const ctx = useShaderContext();
-  useEffect6(() => {
-    if (!ctx) return;
-    const unregister = ctx.registerOverlay(transform);
+import { useEffect as useEffect7 } from "react";
+function usePostProcessPass(transform, deps) {
+  const shaderContext = useShaderContext();
+  useEffect7(() => {
+    if (!shaderContext) return;
+    const unregister = shaderContext.registerOverlay(transform);
     return unregister;
-  }, [ctx, ...deps]);
+  }, [shaderContext, ...deps]);
+}
+
+// src/hooks/use-resize/use-resize.ts
+import { useEffect as useEffect8, useState as useState6 } from "react";
+
+// src/internal/create-signal.ts
+function createSignal(getValue) {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    listeners,
+    signal: {
+      get: getValue,
+      on: (_event, listener) => {
+        listeners.add(listener);
+        return () => {
+          listeners.delete(listener);
+        };
+      }
+    }
+  };
 }
 
 // src/hooks/use-resize/use-resize.ts
-import { useEffect as useEffect7, useState as useState5 } from "react";
 var STUB_SIGNAL2 = {
   get: () => [0, 0, 1],
   on: () => () => void 0
 };
 function useResize() {
-  const ctx = useShaderContext();
-  const [signal, setSignal] = useState5(null);
-  useEffect7(() => {
-    if (!ctx) return void 0;
-    const canvas = ctx.renderer.three.domElement;
+  const shaderContext = useShaderContext();
+  const [signal, setSignal] = useState6(null);
+  useEffect8(() => {
+    if (!shaderContext) return void 0;
+    const canvas = shaderContext.renderer.three.domElement;
     if (!(canvas instanceof HTMLCanvasElement)) return void 0;
     let value = [
       canvas.clientWidth,
       canvas.clientHeight,
       typeof window !== "undefined" ? window.devicePixelRatio : 1
     ];
-    const listeners = /* @__PURE__ */ new Set();
-    const fresh = {
-      get: () => value,
-      on: (_event, cb) => {
-        listeners.add(cb);
-        return () => {
-          listeners.delete(cb);
-        };
-      }
-    };
-    setSignal(fresh);
+    const { signal: newSignal, listeners } = createSignal(() => value);
+    setSignal(newSignal);
     const emit = () => {
       const next = [
         canvas.clientWidth,
@@ -335,66 +397,59 @@ function useResize() {
       ];
       if (next[0] === value[0] && next[1] === value[1] && next[2] === value[2]) return;
       value = next;
-      for (const cb of listeners) cb(next);
+      for (const listener of listeners) listener(next);
     };
     const observer = new ResizeObserver(emit);
     observer.observe(canvas);
-    let mql = null;
-    let mqlHandler = null;
+    let mediaQueryList = null;
+    let mediaQueryListener = null;
     const setupDprWatch = () => {
       if (typeof window === "undefined") return;
       const dpr = window.devicePixelRatio;
-      const next = window.matchMedia(`(resolution: ${dpr}dppx)`);
-      const handler = () => {
+      const nextMediaQueryList = window.matchMedia(`(resolution: ${dpr}dppx)`);
+      const nextMediaQueryListener = () => {
         emit();
-        if (mql && mqlHandler) mql.removeEventListener("change", mqlHandler);
+        if (mediaQueryList && mediaQueryListener)
+          mediaQueryList.removeEventListener("change", mediaQueryListener);
         setupDprWatch();
       };
-      next.addEventListener("change", handler);
-      mql = next;
-      mqlHandler = handler;
+      nextMediaQueryList.addEventListener("change", nextMediaQueryListener);
+      mediaQueryList = nextMediaQueryList;
+      mediaQueryListener = nextMediaQueryListener;
     };
     setupDprWatch();
     return () => {
       observer.disconnect();
-      if (mql && mqlHandler) mql.removeEventListener("change", mqlHandler);
-      mql = null;
-      mqlHandler = null;
+      if (mediaQueryList && mediaQueryListener)
+        mediaQueryList.removeEventListener("change", mediaQueryListener);
+      mediaQueryList = null;
+      mediaQueryListener = null;
       listeners.clear();
       setSignal(null);
     };
-  }, [ctx]);
+  }, [shaderContext]);
   return signal ?? STUB_SIGNAL2;
 }
 
 // src/hooks/use-scroll/use-scroll.ts
-import { useEffect as useEffect8, useState as useState6 } from "react";
+import { useEffect as useEffect9, useState as useState7 } from "react";
 var STUB_SIGNAL3 = {
   get: () => [0, 0],
   on: () => () => void 0
 };
 function useScroll() {
-  const [signal, setSignal] = useState6(null);
-  useEffect8(() => {
+  const [signal, setSignal] = useState7(null);
+  useEffect9(() => {
     if (typeof window === "undefined") return void 0;
     const compute = () => {
-      const y = window.scrollY;
+      const scrollYPosition = window.scrollY;
       const max = Math.max(document.documentElement.scrollHeight - window.innerHeight, 1);
-      const progress = Math.max(0, Math.min(1, y / max));
-      return [y, progress];
+      const progress = Math.max(0, Math.min(1, scrollYPosition / max));
+      return [scrollYPosition, progress];
     };
     let value = compute();
-    const listeners = /* @__PURE__ */ new Set();
-    const fresh = {
-      get: () => value,
-      on: (_event, cb) => {
-        listeners.add(cb);
-        return () => {
-          listeners.delete(cb);
-        };
-      }
-    };
-    setSignal(fresh);
+    const { signal: newSignal, listeners } = createSignal(() => value);
+    setSignal(newSignal);
     let rafPending = false;
     const onScroll = () => {
       if (rafPending) return;
@@ -404,7 +459,7 @@ function useScroll() {
         const next = compute();
         if (next[0] === value[0] && next[1] === value[1]) return;
         value = next;
-        for (const cb of listeners) cb(next);
+        for (const listener of listeners) listener(next);
       });
     };
     window.addEventListener("scroll", onScroll, { passive: true });
@@ -418,29 +473,28 @@ function useScroll() {
 }
 
 // src/hooks/use-shader-material/use-shader-material.ts
-import { useEffect as useEffect9, useMemo as useMemo2 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo2 } from "react";
 import { MeshBasicNodeMaterial } from "three/webgpu";
 function useShaderMaterial(build) {
   const material = useMemo2(() => {
-    const m = new MeshBasicNodeMaterial();
-    m.colorNode = build();
-    return m;
+    const nodeMaterial = new MeshBasicNodeMaterial();
+    nodeMaterial.colorNode = build();
+    return nodeMaterial;
   }, [build]);
-  useEffect9(() => {
+  useEffect10(() => {
     return () => material.dispose();
   }, [material]);
   return material;
 }
 
 // src/hooks/use-static-hint/use-static-hint.ts
-import { useEffect as useEffect10 } from "react";
-function useStaticHint(hint) {
-  const ctx = useShaderContext();
-  useEffect10(() => {
-    if (!ctx) return;
-    ctx.scheduler.setIdle(hint);
-    return () => ctx.scheduler.setIdle(false);
-  }, [ctx, hint]);
+import { useEffect as useEffect11 } from "react";
+function useStaticSceneHint(isStatic) {
+  const shaderContext = useShaderContext();
+  useEffect11(() => {
+    if (!shaderContext) return;
+    return shaderContext.scheduler.setIdle(isStatic);
+  }, [shaderContext, isStatic]);
 }
 export {
   FallbackBoundary,
@@ -448,11 +502,12 @@ export {
   ShaderScene,
   useAnimatableUniform,
   useCursor,
-  useOverlayPass,
+  useDisplayGamut,
+  usePostProcessPass,
   useResize,
   useScroll,
   useShaderContext,
   useShaderMaterial,
-  useStaticHint
+  useStaticSceneHint
 };
 //# sourceMappingURL=index.js.map