@editframe/react 0.37.3-beta → 0.38.0

package/dist/index.js

@@ -4,7 +4,6 @@ import { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeAc
 import { Text, TextSegment } from "./elements/Text.js";
 import { Image } from "./elements/Image.js";
 import { Surface } from "./elements/Surface.js";
-import { ThumbnailStrip } from "./elements/ThumbnailStrip.js";
 import { Timegroup } from "./elements/Timegroup.js";
 import { TimelineRoot } from "./components/TimelineRoot.js";
 import { Video } from "./elements/Video.js";
@@ -24,12 +23,15 @@ import { Pause } from "./gui/Pause.js";
 import { Play } from "./gui/Play.js";
 import { Preview } from "./gui/Preview.js";
 import { Scrubber } from "./gui/Scrubber.js";
+import { ThumbnailStrip } from "./gui/ThumbnailStrip.js";
+import { TrimHandles } from "./gui/TrimHandles.js";
 import { TimelineRuler } from "./gui/TimelineRuler.js";
 import { ToggleLoop } from "./gui/ToggleLoop.js";
 import { TogglePlay } from "./gui/TogglePlay.js";
 import { Workbench } from "./gui/Workbench.js";
 import { useTimingInfo } from "./hooks/useTimingInfo.js";
+import { useMediaInfo } from "./hooks/useMediaInfo.js";
 import { usePanZoomTransform } from "./hooks/usePanZoomTransform.js";
 import { elementNeedsFitScale, needsFitScale } from "@editframe/elements";
 
-export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, OverlayItem, OverlayLayer, PanZoom, Pause, Play, Preview, ResizableBox, Scrubber, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, TimelineRoot, TimelineRuler, ToggleLoop, TogglePlay, TransformHandles, Video, Waveform, Workbench, elementNeedsFitScale, needsFitScale, usePanZoomTransform, useTimingInfo };
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Configuration, Controls, Dial, Filmstrip, FitScale, FocusOverlay, Image, OverlayItem, OverlayLayer, PanZoom, Pause, Play, Preview, ResizableBox, Scrubber, Surface, Text, TextSegment, ThumbnailStrip, TimeDisplay, Timegroup, TimelineRoot, TimelineRuler, ToggleLoop, TogglePlay, TransformHandles, TrimHandles, Video, Waveform, Workbench, elementNeedsFitScale, needsFitScale, useMediaInfo, usePanZoomTransform, useTimingInfo };

package/dist/r3f/CompositionCanvas.d.ts

@@ -0,0 +1,32 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CanvasProps } from "@react-three/fiber";
+
+//#region src/r3f/CompositionCanvas.d.ts
+
+/**
+ * Hook to read the current composition time inside an R3F scene.
+ * Must be used within a `<CompositionCanvas>`.
+ *
+ * @returns { timeMs, durationMs } — current time and total duration in ms
+ */
+declare function useCompositionTime(): {
+  timeMs: number;
+  durationMs: number;
+};
+interface CompositionCanvasProps extends Omit<CanvasProps, "frameloop"> {
+  /** Extra styles for the container div */
+  containerStyle?: React$1.CSSProperties;
+  /** Extra className for the container div */
+  containerClassName?: string;
+}
+declare function CompositionCanvas({
+  children,
+  containerStyle,
+  containerClassName,
+  gl: glProp,
+  ...canvasProps
+}: CompositionCanvasProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CompositionCanvas, CompositionCanvasProps, useCompositionTime };
+//# sourceMappingURL=CompositionCanvas.d.ts.map

package/dist/r3f/CompositionCanvas.js

@@ -0,0 +1,94 @@
+import { createContext, useContext, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { flushSync } from "react-dom";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas, useFrame, useThree } from "@react-three/fiber";
+
+//#region src/r3f/CompositionCanvas.tsx
+const CompositionTimeContext = createContext({
+	timeMs: 0,
+	durationMs: 0
+});
+/**
+* Hook to read the current composition time inside an R3F scene.
+* Must be used within a `<CompositionCanvas>`.
+*
+* @returns { timeMs, durationMs } — current time and total duration in ms
+*/
+function useCompositionTime() {
+	return useContext(CompositionTimeContext);
+}
+function GLSync() {
+	const { gl } = useThree();
+	useFrame(() => {
+		gl.getContext().finish();
+	});
+	return null;
+}
+function InvalidateOnTimeChange({ timeMs }) {
+	const { invalidate } = useThree();
+	useLayoutEffect(() => {
+		invalidate();
+	}, [timeMs, invalidate]);
+	return null;
+}
+function CompositionCanvas({ children, containerStyle, containerClassName, gl: glProp,...canvasProps }) {
+	const [timeMs, setTimeMs] = useState(0);
+	const [durationMs, setDurationMs] = useState(0);
+	const containerRef = useRef(null);
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const tg = el.closest("ef-timegroup");
+		if (!tg) {
+			console.warn("[CompositionCanvas] No ef-timegroup ancestor found. Wrap CompositionCanvas inside a <Timegroup>.");
+			return;
+		}
+		if (tg.durationMs) setDurationMs(tg.durationMs);
+		return tg.addFrameTask?.(({ ownCurrentTimeMs, durationMs: dur }) => {
+			flushSync(() => {
+				setTimeMs(ownCurrentTimeMs);
+				setDurationMs(dur);
+			});
+		});
+	}, []);
+	const mergedGl = typeof glProp === "object" ? {
+		preserveDrawingBuffer: true,
+		...glProp
+	} : glProp ?? { preserveDrawingBuffer: true };
+	return /* @__PURE__ */ jsx("div", {
+		ref: containerRef,
+		className: containerClassName,
+		style: {
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			...containerStyle
+		},
+		children: /* @__PURE__ */ jsx(Canvas, {
+			frameloop: "demand",
+			gl: mergedGl,
+			...canvasProps,
+			style: {
+				width: "100%",
+				height: "100%",
+				...canvasProps.style
+			},
+			children: /* @__PURE__ */ jsxs(CompositionTimeContext.Provider, {
+				value: {
+					timeMs,
+					durationMs
+				},
+				children: [
+					/* @__PURE__ */ jsx(GLSync, {}),
+					/* @__PURE__ */ jsx(InvalidateOnTimeChange, { timeMs }),
+					children
+				]
+			})
+		})
+	});
+}
+
+//#endregion
+export { CompositionCanvas, useCompositionTime };
+//# sourceMappingURL=CompositionCanvas.js.map

package/dist/r3f/CompositionCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CompositionCanvas.js","names":[],"sources":["../../src/r3f/CompositionCanvas.tsx"],"sourcesContent":["/**\n * CompositionCanvas — R3F Canvas that automatically bridges\n * Editframe composition time into the 3D scene.\n *\n * Handles: addFrameTask → React state, preserveDrawingBuffer,\n * gl.finish(), frameloop=\"demand\", and invalidation.\n *\n * Usage:\n * ```tsx\n * <Timegroup mode=\"fixed\" duration=\"14s\">\n *   <CompositionCanvas shadows>\n *     <MyScene />\n *   </CompositionCanvas>\n * </Timegroup>\n * ```\n *\n * Inside scene components, use `useCompositionTime()` to read the\n * current composition time in milliseconds.\n */\n\nimport * as React from \"react\";\nimport {\n  createContext,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { Canvas, useThree, useFrame } from \"@react-three/fiber\";\nimport { flushSync } from \"react-dom\";\nimport type { CanvasProps } from \"@react-three/fiber\";\n\n/* ━━ Context for composition time ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nconst CompositionTimeContext = createContext<{\n  timeMs: number;\n  durationMs: number;\n}>({ timeMs: 0, durationMs: 0 });\n\n/**\n * Hook to read the current composition time inside an R3F scene.\n * Must be used within a `<CompositionCanvas>`.\n *\n * @returns { timeMs, durationMs } — current time and total duration in ms\n */\nexport function useCompositionTime() {\n  return useContext(CompositionTimeContext);\n}\n\n/* ━━ Internal: GL sync for renderToVideo ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction GLSync() {\n  const { gl } = useThree();\n  useFrame(() => {\n    gl.getContext().finish();\n  });\n  return null;\n}\n\n/* ━━ Internal: invalidate on time change ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction InvalidateOnTimeChange({ timeMs }: { timeMs: number }) {\n  const { invalidate } = useThree();\n  // useLayoutEffect fires synchronously during flushSync, ensuring\n  // invalidate() runs before the addFrameTask callback returns.\n  useLayoutEffect(() => {\n    invalidate();\n  }, [timeMs, invalidate]);\n  return null;\n}\n\n/* ━━ CompositionCanvas ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nexport interface CompositionCanvasProps extends Omit<CanvasProps, \"frameloop\"> {\n  /** Extra styles for the container div */\n  containerStyle?: React.CSSProperties;\n  /** Extra className for the container div */\n  containerClassName?: string;\n}\n\nexport function CompositionCanvas({\n  children,\n  containerStyle,\n  containerClassName,\n  gl: glProp,\n  ...canvasProps\n}: CompositionCanvasProps) {\n  const [timeMs, setTimeMs] = useState(0);\n  const [durationMs, setDurationMs] = useState(0);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    // Walk up to find the ef-timegroup ancestor\n    const tg = el.closest(\"ef-timegroup\") as\n      | (HTMLElement & {\n          addFrameTask?: (\n            cb: (info: {\n              ownCurrentTimeMs: number;\n              durationMs: number;\n            }) => void,\n          ) => () => void;\n          durationMs?: number;\n        })\n      | null;\n\n    if (!tg) {\n      console.warn(\n        \"[CompositionCanvas] No ef-timegroup ancestor found. \" +\n          \"Wrap CompositionCanvas inside a <Timegroup>.\",\n      );\n      return;\n    }\n\n    if (tg.durationMs) setDurationMs(tg.durationMs);\n\n    const cleanup = tg.addFrameTask?.(\n      ({ ownCurrentTimeMs, durationMs: dur }) => {\n        // flushSync commits the state update synchronously so the\n        // useLayoutEffect → invalidate() fires before we return.\n        // R3F's demand render then runs useFrame subscribers (which\n        // update instancedMesh matrices, cameras, etc.) and gl.render\n        // in a single pass — no duplicate GPU work.\n        flushSync(() => {\n          setTimeMs(ownCurrentTimeMs);\n          setDurationMs(dur);\n        });\n      },\n    );\n\n    return cleanup;\n  }, []);\n\n  // Merge user gl options with required defaults\n  const mergedGl =\n    typeof glProp === \"object\"\n      ? { preserveDrawingBuffer: true, ...glProp }\n      : (glProp ?? { preserveDrawingBuffer: true });\n\n  return (\n    <div\n      ref={containerRef}\n      className={containerClassName}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        width: \"100%\",\n        height: \"100%\",\n        ...containerStyle,\n      }}\n    >\n      <Canvas\n        frameloop=\"demand\"\n        gl={mergedGl}\n        {...canvasProps}\n        style={{ width: \"100%\", height: \"100%\", ...canvasProps.style }}\n      >\n        <CompositionTimeContext.Provider value={{ timeMs, durationMs }}>\n          <GLSync />\n          <InvalidateOnTimeChange timeMs={timeMs} />\n          {children}\n        </CompositionTimeContext.Provider>\n      </Canvas>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAmCA,MAAM,yBAAyB,cAG5B;CAAE,QAAQ;CAAG,YAAY;CAAG,CAAC;;;;;;;AAQhC,SAAgB,qBAAqB;AACnC,QAAO,WAAW,uBAAuB;;AAK3C,SAAS,SAAS;CAChB,MAAM,EAAE,OAAO,UAAU;AACzB,gBAAe;AACb,KAAG,YAAY,CAAC,QAAQ;GACxB;AACF,QAAO;;AAKT,SAAS,uBAAuB,EAAE,UAA8B;CAC9D,MAAM,EAAE,eAAe,UAAU;AAGjC,uBAAsB;AACpB,cAAY;IACX,CAAC,QAAQ,WAAW,CAAC;AACxB,QAAO;;AAYT,SAAgB,kBAAkB,EAChC,UACA,gBACA,oBACA,IAAI,OACJ,GAAG,eACsB;CACzB,MAAM,CAAC,QAAQ,aAAa,SAAS,EAAE;CACvC,MAAM,CAAC,YAAY,iBAAiB,SAAS,EAAE;CAC/C,MAAM,eAAe,OAAuB,KAAK;AAEjD,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EAGT,MAAM,KAAK,GAAG,QAAQ,eAAe;AAYrC,MAAI,CAAC,IAAI;AACP,WAAQ,KACN,mGAED;AACD;;AAGF,MAAI,GAAG,WAAY,eAAc,GAAG,WAAW;AAgB/C,SAdgB,GAAG,gBAChB,EAAE,kBAAkB,YAAY,UAAU;AAMzC,mBAAgB;AACd,cAAU,iBAAiB;AAC3B,kBAAc,IAAI;KAClB;IAEL;IAGA,EAAE,CAAC;CAGN,MAAM,WACJ,OAAO,WAAW,WACd;EAAE,uBAAuB;EAAM,GAAG;EAAQ,GACzC,UAAU,EAAE,uBAAuB,MAAM;AAEhD,QACE,oBAAC;EACC,KAAK;EACL,WAAW;EACX,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;YAED,oBAAC;GACC,WAAU;GACV,IAAI;GACJ,GAAI;GACJ,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ,GAAG,YAAY;IAAO;aAE9D,qBAAC,uBAAuB;IAAS,OAAO;KAAE;KAAQ;KAAY;;KAC5D,oBAAC,WAAS;KACV,oBAAC,0BAA+B,SAAU;KACzC;;KAC+B;IAC3B;GACL"}

package/dist/r3f/OffscreenCompositionCanvas.d.ts

@@ -0,0 +1,28 @@
+import * as React$1 from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { CanvasProps } from "@react-three/fiber";
+
+//#region src/r3f/OffscreenCompositionCanvas.d.ts
+
+interface OffscreenCompositionCanvasProps {
+  /** Web worker that will handle R3F rendering */
+  worker: Worker;
+  /** Fallback content for browsers without OffscreenCanvas support (Safari) */
+  fallback?: React$1.ReactNode;
+  /** Extra styles for the container div */
+  containerStyle?: React$1.CSSProperties;
+  /** Extra className for the container div */
+  containerClassName?: string;
+  /** Canvas props to forward to @react-three/offscreen Canvas (shadows, dpr, gl, camera, scene, etc.) */
+  canvasProps?: Omit<CanvasProps, "frameloop">;
+}
+declare function OffscreenCompositionCanvas({
+  worker,
+  fallback,
+  containerStyle,
+  containerClassName,
+  canvasProps
+}: OffscreenCompositionCanvasProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { OffscreenCompositionCanvas, OffscreenCompositionCanvasProps };
+//# sourceMappingURL=OffscreenCompositionCanvas.d.ts.map

package/dist/r3f/OffscreenCompositionCanvas.js

@@ -0,0 +1,119 @@
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Canvas } from "@react-three/offscreen";
+
+//#region src/r3f/OffscreenCompositionCanvas.tsx
+function waitForBitmap(worker, requestId) {
+	return new Promise((resolve, reject) => {
+		const timeout = setTimeout(() => {
+			worker.removeEventListener("message", handler);
+			reject(/* @__PURE__ */ new Error(`[OffscreenCompositionCanvas] Timeout waiting for frame ${requestId}`));
+		}, 5e3);
+		const handler = (e) => {
+			if (e.data.type === "frameRendered" && e.data.requestId === requestId) {
+				clearTimeout(timeout);
+				worker.removeEventListener("message", handler);
+				resolve(e.data.bitmap);
+			} else if (e.data.type === "error") {
+				clearTimeout(timeout);
+				worker.removeEventListener("message", handler);
+				reject(/* @__PURE__ */ new Error(`[OffscreenCompositionCanvas] Worker error: ${e.data.message}`));
+			}
+		};
+		worker.addEventListener("message", handler);
+	});
+}
+function OffscreenCompositionCanvas({ worker, fallback, containerStyle, containerClassName, canvasProps }) {
+	const containerRef = useRef(null);
+	const captureCanvasRef = useRef(null);
+	const [dimensions, setDimensions] = useState({
+		width: 0,
+		height: 0
+	});
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const { width, height } = entry.contentRect;
+				setDimensions({
+					width,
+					height
+				});
+			}
+		});
+		observer.observe(container);
+		return () => observer.disconnect();
+	}, []);
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const tg = container.closest("ef-timegroup");
+		if (!tg) {
+			console.warn("[OffscreenCompositionCanvas] No ef-timegroup ancestor found. Wrap OffscreenCompositionCanvas inside a <Timegroup>.");
+			return;
+		}
+		if (!tg.addFrameTask) {
+			console.warn("[OffscreenCompositionCanvas] ef-timegroup does not have addFrameTask method");
+			return;
+		}
+		let nextRequestId = 0;
+		return tg.addFrameTask(async ({ ownCurrentTimeMs, durationMs }) => {
+			const requestId = nextRequestId++;
+			worker.postMessage({
+				type: "renderFrame",
+				timeMs: ownCurrentTimeMs,
+				durationMs,
+				requestId
+			});
+			try {
+				const bitmap = await waitForBitmap(worker, requestId);
+				const captureCanvas = captureCanvasRef.current;
+				if (captureCanvas) {
+					const ctx = captureCanvas.getContext("2d");
+					if (ctx) {
+						if (captureCanvas.width !== bitmap.width || captureCanvas.height !== bitmap.height) {
+							captureCanvas.width = bitmap.width;
+							captureCanvas.height = bitmap.height;
+						}
+						ctx.drawImage(bitmap, 0, 0);
+					}
+					bitmap.close();
+				}
+			} catch (error) {
+				console.error("[OffscreenCompositionCanvas] Frame render error:", error);
+			}
+		});
+	}, [worker]);
+	return /* @__PURE__ */ jsxs("div", {
+		ref: containerRef,
+		className: containerClassName,
+		style: {
+			position: "absolute",
+			inset: 0,
+			width: "100%",
+			height: "100%",
+			...containerStyle
+		},
+		children: [/* @__PURE__ */ jsx(Canvas, {
+			worker,
+			fallback,
+			...canvasProps,
+			style: {
+				width: "100%",
+				height: "100%",
+				...canvasProps?.style
+			}
+		}), /* @__PURE__ */ jsx("canvas", {
+			ref: captureCanvasRef,
+			"data-offscreen-capture": "true",
+			style: { display: "none" },
+			width: dimensions.width,
+			height: dimensions.height
+		})]
+	});
+}
+
+//#endregion
+export { OffscreenCompositionCanvas };
+//# sourceMappingURL=OffscreenCompositionCanvas.js.map

package/dist/r3f/OffscreenCompositionCanvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OffscreenCompositionCanvas.js","names":["OffscreenCanvas"],"sources":["../../src/r3f/OffscreenCompositionCanvas.tsx"],"sourcesContent":["/**\n * OffscreenCompositionCanvas — R3F Canvas that renders in a web worker via OffscreenCanvas.\n *\n * This component integrates with Editframe's timeline system by:\n * - Registering an addFrameTask that sends time updates to the worker\n * - Receiving rendered frames (ImageBitmap) from the worker\n * - Drawing frames onto a hidden capture canvas for video export\n *\n * The worker handles all R3F rendering, keeping the main thread free and enabling\n * rendering to continue even when the browser tab is hidden.\n *\n * Usage:\n * ```tsx\n * const worker = new Worker(new URL('./scene-worker.ts', import.meta.url), { type: 'module' });\n *\n * <Timegroup mode=\"fixed\" duration=\"14s\">\n *   <OffscreenCompositionCanvas\n *     worker={worker}\n *     fallback={<MainThreadFallback />}\n *     canvasProps={{ shadows: true, dpr: [1, 2] }}\n *   />\n * </Timegroup>\n * ```\n */\n\nimport * as React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { Canvas as OffscreenCanvas } from \"@react-three/offscreen\";\nimport type { CanvasProps } from \"@react-three/fiber\";\nimport type { EFTimegroup } from \"@editframe/elements\";\n\n/* ━━ Types ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nexport interface OffscreenCompositionCanvasProps {\n  /** Web worker that will handle R3F rendering */\n  worker: Worker;\n  /** Fallback content for browsers without OffscreenCanvas support (Safari) */\n  fallback?: React.ReactNode;\n  /** Extra styles for the container div */\n  containerStyle?: React.CSSProperties;\n  /** Extra className for the container div */\n  containerClassName?: string;\n  /** Canvas props to forward to @react-three/offscreen Canvas (shadows, dpr, gl, camera, scene, etc.) */\n  canvasProps?: Omit<CanvasProps, \"frameloop\">;\n}\n\n/* ━━ Helper: Wait for bitmap from worker ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nfunction waitForBitmap(\n  worker: Worker,\n  requestId: number,\n): Promise<ImageBitmap> {\n  return new Promise((resolve, reject) => {\n    const timeout = setTimeout(() => {\n      worker.removeEventListener(\"message\", handler);\n      reject(\n        new Error(\n          `[OffscreenCompositionCanvas] Timeout waiting for frame ${requestId}`,\n        ),\n      );\n    }, 5000); // 5 second timeout\n\n    const handler = (e: MessageEvent) => {\n      if (e.data.type === \"frameRendered\" && e.data.requestId === requestId) {\n        clearTimeout(timeout);\n        worker.removeEventListener(\"message\", handler);\n        resolve(e.data.bitmap);\n      } else if (e.data.type === \"error\") {\n        clearTimeout(timeout);\n        worker.removeEventListener(\"message\", handler);\n        reject(\n          new Error(\n            `[OffscreenCompositionCanvas] Worker error: ${e.data.message}`,\n          ),\n        );\n      }\n    };\n\n    worker.addEventListener(\"message\", handler);\n  });\n}\n\n/* ━━ Component ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\nexport function OffscreenCompositionCanvas({\n  worker,\n  fallback,\n  containerStyle,\n  containerClassName,\n  canvasProps,\n}: OffscreenCompositionCanvasProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const captureCanvasRef = useRef<HTMLCanvasElement>(null);\n  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });\n\n  /* ━━ Resize observer to keep capture canvas in sync ━━━━━━━━━━━━━━━━━ */\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    const observer = new ResizeObserver((entries) => {\n      for (const entry of entries) {\n        const { width, height } = entry.contentRect;\n        setDimensions({ width, height });\n      }\n    });\n\n    observer.observe(container);\n    return () => observer.disconnect();\n  }, []);\n\n  /* ━━ addFrameTask integration ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Walk up to find the parent ef-timegroup\n    const tg = container.closest(\"ef-timegroup\") as\n      | (HTMLElement & EFTimegroup)\n      | null;\n\n    if (!tg) {\n      console.warn(\n        \"[OffscreenCompositionCanvas] No ef-timegroup ancestor found. \" +\n          \"Wrap OffscreenCompositionCanvas inside a <Timegroup>.\",\n      );\n      return;\n    }\n\n    if (!tg.addFrameTask) {\n      console.warn(\n        \"[OffscreenCompositionCanvas] ef-timegroup does not have addFrameTask method\",\n      );\n      return;\n    }\n\n    let nextRequestId = 0;\n\n    const cleanup = tg.addFrameTask(\n      async ({ ownCurrentTimeMs, durationMs }) => {\n        const requestId = nextRequestId++;\n\n        // Send render request to worker\n        worker.postMessage({\n          type: \"renderFrame\",\n          timeMs: ownCurrentTimeMs,\n          durationMs,\n          requestId,\n        });\n\n        try {\n          // Wait for worker to finish rendering and return pixels\n          const bitmap = await waitForBitmap(worker, requestId);\n\n          // Draw onto capture canvas so serialization pipeline can read pixels\n          const captureCanvas = captureCanvasRef.current;\n          if (captureCanvas) {\n            const ctx = captureCanvas.getContext(\"2d\");\n            if (ctx) {\n              // Resize capture canvas to match bitmap\n              if (\n                captureCanvas.width !== bitmap.width ||\n                captureCanvas.height !== bitmap.height\n              ) {\n                captureCanvas.width = bitmap.width;\n                captureCanvas.height = bitmap.height;\n              }\n\n              // Draw the bitmap\n              ctx.drawImage(bitmap, 0, 0);\n            }\n\n            // Close bitmap to free memory\n            bitmap.close();\n          }\n        } catch (error) {\n          console.error(\n            \"[OffscreenCompositionCanvas] Frame render error:\",\n            error,\n          );\n        }\n      },\n    );\n\n    return cleanup;\n  }, [worker]);\n\n  /* ━━ Render ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  return (\n    <div\n      ref={containerRef}\n      className={containerClassName}\n      style={{\n        position: \"absolute\",\n        inset: 0,\n        width: \"100%\",\n        height: \"100%\",\n        ...containerStyle,\n      }}\n    >\n      {/* Display canvas - handled by @react-three/offscreen */}\n      <OffscreenCanvas\n        worker={worker}\n        fallback={fallback}\n        {...canvasProps}\n        style={{ width: \"100%\", height: \"100%\", ...canvasProps?.style }}\n      />\n\n      {/* Hidden capture canvas for video export */}\n      <canvas\n        ref={captureCanvasRef}\n        data-offscreen-capture=\"true\"\n        style={{ display: \"none\" }}\n        width={dimensions.width}\n        height={dimensions.height}\n      />\n    </div>\n  );\n}\n"],"mappings":";;;;;AAgDA,SAAS,cACP,QACA,WACsB;AACtB,QAAO,IAAI,SAAS,SAAS,WAAW;EACtC,MAAM,UAAU,iBAAiB;AAC/B,UAAO,oBAAoB,WAAW,QAAQ;AAC9C,0BACE,IAAI,MACF,0DAA0D,YAC3D,CACF;KACA,IAAK;EAER,MAAM,WAAW,MAAoB;AACnC,OAAI,EAAE,KAAK,SAAS,mBAAmB,EAAE,KAAK,cAAc,WAAW;AACrE,iBAAa,QAAQ;AACrB,WAAO,oBAAoB,WAAW,QAAQ;AAC9C,YAAQ,EAAE,KAAK,OAAO;cACb,EAAE,KAAK,SAAS,SAAS;AAClC,iBAAa,QAAQ;AACrB,WAAO,oBAAoB,WAAW,QAAQ;AAC9C,2BACE,IAAI,MACF,8CAA8C,EAAE,KAAK,UACtD,CACF;;;AAIL,SAAO,iBAAiB,WAAW,QAAQ;GAC3C;;AAKJ,SAAgB,2BAA2B,EACzC,QACA,UACA,gBACA,oBACA,eACkC;CAClC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,mBAAmB,OAA0B,KAAK;CACxD,MAAM,CAAC,YAAY,iBAAiB,SAAS;EAAE,OAAO;EAAG,QAAQ;EAAG,CAAC;AAIrE,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAEhB,MAAM,WAAW,IAAI,gBAAgB,YAAY;AAC/C,QAAK,MAAM,SAAS,SAAS;IAC3B,MAAM,EAAE,OAAO,WAAW,MAAM;AAChC,kBAAc;KAAE;KAAO;KAAQ,CAAC;;IAElC;AAEF,WAAS,QAAQ,UAAU;AAC3B,eAAa,SAAS,YAAY;IACjC,EAAE,CAAC;AAIN,iBAAgB;EACd,MAAM,YAAY,aAAa;AAC/B,MAAI,CAAC,UAAW;EAGhB,MAAM,KAAK,UAAU,QAAQ,eAAe;AAI5C,MAAI,CAAC,IAAI;AACP,WAAQ,KACN,qHAED;AACD;;AAGF,MAAI,CAAC,GAAG,cAAc;AACpB,WAAQ,KACN,8EACD;AACD;;EAGF,IAAI,gBAAgB;AAgDpB,SA9CgB,GAAG,aACjB,OAAO,EAAE,kBAAkB,iBAAiB;GAC1C,MAAM,YAAY;AAGlB,UAAO,YAAY;IACjB,MAAM;IACN,QAAQ;IACR;IACA;IACD,CAAC;AAEF,OAAI;IAEF,MAAM,SAAS,MAAM,cAAc,QAAQ,UAAU;IAGrD,MAAM,gBAAgB,iBAAiB;AACvC,QAAI,eAAe;KACjB,MAAM,MAAM,cAAc,WAAW,KAAK;AAC1C,SAAI,KAAK;AAEP,UACE,cAAc,UAAU,OAAO,SAC/B,cAAc,WAAW,OAAO,QAChC;AACA,qBAAc,QAAQ,OAAO;AAC7B,qBAAc,SAAS,OAAO;;AAIhC,UAAI,UAAU,QAAQ,GAAG,EAAE;;AAI7B,YAAO,OAAO;;YAET,OAAO;AACd,YAAQ,MACN,oDACA,MACD;;IAGN;IAGA,CAAC,OAAO,CAAC;AAIZ,QACE,qBAAC;EACC,KAAK;EACL,WAAW;EACX,OAAO;GACL,UAAU;GACV,OAAO;GACP,OAAO;GACP,QAAQ;GACR,GAAG;GACJ;aAGD,oBAACA;GACS;GACE;GACV,GAAI;GACJ,OAAO;IAAE,OAAO;IAAQ,QAAQ;IAAQ,GAAG,aAAa;IAAO;IAC/D,EAGF,oBAAC;GACC,KAAK;GACL,0BAAuB;GACvB,OAAO,EAAE,SAAS,QAAQ;GAC1B,OAAO,WAAW;GAClB,QAAQ,WAAW;IACnB;GACE"}

package/dist/r3f/index.d.ts

@@ -0,0 +1,5 @@
+import { OffscreenCompositionCanvas, OffscreenCompositionCanvasProps } from "./OffscreenCompositionCanvas.js";
+import { CompositionCanvas, CompositionCanvasProps, useCompositionTime } from "./CompositionCanvas.js";
+import { renderOffscreen } from "./renderOffscreen.js";
+import { MainToWorkerMessage, RenderFramePayload, WorkerToMainMessage } from "./worker-protocol.js";
+export { CompositionCanvas, type CompositionCanvasProps, type MainToWorkerMessage, OffscreenCompositionCanvas, type OffscreenCompositionCanvasProps, type RenderFramePayload, type WorkerToMainMessage, renderOffscreen, useCompositionTime };

package/dist/r3f/index.js

@@ -0,0 +1,5 @@
+import { OffscreenCompositionCanvas } from "./OffscreenCompositionCanvas.js";
+import { CompositionCanvas, useCompositionTime } from "./CompositionCanvas.js";
+import { renderOffscreen } from "./renderOffscreen.js";
+
+export { CompositionCanvas, OffscreenCompositionCanvas, renderOffscreen, useCompositionTime };

package/dist/r3f/renderOffscreen.d.ts

@@ -0,0 +1,27 @@
+import * as React$1 from "react";
+
+//#region src/r3f/renderOffscreen.d.ts
+
+/**
+ * Render a React Three Fiber scene in a web worker with offscreen canvas.
+ *
+ * This extends @react-three/offscreen's render() with Editframe-specific features:
+ * - Time synchronization via timeStore and useCompositionTime hook
+ * - Frame-by-frame rendering on demand (renderFrame message)
+ * - Pixel capture and transfer back to main thread via ImageBitmap
+ *
+ * @param children - React node containing the R3F scene
+ *
+ * @example
+ * ```typescript
+ * // worker.ts
+ * import { renderOffscreen } from '@editframe/react/r3f';
+ * import { MyScene } from './MyScene';
+ *
+ * renderOffscreen(<MyScene />);
+ * ```
+ */
+declare function renderOffscreen(children: React$1.ReactNode): void;
+//#endregion
+export { renderOffscreen };
+//# sourceMappingURL=renderOffscreen.d.ts.map

package/dist/r3f/renderOffscreen.js

@@ -0,0 +1,291 @@
+import "react";
+import { createEvents, createRoot } from "@react-three/fiber";
+import * as THREE from "three";
+
+//#region src/r3f/renderOffscreen.ts
+const EVENTS = {
+	onClick: ["click", false],
+	onContextMenu: ["contextmenu", false],
+	onDoubleClick: ["dblclick", false],
+	onWheel: ["wheel", true],
+	onPointerDown: ["pointerdown", true],
+	onPointerUp: ["pointerup", true],
+	onPointerLeave: ["pointerleave", true],
+	onPointerMove: ["pointermove", true],
+	onPointerCancel: ["pointercancel", true],
+	onLostPointerCapture: ["lostpointercapture", true]
+};
+function createPointerEvents(emitter) {
+	return (store) => {
+		const { handlePointer } = createEvents(store);
+		return {
+			priority: 1,
+			enabled: true,
+			compute(event, state) {
+				state.pointer.set(event.offsetX / state.size.width * 2 - 1, -(event.offsetY / state.size.height) * 2 + 1);
+				state.raycaster.setFromCamera(state.pointer, state.camera);
+			},
+			connected: void 0,
+			handlers: Object.keys(EVENTS).reduce((acc, key) => ({
+				...acc,
+				[key]: handlePointer(key)
+			}), {}),
+			connect: (target) => {
+				const { set, events } = store.getState();
+				events.disconnect?.();
+				set((state) => ({ events: {
+					...state.events,
+					connected: target
+				} }));
+				Object.entries(events?.handlers ?? []).forEach(([name, event]) => {
+					const [eventName] = EVENTS[name];
+					emitter.on(eventName, event);
+				});
+			},
+			disconnect: () => {
+				const { set, events } = store.getState();
+				if (events.connected) {
+					Object.entries(events.handlers ?? []).forEach(([name, event]) => {
+						const [eventName] = EVENTS[name];
+						emitter.off(eventName, event);
+					});
+					set((state) => ({ events: {
+						...state.events,
+						connected: void 0
+					} }));
+				}
+			}
+		};
+	};
+}
+const timeStore = {
+	timeMs: 0,
+	durationMs: 0,
+	listeners: /* @__PURE__ */ new Set(),
+	update(timeMs, durationMs) {
+		this.timeMs = timeMs;
+		this.durationMs = durationMs;
+		this.listeners.forEach((l) => l());
+	}
+};
+/**
+* Render a React Three Fiber scene in a web worker with offscreen canvas.
+*
+* This extends @react-three/offscreen's render() with Editframe-specific features:
+* - Time synchronization via timeStore and useCompositionTime hook
+* - Frame-by-frame rendering on demand (renderFrame message)
+* - Pixel capture and transfer back to main thread via ImageBitmap
+*
+* @param children - React node containing the R3F scene
+*
+* @example
+* ```typescript
+* // worker.ts
+* import { renderOffscreen } from '@editframe/react/r3f';
+* import { MyScene } from './MyScene';
+*
+* renderOffscreen(<MyScene />);
+* ```
+*/
+function renderOffscreen(children) {
+	let root = null;
+	let offscreenCanvas = null;
+	let size = {
+		width: 0,
+		height: 0,
+		top: 0,
+		left: 0
+	};
+	let dpr = 1;
+	const handlers = /* @__PURE__ */ new Map();
+	const emitter = {
+		all: /* @__PURE__ */ new Map(),
+		on(type, handler) {
+			const s = handlers.get(type) ?? /* @__PURE__ */ new Set();
+			s.add(handler);
+			handlers.set(type, s);
+		},
+		off(type, handler) {
+			handlers.get(type)?.delete(handler);
+		},
+		emit(type, event) {
+			handlers.get(type)?.forEach((h) => h(event));
+			handlers.get("*")?.forEach((h) => h(type, event));
+		}
+	};
+	const handleInit = (payload) => {
+		const { props, drawingSurface: canvas, width, top, left, height, pixelRatio } = payload;
+		console.log("[renderOffscreen] Init received", {
+			width,
+			height,
+			pixelRatio
+		});
+		try {
+			if (root) root.unmount();
+			offscreenCanvas = canvas;
+			Object.assign(canvas, {
+				pageXOffset: left,
+				pageYOffset: top,
+				clientLeft: left,
+				clientTop: top,
+				clientWidth: width,
+				clientHeight: height,
+				style: { touchAction: "none" },
+				ownerDocument: canvas,
+				documentElement: canvas,
+				getBoundingClientRect() {
+					return size;
+				},
+				setAttribute() {},
+				setPointerCapture() {},
+				releasePointerCapture() {},
+				addEventListener(event, callback) {
+					emitter.on(event, callback);
+				},
+				removeEventListener(event, callback) {
+					emitter.off(event, callback);
+				}
+			});
+			root = createRoot(canvas);
+			root.configure({
+				events: createPointerEvents(emitter),
+				size: size = {
+					width,
+					height,
+					top,
+					left
+				},
+				dpr: dpr = Math.min(Math.max(1, pixelRatio), 2),
+				frameloop: "demand",
+				...props,
+				onCreated: (state) => {
+					if (props.eventPrefix) state.setEvents({ compute: (event, state$1) => {
+						const x = event[props.eventPrefix + "X"];
+						const y = event[props.eventPrefix + "Y"];
+						state$1.pointer.set(x / state$1.size.width * 2 - 1, -(y / state$1.size.height) * 2 + 1);
+						state$1.raycaster.setFromCamera(state$1.pointer, state$1.camera);
+					} });
+				}
+			});
+			console.log("[renderOffscreen] Rendering children");
+			root.render(children);
+			console.log("[renderOffscreen] Init complete");
+		} catch (e) {
+			console.error("[renderOffscreen] Init error:", e);
+			postMessage({
+				type: "error",
+				payload: e?.message
+			});
+		}
+		self.window = canvas;
+	};
+	const handleResize = ({ width, height, top, left }) => {
+		if (!root) return;
+		root.configure({
+			size: size = {
+				width,
+				height,
+				top,
+				left
+			},
+			dpr
+		});
+	};
+	const handleEvents = (payload) => {
+		emitter.emit(payload.eventName, {
+			...payload,
+			preventDefault() {},
+			stopPropagation() {}
+		});
+	};
+	const handleProps = (payload) => {
+		if (!root) return;
+		if (payload.dpr) dpr = payload.dpr;
+		root.configure({
+			size,
+			dpr,
+			...payload
+		});
+	};
+	const handleRenderFrame = async ({ timeMs, durationMs, requestId }) => {
+		console.log("[renderOffscreen] Render frame", {
+			timeMs,
+			requestId
+		});
+		try {
+			timeStore.update(timeMs, durationMs);
+			const state = root?.store?.getState?.();
+			if (!state) throw new Error("[renderOffscreen] No R3F root state available");
+			if (state?.gl && state?.scene && state?.camera) {
+				state.invalidate();
+				state.gl.render(state.scene, state.camera);
+				state.gl.getContext().finish();
+			} else throw new Error("[renderOffscreen] Missing gl/scene/camera in state");
+			if (!offscreenCanvas) throw new Error("[renderOffscreen] No offscreen canvas available");
+			const bitmap = await createImageBitmap(offscreenCanvas);
+			console.log("[renderOffscreen] Bitmap created", {
+				width: bitmap.width,
+				height: bitmap.height
+			});
+			self.postMessage({
+				type: "frameRendered",
+				requestId,
+				bitmap
+			}, [bitmap]);
+		} catch (e) {
+			console.error("[renderOffscreen] Frame render error:", e);
+			postMessage({
+				type: "error",
+				message: e?.message || "Unknown error in handleRenderFrame"
+			});
+		}
+	};
+	const handlerMap = {
+		resize: handleResize,
+		init: handleInit,
+		dom_events: handleEvents,
+		props: handleProps,
+		renderFrame: handleRenderFrame
+	};
+	self.onmessage = (event) => {
+		const { type, payload } = event.data;
+		const handler = handlerMap[type];
+		if (handler) handler(payload);
+	};
+	THREE.ImageLoader.prototype.load = function(url, onLoad, _onProgress, onError) {
+		if (this.path !== void 0) url = this.path + url;
+		url = this.manager.resolveURL(url);
+		const scope = this;
+		const cached = THREE.Cache.get(url);
+		if (cached !== void 0) {
+			scope.manager.itemStart(url);
+			if (onLoad) onLoad(cached);
+			scope.manager.itemEnd(url);
+			return cached;
+		}
+		fetch(url).then((res) => res.blob()).then((res) => createImageBitmap(res, {
+			premultiplyAlpha: "none",
+			colorSpaceConversion: "none"
+		})).then((bitmap) => {
+			THREE.Cache.add(url, bitmap);
+			if (onLoad) onLoad(bitmap);
+			scope.manager.itemEnd(url);
+		}).catch(onError);
+		return {};
+	};
+	self.window = {};
+	self.document = {};
+	self.Image = class {
+		constructor() {
+			this.height = 1;
+			this.width = 1;
+		}
+		set onload(callback) {
+			callback(true);
+		}
+	};
+}
+
+//#endregion
+export { renderOffscreen };
+//# sourceMappingURL=renderOffscreen.js.map