@agent-native/core-corpus 0.213.1 → 0.216.0

package/corpus/templates/design/app/components/design/bridge/native-worker-scene-host.ts

@@ -3,7 +3,12 @@ import type {
   EffectDefinition,
   EffectInstance,
 } from "../../../../shared/native-effects";
+import {
+  nativeWorkerInputAssetId,
+  planNativeInputResources,
+} from "../../../../shared/native-input-resources";
 import { readNativeAuthoredPaint } from "./native-authored-paint";
+import { isNativeHtmlElement, isNativeSvgRoot } from "./native-dom";
 import {
   planNativeChainedEffectExtent,
   planNativeFillPresentationExtent,
@@ -14,7 +19,13 @@ import {
   supportsNativeOutput2D,
 } from "./native-effect-output-geometry";
 import { filterNativeExportSelection } from "./native-export-selection";
+import { fitNativeRasterDensity } from "./native-preview-geometry";
 import { beginNativeRegionExport } from "./native-region-export";
+import {
+  attachNativeScenePresentationCanvas,
+  supportsNativeSceneBodyTransform,
+} from "./native-scene-body-transform";
+import { isNativeScenePresentationElement } from "./native-scene-presentation-element";
 import {
   createNativeSceneProvider,
   cloneNativeTextFlow,
@@ -27,11 +38,16 @@ import {
   type NativeSourceRecord,
 } from "./native-source-provider";
 import { NativeWorkerHost, NativeWorkerHostError } from "./native-worker-host";
+import { NativeWorkerInputAssets } from "./native-worker-input-assets";
 import type {
   NativeWorkerEffectTarget,
   NativeWorkerScene,
   NativeWorkerSourceRecord,
 } from "./native-worker-protocol";
+import {
+  NATIVE_WORKER_MAX_DIMENSION,
+  NATIVE_WORKER_MAX_PIXELS,
+} from "./native-worker-protocol";
 import { NativeWorkerSourceSnapshot } from "./native-worker-source-snapshot";
 
 export type NativeWorkerSceneEntry = {
@@ -41,6 +57,80 @@ export type NativeWorkerSceneEntry = {
   target: HTMLElement | SVGSVGElement;
 };
 
+export function planNativeWorkerSceneGeometry(input: {
+  viewport: { x: number; y: number; width: number; height: number };
+  pixelRatio: number;
+}): {
+  viewport: { x: number; y: number; width: number; height: number };
+  pixelRatio: number;
+  width: number;
+  height: number;
+} {
+  const { viewport, pixelRatio: requestedRatio } = input;
+  if (
+    ![
+      viewport.x,
+      viewport.y,
+      viewport.width,
+      viewport.height,
+      requestedRatio,
+    ].every(Number.isFinite) ||
+    viewport.width <= 0 ||
+    viewport.height <= 0 ||
+    requestedRatio <= 0
+  )
+    throw new NativeSourceError(
+      "worker-viewport-geometry-invalid",
+      "The native worker viewport has invalid geometry.",
+    );
+  const pixelRatio = fitNativeRasterDensity({
+    width: viewport.width,
+    height: viewport.height,
+    density: requestedRatio,
+    maxDimension: NATIVE_WORKER_MAX_DIMENSION,
+    maxPixels: NATIVE_WORKER_MAX_PIXELS,
+  });
+  const width = Math.ceil(viewport.width * pixelRatio);
+  const height = Math.ceil(viewport.height * pixelRatio);
+  if (
+    !Number.isSafeInteger(width) ||
+    !Number.isSafeInteger(height) ||
+    width < 1 ||
+    height < 1 ||
+    width > NATIVE_WORKER_MAX_DIMENSION ||
+    height > NATIVE_WORKER_MAX_DIMENSION ||
+    width * height > NATIVE_WORKER_MAX_PIXELS
+  )
+    throw new NativeSourceError(
+      "worker-viewport-budget-exceeded",
+      "The requested native worker viewport exceeds its full-resolution budget.",
+    );
+  return { viewport, pixelRatio, width, height };
+}
+
+export function nativeWorkerDefinitions(
+  entries: readonly NativeWorkerSceneEntry[],
+): EffectDefinition[] {
+  const definitions = new Map<
+    string,
+    { definition: EffectDefinition; hash: string }
+  >();
+  for (const entry of entries) {
+    const key = JSON.stringify([entry.definition.id, entry.definition.version]);
+    const existing = definitions.get(key);
+    if (existing && existing.hash !== entry.definitionHash)
+      throw new NativeSourceError(
+        "worker-definition-conflict",
+        `Native effect ${entry.definition.id} version ${entry.definition.version} has conflicting definitions.`,
+      );
+    definitions.set(key, {
+      definition: entry.definition,
+      hash: entry.definitionHash,
+    });
+  }
+  return [...definitions.values()].map(({ definition }) => definition);
+}
+
 type TargetState = {
   entry: NativeWorkerSceneEntry;
   marker: HTMLCanvasElement;
@@ -57,6 +147,17 @@ type Publication = {
   targetEpochs: Map<string, { source: number; authored: number }>;
   rootRecords: readonly NativeSourceRecord[];
   payloads: Map<string, { payload: string; definitionHash: string }>;
+  clockIdentity?: { origin: number | null; sourcePlaying: boolean };
+};
+
+type CameraCandidate = {
+  committed: { scene: NativeWorkerScene; publication: Publication };
+  viewport: NativeWorkerScene["viewport"];
+  width: number;
+  height: number;
+  pixelRatio: number;
+  clock: NativeWorkerScene["clock"];
+  clockIdentity: NonNullable<Publication["clockIdentity"]>;
 };
 
 const OMIT_SCENE_CHILD =
@@ -83,6 +184,38 @@ export function nativeWorkerOutputRecords(
   });
 }
 
+type NativeWorkerOutputTarget = Pick<
+  NativeWorkerEffectTarget,
+  "sourceRecords" | "fillLocalSourceRecords" | "fillPhases"
+>;
+
+export function nativeWorkerOutputSceneRecords(
+  targets: NativeWorkerOutputTarget[],
+  records: readonly NativeWorkerSourceRecord[],
+  sizes: ReadonlyMap<string, { width: number; height: number }>,
+): NativeWorkerSourceRecord[] {
+  for (const target of targets) {
+    target.sourceRecords = nativeWorkerOutputRecords(
+      target.sourceRecords,
+      sizes,
+    );
+    if (target.fillLocalSourceRecords)
+      target.fillLocalSourceRecords = nativeWorkerOutputRecords(
+        target.fillLocalSourceRecords,
+        sizes,
+      );
+    if (target.fillPhases)
+      for (const key of Object.keys(target.fillPhases) as Array<
+        keyof NonNullable<NativeWorkerEffectTarget["fillPhases"]>
+      >)
+        target.fillPhases[key] = nativeWorkerOutputRecords(
+          target.fillPhases[key],
+          sizes,
+        );
+  }
+  return nativeWorkerOutputRecords(records, sizes);
+}
+
 function nativeWorkerTargetGeometry(
   target: HTMLElement | SVGSVGElement,
   pixelRatio: number,
@@ -96,8 +229,9 @@ function nativeWorkerTargetGeometry(
     ![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) ||
     rect.width <= 0 ||
     rect.height <= 0 ||
-    width > 8192 ||
-    height > 8192
+    width > NATIVE_WORKER_MAX_DIMENSION ||
+    height > NATIVE_WORKER_MAX_DIMENSION ||
+    width * height > NATIVE_WORKER_MAX_PIXELS
   )
     throw new NativeSourceError(
       "worker-target-geometry-invalid",
@@ -120,6 +254,7 @@ export class NativeWorkerSceneHost {
     { signature: string; canvas: HTMLCanvasElement }
   >();
   private readonly assetRevisions = new Map<string, number>();
+  private readonly inputAssets = new NativeWorkerInputAssets();
   private readonly pendingAssetRevisions = new Map<
     number,
     Map<string, number>
@@ -155,16 +290,17 @@ export class NativeWorkerSceneHost {
   private cameraInFlightGeneration: number | null = null;
   private cameraUpdatePending = false;
   private cameraPublishTimer: ReturnType<typeof setTimeout> | null = null;
-  private clock: () => { playing: boolean; timeSeconds: number; speed: number };
+  private clock: () => NativeWorkerScene["clock"];
 
   constructor(
     workerSource: string,
     sceneId: string,
-    clock: () => { playing: boolean; timeSeconds: number; speed: number },
+    clock: () => NativeWorkerScene["clock"],
     private readonly onCommitted: (
       publication: Publication,
       message: {
         timeSeconds: number;
+        contentChanged: boolean;
         committedInstances: readonly {
           instanceId: string;
           definitionHash: string;
@@ -189,6 +325,11 @@ export class NativeWorkerSceneHost {
       viewport: { x: number; y: number; width: number; height: number };
       pixelRatio: number;
     },
+    private readonly sceneCadence: () => {
+      frameRateTarget: 60 | 120;
+      compact: boolean;
+    },
+    private readonly getClockOrigin?: () => number,
   ) {
     const body = document.body;
     if (!body)
@@ -203,7 +344,11 @@ export class NativeWorkerSceneHost {
     this.canvas.setAttribute("aria-hidden", "true");
     this.canvas.style.cssText =
       "position:fixed;left:0;top:0;pointer-events:none;visibility:hidden;z-index:0;max-width:none;max-height:none;";
-    body.prepend(this.canvas);
+    attachNativeScenePresentationCanvas(
+      this.canvas,
+      body,
+      getComputedStyle(body),
+    );
     const provider = createNativeSceneProvider(
       document.documentElement,
       "layer",
@@ -414,8 +559,8 @@ export class NativeWorkerSceneHost {
   private snapshotClock(
     viewport: { x: number; y: number; width: number; height: number },
     exportCapture: boolean,
+    clock = this.clock(),
   ): NativeWorkerScene["clock"] {
-    const clock = this.clock();
     if (
       exportCapture ||
       !clock.playing ||
@@ -456,19 +601,28 @@ export class NativeWorkerSceneHost {
     return readableMarkers ? { ...clock, playing: false } : clock;
   }
 
+  private clockIdentity(
+    sourceClock: NativeWorkerScene["clock"],
+  ): NonNullable<Publication["clockIdentity"]> {
+    if (!this.getClockOrigin)
+      return { origin: null, sourcePlaying: sourceClock.playing };
+    const origin = this.getClockOrigin();
+    if (!Number.isFinite(origin))
+      throw new NativeSourceError(
+        "worker-clock-origin-unreadable",
+        "The native worker playback origin is unreadable.",
+      );
+    return { origin, sourcePlaying: sourceClock.playing };
+  }
+
   retainsPreviewViewport(
     viewport: { x: number; y: number; width: number; height: number },
     pixelRatio: number,
   ): boolean {
-    const committed = this.currentCameraSource(pixelRatio);
-    if (
-      this.dirty ||
-      this.updating ||
-      !committed ||
-      this.lastScene?.generation !== committed.scene.generation
-    )
-      return false;
-    const retained = committed.scene.viewport;
+    if (this.dirty || this.updating) return false;
+    const known = this.committedScene();
+    if (!known) return false;
+    const retained = known.scene.viewport;
     if (
       ![viewport.x, viewport.y, viewport.width, viewport.height].every(
         Number.isFinite,
@@ -481,6 +635,13 @@ export class NativeWorkerSceneHost {
       viewport.y + viewport.height > retained.y + retained.height + 0.001
     )
       return false;
+    const planned = planNativeWorkerSceneGeometry({
+      viewport: retained,
+      pixelRatio,
+    });
+    const committed = this.currentCameraSource(planned.pixelRatio);
+    if (!committed || this.lastScene?.generation !== committed.scene.generation)
+      return false;
     if (
       this.snapshotClock(viewport, false).playing !==
       committed.scene.clock.playing
@@ -493,6 +654,7 @@ export class NativeWorkerSceneHost {
     pixelRatio: number,
   ): ReturnType<NativeWorkerSceneHost["committedScene"]> {
     const committed = this.committedScene();
+    const cadence = this.sceneCadence();
     if (
       !this.visible ||
       this.disposed ||
@@ -507,6 +669,8 @@ export class NativeWorkerSceneHost {
       !Number.isFinite(pixelRatio) ||
       pixelRatio <= 0 ||
       Math.abs(pixelRatio - committed.scene.pixelRatio) > 0.000001 ||
+      (committed.scene.frameRateTarget ?? 60) !== cadence.frameRateTarget ||
+      (committed.scene.compact ?? false) !== cadence.compact ||
       this.entries.length !== committed.publication.payloads.size
     )
       return null;
@@ -541,12 +705,12 @@ export class NativeWorkerSceneHost {
     return committed;
   }
 
-  private reprojectSnapshot(): Awaited<
-    ReturnType<NativeWorkerSceneHost["captureSnapshot"]>
-  > | null {
-    const { viewport, pixelRatio } = this.sceneGeometry();
-    const committed = this.currentCameraSource(pixelRatio);
+  private cameraCandidate(): CameraCandidate | null {
+    const geometry = planNativeWorkerSceneGeometry(this.sceneGeometry());
+    const { viewport } = geometry;
+    const committed = this.currentCameraSource(geometry.pixelRatio);
     if (!committed) return null;
+    const pixelRatio = committed.scene.pixelRatio;
     const width = Math.ceil(viewport.width * pixelRatio);
     const height = Math.ceil(viewport.height * pixelRatio);
     if (
@@ -557,10 +721,52 @@ export class NativeWorkerSceneHost {
       viewport.height <= 0 ||
       width < 1 ||
       height < 1 ||
-      width > 8192 ||
-      height > 8192
+      width > NATIVE_WORKER_MAX_DIMENSION ||
+      height > NATIVE_WORKER_MAX_DIMENSION ||
+      width * height > NATIVE_WORKER_MAX_PIXELS
     )
       return null;
+    const sourceClock = this.clock();
+    return {
+      committed,
+      viewport,
+      width,
+      height,
+      pixelRatio,
+      clock: this.snapshotClock(viewport, false, sourceClock),
+      clockIdentity: this.clockIdentity(sourceClock),
+    };
+  }
+
+  private sameCamera(
+    candidate: CameraCandidate,
+    scene: NativeWorkerScene,
+    publication: Publication,
+  ): boolean {
+    const { viewport, clock, clockIdentity } = candidate;
+    const previousIdentity = publication.clockIdentity;
+    return (
+      scene.viewport.x === viewport.x &&
+      scene.viewport.y === viewport.y &&
+      scene.viewport.width === viewport.width &&
+      scene.viewport.height === viewport.height &&
+      scene.width === candidate.width &&
+      scene.height === candidate.height &&
+      scene.pixelRatio === candidate.pixelRatio &&
+      scene.clock.playing === clock.playing &&
+      scene.clock.speed === clock.speed &&
+      previousIdentity?.sourcePlaying === clockIdentity.sourcePlaying &&
+      (clockIdentity.sourcePlaying
+        ? clockIdentity.origin !== null &&
+          clockIdentity.origin === previousIdentity?.origin
+        : scene.clock.timeSeconds === clock.timeSeconds)
+    );
+  }
+
+  private reprojectSnapshot(
+    candidate: CameraCandidate,
+  ): Awaited<ReturnType<NativeWorkerSceneHost["captureSnapshot"]>> {
+    const { committed, viewport, width, height, pixelRatio, clock } = candidate;
     const generation = ++this.generation;
     return {
       scene: {
@@ -569,11 +775,16 @@ export class NativeWorkerSceneHost {
         viewport,
         width,
         height,
-        clock: this.snapshotClock(viewport, false),
+        pixelRatio,
+        clock,
       },
       assets: [],
       revisions: new Map(this.assetRevisions),
-      publication: { ...committed.publication, generation },
+      publication: {
+        ...committed.publication,
+        generation,
+        clockIdentity: candidate.clockIdentity,
+      },
     };
   }
 
@@ -650,8 +861,7 @@ export class NativeWorkerSceneHost {
           node.nodeType === Node.TEXT_NODE && !!node.textContent?.trim(),
       ) ||
       [...body.children].some(
-        (child) =>
-          !(child instanceof HTMLElement || child instanceof SVGSVGElement),
+        (child) => !isNativeScenePresentationElement(child),
       )
     )
       throw new NativeSourceError(
@@ -674,19 +884,18 @@ export class NativeWorkerSceneHost {
           "scene-background-unsupported",
           "The native worker scene has an unsupported root background.",
         );
-    if (
-      bodyStyle.transform !== "none" ||
-      bodyStyle.translate !== "none" ||
-      bodyStyle.rotate !== "none" ||
-      bodyStyle.scale !== "none" ||
-      bodyStyle.opacity !== "1"
-    )
+    if (!supportsNativeSceneBodyTransform(bodyStyle))
       throw new NativeSourceError(
         "scene-presentation-transform-unsupported",
         "The native worker scene cannot project a transformed or translucent body.",
       );
+    attachNativeScenePresentationCanvas(this.canvas, body, bodyStyle);
+    const requestedGeometry = this.sceneGeometry();
+    const plannedGeometry = options
+      ? requestedGeometry
+      : planNativeWorkerSceneGeometry(requestedGeometry);
     const { viewport: previewViewport, pixelRatio: requestedPixelRatio } =
-      this.sceneGeometry();
+      plannedGeometry;
     const viewport = options?.cropRect ?? previewViewport;
     const pixelRatio = options?.pixelRatio ?? requestedPixelRatio;
     const width = Math.ceil(viewport.width * pixelRatio);
@@ -696,9 +905,9 @@ export class NativeWorkerSceneHost {
       pixelRatio <= 0 ||
       width < 1 ||
       height < 1 ||
-      width > 8192 ||
-      height > 8192 ||
-      width * height > 8192 * 8192
+      width > NATIVE_WORKER_MAX_DIMENSION ||
+      height > NATIVE_WORKER_MAX_DIMENSION ||
+      width * height > NATIVE_WORKER_MAX_PIXELS
     )
       throw new NativeSourceError(
         "worker-viewport-budget-exceeded",
@@ -759,8 +968,8 @@ export class NativeWorkerSceneHost {
           cssWidth: layout.width,
           cssHeight: layout.height,
           pixelRatio: targetPixelRatio,
-          maxDimension: 8192,
-          maxPixels: 8192 * 8192,
+          maxDimension: NATIVE_WORKER_MAX_DIMENSION,
+          maxPixels: NATIVE_WORKER_MAX_PIXELS,
           previous,
         });
         if (!planned.ok)
@@ -849,12 +1058,12 @@ export class NativeWorkerSceneHost {
           `${options ? `export:${generation}:` : ""}${entry.instance.id}:provider:${state.captureScope}:epoch:${targetSourceEpoch}`,
           receiver,
           needsGeometry,
-          needsInterior && entry.target instanceof SVGSVGElement,
+          needsInterior && isNativeSvgRoot(entry.target),
         );
         let cornerRadii: NativeWorkerEffectTarget["cornerRadii"];
         if (
           entry.instance.clip === "bounds" &&
-          entry.target instanceof HTMLElement
+          isNativeHtmlElement(entry.target)
         ) {
           const radius = resolveNativeClipRadii({
             width: outputExtent.sourceWidth,
@@ -954,6 +1163,39 @@ export class NativeWorkerSceneHost {
             "worker-target-epoch-stale",
             "The native effect target changed during capture.",
           );
+        const inputPlan = planNativeInputResources(
+          entry.definition,
+          entry.instance,
+        );
+        if (!inputPlan.ok)
+          throw new NativeSourceError(inputPlan.code, inputPlan.detail);
+        const inputAssetIds: Record<string, string> = {};
+        for (const [resource, input] of inputPlan.inputs) {
+          if (input.kind !== "asset") continue;
+          const sampleEncoding = input.sampleEncoding ?? "srgb-color";
+          if (
+            (sampleEncoding !== "srgb-color" &&
+              sampleEncoding !== "linear-data") ||
+            input.preprocess !== undefined ||
+            input.mipmap !== undefined
+          )
+            throw new NativeSourceError(
+              "worker-input-processing-unsupported",
+              `The worker cannot process input ${resource}.`,
+            );
+          const assetId = nativeWorkerInputAssetId(input);
+          if (!assetId)
+            throw new NativeSourceError(
+              "worker-input-asset-unsupported",
+              `The worker cannot identify input ${resource}.`,
+            );
+          inputAssetIds[resource] = await snapshot.inputBitmap(
+            assetId,
+            1,
+            () => this.inputAssets.bitmap(input.url, sampleEncoding),
+            sampleEncoding,
+          );
+        }
         targetSnapshots.push({
           instanceId: entry.instance.id,
           definitionHash: entry.definitionHash,
@@ -964,6 +1206,7 @@ export class NativeWorkerSceneHost {
           pixelRatio: targetPixelRatio,
           sourceRecords,
           ...coverage,
+          ...(Object.keys(inputAssetIds).length ? { inputAssetIds } : {}),
           ...(cornerRadii ? { cornerRadii } : {}),
           ...(textMaskAssetId ? { textMaskAssetId } : {}),
           ...(fillPhases ? { fillPhases } : {}),
@@ -1013,7 +1256,7 @@ export class NativeWorkerSceneHost {
           );
         if (nearest) child.groupLocalOwnerId = nearest.instance.id;
         if (!nearest || nearest.instance.placement !== "fill") continue;
-        if (!(nearest.target instanceof HTMLElement))
+        if (!isNativeHtmlElement(nearest.target))
           throw new NativeSourceError(
             "source-inline-svg",
             "An SVG Fill cannot contain a nested HTML Backdrop.",
@@ -1094,26 +1337,6 @@ export class NativeWorkerSceneHost {
           records,
         );
       }
-      if (options)
-        for (const target of targetSnapshots) {
-          target.sourceRecords = nativeWorkerOutputRecords(
-            target.sourceRecords,
-            nativeOutputSizes,
-          );
-          if (target.fillLocalSourceRecords)
-            target.fillLocalSourceRecords = nativeWorkerOutputRecords(
-              target.fillLocalSourceRecords,
-              nativeOutputSizes,
-            );
-          if (target.fillPhases)
-            for (const key of Object.keys(target.fillPhases) as Array<
-              keyof NonNullable<NativeWorkerEffectTarget["fillPhases"]>
-            >)
-              target.fillPhases[key] = nativeWorkerOutputRecords(
-                target.fillPhases[key],
-                nativeOutputSizes,
-              );
-        }
       const rawRootRecords = await this.provider.readScene(
         undefined,
         "scene-presentation",
@@ -1160,9 +1383,11 @@ export class NativeWorkerSceneHost {
           : `root:epoch:${sourceEpoch}`,
         rawRootRecords,
       );
-      const normalizedRootRecords = options
-        ? nativeWorkerOutputRecords(allRootRecords, nativeOutputSizes)
-        : allRootRecords;
+      const normalizedRootRecords = nativeWorkerOutputSceneRecords(
+        targetSnapshots,
+        allRootRecords,
+        nativeOutputSizes,
+      );
       const selected = options?.selectedRoots
         ? new Set(finalRootRecords)
         : null;
@@ -1172,6 +1397,8 @@ export class NativeWorkerSceneHost {
           )
         : normalizedRootRecords;
       const { assets, requiredAssets, revisions } = snapshot.finish();
+      const sourceClock = this.clock();
+      const cadence = this.sceneCadence();
       const scene: NativeWorkerScene = {
         sceneId: this.worker.sceneId,
         generation,
@@ -1182,9 +1409,11 @@ export class NativeWorkerSceneHost {
         height,
         pixelRatio,
         colorSpace: "srgb",
-        clock: this.snapshotClock(viewport, !!options),
+        frameRateTarget: cadence.frameRateTarget,
+        compact: cadence.compact,
+        clock: this.snapshotClock(viewport, !!options, sourceClock),
         requiredAssets,
-        definitions: this.entries.map((entry) => entry.definition),
+        definitions: nativeWorkerDefinitions(this.entries),
         instances: this.entries.map((entry) => entry.instance),
         targets: targetSnapshots,
         records,
@@ -1206,6 +1435,7 @@ export class NativeWorkerSceneHost {
         generation,
         sourceEpoch: sourceEpoch!,
         authoredEpoch: authoredEpoch!,
+        clockIdentity: this.clockIdentity(sourceClock),
         rootWidth,
         rootHeight,
         targetEpochs: new Map(
@@ -1247,15 +1477,34 @@ export class NativeWorkerSceneHost {
   }
 
   private async sendSnapshot(): Promise<void> {
+    const camera = this.cameraCandidate();
     if (this.cameraInFlightGeneration !== null) {
-      const { pixelRatio } = this.sceneGeometry();
-      if (this.currentCameraSource(pixelRatio)) {
-        this.cameraUpdatePending = true;
+      if (camera) {
+        const pendingScene = this.scenes.get(this.cameraInFlightGeneration);
+        const pendingPublication = this.staged.get(
+          this.cameraInFlightGeneration,
+        );
+        this.cameraUpdatePending = !(
+          this.publicationWaiters.size === 0 &&
+          pendingScene &&
+          pendingPublication &&
+          this.sameCamera(camera, pendingScene, pendingPublication)
+        );
         return;
       }
       this.clearCameraSubmission();
     }
-    const cameraSnapshot = this.reprojectSnapshot();
+    if (
+      camera &&
+      this.publicationWaiters.size === 0 &&
+      this.sameCamera(
+        camera,
+        camera.committed.scene,
+        camera.committed.publication,
+      )
+    )
+      return;
+    const cameraSnapshot = camera ? this.reprojectSnapshot(camera) : null;
     const { scene, assets, revisions, publication } =
       cameraSnapshot ?? (await this.captureSnapshot());
     const generation = scene.generation;
@@ -1359,7 +1608,7 @@ export class NativeWorkerSceneHost {
     generation: number,
     isExport: boolean,
   ): Promise<string> {
-    if (!(entry.target instanceof HTMLElement))
+    if (!isNativeHtmlElement(entry.target))
       throw new NativeSourceError(
         "source-inline-svg",
         "An SVG Fill uses vector coverage rather than a text mask.",
@@ -1467,60 +1716,71 @@ export class NativeWorkerSceneHost {
       this.requestUpdate();
       return;
     }
-    const body = document.body;
-    const paintedChildren = new Set<Element>();
-    for (const record of publication.rootRecords) {
-      const root = scenePaintRoot(record.node, body);
-      if (root && root !== this.canvas && !root.matches(OMIT_SCENE_CHILD))
-        paintedChildren.add(root);
-    }
-    const authoredOpacities = new Map<Element, string>();
-    for (const child of paintedChildren) {
-      const opacity =
-        child.getAttribute("data-an-native-authored-opacity") ??
-        getComputedStyle(child).opacity;
-      const value = Number(opacity);
-      if (
-        !opacity.trim() ||
-        !Number.isFinite(value) ||
-        value < 0 ||
-        value > 1
-      ) {
-        this.onFailure(
-          new NativeSourceError(
-            "worker-scene-opacity-unreadable",
-            "The native worker scene has unreadable authored opacity.",
-          ),
-        );
-        return;
+    const cameraOnly = this.canReuseCommittedPresentation(publication);
+    if (!cameraOnly) {
+      const body = document.body;
+      const paintedChildren = new Set<Element>();
+      for (const record of publication.rootRecords) {
+        const root = scenePaintRoot(record.node, body);
+        if (root && root !== this.canvas && !root.matches(OMIT_SCENE_CHILD))
+          paintedChildren.add(root);
       }
-      authoredOpacities.set(child, opacity);
-    }
-    for (const old of this.suppressed) {
-      if (paintedChildren.has(old)) continue;
-      old.removeAttribute("data-an-native-scene-suppressed");
-      old.removeAttribute("data-an-native-authored-opacity");
-      this.suppressed.delete(old);
-    }
-    for (const child of paintedChildren) {
-      if (!child.hasAttribute("data-an-native-authored-opacity")) {
-        child.setAttribute(
-          "data-an-native-authored-opacity",
-          authoredOpacities.get(child)!,
-        );
+      const authoredOpacities = new Map<Element, string>();
+      for (const child of paintedChildren) {
+        const opacity =
+          child.getAttribute("data-an-native-authored-opacity") ??
+          getComputedStyle(child).opacity;
+        const value = Number(opacity);
+        if (
+          !opacity.trim() ||
+          !Number.isFinite(value) ||
+          value < 0 ||
+          value > 1
+        ) {
+          this.onFailure(
+            new NativeSourceError(
+              "worker-scene-opacity-unreadable",
+              "The native worker scene has unreadable authored opacity.",
+            ),
+          );
+          return;
+        }
+        authoredOpacities.set(child, opacity);
+      }
+      for (const old of this.suppressed) {
+        if (paintedChildren.has(old)) continue;
+        old.removeAttribute("data-an-native-scene-suppressed");
+        old.removeAttribute("data-an-native-authored-opacity");
+        this.suppressed.delete(old);
+      }
+      for (const child of paintedChildren) {
+        if (!child.hasAttribute("data-an-native-authored-opacity")) {
+          child.setAttribute(
+            "data-an-native-authored-opacity",
+            authoredOpacities.get(child)!,
+          );
+        }
+        child.setAttribute("data-an-native-scene-suppressed", "");
+        this.suppressed.add(child);
       }
-      child.setAttribute("data-an-native-scene-suppressed", "");
-      this.suppressed.add(child);
     }
     const presentedScene = this.scenes.get(publication.generation);
     if (presentedScene) {
-      this.canvas.style.left = `${presentedScene.viewport.x}px`;
-      this.canvas.style.top = `${presentedScene.viewport.y}px`;
-      this.canvas.style.width = `${presentedScene.viewport.width}px`;
-      this.canvas.style.height = `${presentedScene.viewport.height}px`;
+      const { style } = this.canvas;
+      const { viewport } = presentedScene;
+      const left = `${viewport.x}px`;
+      const top = `${viewport.y}px`;
+      const width = `${viewport.width}px`;
+      const height = `${viewport.height}px`;
+      if (style.left !== left) style.left = left;
+      if (style.top !== top) style.top = top;
+      if (style.width !== width) style.width = width;
+      if (style.height !== height) style.height = height;
+    }
+    if (!cameraOnly) {
+      this.canvas.style.visibility = "visible";
+      document.documentElement.setAttribute("data-an-native-scene-managed", "");
     }
-    this.canvas.style.visibility = "visible";
-    document.documentElement.setAttribute("data-an-native-scene-managed", "");
     this.committed = publication;
     this.committedSceneSnapshot =
       this.scenes.get(publication.generation) ?? null;
@@ -1529,18 +1789,20 @@ export class NativeWorkerSceneHost {
       this.cameraUpdatePending;
     if (this.cameraInFlightGeneration === publication.generation)
       this.clearCameraSubmission();
-    for (const entry of this.entries) {
-      entry.target.setAttribute("data-an-native-status", "ready");
-      entry.target.setAttribute("data-an-native-backend", "webgpu-worker");
-      entry.target.removeAttribute("data-an-native-error");
-      entry.target.removeAttribute("data-an-native-error-message");
-    }
+    if (!cameraOnly)
+      for (const entry of this.entries) {
+        entry.target.setAttribute("data-an-native-status", "ready");
+        entry.target.setAttribute("data-an-native-backend", "webgpu-worker");
+        entry.target.removeAttribute("data-an-native-error");
+        entry.target.removeAttribute("data-an-native-error-message");
+      }
     for (const generation of this.staged.keys())
       if (generation <= publication.generation) this.staged.delete(generation);
     for (const generation of this.scenes.keys())
       if (generation < publication.generation) this.scenes.delete(generation);
     this.onCommitted(publication, {
       timeSeconds: message.timeSeconds,
+      contentChanged: !cameraOnly,
       committedInstances: message.committedInstances,
     });
     if (drainCamera) this.requestUpdate();
@@ -1562,6 +1824,41 @@ export class NativeWorkerSceneHost {
     }
   }
 
+  private canReuseCommittedPresentation(publication: Publication): boolean {
+    const committed = this.committed;
+    if (
+      !committed ||
+      committed.sourceEpoch !== publication.sourceEpoch ||
+      committed.authoredEpoch !== publication.authoredEpoch ||
+      committed.rootWidth !== publication.rootWidth ||
+      committed.rootHeight !== publication.rootHeight ||
+      committed.targetEpochs !== publication.targetEpochs ||
+      committed.rootRecords !== publication.rootRecords ||
+      committed.payloads !== publication.payloads ||
+      this.canvas.style.visibility !== "visible" ||
+      !document.documentElement.hasAttribute("data-an-native-scene-managed")
+    )
+      return false;
+    for (const entry of this.entries) {
+      if (
+        entry.target.getAttribute("data-an-native-status") !== "ready" ||
+        entry.target.getAttribute("data-an-native-backend") !==
+          "webgpu-worker" ||
+        entry.target.hasAttribute("data-an-native-error") ||
+        entry.target.hasAttribute("data-an-native-error-message")
+      )
+        return false;
+    }
+    for (const child of this.suppressed)
+      if (
+        !child.isConnected ||
+        !child.hasAttribute("data-an-native-scene-suppressed") ||
+        !child.hasAttribute("data-an-native-authored-opacity")
+      )
+        return false;
+    return true;
+  }
+
   committedScene(): {
     scene: NativeWorkerScene;
     publication: Publication;
@@ -1581,6 +1878,7 @@ export class NativeWorkerSceneHost {
     window.removeEventListener("scroll", this.requestUpdate, true);
     window.removeEventListener("resize", this.requestUpdate);
     this.worker.dispose();
+    this.inputAssets.dispose();
     this.provider.dispose();
     for (const state of this.targets.values()) {
       state.provider.dispose();
@@ -1789,6 +2087,7 @@ export class NativeWorkerSceneHost {
     window.removeEventListener("scroll", this.requestUpdate, true);
     window.removeEventListener("resize", this.requestUpdate);
     this.worker.dispose();
+    this.inputAssets.dispose();
     this.provider.dispose();
     for (const state of this.targets.values()) {
       state.provider.dispose();