@cueframe/kernel 0.2.14 → 0.2.16

package/dist/{chunk-NBCFNHST.js → chunk-LQRW5UPR.js}

@@ -462,9 +462,11 @@ var MoveAlongPath = ({
   const pathLength = getLength(path);
   const distance = progress2 * pathLength;
   const point = getPointAtLength(path, distance);
+  if (!point) throw new Error(`MoveAlongPath could not resolve a point on path: ${path}`);
   let rotation = 0;
   if (rotate) {
     const tangent = getTangentAtLength(path, distance);
+    if (!tangent) throw new Error(`MoveAlongPath could not resolve a tangent on path: ${path}`);
     rotation = Math.atan2(tangent.y - point.y, tangent.x - point.x) * (180 / Math.PI);
   }
   return /* @__PURE__ */ React12.createElement(
@@ -1058,8 +1060,138 @@ var ThreeCanvas = ({
   );
 };
 
+// ../execution/animate/src/three/FrameDepthOfField.tsx
+import { useLayoutEffect as useLayoutEffect3, useRef } from "react";
+import { useFrame, useThree as useThree3 } from "@react-three/fiber";
+
+// ../execution/animate/src/three/depthOfFieldPipeline.ts
+import {
+  DepthOfFieldEffect,
+  EffectComposer,
+  EffectPass,
+  RenderPass,
+  ToneMappingEffect,
+  ToneMappingMode
+} from "postprocessing";
+import {
+  ACESFilmicToneMapping,
+  HalfFloatType,
+  NoToneMapping,
+  Vector4
+} from "three";
+var canvasOwners = /* @__PURE__ */ new WeakSet();
+function validateFrameFocus(props) {
+  const { focusDistance, focusRange, bokehScale = 2, resolutionScale = 0.5 } = props;
+  if (!Number.isFinite(focusDistance) || focusDistance <= 0 || !Number.isFinite(focusRange) || focusRange <= 0 || !Number.isFinite(bokehScale) || bokehScale < 0 || !Number.isFinite(resolutionScale) || resolutionScale <= 0 || resolutionScale > 1) {
+    throw new Error("FrameDepthOfField: expected positive focusDistance/focusRange, nonnegative bokehScale and resolutionScale in (0, 1].");
+  }
+}
+var FrameFocusPipeline = class {
+  constructor(gl, scene, camera, resolutionScale) {
+    this.gl = gl;
+    this.camera = camera;
+    if (!gl.isWebGLRenderer || !camera.isPerspectiveCamera) {
+      throw new Error("FrameDepthOfField requires a WebGLRenderer and a perspective camera.");
+    }
+    if (gl.toneMapping !== NoToneMapping && gl.toneMapping !== ACESFilmicToneMapping) {
+      throw new Error("FrameDepthOfField supports NoToneMapping or ACESFilmicToneMapping.");
+    }
+    if (canvasOwners.has(gl)) throw new Error("Only one FrameDepthOfField may own a canvas.");
+    this.toneMapping = gl.toneMapping;
+    const autoClear = gl.autoClear;
+    this.composer = new EffectComposer(gl, { frameBufferType: HalfFloatType, multisampling: 0 });
+    gl.autoClear = autoClear;
+    this.focus = new DepthOfFieldEffect(camera, { resolutionScale, bokehScale: 2 });
+    const tone = gl.toneMapping === ACESFilmicToneMapping ? [new ToneMappingEffect({ mode: ToneMappingMode.ACES_FILMIC })] : [];
+    this.effectPass = new EffectPass(camera, this.focus, ...tone);
+    this.composer.addPass(new RenderPass(scene, camera));
+    this.composer.addPass(this.effectPass);
+    canvasOwners.add(gl);
+  }
+  gl;
+  camera;
+  composer;
+  focus;
+  effectPass;
+  viewport = new Vector4();
+  scissor = new Vector4();
+  disposed = false;
+  toneMapping;
+  resize(width, height) {
+    this.composer.setSize(width, height, false);
+  }
+  draw(props) {
+    validateFrameFocus(props);
+    if (this.disposed) throw new Error("FrameDepthOfField pipeline was disposed.");
+    const { gl, focus, camera } = this;
+    if (gl.toneMapping !== this.toneMapping) {
+      throw new Error("FrameDepthOfField: renderer tone mapping changed; remount the helper.");
+    }
+    this.effectPass.mainCamera = camera;
+    focus.cocMaterial.focusDistance = props.focusDistance;
+    focus.cocMaterial.focusRange = props.focusRange;
+    focus.bokehScale = props.bokehScale ?? 2;
+    const target = gl.getRenderTarget();
+    if (target !== null) throw new Error("FrameDepthOfField must own the canvas output, not a nested render target.");
+    const autoClear = gl.autoClear;
+    const toneMapping = gl.toneMapping;
+    const scissorTest = gl.getScissorTest();
+    gl.getViewport(this.viewport);
+    gl.getScissor(this.scissor);
+    try {
+      gl.autoClear = false;
+      gl.toneMapping = NoToneMapping;
+      gl.setScissorTest(false);
+      this.composer.render(0);
+    } finally {
+      gl.setRenderTarget(target);
+      gl.setViewport(this.viewport);
+      gl.setScissor(this.scissor);
+      gl.setScissorTest(scissorTest);
+      gl.autoClear = autoClear;
+      gl.toneMapping = toneMapping;
+    }
+  }
+  dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
+    try {
+      this.composer.dispose();
+    } finally {
+      canvasOwners.delete(this.gl);
+    }
+  }
+};
+
+// ../execution/animate/src/three/FrameDepthOfField.tsx
+function FrameDepthOfField(props) {
+  validateFrameFocus(props);
+  const gl = useThree3((state) => state.gl);
+  const scene = useThree3((state) => state.scene);
+  const camera = useThree3((state) => state.camera);
+  const size = useThree3((state) => state.size);
+  const dpr = useThree3((state) => state.viewport.dpr);
+  const pipeline = useRef(null);
+  const resolutionScale = props.resolutionScale ?? 0.5;
+  useLayoutEffect3(() => {
+    const owned = new FrameFocusPipeline(gl, scene, camera, resolutionScale);
+    pipeline.current = owned;
+    return () => {
+      pipeline.current = null;
+      owned.dispose();
+    };
+  }, [gl, scene, camera, resolutionScale]);
+  useLayoutEffect3(() => {
+    pipeline.current?.resize(size.width, size.height);
+  }, [gl, scene, camera, resolutionScale, size.width, size.height, dpr]);
+  useFrame(() => {
+    pipeline.current?.draw(props);
+  }, 1);
+  return null;
+}
+
 // ../execution/animate/src/three/useImageTexture.ts
-import { useLayoutEffect as useLayoutEffect3, useRef, useState } from "react";
+import { useLayoutEffect as useLayoutEffect4, useRef as useRef2, useState } from "react";
 import { cancelRender, continueRender, delayRender } from "remotion";
 import { SRGBColorSpace, TextureLoader } from "three";
 
@@ -1080,10 +1212,10 @@ function discardStaleTexture(texture) {
 // ../execution/animate/src/three/useImageTexture.ts
 function useImageTexture(src) {
   const [texture, setTexture] = useState(null);
-  const held = useRef(NO_TEXTURE);
+  const held = useRef2(NO_TEXTURE);
   const [firstHandle] = useState(() => src ? delayRender(`three: load texture ${src}`) : null);
-  const firstHandleSpent = useRef(false);
-  useLayoutEffect3(() => {
+  const firstHandleSpent = useRef2(false);
+  useLayoutEffect4(() => {
     const takeHandle = () => {
       if (firstHandle !== null && !firstHandleSpent.current) {
         firstHandleSpent.current = true;
@@ -1126,10 +1258,10 @@ function useImageTexture(src) {
       continueRender(handle);
     };
   }, [src, firstHandle]);
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     held.current = commitImageTexture(held.current, texture);
   }, [texture]);
-  useLayoutEffect3(() => () => {
+  useLayoutEffect4(() => () => {
     held.current = releaseImageTexture(held.current);
   }, []);
   return texture;
@@ -1617,8 +1749,8 @@ var ContactShadow = ({ y, width, depth, opacity = 0.45, z = 0 }) => {
 };
 
 // ../execution/animate/src/media/MediaTileScene.tsx
-import React21, { useCallback, useLayoutEffect as useLayoutEffect4, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
-import { useThree as useThree3 } from "@react-three/fiber";
+import React21, { useCallback, useLayoutEffect as useLayoutEffect5, useMemo as useMemo4, useRef as useRef3, useState as useState2 } from "react";
+import { useThree as useThree4 } from "@react-three/fiber";
 import { Video } from "@remotion/media";
 import { ThreeCanvas as ThreeCanvas2 } from "@remotion/three";
 import { BufferAttribute, BufferGeometry, Color, SRGBColorSpace as SRGBColorSpace3, Texture as Texture2, WebGLRenderer } from "three";
@@ -1735,9 +1867,9 @@ function ImageProducer({ id, stream: stream2, accept, report }) {
   );
 }
 function VideoProducer({ id, stream: stream2, accept, report }) {
-  const container = useRef2(null);
-  const version = useRef2(0);
-  const acceptedFrame = useRef2(null);
+  const container = useRef3(null);
+  const version = useRef3(0);
+  const acceptedFrame = useRef3(null);
   const frame = useCurrentFrame15();
   const handleVideoError = useCallback((error) => {
     report(error);
@@ -1794,7 +1926,7 @@ function geometryForCrop(crop) {
   return geometry;
 }
 function StreamTiles({ entry, tiles }) {
-  const invalidate = useThree3((state) => state.invalidate);
+  const invalidate = useThree4((state) => state.invalidate);
   const texture = useMemo4(() => {
     const value = new Texture2(entry.source);
     value.colorSpace = SRGBColorSpace3;
@@ -1810,11 +1942,11 @@ function StreamTiles({ entry, tiles }) {
     }
     return values;
   }, [tiles]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     texture.needsUpdate = true;
     invalidate();
   }, [entry.version, invalidate, texture]);
-  useLayoutEffect4(() => () => {
+  useLayoutEffect5(() => () => {
     texture.dispose();
     for (const geometry of geometries.values()) geometry.dispose();
   }, [geometries, texture]);
@@ -1836,12 +1968,12 @@ function StreamTiles({ entry, tiles }) {
   }));
 }
 function SceneContents({ streamIds, tiles, sources, camera, fog, background, announce, presentationReady, playing }) {
-  const { advance, camera: threeCamera, gl, invalidate } = useThree3();
+  const { advance, camera: threeCamera, gl, invalidate } = useThree4();
   const frame = useCurrentFrame15();
   const isRendering = getRemotionEnvironment().isRendering;
   const perspective = camera?.perspective ?? 1400;
   const { height } = useVideoConfig4();
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     threeCamera.position.set(camera?.x ?? 0, -(camera?.y ?? 0), perspective - (camera?.z ?? 0));
     threeCamera.zoom = camera?.zoom ?? 1;
     if ("fov" in threeCamera) threeCamera.fov = 2 * Math.atan(height / (2 * perspective)) * 180 / Math.PI;
@@ -1855,7 +1987,7 @@ function SceneContents({ streamIds, tiles, sources, camera, fog, background, ann
     invalidate();
   }, [background, camera, frame, gl, height, invalidate, perspective, threeCamera]);
   const sourceVersions = streamIds.map((id) => sources[id].version).join(":");
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (isRendering || !playing) advance(performance.now());
     else invalidate();
     if (presentationReady) announce();
@@ -1884,9 +2016,9 @@ function MediaTileScene({ streams, tiles, camera, fog, background, style }) {
   const [sources, setSources] = useState2({});
   const [failure, setFailure] = useState2(null);
   const [sceneId] = useState2(() => `cueframe-media-tile-${++nextMediaTileSceneId}`);
-  const announcedFrame = useRef2(null);
-  const frameGate = useRef2(null);
-  useLayoutEffect4(() => {
+  const announcedFrame = useRef3(null);
+  const frameGate = useRef3(null);
+  useLayoutEffect5(() => {
     if (!isRendering) return;
     const gate = {
       frame,
@@ -2006,7 +2138,7 @@ function scaleSceneTransform(t, scale) {
 }
 
 // ../execution/animate/src/scene/v2/builders.tsx
-import React22, { useLayoutEffect as useLayoutEffect8, useMemo as useMemo5, useRef as useRef5 } from "react";
+import React22, { useLayoutEffect as useLayoutEffect9, useMemo as useMemo5, useRef as useRef6 } from "react";
 import { DoubleSide as DoubleSide2, FrontSide as FrontSide2 } from "three";
 
 // ../execution/animate/src/scene/deviceOpacity.ts
@@ -2062,13 +2194,13 @@ function textureImageSize(texture, slot, layerIndex) {
 }
 
 // ../execution/animate/src/scene/UnlitPlane.tsx
-import { useLayoutEffect as useLayoutEffect5 } from "react";
+import { useLayoutEffect as useLayoutEffect6 } from "react";
 import { DoubleSide, FrontSide } from "three";
 var UNLIT_PLANE_ALPHA_TEST = 0.01;
 function UnlitPlane({ texture, fit, color = "#ffffff", transparent = true, depthWrite = true, backface = "hidden", resourceOwner, resourceName }) {
   const [rx, ry] = fit.repeat;
   const [ox, oy] = fit.offset;
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     if (texture.repeat.x !== rx || texture.repeat.y !== ry) texture.repeat.set(rx, ry);
     if (texture.offset.x !== ox || texture.offset.y !== oy) texture.offset.set(ox, oy);
   }, [texture, rx, ry, ox, oy]);
@@ -2087,8 +2219,8 @@ function UnlitPlane({ texture, fit, color = "#ffffff", transparent = true, depth
 }
 
 // ../execution/animate/src/scene/useSceneImageTexture.ts
-import { useLayoutEffect as useLayoutEffect6, useRef as useRef3, useState as useState3 } from "react";
-import { useThree as useThree4 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef4, useState as useState3 } from "react";
+import { useThree as useThree5 } from "@react-three/fiber";
 import { cancelRender as cancelRender3, continueRender as continueRender3, delayRender as delayRender3 } from "remotion";
 import { SRGBColorSpace as SRGBColorSpace4, TextureLoader as TextureLoader2 } from "three";
 
@@ -2146,13 +2278,13 @@ function advanceRendererOnce(advance) {
 // ../execution/animate/src/scene/useSceneImageTexture.ts
 function useSceneImageTexture(src, slot, what, resourceOwner = `surface:${slot}`) {
   const registerActual = useSceneActualResourceRegistrarV1();
-  const advance = useThree4((s) => s.advance);
+  const advance = useThree5((s) => s.advance);
   const [generations] = useState3(() => new LoadGenerations());
   const [firstHandle] = useState3(() => delayRender3(`scene: ${what} "${slot}"`));
-  const firstHandleSpent = useRef3(false);
+  const firstHandleSpent = useRef4(false);
   const [committed, setCommitted] = useState3(null);
-  const state = useRef3(EMPTY_TEXTURE_STATE);
-  useLayoutEffect6(() => {
+  const state = useRef4(EMPTY_TEXTURE_STATE);
+  useLayoutEffect7(() => {
     const token = generations.begin();
     let handle;
     if (!firstHandleSpent.current) {
@@ -2195,19 +2327,19 @@ function useSceneImageTexture(src, slot, what, resourceOwner = `surface:${slot}`
       continueRender3(handle);
     };
   }, [src, slot, what, resourceOwner, generations, firstHandle, registerActual]);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     if (!committed) return;
     state.current = onTextureCommitted(state.current, committed, { continueRender: continueRender3, redraw: () => advanceRendererOnce(advance) });
   }, [committed, advance]);
-  useLayoutEffect6(() => () => {
+  useLayoutEffect7(() => () => {
     state.current = onTextureOwnerUnmounted(generations, state.current);
   }, [generations]);
   return committed?.texture ?? null;
 }
 
 // ../execution/animate/src/scene/useWorldTextTexture.ts
-import { useLayoutEffect as useLayoutEffect7, useRef as useRef4, useState as useState4 } from "react";
-import { useThree as useThree5 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect8, useRef as useRef5, useState as useState4 } from "react";
+import { useThree as useThree6 } from "@react-three/fiber";
 import { cancelRender as cancelRender4, continueRender as continueRender4, delayRender as delayRender4 } from "remotion";
 
 // ../execution/animate/src/scene/fontReadiness.ts
@@ -2462,18 +2594,18 @@ function createWorldTextTexture(request, registerActual = registerActualSceneRes
 function useWorldTextTexture(prepared) {
   const registerActual = useSceneActualResourceRegistrarV1();
   const { layer, index, layout, size, key } = prepared;
-  const advance = useThree5((s) => s.advance);
-  const gl = useThree5((s) => s.gl);
+  const advance = useThree6((s) => s.advance);
+  const gl = useThree6((s) => s.gl);
   const [generations] = useState4(() => new LoadGenerations());
   const [firstHandle] = useState4(() => delayRender4(`scene: world text "${layer.id}"`));
-  const firstHandleSpent = useRef4(false);
+  const firstHandleSpent = useRef5(false);
   const [committed, setCommitted] = useState4(null);
-  const held = useRef4(null);
-  const request = useRef4({ layer, layout, size, index });
-  useLayoutEffect7(() => {
+  const held = useRef5(null);
+  const request = useRef5({ layer, layout, size, index });
+  useLayoutEffect8(() => {
     request.current = { layer, layout, size, index };
   });
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const token = generations.begin();
     let handle;
     if (!firstHandleSpent.current) {
@@ -2504,11 +2636,11 @@ function useWorldTextTexture(prepared) {
       continueRender4(handle);
     };
   }, [key, gl, generations, firstHandle, registerActual]);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (!committed) return;
     held.current = onRasterCommitted(worldTextRasterCache, held.current, committed, { continueRender: continueRender4, redraw: () => advanceRendererOnce(advance) });
   }, [committed, advance]);
-  useLayoutEffect7(() => () => {
+  useLayoutEffect8(() => () => {
     held.current = onRasterOwnerUnmounted(generations, worldTextRasterCache, held.current);
   }, [generations]);
   return committed?.raster ?? null;
@@ -2526,7 +2658,7 @@ function LoadedSceneSurface({ src, slot, what, resourceOwner, children }) {
 var sceneDeviceResourceOwnerV1 = (node) => `${node.kind}:${node.id}`;
 var slabContentFit = (width, height, image) => planeFit("contain", { width, height }, image);
 function PosedObject({ transform, scale, opacity, children }) {
-  const group = useRef5(null);
+  const group = useRef6(null);
   const pose = useMemo5(() => sceneLayerPose(scaleSceneTransform(transform, scale)), [
     transform.position[0],
     transform.position[1],
@@ -2537,7 +2669,7 @@ function PosedObject({ transform, scale, opacity, children }) {
     transform.scale,
     scale
   ]);
-  useLayoutEffect8(() => {
+  useLayoutEffect9(() => {
     if (group.current) applyLayerOpacity(group.current, opacity);
   }, [opacity]);
   return /* @__PURE__ */ React22.createElement("group", { ref: group, visible: opacity > 0, position: pose.position, quaternion: pose.quaternion, scale: pose.scale }, children);
@@ -2662,11 +2794,11 @@ function useOwnedSlabResources(width, height, thickness, cornerRadius, edgeRadiu
     { owner, name: "body-geometry", domain: "gl", bytes: geometryBytes },
     { owner, name: "body-geometry-arrays", domain: "cpu", bytes: geometryBytes }
   ]), [geometry, geometryBytes, owner, registerActual]);
-  useLayoutEffect8(() => () => {
+  useLayoutEffect9(() => () => {
     geometry.dispose();
     geometryMeasurement();
   }, [geometry, geometryMeasurement]);
-  useLayoutEffect8(() => () => finish.dispose(), [finish]);
+  useLayoutEffect9(() => () => finish.dispose(), [finish]);
   return { geometry, finish };
 }
 function PageObject({ node, src, contentColor, preparedSurface, scale, surfaceResourceOwner, mountEarly = false }) {
@@ -2800,9 +2932,9 @@ function assertSceneSurfaceResolution(spec2, output) {
 }
 
 // ../execution/animate/src/scene/v2/videoBinding.tsx
-import React23, { useCallback as useCallback2, useLayoutEffect as useLayoutEffect9, useRef as useRef6, useState as useState5 } from "react";
+import React23, { useCallback as useCallback2, useLayoutEffect as useLayoutEffect10, useRef as useRef7, useState as useState5 } from "react";
 import { flushSync } from "react-dom";
-import { useThree as useThree6 } from "@react-three/fiber";
+import { useThree as useThree7 } from "@react-three/fiber";
 import { Video as Video2 } from "@remotion/media";
 import { Sequence, cancelRender as cancelRender5, continueRender as continueRender5, delayRender as delayRender5, useCurrentFrame as useCurrentFrame16 } from "remotion";
 import { CanvasTexture as CanvasTexture3, LinearFilter as LinearFilter2, LinearMipmapLinearFilter as LinearMipmapLinearFilter2, SRGBColorSpace as SRGBColorSpace6 } from "three";
@@ -2827,19 +2959,19 @@ function SceneVideoBindingV1({ src, schedule, contentFrame, width, height, resou
   const registerActual = useSceneActualResourceRegistrarV1();
   const compositionFrame = useCurrentFrame16();
   const address = sceneVideoMidpointAddressV1(contentFrame, schedule);
-  const expected = useRef6("");
-  const alive = useRef6(true);
-  const canvas = useRef6(null);
-  const texture = useRef6(null);
-  const releaseTextureMeasurement = useRef6(null);
-  const accepted = useRef6(null);
-  const revision = useRef6(0);
-  const drawReceipt = useRef6({ request: null, revision: null });
-  const readinessHandle = useRef6(null);
+  const expected = useRef7("");
+  const alive = useRef7(true);
+  const canvas = useRef7(null);
+  const texture = useRef7(null);
+  const releaseTextureMeasurement = useRef7(null);
+  const accepted = useRef7(null);
+  const revision = useRef7(0);
+  const drawReceipt = useRef7({ request: null, revision: null });
+  const readinessHandle = useRef7(null);
   const [binding, setBinding] = useState5(null);
   const request = `${contentFrame}:${address.sourceIndex}:${address.mediaFrame}`;
   expected.current = request;
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     alive.current = true;
     return () => {
       alive.current = false;
@@ -2914,8 +3046,8 @@ function SceneVideoBindingV1({ src, schedule, contentFrame, width, height, resou
   )));
 }
 function SceneVideoTextureCommitV1({ binding }) {
-  const { advance, scene } = useThree6((state) => ({ advance: state.advance, scene: state.scene }));
-  useLayoutEffect9(() => {
+  const { advance, scene } = useThree7((state) => ({ advance: state.advance, scene: state.scene }));
+  useLayoutEffect10(() => {
     if (!sceneHasVideoTextureV1(scene, binding.texture)) throw new Error(`${VIDEO_ERROR} matching texture was not attached to a material before readiness.`);
     binding.texture.needsUpdate = true;
     advance(performance.now());
@@ -2927,8 +3059,8 @@ function SceneVideoTextureCommitV1({ binding }) {
 }
 
 // ../execution/animate/src/scene/v2/SceneShotV2.tsx
-import React26, { useLayoutEffect as useLayoutEffect11 } from "react";
-import { useThree as useThree8 } from "@react-three/fiber";
+import React26, { useLayoutEffect as useLayoutEffect12 } from "react";
+import { useThree as useThree9 } from "@react-three/fiber";
 import { getRemotionEnvironment as getRemotionEnvironment2, Internals as Internals3 } from "remotion";
 
 // ../execution/animate/src/scene/assets.ts
@@ -3136,8 +3268,8 @@ function sceneFinishingUniforms(post, seed, frame, size, scale) {
 }
 
 // ../execution/animate/src/scene/FocusPass.tsx
-import { useLayoutEffect as useLayoutEffect10, useState as useState6 } from "react";
-import { useFrame, useThree as useThree7 } from "@react-three/fiber";
+import { useLayoutEffect as useLayoutEffect11, useState as useState6 } from "react";
+import { useFrame as useFrame2, useThree as useThree8 } from "@react-three/fiber";
 
 // ../execution/animate/src/scene/focusBlur.ts
 var FOCUS_TAPS = 8;
@@ -3161,7 +3293,7 @@ import {
   DepthFormat,
   DepthTexture,
   FloatType,
-  HalfFloatType,
+  HalfFloatType as HalfFloatType2,
   LinearFilter as LinearFilter3,
   NearestFilter,
   NoBlending,
@@ -3173,7 +3305,7 @@ import {
   UnsignedIntType,
   Mesh,
   Vector2,
-  Vector4,
+  Vector4 as Vector42,
   WebGLRenderTarget
 } from "three";
 
@@ -3412,8 +3544,8 @@ function finishingUniformValues(lattice) {
     uVignette: { value: 0 },
     uFrameSize: { value: new Vector2(1, 1) },
     uGrainBase: { value: new Vector2(0, 0) },
-    uGrainStitch: { value: new Vector4(1, 1, 1, 1) },
-    uVignetteCore: { value: new Vector4(0, 0, 1, 1) },
+    uGrainStitch: { value: new Vector42(1, 1, 1, 1) },
+    uVignetteCore: { value: new Vector42(0, 0, 1, 1) },
     uVignetteSigma: { value: new Vector2(1, 1) },
     tGrainLattice: { value: lattice }
   };
@@ -3460,7 +3592,7 @@ var FocusResources = class {
     depthTexture.magFilter = NearestFilter;
     this.world = new WebGLRenderTarget(width, height, {
       format: RGBAFormat,
-      type: HalfFloatType,
+      type: HalfFloatType2,
       minFilter: LinearFilter3,
       magFilter: LinearFilter3,
       wrapS: ClampToEdgeWrapping,
@@ -3472,7 +3604,7 @@ var FocusResources = class {
     });
     this.gathered = new WebGLRenderTarget(width, height, {
       format: RGBAFormat,
-      type: HalfFloatType,
+      type: HalfFloatType2,
       minFilter: LinearFilter3,
       magFilter: LinearFilter3,
       wrapS: ClampToEdgeWrapping,
@@ -3683,17 +3815,17 @@ function assertPassRenderer(resources, gl) {
 }
 function FocusPass({ focus, finishing, scale, frame }) {
   const registerActual = useSceneActualResourceRegistrarV1();
-  const gl = useThree7((s) => s.gl);
-  const scene = useThree7((s) => s.scene);
-  const camera = useThree7((s) => s.camera);
+  const gl = useThree8((s) => s.gl);
+  const scene = useThree8((s) => s.scene);
+  const camera = useThree8((s) => s.camera);
   const [resources] = useState6(() => new FocusResources(gl, frame.width, frame.height, registerActual));
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     resources.resize(frame.width, frame.height);
   }, [resources, frame.width, frame.height]);
-  useLayoutEffect10(() => () => resources.dispose(), [resources]);
+  useLayoutEffect11(() => () => resources.dispose(), [resources]);
   assertPassRenderer(resources, gl);
   const planes = focusCameraPlanes(camera);
-  useFrame(() => {
+  useFrame2(() => {
     renderFocusPass(gl, scene, camera, resources, focusUniforms(focus, scale, planes, frame), finishing);
   }, FOCUS_PASS_PRIORITY);
   return null;
@@ -3765,10 +3897,10 @@ function drawSceneFrameV2({ advance, invalidate, isRendering, playing, now }) {
   else invalidate();
 }
 function SceneFrameCommitV2({ frame, children }) {
-  const { advance, invalidate } = useThree8((state) => ({ advance: state.advance, invalidate: state.invalidate }));
+  const { advance, invalidate } = useThree9((state) => ({ advance: state.advance, invalidate: state.invalidate }));
   const [playing] = Internals3.Timeline.usePlayingState();
   const isRendering = getRemotionEnvironment2().isRendering;
-  useLayoutEffect11(() => {
+  useLayoutEffect12(() => {
     drawSceneFrameV2({ advance, invalidate, isRendering, playing, now: performance.now() });
   }, [advance, frame, invalidate, isRendering, playing]);
   return /* @__PURE__ */ React26.createElement(React26.Fragment, null, children);
@@ -4278,6 +4410,7 @@ var sandboxScope = {
   Graph,
   DiGraph,
   ThreeCanvas,
+  FrameDepthOfField,
   StageCameraRig,
   useImageTexture,
   StudioRig,
@@ -4360,6 +4493,7 @@ export {
   sceneCameraPoseFromV1,
   StageCameraRig,
   ThreeCanvas,
+  FrameDepthOfField,
   useImageTexture,
   defaultScreenLayout,
   makeDefaultScreenTexture,

package/dist/{chunk-6VWICHOZ.js → chunk-O7G2NXUJ.js}

@@ -1,12 +1,12 @@
 import {
-  apcaLcFromLuminance,
   clampToFloor,
+  contrastRatioFromLuminance,
   deriveContrastSafe,
   relativeLuminance
-} from "./chunk-DSMLHYJ4.js";
+} from "./chunk-ILO4NEZ3.js";
 import {
   FLOORS
-} from "./chunk-JF4JJAFP.js";
+} from "./chunk-VG2ND6PX.js";
 import {
   captionFontSource,
   effectiveCaptionFamily
@@ -360,9 +360,9 @@ function unionExclusionsForAspect(aspect) {
 }
 
 // ../composition/src/projection/composition-floor.ts
-var FLOOR_VERSION = "floor-v7-2026.09.09";
+var FLOOR_VERSION = "floor-v8-2026.09.14";
 var FACE_PADDING = { top: 0.6, bottom: 0.3, side: 0.25 };
-var CAPTION_LC_FLOOR = 60;
+var CAPTION_CONTRAST_FLOOR = 4.5;
 var MIN_ZOOM = 0.4;
 var clamp01 = (v) => Math.max(0, Math.min(1, v));
 function faceKeepOut(face, depthMode = false) {
@@ -536,11 +536,13 @@ var WHITE_POLE = "#FFFFFF";
 function decideLegibility(backdrop, textColor = WHITE_POLE) {
   const textY = relativeLuminance(textColor);
   const worst = backdrop.tiles.reduce(
-    (m, tileY) => Math.min(m, apcaLcFromLuminance(textY, tileY)),
+    (m, tileY) => Math.min(m, contrastRatioFromLuminance(textY, tileY)),
     Number.POSITIVE_INFINITY
   );
-  if (worst >= CAPTION_LC_FLOOR) return { lcTarget: CAPTION_LC_FLOOR, remedy: "none" };
-  return { lcTarget: CAPTION_LC_FLOOR, remedy: "scrim" };
+  if (worst >= CAPTION_CONTRAST_FLOOR) {
+    return { contrastTarget: CAPTION_CONTRAST_FLOOR, remedy: "none" };
+  }
+  return { contrastTarget: CAPTION_CONTRAST_FLOOR, remedy: "scrim" };
 }
 function sampleFrames(win, k = 5) {
   const { startFrame: start, endFrame: end } = win;
@@ -550,7 +552,7 @@ function sampleFrames(win, k = 5) {
   return Array.from({ length: n }, (_, i) => Math.round(start + span * i / (n - 1)));
 }
 function resolveOne(el, region, input) {
-  const legibility = el.hasText ? decideLegibility(input.backdrop(region, sampleFrames(el.timeWindow)), el.textColor) : { lcTarget: CAPTION_LC_FLOOR, remedy: "none" };
+  const legibility = el.hasText ? decideLegibility(input.backdrop(region, sampleFrames(el.timeWindow)), el.textColor) : { contrastTarget: CAPTION_CONTRAST_FLOOR, remedy: "none" };
   return { id: el.id, region, legibility };
 }
 function resolveCompositionFloor(input) {
@@ -668,7 +670,7 @@ export {
   lookupSafeZones,
   FLOOR_VERSION,
   FACE_PADDING,
-  CAPTION_LC_FLOOR,
+  CAPTION_CONTRAST_FLOOR,
   MIN_ZOOM,
   faceKeepOut,
   boundingBox,

package/dist/{chunk-YLDMAZZE.js → chunk-QDBVYZSF.js}

@@ -1,6 +1,6 @@
 import {
   NEUTRAL_RAMP
-} from "./chunk-JF4JJAFP.js";
+} from "./chunk-VG2ND6PX.js";
 
 // ../execution/primitives/src/lib/tokens.ts
 var CONTRAST_CRITICAL_PATHS = /* @__PURE__ */ new Set([