@higgsfield/video-editor-mcp 1.0.7 → 1.1.1-dev.0

package/node_modules/@higgsfield/higgsedit/dist/capture-page.js

@@ -3016,11 +3016,11 @@ var OPUS_FRAME_DURATION_TABLE = [
 ];
 var parseOpusTocByte = (packet) => {
   const config = packet[0] >> 3;
-  const code = packet[0] & 3;
+  const code2 = packet[0] & 3;
   let frameCount;
-  if (code === 0) {
+  if (code2 === 0) {
     frameCount = 1;
-  } else if (code === 1 || code === 2) {
+  } else if (code2 === 1 || code2 === 2) {
     frameCount = 2;
   } else {
     frameCount = packet[1] & 63;
@@ -5616,21 +5616,21 @@ var createAes128CbcDecryptStream = (reader, getInit, close2) => {
       }
       const bytesToRead = sliceLength === requestedLength ? sliceLength - BLOCK_SIZE : sliceLength;
       const input = readBytes(nextSlice, bytesToRead);
-      const output = new Uint8Array(bytesToRead);
+      const output2 = new Uint8Array(bytesToRead);
       for (let i = 0; i < bytesToRead; i += 16) {
         aesContext.in.set(input.subarray(i, i + 16));
         aesContext.decrypt();
-        output.set(aesContext.out, i);
+        output2.set(aesContext.out, i);
       }
       if (bytesToRead < sliceLength) {
-        controller.enqueue(output);
+        controller.enqueue(output2);
         pos += bytesToRead;
       } else {
-        const paddingLength = output[bytesToRead - 1];
+        const paddingLength = output2[bytesToRead - 1];
         if (paddingLength === 0 || paddingLength > 16) {
           throw new Error("Invalid PKCS#7 padding. Incorrect key or corrupted data.");
         }
-        const trimmedOutput = output.subarray(0, bytesToRead - paddingLength);
+        const trimmedOutput = output2.subarray(0, bytesToRead - paddingLength);
         controller.enqueue(trimmedOutput);
         controller.close();
         close2();
@@ -8597,15 +8597,15 @@ var decryptCtr = async (key, encryptionInfo, sampleEncryption, data) => {
     }
   }
   const plain = await cryptApply(cryptBuffer);
-  const output = new Uint8Array(data);
+  const output2 = new Uint8Array(data);
   let readPos = 0;
   for (const range of cryptRanges) {
     for (const seg of range.perSubsample) {
-      output.set(plain.subarray(readPos, readPos + seg.length), seg.offset);
+      output2.set(plain.subarray(readPos, readPos + seg.length), seg.offset);
       readPos += seg.length;
     }
   }
-  return output;
+  return output2;
 };
 var decryptCbcs = (key, encryptionInfo, sampleEncryption, data) => {
   const ctx = new Aes128CbcContext();
@@ -8614,20 +8614,20 @@ var decryptCbcs = (key, encryptionInfo, sampleEncryption, data) => {
   const skipByteBlock = encryptionInfo.defaultSkipByteBlock;
   assert(cryptByteBlock !== null && skipByteBlock !== null);
   if (!sampleEncryption.subsamples) {
-    const output2 = new Uint8Array(data);
+    const output3 = new Uint8Array(data);
     const numBlocks = Math.floor(data.length / 16);
     for (let b = 0; b < numBlocks; b++) {
       const off = b * 16;
       ctx.in.set(data.subarray(off, off + 16));
       ctx.decrypt();
-      output2.set(ctx.out, off);
+      output3.set(ctx.out, off);
     }
-    return output2;
+    return output3;
   }
   if (cryptByteBlock === 0 && skipByteBlock === 0) {
     throw new Error("cbcs with subsamples requires pattern encryption.");
   }
-  const output = new Uint8Array(data);
+  const output2 = new Uint8Array(data);
   const cryptRanges = collectCryptRanges(sampleEncryption.subsamples, cryptByteBlock, skipByteBlock);
   const ivView = new DataView(sampleEncryption.iv.buffer, sampleEncryption.iv.byteOffset, 16);
   for (const range of cryptRanges) {
@@ -8641,11 +8641,11 @@ var decryptCbcs = (key, encryptionInfo, sampleEncryption, data) => {
         const offset = seg.offset + b * 16;
         ctx.in.set(data.subarray(offset, offset + 16));
         ctx.decrypt();
-        output.set(ctx.out, offset);
+        output2.set(ctx.out, offset);
       }
     }
   }
-  return output;
+  return output2;
 };
 var collectCryptRanges = (subsamples, cryptByteBlock, skipByteBlock) => {
   const ranges = [];
@@ -18552,11 +18552,11 @@ var getMediaTagAutoselect = (attributes) => {
   }
   throw new Error(`Invalid M3U8 file; #EXT-X-MEDIA AUTOSELECT attribute must be YES or NO, got "${value}".`);
 };
-var preprocessLanguageCode = (code) => {
-  if (code === null) {
+var preprocessLanguageCode = (code2) => {
+  if (code2 === null) {
     return UNDETERMINED_LANGUAGE;
   }
-  const languageSubtag = code.split("-")[0];
+  const languageSubtag = code2.split("-")[0];
   if (!languageSubtag) {
     return UNDETERMINED_LANGUAGE;
   }
@@ -22713,11 +22713,11 @@ var colorAlphaMergerWorkerCode = () => {
     const width = color.visibleRect?.width ?? color.codedWidth;
     const height = color.visibleRect?.height ?? color.codedHeight;
     const pixelCount = width * height;
-    const output = new Uint8Array(pixelCount * 4);
-    await color.copyTo(output);
+    const output2 = new Uint8Array(pixelCount * 4);
+    await color.copyTo(output2);
     const alphaY = await readAlpha(alpha, width, height, 1);
     for (let i = 0, j = 3; i < pixelCount; i++, j += 4) {
-      output[j] = alphaY[i];
+      output2[j] = alphaY[i];
     }
     const outputFormat = format === "RGBX" || format === "RGBA" ? "RGBA" : "BGRA";
     const init = {
@@ -22726,9 +22726,9 @@ var colorAlphaMergerWorkerCode = () => {
       codedHeight: height,
       timestamp: color.timestamp,
       duration: color.duration ?? void 0,
-      transfer: [output.buffer]
+      transfer: [output2.buffer]
     };
-    return new VideoFrame(output, init);
+    return new VideoFrame(output2, init);
   };
   const mergePlanarYuv = async (color, alpha, format) => {
     const width = color.visibleRect?.width ?? color.codedWidth;
@@ -22754,11 +22754,11 @@ var colorAlphaMergerWorkerCode = () => {
     const uvBytes = uvSamples * bytesPerSample;
     const aBytes = ySamples * bytesPerSample;
     const outputBytes = yBytes + 2 * uvBytes + aBytes;
-    const output = new Uint8Array(outputBytes);
-    await color.copyTo(output);
+    const output2 = new Uint8Array(outputBytes);
+    await color.copyTo(output2);
     const alphaY = await readAlpha(alpha, width, height, bytesPerSample);
     const aOffset = yBytes + 2 * uvBytes;
-    output.set(alphaY, aOffset);
+    output2.set(alphaY, aOffset);
     const outputFormat = format.slice(0, 4) + "A" + format.slice(4);
     const init = {
       format: outputFormat,
@@ -22766,9 +22766,9 @@ var colorAlphaMergerWorkerCode = () => {
       codedHeight: height,
       timestamp: color.timestamp,
       duration: color.duration ?? void 0,
-      transfer: [output.buffer]
+      transfer: [output2.buffer]
     };
-    return new VideoFrame(output, init);
+    return new VideoFrame(output2, init);
   };
   const mergeNv12 = async (color, alpha) => {
     const width = color.visibleRect?.width ?? color.codedWidth;
@@ -22782,26 +22782,26 @@ var colorAlphaMergerWorkerCode = () => {
       cpuColorBuffer = new Uint8Array(sourceSize);
     }
     await color.copyTo(cpuColorBuffer);
-    const output = new Uint8Array(ySize + 2 * uvSize + ySize);
-    output.set(cpuColorBuffer.subarray(0, ySize), 0);
+    const output2 = new Uint8Array(ySize + 2 * uvSize + ySize);
+    output2.set(cpuColorBuffer.subarray(0, ySize), 0);
     const uOffset = ySize;
     const vOffset = ySize + uvSize;
     const uvStart = ySize;
     for (let i = 0; i < uvSize; i++) {
-      output[uOffset + i] = cpuColorBuffer[uvStart + i * 2];
-      output[vOffset + i] = cpuColorBuffer[uvStart + i * 2 + 1];
+      output2[uOffset + i] = cpuColorBuffer[uvStart + i * 2];
+      output2[vOffset + i] = cpuColorBuffer[uvStart + i * 2 + 1];
     }
     const alphaY = await readAlpha(alpha, width, height, 1);
-    output.set(alphaY, ySize + 2 * uvSize);
+    output2.set(alphaY, ySize + 2 * uvSize);
     const init = {
       format: "I420A",
       codedWidth: width,
       codedHeight: height,
       timestamp: color.timestamp,
       duration: color.duration ?? void 0,
-      transfer: [output.buffer]
+      transfer: [output2.buffer]
     };
-    return new VideoFrame(output, init);
+    return new VideoFrame(output2, init);
   };
   const readAlpha = async (alpha, width, height, bytesPerSample) => {
     const size = alpha.allocationSize();
@@ -25681,10 +25681,10 @@ var Id3V2Reader = class {
 
 // ../../node_modules/.pnpm/mediabunny@1.61.0/node_modules/mediabunny/dist/modules/src/muxer.js
 var Muxer = class {
-  constructor(output) {
+  constructor(output2) {
     this.mutex = new AsyncMutex();
     this.trackTimestampInfo = /* @__PURE__ */ new WeakMap();
-    this.output = output;
+    this.output = output2;
   }
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   onTrackClose(track) {
@@ -27470,13 +27470,13 @@ var SUBTITLE_CODEC_TO_BOX_NAME = {
 var SUBTITLE_CODEC_TO_CONFIGURATION_BOX = {
   webvtt: vttC
 };
-var getLanguageCodeInt = (code) => {
-  assert(code.length === 3);
+var getLanguageCodeInt = (code2) => {
+  assert(code2.length === 3);
   ;
   let language = 0;
   for (let i = 0; i < 3; i++) {
     language <<= 5;
-    language += code.charCodeAt(i) - 96;
+    language += code2.charCodeAt(i) - 96;
   }
   return language;
 };
@@ -27977,8 +27977,8 @@ var presentationSpan = (trackData) => {
   return maxEndTimestamp - minTimestamp;
 };
 var IsobmffMuxer = class extends Muxer {
-  constructor(output, format) {
-    super(output);
+  constructor(output2, format) {
+    super(output2);
     this.writer = null;
     this.boxWriter = null;
     this.initWriter = null;
@@ -30044,8 +30044,8 @@ var IsobmffOutputFormat = class extends OutputFormat {
     return "full";
   }
   /** @internal */
-  _createMuxer(output) {
-    return new IsobmffMuxer(output, this);
+  _createMuxer(output2) {
+    return new IsobmffMuxer(output2, this);
   }
   /** @internal */
   _isFragmentedIsobmff() {
@@ -30161,9 +30161,9 @@ var MovOutputFormat = class extends IsobmffOutputFormat {
 var ALL_TRACK_TYPES = ["video", "audio", "subtitle"];
 var OutputTrack = class _OutputTrack {
   /** @internal */
-  constructor(id, output, type, source, metadata) {
+  constructor(id, output2, type, source, metadata) {
     this.id = id;
-    this.output = output;
+    this.output = output2;
     this.type = type;
     this.source = source;
     this.metadata = metadata;
@@ -30208,20 +30208,20 @@ var OutputTrack = class _OutputTrack {
 };
 var OutputVideoTrack = class extends OutputTrack {
   /** @internal */
-  constructor(id, output, source, metadata) {
-    super(id, output, "video", source, metadata);
+  constructor(id, output2, source, metadata) {
+    super(id, output2, "video", source, metadata);
   }
 };
 var OutputAudioTrack = class extends OutputTrack {
   /** @internal */
-  constructor(id, output, source, metadata) {
-    super(id, output, "audio", source, metadata);
+  constructor(id, output2, source, metadata) {
+    super(id, output2, "audio", source, metadata);
   }
 };
 var OutputSubtitleTrack = class extends OutputTrack {
   /** @internal */
-  constructor(id, output, source, metadata) {
-    super(id, output, "subtitle", source, metadata);
+  constructor(id, output2, source, metadata) {
+    super(id, output2, "subtitle", source, metadata);
   }
 };
 var OutputTrackGroup = class _OutputTrackGroup {
@@ -30715,7 +30715,7 @@ async function createWebCodecsEncoder(canvas2, opts) {
   if (problem) throw new Error(problem);
   const { codec, full } = choose(opts.depth, opts.codec);
   const target2 = new StreamTarget(new WritableStream({ write: (chunk) => opts.write(chunk.position, chunk.data) }), { chunked: true, chunkSize: 4 << 20 });
-  const output = new Output({ format: new Mp4OutputFormat({ fastStart: false }), target: target2 });
+  const output2 = new Output({ format: new Mp4OutputFormat({ fastStart: false }), target: target2 });
   let configured;
   const source = new CanvasSource(canvas2, {
     codec,
@@ -30726,16 +30726,16 @@ async function createWebCodecsEncoder(canvas2, opts) {
       configured = config.codec;
     }
   });
-  output.addVideoTrack(source, { frameRate: opts.fps });
-  await output.start();
+  output2.addVideoTrack(source, { frameRate: opts.fps });
+  await output2.start();
   const duration = 1 / opts.fps;
   return {
     get codec() {
       return configured;
     },
     add: (index) => source.add(index * duration, duration),
-    finish: () => output.finalize(),
-    cancel: () => output.cancel()
+    finish: () => output2.finalize(),
+    cancel: () => output2.cancel()
   };
 }
 
@@ -30880,7 +30880,7 @@ function captionBoxOrigin(look2, caption, box2, parent, x, y) {
   return { x: across + num(caption.offsetX, 0), y: down + num(caption.offsetY, 0) };
 }
 
-// ../../node_modules/.pnpm/koota@0.6.6_@types+react@19.2.17_react@19.2.8/node_modules/koota/dist/chunk-ZWIGMIL4.js
+// ../../node_modules/.pnpm/koota@0.6.6_@types+react@19.2.18_react@19.2.8/node_modules/koota/dist/chunk-ZWIGMIL4.js
 var $internal = /* @__PURE__ */ Symbol.for("koota.internal");
 var WORLD_ID_BITS = 4;
 var GENERATION_BITS = 8;
@@ -33570,7 +33570,9 @@ var Node = trait(() => ({
   key: "",
   name: void 0,
   /** Props bound to accessors (`x={() => ...}`): code-driven at runtime. */
-  accessors: /* @__PURE__ */ new Set()
+  accessors: /* @__PURE__ */ new Set(),
+  /** Project module whose JSX created it (set by the project loader). */
+  file: void 0
 }));
 var Hierarchy = trait(() => ({
   parent: null,
@@ -33602,7 +33604,11 @@ var Offset = trait(() => ({
   offsetY: void 0
 }));
 var Opacity = trait(() => ({ opacity: void 0 }));
-var Visibility = trait(() => ({ hidden: void 0 }));
+var Visibility = trait(() => ({
+  hidden: void 0,
+  /** Editor preview from a cached render: `false` never, `true` always, unset when heavy (prerender.ts). */
+  prerender: void 0
+}));
 var Fill = trait(() => ({ fill: void 0 }));
 var Shape = trait(() => ({ cornerRadius: void 0 }));
 var TextStyle = trait(() => ({
@@ -33705,6 +33711,7 @@ var PROP_TRAITS = {
   ...Object.fromEntries(TRANSFORM_PROPS.map((p) => [p, Transform])),
   opacity: Opacity,
   hidden: Visibility,
+  prerender: Visibility,
   fill: Fill,
   cornerRadius: Shape,
   fontSize: TextStyle,
@@ -35963,6 +35970,19 @@ function findStage(world) {
   return world.query(Node, Hierarchy).find((e) => e.get(Node).tag === "stage" && parentOf(e) === null);
 }
 var PROP_OWNERS = [.../* @__PURE__ */ new Set([...Object.values(PROP_TRAITS), ...Object.values(SCENE_PROPS), ...Object.values(CAPTION_PROPS), ...Object.values(RANGE_PROPS)])];
+function readProps(entity) {
+  const out = {};
+  for (const t of PROP_OWNERS) {
+    const v = entity.get(t);
+    if (!v) continue;
+    for (const [k, val] of Object.entries(v)) if (val !== void 0) out[k] = val;
+  }
+  const extra = entity.get(Extra);
+  if (extra) Object.assign(out, extra.props);
+  const text = entity.get(TextContent);
+  if (text) out.text = text.text;
+  return out;
+}
 function findByKey(world, key) {
   return world.query(Node).find((e) => e.get(Node).key === key);
 }
@@ -35986,13 +36006,14 @@ function definedOf(style) {
   for (const field of ["fontFamily", "fontWeight", "fontStyle"]) if (style?.[field] !== void 0) Object.assign(out, { [field]: style[field] });
   return out;
 }
-function usedFonts(world) {
+function usedFonts(world, includes) {
   const out = /* @__PURE__ */ new Map();
   const add = (families, weight, style) => {
     if (!families) return;
     for (const family of familyNames(families)) out.set(`${family.toLowerCase()}|${weight}|${style}`, { family, weight, style });
   };
   for (const e of world.query(TextStyle)) {
+    if (includes && !includes(e)) continue;
     const s = e.get(TextStyle);
     const tag2 = e.get(Node)?.tag;
     if (tag2 === "captions") {
@@ -36008,10 +36029,11 @@ function usedFonts(world) {
   }
   return [...out.values()];
 }
-function htmlFonts(world) {
+function htmlFonts(world, includes) {
   if (typeof getComputedStyle === "undefined") return [];
   const out = /* @__PURE__ */ new Map();
   for (const e of world.query(Surface)) {
+    if (includes && !includes(e)) continue;
     const root = e.get(Node)?.tag === "html" ? e.get(Surface).root : null;
     if (!root) continue;
     for (const el of [root, ...root.querySelectorAll("*")]) {
@@ -36238,6 +36260,39 @@ function estimateFps(timestamps) {
   return fps;
 }
 
+// ../../packages/runtime/src/media/luma-matte.ts
+var isMaskFile = (src) => /\.mask$/i.test(src);
+function lumaMatteIndex(facts, sourceTime, local) {
+  const ts = facts?.timestamps;
+  if (!facts || !ts || ts.length === 0) return -1;
+  return frameIndexAt(ts, sourceTime ?? ts[0] + local, facts.fps);
+}
+var KEEP = 4;
+var converted = /* @__PURE__ */ new WeakMap();
+var scratch;
+function lumaToAlpha(handle, picture, width, height) {
+  const list = converted.get(handle) ?? [];
+  converted.set(handle, list);
+  const hit = list.find((c) => c.picture === picture && c.alpha.width === width && c.alpha.height === height);
+  if (hit) return hit.alpha;
+  if (!scratch || scratch.canvas.width !== width || scratch.canvas.height !== height) {
+    scratch = new OffscreenCanvas(width, height).getContext("2d", { willReadFrequently: true });
+  }
+  scratch.clearRect(0, 0, width, height);
+  scratch.drawImage(picture, 0, 0, width, height);
+  const image = scratch.getImageData(0, 0, width, height);
+  const d = image.data;
+  for (let i = 0; i < d.length; i += 4) {
+    d[i + 3] = 54 * d[i] + 183 * d[i + 1] + 19 * d[i + 2] + 128 >> 8;
+    d[i] = d[i + 1] = d[i + 2] = 255;
+  }
+  const alpha = new OffscreenCanvas(width, height);
+  alpha.getContext("2d").putImageData(image, 0, 0);
+  list.unshift({ picture, alpha });
+  if (list.length > KEEP) list.length = KEEP;
+  return alpha;
+}
+
 // ../../packages/runtime/src/keyframes.ts
 function cubicBezier(x1, y1, x2, y2) {
   const cx = 3 * x1;
@@ -36523,6 +36578,9 @@ function watchFonts() {
   const fonts = globalThis.document?.fonts;
   fonts?.addEventListener("loadingdone", () => cache2.clear());
 }
+function fontsChanged() {
+  cache2.clear();
+}
 var num2 = (v, fallback) => typeof v === "number" && Number.isFinite(v) ? v : fallback;
 var caseOf2 = (text, textCase) => textCase === "upper" ? text.toUpperCase() : textCase === "lower" ? text.toLowerCase() : text;
 function fontString(size, weight, style, family) {
@@ -36754,18 +36812,18 @@ function syncLinks(world) {
   }
   return out;
 }
-function clockStart(world, parent, clock) {
+function clockStart(world, parent, clock2) {
   let t = 0;
   for (let e = parent; e; e = parentOf(e)) {
     const tag2 = e.get(Node).tag;
-    if (tag2 === "scene" || tag2 === "group") t += parseTime(e.get(Timing)?.start, clock.fpsUnder(world, parentOf(e))) ?? 0;
+    if (tag2 === "scene" || tag2 === "group") t += parseTime(e.get(Timing)?.start, clock2.fpsUnder(world, parentOf(e))) ?? 0;
   }
   return t;
 }
-function syncedSourceIn(world, entity, fps, clock) {
-  return syncedPlacement(world, entity, fps, clock)?.sourceIn ?? parseTime(entity.get(Timing)?.sourceIn, fps) ?? 0;
+function syncedSourceIn(world, entity, fps, clock2) {
+  return syncedPlacement(world, entity, fps, clock2)?.sourceIn ?? parseTime(entity.get(Timing)?.sourceIn, fps) ?? 0;
 }
-function syncedPlacement(world, entity, fps, clock) {
+function syncedPlacement(world, entity, fps, clock2) {
   const syncTo = entity.get(Sync)?.syncTo;
   if (!syncTo || !isSound(entity)) return void 0;
   const graph = syncGraph(world);
@@ -36776,15 +36834,15 @@ function syncedPlacement(world, entity, fps, clock) {
   const offset = info?.offsets.get(syncPair(src, target2.get(Media).src));
   if (offset === void 0) return void 0;
   const targetParent = parentOf(target2);
-  const targetFps = clock.fpsUnder(world, targetParent);
-  const targetSpan = clock.span(world, target2, targetFps);
-  const shift = clockStart(world, targetParent, clock);
+  const targetFps = clock2.fpsUnder(world, targetParent);
+  const targetSpan = clock2.span(world, target2, targetFps);
+  const shift = clockStart(world, targetParent, clock2);
   const window2 = { from: shift + targetSpan.start, to: shift + targetSpan.end };
-  const zero = window2.from + (offset - syncedSourceIn(world, target2, targetFps, clock)) / clock.speed(target2);
-  const speed = clock.speed(entity);
+  const zero = window2.from + (offset - syncedSourceIn(world, target2, targetFps, clock2)) / clock2.speed(target2);
+  const speed = clock2.speed(entity);
   const duration = info?.durations.get(src);
   const recording = { from: zero, to: duration === void 0 ? Infinity : zero + duration / speed };
-  const own = clockStart(world, parentOf(entity), clock);
+  const own = clockStart(world, parentOf(entity), clock2);
   const timing = entity.get(Timing);
   const authoredIn = parseTime(timing?.sourceIn, fps);
   const authoredEnd = parseTime(timing?.end, fps);
@@ -36814,17 +36872,18 @@ function invert(m) {
   return [m[3] * id, -m[1] * id, -m[2] * id, m[0] * id, (m[2] * m[5] - m[3] * m[4]) * id, (m[1] * m[4] - m[0] * m[5]) * id];
 }
 var sceneFps = (scene) => scene?.get(SceneConfig)?.fps ?? DEFAULT_FPS;
-// Capture selection scopes composition and pixels, but root timing stays in the
-// ordinary editor's stage clock, independent of the selected scene's own fps.
-var captureSceneIds = new WeakMap();
+var captureScenes = /* @__PURE__ */ new WeakMap();
+function setCaptureScene(world, sceneId) {
+  captureScenes.set(world, sceneId);
+}
 function stageFps(world) {
   const stage = findStage(world);
-  return sceneFps(stage ? childrenOf(stage).find((e) => e.get(Node).tag === "scene") : undefined);
+  return sceneFps(stage ? childrenOf(stage).find((entity) => entity.get(Node).tag === "scene") : void 0);
 }
 function rootScenes(world) {
   const stage = findStage(world);
-  const sceneId = captureSceneIds.get(world);
-  return stage ? childrenOf(stage).filter((e) => e.get(Node).tag === "scene" && (sceneId === undefined || e.get(Node).key === sceneId || e.get(Node).id === sceneId)) : [];
+  const selected = captureScenes.get(world);
+  return stage ? childrenOf(stage).filter((e) => e.get(Node).tag === "scene" && (selected === void 0 || e.get(Node).key === selected || e.get(Node).id === selected)) : [];
 }
 function span(world, entity, fps) {
   const synced = syncedPlacement(world, entity, fps, SYNC_CLOCK);
@@ -36876,16 +36935,16 @@ function mediaSpeed(entity) {
 function localTime(world, entity, time) {
   const chain = [];
   for (let e = entity; e && e.get(Node).tag !== "stage"; e = parentOf(e)) chain.unshift(e);
-  let clock = time;
+  let clock2 = time;
   let fps = stageFps(world);
   for (const e of chain) {
     const start = span(world, e, fps).start;
     const tag2 = e.get(Node).tag;
-    if (e === entity) return clock - start;
+    if (e === entity) return clock2 - start;
     if (tag2 === "scene") fps = sceneFps(e);
-    if (tag2 === "scene" || tag2 === "group") clock -= start;
+    if (tag2 === "scene" || tag2 === "group") clock2 -= start;
   }
-  return clock;
+  return clock2;
 }
 function composition(world) {
   const scenes = rootScenes(world);
@@ -36893,8 +36952,7 @@ function composition(world) {
   const config = scene?.get(SceneConfig);
   const fps = sceneFps(scene);
   let duration = 0;
-  const rootFps = stageFps(world);
-  for (const s of scenes) duration = Math.max(duration, span(world, s, rootFps).end);
+  for (const s of scenes) duration = Math.max(duration, span(world, s, stageFps(world)).end);
   return {
     scene,
     width: config?.width ?? DEFAULT_SCENE.width,
@@ -37049,14 +37107,11 @@ function textPivot(entity, text) {
   const fallback = text.x0 === 0 ? 0 : align === "center" ? 0.5 : 1;
   return [text.x0 + num3(resolved(entity, "anchorX"), fallback) * text.width, num3(resolved(entity, "anchorY"), 0) * text.height];
 }
-function evaluate(world, time, onlyScene) {
+function evaluate(world, time) {
   const comp = composition(world);
-  const sceneConfig = onlyScene?.get(SceneConfig);
-  const sourceFps = stageFps(world);
-  const sourceEnd = onlyScene ? span(world, onlyScene, sourceFps).end : comp.duration;
   const stage = findStage(world);
   if (!stage) return comp;
-  const root = { time, length: sourceEnd, fps: sourceFps, matrix: [1, 0, 0, 1, 0, 0], opacity: 1, width: sceneConfig?.width ?? comp.width, height: sceneConfig?.height ?? comp.height, baseWidth: sceneConfig?.width ?? comp.width, baseHeight: sceneConfig?.height ?? comp.height, active: true };
+  const root = { time, length: comp.duration, fps: stageFps(world), matrix: [1, 0, 0, 1, 0, 0], opacity: 1, width: comp.width, height: comp.height, baseWidth: comp.width, baseHeight: comp.height, active: true };
   const timeWalk = (entity, frame, held = false) => {
     const next = timeSystem(world, entity, frame, held);
     const crossings = entity.get(Crossings);
@@ -37067,29 +37122,47 @@ function evaluate(world, time, onlyScene) {
     }
     const crossing = new Set(crossings?.active.flatMap((c) => [c.left, c.right]));
     for (const child of childrenOf(entity)) {
-      if (entity === stage && onlyScene && child !== onlyScene) deactivate(child);
+      if (entity === stage && captureScenes.has(world) && child !== comp.scene) deactivate(child);
       else timeWalk(child, next, crossing.has(child));
     }
   };
   timeWalk(stage, root);
   motionSystem(world);
-  const transformWalk = (entity, frame) => {
-    if (!entity.get(Computed).active) return;
-    const next = transformSystem(entity, frame);
-    const children2 = childrenOf(entity);
-    children2.forEach((child, i) => {
-      const matrix = layersAbove(entity, children2, i).reduce((m, layer) => multiply(m, localMatrix(layer, next).local), next.matrix);
-      transformWalk(child, { ...next, matrix });
-    });
-  };
   transformWalk(stage, root);
   return comp;
 }
-function clips(world, onlyScene) {
+function transformWalk(entity, frame) {
+  if (!entity.get(Computed).active) return;
+  const next = transformSystem(entity, frame);
+  const children2 = childrenOf(entity);
+  children2.forEach((child, i) => {
+    const matrix = layersAbove(entity, children2, i).reduce((m, layer) => multiply(m, localMatrix(layer, next).local), next.matrix);
+    transformWalk(child, { ...next, matrix });
+  });
+}
+function isolate(entity) {
+  const parent = parentOf(entity);
+  const pc = parent?.get(Computed);
+  if (!parent || !pc) return;
+  const scene = parent.get(Node).tag === "scene";
+  const width = pc.width;
+  const height = pc.height;
+  transformWalk(entity, {
+    time: 0,
+    length: 0,
+    fps: pc.fps,
+    matrix: [1, 0, 0, 1, 0, 0],
+    opacity: 1,
+    width,
+    height,
+    baseWidth: scene ? width : authoredSize(parent, "width", width),
+    baseHeight: scene ? height : authoredSize(parent, "height", height),
+    active: true
+  });
+}
+function clips(world) {
   const out = [];
   const comp = composition(world);
-  const rootFps = stageFps(world);
-  if (onlyScene) comp.duration = span(world, onlyScene, rootFps).end;
   const visit = (entity, origin, fps, depth3, scene) => {
     const node = entity.get(Node);
     if (node.tag === "textRange" || node.tag === "shaderPaint") return;
@@ -37098,21 +37171,20 @@ function clips(world, onlyScene) {
     const end = Number.isFinite(s.end) ? origin + s.end : origin + comp.duration;
     out.push({ key: node.key, id: node.id, tag: node.tag, start, end: Math.min(end, Math.max(start, comp.duration)), depth: depth3, scene });
     const isScene = node.tag === "scene";
-    const clock = isScene || node.tag === "group" ? start : origin;
+    const clock2 = isScene || node.tag === "group" ? start : origin;
     for (const child of childrenOf(entity)) {
-      visit(child, clock, isScene ? sceneFps(entity) : fps, depth3 + 1, isScene ? node.key : scene);
+      visit(child, clock2, isScene ? sceneFps(entity) : fps, depth3 + 1, isScene ? node.key : scene);
     }
   };
-  for (const scene of onlyScene ? [onlyScene] : rootScenes(world)) visit(scene, 0, rootFps, 0, void 0);
+  for (const scene of rootScenes(world)) visit(scene, 0, stageFps(world), 0, void 0);
   return out;
 }
 function hiddenInTree(entity) {
   for (let e = entity; e; e = parentOf(e)) if (e.get(Visibility)?.hidden === true) return true;
   return false;
 }
-function audioClips(world, onlyScene) {
-  const spans = new Map(clips(world, onlyScene).map((c) => [c.key, c]));
-  const fps = composition(world).fps;
+function audioClips(world) {
+  const spans = new Map(clips(world).map((c) => [c.key, c]));
   const out = [];
   for (const e of world.query(Media, Node)) {
     const tag2 = e.get(Node).tag;
@@ -37125,7 +37197,7 @@ function audioClips(world, onlyScene) {
       src: media.src,
       start: clip.start,
       end: clip.end,
-      sourceIn: sourceInOf(world, e, onlyScene ? fpsUnder(world, e) : fps),
+      sourceIn: sourceInOf(world, e, fpsUnder(world, parentOf(e))),
       volume: media.volume ?? 1,
       fadeIn: Math.max(0, media.fadeIn ?? 0),
       fadeOut: Math.max(0, media.fadeOut ?? 0),
@@ -37251,23 +37323,67 @@ async function htmlReady(entity) {
 }
 var repaintListeners = /* @__PURE__ */ new Set();
 var repaintPending = false;
+var pendingPaints = /* @__PURE__ */ new Set();
+var contentKeys = /* @__PURE__ */ new Set();
+var rootKeys = /* @__PURE__ */ new WeakMap();
+var pendingFonts = /* @__PURE__ */ new WeakMap();
 var watched = /* @__PURE__ */ new WeakSet();
-function requestRepaint() {
-  if (repaintPending || repaintListeners.size === 0) return;
+function requestRepaint(root, content = false) {
+  if (repaintListeners.size === 0) return;
+  if (root) {
+    pendingPaints.add(root);
+    const key = content && rootKeys.get(root);
+    if (key) contentKeys.add(key);
+  }
+  if (repaintPending) return;
   repaintPending = true;
   void afterPaint().then(() => {
     repaintPending = false;
-    for (const listener of repaintListeners) listener();
+    pendingPaints.clear();
+    const changed = [...contentKeys];
+    contentKeys.clear();
+    for (const listener of repaintListeners) listener(changed);
   });
 }
 var pins = /* @__PURE__ */ new WeakMap();
+function withHtmlClock(world, update) {
+  const roots = world.query(Surface).map((entity) => entity.get(Surface).root).filter((root) => !!root && pins.has(root));
+  const drain = (content) => {
+    for (const root of roots) {
+      const p = pins.get(root);
+      if (!p.observer.takeRecords().length) continue;
+      p.list = null;
+      p.changed = true;
+      if (content) {
+        p.at = /* @__PURE__ */ new WeakMap();
+        requestRepaint(root, true);
+      }
+    }
+  };
+  drain(true);
+  try {
+    return update();
+  } finally {
+    drain(false);
+  }
+}
 function watch(root) {
   if (watched.has(root)) return;
   watched.add(root);
-  const observer = new MutationObserver(requestRepaint);
+  const observer = new MutationObserver(() => {
+    const p = pins.get(root);
+    if (p) {
+      p.list = null;
+      p.at = /* @__PURE__ */ new WeakMap();
+      p.changed = true;
+    }
+    requestRepaint(root, true);
+  });
+  root.addEventListener("load", () => requestRepaint(root), true);
+  root.addEventListener("error", () => requestRepaint(root), true);
   observer.observe(root, { subtree: true, childList: true, attributes: true, characterData: true });
-  pins.set(root, { observer, list: null, at: /* @__PURE__ */ new WeakMap() });
-  requestRepaint();
+  pins.set(root, { observer, list: null, at: /* @__PURE__ */ new WeakMap(), changed: false });
+  requestRepaint(root);
 }
 function liveAnimations(root) {
   const p = pins.get(root);
@@ -37275,16 +37391,23 @@ function liveAnimations(root) {
   if (p.observer.takeRecords().length) {
     p.list = null;
     p.at = /* @__PURE__ */ new WeakMap();
-    requestRepaint();
+    p.changed = true;
+    requestRepaint(root, true);
   }
   return p.list ??= root.getAnimations({ subtree: true });
 }
 function pinLive(root, local) {
   const p = pins.get(root);
-  if (!p) return pinAnimations(root, local);
+  if (!p) {
+    const moved2 = pinAnimations(root, local);
+    return { changed: moved2, moved: moved2 };
+  }
   const at = local * 1e3;
   let moved = pinSmil(root, local);
-  for (const animation of liveAnimations(root)) {
+  const list = liveAnimations(root);
+  const changed = p.changed;
+  p.changed = false;
+  for (const animation of list) {
     const was = p.at.get(animation);
     if (was === at) continue;
     if (typeof CSSTransition !== "undefined" && animation instanceof CSSTransition) {
@@ -37298,7 +37421,7 @@ function pinLive(root, local) {
     p.at.set(animation, at);
     moved = true;
   }
-  return moved;
+  return { changed: changed || moved, moved };
 }
 var KEYFRAME_META = /* @__PURE__ */ new Set(["offset", "computedOffset", "easing", "composite"]);
 var kebab = (p) => p.startsWith("--") ? p : p.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
@@ -37378,12 +37501,13 @@ function inlineImage(img) {
   const src = img.currentSrc || img.src;
   if (!src || src.startsWith("data:")) return null;
   if (inlined.has(src)) return src;
-  const entry = { lo: null, hi: null };
+  const entry = { lo: null, hi: null, pending: true };
   inlined.set(src, entry);
   const [lo, hi] = [inlineSize(img, 1), inlineSize(img, density())];
   void encodeImage(img, src, hi === lo ? [lo] : [lo, hi]).then(([small, large]) => {
     entry.lo = small ?? null;
     entry.hi = large ?? entry.lo;
+    entry.pending = false;
     requestRepaint();
   });
   return src;
@@ -37460,6 +37584,7 @@ function decode(sketch) {
   const image = new Image();
   const done = (ok) => {
     sketch.decoding = false;
+    sketch.settledKey = job.key;
     if (ok) {
       const raster = sketch.shown ?? document.createElement("canvas");
       raster.width = job.width;
@@ -37476,12 +37601,13 @@ function decode(sketch) {
   image.addEventListener("error", () => done(false));
   image.src = job.url;
 }
-function drawSketch(ctx, root, w, h, k) {
-  const { markup: frozen, images } = frozenMarkup(root);
+function drawSketch(ctx, root, w, h, k, changed) {
+  let sketch = sketches.get(root);
+  if (!sketch) sketches.set(root, sketch = { key: "", settledKey: "", base: "", settle: null, shown: null, frozen: null, decoding: false, next: null });
+  if (changed || !sketch.frozen) sketch.frozen = frozenMarkup(root);
+  const { markup: frozen, images } = sketch.frozen;
   const [pw, ph] = [Math.ceil(w * k), Math.ceil(h * k)];
   const base = `${pw}x${ph}:${frozen}`;
-  let sketch = sketches.get(root);
-  if (!sketch) sketches.set(root, sketch = { key: "", base: "", settle: null, shown: null, decoding: false, next: null });
   const still = sketch.base === base;
   sketch.base = base;
   const urls = images.map((src) => {
@@ -37503,17 +37629,37 @@ function drawSketch(ctx, root, w, h, k) {
     decode(sketch);
   }
   if (sketch.shown) ctx.drawImage(sketch.shown, 0, 0, w, h);
+  return sketch.settledKey === sketch.key && !sketch.decoding && !sketch.next && !sketch.settle && !images.some((src) => inlined.get(src)?.pending);
 }
 function drawHtml(ctx, entity, k, mode) {
   const { canvas: host, root } = entity.get(Surface);
   const c = entity.get(Computed);
-  if (!(host instanceof HTMLCanvasElement) || !root || !(c.width > 0) || !(c.height > 0)) return;
+  if (!(host instanceof HTMLCanvasElement) || !root || !(c.width > 0) || !(c.height > 0)) return true;
   const painter = htmlInCanvas();
   if (!painter && mode === "capture") throw new Error(MISSING);
   if (mode === "live") {
+    rootKeys.set(root, entity.get(Node).key);
     watch(root);
-    if (fitBox(host, root, c.width, c.height) || pinLive(root, c.local)) requestRepaint();
-    if (!painter) return drawSketch(ctx, root, c.width, c.height, k);
+    if (document.fonts.status === "loading" && pendingFonts.get(root) !== document.fonts.ready) {
+      const ready = document.fonts.ready;
+      pendingFonts.set(root, ready);
+      void ready.then(() => {
+        if (pendingFonts.get(root) === ready) pendingFonts.delete(root);
+        requestRepaint(root);
+      });
+    }
+    const sketch = painter ? void 0 : sketches.get(root);
+    if (sketch?.decoding) {
+      if (sketch.shown) ctx.drawImage(sketch.shown, 0, 0, c.width, c.height);
+      return false;
+    }
+    const resized2 = fitBox(host, root, c.width, c.height);
+    const { changed, moved } = pinLive(root, c.local);
+    if (resized2 || moved) requestRepaint(root);
+    if (!painter) {
+      const ready = drawSketch(ctx, root, c.width, c.height, k, resized2 || changed);
+      return ready && !pendingFonts.has(root);
+    }
   }
   const bw = Math.max(1, Math.ceil(c.width * k));
   const bh = Math.max(1, Math.ceil(c.height * k));
@@ -37525,10 +37671,11 @@ function drawHtml(ctx, entity, k, mode) {
     hostCtx.drawElementImage(root, 0, 0, bw, bh);
   } catch (error) {
     if (mode === "capture") throw new Error(`${entity.get(Node).key}: <html> content was not painted before capture (${error.message})`, { cause: error });
-    requestRepaint();
-    return;
+    requestRepaint(root);
+    return false;
   }
   ctx.drawImage(host, 0, 0, c.width, c.height);
+  return mode === "capture" || !pendingPaints.has(root) && !pendingFonts.has(root) && [...root.querySelectorAll("img")].every((image) => image.complete);
 }
 
 // ../../packages/runtime/src/errors.ts
@@ -37633,9 +37780,9 @@ var FLOATS = { f32: 1, vec2f: 2, vec3f: 3, vec4f: 4, "vec2<f32>": 2, "vec3<f32>"
 var UNIFORM_DECL = /((?:@\w+\s*\(\s*\d+\s*\)\s*)+)var\s*<\s*uniform\s*>\s*([A-Za-z_]\w*)\s*:\s*([^;=]+?)\s*;/g;
 var ATTRIBUTE = /@(\w+)\s*\(\s*(\d+)\s*\)/g;
 function uniformDecls(wgsl) {
-  const code = wgsl.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
+  const code2 = wgsl.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\/\/[^\n]*/g, "");
   const out = [];
-  for (const [, attrs, name, rawType] of code.matchAll(UNIFORM_DECL)) {
+  for (const [, attrs, name, rawType] of code2.matchAll(UNIFORM_DECL)) {
     const numbers = Object.fromEntries([...attrs.matchAll(ATTRIBUTE)].map(([, key, n]) => [key, Number(n)]));
     if (numbers.group !== 1 || numbers.binding === void 0) continue;
     const type = rawType.replace(/\s+/g, "");
@@ -37776,14 +37923,12 @@ function targetFor(device) {
     sampler: device.createSampler({ magFilter: "linear", minFilter: "linear" }),
     layout: device.createBindGroupLayout(layoutDescriptors([])[0]),
     picture: void 0,
+    stills: /* @__PURE__ */ new WeakMap(),
     crossing: void 0
   };
   return target;
 }
-function pictureTexture(t, width, height) {
-  const current = t.picture?.texture;
-  if (current && current.width === width && current.height === height) return t.picture.group;
-  current?.destroy();
+function createUpload(t, width, height) {
   const texture = t.device.createTexture({
     size: [width, height],
     format: "rgba8unorm",
@@ -37797,8 +37942,14 @@ function pictureTexture(t, width, height) {
       { binding: 2, resource: t.sampler }
     ]
   });
-  t.picture = { texture, group };
-  return group;
+  return { texture, group };
+}
+function pictureTexture(t, width, height) {
+  const current = t.picture;
+  if (current && current.texture.width === width && current.texture.height === height) return current;
+  current?.texture.destroy();
+  t.picture = { ...createUpload(t, width, height), holds: null };
+  return t.picture;
 }
 var named = /* @__PURE__ */ new Map();
 var probe;
@@ -37827,6 +37978,12 @@ function packUniforms(decls, values) {
   });
   return data;
 }
+function pixelSize(image, width, height) {
+  const i = image;
+  const w = i.displayWidth ?? i.videoWidth ?? i.naturalWidth ?? i.width;
+  const h = i.displayHeight ?? i.videoHeight ?? i.naturalHeight ?? i.height;
+  return w && h ? [w, h] : [width, height];
+}
 function upload(t, gpu, draw, limit) {
   const { box: box2, picture } = draw;
   const queue = gpu.device.queue;
@@ -37836,11 +37993,31 @@ function upload(t, gpu, draw, limit) {
   queue.writeBuffer(t.globals, 0, new Float32Array([box2.width, box2.height, x * sx, y * sy, w * sx, h * sy, draw.time, 0]));
   queue.writeBuffer(gpu.uniforms, 0, packUniforms(gpu.decls, draw.uniforms));
   const size = (n) => Math.min(limit, Math.max(1, Math.round(n)));
-  const group = pictureTexture(t, picture ? size(picture.width) : 1, picture ? size(picture.height) : 1);
-  const texture = t.picture.texture;
-  if (!picture) queue.writeTexture({ texture }, new Uint8Array(4), { bytesPerRow: 4 }, [1, 1]);
-  else queue.copyExternalImageToTexture({ source: picture.image }, { texture, premultipliedAlpha: true }, [texture.width, texture.height]);
-  return group;
+  if (!picture) {
+    const blank = pictureTexture(t, 1, 1);
+    queue.writeTexture({ texture: blank.texture }, new Uint8Array(4), { bytesPerRow: 4 }, [1, 1]);
+    blank.holds = null;
+    return blank.group;
+  }
+  const [pw, ph] = pixelSize(picture.image, picture.width, picture.height);
+  const [tw, th] = [size(pw), size(ph)];
+  const copy = (texture) => queue.copyExternalImageToTexture({ source: picture.image }, { texture, premultipliedAlpha: true }, [tw, th]);
+  if (picture.still) {
+    let kept = t.stills.get(picture.image);
+    if (kept?.texture.width !== tw || kept.texture.height !== th) {
+      kept?.texture.destroy();
+      kept = createUpload(t, tw, th);
+      copy(kept.texture);
+      t.stills.set(picture.image, kept);
+    }
+    return kept.group;
+  }
+  const shared = pictureTexture(t, tw, th);
+  if (shared.holds !== picture.image) {
+    copy(shared.texture);
+    shared.holds = picture.image;
+  }
+  return shared.group;
 }
 function render(t, gpu, inputs, width, height) {
   if (t.canvas.width !== width) t.canvas.width = width;
@@ -38046,8 +38223,8 @@ async function mediaReady(world, media) {
   for (const entity of world.query(Compositing, Computed)) {
     if (!entity.get(Computed).active) continue;
     const src = resolved(entity, "mask")?.src;
-    if (src) work.push(media.matte(src).ready);
-    for (const fx of liveEffects(entity)) if (fx.mask?.src) work.push(media.matte(fx.mask.src).ready);
+    if (src) work.push(matteReady(entity, src, media));
+    for (const fx of liveEffects(entity)) if (fx.mask?.src) work.push(matteReady(entity, fx.mask.src, media));
   }
   for (const entity of world.query(Captions, Computed)) {
     const src = entity.get(Captions).src;
@@ -38059,6 +38236,14 @@ async function mediaReady(world, media) {
   work.push(...shadersReady(world));
   await Promise.all(work);
 }
+var matteSourceTime = (entity) => entity.get(Node).tag === "video" ? entity.get(Computed).mediaTime : void 0;
+async function matteReady(entity, src, media) {
+  if (isMaskFile(src)) return media.matte(src).ready;
+  const handle = media.video(src);
+  const facts = await handle.ready;
+  const index = lumaMatteIndex(facts, matteSourceTime(entity), entity.get(Computed).local);
+  if (index >= 0) await handle.request(index);
+}
 function roundRect(ctx, w, h, r) {
   ctx.beginPath();
   if (r > 0) ctx.roundRect(0, 0, w, h, Math.min(r, w / 2, h / 2));
@@ -38087,7 +38272,8 @@ function drawFitted(ctx, image, sw, sh, w, h, fit) {
 function drawPicture(ctx, entity, image, sw, sh, fit, opts) {
   const c = entity.get(Computed);
   const paint = pictureShader(entity);
-  if (paint && shadePicture(ctx, entity, paint, { image, width: sw, height: sh, placed: fitted(sw, sh, c.width, c.height, fit) }, opts.scale ?? 1)) return;
+  const still = entity.get(Node).tag === "image";
+  if (paint && shadePicture(ctx, entity, paint, { image, width: sw, height: sh, placed: fitted(sw, sh, c.width, c.height, fit), still }, opts.scale ?? 1)) return;
   drawFitted(ctx, image, sw, sh, c.width, c.height, fit);
 }
 function drawText(ctx, entity, c) {
@@ -38114,6 +38300,11 @@ function drawEntity(ctx, entity, media, opts, root) {
 function paintEntity(ctx, entity, media, opts, root) {
   const c = entity.get(Computed);
   if (!c.active) return;
+  const picture = opts.mode === "live" ? opts.prerendered?.(entity) : void 0;
+  if (picture) {
+    drawPrerendered(ctx, entity, picture, opts);
+    return;
+  }
   const { tag: tag2 } = entity.get(Node);
   const device = deviceMatrix(c.matrix, opts);
   if (opts.visible && CULLABLE.has(tag2) && offscreen(device, c.bounds, opts.visible)) return;
@@ -38227,12 +38418,10 @@ function fitted(sw, sh, w, h, fit) {
   return [(w - sw * k) / 2, (h - sh * k) / 2, sw * k, sh * k];
 }
 function cutMatte(layer, entity, m, media, opts, device, k) {
-  const handle = media.matte(m.src);
-  const file = handle.file;
-  if (!file && opts.mode === "capture") throw new Error(`${m.src}: mask was not loaded before capture`);
+  const matte = isMaskFile(m.src) ? maskFilePicture(entity, m.src, media, opts) : lumaPicture(entity, m.src, media, opts);
+  const picture = matte?.picture;
   const c = entity.get(Computed);
   const { tag: tag2 } = entity.get(Node);
-  const picture = file ? handle.frame(file.indexAt(tag2 === "video" ? c.mediaTime : file.header.start + c.local)) : void 0;
   layer.save();
   if (!picture) {
     if (!m.invert) {
@@ -38243,7 +38432,7 @@ function cutMatte(layer, entity, m, media, opts, device, k) {
     return;
   }
   const fit = tag2 === "video" ? entity.get(Media).fit ?? "cover" : tag2 === "image" ? entity.get(Media).fit ?? "contain" : "fill";
-  const [sw, sh] = file.header.source;
+  const [sw, sh] = matte.source;
   layer.setTransform(...device);
   layer.globalAlpha = 1;
   layer.globalCompositeOperation = m.invert ? "destination-out" : "destination-in";
@@ -38251,19 +38440,38 @@ function cutMatte(layer, entity, m, media, opts, device, k) {
   layer.drawImage(picture, ...fitted(sw, sh, c.width, c.height, fit));
   layer.restore();
 }
+function maskFilePicture(entity, src, media, opts) {
+  const handle = media.matte(src);
+  const file = handle.file;
+  if (!file) opts.onPendingMedia?.(handle.src);
+  if (!file && opts.mode === "capture") throw new Error(`${src}: mask was not loaded before capture`);
+  if (!file) return void 0;
+  const time = matteSourceTime(entity) ?? file.header.start + entity.get(Computed).local;
+  return { picture: handle.frame(file.indexAt(time)), source: file.header.source };
+}
+function lumaPicture(entity, src, media, opts) {
+  const handle = media.video(src);
+  const facts = handle.facts;
+  const index = lumaMatteIndex(facts, matteSourceTime(entity), entity.get(Computed).local);
+  const frame = index < 0 ? void 0 : opts.mode === "capture" ? handle.exact(index) : handle.peek(index);
+  if (!facts || index >= 0 && !handle.exact(index)) opts.onPendingMedia?.(handle.src);
+  if (!frame && opts.mode === "capture") throw new Error(`${src}: matte frame ${index} was not decoded before capture`);
+  if (!facts || !frame) return void 0;
+  return { picture: lumaToAlpha(handle, frame, facts.width, facts.height), source: [facts.width, facts.height] };
+}
 function cut(layer, entity, mask, media, opts, device, k) {
   if (mask.shape === "matte") cutMatte(layer, entity, mask, media, opts, device, k);
   else cutMask(layer, mask, device, k);
 }
 function filterInPlace(layer, filter) {
-  const scratch = acquireLayer(layer);
+  const scratch2 = acquireLayer(layer);
   try {
-    scratch.filter = filter;
-    scratch.drawImage(layer.canvas, 0, 0);
+    scratch2.filter = filter;
+    scratch2.drawImage(layer.canvas, 0, 0);
     layer.save();
     layer.setTransform(1, 0, 0, 1, 0, 0);
     layer.clearRect(0, 0, layer.canvas.width, layer.canvas.height);
-    layer.drawImage(scratch.canvas, 0, 0);
+    layer.drawImage(scratch2.canvas, 0, 0);
     layer.restore();
   } finally {
     depth--;
@@ -38372,6 +38580,7 @@ function drawBody(ctx, entity, media, opts, root, clip) {
     case "image": {
       const src = entity.get(Media)?.src;
       const image = src ? media.image(src) : void 0;
+      if (image && !image.bitmap) opts.onPendingMedia?.(image.src);
       if (image?.bitmap) rounded(ctx, entity, c, () => drawPicture(ctx, entity, image.bitmap, image.width, image.height, entity.get(Media).fit ?? "contain", opts));
       break;
     }
@@ -38382,12 +38591,16 @@ function drawBody(ctx, entity, media, opts, root, clip) {
       rounded(ctx, entity, c, () => drawSurface(ctx, entity.get(Surface).canvas, c.width, c.height));
       break;
     case "html":
-      rounded(ctx, entity, c, () => drawHtml(ctx, entity, (opts.scale ?? 1) * Math.hypot(c.matrix[0], c.matrix[1]), opts.mode));
+      rounded(ctx, entity, c, () => {
+        const ready = drawHtml(ctx, entity, (opts.scale ?? 1) * Math.hypot(c.matrix[0], c.matrix[1]), opts.mode);
+        opts.onHtml?.(entity.get(Node).key, ready);
+      });
       break;
     case "video": {
       const src = entity.get(Media)?.src;
       const handle = src ? media.video(src) : void 0;
       const facts = handle?.facts;
+      if (handle && !facts) opts.onPendingMedia?.(handle.src);
       if (handle && facts) {
         const index = videoFrameIndex(entity, handle);
         const fit = entity.get(Media).fit ?? "cover";
@@ -38397,6 +38610,7 @@ function drawBody(ctx, entity, media, opts, root, clip) {
           handle.fit(box2 * k);
         }
         const frame = opts.mode === "capture" ? handle.exact(index) : handle.peek(index);
+        if (index >= 0 && !handle.exact(index)) opts.onPendingMedia?.(handle.src);
         if (opts.mode === "capture" && !frame) throw new Error(`${src}: frame ${index} was not decoded before capture`);
         if (frame) rounded(ctx, entity, c, () => drawPicture(ctx, entity, frame, facts.width, facts.height, fit, opts));
       }
@@ -38404,7 +38618,9 @@ function drawBody(ctx, entity, media, opts, root, clip) {
     }
     case "captions": {
       const caps = entity.get(Captions);
-      const transcript = caps.src ? media.transcript(caps.src).transcript : void 0;
+      const handle = caps.src ? media.transcript(caps.src) : void 0;
+      const transcript = handle?.transcript;
+      if (handle && !transcript) opts.onPendingMedia?.(handle.src);
       if (opts.mode === "capture" && caps.src && !transcript) throw new Error(`${caps.src}: transcript was not loaded before capture`);
       const k = (opts.scale ?? 1) * Math.hypot(c.matrix[0], c.matrix[1]);
       if (transcript) drawCaptions(ctx, transcript, c.mediaTime, captionStyle((p) => resolved(entity, p), caps.preset, caps.colors), c, k);
@@ -38577,6 +38793,15 @@ function drawShaderCrossing(ctx, box2, crossing, media, opts) {
   }
 }
 var WARM_LEAD = 0.6;
+function drawPrerendered(ctx, entity, picture, opts) {
+  const parent = entity.get(Hierarchy).parent.get(Computed);
+  const device = deviceMatrix(parent.matrix, opts);
+  const box2 = [0, 0, picture.width, picture.height];
+  if (opts.visible && offscreen(device, box2, opts.visible)) return;
+  ctx.setTransform(...device);
+  ctx.globalAlpha = parent.opacity;
+  ctx.drawImage(picture.image, 0, 0, picture.width, picture.height);
+}
 var upcoming = (entity) => {
   const c = entity.get(Computed);
   return !c.active && c.local < 0 && c.local >= -WARM_LEAD && entity.get(Hierarchy)?.parent?.get(Computed)?.active === true;
@@ -38602,18 +38827,33 @@ function drawFrame(ctx, world, comp, media, opts) {
   ctx.clearRect(0, 0, opts.origin ? ctx.canvas.width : comp.width * s, opts.origin ? ctx.canvas.height : comp.height * s);
   const stage = findStage(world);
   if (!stage) return;
-  childrenOf(stage).filter((scene) => !opts.scene || scene === opts.scene).forEach((scene) => drawEntity(ctx, scene, media, opts, true));
+  childrenOf(stage).forEach((scene) => drawEntity(ctx, scene, media, opts, true));
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.globalAlpha = 1;
+}
+function drawIsolated(ctx, entity, media, opts) {
+  ctx.setTransform(1, 0, 0, 1, 0, 0);
+  ctx.globalAlpha = 1;
+  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+  drawEntity(ctx, entity, media, opts, false);
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   ctx.globalAlpha = 1;
 }
 
 // ../../packages/runtime/src/media/audio.ts
+var NoAudioTrackError = class extends Error {
+  constructor(src) {
+    super(`${src}: no audio track`);
+    this.name = "NoAudioTrackError";
+  }
+};
 var MediabunnyAudio = class {
   src;
   ready;
   facts;
   input;
   sink;
+  disposed = false;
   constructor(src, url2) {
     this.src = src;
     this.ready = this.open(url2);
@@ -38624,24 +38864,55 @@ var MediabunnyAudio = class {
     const input = new Input({ source: new UrlSource(url2, { maxCacheSize: 32 * 1024 * 1024 }), formats: ALL_FORMATS });
     this.input = input;
     const track = await input.getPrimaryAudioTrack();
-    if (!track) throw new Error(`${this.src}: no audio track`);
+    if (this.disposed) throw new DOMException("Audio source disposed", "AbortError");
+    if (!track) throw new NoAudioTrackError(this.src);
     const duration = await track.computeDuration();
+    if (this.disposed) throw new DOMException("Audio source disposed", "AbortError");
     this.sink = new AudioBufferSink(track);
     this.facts = { duration, sampleRate: track.sampleRate, channels: track.numberOfChannels };
     return this.facts;
   }
-  async *chunks(start, end) {
-    await this.ready;
-    if (!this.sink || end <= start) return;
-    for await (const b of this.sink.buffers(start, end)) yield { buffer: b.buffer, timestamp: b.timestamp };
+  chunks(start, end) {
+    let closed = false;
+    let buffers;
+    const close2 = async () => {
+      if (!closed) {
+        closed = true;
+        await buffers?.return();
+      }
+      return { done: true, value: void 0 };
+    };
+    return {
+      next: async () => {
+        if (closed || this.disposed) return { done: true, value: void 0 };
+        await this.ready;
+        if (closed || this.disposed || !this.sink || end <= start) return { done: true, value: void 0 };
+        buffers ??= this.sink.buffers(start, end);
+        const result = await buffers.next();
+        if (closed || this.disposed || result.done) return { done: true, value: void 0 };
+        return { done: false, value: { buffer: result.value.buffer, timestamp: result.value.timestamp } };
+      },
+      return: close2,
+      throw: async (error) => {
+        await close2();
+        throw error;
+      },
+      [Symbol.asyncIterator]() {
+        return this;
+      }
+      // Asserted: under an ESNext lib AsyncGenerator also names Symbol.asyncDispose, which no consumer calls.
+    };
   }
   dispose() {
+    if (this.disposed) return;
+    this.disposed = true;
     this.input?.dispose?.();
     this.sink = void 0;
   }
 };
 
 // ../../packages/runtime/src/media/fonts.ts
+var GOOGLE_ROUTE = "/__higgsedit/fonts/google";
 function axisRanges(fvar) {
   const out = /* @__PURE__ */ new Map();
   const first = fvar.getUint16(4);
@@ -38821,22 +39092,28 @@ var GoogleFonts = class {
       return;
     }
     if ("error" in answer) throw new Error(answer.error);
-    const href = new URL(answer.url, this.endpoint).href;
+    const href = fileUrl(answer.url, this.endpoint);
     const faceKey = `${u.family}|${answer.weight}|${answer.style}`;
     let face = this.faces.get(faceKey);
     if (!face) {
-      const f = new FontFace(u.family, `url("${href}")`, { weight: String(answer.weight), style: answer.style });
-      set.add(f);
-      face = f.load().then(() => void 0);
-      face.catch(() => {
-        set.delete(f);
-        this.faces.delete(faceKey);
-      });
+      face = (async () => {
+        const file = await fetch(href);
+        if (!file.ok) throw new Error(`${file.status} from ${href}`);
+        const f = new FontFace(u.family, await file.arrayBuffer(), { weight: String(answer.weight), style: answer.style });
+        await f.load();
+        set.add(f);
+        fontsChanged();
+      })();
+      face.catch(() => this.faces.delete(faceKey));
       this.faces.set(faceKey, face);
     }
     await face;
   }
 };
+function fileUrl(url2, endpoint) {
+  const at = endpoint.indexOf(GOOGLE_ROUTE);
+  return url2.startsWith("/") && at > 0 ? `${endpoint.slice(0, at)}${url2}` : new URL(url2, endpoint).href;
+}
 var fontSet = () => globalThis.document?.fonts ?? globalThis.fonts;
 
 // ../../packages/runtime/src/media/image.ts
@@ -38899,6 +39176,20 @@ var BrowserImage = class {
 
 // ../../packages/runtime/src/media/mask-file.ts
 var MAGIC = "RMSK";
+function decodeMaskRuns(bytes2, out, start = 0, end = bytes2.length) {
+  out.fill(0);
+  let at = start;
+  let cell = 0;
+  let value = 0;
+  while (at < end) {
+    const [run, next] = readVarint(bytes2, at);
+    at = next;
+    if (value) out.fill(1, cell, Math.min(out.length, cell + run));
+    cell += run;
+    value ^= 1;
+  }
+  return cell;
+}
 var MaskFile = class _MaskFile {
   header;
   bytes;
@@ -38933,20 +39224,10 @@ var MaskFile = class _MaskFile {
   }
   /** Fills `out` (grid-sized) with 1 inside the object, 0 outside; false when the frame was not tracked. */
   frame(index, out) {
-    out.fill(0);
-    let at = this.starts[index];
+    const start = this.starts[index];
     const end = this.ends[index];
-    if (at >= end) return false;
-    let cell = 0;
-    let value = 0;
-    while (at < end) {
-      const [run, next] = readVarint(this.bytes, at);
-      at = next;
-      if (value) out.fill(1, cell, Math.min(out.length, cell + run));
-      cell += run;
-      value ^= 1;
-    }
-    return true;
+    decodeMaskRuns(this.bytes, out, start, end);
+    return start < end;
   }
   /** The frame shown at source seconds `t`: the nearest-frame rule video uses, clamped to the file. */
   indexAt(t) {
@@ -39203,32 +39484,40 @@ var MediabunnyVideo = class {
 };
 async function openVideo(src, url2) {
   const input = new Input({ source: new UrlSource(url2, { maxCacheSize: 128 * 1024 * 1024 }), formats: ALL_FORMATS });
-  const track = await input.getPrimaryVideoTrack();
-  if (!track) throw new Error(`${src}: no video track`);
-  if (!await track.canDecode()) throw new Error(`${src}: this browser cannot decode ${await track.getCodecParameterString()}`);
-  const packets = new EncodedPacketSink(track);
-  const stamps = [];
-  const keyStamps = [];
-  for await (const p of packets.packets(void 0, void 0, { metadataOnly: true })) {
-    stamps.push(p.timestamp);
-    if (p.type === "key") keyStamps.push(p.timestamp);
-  }
-  stamps.sort((a, b) => a - b);
-  const timestamps = Float64Array.from(stamps);
-  const fps = estimateFps(timestamps);
-  const keys = Int32Array.from(new Set(keyStamps.map((t) => indexOfTimestamp(timestamps, t)))).toSorted();
-  return {
-    input,
-    sink: new VideoSampleSink(track),
-    facts: {
-      width: track.displayWidth,
-      height: track.displayHeight,
-      fps,
-      timestamps,
-      duration: timestamps.length ? timestamps[timestamps.length - 1] - Math.max(0, timestamps[0]) + 1 / fps : 0
-    },
-    keys
-  };
+  try {
+    const track = await input.getPrimaryVideoTrack();
+    if (!track) throw new Error(`${src}: no video track`);
+    if (!await track.canDecode()) throw new Error(`${src}: this browser cannot decode ${await track.getCodecParameterString()}`);
+    const packets = new EncodedPacketSink(track);
+    const stamps = [];
+    const keyStamps = [];
+    for await (const p of packets.packets(void 0, void 0, { metadataOnly: true })) {
+      stamps.push(p.timestamp);
+      if (p.type === "key") keyStamps.push(p.timestamp);
+    }
+    stamps.sort((a, b) => a - b);
+    const timestamps = Float64Array.from(stamps);
+    const fps = estimateFps(timestamps);
+    const keys = Int32Array.from(new Set(keyStamps.map((t) => indexOfTimestamp(timestamps, t)))).toSorted();
+    return {
+      input,
+      sink: new VideoSampleSink(track),
+      facts: {
+        width: track.displayWidth,
+        height: track.displayHeight,
+        fps,
+        timestamps,
+        duration: timestamps.length ? timestamps[timestamps.length - 1] - Math.max(0, timestamps[0]) + 1 / fps : 0
+      },
+      keys
+    };
+  } catch (error) {
+    try {
+      input.dispose();
+    } catch {
+    }
+    throw error;
+  }
 }
 function indexOfTimestamp(timestamps, t) {
   let lo = 0;
@@ -39252,6 +39541,7 @@ var BrowserMediaHost = class {
   audios = /* @__PURE__ */ new Map();
   mattes = /* @__PURE__ */ new Map();
   transcripts = /* @__PURE__ */ new Map();
+  readyListeners = /* @__PURE__ */ new Set();
   resolve;
   makeVideo;
   resolveVideo;
@@ -39261,6 +39551,17 @@ var BrowserMediaHost = class {
     this.makeVideo = makeVideo ?? ((src, url2) => new MediabunnyVideo(src, url2));
     this.resolveVideo = resolveVideo ?? resolve;
   }
+  /** A lazily requested image, matte or metadata became available (or failed). */
+  onReady(listener) {
+    this.readyListeners.add(listener);
+    return () => this.readyListeners.delete(listener);
+  }
+  watchReady(src, ready) {
+    const settled = () => {
+      for (const listener of this.readyListeners) listener(src);
+    };
+    void ready.then(settled, settled);
+  }
   /** Drops the open video, matte or parsed transcript for `src`; the next use opens it again (its bytes changed). */
   forget(src) {
     const url2 = this.resolveVideo(src);
@@ -39275,6 +39576,7 @@ var BrowserMediaHost = class {
     if (!handle) {
       handle = new BrowserTranscript(src, url2);
       this.transcripts.set(url2, handle);
+      this.watchReady(src, handle.ready);
     }
     return handle;
   }
@@ -39284,6 +39586,7 @@ var BrowserMediaHost = class {
     if (!handle) {
       handle = this.makeVideo(src, url2);
       this.videos.set(url2, handle);
+      this.watchReady(src, handle.ready);
     }
     return handle;
   }
@@ -39293,6 +39596,7 @@ var BrowserMediaHost = class {
     if (!handle) {
       handle = new BrowserImage(src, url2);
       this.images.set(url2, handle);
+      this.watchReady(src, handle.ready);
     }
     return handle;
   }
@@ -39311,10 +39615,12 @@ var BrowserMediaHost = class {
     if (!handle) {
       handle = new BrowserMatte(src, url2);
       this.mattes.set(url2, handle);
+      this.watchReady(src, handle.ready);
     }
     return handle;
   }
-  dispose() {
+  /** A full project resync invalidates every media source; listeners still belong to the live editor. */
+  forgetAll() {
     for (const a of this.audios.values()) a.dispose();
     this.audios.clear();
     for (const v of this.videos.values()) v.dispose();
@@ -39323,6 +39629,10 @@ var BrowserMediaHost = class {
     this.mattes.clear();
     this.transcripts.clear();
   }
+  dispose() {
+    this.readyListeners.clear();
+    this.forgetAll();
+  }
 };
 
 // ../../packages/runtime/src/media/preview-video.ts
@@ -39404,8 +39714,90 @@ var HostFrameVideo = class {
   }
 };
 
+// ../../packages/runtime/src/prerender.ts
+var PRERENDER_MAX_SECONDS = 120;
+var EPS = 1e-6;
+var HEAVY_TAGS = /* @__PURE__ */ new Set(["html", "surface", "shaderPaint"]);
+var tagOf2 = (e) => e.get(Node).tag;
+var mark = (e) => e.get(Visibility)?.prerender;
+function isHeavy(entity) {
+  if (mark(entity) === false) return false;
+  if (HEAVY_TAGS.has(tagOf2(entity))) return true;
+  const fx = entity.get(Effects);
+  if (typeof fx?.blur === "number" && fx.blur > 0 || fx?.effects?.some((e) => e.type === "blur" && !e.hidden)) return true;
+  if (entity.get(Keyframes)?.animate?.blur) return true;
+  const presets = entity.get(Presets);
+  return [...motionList(presets?.enter), ...motionList(presets?.exit)].some((m) => m.preset === "blur");
+}
+var clips2 = (e) => !!e && (tagOf2(e) === "scene" || tagOf2(e) === "group" && e.get(Effects)?.clip === true);
+var scopeOf = (e) => {
+  const key = e.get(Node).key;
+  return key.startsWith("~") ? void 0 : key.split("/").slice(0, -1).join("/");
+};
+function opensScope(e) {
+  const own = scopeOf(e);
+  const parent = parentOf(e);
+  return !!own && !!parent && own !== scopeOf(parent);
+}
+function unitOf(entity) {
+  const chain = [];
+  for (let e = entity; e && tagOf2(e) !== "scene" && tagOf2(e) !== "stage"; e = parentOf(e)) chain.unshift(e);
+  if (chain.some((e) => mark(e) === false)) return void 0;
+  if (mark(entity) === true && clips2(parentOf(entity))) return entity;
+  return chain.find((e) => opensScope(e) && clips2(parentOf(e))) ?? chain[0];
+}
+function anyIn(entity, test) {
+  return test(entity) || childrenOf(entity).some((c) => anyIn(c, test));
+}
+function cacheable(entity) {
+  const parent = parentOf(entity);
+  if (!clips2(parent) || entity.get(Node).key.startsWith("~") || entity.get(Visibility)?.hidden) return false;
+  const siblings = childrenOf(parent);
+  const next = siblings[siblings.indexOf(entity) + 1];
+  const layer = (e) => tagOf2(e) === "adjustmentLayer";
+  if (next && (layer(next) || tagOf2(next) === "sequence" && anyIn(next, layer))) return false;
+  return !anyIn(entity, layer);
+}
+function prerenderTargets(world) {
+  const units = /* @__PURE__ */ new Set();
+  for (const e of world.query(Node)) {
+    if (!isHeavy(e) && mark(e) !== true) continue;
+    const unit = unitOf(e);
+    if (unit && cacheable(unit)) units.add(unit);
+  }
+  const inside = (e) => {
+    for (let p = parentOf(e); p; p = parentOf(p)) if (units.has(p)) return true;
+    return false;
+  };
+  return [...units].filter((e) => !inside(e));
+}
+function prerenderPlan(world, entity) {
+  const parent = parentOf(entity);
+  if (!parent) return void 0;
+  const fps = composition(world).fps;
+  const rootStart = -localTime(world, entity, 0);
+  const firstFrame = Math.ceil(rootStart * fps - EPS);
+  evaluate(world, firstFrame / fps);
+  const c = entity.get(Computed);
+  const pc = parent.get(Computed);
+  if (!c.active || !(c.length > 0)) return void 0;
+  const own = span(world, entity, c.fps);
+  const length = Math.min(Number.isFinite(own.end) ? own.end - own.start : c.length, PRERENDER_MAX_SECONDS);
+  const end = Math.ceil((rootStart + length) * fps - EPS);
+  return {
+    key: entity.get(Node).key,
+    width: pc.width,
+    height: pc.height,
+    fps,
+    firstFrame,
+    frames: end - firstFrame,
+    offset: firstFrame / fps - rootStart,
+    rootStart
+  };
+}
+
 // ../../packages/reconciler/src/inspect.ts
-var INSPECT_MODULE = "@higgsfield-ai/video-editor-next/jsx/inspect";
+var INSPECT_MODULE = "@higgsfield/higgsedit/jsx/inspect";
 var inspectKey = (file, name) => `${file}#${name}`;
 function createInspectHost(overrides = /* @__PURE__ */ new Map()) {
   const entries = [];
@@ -39440,20 +39832,20 @@ function findEntry(files) {
   const set = new Set(files);
   return ENTRY_CANDIDATES.find((c) => set.has(c));
 }
-var isHostModule = (specifier) => /^(solid-js|@higgsfield-ai\/video-editor-next\/jsx)(\/|$)/.test(specifier);
+var isHostModule = (specifier) => /^(solid-js|@higgsfield\/higgsedit\/jsx)(\/|$)/.test(specifier);
 var packageName = (specifier) => specifier.split("/").slice(0, specifier.startsWith("@") ? 2 : 1).join("/");
-function packageModules(code, externals) {
-  if (!code) return {};
+function packageModules(code2, externals) {
+  if (!code2) return {};
   const module = { exports: {} };
   const require2 = (specifier) => {
     if (specifier in externals) return externals[specifier];
     throw new Error(`a package imports "${specifier}", which the host does not provide (available: ${Object.keys(externals).join(", ")})`);
   };
-  new Function("require", "module", "exports", `${code}
+  new Function("require", "module", "exports", `${code2}
 //# sourceURL=higgsedit-project/node_modules.js`)(require2, module, module.exports);
   return module.exports;
 }
-function evaluateProject(modules, externals, entry = findEntry(Object.keys(modules))) {
+function evaluateProject(modules, externals, entry = findEntry(Object.keys(modules)), options = {}) {
   if (!entry || !(entry in modules)) {
     throw new Error(`project has no entry file (expected one of ${ENTRY_CANDIDATES.join(", ")})`);
   }
@@ -39464,6 +39856,8 @@ function evaluateProject(modules, externals, entry = findEntry(Object.keys(modul
     const module = { exports: {} };
     cache3.set(file, module);
     const require2 = (specifier) => {
+      const made = options.perFile?.[specifier];
+      if (made) return made(file);
       if (specifier in externals) return externals[specifier];
       if (!specifier.startsWith(".")) {
         if (isHostModule(specifier)) throw new Error(`${file}: cannot import "${specifier}" (available: ${Object.keys(externals).join(", ")}, or relative files)`);
@@ -39472,6 +39866,11 @@ function evaluateProject(modules, externals, entry = findEntry(Object.keys(modul
       const base = normalize(`${dirname(file)}/${specifier}`);
       const target2 = EXTENSIONS.map((ext) => base + ext).find((candidate) => candidate in modules);
       if (!target2) throw new Error(`${file}: cannot resolve "${specifier}"`);
+      if (options.imports) {
+        const list = options.imports.get(file) ?? /* @__PURE__ */ new Set();
+        list.add(target2);
+        options.imports.set(file, list);
+      }
       return load(target2);
     };
     const run = (0, eval)(`(function (require, module, exports) {${modules[file]}
@@ -40041,6 +40440,11 @@ var ProjectDocument = class {
   nodes = /* @__PURE__ */ new Map();
   keyCounts = /* @__PURE__ */ new Map();
   world;
+  /** Scope paths whose clocks stand still: the editor shows them from a cached render (live mode only). */
+  frozen;
+  setFrozenScopes;
+  /** Props of every component instance that opened a scope, by scope path ("a/b"). */
+  scopes = /* @__PURE__ */ new Map();
   /** Scope of the component currently rendering, read when an element is created. */
   scopeOf = () => [];
   /** Where a relative `src` in HTML content (an `<img>`) points: the project's media URL. */
@@ -40054,6 +40458,17 @@ var ProjectDocument = class {
     });
     this.tick = tick;
     this.setTick = setTick;
+    const [frozen, setFrozen] = createSignal(/* @__PURE__ */ new Set(), { equals: (a, b) => a.size === b.size && [...a].every((x) => b.has(x)) });
+    this.frozen = frozen;
+    this.setFrozenScopes = setFrozen;
+  }
+  /**
+   * Stops the clocks (`useTicker`, `useLocalTime`) of components inside `scopes` (scope paths), so their effects
+   * stop repainting what the editor draws from a cached render; thawing catches them up. Never in capture.
+   */
+  setFrozen(scopes) {
+    if (this.mode === "capture") return;
+    this.setFrozenScopes(new Set(scopes));
   }
   hold(work) {
     if (this.mode !== "capture") return;
@@ -40095,6 +40510,10 @@ var ProjectDocument = class {
     if (getOwner()) onCleanup(() => this.disposeElement(node));
     return node;
   }
+  /** Records the project module whose JSX created `node`. */
+  noteFile(node, file) {
+    node.entity.get(Node).file = file;
+  }
   createTextNode(value) {
     return { kind: "text", value, parent: null };
   }
@@ -40269,6 +40688,7 @@ var renderer_exports = {};
 __export(renderer_exports, {
   createComponent: () => createComponent2,
   createElement: () => createElement,
+  createElementIn: () => createElementIn,
   createTextNode: () => createTextNode,
   currentScope: () => currentScope,
   effect: () => effect,
@@ -40482,11 +40902,11 @@ function createRenderer$1({
     return prevProps;
   }
   return {
-    render(code, element) {
+    render(code2, element) {
       let disposer;
       createRoot((dispose2) => {
         disposer = dispose2;
-        insert2(element, code());
+        insert2(element, code2());
       });
       return disposer;
     },
@@ -40540,6 +40960,11 @@ var renderer = createRenderer({
   getNextSibling: (node) => doc().getNextSibling(node)
 });
 var { render: render2, effect, memo: memo2, createElement, createTextNode, insertNode, insert, spread, setProp, mergeProps: mergeProps2, use } = renderer;
+function createElementIn(file, tag2) {
+  const node = createElement(tag2);
+  if ("entity" in node) doc().noteFile(node, file);
+  return node;
+}
 var BUILTINS = /* @__PURE__ */ new Set();
 function registerBuiltins(components) {
   for (const c of components) BUILTINS.add(c);
@@ -40548,6 +40973,7 @@ function createComponent2(component, props) {
   const id = BUILTINS.has(component) ? void 0 : untrack(() => props.id);
   if (typeof id !== "string") return createComponent(component, props);
   const parent = useContext(ScopeContext);
+  doc().scopes.set([...parent, id].join("/"), props);
   return createComponent(ScopeContext.Provider, {
     value: [...parent, id],
     get children() {
@@ -40558,20 +40984,34 @@ function createComponent2(component, props) {
 function currentScope() {
   return useContext(ScopeContext);
 }
+function frozenHere(document2) {
+  const scope = useContext(ScopeContext).join("/");
+  if (!scope) return () => false;
+  return createMemo(() => {
+    for (const s of document2.frozen()) if (scope === s || scope.startsWith(`${s}/`)) return true;
+    return false;
+  });
+}
+function clock(document2, frozen, read2) {
+  return createMemo((prev) => prev !== void 0 && frozen() ? prev : read2(document2.tick()), void 0);
+}
 function useTicker2() {
   const document2 = doc();
-  const tick = document2.tick;
+  const frozen = frozenHere(document2);
   return {
-    time: createMemo(() => tick().time),
-    frame: createMemo(() => tick().frame),
-    delta: createMemo(() => tick().delta),
-    playing: createMemo(() => tick().playing),
+    time: clock(document2, frozen, (t) => t.time),
+    frame: clock(document2, frozen, (t) => t.frame),
+    delta: clock(document2, frozen, (t) => t.delta),
+    playing: clock(document2, frozen, (t) => t.playing),
     hold: (work) => document2.hold(work)
   };
 }
 function useLocalTime2(id) {
-  const { world, tick } = doc();
-  return createMemo(() => {
+  const document2 = doc();
+  const { world, tick } = document2;
+  const frozen = frozenHere(document2);
+  return createMemo((prev) => {
+    if (prev !== void 0 && frozen()) return prev;
     const time = tick().time;
     const entity = findByKey(world, id) ?? world.query(Node).find((e) => e.get(Node).id === id);
     if (!entity) throw new Error(`useLocalTime("${id}"): no element has id "${id}"`);
@@ -40610,10 +41050,13 @@ var JSX_MODULE = { ...src_exports, useTicker: useTicker2, useResolution: useReso
 var EXTERNALS = {
   "solid-js": solid_exports,
   "solid-js/store": store_exports,
-  "@higgsfield-ai/video-editor-next/jsx": JSX_MODULE,
-  "@higgsfield-ai/video-editor-next/jsx/renderer": renderer_exports,
+  "@higgsfield/higgsedit/jsx": JSX_MODULE,
+  "@higgsfield/higgsedit/jsx/renderer": renderer_exports,
   [INSPECT_MODULE]: SOURCE_VALUES
 };
+var PER_FILE = {
+  "@higgsfield/higgsedit/jsx/renderer": (file) => ({ ...renderer_exports, createElement: (tag2) => createElementIn(file, tag2) })
+};
 function mountComponent(component, world, mode = "live", options = {}) {
   const document2 = new ProjectDocument(world, mode, options.resolveUrl);
   let disposeGraph;
@@ -40634,21 +41077,84 @@ function mountComponent(component, world, mode = "live", options = {}) {
   };
 }
 
-// ../editor/src/session.ts
+// ../../packages/reconciler/src/prerender.ts
+var SKIP_PROPS = /* @__PURE__ */ new Set(["children", "ref"]);
+var MEDIA = /["'`]((?:\.\/)?(?:\$\{[^}]*\}|[^"'`\s<>])+?\.(?:mp4|mov|m4v|webm|mkv|png|jpe?g|webp|gif|avif|svg|mp3|wav|m4a|aac|ogg|flac|mask|json|ttf|otf|woff2?))["'`]/gi;
+var SOURCE_MAP = /\n?\/\/# sourceMappingURL=\S*\s*$/;
+var code = (sources, file) => (sources.modules[file] ?? "").replace(SOURCE_MAP, "");
+var isHostNode = (v) => "kind" in v && "entity" in v;
+function stable(v, seen) {
+  if (v === void 0) return "u";
+  if (v === null || typeof v === "number" || typeof v === "boolean" || typeof v === "string") return JSON.stringify(v);
+  if (typeof v === "function") return `f${JSON.stringify(String(v))}`;
+  if (typeof v !== "object") return JSON.stringify(String(v));
+  if (seen.has(v)) return `"[cycle]"`;
+  seen.add(v);
+  if (Array.isArray(v)) return `[${v.map((x) => stable(x, seen)).join(",")}]`;
+  if (v instanceof Set) return `s[${[...v].map((x) => stable(x, seen)).toSorted().join(",")}]`;
+  if (v instanceof Map) return `m{${[...v].map(([k, x]) => `${stable(k, seen)}:${stable(x, seen)}`).toSorted().join(",")}}`;
+  const proto = Object.getPrototypeOf(v);
+  if (proto !== Object.prototype && proto !== null || isHostNode(v)) return JSON.stringify(`[${isHostNode(v) ? "node" : proto?.constructor?.name ?? "object"}]`);
+  const record = v;
+  return `{${Object.keys(record).filter((k) => !SKIP_PROPS.has(k)).toSorted().map((k) => `${JSON.stringify(k)}:${stable(record[k], seen)}`).join(",")}}`;
+}
+function prerenderSnapshot(document2, entity, sources) {
+  const lines = [`E ${entity.get(Node).key}`];
+  const files = /* @__PURE__ */ new Set();
+  const scopes = /* @__PURE__ */ new Set();
+  const parent = parentOf(entity);
+  const outer = (parent && document2.nodes.get(parent)?.scope.length) ?? 0;
+  let blend = false;
+  const visit = (e, path) => {
+    const node = e.get(Node);
+    const props = readProps(e);
+    for (const name of node.accessors) delete props[name];
+    lines.push(`N ${path} ${node.tag} ${node.id ?? ""} ${[...node.accessors].toSorted().join(",")} ${untrack(() => stable(props, /* @__PURE__ */ new WeakSet()))}`);
+    if (node.file) files.add(node.file);
+    const scope = document2.nodes.get(e)?.scope ?? [];
+    for (let i = outer + 1; i <= scope.length; i++) scopes.add(scope.slice(0, i).join("/"));
+    const mode = e.get(Compositing)?.blend;
+    if (mode && mode !== "normal") blend = true;
+    childrenOf(e).forEach((c, i) => visit(c, `${path}/${i}`));
+  };
+  visit(entity, "");
+  for (const s of [...scopes].toSorted()) lines.push(`S ${s} ${untrack(() => stable(document2.scopes.get(s), /* @__PURE__ */ new WeakSet()))}`);
+  const queue = [...files];
+  for (const f of queue) {
+    for (const next of sources.imports.get(f) ?? []) {
+      if (files.has(next)) continue;
+      files.add(next);
+      queue.push(next);
+    }
+  }
+  const closure = [...files].toSorted();
+  for (const f of closure) lines.push(`M ${f}
+${code(sources, f)}`);
+  if (sources.packages) lines.push(`P ${sources.packages}`);
+  const text = lines.join("\n");
+  const media = /* @__PURE__ */ new Set();
+  for (const m of text.matchAll(MEDIA)) media.add(m[1].replace(/^\.\//, "").replace(/\$\{[^}]*\}/g, "*"));
+  return { text, ticker: closure.some((f) => /\buseTicker\b/.test(code(sources, f))), blend, media: [...media].toSorted() };
+}
+
+// ../../packages/editor-document/src/session.ts
 var HOLD_TIMEOUT_MS = 3e4;
 var relativeMedia = (src) => src.replace(/^\.\//, "");
-var fontsInUse = (world) => [...usedFonts(world), ...htmlFonts(world)];
-function captureMediaEntities(world, includes) {
-  const needed = new Set(world.query(Media).filter(includes));
-  const targets = new Map(syncLinks(world).filter((link) => !link.problem && link.target).map((link) => [link.entity, link.target]));
-  // Only load timing dependencies of the selected scene, not every sibling scene.
-  // Set iteration includes additions; cycles are bounded by the finite entity set.
-  for (const entity of needed) {
-    const target = targets.get(entity);
-    if (target) needed.add(target);
-  }
-  return needed;
+function fingerprint(text) {
+  let a = 2166136261;
+  let b = 16777619 ^ text.length;
+  for (let i = 0; i < text.length; i++) {
+    const c = text.charCodeAt(i);
+    a = Math.imul(a ^ c, 16777619);
+    b = Math.imul(b ^ c, 16777629);
+  }
+  return `${(a >>> 0).toString(16)}${(b >>> 0).toString(16)}:${text.length}`;
+}
+async function sha256(text) {
+  const hash = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(text));
+  return [...new Uint8Array(hash)].map((b) => b.toString(16).padStart(2, "0")).join("");
 }
+var fontsInUse = (world, includes) => [...usedFonts(world, includes), ...htmlFonts(world, includes)];
 var Session = class {
   world = createProjectWorld();
   mount;
@@ -40658,35 +41164,33 @@ var Session = class {
   /** Families the project's font files register (lowercase): these never go to Google Fonts. */
   projectFamilies = /* @__PURE__ */ new Set();
   mediaUrl;
+  server;
   options;
   comp;
   captureScene;
-  captureIncludes(entity) {
+  captureIncludes = (entity) => {
     if (!this.captureScene) return true;
     for (let e = entity; e; e = parentOf(e)) if (e === this.captureScene) return true;
     return false;
-  }
-  captureFonts() {
-    return fontsInUse({ query: (...traits) => this.world.query(...traits).filter((entity) => this.captureIncludes(entity)) });
-  }
-  evaluateCapture(time) {
-    return evaluate(this.world, time, this.captureScene);
-  }
+  };
   /** The `@inspect` consts the last load evaluated, with the values it used. */
   inspect = [];
+  /** Elements the editor may play from a cached render, with what their picture depends on, read at mount. */
+  prerender = /* @__PURE__ */ new Map();
   constructor(options) {
     this.options = options;
     const base = options.mediaBase.replace(/\/$/, "");
     this.mediaUrl = (src) => `${base}/${relativeMedia(src)}`;
     const videoBase = (options.videoBase ?? base).replace(/\/$/, "");
     this.media = new BrowserMediaHost(this.mediaUrl, options.makeVideo, (src) => `${videoBase}/${relativeMedia(src)}`);
-    this.googleFonts = new GoogleFonts(new URL("/__higgsedit/fonts/google", new URL(base, globalThis.location?.href)).href);
+    this.server = options.origin ?? new URL(base, globalThis.location?.href).origin;
+    this.googleFonts = new GoogleFonts(new URL(`${this.server}/__higgsedit/fonts/google`, globalThis.location?.href).href);
   }
   bundled;
   /** The project's npm packages, evaluated once per bundle so remounts keep the same module instances. */
-  packages(code, externals) {
-    if (!code) return {};
-    if (this.bundled?.code !== code) this.bundled = { code, modules: packageModules(code, externals) };
+  packages(code2, externals) {
+    if (!code2) return {};
+    if (this.bundled?.code !== code2) this.bundled = { code: code2, modules: packageModules(code2, externals) };
     return this.bundled.modules;
   }
   /**
@@ -40699,27 +41203,34 @@ var Session = class {
     const t0 = performance.now();
     const inspect = createInspectHost(overrides);
     const externals = { ...EXTERNALS, [INSPECT_MODULE]: inspect.module };
-    const component = evaluateProject(modules, { ...externals, ...this.packages(packages, externals) });
+    const imports = /* @__PURE__ */ new Map();
+    const component = evaluateProject(modules, { ...externals, ...this.packages(packages, externals) }, void 0, { perFile: PER_FILE, imports });
     const t1 = performance.now();
     const world = createProjectWorld();
-    if (this.options.sceneId !== undefined) captureSceneIds.set(world, this.options.sceneId);
+    if (this.options.captureSceneId !== void 0) setCaptureScene(world, this.options.captureSceneId);
     const mount = mountComponent(component, world, this.options.mode === "capture" ? "capture" : "live", { resolveUrl: this.mediaUrl });
+    const captureScene = this.options.captureSceneId === void 0 ? void 0 : rootScenes(world)[0];
+    if (this.options.captureSceneId !== void 0 && !captureScene) {
+      mount.dispose();
+      world.destroy();
+      throw new Error(`unknown scene: ${this.options.captureSceneId}`);
+    }
     const t2 = performance.now();
+    const sources = { modules, imports, ...packages ? { packages: fingerprint(packages) } : {} };
+    const prerender = new Map(prerenderTargets(world).map((e) => [e.get(Node).key, prerenderSnapshot(mount.document, e, sources)]));
     this.mount?.dispose();
     this.world.destroy();
     this.world = world;
     this.mount = mount;
-    if (this.options.sceneId !== undefined) {
-      this.captureScene = rootScenes(world).find((scene) => scene.get(Node).key === this.options.sceneId || scene.get(Node).id === this.options.sceneId);
-      if (!this.captureScene) throw new Error(`unknown scene: ${this.options.sceneId}`);
-    }
+    this.captureScene = captureScene;
     this.inspect = inspect.entries;
+    this.prerender = prerender;
     const faces = await fontsLoaded;
     this.projectFamilies = new Set(faces.flatMap((f) => f ? [f.family.replace(/^["']|["']$/g, "").toLowerCase()] : []));
     this.googleFonts.retryFailed();
-    await this.googleFonts.load(this.captureFonts(), this.projectFamilies);
+    await this.googleFonts.load(fontsInUse(world, this.captureIncludes), this.projectFamilies);
     await this.resolveMedia(this.options.mode === "capture");
-    this.comp = this.evaluateCapture(0);
+    this.comp = evaluate(world, 0);
     return {
       composition: { width: this.comp.width, height: this.comp.height, fps: this.comp.fps, duration: this.comp.duration, frames: this.comp.frames },
       clips: clips(world),
@@ -40731,7 +41242,12 @@ var Session = class {
   /** Opens every video and audio source to learn its duration; waits for them when `wait` (capture), else updates later. */
   async resolveMedia(wait2) {
     const durations = this.world.get(MediaInfo).durations;
-    const needed = captureMediaEntities(this.world, (entity) => this.captureIncludes(entity));
+    const needed = new Set(this.world.query(Media).filter(this.captureIncludes));
+    const targets = new Map(syncLinks(this.world).filter((link) => !link.problem && link.target).map((link) => [link.entity, link.target]));
+    for (const entity of needed) {
+      const target2 = targets.get(entity);
+      if (target2) needed.add(target2);
+    }
     const work = [...needed].filter((e) => (e.get(Node).tag === "video" || e.get(Node).tag === "audio") && e.get(Media).src).map((e) => {
       const src = e.get(Media).src;
       const handle = e.get(Node).tag === "audio" ? this.media.audio(src) : this.media.video(src);
@@ -40739,7 +41255,8 @@ var Session = class {
         durations.set(src, facts.duration);
       });
     });
-    for (const e of this.world.query(Captions).filter((entity) => this.captureIncludes(entity))) {
+    for (const e of this.world.query(Captions)) {
+      if (!this.captureIncludes(e)) continue;
       const src = e.get(Captions).src;
       if (src) work.push(this.media.transcript(src).ready.then((t) => void durations.set(src, transcriptLength(t))));
     }
@@ -40751,7 +41268,7 @@ var Session = class {
   async resolveSyncs(needed) {
     const world = this.world;
     const offsets = world.get(MediaInfo).offsets;
-    const url2 = this.options.syncUrl ?? `${new URL(this.options.mediaBase, globalThis.location?.href).origin}/__higgsedit/sync`;
+    const url2 = this.options.syncUrl ?? `${this.server}/__higgsedit/sync`;
     await Promise.all(
       syncLinks(world).filter((link) => needed.has(link.entity)).map(async (link) => {
         if (link.problem || !link.src || !link.targetSrc) {
@@ -40787,8 +41304,12 @@ var Session = class {
   tick(frame, opts = {}) {
     const fps = stageFps(this.world);
     const time = opts.time ?? frame / fps;
-    batch(() => this.mount?.tick({ time, frame, delta: opts.delta ?? 1 / fps, playing: opts.playing ?? true }));
-    this.comp = this.evaluateCapture(time);
+    const update = () => {
+      batch(() => this.mount?.tick({ time, frame, delta: opts.delta ?? 1 / fps, playing: opts.playing ?? true }));
+      this.comp = evaluate(this.world, time);
+    };
+    if (this.options.mode === "live") withHtmlClock(this.world, update);
+    else update();
     return this.comp;
   }
   /**
@@ -40799,7 +41320,7 @@ var Session = class {
     const document2 = this.mount?.document;
     for (let round = 0; round < 50; round++) {
       const holds = document2 ? [...document2.holds] : [];
-      const work = Promise.all([...holds, mediaReady(this.world, this.media), this.googleFonts.load(this.captureFonts(), this.projectFamilies), globalThis.document?.fonts?.ready]);
+      const work = Promise.all([...holds, mediaReady(this.world, this.media), this.googleFonts.load(fontsInUse(this.world, this.captureIncludes), this.projectFamilies), globalThis.document?.fonts?.ready]);
       let timer;
       const timeout = new Promise((_, reject) => {
         timer = setTimeout(() => reject(new Error(`frame ${frame}: hold() did not settle within ${HOLD_TIMEOUT_MS / 1e3} s`)), HOLD_TIMEOUT_MS);
@@ -40809,7 +41330,7 @@ var Session = class {
       } finally {
         clearTimeout(timer);
       }
-      this.comp = this.evaluateCapture(time);
+      this.comp = evaluate(this.world, time);
       if (!document2 || document2.holds.size === 0) {
         await mediaReady(this.world, this.media);
         return;
@@ -40818,25 +41339,68 @@ var Session = class {
     throw new Error(`frame ${frame}: hold() kept registering new work`);
   }
   /** Capture mode: tick, barrier, draw. Pixels depend only on (source, media, frame). */
-  async renderFrame(ctx, frame, scale = 1) {
+  async renderFrame(ctx, frame, scale = 1, options = {}) {
+    try {
+      this.tick(frame, { time: options.time });
+      await this.settle(frame, options.time);
+      drawFrame(ctx, this.world, this.comp, this.media, { mode: "capture", scale, origin: options.origin });
+    } catch (error) {
+      throw withFrame(error, frame, stageFps(this.world));
+    }
+  }
+  /**
+   * Every element that may play from a cached render, with its plan and source digest. Evaluates the world at other
+   * times: the next tick puts it back.
+   */
+  async prerenderInputs() {
+    const out = [];
+    for (const [key, snap] of this.prerender) {
+      const plan = this.prerenderPlan(key);
+      if (!plan) continue;
+      const geometry = `G ${plan.width}x${plan.height} ${plan.fps} ${plan.frames} ${Math.round(plan.offset * 1e6)}${snap.ticker ? ` ${plan.rootStart}` : ""}`;
+      out.push({ ...plan, digest: await sha256(`${snap.text}
+${geometry}`), media: snap.media, blend: snap.blend });
+    }
+    if (this.comp) this.comp = evaluate(this.world, 0);
+    return out;
+  }
+  /** What a pre-rendered preview of element `key` covers (the editor's preview cache; renders never read it). */
+  prerenderPlan(key) {
+    const entity = findByKey(this.world, key);
+    return entity ? prerenderPlan(this.world, entity) : void 0;
+  }
+  /** Capture mode, root frame `frame`, only element `key`: its parent's box at the canvas origin, `scale` px per parent px. */
+  async renderIsolated(ctx, key, frame, scale) {
     try {
       this.tick(frame);
       await this.settle(frame);
-      drawFrame(ctx, this.world, this.comp, this.media, { mode: "capture", scale });
+      const entity = findByKey(this.world, key);
+      if (!entity) throw new Error(`no element ${key}`);
+      isolate(entity);
+      drawIsolated(ctx, entity, this.media, { mode: "capture", scale });
     } catch (error) {
       throw withFrame(error, frame, stageFps(this.world));
     }
   }
   /** Live mode: draw whatever media is ready now. */
-  drawLive(ctx, scale = 1, origin, visible) {
-    if (this.comp) drawFrame(ctx, this.world, this.comp, this.media, { mode: "live", scale, ...origin ? { origin } : {}, ...visible ? { visible } : {} });
+  drawLive(ctx, scale = 1, origin, visible, prerendered) {
+    const pending = /* @__PURE__ */ new Set();
+    let pendingHtml = false;
+    const htmlKeys = /* @__PURE__ */ new Set();
+    if (this.comp) drawFrame(ctx, this.world, this.comp, this.media, { mode: "live", scale, ...origin ? { origin } : {}, ...visible ? { visible } : {}, ...prerendered ? { prerendered } : {}, onPendingMedia: (src) => {
+      pending.add(src);
+    }, onHtml: (key, ready) => {
+      htmlKeys.add(key);
+      if (!ready) pendingHtml = true;
+    } });
+    return { pendingMedia: [...pending], pendingHtml, htmlKeys: [...htmlKeys] };
   }
   entity(key) {
     return findByKey(this.world, key);
   }
 };
 
-// ../editor/src/capture-page.ts
+// ../../packages/editor-document/src/capture-page.ts
 async function toBase64(blob) {
   const bytes2 = new Uint8Array(await blob.arrayBuffer());
   let binary = "";
@@ -40847,23 +41411,10 @@ var session;
 var canvas;
 var depth2 = 8;
 var encoder;
-var outputComposition;
-var outputOrigin = 0;
-async function renderOutputFrame(ctx, frame) {
-  if (!outputComposition) return session.renderFrame(ctx, frame);
-  const time = outputOrigin + frame / outputComposition.fps;
-  const authoredFrame = Math.round(time * stageFps(session.world));
-  session.tick(authoredFrame, { time });
-  await session.settle(authoredFrame, time);
-  const source = session.captureScene?.get(SceneConfig) ?? session.comp;
-  const sourceWidth = source.width ?? session.comp.width;
-  const sourceHeight = source.height ?? session.comp.height;
-  const scale = Math.min(outputComposition.width / sourceWidth, outputComposition.height / sourceHeight);
-  const origin = { x: -(outputComposition.width / scale - sourceWidth) / 2, y: -(outputComposition.height / scale - sourceHeight) / 2 };
-  drawFrame(ctx, session.world, session.comp, session.media, { mode: "capture", scale, origin, scene: session.captureScene });
-}
+var output;
+var sourceStart = 0;
 function context() {
-  const comp = outputComposition ?? session.comp;
+  const comp = output;
   if (!canvas || canvas.width !== comp.width || canvas.height !== comp.height) {
     canvas = new OffscreenCanvas(comp.width, comp.height);
   }
@@ -40871,42 +41422,55 @@ function context() {
   if (!ctx) throw new Error("no 2d context");
   return ctx;
 }
+async function renderOutput(ctx, frame) {
+  const authored = session.comp;
+  const time = sourceStart + frame / output.fps;
+  const scale = Math.min(output.width / authored.width, output.height / authored.height);
+  const origin = { x: -(output.width / scale - authored.width) / 2, y: -(output.height / scale - authored.height) / 2 };
+  await session.renderFrame(ctx, Math.round(time * stageFps(session.world)), scale, { time, origin });
+}
+var isolatedCanvas;
+function isolatedContext(key, height) {
+  const plan = session.prerenderPlan(key);
+  if (!plan) throw new Error(`${key}: nothing to pre-render`);
+  const scale = height / plan.height;
+  const width = Math.max(1, Math.round(plan.width * scale));
+  if (!isolatedCanvas || isolatedCanvas.width !== width || isolatedCanvas.height !== height) isolatedCanvas = new OffscreenCanvas(width, height);
+  const ctx = isolatedCanvas.getContext("2d", { willReadFrequently: true });
+  return { ctx, scale };
+}
 function read(ctx) {
   const { width, height } = ctx.canvas;
   const image = depth2 === 10 ? ctx.getImageData(0, 0, width, height, { pixelFormat: "rgba-float16" }) : ctx.getImageData(0, 0, width, height);
   return image.data;
 }
 var api = {
-  async load({ modules, fonts, packages, mediaBase, depth: d, hostFrames, spec, sceneId }) {
+  async load({ modules, fonts, packages, mediaBase, depth: d, hostFrames, sceneId, spec }) {
     depth2 = d;
+    session?.mount?.dispose();
+    session?.world.destroy();
     session = new Session({
       mediaBase,
       mode: "capture",
-      sceneId,
+      captureSceneId: sceneId,
       ...hostFrames ? { makeVideo: (src) => new HostFrameVideo(src, hostFrames) } : {}
     });
     const info = await session.load(modules, fonts, void 0, packages);
-    outputComposition = undefined;
-    outputOrigin = 0;
-    if (spec || sceneId !== undefined) {
-      const scene = session.captureScene;
-      const timing = scene ? span(session.world, scene, stageFps(session.world)) : { start: 0, end: info.composition.duration };
-      const config = scene?.get(SceneConfig);
-      outputOrigin = timing.start;
-      const fps = spec?.video.fps ?? config?.fps ?? info.composition.fps;
-      const duration = timing.end - timing.start;
-      outputComposition = { width: spec?.video.width ?? config?.width ?? info.composition.width, height: spec?.video.height ?? config?.height ?? info.composition.height, fps, duration, frames: Math.max(1, Math.round(duration * fps)) };
-      return { ...info, composition: outputComposition, sourceFps: config?.fps ?? info.composition.fps };
-    }
-    return info;
+    const authored = session.comp;
+    const range = session.captureScene ? span(session.world, session.captureScene, stageFps(session.world)) : { start: 0, end: authored.duration };
+    sourceStart = range.start;
+    const duration = range.end - range.start;
+    const fps = spec?.video.fps ?? authored.fps;
+    output = { width: spec?.video.width ?? authored.width, height: spec?.video.height ?? authored.height, fps, duration, frames: Math.max(1, Math.round(duration * fps)) };
+    return { ...info, composition: { ...output, sourceFps: authored.fps } };
   },
   async png(frame) {
     const ctx = context();
-    await renderOutputFrame(ctx, frame);
+    await renderOutput(ctx, frame);
     return toBase64(await canvas.convertToBlob({ type: "image/png" }));
   },
   async sheet(frames, { columns, width }) {
-    const comp = outputComposition ?? session.comp;
+    const comp = output;
     const thumbW = width;
     const thumbH = Math.round(width * comp.height / comp.width);
     const label = 28;
@@ -40917,7 +41481,7 @@ var api = {
     out.fillRect(0, 0, sheet.width, sheet.height);
     for (const [i, frame] of frames.entries()) {
       const ctx = context();
-      await renderOutputFrame(ctx, frame);
+      await renderOutput(ctx, frame);
       const x = i % columns * thumbW;
       const y = Math.floor(i / columns) * (thumbH + label);
       out.drawImage(canvas, x, y, thumbW, thumbH);
@@ -40928,12 +41492,12 @@ var api = {
     }
     return toBase64(await sheet.convertToBlob({ type: "image/png" }));
   },
-  audio: () => audioClips(session.world, session.captureScene).map((clip) => ({ ...clip, start: clip.start - outputOrigin, end: clip.end - outputOrigin })),
+  audio: () => audioClips(session.world).map((clip) => ({ ...clip, start: clip.start - sourceStart, end: clip.end - sourceStart })),
   fontMisses: () => session.fontMisses(),
   async raw(frame, url2) {
     const ctx = context();
     const t0 = performance.now();
-    await renderOutputFrame(ctx, frame);
+    await renderOutput(ctx, frame);
     const t1 = performance.now();
     const data = read(ctx);
     const t2 = performance.now();
@@ -40943,17 +41507,17 @@ var api = {
   },
   async digest(frame) {
     const ctx = context();
-    await renderOutputFrame(ctx, frame);
+    await renderOutput(ctx, frame);
     const data = read(ctx);
     const hash = await crypto.subtle.digest("SHA-256", data);
     return [...new Uint8Array(hash)].map((b) => b.toString(16).padStart(2, "0")).join("");
   },
   async encodeCheck({ codec, bitrate }) {
-    const comp = outputComposition ?? session.comp;
+    const comp = output;
     return await encodeProblem({ depth: depth2, codec, width: comp.width, height: comp.height, fps: comp.fps, bitrate }) ?? null;
   },
   async encodeStart({ url: url2, codec, quantizer, bitrate }) {
-    const comp = outputComposition ?? session.comp;
+    const comp = output;
     context();
     encoder = await createWebCodecsEncoder(canvas, {
       depth: depth2,
@@ -40972,7 +41536,7 @@ var api = {
   async encodeFrame(frame, index) {
     const ctx = context();
     const t0 = performance.now();
-    await renderOutputFrame(ctx, frame);
+    await renderOutput(ctx, frame);
     const t1 = performance.now();
     await encoder.add(index);
     return { renderMs: t1 - t0, encodeMs: performance.now() - t1 };
@@ -40986,6 +41550,30 @@ var api = {
   async encodeCancel() {
     await encoder?.cancel();
     encoder = void 0;
+  },
+  prerenderPlan: (key) => session.prerenderPlan(key) ?? null,
+  prerenderInputs: () => session.prerenderInputs(),
+  async prerenderPng(key, frame, height) {
+    const { ctx, scale } = isolatedContext(key, height);
+    await session.renderIsolated(ctx, key, frame, scale);
+    return toBase64(await isolatedCanvas.convertToBlob({ type: "image/png" }));
+  },
+  async prerenderRaw(key, frame, height, url2) {
+    const { ctx, scale } = isolatedContext(key, height);
+    const t0 = performance.now();
+    await session.renderIsolated(ctx, key, frame, scale);
+    const data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height).data;
+    let opaque2 = true;
+    for (let i = 3; i < data.length; i += 4) {
+      if (data[i] !== 255) {
+        opaque2 = false;
+        break;
+      }
+    }
+    const t1 = performance.now();
+    const r = await fetch(url2, { method: "POST", body: new Blob([data]) });
+    if (!r.ok) throw new Error(`POST ${url2}: ${r.status}`);
+    return { renderMs: t1 - t0, sendMs: performance.now() - t1, opaque: opaque2 };
   }
 };
 globalThis.higgsedit = api;