@pibbl/core 0.0.2 → 0.0.3-alpha.109.1

package/dist/lib/html/html-service.js

@@ -1,3 +1,6 @@
+import { HtmlNativeEvents } from "./html-events.js";
+import { stageLayoutHtmlGeometry } from "../layout/geometry-publication.js";
+import { isLayoutComponentSuspended, isLayoutInstanceSuspended } from "../layout/participation.js";
 import { GLOBAL_STATE } from "../global-state.js";
 import { withSignalWriteForbidden } from "../signals/graph.js";
 import { validateHtmlOverlay } from "./overlay-config.js";
@@ -21,6 +24,9 @@ class HtmlService {
   svg;
   viewport;
   disposed = false;
+  suspended = false;
+  projections;
+  nextSnapshots;
   rendered = /* @__PURE__ */ new Set();
   enterTransaction() {
     const transaction = this.root.renderTransaction;
@@ -29,12 +35,17 @@ class HtmlService {
     this.transaction = transaction;
     this.pending = new Map(this.snapshots);
     this.rendered = /* @__PURE__ */ new Set();
+    this.suspended = false;
+    transaction.onPreflight(() => this.prepare());
     transaction.onPublish(() => this.publish());
+    transaction.onAdopt(() => this.adopt());
     transaction.onFinish((success) => {
-      if (!success) this.reset();
+      if (!success && transaction.failed !== false) this.reset();
       this.pending = void 0;
       this.transaction = void 0;
       this.rendered.clear();
+      this.projections = void 0;
+      this.nextSnapshots = void 0;
     });
   }
   beginRender(instance) {
@@ -44,14 +55,7 @@ class HtmlService {
   suspend(instance) {
     if (instance !== this.root.rootInstance) return;
     this.enterTransaction();
-    this.root.renderTransaction.onPublish(() => {
-      this.root.focusPolicy?.suspendHtmlRegions?.();
-      if (this.viewport) this.viewport.hidden = true;
-      for (const slot of this.live) {
-        slot.region.active = false;
-        if (slot.shell) slot.shell.inert = true;
-      }
-    });
+    this.suspended = true;
   }
   register(registration) {
     assertEffects();
@@ -94,6 +98,7 @@ class HtmlService {
   retire(slot) {
     if (slot.disposed) return;
     slot.disposed = true;
+    slot.events?.dispose();
     slot.region.active = false;
     this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);
     try {
@@ -107,19 +112,18 @@ class HtmlService {
       this.live.delete(slot);
     }
   }
-  publish() {
+  prepare() {
     if (this.disposed || !this.pending) return;
     const canvas = this.root.canvas;
     const overlay = this.root.htmlOverlay;
     validateHtmlOverlay(canvas, overlay);
     const rootInstance = this.root.rootInstance;
     if (rootInstance.surface.kind === "root" && (!rootInstance.surface.display.width || !rootInstance.surface.display.height)) {
-      this.root.focusPolicy?.suspendHtmlRegions?.();
-      if (this.viewport) this.viewport.hidden = true;
-      for (const slot of this.live) {
-        slot.region.active = false;
-        if (slot.shell) slot.shell.inert = true;
-      }
+      this.suspended = true;
+      for (const slot of this.live) stageLayoutHtmlGeometry(this.transaction, slot.region, {
+        active: false,
+        bounds: slot.region.rootBounds ?? { x: 0, y: 0, width: 0, height: 0 }
+      });
       return;
     }
     const surface = rootInstance.surface.snapshot;
@@ -138,18 +142,84 @@ class HtmlService {
           walk(entry.child, childWorld, inherited.concat({ data: rectangleSvg(entry.bounds), matrix: childWorld, rule: "nonzero" }), opacity * entry.opacity);
         } else if (!entry.slot.disposed) {
           const hostWorld = world.multiply(entry.matrix);
-          if (![hostWorld.a, hostWorld.b, hostWorld.c, hostWorld.d, hostWorld.e, hostWorld.f].every(Number.isFinite)) throw new Error("HtmlBox transform must be finite.");
-          projections.push({ registration: entry, world: hostWorld, clips: inherited, opacity: opacity * entry.opacity });
+          if (!(Number.isFinite(hostWorld.a) && Number.isFinite(hostWorld.b) && Number.isFinite(hostWorld.c) && Number.isFinite(hostWorld.d) && Number.isFinite(hostWorld.e) && Number.isFinite(hostWorld.f)))
+            throw new Error("HtmlBox transform must be finite.");
+          projections.push(prepareProjection(entry, hostWorld, rootMatrix, inherited, opacity * entry.opacity));
         }
       }
     };
     walk(rootInstance, new DOMMatrix(), [], 1);
+    for (const projection of projections) {
+      projection.transformCss = cssMatrix(projection.matrix);
+      const slot = projection.registration.slot;
+      slot.events ??= new HtmlNativeEvents(slot, () => this.svg, (target) => {
+        const doc = this.root.canvas.ownerDocument;
+        if (!(target instanceof doc.defaultView.Node)) return null;
+        for (const candidate of this.live) {
+          if (candidate.events?.node.live && candidate.shell?.contains(target)) return candidate.events.node;
+        }
+        return null;
+      });
+      projection.events = slot.events.prepare(
+        projection.registration.handlers,
+        projection.world,
+        projection.rootMatrix,
+        projection.visible && projection.registration.interactive
+      );
+      stageLayoutHtmlGeometry(this.transaction, projection.registration.slot.region, {
+        bounds: projection.bounds,
+        active: projection.visible && projection.registration.interactive
+      });
+    }
+    this.projections = projections;
+    this.nextSnapshots = new Map([...this.pending].filter(([owner]) => visited.has(owner)));
+  }
+  publish() {
+    if (this.suspended) {
+      this.root.focusPolicy?.suspendHtmlRegions?.();
+      return;
+    }
+    const projections = this.projections;
+    if (!projections || this.disposed) return;
     const desired = new Set(projections.map((p) => p.registration.slot));
-    for (const slot of this.live) if (!desired.has(slot)) this.retire(slot);
+    for (const slot of this.live) if (!desired.has(slot)) {
+      if (!slot.owner.mainTeardowns.closed && (isLayoutComponentSuspended(slot.component) || isLayoutInstanceSuspended(slot.owner))) {
+        slot.region.active = false;
+        slot.events?.suspend();
+        this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);
+        if (slot.shell) {
+          slot.shell.inert = true;
+          slot.shell.style.visibility = "hidden";
+        }
+      } else this.retire(slot);
+    }
     if (projections.length) this.ensureDOM();
+    for (const projection of projections) this.prepareClips(projection);
+    for (const projection of projections) {
+      const slot = projection.registration.slot;
+      if ((!projection.visible || !projection.registration.interactive) && slot.region.active) {
+        this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);
+        const active = this.root.canvas.ownerDocument.activeElement;
+        if (active instanceof HTMLElement && slot.content?.contains(active)) active.blur();
+      }
+      this.publishContent(projection);
+    }
+  }
+  adopt() {
+    if (this.disposed) return;
+    if (this.suspended) {
+      if (this.viewport) this.viewport.hidden = true;
+      for (const slot of this.live) {
+        slot.region.active = false;
+        slot.events?.suspend();
+        if (slot.shell) slot.shell.inert = true;
+      }
+      return;
+    }
+    if (!this.projections) return;
     if (this.viewport) this.viewport.hidden = false;
-    for (const [index, projection] of projections.entries()) this.apply(projection, rootMatrix, index);
-    this.snapshots = new Map([...this.pending].filter(([owner]) => visited.has(owner)));
+    for (let index = 0; index < this.projections.length; index++) this.applyGeometry(this.projections[index], index);
+    this.snapshots = this.nextSnapshots;
   }
   ensureDOM() {
     if (this.viewport) return;
@@ -161,18 +231,18 @@ class HtmlService {
     this.svg.setAttribute("width", "0");
     this.svg.setAttribute("height", "0");
     this.svg.setAttribute("aria-hidden", "true");
-    this.svg.style.cssText = "position:absolute;pointer-events:none";
+    this.svg.style.cssText = "position:absolute;left:0;top:0;pointer-events:none";
     this.root.htmlOverlay.append(this.svg, this.viewport);
   }
-  apply(projection, rootMatrix, index) {
-    const { registration: r, world, clips, opacity } = projection;
+  publishContent(projection) {
+    const r = projection.registration;
     const slot = r.slot;
     const first = !slot.shell;
     const doc = this.root.canvas.ownerDocument;
     if (first) {
       slot.shell = doc.createElement("div");
       slot.shell.dataset.pibblHtmlBox = "";
-      slot.shell.style.cssText = "position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;isolation:isolate";
+      slot.shell.style.cssText = "position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;isolation:isolate;opacity:0";
       slot.content = doc.createElement("div");
       slot.content.dataset.pibblHtmlContent = "";
       slot.content.style.cssText = "position:absolute;box-sizing:border-box";
@@ -183,28 +253,7 @@ class HtmlService {
       slot.region.content = slot.content;
       this.live.add(slot);
     }
-    const matrix = rootMatrix.multiply(world);
-    const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
-    const visible = r.border.width > 0 && r.border.height > 0 && determinant !== 0;
-    slot.shell.style.width = `${r.border.width}px`;
-    slot.shell.style.height = `${r.border.height}px`;
-    slot.shell.style.transform = cssMatrix(matrix);
-    slot.shell.style.zIndex = String(index);
-    slot.shell.style.opacity = String(opacity);
-    slot.shell.style.overflow = r.overflow;
-    slot.content.style.left = `${r.content.x}px`;
-    slot.content.style.top = `${r.content.y}px`;
-    slot.content.style.width = `${r.content.width}px`;
-    slot.content.style.height = `${r.content.height}px`;
-    slot.content.style.pointerEvents = r.interactive ? "auto" : "none";
-    slot.shell.inert = !visible || !r.interactive;
-    slot.shell.style.visibility = visible ? "visible" : "hidden";
-    slot.region.active = visible && r.interactive;
-    const corners = [[0, 0], [r.border.width, 0], [0, r.border.height], [r.border.width, r.border.height]].map(([x, y]) => world.transformPoint({ x, y }));
-    const xs = corners.map((p) => p.x), ys = corners.map((p) => p.y);
-    slot.region.rootBounds = { x: Math.min(...xs), y: Math.min(...ys), width: Math.max(...xs) - Math.min(...xs), height: Math.max(...ys) - Math.min(...ys) };
-    slot.callback = r.onFocusChange;
-    if (visible) this.applyClips(slot, clips, world.inverse());
+    slot.events.prepareListeners(projection.events);
     try {
       if (first) {
         const update = withSignalWriteForbidden("HtmlBox mount", () => slot.mount(slot.content, r.data, slot.abort.signal));
@@ -218,31 +267,70 @@ class HtmlService {
       this.retire(slot);
       throw error;
     }
+  }
+  applyGeometry(projection, index) {
+    const { registration: r, bounds, visible, opacity } = projection;
+    const slot = r.slot;
+    if (slot.disposed) return;
+    slot.shell.style.width = `${r.border.width}px`;
+    slot.shell.style.height = `${r.border.height}px`;
+    slot.shell.style.transform = projection.transformCss;
+    slot.shell.style.zIndex = String(index);
+    slot.shell.style.opacity = String(opacity);
+    slot.shell.style.overflow = r.overflow;
+    slot.content.style.left = `${r.content.x}px`;
+    slot.content.style.top = `${r.content.y}px`;
+    slot.content.style.width = `${r.content.width}px`;
+    slot.content.style.height = `${r.content.height}px`;
+    slot.content.style.pointerEvents = r.interactive ? "auto" : "none";
     slot.shell.inert = !visible || !r.interactive;
     slot.shell.style.visibility = visible ? "visible" : "hidden";
+    slot.region.active = visible && r.interactive;
+    slot.region.rootBounds = bounds;
+    slot.callback = r.onFocusChange;
+    slot.events.adopt(projection.events);
+    if (visible) {
+      const previous = slot.clipping;
+      slot.clipping = projection.definitions;
+      slot.shell.style.clipPath = projection.clipPath;
+      if (previous !== slot.clipping) for (const definition of previous ?? []) definition.remove();
+    }
   }
-  applyClips(slot, clips, inverseWorld) {
-    const definitions = slot.clipping;
+  prepareClips(projection) {
+    if (!projection.visible) return;
+    const slot = projection.registration.slot;
+    const clips = projection.clips;
+    const previous = slot.clipping;
+    let unchanged = previous?.length === clips.length;
+    const matrices = [];
+    for (let index = 0; index < clips.length; index++) {
+      const clip = clips[index];
+      matrices.push(cssMatrix(clip.matrix));
+      const path = previous?.[index]?.firstElementChild;
+      if (!path || path.getAttribute("d") !== clip.data || path.getAttribute("clip-rule") !== clip.rule || path.getAttribute("transform") !== matrices[index]) unchanged = false;
+    }
+    if (unchanged) {
+      projection.definitions = previous;
+      projection.clipPath = clips.length ? `url(#${previous[0].id})` : "none";
+      return;
+    }
+    const definitions = [];
     const doc = this.root.canvas.ownerDocument;
-    while (definitions.length < clips.length) {
+    for (let index = 0; index < clips.length; index++) {
       const definition = doc.createElementNS(SVG, "clipPath");
       definition.id = `pibbl-html-clip-${++nextId}`;
       definition.setAttribute("clipPathUnits", "userSpaceOnUse");
-      definition.append(doc.createElementNS(SVG, "path"));
-      this.svg.append(definition);
+      const path = doc.createElementNS(SVG, "path");
+      path.setAttribute("d", clips[index].data);
+      path.setAttribute("clip-rule", clips[index].rule);
+      path.setAttribute("transform", matrices[index]);
+      definition.append(path);
       definitions.push(definition);
     }
-    clips.forEach((clip, index) => {
-      const definition = definitions[index];
-      const path = definition.firstElementChild;
-      setAttribute(path, "d", clip.data);
-      setAttribute(path, "clip-rule", clip.rule);
-      setAttribute(path, "transform", cssMatrix(inverseWorld.multiply(clip.matrix)));
-      if (index + 1 < clips.length) setAttribute(definition, "clip-path", `url(#${definitions[index + 1].id})`);
-      else definition.removeAttribute("clip-path");
-    });
-    slot.shell.style.clipPath = clips.length ? `url(#${definitions[0].id})` : "none";
-    while (definitions.length > clips.length) definitions.pop().remove();
+    for (let index = 0; index + 1 < definitions.length; index++) definitions[index].firstElementChild.setAttribute("clip-path", `url(#${definitions[index + 1].id})`);
+    for (const definition of definitions) this.svg.append(definition);
+    projection.definitions = definitions;
+    projection.clipPath = definitions.length ? `url(#${definitions[0].id})` : "none";
   }
   reset() {
     for (const slot of this.live) this.retire(slot);
@@ -270,8 +358,53 @@ function snapshotClips(clips) {
 function cssMatrix(m) {
   return `matrix(${m.a},${m.b},${m.c},${m.d},${m.e},${m.f})`;
 }
-function setAttribute(element, name, value) {
-  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
+function prepareProjection(registration, world, rootMatrix, clips, opacity) {
+  const matrix = rootMatrix.multiply(world);
+  assertFiniteProjectionMatrix(matrix);
+  const width = registration.border.width;
+  const height = registration.border.height;
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  for (let space = 0; space < 2; space++) {
+    const transform = space === 0 ? world : matrix;
+    let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
+    for (let corner = 0; corner < 4; corner++) {
+      const x = corner & 1 ? width : 0;
+      const y = corner & 2 ? height : 0;
+      const projectedX = transform.a * x + transform.c * y + transform.e;
+      const projectedY = transform.b * x + transform.d * y + transform.f;
+      if (!Number.isFinite(projectedX) || !Number.isFinite(projectedY)) throw new Error("HtmlBox projection must be finite.");
+      left = Math.min(left, projectedX);
+      top = Math.min(top, projectedY);
+      right = Math.max(right, projectedX);
+      bottom = Math.max(bottom, projectedY);
+    }
+    if (!Number.isFinite(right - left) || !Number.isFinite(bottom - top)) throw new Error("HtmlBox projection must be finite.");
+    if (space === 0) {
+      minX = left;
+      minY = top;
+      maxX = right;
+      maxY = bottom;
+    }
+  }
+  const bounds = { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  if (!Number.isFinite(bounds.width) || !Number.isFinite(bounds.height)) throw new Error("HtmlBox projection must be finite.");
+  const determinant = matrix.a * matrix.d - matrix.b * matrix.c;
+  if (Number.isNaN(determinant)) throw new Error("HtmlBox projection must be finite.");
+  const visible = width > 0 && height > 0 && determinant !== 0;
+  const localClips = [];
+  if (visible && clips.length) {
+    const inverse = world.inverse();
+    assertFiniteProjectionMatrix(inverse);
+    for (const clip of clips) {
+      const local = inverse.multiply(clip.matrix);
+      assertFiniteProjectionMatrix(local);
+      localClips.push({ data: clip.data, rule: clip.rule, matrix: local });
+    }
+  }
+  return { registration, world, rootMatrix, matrix, bounds, visible, clips: localClips, opacity };
+}
+function assertFiniteProjectionMatrix(matrix) {
+  if (!(Number.isFinite(matrix.a) && Number.isFinite(matrix.b) && Number.isFinite(matrix.c) && Number.isFinite(matrix.d) && Number.isFinite(matrix.e) && Number.isFinite(matrix.f))) throw new Error("HtmlBox projection must be finite.");
 }
 export {
   HtmlService,

package/dist/lib/html/html-service.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/html/html-service.ts"],
-  "sourcesContent": ["import { GLOBAL_STATE } from '../global-state.js';\nimport { withSignalWriteForbidden } from '../signals/graph.js';\nimport type { PibblClippingStackEntry, PibblEventRoot, PibblInstance, PibblInteractionLayer, PibblRenderTransaction } from '../types.js';\nimport type { HtmlBoxRegistration, HtmlBoxSlot, HtmlBridge } from './types.js';\nimport { validateHtmlOverlay } from './overlay-config.js';\nimport { rectangleSvg } from './portable-clips.js';\n\nconst SVG = 'http://www.w3.org/2000/svg';\nlet nextId = 0;\ntype Entry = HtmlBoxRegistration | { child: PibblInstance; matrix: DOMMatrix; clips: readonly PibblClippingStackEntry[]; opacity: number; bounds: {x:number;y:number;width:number;height:number} };\ntype Clip = { data: string; matrix: DOMMatrix; rule: CanvasFillRule };\ninterface Projection { registration: HtmlBoxRegistration; world: DOMMatrix; clips: Clip[]; opacity: number; }\n\nexport function requireHtmlService(owner: PibblInstance): HtmlService {\n  const root = owner.eventRoot;\n  if (!root.htmlOverlay || !root.canvas) throw new Error('HtmlBox requires an HTMLCanvasElement root configured with htmlOverlay.');\n  return (root.html ??= new HtmlService(root)) as HtmlService;\n}\n\nexport class HtmlService implements HtmlBridge {\n  private snapshots = new Map<PibblInstance, Entry[]>();\n  private pending: Map<PibblInstance, Entry[]> | undefined;\n  private transaction: PibblRenderTransaction | undefined;\n  private live = new Set<HtmlBoxSlot>();\n  private svg: SVGSVGElement | undefined;\n  private viewport: HTMLDivElement | undefined;\n  private disposed = false;\n  private rendered = new Set<HtmlBoxSlot>();\n  constructor(private readonly root: PibblEventRoot) {}\n\n  private enterTransaction(): void {\n    const transaction = this.root.renderTransaction;\n    if (!transaction) throw new Error('HtmlBox requires an active render transaction.');\n    if (transaction === this.transaction) return;\n    this.transaction = transaction;\n    this.pending = new Map(this.snapshots);\n    this.rendered = new Set();\n    transaction.onPublish!(() => this.publish());\n    transaction.onFinish(success => {\n      if (!success) this.reset();\n      this.pending = undefined;\n      this.transaction = undefined;\n      this.rendered.clear();\n    });\n  }\n\n  beginRender(instance: PibblInstance): void {\n    this.enterTransaction();\n    this.pending!.set(instance, []);\n  }\n\n  suspend(instance: PibblInstance): void {\n    if (instance !== this.root.rootInstance) return;\n    this.enterTransaction();\n    this.root.renderTransaction!.onPublish!(() => {\n      this.root.focusPolicy?.suspendHtmlRegions?.();\n      if (this.viewport) this.viewport.hidden = true;\n      for (const slot of this.live) { slot.region.active = false; if (slot.shell) slot.shell.inert = true; }\n    });\n  }\n\n  register(registration: HtmlBoxRegistration): void {\n    assertEffects();\n    this.enterTransaction();\n    const owner = registration.slot.owner;\n    let entries = this.pending!.get(owner);\n    // A service first created during this render has no candidate array yet.\n    if (!entries || entries === this.snapshots.get(owner)) this.pending!.set(owner, entries = []);\n    entries.push(registration);\n    this.rendered.add(registration.slot);\n    this.root.focusPolicy?.observeHtmlRegion?.(registration.slot.region);\n  }\n\n  recordLayer(parent: PibblInstance, child: PibblInstance, bridge: PibblInteractionLayer, opacity: number, composite: GlobalCompositeOperation): void {\n    this.enterTransaction();\n    if (this.hasHosts(child)) {\n      assertEffects(composite);\n      const entries = this.pending!.get(parent) ?? [];\n      if (!this.pending!.has(parent)) this.pending!.set(parent, entries);\n      entries.push({ child, matrix: copy(bridge.transform), clips: snapshotClips(bridge.clippingStack), opacity,\n        bounds: { x: 0, y: 0, width: child.rootLayoutBox.width, height: child.rootLayoutBox.height } });\n    }\n  }\n\n  private hasHosts(instance: PibblInstance): boolean {\n    return (this.pending?.get(instance) ?? this.snapshots.get(instance) ?? []).length > 0;\n  }\n\n  release(slot: HtmlBoxSlot): void {\n    if (slot.disposed) return;\n    const transaction = this.root.renderTransaction;\n    if (transaction) {\n      transaction.onPublish!(() => this.retire(slot));\n      transaction.onFinish(success => { if (!success) this.retire(slot); });\n    } else this.retire(slot);\n  }\n\n  private retire(slot: HtmlBoxSlot): void {\n    if (slot.disposed) return;\n    slot.disposed = true;\n    slot.region.active = false;\n    this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);\n    try { withSignalWriteForbidden('HtmlBox abort cleanup', () => slot.abort?.abort()); }\n    finally {\n      slot.shell?.remove();\n      for (const clip of slot.clipping ?? []) clip.remove();\n      slot.clipping = [];\n      slot.update = undefined;\n      slot.region.content = undefined;\n      this.live.delete(slot);\n    }\n  }\n\n  private publish(): void {\n    if (this.disposed || !this.pending) return;\n    const canvas = this.root.canvas!;\n    const overlay = this.root.htmlOverlay!;\n    validateHtmlOverlay(canvas, overlay);\n    const rootInstance = this.root.rootInstance!;\n    if (rootInstance.surface.kind === 'root' && (!rootInstance.surface.display.width || !rootInstance.surface.display.height)) {\n      this.root.focusPolicy?.suspendHtmlRegions?.();\n      if (this.viewport) this.viewport.hidden = true;\n      for (const slot of this.live) { slot.region.active = false; if (slot.shell) slot.shell.inert = true; }\n      return;\n    }\n    const surface = rootInstance.surface.snapshot!;\n    const rootMatrix = new DOMMatrix().scale(1 / surface.backingPixelsPerCssPixelX, 1 / surface.backingPixelsPerCssPixelY).multiply(surface.renderTransform);\n    const projections: Projection[] = [];\n    const visited = new Set<PibblInstance>();\n    const walk = (instance: PibblInstance, world: DOMMatrix, clips: Clip[], opacity: number) => {\n      visited.add(instance);\n      for (const entry of this.pending!.get(instance) ?? []) {\n        const inherited = clips.concat(entry.clips.map(clip => {\n          if (clip.svgPath === undefined) throw new Error('HtmlBox cannot project a native Path2D clip. Use PathGeometry for clips enclosing HtmlBox.');\n          return { data: clip.svgPath, rule: clip.fillRule, matrix: world.multiply(clip.transform) };\n        }));\n        if ('child' in entry) {\n          const childWorld = world.multiply(entry.matrix);\n          walk(entry.child, childWorld, inherited.concat({ data: rectangleSvg(entry.bounds), matrix: childWorld, rule: 'nonzero' }), opacity * entry.opacity);\n        } else if (!entry.slot.disposed) {\n          const hostWorld = world.multiply(entry.matrix);\n          if (![hostWorld.a,hostWorld.b,hostWorld.c,hostWorld.d,hostWorld.e,hostWorld.f].every(Number.isFinite)) throw new Error('HtmlBox transform must be finite.');\n          projections.push({ registration: entry, world: hostWorld, clips: inherited, opacity: opacity * entry.opacity });\n        }\n      }\n    };\n    walk(rootInstance, new DOMMatrix(), [], 1);\n    const desired = new Set(projections.map(p => p.registration.slot));\n    for (const slot of this.live) if (!desired.has(slot)) this.retire(slot);\n    if (projections.length) this.ensureDOM();\n    if (this.viewport) this.viewport.hidden = false;\n    for (const [index, projection] of projections.entries()) this.apply(projection, rootMatrix, index);\n    this.snapshots = new Map([...this.pending].filter(([owner]) => visited.has(owner)));\n  }\n\n  private ensureDOM(): void {\n    if (this.viewport) return;\n    const doc = this.root.canvas!.ownerDocument;\n    this.viewport = doc.createElement('div');\n    this.viewport.dataset.pibblHtmlViewport = '';\n    this.viewport.style.cssText = 'position:absolute;inset:0;overflow:clip;pointer-events:none';\n    this.svg = doc.createElementNS(SVG, 'svg');\n    this.svg.setAttribute('width', '0'); this.svg.setAttribute('height', '0');\n    this.svg.setAttribute('aria-hidden', 'true');\n    this.svg.style.cssText = 'position:absolute;pointer-events:none';\n    this.root.htmlOverlay!.append(this.svg, this.viewport);\n  }\n\n  private apply(projection: Projection, rootMatrix: DOMMatrix, index: number): void {\n    const { registration: r, world, clips, opacity } = projection;\n    const slot = r.slot;\n    const first = !slot.shell;\n    const doc = this.root.canvas!.ownerDocument;\n    if (first) {\n      slot.shell = doc.createElement('div'); slot.shell.dataset.pibblHtmlBox = '';\n      slot.shell.style.cssText = 'position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;isolation:isolate';\n      slot.content = doc.createElement('div'); slot.content.dataset.pibblHtmlContent = '';\n      slot.content.style.cssText = 'position:absolute;box-sizing:border-box';\n      slot.shell.append(slot.content); this.viewport!.append(slot.shell);\n      slot.clipping = []; slot.abort = new (doc.defaultView!.AbortController)();\n      slot.region.content = slot.content;\n      this.live.add(slot);\n    }\n    const matrix = rootMatrix.multiply(world);\n    const determinant = matrix.a * matrix.d - matrix.b * matrix.c;\n    const visible = r.border.width > 0 && r.border.height > 0 && determinant !== 0;\n    slot.shell!.style.width = `${r.border.width}px`; slot.shell!.style.height = `${r.border.height}px`;\n    slot.shell!.style.transform = cssMatrix(matrix); slot.shell!.style.zIndex = String(index);\n    slot.shell!.style.opacity = String(opacity); slot.shell!.style.overflow = r.overflow;\n    slot.content!.style.left = `${r.content.x}px`; slot.content!.style.top = `${r.content.y}px`;\n    slot.content!.style.width = `${r.content.width}px`; slot.content!.style.height = `${r.content.height}px`;\n    slot.content!.style.pointerEvents = r.interactive ? 'auto' : 'none';\n    slot.shell!.inert = !visible || !r.interactive;\n    slot.shell!.style.visibility = visible ? 'visible' : 'hidden';\n    slot.region.active = visible && r.interactive;\n    const corners = [[0,0],[r.border.width,0],[0,r.border.height],[r.border.width,r.border.height]].map(([x,y]) => world.transformPoint({x,y}));\n    const xs = corners.map(p => p.x), ys = corners.map(p => p.y);\n    slot.region.rootBounds = { x: Math.min(...xs), y: Math.min(...ys), width: Math.max(...xs)-Math.min(...xs), height: Math.max(...ys)-Math.min(...ys) };\n    slot.callback = r.onFocusChange;\n    if (visible) this.applyClips(slot, clips, world.inverse());\n    try {\n      if (first) {\n        const update = withSignalWriteForbidden('HtmlBox mount', () => slot.mount(slot.content!, r.data, slot.abort!.signal));\n        if (typeof update !== 'function') throw new TypeError('HtmlBox mount must synchronously return an update function.');\n        slot.update = update;\n      } else if (this.rendered.has(slot)) {\n        const result: unknown = withSignalWriteForbidden('HtmlBox update', () => slot.update!(r.data));\n        if (result && typeof (result as PromiseLike<unknown>).then === 'function') throw new TypeError('HtmlBox update must be synchronous.');\n      }\n    } catch (error) { this.retire(slot); throw error; }\n    slot.shell!.inert = !visible || !r.interactive;\n    slot.shell!.style.visibility = visible ? 'visible' : 'hidden';\n  }\n\n  private applyClips(slot: HtmlBoxSlot, clips: Clip[], inverseWorld: DOMMatrix): void {\n    const definitions = slot.clipping!;\n    const doc = this.root.canvas!.ownerDocument;\n    while (definitions.length < clips.length) {\n      const definition = doc.createElementNS(SVG, 'clipPath');\n      definition.id = `pibbl-html-clip-${++nextId}`;\n      definition.setAttribute('clipPathUnits', 'userSpaceOnUse');\n      definition.append(doc.createElementNS(SVG, 'path'));\n      this.svg!.append(definition); definitions.push(definition);\n    }\n    clips.forEach((clip, index) => {\n      const definition = definitions[index]; const path = definition.firstElementChild!;\n      setAttribute(path, 'd', clip.data);\n      setAttribute(path, 'clip-rule', clip.rule);\n      setAttribute(path, 'transform', cssMatrix(inverseWorld.multiply(clip.matrix)));\n      if (index + 1 < clips.length) setAttribute(definition, 'clip-path', `url(#${definitions[index+1].id})`);\n      else definition.removeAttribute('clip-path');\n    });\n    slot.shell!.style.clipPath = clips.length ? `url(#${definitions[0].id})` : 'none';\n    while (definitions.length > clips.length) definitions.pop()!.remove();\n  }\n\n  private reset(): void {\n    for (const slot of this.live) this.retire(slot);\n    this.snapshots.clear();\n    this.viewport?.remove(); this.svg?.remove(); this.viewport = undefined; this.svg = undefined;\n  }\n  dispose(): void { if (this.disposed) return; this.disposed = true; this.reset(); }\n}\n\nfunction assertEffects(composite = GLOBAL_STATE.renderContext?.globalCompositeOperation): void {\n  if (GLOBAL_STATE.htmlFilterDepth || composite !== 'source-over') throw new Error('HtmlBox cannot be enclosed by Canvas filters or non-default compositing. Use CSS effects inside its content instead.');\n}\nfunction copy(matrix: DOMMatrixReadOnly): DOMMatrix { return new DOMMatrix([matrix.a,matrix.b,matrix.c,matrix.d,matrix.e,matrix.f]); }\nexport function snapshotClips(clips: readonly PibblClippingStackEntry[]): PibblClippingStackEntry[] {\n  return clips.map(clip => ({ ...clip, transform: copy(clip.transform) }));\n}\nfunction cssMatrix(m: DOMMatrixReadOnly): string { return `matrix(${m.a},${m.b},${m.c},${m.d},${m.e},${m.f})`; }\nfunction setAttribute(element: Element, name: string, value: string): void { if (element.getAttribute(name) !== value) element.setAttribute(name, value); }\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { HtmlNativeEvents, type HtmlNativeEventSnapshot } from './html-events.js';\nimport { stageLayoutHtmlGeometry } from '../layout/geometry-publication.js';\nimport { isLayoutComponentSuspended, isLayoutInstanceSuspended } from '../layout/participation.js';\nimport { GLOBAL_STATE } from '../global-state.js';\nimport { withSignalWriteForbidden } from '../signals/graph.js';\nimport type { PibblClippingStackEntry, PibblEventRoot, PibblInstance, PibblInteractionLayer, PibblRenderTransaction } from '../types.js';\nimport type { HtmlBoxRegistration, HtmlBoxSlot, HtmlBridge } from './types.js';\nimport { validateHtmlOverlay } from './overlay-config.js';\nimport { rectangleSvg } from './portable-clips.js';\n\nconst SVG = 'http://www.w3.org/2000/svg';\nlet nextId = 0;\ntype Entry = HtmlBoxRegistration | { child: PibblInstance; matrix: DOMMatrix; clips: readonly PibblClippingStackEntry[]; opacity: number; bounds: {x:number;y:number;width:number;height:number} };\ntype Clip = { data: string; matrix: DOMMatrix; rule: CanvasFillRule };\ninterface Projection { events?: HtmlNativeEventSnapshot; world: DOMMatrix; rootMatrix: DOMMatrix; transformCss?: string; definitions?: SVGClipPathElement[]; clipPath?: string; registration: HtmlBoxRegistration; matrix: DOMMatrix; bounds: { x: number; y: number; width: number; height: number }; visible: boolean; clips: Clip[]; opacity: number; }\n\nexport function requireHtmlService(owner: PibblInstance): HtmlService {\n  const root = owner.eventRoot;\n  if (!root.htmlOverlay || !root.canvas) throw new Error('HtmlBox requires an HTMLCanvasElement root configured with htmlOverlay.');\n  return (root.html ??= new HtmlService(root)) as HtmlService;\n}\n\nexport class HtmlService implements HtmlBridge {\n  private snapshots = new Map<PibblInstance, Entry[]>();\n  private pending: Map<PibblInstance, Entry[]> | undefined;\n  private transaction: PibblRenderTransaction | undefined;\n  private live = new Set<HtmlBoxSlot>();\n  private svg: SVGSVGElement | undefined;\n  private viewport: HTMLDivElement | undefined;\n  private disposed = false;\n  private suspended = false;\n  private projections: Projection[] | undefined;\n  private nextSnapshots: Map<PibblInstance, Entry[]> | undefined;\n  private rendered = new Set<HtmlBoxSlot>();\n  constructor(private readonly root: PibblEventRoot) {}\n\n  private enterTransaction(): void {\n    const transaction = this.root.renderTransaction;\n    if (!transaction) throw new Error('HtmlBox requires an active render transaction.');\n    if (transaction === this.transaction) return;\n    this.transaction = transaction;\n    this.pending = new Map(this.snapshots);\n    this.rendered = new Set();\n    this.suspended = false;\n    transaction.onPreflight!(() => this.prepare());\n    transaction.onPublish!(() => this.publish());\n    transaction.onAdopt!(() => this.adopt());\n    transaction.onFinish(success => {\n      if (!success && transaction.failed !== false) this.reset();\n      this.pending = undefined;\n      this.transaction = undefined;\n      this.rendered.clear();\n      this.projections = undefined;\n      this.nextSnapshots = undefined;\n    });\n  }\n\n  beginRender(instance: PibblInstance): void {\n    this.enterTransaction();\n    this.pending!.set(instance, []);\n  }\n\n  suspend(instance: PibblInstance): void {\n    if (instance !== this.root.rootInstance) return;\n    this.enterTransaction();\n    this.suspended = true;\n  }\n\n  register(registration: HtmlBoxRegistration): void {\n    assertEffects();\n    this.enterTransaction();\n    const owner = registration.slot.owner;\n    let entries = this.pending!.get(owner);\n    // A service first created during this render has no candidate array yet.\n    if (!entries || entries === this.snapshots.get(owner)) this.pending!.set(owner, entries = []);\n    entries.push(registration);\n    this.rendered.add(registration.slot);\n    this.root.focusPolicy?.observeHtmlRegion?.(registration.slot.region);\n  }\n\n  recordLayer(parent: PibblInstance, child: PibblInstance, bridge: PibblInteractionLayer, opacity: number, composite: GlobalCompositeOperation): void {\n    this.enterTransaction();\n    if (this.hasHosts(child)) {\n      assertEffects(composite);\n      const entries = this.pending!.get(parent) ?? [];\n      if (!this.pending!.has(parent)) this.pending!.set(parent, entries);\n      entries.push({ child, matrix: copy(bridge.transform), clips: snapshotClips(bridge.clippingStack), opacity,\n        bounds: { x: 0, y: 0, width: child.rootLayoutBox.width, height: child.rootLayoutBox.height } });\n    }\n  }\n\n  private hasHosts(instance: PibblInstance): boolean {\n    return (this.pending?.get(instance) ?? this.snapshots.get(instance) ?? []).length > 0;\n  }\n\n  release(slot: HtmlBoxSlot): void {\n    if (slot.disposed) return;\n    const transaction = this.root.renderTransaction;\n    if (transaction) {\n      transaction.onPublish!(() => this.retire(slot));\n      transaction.onFinish(success => { if (!success) this.retire(slot); });\n    } else this.retire(slot);\n  }\n\n  private retire(slot: HtmlBoxSlot): void {\n    if (slot.disposed) return;\n    slot.disposed = true;\n    slot.events?.dispose();\n    slot.region.active = false;\n    this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);\n    try { withSignalWriteForbidden('HtmlBox abort cleanup', () => slot.abort?.abort()); }\n    finally {\n      slot.shell?.remove();\n      for (const clip of slot.clipping ?? []) clip.remove();\n      slot.clipping = [];\n      slot.update = undefined;\n      slot.region.content = undefined;\n      this.live.delete(slot);\n    }\n  }\n\n  private prepare(): void {\n    if (this.disposed || !this.pending) return;\n    const canvas = this.root.canvas!;\n    const overlay = this.root.htmlOverlay!;\n    validateHtmlOverlay(canvas, overlay);\n    const rootInstance = this.root.rootInstance!;\n    if (rootInstance.surface.kind === 'root' && (!rootInstance.surface.display.width || !rootInstance.surface.display.height)) {\n      this.suspended = true;\n      for (const slot of this.live) stageLayoutHtmlGeometry(this.transaction!, slot.region, {\n        active: false, bounds: slot.region.rootBounds ?? { x: 0, y: 0, width: 0, height: 0 },\n      });\n      return;\n    }\n    const surface = rootInstance.surface.snapshot!;\n    const rootMatrix = new DOMMatrix().scale(1 / surface.backingPixelsPerCssPixelX, 1 / surface.backingPixelsPerCssPixelY).multiply(surface.renderTransform);\n    const projections: Projection[] = [];\n    const visited = new Set<PibblInstance>();\n    const walk = (\n      instance: PibblInstance,\n      world: DOMMatrix,\n      clips: Clip[],\n      opacity: number,\n    ) => {\n      visited.add(instance);\n      for (const entry of this.pending!.get(instance) ?? []) {\n        const inherited = clips.concat(entry.clips.map(clip => {\n          if (clip.svgPath === undefined) throw new Error('HtmlBox cannot project a native Path2D clip. Use PathGeometry for clips enclosing HtmlBox.');\n          return { data: clip.svgPath, rule: clip.fillRule, matrix: world.multiply(clip.transform) };\n        }));\n        if ('child' in entry) {\n          const childWorld = world.multiply(entry.matrix);\n          walk(entry.child, childWorld, inherited.concat({ data: rectangleSvg(entry.bounds), matrix: childWorld, rule: 'nonzero' }), opacity * entry.opacity);\n        } else if (!entry.slot.disposed) {\n          const hostWorld = world.multiply(entry.matrix);\n          if (!(\n            Number.isFinite(hostWorld.a) &&\n            Number.isFinite(hostWorld.b) &&\n            Number.isFinite(hostWorld.c) &&\n            Number.isFinite(hostWorld.d) &&\n            Number.isFinite(hostWorld.e) &&\n            Number.isFinite(hostWorld.f)\n          ))\n            throw new Error('HtmlBox transform must be finite.');\n          projections.push(prepareProjection(entry, hostWorld, rootMatrix, inherited, opacity * entry.opacity));\n        }\n      }\n    };\n    walk(rootInstance, new DOMMatrix(), [], 1);\n    for (const projection of projections) {\n      projection.transformCss = cssMatrix(projection.matrix);\n      const slot = projection.registration.slot;\n      slot.events ??= new HtmlNativeEvents(slot, () => this.svg!, target => {\n        const doc = this.root.canvas!.ownerDocument;\n        if (!(target instanceof doc.defaultView!.Node)) return null;\n        for (const candidate of this.live) {\n          if (candidate.events?.node.live && candidate.shell?.contains(target)) return candidate.events.node;\n        }\n        return null;\n      });\n      projection.events = slot.events.prepare(projection.registration.handlers, projection.world,\n        projection.rootMatrix, projection.visible && projection.registration.interactive);\n      stageLayoutHtmlGeometry(this.transaction!, projection.registration.slot.region, {\n        bounds: projection.bounds, active: projection.visible && projection.registration.interactive,\n      });\n    }\n    this.projections = projections;\n    this.nextSnapshots = new Map([...this.pending].filter(([owner]) => visited.has(owner)));\n  }\n\n  private publish(): void {\n    if (this.suspended) { this.root.focusPolicy?.suspendHtmlRegions?.(); return; }\n    const projections = this.projections;\n    if (!projections || this.disposed) return;\n    const desired = new Set(projections.map(p => p.registration.slot));\n    for (const slot of this.live) if (!desired.has(slot)) {\n      if (!slot.owner.mainTeardowns.closed && (isLayoutComponentSuspended(slot.component) || isLayoutInstanceSuspended(slot.owner))) {\n        slot.region.active = false; slot.events?.suspend();\n        this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);\n        if (slot.shell) { slot.shell.inert = true; slot.shell.style.visibility = 'hidden'; }\n      } else this.retire(slot);\n    }\n    if (projections.length) this.ensureDOM();\n    for (const projection of projections) this.prepareClips(projection);\n    for (const projection of projections) {\n      const slot = projection.registration.slot;\n      if ((!projection.visible || !projection.registration.interactive) && slot.region.active) {\n        this.root.focusPolicy?.removeHtmlFocusRegion?.(slot.region);\n        const active = this.root.canvas!.ownerDocument.activeElement;\n        if (active instanceof HTMLElement && slot.content?.contains(active)) active.blur();\n      }\n      this.publishContent(projection);\n    }\n  }\n\n  private adopt(): void {\n    if (this.disposed) return;\n    if (this.suspended) {\n      if (this.viewport) this.viewport.hidden = true;\n      for (const slot of this.live) { slot.region.active = false; slot.events?.suspend(); if (slot.shell) slot.shell.inert = true; }\n      return;\n    }\n    if (!this.projections) return;\n    if (this.viewport) this.viewport.hidden = false;\n    for (let index = 0; index < this.projections.length; index++) this.applyGeometry(this.projections[index], index);\n    this.snapshots = this.nextSnapshots!;\n  }\n\n  private ensureDOM(): void {\n    if (this.viewport) return;\n    const doc = this.root.canvas!.ownerDocument;\n    this.viewport = doc.createElement('div');\n    this.viewport.dataset.pibblHtmlViewport = '';\n    this.viewport.style.cssText = 'position:absolute;inset:0;overflow:clip;pointer-events:none';\n    this.svg = doc.createElementNS(SVG, 'svg');\n    this.svg.setAttribute('width', '0'); this.svg.setAttribute('height', '0');\n    this.svg.setAttribute('aria-hidden', 'true');\n    this.svg.style.cssText = 'position:absolute;left:0;top:0;pointer-events:none';\n    this.root.htmlOverlay!.append(this.svg, this.viewport);\n  }\n\n  private publishContent(projection: Projection): void {\n    const r = projection.registration;\n    const slot = r.slot;\n    const first = !slot.shell;\n    const doc = this.root.canvas!.ownerDocument;\n    if (first) {\n      slot.shell = doc.createElement('div'); slot.shell.dataset.pibblHtmlBox = '';\n      slot.shell.style.cssText = 'position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none;isolation:isolate;opacity:0';\n      slot.content = doc.createElement('div'); slot.content.dataset.pibblHtmlContent = '';\n      slot.content.style.cssText = 'position:absolute;box-sizing:border-box';\n      slot.shell.append(slot.content); this.viewport!.append(slot.shell);\n      slot.clipping = []; slot.abort = new (doc.defaultView!.AbortController)();\n      slot.region.content = slot.content;\n      this.live.add(slot);\n    }\n    slot.events!.prepareListeners(projection.events!);\n    try {\n      if (first) {\n        const update = withSignalWriteForbidden('HtmlBox mount', () => slot.mount(slot.content!, r.data, slot.abort!.signal));\n        if (typeof update !== 'function') throw new TypeError('HtmlBox mount must synchronously return an update function.');\n        slot.update = update;\n      } else if (this.rendered.has(slot)) {\n        const result: unknown = withSignalWriteForbidden('HtmlBox update', () => slot.update!(r.data));\n        if (result && typeof (result as PromiseLike<unknown>).then === 'function') throw new TypeError('HtmlBox update must be synchronous.');\n      }\n    } catch (error) { this.retire(slot); throw error; }\n  }\n\n  private applyGeometry(projection: Projection, index: number): void {\n    const { registration: r, bounds, visible, opacity } = projection;\n    const slot = r.slot;\n    if (slot.disposed) return;\n    slot.shell!.style.width = `${r.border.width}px`; slot.shell!.style.height = `${r.border.height}px`;\n    slot.shell!.style.transform = projection.transformCss!; slot.shell!.style.zIndex = String(index);\n    slot.shell!.style.opacity = String(opacity); slot.shell!.style.overflow = r.overflow;\n    slot.content!.style.left = `${r.content.x}px`; slot.content!.style.top = `${r.content.y}px`;\n    slot.content!.style.width = `${r.content.width}px`; slot.content!.style.height = `${r.content.height}px`;\n    slot.content!.style.pointerEvents = r.interactive ? 'auto' : 'none';\n    slot.shell!.inert = !visible || !r.interactive;\n    slot.shell!.style.visibility = visible ? 'visible' : 'hidden';\n    slot.region.active = visible && r.interactive;\n    slot.region.rootBounds = bounds;\n    slot.callback = r.onFocusChange;\n    slot.events!.adopt(projection.events!);\n    if (visible) {\n      const previous = slot.clipping;\n      slot.clipping = projection.definitions!;\n      slot.shell!.style.clipPath = projection.clipPath!;\n      if (previous !== slot.clipping) for (const definition of previous ?? []) definition.remove();\n    }\n  }\n\n  private prepareClips(projection: Projection): void {\n    if (!projection.visible) return;\n    const slot = projection.registration.slot;\n    const clips = projection.clips;\n    const previous = slot.clipping;\n    let unchanged = previous?.length === clips.length;\n    const matrices: string[] = [];\n    for (let index = 0; index < clips.length; index++) {\n      const clip = clips[index];\n      matrices.push(cssMatrix(clip.matrix));\n      const path = previous?.[index]?.firstElementChild;\n      if (!path || path.getAttribute('d') !== clip.data || path.getAttribute('clip-rule') !== clip.rule ||\n          path.getAttribute('transform') !== matrices[index]) unchanged = false;\n    }\n    if (unchanged) {\n      projection.definitions = previous;\n      projection.clipPath = clips.length ? `url(#${previous![0].id})` : 'none';\n      return;\n    }\n    const definitions: SVGClipPathElement[] = [];\n    const doc = this.root.canvas!.ownerDocument;\n    for (let index = 0; index < clips.length; index++) {\n      const definition = doc.createElementNS(SVG, 'clipPath');\n      definition.id = `pibbl-html-clip-${++nextId}`;\n      definition.setAttribute('clipPathUnits', 'userSpaceOnUse');\n      const path = doc.createElementNS(SVG, 'path');\n      path.setAttribute('d', clips[index].data);\n      path.setAttribute('clip-rule', clips[index].rule);\n      path.setAttribute('transform', matrices[index]);\n      definition.append(path); definitions.push(definition);\n    }\n    for (let index = 0; index + 1 < definitions.length; index++) definitions[index].firstElementChild!.setAttribute('clip-path', `url(#${definitions[index + 1].id})`);\n    // New definitions cannot affect the live shell until its clip-path is adopted.\n    for (const definition of definitions) this.svg!.append(definition);\n    projection.definitions = definitions;\n    projection.clipPath = definitions.length ? `url(#${definitions[0].id})` : 'none';\n  }\n\n  private reset(): void {\n    for (const slot of this.live) this.retire(slot);\n    this.snapshots.clear();\n    this.viewport?.remove(); this.svg?.remove(); this.viewport = undefined; this.svg = undefined;\n  }\n  dispose(): void { if (this.disposed) return; this.disposed = true; this.reset(); }\n}\n\nfunction assertEffects(composite = GLOBAL_STATE.renderContext?.globalCompositeOperation): void {\n  if (GLOBAL_STATE.htmlFilterDepth || composite !== 'source-over') throw new Error('HtmlBox cannot be enclosed by Canvas filters or non-default compositing. Use CSS effects inside its content instead.');\n}\nfunction copy(matrix: DOMMatrixReadOnly): DOMMatrix { return new DOMMatrix([matrix.a,matrix.b,matrix.c,matrix.d,matrix.e,matrix.f]); }\nexport function snapshotClips(clips: readonly PibblClippingStackEntry[]): PibblClippingStackEntry[] {\n  return clips.map(clip => ({ ...clip, transform: copy(clip.transform) }));\n}\nfunction cssMatrix(m: DOMMatrixReadOnly): string { return `matrix(${m.a},${m.b},${m.c},${m.d},${m.e},${m.f})`; }\n\n\n/** Settle all fallible numeric projection work before publishing any host. */\nfunction prepareProjection(registration: HtmlBoxRegistration, world: DOMMatrix, rootMatrix: DOMMatrix, clips: Clip[], opacity: number): Projection {\n  const matrix = rootMatrix.multiply(world);\n  assertFiniteProjectionMatrix(matrix);\n  const width = registration.border.width;\n  const height = registration.border.height;\n  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;\n  for (let space = 0; space < 2; space++) {\n    const transform = space === 0 ? world : matrix;\n    let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;\n    for (let corner = 0; corner < 4; corner++) {\n      const x = corner & 1 ? width : 0;\n      const y = corner & 2 ? height : 0;\n      const projectedX = transform.a * x + transform.c * y + transform.e;\n      const projectedY = transform.b * x + transform.d * y + transform.f;\n      if (!Number.isFinite(projectedX) || !Number.isFinite(projectedY)) throw new Error('HtmlBox projection must be finite.');\n      left = Math.min(left, projectedX); top = Math.min(top, projectedY);\n      right = Math.max(right, projectedX); bottom = Math.max(bottom, projectedY);\n    }\n    if (!Number.isFinite(right - left) || !Number.isFinite(bottom - top)) throw new Error('HtmlBox projection must be finite.');\n    if (space === 0) { minX = left; minY = top; maxX = right; maxY = bottom; }\n  }\n  const bounds = { x: minX, y: minY, width: maxX - minX, height: maxY - minY };\n  if (!Number.isFinite(bounds.width) || !Number.isFinite(bounds.height)) throw new Error('HtmlBox projection must be finite.');\n  const determinant = matrix.a * matrix.d - matrix.b * matrix.c;\n  if (Number.isNaN(determinant)) throw new Error('HtmlBox projection must be finite.');\n  const visible = width > 0 && height > 0 && determinant !== 0;\n  const localClips: Clip[] = [];\n  if (visible && clips.length) {\n    const inverse = world.inverse();\n    assertFiniteProjectionMatrix(inverse);\n    for (const clip of clips) {\n      const local = inverse.multiply(clip.matrix);\n      assertFiniteProjectionMatrix(local);\n      localClips.push({ data: clip.data, rule: clip.rule, matrix: local });\n    }\n  }\n  return { registration, world, rootMatrix, matrix, bounds, visible, clips: localClips, opacity };\n}\nfunction assertFiniteProjectionMatrix(matrix: DOMMatrixReadOnly): void {\n  if (!(Number.isFinite(matrix.a) && Number.isFinite(matrix.b) && Number.isFinite(matrix.c) && Number.isFinite(matrix.d) && Number.isFinite(matrix.e) && Number.isFinite(matrix.f))) throw new Error('HtmlBox projection must be finite.');\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/lib/html/overlay-config.js

@@ -20,16 +20,17 @@ function validateHtmlOverlay(canvas, overlay) {
   if (!canvas.isConnected || !overlay.isConnected || canvas.parentElement !== overlay.parentElement || canvas.nextElementSibling !== overlay) {
     throw new Error("HtmlBox overlay and canvas must remain connected adjacent siblings.");
   }
-  for (const element of [canvas, overlay]) {
-    const style = view.getComputedStyle(element);
-    if (style.transform !== "none" || ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "borderLeftWidth", "borderRightWidth", "borderTopWidth", "borderBottomWidth"].some((key) => parseFloat(style[key]) !== 0)) {
-      throw new Error("HtmlBox canvas and overlay must have no independent CSS transform, padding, or border. Style their common wrapper instead.");
-    }
-  }
+  validateOverlayElement(view.getComputedStyle(canvas));
+  validateOverlayElement(view.getComputedStyle(overlay));
   if (Math.abs(canvas.clientWidth - overlay.clientWidth) > 1 || Math.abs(canvas.clientHeight - overlay.clientHeight) > 1 || canvas.offsetLeft !== overlay.offsetLeft || canvas.offsetTop !== overlay.offsetTop) {
     throw new Error("HtmlBox overlay must share the canvas content rectangle.");
   }
 }
+function validateOverlayElement(style) {
+  if (style.transform !== "none" || parseFloat(style.paddingLeft) !== 0 || parseFloat(style.paddingRight) !== 0 || parseFloat(style.paddingTop) !== 0 || parseFloat(style.paddingBottom) !== 0 || parseFloat(style.borderLeftWidth) !== 0 || parseFloat(style.borderRightWidth) !== 0 || parseFloat(style.borderTopWidth) !== 0 || parseFloat(style.borderBottomWidth) !== 0) {
+    throw new Error("HtmlBox canvas and overlay must have no independent CSS transform, padding, or border. Style their common wrapper instead.");
+  }
+}
 export {
   reserveHtmlOverlay,
   validateHtmlOverlay

package/dist/lib/html/overlay-config.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/lib/html/overlay-config.ts"],
-  "sourcesContent": ["import type { PibblInstance } from '../types.js';\n\nconst leases = new WeakMap<HTMLElement, PibblInstance>();\n\nexport function reserveHtmlOverlay(instance: PibblInstance, overlay: HTMLElement): void {\n  const canvas = instance.eventRoot.canvas;\n  if (!canvas || instance.parent) throw new Error('htmlOverlay requires an HTMLCanvasElement root, not a Layer.');\n  if (overlay?.nodeType !== 1 || overlay.namespaceURI !== 'http://www.w3.org/1999/xhtml' ||\n      overlay.ownerDocument !== canvas.ownerDocument || !overlay.isConnected || !canvas.isConnected ||\n      canvas.parentElement !== overlay.parentElement || canvas.nextElementSibling !== overlay) {\n    throw new Error('htmlOverlay must be a connected HTML element immediately after the canvas in the same parent and document.');\n  }\n  if (leases.has(overlay) || overlay.childNodes.length) throw new Error('htmlOverlay must be empty and exclusively owned by one Pibbl root.');\n  leases.set(overlay, instance);\n  instance.eventRoot.htmlOverlay = overlay;\n  instance.mainTeardowns.add(() => {\n    instance.eventRoot.html?.dispose();\n    instance.eventRoot.html = undefined;\n    instance.eventRoot.htmlOverlay = undefined;\n    if (leases.get(overlay) === instance) leases.delete(overlay);\n  });\n}\n\nexport function validateHtmlOverlay(canvas: HTMLCanvasElement, overlay: HTMLElement): void {\n  const view = canvas.ownerDocument.defaultView!;\n  if (!canvas.isConnected || !overlay.isConnected || canvas.parentElement !== overlay.parentElement || canvas.nextElementSibling !== overlay) {\n    throw new Error('HtmlBox overlay and canvas must remain connected adjacent siblings.');\n  }\n  for (const element of [canvas, overlay]) {\n    const style = view.getComputedStyle(element);\n    if (style.transform !== 'none' || ['paddingLeft','paddingRight','paddingTop','paddingBottom','borderLeftWidth','borderRightWidth','borderTopWidth','borderBottomWidth'].some(key => parseFloat(style[key as keyof CSSStyleDeclaration] as string) !== 0)) {\n      throw new Error('HtmlBox canvas and overlay must have no independent CSS transform, padding, or border. Style their common wrapper instead.');\n    }\n  }\n  if (Math.abs(canvas.clientWidth - overlay.clientWidth) > 1 || Math.abs(canvas.clientHeight - overlay.clientHeight) > 1 || canvas.offsetLeft !== overlay.offsetLeft || canvas.offsetTop !== overlay.offsetTop) {\n    throw new Error('HtmlBox overlay must share the canvas content rectangle.');\n  }\n}\n"],
-  "mappings": "AAEA,MAAM,SAAS,oBAAI,QAAoC;AAEhD,SAAS,mBAAmB,UAAyB,SAA4B;AACtF,QAAM,SAAS,SAAS,UAAU;AAClC,MAAI,CAAC,UAAU,SAAS,OAAQ,OAAM,IAAI,MAAM,8DAA8D;AAC9G,MAAI,SAAS,aAAa,KAAK,QAAQ,iBAAiB,kCACpD,QAAQ,kBAAkB,OAAO,iBAAiB,CAAC,QAAQ,eAAe,CAAC,OAAO,eAClF,OAAO,kBAAkB,QAAQ,iBAAiB,OAAO,uBAAuB,SAAS;AAC3F,UAAM,IAAI,MAAM,4GAA4G;AAAA,EAC9H;AACA,MAAI,OAAO,IAAI,OAAO,KAAK,QAAQ,WAAW,OAAQ,OAAM,IAAI,MAAM,oEAAoE;AAC1I,SAAO,IAAI,SAAS,QAAQ;AAC5B,WAAS,UAAU,cAAc;AACjC,WAAS,cAAc,IAAI,MAAM;AAC/B,aAAS,UAAU,MAAM,QAAQ;AACjC,aAAS,UAAU,OAAO;AAC1B,aAAS,UAAU,cAAc;AACjC,QAAI,OAAO,IAAI,OAAO,MAAM,SAAU,QAAO,OAAO,OAAO;AAAA,EAC7D,CAAC;AACH;AAEO,SAAS,oBAAoB,QAA2B,SAA4B;AACzF,QAAM,OAAO,OAAO,cAAc;AAClC,MAAI,CAAC,OAAO,eAAe,CAAC,QAAQ,eAAe,OAAO,kBAAkB,QAAQ,iBAAiB,OAAO,uBAAuB,SAAS;AAC1I,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,aAAW,WAAW,CAAC,QAAQ,OAAO,GAAG;AACvC,UAAM,QAAQ,KAAK,iBAAiB,OAAO;AAC3C,QAAI,MAAM,cAAc,UAAU,CAAC,eAAc,gBAAe,cAAa,iBAAgB,mBAAkB,oBAAmB,kBAAiB,mBAAmB,EAAE,KAAK,SAAO,WAAW,MAAM,GAAgC,CAAW,MAAM,CAAC,GAAG;AACxP,YAAM,IAAI,MAAM,4HAA4H;AAAA,IAC9I;AAAA,EACF;AACA,MAAI,KAAK,IAAI,OAAO,cAAc,QAAQ,WAAW,IAAI,KAAK,KAAK,IAAI,OAAO,eAAe,QAAQ,YAAY,IAAI,KAAK,OAAO,eAAe,QAAQ,cAAc,OAAO,cAAc,QAAQ,WAAW;AAC5M,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACF;",
+  "sourcesContent": ["import type { PibblInstance } from '../types.js';\n\nconst leases = new WeakMap<HTMLElement, PibblInstance>();\n\nexport function reserveHtmlOverlay(instance: PibblInstance, overlay: HTMLElement): void {\n  const canvas = instance.eventRoot.canvas;\n  if (!canvas || instance.parent) throw new Error('htmlOverlay requires an HTMLCanvasElement root, not a Layer.');\n  if (overlay?.nodeType !== 1 || overlay.namespaceURI !== 'http://www.w3.org/1999/xhtml' ||\n      overlay.ownerDocument !== canvas.ownerDocument || !overlay.isConnected || !canvas.isConnected ||\n      canvas.parentElement !== overlay.parentElement || canvas.nextElementSibling !== overlay) {\n    throw new Error('htmlOverlay must be a connected HTML element immediately after the canvas in the same parent and document.');\n  }\n  if (leases.has(overlay) || overlay.childNodes.length) throw new Error('htmlOverlay must be empty and exclusively owned by one Pibbl root.');\n  leases.set(overlay, instance);\n  instance.eventRoot.htmlOverlay = overlay;\n  instance.mainTeardowns.add(() => {\n    instance.eventRoot.html?.dispose();\n    instance.eventRoot.html = undefined;\n    instance.eventRoot.htmlOverlay = undefined;\n    if (leases.get(overlay) === instance) leases.delete(overlay);\n  });\n}\n\nexport function validateHtmlOverlay(canvas: HTMLCanvasElement, overlay: HTMLElement): void {\n  const view = canvas.ownerDocument.defaultView!;\n  if (!canvas.isConnected || !overlay.isConnected || canvas.parentElement !== overlay.parentElement || canvas.nextElementSibling !== overlay) {\n    throw new Error('HtmlBox overlay and canvas must remain connected adjacent siblings.');\n  }\n  validateOverlayElement(view.getComputedStyle(canvas));\n  validateOverlayElement(view.getComputedStyle(overlay));\n  if (Math.abs(canvas.clientWidth - overlay.clientWidth) > 1 || Math.abs(canvas.clientHeight - overlay.clientHeight) > 1 || canvas.offsetLeft !== overlay.offsetLeft || canvas.offsetTop !== overlay.offsetTop) {\n    throw new Error('HtmlBox overlay must share the canvas content rectangle.');\n  }\n}\n\nfunction validateOverlayElement(style: CSSStyleDeclaration): void {\n  if (\n    style.transform !== 'none' ||\n    parseFloat(style.paddingLeft) !== 0 || parseFloat(style.paddingRight) !== 0 ||\n    parseFloat(style.paddingTop) !== 0 || parseFloat(style.paddingBottom) !== 0 ||\n    parseFloat(style.borderLeftWidth) !== 0 || parseFloat(style.borderRightWidth) !== 0 ||\n    parseFloat(style.borderTopWidth) !== 0 || parseFloat(style.borderBottomWidth) !== 0\n  ) {\n      throw new Error('HtmlBox canvas and overlay must have no independent CSS transform, padding, or border. Style their common wrapper instead.');\n    }\n}\n"],
+  "mappings": "AAEA,MAAM,SAAS,oBAAI,QAAoC;AAEhD,SAAS,mBAAmB,UAAyB,SAA4B;AACtF,QAAM,SAAS,SAAS,UAAU;AAClC,MAAI,CAAC,UAAU,SAAS,OAAQ,OAAM,IAAI,MAAM,8DAA8D;AAC9G,MAAI,SAAS,aAAa,KAAK,QAAQ,iBAAiB,kCACpD,QAAQ,kBAAkB,OAAO,iBAAiB,CAAC,QAAQ,eAAe,CAAC,OAAO,eAClF,OAAO,kBAAkB,QAAQ,iBAAiB,OAAO,uBAAuB,SAAS;AAC3F,UAAM,IAAI,MAAM,4GAA4G;AAAA,EAC9H;AACA,MAAI,OAAO,IAAI,OAAO,KAAK,QAAQ,WAAW,OAAQ,OAAM,IAAI,MAAM,oEAAoE;AAC1I,SAAO,IAAI,SAAS,QAAQ;AAC5B,WAAS,UAAU,cAAc;AACjC,WAAS,cAAc,IAAI,MAAM;AAC/B,aAAS,UAAU,MAAM,QAAQ;AACjC,aAAS,UAAU,OAAO;AAC1B,aAAS,UAAU,cAAc;AACjC,QAAI,OAAO,IAAI,OAAO,MAAM,SAAU,QAAO,OAAO,OAAO;AAAA,EAC7D,CAAC;AACH;AAEO,SAAS,oBAAoB,QAA2B,SAA4B;AACzF,QAAM,OAAO,OAAO,cAAc;AAClC,MAAI,CAAC,OAAO,eAAe,CAAC,QAAQ,eAAe,OAAO,kBAAkB,QAAQ,iBAAiB,OAAO,uBAAuB,SAAS;AAC1I,UAAM,IAAI,MAAM,qEAAqE;AAAA,EACvF;AACA,yBAAuB,KAAK,iBAAiB,MAAM,CAAC;AACpD,yBAAuB,KAAK,iBAAiB,OAAO,CAAC;AACrD,MAAI,KAAK,IAAI,OAAO,cAAc,QAAQ,WAAW,IAAI,KAAK,KAAK,IAAI,OAAO,eAAe,QAAQ,YAAY,IAAI,KAAK,OAAO,eAAe,QAAQ,cAAc,OAAO,cAAc,QAAQ,WAAW;AAC5M,UAAM,IAAI,MAAM,0DAA0D;AAAA,EAC5E;AACF;AAEA,SAAS,uBAAuB,OAAkC;AAChE,MACE,MAAM,cAAc,UACpB,WAAW,MAAM,WAAW,MAAM,KAAK,WAAW,MAAM,YAAY,MAAM,KAC1E,WAAW,MAAM,UAAU,MAAM,KAAK,WAAW,MAAM,aAAa,MAAM,KAC1E,WAAW,MAAM,eAAe,MAAM,KAAK,WAAW,MAAM,gBAAgB,MAAM,KAClF,WAAW,MAAM,cAAc,MAAM,KAAK,WAAW,MAAM,iBAAiB,MAAM,GAClF;AACE,UAAM,IAAI,MAAM,4HAA4H;AAAA,EAC9I;AACJ;",
   "names": []
 }

package/dist/lib/html/types.d.ts

@@ -1,7 +1,9 @@
 import type { HtmlBox } from "../components/html-box.js";
+import type { PibblEventHandlers } from '../events/types.js';
+import type { HtmlNativeEvents } from './html-events.js';
 import type { GStyle } from '../components/g.js';
 import type { HtmlFocusRegion } from '../focus/html-focus-region.js';
-import type { PibblClippingStackEntry, PibblInstance, PibblInteractionLayer } from '../types.js';
+import type { PibblClippingStackEntry, PibblComponentRefs, PibblInstance, PibblInteractionLayer } from '../types.js';
 import type { LayoutBox } from '../layout/types.js';
 /**
  * Updates mounted application HTML when the owning HtmlBox receives new props.
@@ -40,6 +42,27 @@ export interface HtmlBoxFocusState {
     /** Whether focus should be presented as keyboard-visible. See {@link HtmlBoxFocusState}. */
     readonly isFocusVisible: boolean;
 }
+type HtmlBoxEvent<Event> = Event extends {
+    readonly x: number;
+    readonly y: number;
+} ? Event & {
+    readonly localX: number;
+    readonly localY: number;
+} : Event;
+/**
+ * Optional native event callbacks using Pibbl event names and capture/bubble phases.
+ * Coordinate events retain root-logical x/y and add border-local localX/localY,
+ * before padding and independent of the current ancestor handler. The originalEvent
+ * retains the real DOM target; target/currentTarget identify the logical Pibbl path.
+ * Native editing, cancellation and pointer capture remain browser-owned.
+ *
+ * @see {@link PibblEventHandlers}
+ * @see {@link HtmlBoxProps}
+ * @see {@link HtmlBox}
+ */
+export type HtmlBoxEventHandlers = {
+    [Key in keyof PibblEventHandlers]: (event: HtmlBoxEvent<Parameters<NonNullable<PibblEventHandlers[Key]>>[0]>) => void;
+};
 /**
  * Props for a DOM-hosting region, including mount ownership, updates, and focus behavior.
  *
@@ -47,7 +70,7 @@ export interface HtmlBoxFocusState {
  * @see {@link HtmlBoxFocusState}
  * @see {@link HtmlBox}
  */
-export interface HtmlBoxProps<Props> {
+export interface HtmlBoxProps<Props> extends HtmlBoxEventHandlers {
     /**
      * Application data supplied to the component or reported by the event. See {@link HtmlBoxProps}
      * .
@@ -82,6 +105,7 @@ export interface HtmlBridge {
 }
 export interface HtmlBoxRegistration {
     slot: HtmlBoxSlot;
+    handlers: HtmlBoxEventHandlers;
     data: unknown;
     matrix: DOMMatrix;
     clips: readonly PibblClippingStackEntry[];
@@ -93,8 +117,10 @@ export interface HtmlBoxRegistration {
     onFocusChange?: (state: Readonly<HtmlBoxFocusState>) => void;
 }
 export interface HtmlBoxSlot {
+    readonly component: PibblComponentRefs<any>;
     readonly owner: PibblInstance;
     readonly mount: HtmlMountCallback<unknown>;
+    events?: HtmlNativeEvents;
     region: HtmlFocusRegion & {
         content: HTMLDivElement | undefined;
         rootBounds: Readonly<LayoutBox> | undefined;
@@ -108,3 +134,4 @@ export interface HtmlBoxSlot {
     disposed: boolean;
     callback?: (state: Readonly<HtmlBoxFocusState>) => void;
 }
+export {};