@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/lib/render-layer/controller.d.ts

@@ -26,20 +26,22 @@ export declare class RenderLayerController<Props, Resources, Target extends obje
     private props;
     private needsRender;
     private needsResize;
+    private inputDeliveryGated;
     private inputGated;
     private candidate;
     private committed;
     private committedInteraction;
     private committedTargetDescriptors;
-    private readonly committedTargets;
+    private committedTargets;
     private readonly layerTarget;
     private committedPolicy;
     private resolverTransform;
     private resolverInverseTransform;
     private resolverBounds;
     private resolverSize;
+    private interactionGeneration;
     private resolutionErrorQueued;
-    private readonly inputNativeReleases;
+    private inputNativeReleases;
     private readonly resolverEntry;
     private readonly inputWinner;
     private lastTime;
@@ -51,7 +53,11 @@ export declare class RenderLayerController<Props, Resources, Target extends obje
     private invalidate;
     private settleInteraction;
     private finishCandidate;
-    /** Publishes one interaction snapshot only after its bitmap transaction wins. */
+    /** Prepares descriptors without mutating the current target identities or handlers. */
+    private prepareInteraction;
+    private adoptInteraction;
+    private finishPrepared;
+    /** Immediate fallback for callers without a root transaction. */
     private commitInteraction;
     private applyResolverGeometry;
     private refreshCommittedTargetGeometry;

package/dist/lib/render-layer/controller.js

@@ -1,4 +1,6 @@
+import { committedInstanceRootTransform, snapshotLayoutGeometry, stageLayoutTargetGeometry, stageLayoutTargetRetirement } from "../layout/geometry-publication.js";
 import { GLOBAL_STATE, getCurrentPibblInstance } from "../global-state.js";
+import { registerLayoutSuspensionResource, unregisterLayoutSuspensionResource } from "../layout/participation.js";
 import { getCurrentWorldTransform } from "../render-target.js";
 import {
   queueFrameCompletion,
@@ -11,7 +13,9 @@ import {
 import {
   createTarget,
   releaseTarget,
-  updateTarget
+  updateTarget,
+  normalizeHandlers,
+  prepareTargetUpdate
 } from "../events/registrations.js";
 import {
   hasResolverPointerCapture,
@@ -68,6 +72,10 @@ class RenderLayerController {
       clippingStack: [],
       resolveLocal: (x, y, output) => this.resolveLocal(x, y, output)
     };
+    const suspensionResource = {
+      suspendLayout: () => this.instance.paintEntries.delete(this.resolverEntry)
+    };
+    registerLayoutSuspensionResource(refs, suspensionResource);
     assertCapability();
     this.canvas = new OffscreenCanvas(1, 1);
     const controller = this;
@@ -83,7 +91,10 @@ class RenderLayerController {
         controller.invalidate(true);
       }
     });
-    refs.teardowns.add(() => this.dispose());
+    refs.teardowns.add(() => {
+      unregisterLayoutSuspensionResource(refs, suspensionResource);
+      this.dispose();
+    });
   }
   definition;
   instance = getCurrentPibblInstance();
@@ -97,6 +108,7 @@ class RenderLayerController {
   props;
   needsRender = true;
   needsResize = true;
+  inputDeliveryGated = false;
   inputGated = true;
   candidate;
   committed;
@@ -114,6 +126,7 @@ class RenderLayerController {
   resolverInverseTransform = new DOMMatrix();
   resolverBounds = new Path2D();
   resolverSize;
+  interactionGeneration = 0;
   resolutionErrorQueued = false;
   inputNativeReleases = /* @__PURE__ */ new Map();
   resolverEntry;
@@ -125,6 +138,10 @@ class RenderLayerController {
     const propsChanged = !initial && !sameProps(this.props, props);
     const sizeChanged = !sameSize(this.size, size);
     const policyChanged = !samePolicy(this.committedPolicy, policy);
+    if (initial || propsChanged || sizeChanged || this.needsRender) {
+      this.inputGated = true;
+      this.inputDeliveryGated = true;
+    }
     this.size = size;
     this.publishResolver(size);
     if (sizeChanged) {
@@ -198,6 +215,7 @@ class RenderLayerController {
       const stagedPolicy = snapshotPolicy(policy);
       const candidate = this.canvas.transferToImageBitmap();
       this.candidate?.bitmap.close();
+      if (this.candidate?.prepared) this.finishPrepared(this.candidate.prepared, false);
       const stagedCandidate = {
         bitmap: candidate,
         interaction,
@@ -205,10 +223,23 @@ class RenderLayerController {
       };
       this.candidate = stagedCandidate;
       const transaction2 = GLOBAL_STATE.renderTransaction;
-      transaction2?.onFinish(
-        (success) => this.finishCandidate(stagedCandidate, success)
-      );
-      if (!transaction2) this.finishCandidate(stagedCandidate, true);
+      if (transaction2?.onAdopt) {
+        try {
+          stagedCandidate.prepared = this.prepareInteraction(interaction, stagedPolicy);
+        } catch (error) {
+          this.finishCandidate(stagedCandidate, false);
+          throw error;
+        }
+        transaction2.onAdopt(() => this.finishCandidate(stagedCandidate, true));
+        transaction2.onFinish((success) => {
+          if (!success) {
+            this.finishCandidate(stagedCandidate, false);
+          } else if (stagedCandidate.prepared) this.finishPrepared(stagedCandidate.prepared, true);
+        });
+      } else {
+        transaction2?.onFinish((success) => this.finishCandidate(stagedCandidate, success));
+        if (!transaction2) this.finishCandidate(stagedCandidate, true);
+      }
       ctx.drawImage(
         candidate,
         0,
@@ -223,32 +254,37 @@ class RenderLayerController {
       return;
     }
     const transaction = GLOBAL_STATE.renderTransaction;
-    transaction?.onFinish((success) => {
-      if (success && !this.disposed) {
-        if (policyChanged && this.committedInteraction) {
-          this.commitInteraction(
-            {
-              snapshot: this.committedInteraction,
-              targets: this.committedTargetDescriptors,
-              transform: this.resolverTransform,
-              clippingStack: this.resolverEntry.clippingStack
-            },
-            snapshotPolicy(policy)
-          );
+    if (transaction?.onAdopt && this.committedInteraction) {
+      const prepared = this.prepareInteraction({
+        snapshot: this.committedInteraction,
+        targets: this.committedTargetDescriptors,
+        transform: this.resolverTransform,
+        clippingStack: this.resolverEntry.clippingStack
+      }, snapshotPolicy(policy));
+      transaction.onAdopt(() => {
+        if (!this.disposed) this.adoptInteraction(prepared);
+      });
+      transaction.onFinish((success) => {
+        this.finishPrepared(prepared, success);
+      });
+    } else {
+      transaction?.onFinish((success) => {
+        if (success && !this.disposed) {
+          if (policyChanged && this.committedInteraction) this.commitInteraction({
+            snapshot: this.committedInteraction,
+            targets: this.committedTargetDescriptors,
+            transform: this.resolverTransform,
+            clippingStack: this.resolverEntry.clippingStack
+          }, snapshotPolicy(policy));
+          this.refreshCommittedTargetGeometry();
         }
-        this.refreshCommittedTargetGeometry();
-      }
-    });
-    if (!transaction && policyChanged && this.committedInteraction) {
-      this.commitInteraction(
-        {
-          snapshot: this.committedInteraction,
-          targets: this.committedTargetDescriptors,
-          transform: this.resolverTransform,
-          clippingStack: this.resolverEntry.clippingStack
-        },
-        snapshotPolicy(policy)
-      );
+      });
+      if (!transaction && policyChanged && this.committedInteraction) this.commitInteraction({
+        snapshot: this.committedInteraction,
+        targets: this.committedTargetDescriptors,
+        transform: this.resolverTransform,
+        clippingStack: this.resolverEntry.clippingStack
+      }, snapshotPolicy(policy));
     }
     this.drawCommitted(ctx, size);
   }
@@ -261,7 +297,6 @@ class RenderLayerController {
       this.resolverSize = size;
     }
     this.resolverTransform = getCurrentWorldTransform();
-    this.resolverInverseTransform = this.resolverTransform.inverse();
     this.resolverEntry.transform = this.resolverTransform;
     this.resolverEntry.clippingStack = Array.from(GLOBAL_STATE.clippingStack);
     this.instance.paintEntries.delete(this.resolverEntry);
@@ -331,71 +366,130 @@ class RenderLayerController {
   }
   finishCandidate(candidate, success) {
     if (this.candidate !== candidate) return;
-    this.candidate = void 0;
     if (!success || this.disposed) {
+      this.candidate = void 0;
+      this.needsRender = true;
+      this.inputGated = true;
       candidate.bitmap.close();
+      if (candidate.prepared) this.finishPrepared(candidate.prepared, false);
       return;
     }
-    this.commitInteraction(candidate.interaction, candidate.policy);
+    if (candidate.prepared) this.adoptInteraction(candidate.prepared);
+    else this.commitInteraction(candidate.interaction, candidate.policy);
     this.committed?.close();
     this.committed = candidate.bitmap;
+    this.candidate = void 0;
     this.resolutionErrorQueued = false;
     this.inputGated = false;
+    this.inputDeliveryGated = false;
   }
-  /** Publishes one interaction snapshot only after its bitmap transaction wins. */
-  commitInteraction(interaction, policy) {
-    const retained = /* @__PURE__ */ new Set();
-    for (const descriptor of policy.pointerEvents === "none" ? [] : interaction.targets) {
-      if (descriptor.pointerEvents === "none") continue;
-      retained.add(descriptor.target);
-      let registration = this.committedTargets.get(descriptor.target);
-      if (!registration) {
-        registration = createTarget(
-          this.instance,
-          this.refs,
-          this.committedTargets.size + 1
-        );
-        this.committedTargets.set(descriptor.target, registration);
-      }
-      updateTarget(
-        registration,
-        descriptor.handlers ?? {},
-        {
+  /** Prepares descriptors without mutating the current target identities or handlers. */
+  prepareInteraction(interaction, policy) {
+    const targets = /* @__PURE__ */ new Map();
+    const created = [];
+    const registrations = [];
+    const inputLeases = /* @__PURE__ */ new Map();
+    const addedInputLeases = [];
+    const transaction = GLOBAL_STATE.renderTransaction ?? this.instance.eventRoot.renderTransaction;
+    const stage = (target, bounds, focusable) => {
+      if (transaction) stageLayoutTargetGeometry(transaction, target, { bounds, transform: interaction.transform });
+      this.instance.eventRoot.focusPolicy?.observeTransactionalTarget?.(target, focusable);
+    };
+    try {
+      if (policy.pointerEvents !== "none") for (const descriptor of interaction.targets) {
+        if (descriptor.pointerEvents === "none") continue;
+        let target = this.committedTargets.get(descriptor.target);
+        if (!target) {
+          target = createTarget(this.instance, this.refs, this.committedTargets.size + created.length + 1);
+          created.push(target);
+        }
+        targets.set(descriptor.target, target);
+        registrations.push(prepareTargetUpdate(target, descriptor.handlers ?? {}, {
           path: new Path2D(),
           cursor: descriptor.cursor,
           keyboardFocusable: descriptor.keyboardFocusable,
           keyboardNavigationBounds: descriptor.keyboardNavigationBounds
-        },
-        true
-      );
-      this.applyResolverGeometry(registration, interaction);
-      this.observeTransactionalFocusTarget(registration);
-    }
-    for (const [identity, registration] of this.committedTargets) {
-      if (retained.has(identity)) continue;
-      releaseTarget(registration);
-      this.committedTargets.delete(identity);
-    }
-    if (policy.pointerEvents !== "none" && policy.missBehavior === "target-layer") {
-      updateTarget(
-        this.layerTarget,
-        { onClick: STRUCTURAL_CLICK_ELIGIBILITY },
-        {
-          path: new Path2D(),
-          keyboardFocusable: policy.keyboardFocusable,
-          keyboardNavigationBounds: policy.keyboardNavigationBounds
-        },
-        true
-      );
-      this.applyResolverGeometry(this.layerTarget, interaction);
-      this.observeTransactionalFocusTarget(this.layerTarget);
-    } else {
-      releaseTarget(this.layerTarget);
+        }, interaction.transform, interaction.clippingStack));
+        const handlers = normalizeHandlers(descriptor.handlers ?? {});
+        stage(target, descriptor.keyboardNavigationBounds, descriptor.keyboardFocusable ?? Boolean(handlers.click || handlers.keydown || handlers.keyup));
+      }
+      const layerEnabled = policy.pointerEvents !== "none" && policy.missBehavior === "target-layer";
+      stage(this.layerTarget, policy.keyboardNavigationBounds, layerEnabled && (policy.keyboardFocusable ?? true));
+      if (layerEnabled) registrations.push(prepareTargetUpdate(this.layerTarget, { onClick: STRUCTURAL_CLICK_ELIGIBILITY }, {
+        path: new Path2D(),
+        keyboardFocusable: policy.keyboardFocusable,
+        keyboardNavigationBounds: policy.keyboardNavigationBounds
+      }, interaction.transform, interaction.clippingStack));
+      const hub = this.instance.eventRoot.nativeListeners;
+      const types = interaction.snapshot.onInput ? RESOLVER_INPUT_TYPES : hasResolverPointerCapture(this.inputWinner) ? RESOLVER_CAPTURE_INPUT_TYPES : [];
+      if (hub) for (const type of types) {
+        let lease = this.inputNativeReleases.get(type);
+        if (!lease) {
+          lease = hub.acquire(type);
+          addedInputLeases.push(lease);
+        }
+        inputLeases.set(type, lease);
+      }
+      const retired = [];
+      for (const [identity, target] of this.committedTargets) if (!targets.has(identity)) retired.push(target);
+      if (!layerEnabled && this.layerTarget.live) retired.push(this.layerTarget);
+      if (transaction) for (const target of retired) stageLayoutTargetRetirement(transaction, target);
+      return { interaction, policy, targets, created, retired, registrations, inputLeases, addedInputLeases, layerEnabled, inverse: interaction.transform.inverse() };
+    } catch (error) {
+      const errors = [error];
+      const release = (callback) => {
+        try {
+          callback();
+        } catch (releaseError) {
+          errors.push(releaseError);
+        }
+      };
+      for (const registration of registrations) release(() => registration.finish());
+      for (const lease of addedInputLeases) release(lease);
+      for (const target of created) release(() => releaseTarget(target));
+      if (errors.length > 1) throw new AggregateError(errors, "Render layer interaction preparation failed.", { cause: error });
+      throw error;
     }
+  }
+  adoptInteraction(prepared) {
+    const { interaction, policy } = prepared;
+    for (const registration of prepared.registrations) registration.adopt();
+    prepared.previousInputLeases = this.inputNativeReleases;
+    this.inputNativeReleases = prepared.inputLeases;
+    this.committedTargets = prepared.targets;
     this.committedInteraction = interaction.snapshot;
     this.committedTargetDescriptors = interaction.targets;
     this.committedPolicy = policy;
-    this.updateInputNativeOwnership(Boolean(interaction.snapshot.onInput));
+    this.resolverInverseTransform = prepared.inverse;
+    this.interactionGeneration++;
+    prepared.adopted = true;
+  }
+  finishPrepared(prepared, success) {
+    if (prepared.settled) return;
+    prepared.settled = true;
+    success = success && prepared.adopted === true;
+    const errors = [];
+    const finish = (callback) => {
+      try {
+        callback();
+      } catch (error) {
+        errors.push(error);
+      }
+    };
+    for (const registration of prepared.registrations) finish(() => registration.finish());
+    if (prepared.previousInputLeases) {
+      for (const [type, release] of prepared.previousInputLeases) if (!prepared.inputLeases.has(type)) finish(release);
+    } else if (!success) for (const release of prepared.addedInputLeases) finish(release);
+    for (const target of success ? prepared.retired : prepared.created) finish(() => releaseTarget(target));
+    if (success) for (const registration of prepared.registrations) finish(() => registration.notify());
+    if (errors.length === 1) throw errors[0];
+    if (errors.length) throw new AggregateError(errors, "Render layer registration completion failed.");
+  }
+  /** Immediate fallback for callers without a root transaction. */
+  commitInteraction(interaction, policy) {
+    const prepared = this.prepareInteraction(interaction, policy);
+    this.adoptInteraction(prepared);
+    this.finishPrepared(prepared, true);
   }
   applyResolverGeometry(target, interaction) {
     if (!target.paintEntry) return;
@@ -408,10 +502,40 @@ class RenderLayerController {
       transform: this.resolverTransform,
       clippingStack: this.resolverEntry.clippingStack
     };
-    for (const target of this.committedTargets.values()) {
-      this.applyResolverGeometry(target, interaction);
-      this.instance.eventRoot.focusPolicy?.observeTarget(target);
-      this.observeTransactionalFocusTarget(target);
+    if (this.committedPolicy.pointerEvents !== "none") {
+      for (const descriptor of this.committedTargetDescriptors) {
+        if (descriptor.pointerEvents === "none") continue;
+        const target = this.committedTargets.get(descriptor.target);
+        if (!target) continue;
+        if (!target.live) {
+          updateTarget(
+            target,
+            descriptor.handlers ?? {},
+            {
+              path: new Path2D(),
+              cursor: descriptor.cursor,
+              keyboardFocusable: descriptor.keyboardFocusable,
+              keyboardNavigationBounds: descriptor.keyboardNavigationBounds
+            },
+            true
+          );
+        }
+        this.applyResolverGeometry(target, interaction);
+        this.instance.eventRoot.focusPolicy?.observeTarget(target);
+        this.observeTransactionalFocusTarget(target);
+      }
+    }
+    if (this.committedPolicy.pointerEvents !== "none" && this.committedPolicy.missBehavior === "target-layer" && !this.layerTarget.live) {
+      updateTarget(
+        this.layerTarget,
+        { onClick: STRUCTURAL_CLICK_ELIGIBILITY },
+        {
+          path: new Path2D(),
+          keyboardFocusable: this.committedPolicy.keyboardFocusable,
+          keyboardNavigationBounds: this.committedPolicy.keyboardNavigationBounds
+        },
+        true
+      );
     }
     if (this.layerTarget.live) {
       this.applyResolverGeometry(this.layerTarget, interaction);
@@ -429,6 +553,13 @@ class RenderLayerController {
       return;
     }
     const state = this.resolveWinnerState(localX, localY);
+    if (state.generation !== this.interactionGeneration || state.geometryGeneration !== snapshotLayoutGeometry(this.instance).generation || this.disposed || this.inputDeliveryGated) {
+      output.disposition = PibblHitDisposition.Block;
+      output.target = null;
+      delete output.winner;
+      delete output.winnerState;
+      return;
+    }
     output.winner = this.inputWinner;
     output.winnerState = state;
     switch (state.hit.kind) {
@@ -457,6 +588,8 @@ class RenderLayerController {
           output.target = null;
           output.winnerState = {
             point: state.point,
+            generation: state.generation,
+            geometryGeneration: state.geometryGeneration,
             hit: Object.freeze({ kind: "block" })
           };
           this.reportUnknownTarget();
@@ -469,15 +602,20 @@ class RenderLayerController {
   }
   resolveWinnerState(localX, localY) {
     const point = Object.freeze({ x: localX, y: localY });
+    const generation = this.interactionGeneration;
+    const geometryGeneration = snapshotLayoutGeometry(this.instance).generation;
     if (this.inputGated || !this.committedInteraction) {
-      return { point, hit: Object.freeze({ kind: "block" }) };
+      return { point, generation, geometryGeneration, hit: Object.freeze({ kind: "block" }) };
     }
     const hit = this.committedInteraction.hitTest(point);
+    if (generation !== this.interactionGeneration || geometryGeneration !== snapshotLayoutGeometry(this.instance).generation || this.disposed || this.inputGated) {
+      return { point, generation, geometryGeneration, hit: Object.freeze({ kind: "block" }) };
+    }
     if (hit.kind === "target" && !this.committedTargets.has(hit.target)) {
       this.reportUnknownTarget();
-      return { point, hit: Object.freeze({ kind: "block" }) };
+      return { point, generation, geometryGeneration, hit: Object.freeze({ kind: "block" }) };
     }
-    return { point, hit };
+    return { point, hit, generation, geometryGeneration };
   }
   reportUnknownTarget() {
     if (this.resolutionErrorQueued) return;
@@ -490,14 +628,17 @@ class RenderLayerController {
   }
   deliverInput(type, rootPoint, originalEvent, resolvedState) {
     const snapshot = this.committedInteraction;
-    if (!snapshot?.onInput || this.disposed) return;
+    if (!snapshot?.onInput || this.disposed || this.inputDeliveryGated) return;
     let state = resolvedState;
+    if (state && (state.generation !== this.interactionGeneration || state.geometryGeneration !== snapshotLayoutGeometry(this.instance).generation)) return;
     if (!state) {
-      const local = this.resolverInverseTransform.transformPoint(
-        new DOMPoint(rootPoint.x, rootPoint.y)
-      );
+      const bridge = committedInstanceRootTransform(this.instance);
+      if (!bridge) return;
+      const ownerPoint = bridge.inverse().transformPoint(new DOMPoint(rootPoint.x, rootPoint.y));
+      const local = this.resolverInverseTransform.transformPoint(ownerPoint);
       state = this.resolveWinnerState(local.x, local.y);
     }
+    if (this.inputDeliveryGated || (state.generation !== this.interactionGeneration || state.geometryGeneration !== snapshotLayoutGeometry(this.instance).generation)) return;
     snapshot.onInput(
       Object.freeze({
         type,
@@ -536,27 +677,35 @@ class RenderLayerController {
   dispose() {
     if (this.disposed) return;
     this.disposed = true;
-    try {
-      if (this.created && this.definition.dispose) {
-        assertSynchronous(
-          this.definition.dispose(this.resources, this.context),
-          "dispose"
-        );
+    const errors = [];
+    const release = (callback) => {
+      try {
+        callback();
+      } catch (error) {
+        errors.push(error);
       }
-    } finally {
+    };
+    if (this.created && this.definition.dispose) release(() => assertSynchronous(
+      this.definition.dispose(this.resources, this.context),
+      "dispose"
+    ));
+    release(() => {
       this.canvas.width = this.canvas.height = 0;
-      this.candidate?.bitmap.close();
-      this.committed?.close();
-      for (const target of this.committedTargets.values())
-        releaseTarget(target);
-      this.committedTargets.clear();
-      releaseTarget(this.layerTarget);
-      releaseResolverInputWinner(this.inputWinner);
-      this.updateInputNativeOwnership(false);
-      this.candidate = void 0;
-      this.committed = void 0;
-      this.committedInteraction = void 0;
-    }
+    });
+    release(() => this.candidate?.bitmap.close());
+    if (this.candidate?.prepared) release(() => this.finishPrepared(this.candidate.prepared, false));
+    release(() => this.committed?.close());
+    for (const target of this.committedTargets.values()) release(() => releaseTarget(target));
+    this.committedTargets.clear();
+    release(() => releaseTarget(this.layerTarget));
+    release(() => releaseResolverInputWinner(this.inputWinner));
+    for (const lease of this.inputNativeReleases.values()) release(lease);
+    this.inputNativeReleases.clear();
+    this.candidate = void 0;
+    this.committed = void 0;
+    this.committedInteraction = void 0;
+    if (errors.length === 1) throw errors[0];
+    if (errors.length) throw new AggregateError(errors, "Render layer disposal failed.");
   }
 }
 function assertCapability() {