@editframe/react 0.37.3-beta → 0.38.1

package/dist/r3f/renderOffscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderOffscreen.js","names":["timeStore: TimeStore","root: ReconcilerRoot<HTMLCanvasElement> | null","offscreenCanvas: OffscreenCanvas | null","size: Size","emitter: Emitter<Record<any, unknown>>","state","e: any"],"sources":["../../src/r3f/renderOffscreen.ts"],"sourcesContent":["/**\n * Worker-side entry point for offscreen R3F rendering.\n *\n * This extends @react-three/offscreen's render() function with:\n * - Time synchronization store for composition time\n * - Frame rendering + pixel capture pipeline\n * - Support for deterministic frame-by-frame rendering\n *\n * Based on @react-three/offscreen render.ts but extended for Editframe's needs.\n */\n\nimport * as React from \"react\";\nimport { useSyncExternalStore } from \"react\";\n// @ts-ignore\nimport * as THREE from \"three\";\nimport type { Emitter } from \"mitt\";\nimport {\n  createRoot,\n  createEvents,\n  ReconcilerRoot,\n  Size,\n  RootState,\n  EventManager,\n  Events,\n  RootStore,\n} from \"@react-three/fiber\";\nimport type { DomEvent } from \"@react-three/fiber/dist/declarations/src/core/events\";\nimport type { RenderFramePayload } from \"./worker-protocol\";\n\n/* ━━ Event handling (from @react-three/offscreen) ━━━━━━━━━━━━━━━━━━━━━ */\n\nconst EVENTS = {\n  onClick: [\"click\", false],\n  onContextMenu: [\"contextmenu\", false],\n  onDoubleClick: [\"dblclick\", false],\n  onWheel: [\"wheel\", true],\n  onPointerDown: [\"pointerdown\", true],\n  onPointerUp: [\"pointerup\", true],\n  onPointerLeave: [\"pointerleave\", true],\n  onPointerMove: [\"pointermove\", true],\n  onPointerCancel: [\"pointercancel\", true],\n  onLostPointerCapture: [\"lostpointercapture\", true],\n} as const;\n\nfunction createPointerEvents(emitter: Emitter<Record<any, unknown>>) {\n  return (store: RootStore): EventManager<HTMLElement> => {\n    const { handlePointer } = createEvents(store);\n\n    return {\n      priority: 1,\n      enabled: true,\n      compute(event, state) {\n        state.pointer.set(\n          (event.offsetX / state.size.width) * 2 - 1,\n          -(event.offsetY / state.size.height) * 2 + 1,\n        );\n        state.raycaster.setFromCamera(state.pointer, state.camera);\n      },\n\n      connected: undefined,\n      handlers: Object.keys(EVENTS).reduce(\n        (acc, key) => ({ ...acc, [key]: handlePointer(key) }),\n        {},\n      ) as unknown as Events,\n      connect: (target) => {\n        const { set, events } = store.getState();\n        events.disconnect?.();\n        set((state) => ({ events: { ...state.events, connected: target } }));\n        Object.entries(events?.handlers ?? []).forEach(([name, event]) => {\n          const [eventName] = EVENTS[name as keyof typeof EVENTS];\n          emitter.on(eventName as any, event as any);\n        });\n      },\n      disconnect: () => {\n        const { set, events } = store.getState();\n        if (events.connected) {\n          Object.entries(events.handlers ?? []).forEach(([name, event]) => {\n            const [eventName] = EVENTS[name as keyof typeof EVENTS];\n            emitter.off(eventName as any, event as any);\n          });\n          set((state) => ({\n            events: { ...state.events, connected: undefined },\n          }));\n        }\n      },\n    };\n  };\n}\n\n/* ━━ Time synchronization store ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\ninterface TimeStore {\n  timeMs: number;\n  durationMs: number;\n  listeners: Set<() => void>;\n  update(timeMs: number, durationMs: number): void;\n}\n\nconst timeStore: TimeStore = {\n  timeMs: 0,\n  durationMs: 0,\n  listeners: new Set(),\n  update(timeMs: number, durationMs: number) {\n    this.timeMs = timeMs;\n    this.durationMs = durationMs;\n    this.listeners.forEach((l) => l());\n  },\n};\n\n/**\n * Hook to read composition time inside R3F scenes running in a worker.\n * Must be used within a scene rendered by renderOffscreen().\n */\nexport function useCompositionTime() {\n  const timeMs = useSyncExternalStore(\n    (callback) => {\n      timeStore.listeners.add(callback);\n      return () => timeStore.listeners.delete(callback);\n    },\n    () => timeStore.timeMs,\n  );\n\n  const durationMs = useSyncExternalStore(\n    (callback) => {\n      timeStore.listeners.add(callback);\n      return () => timeStore.listeners.delete(callback);\n    },\n    () => timeStore.durationMs,\n  );\n\n  return { timeMs, durationMs };\n}\n\n/* ━━ Worker entry point ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n/**\n * Render a React Three Fiber scene in a web worker with offscreen canvas.\n *\n * This extends @react-three/offscreen's render() with Editframe-specific features:\n * - Time synchronization via timeStore and useCompositionTime hook\n * - Frame-by-frame rendering on demand (renderFrame message)\n * - Pixel capture and transfer back to main thread via ImageBitmap\n *\n * @param children - React node containing the R3F scene\n *\n * @example\n * ```typescript\n * // worker.ts\n * import { renderOffscreen } from '@editframe/react/r3f';\n * import { MyScene } from './MyScene';\n *\n * renderOffscreen(<MyScene />);\n * ```\n */\nexport function renderOffscreen(children: React.ReactNode) {\n  let root: ReconcilerRoot<HTMLCanvasElement> | null = null;\n  let offscreenCanvas: OffscreenCanvas | null = null;\n  let size: Size = { width: 0, height: 0, top: 0, left: 0 };\n  let dpr = 1;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const handlers = new Map<any, Set<any>>();\n  const emitter: Emitter<Record<any, unknown>> = {\n    all: new Map(),\n    on(type: any, handler: any) {\n      const s = handlers.get(type) ?? new Set();\n      s.add(handler);\n      handlers.set(type, s);\n    },\n    off(type: any, handler: any) {\n      handlers.get(type)?.delete(handler);\n    },\n    emit(type: any, event?: any) {\n      handlers.get(type)?.forEach((h: any) => h(event));\n      handlers.get(\"*\")?.forEach((h: any) => h(type, event));\n    },\n  };\n\n  /* ━━ Init handler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  const handleInit = (payload: any) => {\n    const {\n      props,\n      drawingSurface: canvas,\n      width,\n      top,\n      left,\n      height,\n      pixelRatio,\n    } = payload;\n\n    console.log(\"[renderOffscreen] Init received\", {\n      width,\n      height,\n      pixelRatio,\n    });\n\n    try {\n      // Unmount root if already mounted\n      if (root) {\n        root.unmount();\n      }\n\n      offscreenCanvas = canvas;\n\n      // Shim the canvas into a fake window/document\n      Object.assign(canvas, {\n        pageXOffset: left,\n        pageYOffset: top,\n        clientLeft: left,\n        clientTop: top,\n        clientWidth: width,\n        clientHeight: height,\n        style: { touchAction: \"none\" },\n        ownerDocument: canvas,\n        documentElement: canvas,\n        getBoundingClientRect() {\n          return size;\n        },\n        setAttribute() {},\n        setPointerCapture() {},\n        releasePointerCapture() {},\n        addEventListener(event: string, callback: () => void) {\n          emitter.on(event, callback);\n        },\n        removeEventListener(event: string, callback: () => void) {\n          emitter.off(event, callback);\n        },\n      });\n\n      // Create react-three-fiber root\n      root = createRoot(canvas);\n\n      // Configure root\n      root.configure({\n        events: createPointerEvents(emitter),\n        size: (size = { width, height, top, left }),\n        dpr: (dpr = Math.min(Math.max(1, pixelRatio), 2)),\n        frameloop: \"demand\", // Critical: only render when invalidated\n        ...props,\n        onCreated: (state: RootState) => {\n          if (props.eventPrefix) {\n            state.setEvents({\n              compute: (event: DomEvent, state: RootState) => {\n                const x = event[\n                  (props.eventPrefix + \"X\") as keyof DomEvent\n                ] as number;\n                const y = event[\n                  (props.eventPrefix + \"Y\") as keyof DomEvent\n                ] as number;\n                state.pointer.set(\n                  (x / state.size.width) * 2 - 1,\n                  -(y / state.size.height) * 2 + 1,\n                );\n                state.raycaster.setFromCamera(state.pointer, state.camera);\n              },\n            });\n          }\n        },\n      });\n\n      // Render children once\n      console.log(\"[renderOffscreen] Rendering children\");\n      root.render(children);\n      console.log(\"[renderOffscreen] Init complete\");\n    } catch (e: any) {\n      console.error(\"[renderOffscreen] Init error:\", e);\n      postMessage({ type: \"error\", payload: e?.message });\n    }\n\n    // Shim window to the canvas from here on\n    (self as any).window = canvas;\n  };\n\n  /* ━━ Resize handler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  const handleResize = ({ width, height, top, left }: Size) => {\n    if (!root) return;\n    root.configure({ size: (size = { width, height, top, left }), dpr });\n  };\n\n  /* ━━ Event handler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  const handleEvents = (payload: any) => {\n    emitter.emit(payload.eventName, {\n      ...payload,\n      preventDefault() {},\n      stopPropagation() {},\n    });\n  };\n\n  /* ━━ Props handler ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  const handleProps = (payload: any) => {\n    if (!root) return;\n    if (payload.dpr) dpr = payload.dpr;\n    root.configure({ size, dpr, ...payload });\n  };\n\n  /* ━━ Frame rendering + pixel capture ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  const handleRenderFrame = async ({\n    timeMs,\n    durationMs,\n    requestId,\n  }: RenderFramePayload) => {\n    console.log(\"[renderOffscreen] Render frame\", { timeMs, requestId });\n\n    try {\n      // 1. Update time store (triggers React re-render via useSyncExternalStore)\n      timeStore.update(timeMs, durationMs);\n\n      // 2. Force R3F to process the state change and render synchronously\n      const state = (root as any)?.store?.getState?.();\n      if (!state) {\n        throw new Error(\"[renderOffscreen] No R3F root state available\");\n      }\n\n      if (state?.gl && state?.scene && state?.camera) {\n        // Mark as needing render\n        state.invalidate();\n\n        // Synchronous render (bypasses RAF)\n        state.gl.render(state.scene, state.camera);\n\n        // GPU sync - ensure all WebGL commands complete\n        state.gl.getContext().finish();\n      } else {\n        throw new Error(\"[renderOffscreen] Missing gl/scene/camera in state\");\n      }\n\n      // 3. Capture pixels without clearing the canvas\n      if (!offscreenCanvas) {\n        throw new Error(\"[renderOffscreen] No offscreen canvas available\");\n      }\n\n      const bitmap = await createImageBitmap(offscreenCanvas);\n      console.log(\"[renderOffscreen] Bitmap created\", {\n        width: bitmap.width,\n        height: bitmap.height,\n      });\n\n      // 4. Transfer back to main thread (zero-copy transfer)\n      (self as any).postMessage({ type: \"frameRendered\", requestId, bitmap }, [\n        bitmap,\n      ]);\n    } catch (e: any) {\n      console.error(\"[renderOffscreen] Frame render error:\", e);\n      postMessage({\n        type: \"error\",\n        message: e?.message || \"Unknown error in handleRenderFrame\",\n      });\n    }\n  };\n\n  /* ━━ Message routing ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  const handlerMap = {\n    resize: handleResize,\n    init: handleInit,\n    dom_events: handleEvents,\n    props: handleProps,\n    renderFrame: handleRenderFrame,\n  };\n\n  self.onmessage = (event) => {\n    const { type, payload } = event.data;\n    const handler = handlerMap[type as keyof typeof handlerMap];\n    if (handler) handler(payload);\n  };\n\n  /* ━━ Three.js shims for worker environment ━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  // Override ImageLoader to use fetch + createImageBitmap instead of DOM Image\n  (THREE.ImageLoader.prototype as any).load = function (\n    url: string,\n    onLoad: (img: ImageBitmap) => void,\n    _onProgress: () => void,\n    onError: (e: Error) => void,\n  ) {\n    if (this.path !== undefined) url = this.path + url;\n    url = this.manager.resolveURL(url);\n    const scope = this;\n    const cached = THREE.Cache.get(url);\n\n    if (cached !== undefined) {\n      scope.manager.itemStart(url);\n      if (onLoad) onLoad(cached);\n      scope.manager.itemEnd(url);\n      return cached;\n    }\n\n    fetch(url)\n      .then((res) => res.blob())\n      .then((res) =>\n        createImageBitmap(res, {\n          premultiplyAlpha: \"none\",\n          colorSpaceConversion: \"none\",\n        }),\n      )\n      .then((bitmap) => {\n        THREE.Cache.add(url, bitmap);\n        if (onLoad) onLoad(bitmap);\n        scope.manager.itemEnd(url);\n      })\n      .catch(onError);\n\n    return {};\n  };\n\n  /* ━━ DOM shims for worker environment ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */\n\n  (self as any).window = {};\n  (self as any).document = {};\n  (self as any).Image = class {\n    height = 1;\n    width = 1;\n    set onload(callback: any) {\n      callback(true);\n    }\n  };\n}\n"],"mappings":"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"}

package/dist/r3f/worker-protocol.d.ts

@@ -0,0 +1,39 @@
+//#region src/r3f/worker-protocol.d.ts
+/**
+ * Message protocol for main thread <-> worker communication in offscreen R3F rendering.
+ *
+ * These messages are additive to @react-three/offscreen's built-in messages
+ * (init, resize, dom_events, props). Our custom messages handle time synchronization
+ * and pixel capture for video export.
+ */
+/**
+ * Messages sent from main thread to worker.
+ */
+type MainToWorkerMessage = {
+  type: "renderFrame";
+  timeMs: number;
+  durationMs: number;
+  requestId: number;
+};
+/**
+ * Messages sent from worker to main thread.
+ */
+type WorkerToMainMessage = {
+  type: "frameRendered";
+  requestId: number;
+  bitmap: ImageBitmap;
+} | {
+  type: "error";
+  message: string;
+};
+/**
+ * Payload for renderFrame message.
+ */
+interface RenderFramePayload {
+  timeMs: number;
+  durationMs: number;
+  requestId: number;
+}
+//#endregion
+export { MainToWorkerMessage, RenderFramePayload, WorkerToMainMessage };
+//# sourceMappingURL=worker-protocol.d.ts.map

package/dist/server.d.ts

@@ -0,0 +1,11 @@
+import { Audio } from "./elements/Audio.js";
+import { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment } from "./elements/Captions.js";
+import { Text, TextSegment } from "./elements/Text.js";
+import { Image } from "./elements/Image.js";
+import { Surface } from "./elements/Surface.js";
+import { Timegroup } from "./elements/Timegroup.js";
+import { Video } from "./elements/Video.js";
+import { Waveform } from "./elements/Waveform.js";
+import { PanZoom } from "./elements/PanZoom.js";
+import { CanvasPreviewOptions, CanvasPreviewResult, CaptureOptions, ContentReadyMode, RenderProgress, RenderToVideoOptions } from "@editframe/elements/server";
+export { Audio, type CanvasPreviewOptions, type CanvasPreviewResult, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, type CaptureOptions, type ContentReadyMode, Image, PanZoom, type RenderProgress, type RenderToVideoOptions, Surface, Text, TextSegment, Timegroup, Video, Waveform };

package/dist/server.js

@@ -0,0 +1,11 @@
+import { Audio } from "./elements/Audio.js";
+import { Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment } from "./elements/Captions.js";
+import { Text, TextSegment } from "./elements/Text.js";
+import { Image } from "./elements/Image.js";
+import { Surface } from "./elements/Surface.js";
+import { Timegroup } from "./elements/Timegroup.js";
+import { Video } from "./elements/Video.js";
+import { Waveform } from "./elements/Waveform.js";
+import { PanZoom } from "./elements/PanZoom.js";
+
+export { Audio, Captions, CaptionsActiveWord, CaptionsAfterActiveWord, CaptionsBeforeActiveWord, CaptionsSegment, Image, PanZoom, Surface, Text, TextSegment, Timegroup, Video, Waveform };

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@editframe/react",
-  "version": "0.37.3-beta",
+  "version": "0.38.1",
   "description": "",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/editframe/elements.git",
+    "directory": "packages/react"
+  },
   "exports": {
     ".": {
       "import": {
@@ -9,12 +14,24 @@
         "default": "./dist/index.js"
       }
     },
+    "./r3f": {
+      "import": {
+        "types": "./dist/r3f/index.d.ts",
+        "default": "./dist/r3f/index.js"
+      }
+    },
+    "./server": {
+      "import": {
+        "types": "./dist/server.d.ts",
+        "default": "./dist/server.js"
+      }
+    },
     "./package.json": "./package.json",
     "./types.json": "./types.json"
   },
   "type": "module",
   "scripts": {
-    "typecheck": "tsc --noEmit --emitDeclarationOnly false",
+    "typecheck": "tsc --noEmit",
     "build": "tsdown",
     "build:watch": "tsdown --watch",
     "typedoc": "(typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src || true) && ([ -f ./types.json ] && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json || true)"
@@ -22,23 +39,26 @@
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
-    "@editframe/elements": "0.37.3-beta",
+    "@editframe/elements": "0.38.1",
     "@lit/task": "^1.0.1",
+    "@react-three/fiber": "^9.5.0",
+    "@react-three/offscreen": "^0.0.8",
     "lit": "^3.3.1",
-    "react": "^18.3.0"
+    "mitt": "^3.0.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "three": "^0.182.0"
   },
   "devDependencies": {
     "@types/node": "^22.0.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.5.4",
-    "vitest": "^1.6.0"
+    "typescript": "^5.9.3",
+    "vitest": "^4.0.0"
   },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "publishConfig": {
     "exports": {
@@ -48,8 +68,22 @@
           "default": "./dist/index.js"
         }
       },
+      "./server": {
+        "import": {
+          "types": "./dist/server.d.ts",
+          "default": "./dist/server.js"
+        }
+      },
+      "./r3f": {
+        "import": {
+          "types": "./dist/r3f/index.d.ts",
+          "default": "./dist/r3f/index.js"
+        }
+      },
       "./package.json": "./package.json",
       "./types.json": "./types.json"
     }
-  }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js"
 }

package/tsdown.config.ts

@@ -46,6 +46,7 @@ const inlineCssPlugin = (): Plugin => ({
 
 export default defineConfig(
   createTsdownConfig({
+    entry: ["src/index.ts", "src/server.ts", "src/r3f/index.ts"],
     plugins: [inlineCssPlugin()],
     external: [
       /@editframe\/(elements|assets)/,

package/dist/elements/ThumbnailStrip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ThumbnailStrip.js","names":["EFThumbnailStripElement"],"sources":["../../src/elements/ThumbnailStrip.ts"],"sourcesContent":["import { EFThumbnailStrip as EFThumbnailStripElement } from \"@editframe/elements\";\nimport React from \"react\";\nimport { createComponent } from \"../hooks/create-element\";\n\nexport const ThumbnailStrip = createComponent({\n  tagName: \"ef-thumbnail-strip\",\n  elementClass: EFThumbnailStripElement,\n  react: React,\n  displayName: \"ThumbnailStrip\",\n  events: {},\n});\n"],"mappings":";;;;;AAIA,MAAa,iBAAiB,gBAAgB;CAC5C,SAAS;CACT,cAAcA;CACd,OAAO;CACP,aAAa;CACb,QAAQ,EAAE;CACX,CAAC"}