@agent-native/core-corpus 0.214.0 → 0.217.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,11 +19,18 @@ 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,
   NativeSourceError,
+  NativeSourceCapabilityError,
   nativeTargetOverflowInsets,
   nativeTextFlowUsesDocumentFont,
   paintNativeTextFlow,
@@ -27,13 +39,24 @@ 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 class NativeWorkerSceneSourceError extends NativeSourceError {
+  constructor(readonly captureFailure: NativeSourceCapabilityError) {
+    super("worker-scene-source-unsupported", captureFailure.message);
+  }
+}
+
 export type NativeWorkerSceneEntry = {
   instance: EffectInstance;
   definition: EffectDefinition;
@@ -41,6 +64,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 +154,18 @@ type Publication = {
   targetEpochs: Map<string, { source: number; authored: number }>;
   rootRecords: readonly NativeSourceRecord[];
   payloads: Map<string, { payload: string; definitionHash: string }>;
+  authoredPayloads: 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,21 +192,68 @@ 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 nativeWorkerTargetDrawable(
+  rect: Pick<DOMRect, "x" | "y" | "width" | "height">,
+): boolean {
+  if (
+    ![rect.x, rect.y, rect.width, rect.height].every(Number.isFinite) ||
+    rect.width < 0 ||
+    rect.height < 0
+  )
+    throw new NativeSourceError(
+      "worker-target-geometry-invalid",
+      "A native effect target has unavailable or oversized geometry.",
+    );
+  return rect.width > 0 && rect.height > 0;
+}
+
 function nativeWorkerTargetGeometry(
-  target: HTMLElement | SVGSVGElement,
+  rect: DOMRect,
   pixelRatio: number,
   cssWidth: number,
   cssHeight: number,
 ): { width: number; height: number; rect: NativeWorkerEffectTarget["rect"] } {
-  const rect = target.getBoundingClientRect();
   const width = Math.max(1, Math.ceil(cssWidth * pixelRatio));
   const height = Math.max(1, Math.ceil(cssHeight * pixelRatio));
   if (
     ![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 +276,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 +312,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 +347,13 @@ 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,
+    private readonly hasPresentationToRetire?: () => boolean,
+    private readonly beforeCommit?: () => void,
   ) {
     const body = document.body;
     if (!body)
@@ -203,7 +368,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",
@@ -306,26 +475,36 @@ export class NativeWorkerSceneHost {
       this.targets.delete(id);
     }
     this.entries = [...entries];
-    for (const target of this.markedTargets) {
-      target.removeAttribute("data-an-native-fill-instance");
-      target.removeAttribute("data-an-native-layer-instance");
-    }
-    this.markedTargets.clear();
     for (const entry of entries) {
       const existing = this.targets.get(entry.instance.id);
       if (existing) existing.entry = entry;
       else this.targets.set(entry.instance.id, this.createTarget(entry));
     }
+    this.restoreEntryMarkersAndVisibility();
+    this.requestUpdate();
+  }
+
+  private restoreEntryMarkersAndVisibility(): void {
+    for (const target of this.markedTargets) {
+      target.removeAttribute("data-an-native-fill-instance");
+      target.removeAttribute("data-an-native-layer-instance");
+    }
+    this.markedTargets.clear();
     const topFill = new Map<Element, string>();
     const topLayer = new Map<Element, string>();
-    for (const entry of entries) {
+    for (const entry of this.entries) {
       if (entry.instance.placement === "fill")
         topFill.set(entry.target, entry.instance.id);
       if (entry.instance.placement === "layer")
         topLayer.set(entry.target, entry.instance.id);
     }
-    for (const entry of entries) {
-      const state = this.targets.get(entry.instance.id)!;
+    for (const entry of this.entries) {
+      const state = this.targets.get(entry.instance.id);
+      if (!state)
+        throw new NativeWorkerHostError(
+          "worker-instance-state-missing",
+          "A native worker instance is unavailable.",
+        );
       this.markedTargets.add(entry.target);
       if (topFill.get(entry.target) === entry.instance.id)
         entry.target.setAttribute(
@@ -345,7 +524,6 @@ export class NativeWorkerSceneHost {
           ? "visible"
           : "hidden";
     }
-    this.requestUpdate();
   }
 
   setEntriesAndWait(
@@ -414,8 +592,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 +634,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 +668,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 +687,7 @@ export class NativeWorkerSceneHost {
     pixelRatio: number,
   ): ReturnType<NativeWorkerSceneHost["committedScene"]> {
     const committed = this.committedScene();
+    const cadence = this.sceneCadence();
     if (
       !this.visible ||
       this.disposed ||
@@ -507,11 +702,15 @@ export class NativeWorkerSceneHost {
       !Number.isFinite(pixelRatio) ||
       pixelRatio <= 0 ||
       Math.abs(pixelRatio - committed.scene.pixelRatio) > 0.000001 ||
-      this.entries.length !== committed.publication.payloads.size
+      (committed.scene.frameRateTarget ?? 60) !== cadence.frameRateTarget ||
+      (committed.scene.compact ?? false) !== cadence.compact ||
+      this.entries.length !== committed.publication.authoredPayloads.size
     )
       return null;
     for (const entry of this.entries) {
-      const expected = committed.publication.payloads.get(entry.instance.id);
+      const expected = committed.publication.authoredPayloads.get(
+        entry.instance.id,
+      );
       const epoch = committed.publication.targetEpochs.get(entry.instance.id);
       const state = this.targets.get(entry.instance.id);
       const target = committed.scene.targets.find(
@@ -525,11 +724,15 @@ export class NativeWorkerSceneHost {
         !state ||
         state.entry.target !== entry.target ||
         state.provider.sourceEpoch?.() !== epoch.source ||
-        state.provider.authoredSourceEpoch?.() !== epoch.authored ||
-        !target
+        state.provider.authoredSourceEpoch?.() !== epoch.authored
       )
         return null;
       const rect = entry.target.getBoundingClientRect();
+      if (!nativeWorkerTargetDrawable(rect)) {
+        if (target) return null;
+        continue;
+      }
+      if (!target) return null;
       if (
         Math.abs(rect.x - target.rect.x) > 0.001 ||
         Math.abs(rect.y - target.rect.y) > 0.001 ||
@@ -541,12 +744,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 +760,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 +814,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,
+      },
     };
   }
 
@@ -600,12 +850,13 @@ export class NativeWorkerSceneHost {
   }
 
   private async updateLoop(): Promise<void> {
-    if (this.disposed || this.updating) return;
+    if (this.disposed || this.holdingLastFrame || this.updating) return;
     this.updating = true;
     try {
       while (
         this.dirty &&
         !this.disposed &&
+        !this.holdingLastFrame &&
         !this.capturingExport &&
         this.visible
       ) {
@@ -613,6 +864,7 @@ export class NativeWorkerSceneHost {
         try {
           await this.sendSnapshot();
         } catch (error) {
+          if (this.disposed || this.holdingLastFrame) return;
           this.assetRevisions.clear();
           this.onFailure(
             error instanceof Error ? error : new Error(String(error)),
@@ -650,8 +902,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 +925,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 +946,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",
@@ -724,7 +974,16 @@ export class NativeWorkerSceneHost {
       >();
       const extents = new Map<string, NativeEffectExtentPlan>();
       const previousByTarget = new Map<Element, string>();
-      for (const entry of this.entries) {
+      const targetRects = new Map<HTMLElement | SVGSVGElement, DOMRect>();
+      const drawableEntries = this.entries.filter((entry) => {
+        let rect = targetRects.get(entry.target);
+        if (!rect) {
+          rect = entry.target.getBoundingClientRect();
+          targetRects.set(entry.target, rect);
+        }
+        return nativeWorkerTargetDrawable(rect);
+      });
+      for (const entry of drawableEntries) {
         const state = this.targets.get(entry.instance.id);
         if (!state || state.entry.target !== entry.target)
           throw new NativeSourceError(
@@ -732,14 +991,14 @@ export class NativeWorkerSceneHost {
             "A native worker target changed during scene capture.",
           );
         const layout = this.layout(entry.target);
-        const visible = entry.target.getBoundingClientRect();
+        const visible = targetRects.get(entry.target)!;
         const displayScale = Math.max(
           visible.width / layout.width,
           visible.height / layout.height,
         );
         const targetPixelRatio = pixelRatio * displayScale;
         const geometry = nativeWorkerTargetGeometry(
-          entry.target,
+          visible,
           targetPixelRatio,
           layout.width,
           layout.height,
@@ -759,8 +1018,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 +1108,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 +1213,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,18 +1256,19 @@ export class NativeWorkerSceneHost {
           pixelRatio: targetPixelRatio,
           sourceRecords,
           ...coverage,
+          ...(Object.keys(inputAssetIds).length ? { inputAssetIds } : {}),
           ...(cornerRadii ? { cornerRadii } : {}),
           ...(textMaskAssetId ? { textMaskAssetId } : {}),
           ...(fillPhases ? { fillPhases } : {}),
         });
       }
-      for (const entry of this.entries) {
+      for (const entry of drawableEntries) {
         if (entry.instance.placement !== "backdrop") continue;
-        const owners = this.entries.filter(
+        const owners = drawableEntries.filter(
           (candidate, index) =>
             (candidate.instance.placement === "layer" ||
               (candidate.instance.placement === "fill" &&
-                this.entries.every(
+                drawableEntries.every(
                   (other, otherIndex) =>
                     otherIndex <= index ||
                     other.instance.placement !== "fill" ||
@@ -1013,7 +1306,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,30 +1387,17 @@ 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",
-      );
+      let rawRootRecords: NativeSourceRecord[];
+      try {
+        rawRootRecords = await this.provider.readScene(
+          undefined,
+          "scene-presentation",
+        );
+      } catch (error) {
+        if (!options && error instanceof NativeSourceCapabilityError)
+          throw new NativeWorkerSceneSourceError(error);
+        throw error;
+      }
       if (
         this.provider.needsContinuousFrames() ||
         (await this.provider.replaySafety(
@@ -1160,9 +1440,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 +1454,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,10 +1466,12 @@ 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),
-        instances: this.entries.map((entry) => entry.instance),
+        definitions: nativeWorkerDefinitions(drawableEntries),
+        instances: drawableEntries.map((entry) => entry.instance),
         targets: targetSnapshots,
         records,
         ...(selected ? { backdropRecords: normalizedRootRecords } : {}),
@@ -1206,6 +1492,7 @@ export class NativeWorkerSceneHost {
         generation,
         sourceEpoch: sourceEpoch!,
         authoredEpoch: authoredEpoch!,
+        clockIdentity: this.clockIdentity(sourceClock),
         rootWidth,
         rootHeight,
         targetEpochs: new Map(
@@ -1229,6 +1516,15 @@ export class NativeWorkerSceneHost {
         ),
         rootRecords: rawRootRecords,
         payloads: new Map(
+          drawableEntries.map((entry) => [
+            entry.instance.id,
+            {
+              payload: JSON.stringify(entry.instance),
+              definitionHash: entry.definitionHash,
+            },
+          ]),
+        ),
+        authoredPayloads: new Map(
           this.entries.map((entry) => [
             entry.instance.id,
             {
@@ -1247,15 +1543,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 +1674,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 +1782,77 @@ export class NativeWorkerSceneHost {
       this.requestUpdate();
       return;
     }
-    const body = document.body;
+    const replacedPresentation = this.hasPresentationToRetire?.() === true;
+    const cameraOnly =
+      !replacedPresentation && this.canReuseCommittedPresentation(publication);
     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;
+    if (!cameraOnly) {
+      const body = document.body;
+      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);
+      }
+      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);
       }
-      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)!,
-        );
+    this.beforeCommit?.();
+    if (replacedPresentation) this.restoreEntryMarkersAndVisibility();
+    if (!cameraOnly) {
+      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,23 +1861,25 @@ 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();
     for (const waiter of this.publicationWaiters) {
-      const expected = publication.payloads.get(waiter.instanceId);
+      const expected = publication.authoredPayloads.get(waiter.instanceId);
       const committedScene = this.committedSceneSnapshot;
       if (
         publication.generation < waiter.minimumGeneration ||
@@ -1562,6 +1896,42 @@ 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 ||
+      committed.authoredPayloads !== publication.authoredPayloads ||
+      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 +1951,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();
@@ -1683,25 +2054,32 @@ export class NativeWorkerSceneHost {
         scene.authoredEpoch === hiddenAuthoredEpoch &&
         this.provider.sourceEpoch?.() === scene.sourceEpoch &&
         this.provider.authoredSourceEpoch?.() === hiddenAuthoredEpoch &&
-        scene.instances.length === hiddenPayloads.length &&
-        scene.targets.length === hiddenPayloads.length &&
+        this.entries.length === hiddenPayloads.length &&
+        captured.publication.authoredPayloads.size === hiddenPayloads.length &&
         !hiddenPayloads.some((expected, index) => {
           const entry = this.entries[index];
-          const target = scene.targets[index];
-          const instance = scene.instances[index];
+          const target = scene.targets.find(
+            (item) => item.instanceId === expected.id,
+          );
+          const instance = scene.instances.find(
+            (item) => item.id === expected.id,
+          );
+          const payload = captured.publication.authoredPayloads.get(
+            expected.id,
+          );
           const provider = this.targets.get(expected.id)?.provider;
           const capturedEpoch = captured.publication.targetEpochs.get(
             expected.id,
           );
           return (
             !entry ||
-            !target ||
-            !instance ||
-            instance.id !== expected.id ||
-            target.instanceId !== expected.id ||
-            JSON.stringify(instance) !== expected.payload ||
+            !payload ||
+            payload.payload !== expected.payload ||
+            payload.definitionHash !== expected.definitionHash ||
+            !!target !== !!instance ||
+            (instance && JSON.stringify(instance) !== expected.payload) ||
             JSON.stringify(entry.instance) !== expected.payload ||
-            target.definitionHash !== expected.definitionHash ||
+            (target && target.definitionHash !== expected.definitionHash) ||
             entry.definitionHash !== expected.definitionHash ||
             !capturedEpoch ||
             provider?.sourceEpoch?.() !== capturedEpoch.source ||
@@ -1789,6 +2167,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();