@storystick/preview 0.0.0-stage → 0.2.0-rc.1

package/dist/runtime/preview-overlay-painter.js

@@ -0,0 +1,1732 @@
+import { isPreviewTargetRendered, scrollPreviewTargetIntoView } from "../reveal-target.js";
+import { getPreviewOverlayRegistryTuple, getPreviewOverlayTarget, } from "./preview-overlay-sidecar.js";
+import { installPreviewInteractionPolicy } from "./preview-interaction-policy.js";
+import { getInteractionMode } from "../interaction-mode.js";
+import { parsePublicSidecar, readPreviewProvenanceSidecarStore, } from "../provenance/index.js";
+import { isPreviewPerfEnabled, recordPreviewPerfMetric, previewPerfNow, } from "./perf-metrics.js";
+import { applyPreviewOverlayLabelVisualStyle, PREVIEW_OVERLAY_LABEL_GAP_PX, PREVIEW_OVERLAY_LABEL_HEIGHT_PX, PREVIEW_OVERLAY_VISUAL_STYLES, resolvePreviewOverlayLabelHorizontalPosition, } from "../overlay-label.js";
+const STYLE_ID = "storystick-preview-field-overlays-style";
+const ATTR = "data-ss-preview-field-overlay";
+const KEY_ATTR = "data-ss-preview-field-overlay-key";
+const DISPLAY_ATTR = "data-ss-preview-field-overlay-display";
+const REVEAL_ATTR = "data-ss-preview-v2-reveal-flash";
+const SYNTHETIC_ROOT_ATTR = "data-ss-preview-field-synthetic-overlay-root";
+const SYNTHETIC_BOX_ATTR = "data-ss-preview-field-synthetic-overlay-box";
+const SYNTHETIC_BOX_KEY_ATTR = "data-ss-preview-field-synthetic-overlay-key";
+const PREVIEW_CONTROLS_ATTR = "data-storystick-preview-controls";
+const SYNTHETIC_BOX_STATE_ATTR = "data-state";
+const SYNTHETIC_BOX_TONE_ATTR = "data-tone";
+const PREVIEW_PAINT_TARGET_REGISTRY_KEY = "__ssPreviewPaintTargetRegistryV1";
+const OVERLAY_STYLE = {
+    fillColor: "transparent",
+    activeFillColor: "transparent",
+    revealFillColor: "transparent",
+    borderWidth: 1.5,
+    radius: 1,
+    maxAdaptiveGeometryFrames: 12,
+};
+const SYNTHETIC_OVERLAY_STATE_TOKENS = {
+    default: buildSyntheticOverlayStateTokens("default"),
+    model: buildSyntheticOverlayStateTokens("model"),
+};
+function buildSyntheticOverlayStateTokens(tone) {
+    const visual = PREVIEW_OVERLAY_VISUAL_STYLES[tone];
+    return {
+        idle: { color: visual.color, fill: OVERLAY_STYLE.fillColor },
+        hover: { color: visual.color, fill: OVERLAY_STYLE.activeFillColor },
+        focus: { color: visual.color, fill: OVERLAY_STYLE.activeFillColor },
+        reveal: {
+            color: visual.revealColor,
+            fill: OVERLAY_STYLE.revealFillColor,
+        },
+        degraded: { color: visual.color, fill: "transparent" },
+    };
+}
+let decorated = [];
+let interactiveTargets = new WeakMap();
+let activeWindow = null;
+let activeClickHandler = null;
+let activeInteractionHandler = null;
+let listenersInstalled = false;
+let overlayDelegationActive = false;
+let editInteractionGuardCount = 0;
+let activeRevealFlashes = [];
+let cancelRevealScroll;
+let syntheticOverlayState = null;
+export function applyPreviewOverlayMap(payload, win, options = {}) {
+    const tupleMatches = matchesPreviewOverlayRegistryTuple(payload);
+    if (!tupleMatches) {
+        clearPreviewOverlayPaint();
+    }
+    ensureStyle(win.document);
+    activeWindow = win;
+    activeClickHandler =
+        typeof options === "function" ? options : (options.onClick ?? null);
+    const provenanceContext = resolvePreviewProvenanceOverlayContext(payload, win.document);
+    if (!tupleMatches && provenanceContext === null) {
+        return {
+            generation: payload.generation,
+            paintedCount: 0,
+            missingSnapshotItemKeys: payload.items.map((item) => item.snapshotItemKey),
+        };
+    }
+    let paintedCount = 0;
+    interactiveTargets = new WeakMap();
+    const missingSnapshotItemKeys = [];
+    const syntheticTargets = [];
+    const syntheticElements = new Map();
+    let provenanceTargets = null;
+    const hostDomMutationSafe = isPreviewPaintTargetDomMutationSafe(win);
+    for (const item of payload.items) {
+        const registryTarget = tupleMatches
+            ? getPreviewOverlayTarget(item.snapshotItemKey)
+            : null;
+        const targetElements = registryTarget !== null
+            ? [registryTarget]
+            : getPreviewProvenanceItemTargets(item, win.document, provenanceContext, () => {
+                provenanceTargets ??= collectProvenanceMarkerTargets(win.document, provenanceContext);
+                return provenanceTargets;
+            });
+        const connectedTargets = targetElements.filter((element) => win.document.contains(element));
+        if (connectedTargets.length === 0) {
+            missingSnapshotItemKeys.push(item.snapshotItemKey);
+            continue;
+        }
+        for (const element of connectedTargets) {
+            const interaction = {
+                generation: payload.generation,
+                snapshotItemKey: item.snapshotItemKey,
+                paintKey: item.paintKey,
+                routeHash: payload.routeHash,
+                codeVersion: payload.codeVersion,
+                renderId: payload.renderId,
+            };
+            interactiveTargets.set(element, interaction);
+            const visualTarget = richTextVisualTarget(element);
+            const existing = syntheticElements.get(visualTarget);
+            if (!existing) {
+                const target = { element: visualTarget, item };
+                syntheticElements.set(visualTarget, target);
+                syntheticTargets.push(target);
+                if (visualTarget !== element)
+                    interactiveTargets.set(visualTarget, interaction);
+            }
+            else if (visualTarget === element) {
+                // A repeated element has one winner for both painting and interaction.
+                // Richtext descendants still share their first block-level visual target.
+                existing.item = item;
+            }
+        }
+        paintedCount += 1;
+    }
+    if (hostDomMutationSafe) {
+        for (const target of syntheticTargets)
+            decorateElement(target.element, target.item, payload);
+    }
+    if (tupleMatches && syntheticOverlayState !== null) {
+        reconcileSyntheticOverlayRenderer(syntheticTargets, payload, win);
+    }
+    else {
+        installSyntheticOverlayRenderer(syntheticTargets, payload, win);
+    }
+    if (activeClickHandler !== null) {
+        overlayDelegationActive = true;
+        installEventDelegation(win);
+    }
+    // Synchronous target association, not a browser paint timestamp. Synthetic
+    // geometry is committed by the scheduled renderer below.
+    if (typeof win !== 'undefined') {
+        recordPreviewPerfMetric(win, {
+            name: 'preview.overlayPaintApplied',
+            ts: previewPerfNow(win),
+            detail: {
+                generation: payload.generation,
+                paintedCount,
+                routeHash: payload.routeHash,
+                renderId: payload.renderId,
+            },
+        });
+    }
+    return {
+        generation: payload.generation,
+        paintedCount,
+        missingSnapshotItemKeys,
+    };
+}
+export function clearPreviewOverlayPaint() {
+    clearSyntheticOverlayRenderer();
+    clearActiveRevealFlashes(activeWindow?.document);
+    for (const entry of decorated) {
+        for (const [name, previous] of entry.attrs) {
+            if (previous === null)
+                entry.element.removeAttribute(name);
+            else
+                entry.element.setAttribute(name, previous);
+        }
+    }
+    decorated = [];
+    interactiveTargets = new WeakMap();
+    overlayDelegationActive = false;
+    activeClickHandler = null;
+    maybeUninstallEventDelegation();
+}
+export function installPreviewEditInteractionGuard(win, options = {}) {
+    if (activeWindow !== null && activeWindow !== win) {
+        clearPreviewOverlayPaint();
+        uninstallEventDelegation();
+        activeWindow = null;
+        overlayDelegationActive = false;
+        editInteractionGuardCount = 0;
+        activeClickHandler = null;
+        interactiveTargets = new WeakMap();
+        activeInteractionHandler = null;
+    }
+    activeWindow = win;
+    activeInteractionHandler = options.onInteraction ?? null;
+    editInteractionGuardCount += 1;
+    installEventDelegation(win);
+    const releaseInteractionPolicy = installPreviewInteractionPolicy(win);
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        releaseInteractionPolicy();
+        if (activeWindow !== win)
+            return;
+        editInteractionGuardCount = Math.max(0, editInteractionGuardCount - 1);
+        if (editInteractionGuardCount === 0)
+            activeInteractionHandler = null;
+        maybeUninstallEventDelegation();
+    };
+}
+export function revealPreviewV2SourceInIframe(payload, win) {
+    clearActiveRevealFlashes(win.document);
+    const context = resolvePreviewProvenanceOverlayContext(payload, win.document);
+    if (context === null) {
+        return { status: "routeMissing", revealedCount: 0 };
+    }
+    if (payload.targets.some((target) => !context.markerIds.has(target.markerId))) {
+        return { status: "unknownSource", revealedCount: 0 };
+    }
+    ensureStyle(win.document);
+    let hiddenCount = 0;
+    let mountedCount = 0;
+    const revealed = [];
+    for (const target of payload.targets) {
+        const element = getPreviewV2RevealTargetElement(target.renderTargetId, target.markerId, win.document, context);
+        if (element === null || !win.document.contains(element))
+            continue;
+        mountedCount += 1;
+        if (!isPreviewTargetRendered(element)) {
+            hiddenCount += 1;
+            continue;
+        }
+        const visualTarget = richTextVisualTarget(element);
+        if (!revealed.includes(visualTarget))
+            revealed.push(visualTarget);
+        if (payload.behavior.flash) {
+            flashRevealElement(visualTarget, win, payload.behavior.scroll ? 5_000 : payload.behavior.durationMs);
+        }
+    }
+    // One scroll destination, all matching occurrences highlighted. Restart the
+    // flash lifetime at arrival so long smooth scrolls do not consume it.
+    if (payload.behavior.scroll && revealed[0]) {
+        cancelRevealScroll = scrollPreviewTargetIntoView(revealed[0], payload.behavior.flash ? () => {
+            for (const element of revealed) {
+                if (element.isConnected)
+                    flashRevealElement(element, win, payload.behavior.durationMs);
+            }
+        } : undefined);
+    }
+    const revealedCount = revealed.length;
+    if (revealedCount > 1)
+        return { status: "multiple", revealedCount };
+    if (revealedCount === 1)
+        return { status: "found", revealedCount };
+    if (hiddenCount > 0)
+        return { status: "hidden", revealedCount: 0 };
+    if (mountedCount === 0)
+        return { status: "notMounted", revealedCount: 0 };
+    return { status: "notMounted", revealedCount: 0 };
+}
+function matchesPreviewOverlayRegistryTuple(payload) {
+    const tuple = getPreviewOverlayRegistryTuple();
+    return (tuple !== null &&
+        tuple.routeHash === payload.routeHash &&
+        tuple.codeVersion === payload.codeVersion &&
+        tuple.cacheVersion === payload.cacheVersion &&
+        tuple.renderId === payload.renderId);
+}
+function resolvePreviewProvenanceOverlayContext(payload, doc) {
+    let routeFrameMatches = false;
+    const markerIds = new Set();
+    const multiMarkerIds = new Set();
+    const store = readPreviewProvenanceSidecarStore(doc.defaultView);
+    const storedSnapshot = store?.readSnapshot() ?? null;
+    const storedFrames = store?.readFrames() ?? [];
+    const frames = storedFrames.length > 0
+        ? storedFrames
+        : [...doc.querySelectorAll("script[data-ss-provenance-frame]")].map((script) => ({
+            frameId: script.getAttribute("data-ss-provenance-frame") ?? "",
+            sidecar: parsePublicSidecar(script.textContent),
+        }));
+    for (const { frameId, sidecar } of frames) {
+        if (sidecar.codeVersion !== payload.codeVersion)
+            continue;
+        if (sidecar.renderId.length === 0)
+            continue;
+        if (frameId === "route" &&
+            sidecar.routeHash === payload.routeHash &&
+            sidecar.renderId === payload.renderId) {
+            routeFrameMatches = true;
+        }
+        for (const marker of sidecar.markers) {
+            markerIds.add(marker.markerId);
+            if (marker.anchorMultiplicity === "multi") {
+                multiMarkerIds.add(marker.markerId);
+            }
+        }
+    }
+    if (!routeFrameMatches)
+        return null;
+    return {
+        routeHash: payload.routeHash,
+        codeVersion: payload.codeVersion,
+        renderId: payload.renderId,
+        sessionBoundByStore: storedFrames.length > 0 &&
+            storedSnapshot !== null &&
+            storedSnapshot.sessionId.length > 0,
+        markerIds,
+        multiMarkerIds,
+    };
+}
+function getPreviewV2RevealTargetElement(renderTargetId, markerId, doc, context) {
+    if (!markerId.startsWith("p_"))
+        return null;
+    if (!context.markerIds.has(markerId))
+        return null;
+    const resolved = getUniquePreviewPaintTarget(renderTargetId, doc);
+    if (resolved === null)
+        return null;
+    return resolved.markerId === markerId ? resolved.element : null;
+}
+function getUniquePreviewPaintTarget(renderTargetId, doc) {
+    const runtimeTarget = resolvePreviewPaintTargetFromRegistry(renderTargetId, doc);
+    let stamped = null;
+    for (const element of doc.querySelectorAll("[data-ss-preview-paint-id]")) {
+        if (element.getAttribute("data-ss-preview-paint-id") !== renderTargetId) {
+            continue;
+        }
+        if (stamped !== null)
+            return null;
+        stamped = element;
+    }
+    if (runtimeTarget !== null) {
+        if (runtimeTarget.element.ownerDocument !== doc ||
+            !doc.contains(runtimeTarget.element) ||
+            (stamped !== null && stamped !== runtimeTarget.element)) {
+            return null;
+        }
+        return runtimeTarget;
+    }
+    if (stamped === null)
+        return null;
+    const markerId = stamped.getAttribute("data-ss-e") ?? stamped.getAttribute("data-ss-p");
+    return markerId === null || markerId.length === 0
+        ? null
+        : { element: stamped, markerId };
+}
+function resolvePreviewPaintTargetFromRegistry(renderTargetId, doc) {
+    const registry = readPreviewPaintTargetRegistry(doc);
+    if (registry === null)
+        return null;
+    try {
+        const target = registry.resolve(renderTargetId);
+        if (target === null ||
+            !(target.element instanceof Element) ||
+            typeof target.markerId !== "string" ||
+            target.markerId.length === 0) {
+            return null;
+        }
+        return target;
+    }
+    catch {
+        return null;
+    }
+}
+function readPreviewPaintTargetRegistry(doc) {
+    const win = doc.defaultView;
+    const registry = win?.[PREVIEW_PAINT_TARGET_REGISTRY_KEY];
+    return registry !== null && typeof registry === "object" &&
+        typeof registry.resolve === "function"
+        ? registry
+        : null;
+}
+function isPreviewPaintTargetDomMutationSafe(win) {
+    const registry = readPreviewPaintTargetRegistry(win.document);
+    if (registry?.isDomMutationSafe === undefined)
+        return true;
+    try {
+        return registry.isDomMutationSafe();
+    }
+    catch {
+        return false;
+    }
+}
+function getPreviewProvenanceMarkerTargets(markerId, doc, context, targetsRef) {
+    if (!markerId.startsWith("p_"))
+        return [];
+    if (context === null || !context.markerIds.has(markerId))
+        return [];
+    if (!context.sessionBoundByStore &&
+        !doc.documentElement.hasAttribute("data-preview-message-session-id") &&
+        !doc.body?.hasAttribute("data-preview-message-session-id") &&
+        doc.querySelector("[data-preview-message-session-id]") === null) {
+        return [];
+    }
+    const targets = targetsRef();
+    return targets.get(markerId) ?? [];
+}
+function getPreviewProvenanceItemTargets(item, doc, context, targetsRef) {
+    const markerId = item.markerId ?? item.snapshotItemKey;
+    const targets = getPreviewProvenanceMarkerTargets(markerId, doc, context, targetsRef);
+    if (item.renderTargetId === undefined)
+        return targets;
+    const target = getUniquePreviewPaintTarget(item.renderTargetId, doc);
+    return target === null || target.markerId !== markerId
+        ? []
+        : [target.element];
+}
+function collectProvenanceMarkerTargets(doc, context) {
+    const collected = new Map();
+    for (const element of doc.querySelectorAll("[data-ss-e],[data-ss-p]")) {
+        const markerId = element.getAttribute("data-ss-e") ?? element.getAttribute("data-ss-p");
+        if (markerId === null || markerId.length === 0)
+            continue;
+        const existing = collected.get(markerId);
+        if (existing !== undefined)
+            existing.push(element);
+        else
+            collected.set(markerId, [element]);
+    }
+    const targets = new Map();
+    for (const [markerId, elements] of collected) {
+        if (elements.length === 1 || context?.multiMarkerIds.has(markerId)) {
+            targets.set(markerId, elements);
+        }
+        else {
+            targets.set(markerId, []);
+        }
+    }
+    return targets;
+}
+function flashRevealElement(element, win, durationMs) {
+    activeRevealFlashes = activeRevealFlashes.filter((entry) => {
+        if (entry.element !== element)
+            return true;
+        entry.win.clearTimeout(entry.timeoutId);
+        return false;
+    });
+    element.setAttribute(REVEAL_ATTR, "active");
+    const timeout = Math.max(0, Math.min(durationMs, 5_000));
+    const timeoutId = win.setTimeout(() => {
+        if (element.getAttribute(REVEAL_ATTR) === "active") {
+            element.removeAttribute(REVEAL_ATTR);
+        }
+        activeRevealFlashes = activeRevealFlashes.filter((entry) => entry.timeoutId !== timeoutId);
+    }, timeout);
+    activeRevealFlashes.push({ element, timeoutId, win });
+}
+function clearActiveRevealFlashes(doc) {
+    cancelRevealScroll?.();
+    cancelRevealScroll = undefined;
+    const docs = new Set();
+    if (doc !== undefined)
+        docs.add(doc);
+    for (const entry of activeRevealFlashes) {
+        entry.win.clearTimeout(entry.timeoutId);
+        docs.add(entry.element.ownerDocument);
+    }
+    activeRevealFlashes = [];
+    for (const activeDoc of docs) {
+        for (const element of activeDoc.querySelectorAll(`[${REVEAL_ATTR}]`)) {
+            element.removeAttribute(REVEAL_ATTR);
+        }
+    }
+}
+function decorateElement(element, item, payload) {
+    if (decorated.every((entry) => entry.element !== element)) {
+        decorated.push({
+            element,
+            attrs: new Map([
+                [ATTR, element.getAttribute(ATTR)],
+                [KEY_ATTR, element.getAttribute(KEY_ATTR)],
+                [DISPLAY_ATTR, element.getAttribute(DISPLAY_ATTR)],
+            ]),
+        });
+    }
+    element.setAttribute(ATTR, "field");
+    element.setAttribute(KEY_ATTR, item.paintKey);
+    element.setAttribute(DISPLAY_ATTR, payload.display);
+}
+function restoreDecoratedElement(element) {
+    const index = decorated.findIndex((entry) => entry.element === element);
+    if (index === -1)
+        return;
+    const [entry] = decorated.splice(index, 1);
+    if (entry === undefined)
+        return;
+    for (const [name, previous] of entry.attrs) {
+        if (previous === null)
+            element.removeAttribute(name);
+        else
+            element.setAttribute(name, previous);
+    }
+}
+function installSyntheticOverlayRenderer(targets, payload, win) {
+    if (targets.length === 0)
+        return;
+    const doc = win.document;
+    const root = doc.createElement("storystick-preview-field-overlays");
+    root.setAttribute(SYNTHETIC_ROOT_ATTR, "true");
+    root.setAttribute(DISPLAY_ATTR, payload.display);
+    root.setAttribute("aria-hidden", "true");
+    root.style.display = "block";
+    root.style.position = "absolute";
+    root.style.left = "0";
+    root.style.top = "0";
+    root.style.width = "0";
+    root.style.height = "0";
+    root.style.pointerEvents = "none";
+    root.style.zIndex = "2147483646";
+    root.style.isolation = "isolate";
+    root.style.overflow = "visible";
+    const entries = createSyntheticOverlayEntries(targets);
+    doc.documentElement.appendChild(root);
+    const targetElements = new Set(entries.map((entry) => entry.element));
+    const onSchedule = () => scheduleSyntheticOverlayUpdate("geometry");
+    const onResize = () => {
+        if (doc.visibilityState !== "hidden") {
+            invalidateSyntheticOverlayLabelWidths();
+            invalidateSyntheticOverlayPositioningModes();
+        }
+        onSchedule();
+    };
+    const onPointerMove = (event) => {
+        const state = syntheticOverlayState;
+        if (state === null)
+            return;
+        const target = findSyntheticOverlayTargetAtEventPoint(state, event);
+        const next = target === null
+            ? new Set()
+            : resolveSyntheticOverlayHoverTargets(target);
+        scheduleSyntheticOverlayHoverUpdate(state, next);
+    };
+    const onPointerOver = (event) => {
+        const state = syntheticOverlayState;
+        const target = findSyntheticOverlayTargetFromNode(state, event.target);
+        if (state === null || target === null)
+            return;
+        scheduleSyntheticOverlayHoverUpdate(state, resolveSyntheticOverlayHoverTargets(target));
+    };
+    const onPointerOut = (event) => {
+        const state = syntheticOverlayState;
+        if (state === null || state.hoveredTargets.size === 0)
+            return;
+        const related = event.relatedTarget;
+        if (isNode(related)) {
+            for (const hoveredTarget of state.hoveredTargets) {
+                if (hoveredTarget.contains(related))
+                    return;
+                const groupRoot = findSyntheticOverlayHoverGroupRoot(hoveredTarget);
+                if (groupRoot !== null &&
+                    isElementNode(related) &&
+                    (groupRoot === related || groupRoot.contains(related))) {
+                    return;
+                }
+            }
+        }
+        const relatedTarget = findSyntheticOverlayTargetFromNode(state, related);
+        if (relatedTarget !== null && state.hoveredTargets.has(relatedTarget)) {
+            return;
+        }
+        scheduleSyntheticOverlayHoverUpdate(state, new Set());
+    };
+    const onFocusIn = (event) => {
+        const state = syntheticOverlayState;
+        const target = findSyntheticOverlayTargetFromNode(state, event.target);
+        if (state === null || target === null)
+            return;
+        scheduleSyntheticOverlayFocusUpdate(state, target);
+    };
+    const onFocusOut = () => {
+        const state = syntheticOverlayState;
+        if (state === null)
+            return;
+        scheduleSyntheticOverlayFocusUpdate(state, null);
+    };
+    const onScroll = () => {
+        const state = syntheticOverlayState;
+        if (state?.intersectingTargets == null) {
+            scheduleSyntheticOverlayUpdate("geometry");
+            return;
+        }
+        const targets = new Set(state.intersectingTargets);
+        // Keep outgoing boxes in the pass that removes them. IO independently
+        // discovers incoming targets, including fixed/sticky elements.
+        for (const entry of state.entries) {
+            if (entry.boxes.length > 0)
+                targets.add(entry.element);
+        }
+        scheduleSyntheticOverlayUpdate("geometry", targets);
+    };
+    const onVisibilityChange = () => {
+        const state = syntheticOverlayState;
+        if (state === null)
+            return;
+        if (doc.visibilityState === "hidden") {
+            if (state.frameId !== null) {
+                cancelSyntheticAnimationFrame(win, state.frameId);
+                state.frameId = null;
+            }
+        }
+        else {
+            // Layout may have changed while hidden; remeasure once on return.
+            onResize();
+        }
+    };
+    const resizeObserver = createSyntheticResizeObserver(win, onSchedule);
+    if (resizeObserver !== null) {
+        for (const entry of entries)
+            resizeObserver.observe(entry.element);
+        resizeObserver.observe(doc.documentElement);
+        if (doc.body !== null)
+            resizeObserver.observe(doc.body);
+    }
+    const visibleTargets = new Set(targetElements);
+    const intersectingTargets = new Set(targetElements);
+    const intersectionObserver = createSyntheticIntersectionObserver(win, (records) => {
+        const changedTargets = new Set();
+        for (const record of records) {
+            if (!targetElements.has(record.target))
+                continue;
+            changedTargets.add(record.target);
+            if (record.isIntersecting)
+                intersectingTargets.add(record.target);
+            else
+                intersectingTargets.delete(record.target);
+            if (record.isIntersecting && record.intersectionRatio >= 0.3) {
+                visibleTargets.add(record.target);
+            }
+            else {
+                visibleTargets.delete(record.target);
+            }
+        }
+        if (changedTargets.size > 0) {
+            scheduleSyntheticOverlayUpdate("geometry", changedTargets);
+        }
+    });
+    if (intersectionObserver !== null) {
+        for (const entry of entries)
+            intersectionObserver.observe(entry.element);
+    }
+    const mutationObserver = createSyntheticMutationObserver(win, (records) => {
+        if (records.every(isSyntheticOverlayMutationRecord))
+            return;
+        onResize();
+    });
+    if (mutationObserver !== null) {
+        mutationObserver.observe(doc.documentElement, {
+            attributes: true,
+            childList: true,
+            subtree: true,
+            attributeFilter: [
+                "class",
+                "style",
+                "hidden",
+                ATTR,
+                KEY_ATTR,
+                DISPLAY_ATTR,
+                REVEAL_ATTR,
+            ],
+        });
+    }
+    win.addEventListener("resize", onResize, true);
+    win.addEventListener("scroll", onScroll, { capture: true, passive: true });
+    doc.addEventListener("pointermove", onPointerMove, true);
+    doc.addEventListener("pointerover", onPointerOver, true);
+    doc.addEventListener("pointerout", onPointerOut, true);
+    doc.addEventListener("focusin", onFocusIn, true);
+    doc.addEventListener("focusout", onFocusOut, true);
+    doc.addEventListener("visibilitychange", onVisibilityChange);
+    const fontsReady = doc.fonts?.ready;
+    if (fontsReady && typeof fontsReady.then === "function") {
+        void fontsReady.then(() => {
+            if (syntheticOverlayState?.root === root) {
+                invalidateSyntheticOverlayLabelWidths();
+                onSchedule();
+            }
+        }, () => undefined);
+    }
+    syntheticOverlayState = {
+        win,
+        root,
+        entries,
+        targetElements,
+        display: payload.display,
+        resizeObserver,
+        intersectionObserver,
+        mutationObserver,
+        visibleTargets: intersectionObserver === null ? null : visibleTargets,
+        intersectingTargets: intersectionObserver === null ? null : intersectingTargets,
+        frameId: null,
+        pendingUpdateKind: null,
+        pendingGeometryTargets: null,
+        geometryFollowUpsRemaining: 0,
+        pendingCommitMetricGeneration: payload.generation,
+        hoveredTargets: new Set(),
+        focusedTarget: null,
+        onSchedule,
+        onResize,
+        onPointerMove,
+        onPointerOver,
+        onPointerOut,
+        onFocusIn,
+        onFocusOut,
+        onScroll,
+        onVisibilityChange,
+    };
+    scheduleSyntheticOverlayUpdate("geometry");
+}
+function reconcileSyntheticOverlayRenderer(targets, payload, win) {
+    const state = syntheticOverlayState;
+    if (state === null)
+        return;
+    const previousByIdentity = new Map(state.entries.map((entry) => [entry.identity, entry]));
+    const nextEntries = createSyntheticOverlayEntries(targets, previousByIdentity);
+    const claimedIdentities = new Set(nextEntries.map((entry) => entry.identity));
+    const nextTargetElements = new Set(nextEntries.map((entry) => entry.element));
+    for (const entry of state.entries) {
+        if (claimedIdentities.has(entry.identity))
+            continue;
+        removeSyntheticOverlayEntryBoxes(entry);
+    }
+    for (const element of state.targetElements) {
+        if (nextTargetElements.has(element))
+            continue;
+        state.resizeObserver?.unobserve(element);
+        state.intersectionObserver?.unobserve(element);
+        state.visibleTargets?.delete(element);
+        state.intersectingTargets?.delete(element);
+        interactiveTargets.delete(element);
+        restoreDecoratedElement(element);
+    }
+    for (const element of nextTargetElements) {
+        if (state.targetElements.has(element))
+            continue;
+        state.resizeObserver?.observe(element);
+        state.intersectionObserver?.observe(element);
+        state.intersectingTargets?.add(element);
+    }
+    state.targetElements.clear();
+    for (const element of nextTargetElements)
+        state.targetElements.add(element);
+    if (state.visibleTargets !== null) {
+        state.visibleTargets.clear();
+        for (const element of nextTargetElements)
+            state.visibleTargets.add(element);
+    }
+    state.entries = nextEntries;
+    state.pendingCommitMetricGeneration = payload.generation;
+    state.display = payload.display;
+    state.root.setAttribute(DISPLAY_ATTR, payload.display);
+    state.hoveredTargets.clear();
+    state.focusedTarget = null;
+    clearActiveRevealFlashes(win.document);
+    if (nextEntries.length === 0) {
+        // Mirror the install path (which never creates a renderer for zero
+        // targets): an emptied reconcile tears the renderer down instead of
+        // keeping the root and document-level observers alive until a hard
+        // clear. Per-element bookkeeping already ran above.
+        clearSyntheticOverlayRenderer();
+        return;
+    }
+    scheduleSyntheticOverlayUpdate("geometry");
+}
+function createSyntheticOverlayEntries(targets, previousByIdentity = new Map()) {
+    const occurrenceBySnapshotItemKey = new Map();
+    return targets.map(({ element, item }) => {
+        const occurrence = occurrenceBySnapshotItemKey.get(item.snapshotItemKey) ?? 0;
+        occurrenceBySnapshotItemKey.set(item.snapshotItemKey, occurrence + 1);
+        const identity = syntheticOverlayTargetIdentity(item, occurrence);
+        const previous = previousByIdentity.get(identity);
+        return {
+            identity,
+            snapshotItemKey: item.snapshotItemKey,
+            renderTargetId: item.renderTargetId ?? null,
+            element,
+            paintKey: item.paintKey,
+            tone: item.tone === "model" ? "model" : "default",
+            crossDoc: item.crossDoc === true,
+            label: item.crossDoc === true && item.label !== undefined ? item.label : null,
+            boxes: previous?.boxes ?? [],
+            labelWidth: previous?.label === item.label &&
+                previous?.tone === (item.tone === "model" ? "model" : "default")
+                ? previous.labelWidth
+                : null,
+            lastRects: previous?.lastRects ?? [],
+            anchoredToViewport: previous?.element === element
+                ? previous.anchoredToViewport
+                : null,
+        };
+    });
+}
+function syntheticOverlayTargetIdentity(item, occurrence) {
+    if (item.renderTargetId !== undefined && item.renderTargetId.length > 0) {
+        return `render-target:${item.renderTargetId}`;
+    }
+    return `snapshot:${item.snapshotItemKey}:${occurrence}`;
+}
+function removeSyntheticOverlayEntryBoxes(entry) {
+    for (const box of entry.boxes)
+        box.remove();
+    entry.boxes = [];
+}
+function clearSyntheticOverlayRenderer() {
+    const state = syntheticOverlayState;
+    if (state === null)
+        return;
+    syntheticOverlayState = null;
+    if (state.frameId !== null) {
+        cancelSyntheticAnimationFrame(state.win, state.frameId);
+    }
+    state.pendingUpdateKind = null;
+    state.pendingGeometryTargets = null;
+    state.geometryFollowUpsRemaining = 0;
+    state.resizeObserver?.disconnect();
+    state.intersectionObserver?.disconnect();
+    state.mutationObserver?.disconnect();
+    state.win.removeEventListener("resize", state.onResize, true);
+    state.win.removeEventListener("scroll", state.onScroll, true);
+    state.win.document.removeEventListener("pointermove", state.onPointerMove, true);
+    state.win.document.removeEventListener("pointerover", state.onPointerOver, true);
+    state.win.document.removeEventListener("pointerout", state.onPointerOut, true);
+    state.win.document.removeEventListener("focusin", state.onFocusIn, true);
+    state.win.document.removeEventListener("focusout", state.onFocusOut, true);
+    state.win.document.removeEventListener("visibilitychange", state.onVisibilityChange);
+    state.root.remove();
+}
+function createSyntheticResizeObserver(win, callback) {
+    const ResizeObserverCtor = win.ResizeObserver;
+    if (typeof ResizeObserverCtor !== "function")
+        return null;
+    return new ResizeObserverCtor(callback);
+}
+function createSyntheticMutationObserver(win, callback) {
+    const MutationObserverCtor = win
+        .MutationObserver;
+    if (typeof MutationObserverCtor !== "function")
+        return null;
+    return new MutationObserverCtor(callback);
+}
+function createSyntheticIntersectionObserver(win, callback) {
+    const IntersectionObserverCtor = win
+        .IntersectionObserver;
+    if (typeof IntersectionObserverCtor !== "function")
+        return null;
+    return new IntersectionObserverCtor(callback, { threshold: [0, 0.3] });
+}
+function isSyntheticOverlayMutationRecord(record) {
+    const target = record.target;
+    if (!isElementNode(target))
+        return false;
+    return target.closest(`[${SYNTHETIC_ROOT_ATTR}]`) !== null;
+}
+function scheduleSyntheticOverlayUpdate(kind, targetElements) {
+    const state = syntheticOverlayState;
+    if (state === null)
+        return;
+    if (kind === "geometry") {
+        const nextTargets = targetElements === undefined ? null : new Set(targetElements);
+        if (state.pendingUpdateKind !== "geometry") {
+            state.pendingGeometryTargets = nextTargets;
+        }
+        else if (state.pendingGeometryTargets !== null) {
+            if (nextTargets === null) {
+                state.pendingGeometryTargets = null;
+            }
+            else {
+                for (const element of nextTargets) {
+                    state.pendingGeometryTargets.add(element);
+                }
+            }
+        }
+        state.pendingUpdateKind = "geometry";
+        state.geometryFollowUpsRemaining =
+            OVERLAY_STYLE.maxAdaptiveGeometryFrames - 1;
+    }
+    else if (state.pendingUpdateKind === null) {
+        state.pendingUpdateKind = "presentation";
+    }
+    if (state.frameId !== null)
+        return;
+    scheduleSyntheticOverlayFrame(state);
+}
+function scheduleSyntheticOverlayGeometryFollowUp(state, targetElements) {
+    if (state.geometryFollowUpsRemaining <= 0)
+        return;
+    state.geometryFollowUpsRemaining -= 1;
+    state.pendingUpdateKind = "geometry";
+    state.pendingGeometryTargets =
+        targetElements === null ? null : new Set(targetElements);
+}
+function scheduleSyntheticOverlayFrame(state) {
+    if (state.win.document.visibilityState === "hidden")
+        return;
+    let requestReturned = false;
+    let callbackRan = false;
+    const frameId = requestSyntheticAnimationFrame(state.win, () => {
+        callbackRan = true;
+        const current = syntheticOverlayState;
+        if (current === null)
+            return;
+        current.frameId = null;
+        if (current.win.document.visibilityState === "hidden")
+            return;
+        const kind = current.pendingUpdateKind ?? "presentation";
+        const geometryTargets = current.pendingGeometryTargets;
+        current.pendingUpdateKind = null;
+        current.pendingGeometryTargets = null;
+        const geometryChanged = kind === "geometry"
+            ? updateSyntheticOverlayGeometry(current, geometryTargets)
+            : (updateSyntheticOverlayPresentation(current), false);
+        if (geometryChanged) {
+            scheduleSyntheticOverlayGeometryFollowUp(current, geometryTargets);
+        }
+        else if (kind === "geometry") {
+            current.geometryFollowUpsRemaining = 0;
+        }
+        if (requestReturned && current.pendingUpdateKind !== null) {
+            scheduleSyntheticOverlayFrame(current);
+        }
+    });
+    requestReturned = true;
+    if (!callbackRan && syntheticOverlayState === state) {
+        state.frameId = frameId;
+    }
+    else if (callbackRan &&
+        syntheticOverlayState === state &&
+        state.pendingUpdateKind !== null) {
+        scheduleSyntheticOverlayFrame(state);
+    }
+}
+function requestSyntheticAnimationFrame(win, callback) {
+    if (typeof win.requestAnimationFrame === "function") {
+        return win.requestAnimationFrame(callback);
+    }
+    return win.setTimeout(callback, 16);
+}
+function cancelSyntheticAnimationFrame(win, frameId) {
+    if (typeof win.cancelAnimationFrame === "function") {
+        win.cancelAnimationFrame(frameId);
+        return;
+    }
+    win.clearTimeout(frameId);
+}
+function updateSyntheticOverlayGeometry(state, targetElements = null) {
+    const perfEnabled = isPreviewPerfEnabled(state.win);
+    const startedAt = perfEnabled ? previewPerfNow(state.win) : 0;
+    let geometryChanged = false;
+    let rectCount = 0;
+    let labelMeasurements = 0;
+    const entries = targetElements === null
+        ? state.entries
+        : state.entries.filter((entry) => targetElements.has(entry.element));
+    const reads = entries.map((entry) => {
+        entry.anchoredToViewport ??= hasViewportAnchoredAncestor(entry.element, state.win);
+        const rects = getSyntheticOverlayRects(entry.element, state.win, entry.anchoredToViewport);
+        rectCount += rects.length;
+        if (!sameSyntheticOverlayRects(entry.lastRects, rects)) {
+            geometryChanged = true;
+        }
+        const states = rects.map((rect) => resolveSyntheticOverlayBoxState(state, entry.element, rect.viewport));
+        return { entry, rects, states };
+    });
+    // Write structure for every entry before measuring any label. This creates
+    // one layout boundary instead of alternating target reads, DOM writes and
+    // pill width reads for every box.
+    for (const { entry, rects } of reads) {
+        ensureSyntheticOverlayEntryBoxes(state.root, entry, rects.length);
+        for (const box of entry.boxes)
+            ensureSyntheticOverlayBoxPill(box, entry);
+    }
+    for (const { entry } of reads) {
+        if (entry.labelWidth !== null || !entry.crossDoc || entry.label === null) {
+            continue;
+        }
+        const pill = entry.boxes[0]?.querySelector('[data-slot="ss-preview-cross-doc-pill"]');
+        if (pill === undefined || pill === null)
+            continue;
+        entry.labelWidth = Math.max(pill.getBoundingClientRect().width, pill.offsetWidth, pill.scrollWidth);
+        labelMeasurements += 1;
+    }
+    const viewportWidth = state.root.ownerDocument.documentElement.clientWidth ||
+        state.win.innerWidth;
+    let geometryWrites = 0;
+    for (const { entry, rects, states } of reads) {
+        for (let index = 0; index < entry.boxes.length; index++) {
+            const box = entry.boxes[index];
+            const rect = rects[index];
+            if (rect === undefined) {
+                if (setSyntheticOverlayBoxState(box, "degraded"))
+                    geometryWrites += 1;
+                continue;
+            }
+            if (setSyntheticOverlayBoxState(box, states[index] ?? "degraded")) {
+                geometryWrites += 1;
+            }
+            if (box.getAttribute(SYNTHETIC_BOX_KEY_ATTR) !== entry.paintKey) {
+                box.setAttribute(SYNTHETIC_BOX_KEY_ATTR, entry.paintKey); // C4: update paintKey in place
+                geometryWrites += 1;
+            }
+            const position = rect.anchoredToViewport ? "fixed" : "absolute";
+            if (box.style.position !== position) {
+                box.style.position = position;
+                geometryWrites += 1;
+            }
+            const width = `${rect.width}px`;
+            if (box.style.width !== width) {
+                box.style.width = width;
+                geometryWrites += 1;
+            }
+            const height = `${rect.height}px`;
+            if (box.style.height !== height) {
+                box.style.height = height;
+                geometryWrites += 1;
+            }
+            const transform = rect.anchoredToViewport
+                ? `translate3d(${rect.viewport.left}px, ${rect.viewport.top}px, 0)`
+                : `translate3d(${rect.documentX}px, ${rect.documentY}px, 0)`;
+            if (box.style.transform !== transform) {
+                box.style.transform = transform;
+                geometryWrites += 1;
+            }
+            geometryWrites += updateSyntheticOverlayPillPlacement(box, rect.viewport, entry.labelWidth, viewportWidth);
+        }
+        entry.lastRects = rects;
+    }
+    const committedGeneration = state.pendingCommitMetricGeneration;
+    const committedBoxCount = state.entries.reduce((count, entry) => count + entry.boxes.length, 0);
+    if (committedGeneration !== null && committedBoxCount > 0) {
+        state.pendingCommitMetricGeneration = null;
+        recordPreviewPerfMetric(state.win, {
+            name: "preview.overlayBoxesCommitted",
+            ts: previewPerfNow(state.win),
+            detail: {
+                generation: committedGeneration,
+                paintedCount: committedBoxCount,
+            },
+        });
+    }
+    if (perfEnabled) {
+        recordPreviewPerfMetric(state.win, {
+            name: "preview.overlayGeometryPass",
+            durationMs: Math.max(0, previewPerfNow(state.win) - startedAt),
+            detail: {
+                entryCount: entries.length,
+                rectCount,
+                geometryWrites,
+                labelMeasurements,
+                geometryChanged,
+                targeted: targetElements !== null,
+            },
+        });
+    }
+    return geometryChanged;
+}
+function updateSyntheticOverlayPresentation(state) {
+    const perfEnabled = isPreviewPerfEnabled(state.win);
+    const startedAt = perfEnabled ? previewPerfNow(state.win) : 0;
+    let stateWrites = 0;
+    for (const entry of state.entries) {
+        for (let index = 0; index < entry.boxes.length; index += 1) {
+            const box = entry.boxes[index];
+            const rect = entry.lastRects[index];
+            if (setSyntheticOverlayBoxState(box, rect === undefined
+                ? "degraded"
+                : resolveSyntheticOverlayBoxState(state, entry.element, rect.viewport))) {
+                stateWrites += 1;
+            }
+        }
+    }
+    if (perfEnabled) {
+        recordPreviewPerfMetric(state.win, {
+            name: "preview.overlayPresentationPass",
+            durationMs: Math.max(0, previewPerfNow(state.win) - startedAt),
+            detail: {
+                entryCount: state.entries.length,
+                stateWrites,
+            },
+        });
+    }
+}
+function sameSyntheticOverlayRects(left, right) {
+    if (left.length !== right.length)
+        return false;
+    return left.every((rect, index) => {
+        const candidate = right[index];
+        if (candidate === undefined)
+            return false;
+        return (Math.abs(rect.viewport.left - candidate.viewport.left) < 0.1 &&
+            Math.abs(rect.viewport.top - candidate.viewport.top) < 0.1 &&
+            Math.abs(rect.width - candidate.width) < 0.1 &&
+            Math.abs(rect.height - candidate.height) < 0.1 &&
+            rect.anchoredToViewport === candidate.anchoredToViewport);
+    });
+}
+function invalidateSyntheticOverlayLabelWidths() {
+    const state = syntheticOverlayState;
+    if (state === null)
+        return;
+    for (const entry of state.entries)
+        entry.labelWidth = null;
+}
+function invalidateSyntheticOverlayPositioningModes() {
+    const state = syntheticOverlayState;
+    if (state === null)
+        return;
+    for (const entry of state.entries)
+        entry.anchoredToViewport = null;
+}
+function ensureSyntheticOverlayEntryBoxes(root, entry, count) {
+    while (entry.boxes.length > count) {
+        entry.boxes.pop()?.remove();
+    }
+    while (entry.boxes.length < count) {
+        const box = root.ownerDocument.createElement("div");
+        box.setAttribute(SYNTHETIC_BOX_ATTR, "true");
+        box.setAttribute(SYNTHETIC_BOX_KEY_ATTR, entry.paintKey);
+        box.setAttribute(SYNTHETIC_BOX_STATE_ATTR, "idle");
+        box.setAttribute(SYNTHETIC_BOX_TONE_ATTR, entry.tone);
+        box.style.position = "absolute";
+        box.style.left = "0";
+        box.style.top = "0";
+        box.style.boxSizing = "border-box";
+        box.style.border = `${OVERLAY_STYLE.borderWidth}px solid ${SYNTHETIC_OVERLAY_STATE_TOKENS[entry.tone].idle.color}`;
+        box.style.borderRadius = `${OVERLAY_STYLE.radius}px`;
+        box.style.backgroundColor =
+            SYNTHETIC_OVERLAY_STATE_TOKENS[entry.tone].idle.fill;
+        box.style.overflow = "visible";
+        box.style.pointerEvents = "none";
+        box.style.cursor = "inherit";
+        box.style.transformOrigin = "0 0";
+        ensureSyntheticOverlayBoxPill(box, entry);
+        root.appendChild(box);
+        entry.boxes.push(box);
+    }
+    for (const box of entry.boxes) {
+        if (box.getAttribute(SYNTHETIC_BOX_TONE_ATTR) !== entry.tone) {
+            box.setAttribute(SYNTHETIC_BOX_TONE_ATTR, entry.tone);
+            const pill = box.querySelector('[data-slot="ss-preview-cross-doc-pill"]');
+            if (pill !== null)
+                applyPreviewOverlayLabelVisualStyle(pill, entry.tone);
+            // Force the next state application to pick up the new tone tokens.
+            box.removeAttribute(SYNTHETIC_BOX_STATE_ATTR);
+        }
+    }
+}
+function ensureSyntheticOverlayBoxPill(box, entry) {
+    let pill = box.querySelector('[data-slot="ss-preview-cross-doc-pill"]');
+    if (!entry.crossDoc || entry.label === null) {
+        pill?.remove();
+        return;
+    }
+    if (pill === null) {
+        pill = box.ownerDocument.createElement("span");
+        pill.setAttribute("data-slot", "ss-preview-cross-doc-pill");
+        pill.style.position = "absolute";
+        pill.style.top = `-${PREVIEW_OVERLAY_LABEL_HEIGHT_PX + PREVIEW_OVERLAY_LABEL_GAP_PX}px`;
+        pill.style.right = "0";
+        pill.style.maxWidth = "160px";
+        pill.style.overflow = "hidden";
+        pill.style.textOverflow = "ellipsis";
+        pill.style.whiteSpace = "nowrap";
+        pill.style.opacity = "0";
+        pill.style.pointerEvents = "none";
+        applyPreviewOverlayLabelVisualStyle(pill, entry.tone);
+        box.appendChild(pill);
+    }
+    // Geometry passes only reposition the label. Its visual tokens change on
+    // creation or tone reconciliation, not on every viewport resize frame.
+    if (pill.textContent !== entry.label)
+        pill.textContent = entry.label;
+}
+function setSyntheticOverlayBoxState(box, state) {
+    if (box.getAttribute(SYNTHETIC_BOX_STATE_ATTR) === state)
+        return false;
+    box.setAttribute(SYNTHETIC_BOX_STATE_ATTR, state);
+    const tone = box.getAttribute(SYNTHETIC_BOX_TONE_ATTR) === "model"
+        ? "model"
+        : "default";
+    const tokens = SYNTHETIC_OVERLAY_STATE_TOKENS[tone][state];
+    box.style.borderColor = tokens.color;
+    box.style.backgroundColor = tokens.fill;
+    const pill = box.querySelector('[data-slot="ss-preview-cross-doc-pill"]');
+    if (pill !== null) {
+        pill.style.opacity =
+            state === "hover" || state === "focus" || state === "reveal" ? "1" : "0";
+    }
+    return true;
+}
+function updateSyntheticOverlayPillPlacement(box, rect, labelWidth, viewportWidth) {
+    const pill = box.querySelector('[data-slot="ss-preview-cross-doc-pill"]');
+    if (pill === null)
+        return 0;
+    let writes = 0;
+    const labelOffset = PREVIEW_OVERLAY_LABEL_HEIGHT_PX + PREVIEW_OVERLAY_LABEL_GAP_PX;
+    const horizontal = resolvePreviewOverlayLabelHorizontalPosition({
+        targetLeft: rect.left,
+        targetWidth: rect.width,
+        labelWidth: labelWidth ?? 0,
+        viewportWidth: viewportWidth || rect.right,
+    });
+    const collideTop = rect.top < labelOffset;
+    const collisionTop = collideTop ? "true" : "false";
+    if (box.getAttribute("data-collision-top") !== collisionTop) {
+        box.setAttribute("data-collision-top", collisionTop);
+        writes += 1;
+    }
+    if (pill.getAttribute("data-horizontal-anchor") !== horizontal.anchor) {
+        pill.setAttribute("data-horizontal-anchor", horizontal.anchor);
+        writes += 1;
+    }
+    const left = `${horizontal.left - rect.left}px`;
+    if (pill.style.left !== left) {
+        pill.style.left = left;
+        writes += 1;
+    }
+    if (pill.style.right !== "auto") {
+        pill.style.right = "auto";
+        writes += 1;
+    }
+    const offset = `-${labelOffset}px`;
+    const top = collideTop ? "auto" : offset;
+    if (pill.style.top !== top) {
+        pill.style.top = top;
+        writes += 1;
+    }
+    const bottom = collideTop ? offset : "auto";
+    if (pill.style.bottom !== bottom) {
+        pill.style.bottom = bottom;
+        writes += 1;
+    }
+    return writes;
+}
+function getSyntheticOverlayRects(element, win, anchoredToViewport = hasViewportAnchoredAncestor(element, win)) {
+    let rects = Array.from(element.getClientRects());
+    if (rects.length === 0)
+        rects.push(element.getBoundingClientRect());
+    rects = coalesceRichTextOverlayRects(element, rects, win);
+    return rects.flatMap((rect) => isDrawableSyntheticRect(element, rect, win)
+        ? [
+            {
+                viewport: rect,
+                documentX: rect.left + win.scrollX,
+                documentY: rect.top + win.scrollY,
+                width: rect.width,
+                height: rect.height,
+                anchoredToViewport,
+            },
+        ]
+        : []);
+}
+function coalesceRichTextOverlayRects(element, rects, win) {
+    if (rects.length <= 1)
+        return rects;
+    if (!isRichTextInlineOverlayTarget(element, win))
+        return rects;
+    const drawable = rects.filter((rect) => isDrawableSyntheticRect(element, rect, win));
+    if (drawable.length <= 1)
+        return rects;
+    return [unionDomRects(drawable)];
+}
+function isRichTextInlineOverlayTarget(element, win) {
+    if (element.hasAttribute("data-ss-richtext-block"))
+        return true;
+    if (!element.hasAttribute("data-ss-p"))
+        return false;
+    const textBlock = findSyntheticOverlayHoverGroupRoot(element);
+    if (textBlock === null || textBlock === element)
+        return false;
+    const display = win.getComputedStyle(element).display;
+    return display === "inline" || display === "inline-block";
+}
+function richTextVisualTarget(element) {
+    if (!element.hasAttribute("data-ss-p") || element.hasAttribute("data-ss-richtext-link")) {
+        return element;
+    }
+    return element.closest("[data-ss-richtext-block]") ?? element;
+}
+function unionDomRects(rects) {
+    let left = Number.POSITIVE_INFINITY;
+    let top = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    for (const rect of rects) {
+        left = Math.min(left, rect.left);
+        top = Math.min(top, rect.top);
+        right = Math.max(right, rect.right);
+        bottom = Math.max(bottom, rect.bottom);
+    }
+    const width = right - left;
+    const height = bottom - top;
+    return {
+        x: left,
+        y: top,
+        left,
+        top,
+        right,
+        bottom,
+        width,
+        height,
+        toJSON: () => ({}),
+    };
+}
+function hasViewportAnchoredAncestor(element, win) {
+    let current = element;
+    while (current !== null) {
+        const position = win.getComputedStyle(current).position;
+        if (position === "fixed" || position === "sticky")
+            return true;
+        current = current.parentElement;
+    }
+    return false;
+}
+function resolveSyntheticOverlayBoxState(state, element, rect) {
+    if (!isSyntheticOverlayTargetIntersecting(state, element))
+        return "degraded";
+    if (!isSyntheticOverlayRectTopmost(element, rect, state.win)) {
+        return "degraded";
+    }
+    if (element.getAttribute(REVEAL_ATTR) === "active")
+        return "reveal";
+    if (state.focusedTarget === element)
+        return "focus";
+    if (state.hoveredTargets.has(element))
+        return "hover";
+    return "idle";
+}
+function resolveSyntheticOverlayHoverTargets(target) {
+    // Hover must identify the same single, most-specific DOM target that a
+    // click would route. Expanding to every provenance target in the nearest
+    // text block makes nested parent/inline overlays — and their cross-document
+    // labels — appear simultaneously even though only one is under the pointer.
+    return new Set([target]);
+}
+function scheduleSyntheticOverlayHoverUpdate(state, nextTargets) {
+    if (sameElementSet(state.hoveredTargets, nextTargets))
+        return;
+    const geometryTargets = new Set(state.hoveredTargets);
+    for (const element of nextTargets)
+        geometryTargets.add(element);
+    state.hoveredTargets = nextTargets;
+    // CSS :hover may move a target without producing a DOM mutation, resize or
+    // intersection event. Measure only the targets entering/leaving hover and
+    // let the adaptive frame budget follow an in-flight transform until stable.
+    scheduleSyntheticOverlayUpdate("geometry", geometryTargets);
+}
+function scheduleSyntheticOverlayFocusUpdate(state, nextTarget) {
+    if (state.focusedTarget === nextTarget)
+        return;
+    const geometryTargets = new Set();
+    if (state.focusedTarget !== null)
+        geometryTargets.add(state.focusedTarget);
+    if (nextTarget !== null)
+        geometryTargets.add(nextTarget);
+    state.focusedTarget = nextTarget;
+    // Focus styles have the same geometry risk as hover styles, so reuse the
+    // targeted and bounded animation follow-up instead of measuring every box.
+    scheduleSyntheticOverlayUpdate("geometry", geometryTargets);
+}
+function sameElementSet(a, b) {
+    if (a.size !== b.size)
+        return false;
+    for (const element of a) {
+        if (!b.has(element))
+            return false;
+    }
+    return true;
+}
+function findSyntheticOverlayHoverGroupRoot(target) {
+    return target.closest("p,li,blockquote,figcaption,caption,dt,dd,td,th,h1,h2,h3,h4,h5,h6");
+}
+function isSyntheticOverlayTargetIntersecting(state, element) {
+    return state.visibleTargets === null || state.visibleTargets.has(element);
+}
+function isDrawableSyntheticRect(element, rect, win) {
+    if (!element.ownerDocument.contains(element))
+        return false;
+    if (!Number.isFinite(rect.left) || !Number.isFinite(rect.top))
+        return false;
+    if (!Number.isFinite(rect.width) || !Number.isFinite(rect.height))
+        return false;
+    if (rect.width <= 0 || rect.height <= 0)
+        return false;
+    if (rect.right <= 0 || rect.bottom <= 0)
+        return false;
+    if (rect.left >= win.innerWidth || rect.top >= win.innerHeight)
+        return false;
+    const style = win.getComputedStyle(element);
+    if (style.display === "none")
+        return false;
+    if (style.visibility === "hidden" || style.visibility === "collapse") {
+        return false;
+    }
+    if (style.opacity === "0")
+        return false;
+    return true;
+}
+function isSyntheticOverlayRectTopmost(element, rect, win) {
+    const doc = element.ownerDocument;
+    if (typeof doc.elementFromPoint !== "function" &&
+        typeof doc.elementsFromPoint !== "function") {
+        return false;
+    }
+    const points = getSyntheticOverlayHitTestPoints(rect, win);
+    if (points.length === 0)
+        return false;
+    for (const point of points) {
+        const topmost = elementFromPointIgnoringSyntheticOverlays(doc, point.x, point.y);
+        if (topmost !== null && isCompatibleSyntheticTopmost(element, topmost)) {
+            return true;
+        }
+    }
+    return false;
+}
+function getSyntheticOverlayHitTestPoints(rect, win) {
+    const left = Math.max(0, rect.left);
+    const top = Math.max(0, rect.top);
+    const right = Math.min(win.innerWidth, rect.right);
+    const bottom = Math.min(win.innerHeight, rect.bottom);
+    if (right <= left || bottom <= top)
+        return [];
+    const insetX = Math.min(2, Math.max(0, (right - left) / 2));
+    const insetY = Math.min(2, Math.max(0, (bottom - top) / 2));
+    const center = {
+        x: left + (right - left) / 2,
+        y: top + (bottom - top) / 2,
+    };
+    const points = [
+        center,
+        { x: left + insetX, y: top + insetY },
+        { x: right - insetX, y: top + insetY },
+        { x: left + insetX, y: bottom - insetY },
+        { x: right - insetX, y: bottom - insetY },
+    ];
+    const seen = new Set();
+    return points.filter((point) => {
+        const x = Math.min(Math.max(point.x, 0), win.innerWidth - 1);
+        const y = Math.min(Math.max(point.y, 0), win.innerHeight - 1);
+        const key = `${Math.round(x * 10) / 10}:${Math.round(y * 10) / 10}`;
+        if (seen.has(key))
+            return false;
+        seen.add(key);
+        point.x = x;
+        point.y = y;
+        return true;
+    });
+}
+function elementFromPointIgnoringSyntheticOverlays(doc, x, y) {
+    if (typeof doc.elementsFromPoint === "function") {
+        return (doc
+            .elementsFromPoint(x, y)
+            .find((element) => !isSyntheticOverlayNode(element)) ?? null);
+    }
+    if (typeof doc.elementFromPoint !== "function")
+        return null;
+    const element = doc.elementFromPoint(x, y);
+    if (element === null || !isSyntheticOverlayNode(element))
+        return element;
+    return null;
+}
+function isSyntheticOverlayNode(element) {
+    return (element.hasAttribute(SYNTHETIC_ROOT_ATTR) ||
+        element.hasAttribute(SYNTHETIC_BOX_ATTR));
+}
+function isCompatibleSyntheticTopmost(target, topmost) {
+    if (topmost === target)
+        return true;
+    if (target.contains(topmost))
+        return true;
+    if (topmost !== target.ownerDocument.body &&
+        topmost !== target.ownerDocument.documentElement &&
+        topmost.contains(target)) {
+        return true;
+    }
+    return false;
+}
+function findSyntheticOverlayTargetFromNode(state, node) {
+    if (state === null)
+        return null;
+    let current = isNode(node) ? node : null;
+    while (current !== null) {
+        if (isElementNode(current)) {
+            if (state.targetElements.has(current)) {
+                return current;
+            }
+            const box = syntheticOverlayBoxForNode(current);
+            if (box !== null) {
+                // Boxes are entry-owned: membership is the unambiguous mapping.
+                // paintKey alone collides for multi-occurrence targets of one item.
+                const owner = state.entries.find((candidate) => candidate.boxes.includes(box));
+                if (owner !== undefined)
+                    return owner.element;
+                const paintKey = box.getAttribute(SYNTHETIC_BOX_KEY_ATTR);
+                if (paintKey !== null) {
+                    const entry = state.entries.find((candidate) => candidate.paintKey === paintKey);
+                    if (entry !== undefined)
+                        return entry.element;
+                }
+            }
+        }
+        current = current.parentNode;
+    }
+    return null;
+}
+function findSyntheticOverlayTargetAtEventPoint(state, event) {
+    const mouseEvent = event;
+    if (!Number.isFinite(mouseEvent.clientX) ||
+        !Number.isFinite(mouseEvent.clientY)) {
+        return null;
+    }
+    return findSyntheticOverlayTargetAtPoint(state, mouseEvent.clientX, mouseEvent.clientY);
+}
+function findSyntheticOverlayTargetAtPoint(state, x, y) {
+    const topmost = elementFromPointIgnoringSyntheticOverlays(state.win.document, x, y);
+    if (topmost === null)
+        return null;
+    const directTarget = findSyntheticOverlayTargetFromNode(state, topmost);
+    if (directTarget !== null)
+        return directTarget;
+    for (const entry of state.entries) {
+        if (!isSyntheticOverlayTargetIntersecting(state, entry.element))
+            continue;
+        if (!isCompatibleSyntheticTopmost(entry.element, topmost))
+            continue;
+        const rects = getSyntheticOverlayRects(entry.element, state.win);
+        if (rects.some((rect) => pointInRect(x, y, rect.viewport))) {
+            return entry.element;
+        }
+    }
+    return null;
+}
+function pointInRect(x, y, rect) {
+    return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
+function syntheticOverlayBoxForNode(element) {
+    if (element.hasAttribute(SYNTHETIC_BOX_ATTR))
+        return element;
+    return element.closest(`[${SYNTHETIC_BOX_ATTR}]`);
+}
+function installEventDelegation(win) {
+    if (listenersInstalled)
+        return;
+    listenersInstalled = true;
+    activeWindow = win;
+    win.document.addEventListener("pointerdown", onOverlayPointerDown, true);
+    win.document.addEventListener("pointerup", onOverlaySuppressOnly, true);
+    win.document.addEventListener("mousedown", onOverlaySuppressOnly, true);
+    win.document.addEventListener("mouseup", onOverlaySuppressOnly, true);
+    win.document.addEventListener("selectstart", onOverlaySuppressOnly, true);
+    win.document.addEventListener("dragstart", onOverlaySuppressOnly, true);
+    win.document.addEventListener("keydown", onOverlayKeyDown, true);
+    win.document.addEventListener("click", onOverlayClick, true);
+    win.document.addEventListener("dblclick", onOverlaySuppressOnly, true);
+    win.document.addEventListener("auxclick", onOverlaySuppressOnly, true);
+    win.document.addEventListener("contextmenu", onOverlaySuppressOnly, true);
+    win.document.addEventListener("submit", onOverlaySuppressOnly, true);
+}
+function maybeUninstallEventDelegation() {
+    if (overlayDelegationActive || editInteractionGuardCount > 0)
+        return;
+    uninstallEventDelegation();
+    activeWindow = null;
+}
+function uninstallEventDelegation() {
+    if (!listenersInstalled || activeWindow === null)
+        return;
+    listenersInstalled = false;
+    const doc = activeWindow.document;
+    doc.removeEventListener("pointerdown", onOverlayPointerDown, true);
+    doc.removeEventListener("pointerup", onOverlaySuppressOnly, true);
+    doc.removeEventListener("mousedown", onOverlaySuppressOnly, true);
+    doc.removeEventListener("mouseup", onOverlaySuppressOnly, true);
+    doc.removeEventListener("selectstart", onOverlaySuppressOnly, true);
+    doc.removeEventListener("dragstart", onOverlaySuppressOnly, true);
+    doc.removeEventListener("keydown", onOverlayKeyDown, true);
+    doc.removeEventListener("click", onOverlayClick, true);
+    doc.removeEventListener("dblclick", onOverlaySuppressOnly, true);
+    doc.removeEventListener("auxclick", onOverlaySuppressOnly, true);
+    doc.removeEventListener("contextmenu", onOverlaySuppressOnly, true);
+    doc.removeEventListener("submit", onOverlaySuppressOnly, true);
+}
+function onOverlayPointerDown(event) {
+    if (isPreviewControlsEvent(event))
+        return;
+    const button = normalizeMouseButton(event);
+    if (button !== null)
+        emitIframeInteraction(button);
+    if (!shouldBlockNativeInteraction())
+        return;
+    const target = getInteractiveTarget(event);
+    suppressNativeEvent(event);
+    if (target === null || button === null)
+        return;
+    emitOverlayClick(target, button);
+}
+function onOverlayClick(event) {
+    if (!shouldBlockNativeInteraction() || isPreviewControlsEvent(event))
+        return;
+    const target = getInteractiveTarget(event);
+    suppressNativeEvent(event);
+    if (target === null)
+        return;
+    const mouseEvent = event;
+    // Pointer/mouse clicks already emitted on pointerdown. Keyboard-
+    // generated click events have detail=0, so keep that path reachable.
+    if (mouseEvent.detail !== 0)
+        return;
+    emitOverlayClick(target, 0);
+}
+function onOverlayKeyDown(event) {
+    if (!shouldBlockNativeInteraction() || isPreviewControlsEvent(event))
+        return;
+    const target = getInteractiveTarget(event);
+    const key = event.key;
+    if (key !== "Enter" && key !== " ")
+        return;
+    suppressNativeEvent(event);
+    if (target === null)
+        return;
+    emitOverlayClick(target, 0);
+}
+function onOverlaySuppressOnly(event) {
+    if (!shouldBlockNativeInteraction() || isPreviewControlsEvent(event))
+        return;
+    suppressNativeEvent(event);
+}
+function shouldBlockNativeInteraction() {
+    return getInteractionMode() === "edit";
+}
+/** The customer document is inert while selecting content, but Storystick's
+ * own controls live in the same browsing realm. The composed path is the one
+ * stable boundary that includes the Shadow DOM host without coupling the
+ * preview package to any editor internals. */
+function isPreviewControlsEvent(event) {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+    return path.some((node) => isElementNode(node) && node.hasAttribute(PREVIEW_CONTROLS_ATTR));
+}
+function getInteractiveTarget(event) {
+    const path = typeof event.composedPath === "function" ? event.composedPath() : [];
+    for (const node of path) {
+        if (!isElementNode(node))
+            continue;
+        const target = interactiveTargets.get(node);
+        if (target !== undefined)
+            return target;
+    }
+    let node = event.target;
+    while (node !== null) {
+        if (isElementNode(node)) {
+            const target = interactiveTargets.get(node);
+            if (target !== undefined)
+                return target;
+        }
+        node = isNode(node) ? node.parentNode : null;
+    }
+    const syntheticTarget = syntheticOverlayState === null
+        ? null
+        : findSyntheticOverlayTargetAtEventPoint(syntheticOverlayState, event);
+    if (syntheticTarget !== null) {
+        return interactiveTargets.get(syntheticTarget) ?? null;
+    }
+    return null;
+}
+function isElementNode(node) {
+    const win = activeWindow;
+    if (win !== null) {
+        return node instanceof win.Element;
+    }
+    return typeof Element !== "undefined" && node instanceof Element;
+}
+function isNode(node) {
+    const win = activeWindow;
+    if (win !== null) {
+        return node instanceof win.Node;
+    }
+    return typeof Node !== "undefined" && node instanceof Node;
+}
+function suppressNativeEvent(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    event.stopImmediatePropagation();
+}
+function normalizeMouseButton(event) {
+    const button = event.button;
+    return button === 0 || button === 1 || button === 2 ? button : null;
+}
+function emitOverlayClick(target, button) {
+    activeClickHandler?.({
+        generation: target.generation,
+        snapshotItemKey: target.snapshotItemKey,
+        paintKey: target.paintKey,
+        routeHash: target.routeHash,
+        codeVersion: target.codeVersion,
+        renderId: target.renderId,
+        button,
+    });
+}
+function emitIframeInteraction(button) {
+    activeInteractionHandler?.({
+        kind: "pointerdown",
+        button,
+    });
+}
+function ensureStyle(doc) {
+    const css = `
+    [${ATTR}="field"] {
+      cursor: pointer;
+      user-select: none;
+    }
+    [${SYNTHETIC_ROOT_ATTR}] {
+      pointer-events: none;
+    }
+    [${SYNTHETIC_BOX_ATTR}] {
+      display: none;
+      transition: border-color 120ms ease, background-color 120ms ease;
+    }
+    [${SYNTHETIC_ROOT_ATTR}][${DISPLAY_ATTR}="always"] [${SYNTHETIC_BOX_ATTR}],
+    [${SYNTHETIC_BOX_ATTR}][${SYNTHETIC_BOX_STATE_ATTR}="hover"],
+    [${SYNTHETIC_BOX_ATTR}][${SYNTHETIC_BOX_STATE_ATTR}="focus"],
+    [${SYNTHETIC_BOX_ATTR}][${SYNTHETIC_BOX_STATE_ATTR}="reveal"] {
+      display: block;
+    }
+${buildSyntheticOverlayStateCss()}
+  `;
+    const existing = doc.getElementById(STYLE_ID);
+    if (existing !== null) {
+        if (existing.textContent !== css)
+            existing.textContent = css;
+        return;
+    }
+    const style = doc.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = css;
+    doc.head?.appendChild(style);
+}
+function buildSyntheticOverlayStateCss() {
+    return Object.entries(SYNTHETIC_OVERLAY_STATE_TOKENS)
+        .flatMap(([tone, states]) => Object.entries(states).map(([state, tokens]) => `    [${SYNTHETIC_BOX_ATTR}][${SYNTHETIC_BOX_TONE_ATTR}="${tone}"][${SYNTHETIC_BOX_STATE_ATTR}="${state}"] { border-color: ${tokens.color}; background-color: ${tokens.fill}; }`))
+        .join("\n");
+}