@satinhq/kit 0.0.0-stage → 0.1.0-beta.0

package/dist/glass/lens/Scene.js

@@ -0,0 +1,553 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { imageCapture, paintedImage } from '../../image/resource.js';
+import { SymbolImage } from '../../symbols/Symbol.js';
+import { SETTINGS_DETAIL_CONTENT_TOP_OFFSET_PX, SETTINGS_DETAIL_INLINE_INSET_PX, SETTINGS_DETAIL_ROW_HEIGHT_PX, SETTINGS_DISCLOSURE_DARK_COLOR, SETTINGS_DISCLOSURE_HEIGHT_PX, SETTINGS_DISCLOSURE_LIGHT_COLOR, SETTINGS_DISCLOSURE_OFFSET_X_PX, SETTINGS_DISCLOSURE_OFFSET_Y_PX, SETTINGS_DISCLOSURE_WIDTH_PX, SETTINGS_GROUP_CORNER_RADIUS_PX, SETTINGS_GROUP_SPACING_PX, SETTINGS_LARGE_TITLE_FONT_SIZE_PX, SETTINGS_LARGE_TITLE_LINE_HEIGHT_PX, SETTINGS_ROOT_LARGE_TITLE_TOP_OFFSET_PX, SETTINGS_ROOT_ROW_HEIGHT_PX, SETTINGS_ROW_ICON_CORNER_RADIUS_PX, SETTINGS_ROW_ICON_SIZE_PX, SETTINGS_ROW_TRAILING_INSET_PX, SETTINGS_SEPARATOR_HAIRLINE_PX, SETTINGS_SEPARATOR_LEADING_INSET_PX, SETTINGS_SEPARATOR_OFFSET_Y_PX, SETTINGS_SEPARATOR_TRAILING_INSET_PX, } from '../../settings/tokens.js';
+import { memo, useEffect, useRef } from 'react';
+import { GENERAL_GROUPS, ROOT_GROUPS, filterGroups, } from './data.js';
+import { ICON_SVG } from './icons.js';
+import { topLayerDialogOf } from '../topLayer.js';
+import { makeReferenceBackgroundCanvas, REFERENCE_CONTENT_HEIGHT_PX, } from './referenceBackground.js';
+import { GLASS_COMPACT_TAB_BAR_HEIGHT_PX, GLASS_TAB_BAR_BOTTOM_GAP_PX } from '../tokens.js';
+import { canTrackMirrorExtents, scanMirrorTree } from './mirrorExtents.js';
+import { reportGlassError } from '../errors.js';
+/* iOS 27 TabView platter geometry, remeasured against the measured-reference UIKit probe. */
+export const GLASS_DOCK_HEIGHT_PX = 62;
+/* native reference rough-edges, iPhone 17 Pro Max: horizontal icon/label platter is 44 pt. */
+export function glassDockHeight(layoutWidth, layoutHeight) {
+    return layoutWidth > layoutHeight ? GLASS_COMPACT_TAB_BAR_HEIGHT_PX : GLASS_DOCK_HEIGHT_PX;
+}
+export const GLASS_DOCK_WIDTH_PX = 360;
+export const GLASS_DOCK_SIDE_INSET_PX = 21;
+export const GLASS_DOCK_BOTTOM_GAP_PX = GLASS_TAB_BAR_BOTTOM_GAP_PX;
+/* The pinned iPhone 17 Pro Max (440 x 956) tab platter is 398 pt wide (measured-reference). */
+const CALIBRATED_MAX_DOCK_WIDTH_PX = 398;
+export const isCalibratedMaxLayout = (layoutWidth, screen) => layoutWidth === 440 && screen.width === 440 && screen.height === 956;
+/** The tab platter's width: the one rule for the glass renderer and the tab slot it reads. */
+export function glassDockWidth(layoutWidth, screen, insets = { left: 0, right: 0 }, layoutHeight) {
+    const preferred = isCalibratedMaxLayout(layoutWidth, screen)
+        ? CALIBRATED_MAX_DOCK_WIDTH_PX
+        : layoutWidth > (layoutHeight ?? Math.min(screen.width, screen.height))
+            ? 642
+            : GLASS_DOCK_WIDTH_PX;
+    return Math.max(0, Math.min(preferred, layoutWidth - insets.left - insets.right - GLASS_DOCK_SIDE_INSET_PX * 2));
+}
+export const GLASS_DOCK_RADIUS_PX = 30.8;
+export const GLASS_CIRCLE_SIZE_PX = 44;
+export const GLASS_CIRCLE_INLINE_INSET_PX = 16;
+export const GLASS_CIRCLE_TOP_PX = 8;
+// The selection material's 4.5 px source sigma uses taps through 3 sigma. Keep the
+// complete source neighbourhood outside even the leading/trailing pill.
+export const GLASS_OVERSCAN_X_PX = 64;
+// The inherited 36 px margin was smaller than the measured native endpoint
+// bounce (109 CSS px beyond General's legal range). Keep headroom around that
+// observed target value so the endpoint correction cannot expose a retained
+// RenderTexture edge.
+export const GLASS_OVERSCAN_Y_PX = 128;
+export { MARKER_INTERVAL_PX } from './mirrorConstants.js';
+const ROOT_SEARCH_TOP_PX = SETTINGS_ROOT_LARGE_TITLE_TOP_OFFSET_PX + SETTINGS_LARGE_TITLE_LINE_HEIGHT_PX + 8;
+const SEARCH_FIELD_HEIGHT_PX = 36;
+const ROOT_ACCOUNT_TOP_PX = ROOT_SEARCH_TOP_PX + SEARCH_FIELD_HEIGHT_PX + SETTINGS_GROUP_SPACING_PX;
+const ACCOUNT_CARD_HEIGHT_PX = 90;
+const ROOT_GROUPS_TOP_PX = ROOT_ACCOUNT_TOP_PX + ACCOUNT_CARD_HEIGHT_PX + SETTINGS_GROUP_SPACING_PX;
+const GENERAL_HERO_HEIGHT_PX = 195;
+const GENERAL_GROUPS_TOP_PX = SETTINGS_DETAIL_CONTENT_TOP_OFFSET_PX + GENERAL_HERO_HEIGHT_PX + SETTINGS_GROUP_SPACING_PX;
+export const SCENE_STYLE = {
+    '--settings-account-height': `${ACCOUNT_CARD_HEIGHT_PX}px`,
+    '--settings-account-top': `${ROOT_ACCOUNT_TOP_PX}px`,
+    '--settings-corner-radius': `${SETTINGS_GROUP_CORNER_RADIUS_PX}px`,
+    '--settings-detail-content-top': `${SETTINGS_DETAIL_CONTENT_TOP_OFFSET_PX}px`,
+    '--settings-detail-inset': `${SETTINGS_DETAIL_INLINE_INSET_PX}px`,
+    '--settings-detail-row-height': `${SETTINGS_DETAIL_ROW_HEIGHT_PX}px`,
+    '--settings-disclosure-dark': SETTINGS_DISCLOSURE_DARK_COLOR,
+    '--settings-disclosure-height': `${SETTINGS_DISCLOSURE_HEIGHT_PX}px`,
+    '--settings-disclosure-light': SETTINGS_DISCLOSURE_LIGHT_COLOR,
+    '--settings-disclosure-offset-x': `${SETTINGS_DISCLOSURE_OFFSET_X_PX}px`,
+    '--settings-disclosure-offset-y': `${SETTINGS_DISCLOSURE_OFFSET_Y_PX}px`,
+    '--settings-disclosure-width': `${SETTINGS_DISCLOSURE_WIDTH_PX}px`,
+    '--settings-general-groups-top': `${GENERAL_GROUPS_TOP_PX}px`,
+    '--settings-general-hero-height': `${GENERAL_HERO_HEIGHT_PX}px`,
+    '--settings-group-gap': `${SETTINGS_GROUP_SPACING_PX}px`,
+    '--settings-icon-radius': `${SETTINGS_ROW_ICON_CORNER_RADIUS_PX}px`,
+    '--settings-icon-size': `${SETTINGS_ROW_ICON_SIZE_PX}px`,
+    '--settings-large-title-font': `${SETTINGS_LARGE_TITLE_FONT_SIZE_PX}px`,
+    '--settings-large-title-line': `${SETTINGS_LARGE_TITLE_LINE_HEIGHT_PX}px`,
+    '--settings-root-groups-top': `${ROOT_GROUPS_TOP_PX}px`,
+    '--settings-root-inset': 'var(--satin-settings-root-inline-inset, 16px)',
+    '--settings-root-row-height': `${SETTINGS_ROOT_ROW_HEIGHT_PX}px`,
+    '--settings-root-title-top': `${SETTINGS_ROOT_LARGE_TITLE_TOP_OFFSET_PX}px`,
+    '--settings-search-height': `${SEARCH_FIELD_HEIGHT_PX}px`,
+    '--settings-search-top': `${ROOT_SEARCH_TOP_PX}px`,
+    '--settings-separator-hairline': `${SETTINGS_SEPARATOR_HAIRLINE_PX}px`,
+    '--settings-separator-leading': `${SETTINGS_SEPARATOR_LEADING_INSET_PX}px`,
+    '--settings-separator-offset-y': `${SETTINGS_SEPARATOR_OFFSET_Y_PX}px`,
+    '--settings-separator-trailing': `${SETTINGS_SEPARATOR_TRAILING_INSET_PX}px`,
+    '--settings-trailing-inset': `${SETTINGS_ROW_TRAILING_INSET_PX}px`,
+};
+function numeric(value, fallback = 0) {
+    const parsed = Number.parseFloat(value);
+    return Number.isFinite(parsed) ? parsed : fallback;
+}
+function measuredText(element, rect, hostRect, style) {
+    const isInput = element instanceof HTMLInputElement;
+    const paddingLeft = numeric(style.paddingLeft), paddingTop = numeric(style.paddingTop);
+    const value = isInput ? element.value || element.placeholder : (element.textContent?.trim() ?? '');
+    return {
+        color: style.color,
+        fontFamily: style.fontFamily,
+        fontSize: numeric(style.fontSize, 17),
+        fontWeight: style.fontWeight,
+        height: rect.height - paddingTop - numeric(style.paddingBottom),
+        id: element.dataset.mirrorId ?? value,
+        kind: 'text',
+        letterSpacing: numeric(style.letterSpacing),
+        lineHeight: numeric(style.lineHeight, rect.height),
+        text: value,
+        width: Math.max(1, rect.width - paddingLeft - numeric(style.paddingRight)),
+        x: rect.left - hostRect.left + paddingLeft,
+        y: rect.top - hostRect.top + paddingTop,
+    };
+}
+/** A presentation's content plane lies under its scroll views, which are planes of their own: its
+ * scan never enters them (a sheet's form is most of its elements). */
+function outsideNestedScrolls(host) {
+    const elements = [host];
+    const walker = document.createTreeWalker(host, NodeFilter.SHOW_ELEMENT, node => node.hasAttribute('data-satin-scroll')
+        ? NodeFilter.FILTER_REJECT
+        : NodeFilter.FILTER_ACCEPT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode())
+        elements.push(node);
+    return elements;
+}
+export function measureMirrorLayout(contentHost, screen, includeCoveredRoot = false, capture = 'viewport', captureRange) {
+    // WebKit can advance a compositor transform between synchronous layout reads.
+    // Accept only a snapshot whose common origin stayed fixed throughout the read.
+    // A rejected snapshot is retried before any source texture/cache is changed.
+    const before = contentHost.getBoundingClientRect();
+    const scrollLeft = contentHost.scrollLeft, scrollTop = contentHost.scrollTop;
+    const layout = measureMirrorLayoutSnapshot(contentHost, screen, includeCoveredRoot, capture, captureRange);
+    const after = contentHost.getBoundingClientRect();
+    if (before.x !== after.x ||
+        before.y !== after.y ||
+        before.width !== after.width ||
+        before.height !== after.height ||
+        scrollLeft !== contentHost.scrollLeft ||
+        scrollTop !== contentHost.scrollTop)
+        return undefined;
+    // LayoutUnit has six fractional bits in WebKit. Translation through FloatRect
+    // can add a 0.00003px cancellation residual to an otherwise exact layout width.
+    // Recover layout precision before rasterization, so settlement cannot turn that
+    // residual into a new texture key. Typography/style values remain untouched.
+    // https://github.com/WebKit/WebKit/blob/main/Source/WebCore/platform/LayoutUnit.h
+    const unit = (value) => Math.round(value * 64) / 64;
+    return {
+        ...layout,
+        width: unit(layout.width),
+        nodes: layout.nodes.map(node => ({
+            ...node,
+            x: unit(node.x),
+            y: unit(node.y),
+            width: unit(node.width),
+            height: unit(node.height),
+            clips: node.clips?.map(roundedMirrorClip),
+        })),
+    };
+}
+function roundedMirrorClip(clip) {
+    const unit = (value) => Math.round(value * 64) / 64;
+    const width = unit(clip.width);
+    const height = unit(clip.height);
+    // An empty clip hides every descendant regardless of its origin or corner radii.
+    // Keep the clip, but do not let compositor movement of its invisible origin
+    // invalidate an otherwise stable source. Positive-area geometry stays measured.
+    return width <= 0 || height <= 0
+        ? { x: 0, y: 0, width: 0, height: 0, radii: [0, 0, 0, 0] }
+        : { ...clip, x: unit(clip.x), y: unit(clip.y), width, height };
+}
+/** A host whose origin moves on every read (a route inside a running navigation
+ * transform) never passes the absolute-origin check. Its own layout is still
+ * stable: two consecutive snapshots with identical host-relative geometry are a
+ * consistent reading, whatever the origin did. Additive; measureMirrorLayout is unchanged. */
+export function measureMirrorLayoutRelative(contentHost, screen, includeCoveredRoot = false, capture = 'viewport', captureRange) {
+    const unit = (value) => Math.round(value * 64) / 64;
+    const read = () => {
+        const layout = measureMirrorLayoutSnapshot(contentHost, screen, includeCoveredRoot, capture, captureRange, true);
+        return {
+            ...layout,
+            width: unit(layout.width),
+            nodes: layout.nodes.map(node => ({
+                ...node,
+                x: unit(node.x),
+                y: unit(node.y),
+                width: unit(node.width),
+                height: unit(node.height),
+                clips: node.clips?.map(roundedMirrorClip),
+            })),
+        };
+    };
+    const first = read(), second = read();
+    // WebKit advances an accelerated transform between synchronous reads, so two elements of one
+    // moving route (a node and its clipping ancestor) can be read a fraction of a point apart.
+    // Numbers may differ by up to MOVING_TOLERANCE_PT; anything else must be identical.
+    const same = (a, b) => typeof a === 'number' && typeof b === 'number'
+        ? Math.abs(a - b) <= MOVING_TOLERANCE_PT
+        : Array.isArray(a) && Array.isArray(b)
+            ? a.length === b.length && a.every((v, i) => same(v, b[i]))
+            : a && b && typeof a === 'object' && typeof b === 'object'
+                ? Object.keys({ ...a, ...b }).every(k => same(a[k], b[k]))
+                : a === b;
+    if (same([first.width, first.contentHeight, first.nodes], [second.width, second.contentHeight, second.nodes]))
+        return second;
+    // Report the actual rejected field, not an earlier harmless sub-tolerance
+    // coordinate difference whose serialized prefix can hide the useful evidence.
+    const difference = (a, b, path) => {
+        if (same(a, b))
+            return '';
+        if (Array.isArray(a) && Array.isArray(b)) {
+            if (a.length !== b.length)
+                return `${path}.length: ${a.length} -> ${b.length}`;
+            for (let i = 0; i < a.length; i++) {
+                const changed = difference(a[i], b[i], `${path}[${i}]`);
+                if (changed)
+                    return changed;
+            }
+        }
+        else if (a && b && typeof a === 'object' && typeof b === 'object') {
+            for (const key of Object.keys({ ...a, ...b })) {
+                const changed = difference(a[key], b[key], `${path}.${key}`);
+                if (changed)
+                    return changed;
+            }
+        }
+        return `${path}: ${JSON.stringify(a)} -> ${JSON.stringify(b)}`;
+    };
+    lastUnstableMeasurement = difference({ width: first.width, contentHeight: first.contentHeight, nodes: first.nodes }, { width: second.width, contentHeight: second.contentHeight, nodes: second.nodes }, 'layout');
+    return undefined;
+}
+export let lastUnstableMeasurement = '';
+/** A moving route's navigation atlas cell is heavily blurred under the glass: a 2 pt reading skew is invisible there. */
+const MOVING_TOLERANCE_PT = 2;
+function measureMirrorLayoutSnapshot(contentHost, screen, includeCoveredRoot = false, capture = 'viewport', captureRange, relativeOrigins = false) {
+    const hostRect = contentHost.getBoundingClientRect();
+    const elements = [...contentHost.querySelectorAll('[data-mirror-kind]')];
+    if (!elements.length)
+        return measureConsumerMirror(contentHost, screen, includeCoveredRoot, capture, captureRange, relativeOrigins);
+    const nodes = elements.map((element, index) => {
+        const rect = element.getBoundingClientRect();
+        const origin = relativeOrigins ? contentHost.getBoundingClientRect() : hostRect;
+        const style = getComputedStyle(element);
+        const kind = element.dataset.mirrorKind;
+        if (kind === 'reference-background')
+            return {
+                color: 'transparent',
+                height: rect.height,
+                id: element.dataset.mirrorId ?? 'reference-background',
+                kind,
+                referenceBackground: element.dataset.referenceBackground,
+                sourceOffsetY: numeric(element.dataset.sourceOffsetY ?? '0'),
+                width: rect.width,
+                x: rect.left - origin.left,
+                y: rect.top - origin.top,
+            };
+        if (kind === 'text')
+            return measuredText(element, rect, origin, style);
+        return {
+            color: style.backgroundColor === 'rgba(0, 0, 0, 0)' ? style.color : style.backgroundColor,
+            height: rect.height,
+            icon: kind === 'icon' ? element.dataset.mirrorIcon : undefined,
+            id: element.dataset.mirrorId ?? `${kind}-${index}`,
+            kind,
+            radius: numeric(style.borderRadius),
+            width: rect.width,
+            x: rect.left - origin.left,
+            y: rect.top - origin.top,
+        };
+    });
+    return {
+        contentHeight: contentHost.scrollHeight,
+        measuredAt: performance.now(),
+        nodes,
+        screen,
+        width: hostRect.width,
+    };
+}
+function MirrorRect({ id, className, children, }) {
+    return (_jsx("div", { className: className, "data-mirror-kind": "rect", "data-mirror-id": id, children: children }));
+}
+function IconTile({ icon, tone }) {
+    return (_jsx("span", { className: `satin-lens-settings-icon satin-lens-settings-icon--${tone ?? 'gray'}`, "data-mirror-kind": "rect", "data-mirror-id": `tile-${icon}`, children: _jsx("span", { className: "satin-lens-settings-icon__symbol", "data-mirror-kind": "icon", "data-mirror-icon": icon, "data-mirror-id": `icon-${icon}`, dangerouslySetInnerHTML: { __html: ICON_SVG[icon] } }) }));
+}
+function Row({ row, onNavigate }) {
+    return (_jsxs("button", { className: "satin-lens-settings-row", type: "button", onClick: onNavigate, children: [_jsx(IconTile, { icon: row.icon, tone: row.tone }), _jsx("span", { className: "satin-lens-settings-row__label", "data-mirror-kind": "text", "data-mirror-id": `label-${row.id}`, children: row.label }), row.trailing ? (_jsx("span", { className: "satin-lens-settings-row__trailing", "data-mirror-kind": "text", "data-mirror-id": `trailing-${row.id}`, children: row.trailing })) : null, row.navigates ? (_jsx("span", { className: "satin-lens-settings-chevron", "data-mirror-kind": "chevron", "data-mirror-id": `chevron-${row.id}`, "aria-hidden": "true" })) : null] }));
+}
+function Groups({ groups, onOpenGeneral, }) {
+    return (_jsx("div", { className: "satin-lens-settings-groups", children: groups.map(group => (_jsxs("section", { className: "satin-lens-settings-group", "aria-label": group.header ?? group.id, children: [group.header ? (_jsx("h2", { "data-mirror-kind": "text", "data-mirror-id": `header-${group.id}`, children: group.header })) : null, _jsx(MirrorRect, { id: `group-${group.id}`, className: "satin-lens-settings-group__body", children: group.rows.map((row, index) => (_jsxs("div", { className: "satin-lens-settings-row-wrap", children: [index > 0 ? (_jsx("span", { className: "satin-lens-settings-separator", "data-mirror-kind": "rect", "data-mirror-id": `separator-${row.id}`, "aria-hidden": "true" })) : null, _jsx(Row, { row: row, onNavigate: row.id === 'general' ? onOpenGeneral : undefined })] }, row.id))) }), group.footer ? (_jsx("p", { "data-mirror-kind": "text", "data-mirror-id": `footer-${group.id}`, children: group.footer })) : null] }, group.id))) }));
+}
+function RootScene({ query, onQuery, onOpenGeneral, }) {
+    const groups = filterGroups(ROOT_GROUPS, query);
+    return (_jsxs(_Fragment, { children: [_jsx("h1", { className: "satin-lens-settings-large-title", "data-mirror-kind": "text", "data-mirror-id": "large-title", children: "Settings" }), _jsxs(MirrorRect, { id: "search-field", className: "satin-lens-settings-search-field", children: [_jsx(SymbolImage, { name: "magnifyingglass", className: "satin-lens-settings-search-icon" }), _jsx("input", { "aria-label": "Search Settings", "data-mirror-kind": "text", "data-mirror-id": "search-input", onChange: event => onQuery(event.currentTarget.value), placeholder: "Search", type: "search", value: query })] }), _jsxs(MirrorRect, { id: "account-card", className: "satin-lens-settings-account-card", children: [_jsx("span", { className: "satin-lens-account-mark", "data-mirror-kind": "rect", "data-mirror-id": "satin-lens-account-mark", "aria-hidden": "true" }), _jsxs("span", { className: "satin-lens-account-copy", children: [_jsx("strong", { "data-mirror-kind": "text", "data-mirror-id": "account-title", children: "Apple Account" }), _jsx("small", { "data-mirror-kind": "text", "data-mirror-id": "account-body", children: "Sign in to access your iCloud data, the App Store, Apple services, and more." })] }), _jsx("span", { className: "satin-lens-settings-chevron", "data-mirror-kind": "chevron", "data-mirror-id": "account-chevron", "aria-hidden": "true" })] }), _jsx("div", { className: "satin-lens-root-groups", children: _jsx(Groups, { groups: groups, onOpenGeneral: onOpenGeneral }) })] }));
+}
+function GeneralScene() {
+    return (_jsxs(_Fragment, { children: [_jsxs(MirrorRect, { id: "general-hero", className: "satin-lens-settings-general-hero", children: [_jsx(IconTile, { icon: "gear" }), _jsx("strong", { "data-mirror-kind": "text", "data-mirror-id": "general-title", children: "General" }), _jsx("p", { "data-mirror-kind": "text", "data-mirror-id": "general-body", children: "Manage your overall setup and preferences for iPhone, such as software updates, device language, CarPlay, AirDrop, and more." })] }), _jsx("div", { className: "satin-lens-general-groups", children: _jsx(Groups, { groups: GENERAL_GROUPS }) })] }));
+}
+export const SettingsDomScene = memo(function SettingsDomScene({ contentRef, onOpenGeneral, onQuery, query, screen, }) {
+    return (_jsx("div", { ref: contentRef, className: `satin-lens-settings-dom-content satin-lens-settings-dom-content--${screen}`, style: SCENE_STYLE, "data-screen": screen, children: screen === 'root' ? (_jsx(RootScene, { query: query, onQuery: onQuery, onOpenGeneral: onOpenGeneral })) : (_jsx(GeneralScene, {})) }));
+});
+export function ReferenceBackgroundScene({ contentRef, height, mode, sourceOffsetY, width, }) {
+    const canvasRef = useRef(null);
+    const contentHeight = Math.max(height, REFERENCE_CONTENT_HEIGHT_PX - sourceOffsetY);
+    useEffect(() => {
+        const target = canvasRef.current;
+        if (!target)
+            return;
+        const source = makeReferenceBackgroundCanvas(mode, sourceOffsetY, width, contentHeight, window.devicePixelRatio);
+        target.width = source.width;
+        target.height = source.height;
+        target.getContext('2d')?.drawImage(source, 0, 0);
+    }, [contentHeight, mode, sourceOffsetY, width]);
+    return (_jsx("div", { ref: contentRef, className: "satin-lens-reference-background-content", style: { height: contentHeight, width }, "data-screen": mode, children: _jsx("canvas", { ref: canvasRef, className: "satin-lens-reference-background-canvas", "data-mirror-id": `reference-${mode}`, "data-mirror-kind": "reference-background", "data-reference-background": mode, "data-source-offset-y": sourceOffsetY }) }));
+}
+const mirrorAudit = () => globalThis.__SATIN_MIRROR_AUDIT__;
+/** Capture semantic app content once at a layout boundary, without app annotations. */
+function measureConsumerMirror(host, screen, includeCoveredRoot = false, capture = 'viewport', captureRange, relativeOrigins = false) {
+    const layout = measureConsumerNodes(host, screen, includeCoveredRoot, capture, captureRange, true, relativeOrigins);
+    const audit = mirrorAudit();
+    if (!audit || !captureRange)
+        return layout;
+    const whole = measureConsumerNodes(host, screen, includeCoveredRoot, capture, captureRange, false, relativeOrigins);
+    audit.scans++;
+    const bounded = JSON.stringify(layout.nodes);
+    if (bounded !== JSON.stringify(whole.nodes)) {
+        const detail = `${host.dataset.satinScroll ?? host.tagName}: bounded ${layout.nodes.length} nodes, whole-tree ${whole.nodes.length}`;
+        audit.mismatches.push(detail);
+        reportGlassError('presentation', Error(detail), 'backdrop capture', 'bounded-scan-mismatch');
+    }
+    return layout;
+}
+function measureConsumerNodes(host, screen, includeCoveredRoot, capture, captureRange, bounded, relativeOrigins = false) {
+    const bounds = host.getBoundingClientRect();
+    const nodes = [];
+    // A modal dialog paints in the top layer, not in its DOM ancestor's plane: its content is its
+    // own backdrop plane (discoverBackdropHosts), never part of the page it is nested in. A
+    // non-modal dialog (show()) paints in flow and stays part of the page.
+    const hostDialog = topLayerDialogOf(host);
+    const presentationContent = host.hasAttribute?.('data-satin-presentation-content') === true;
+    const afterPaint = [];
+    const chains = new Map();
+    const clipChain = (parent) => {
+        if (!parent || !host.contains(parent))
+            return [];
+        const known = chains.get(parent);
+        if (known)
+            return known;
+        const paint = getComputedStyle(parent), own = [];
+        // A scrolling host's own scrollport is not a clip of its capture. The plane holds the host's
+        // whole scroll content, and the compositor clips it to the scrollport in viewport space at the
+        // live scroll offset (backdropClip). Baked in here, in content space at the capture-time
+        // offset, it dropped every row outside the viewport the capture was measured at, so glass
+        // over content scrolled in later refracted the page fill.
+        const hostScrollport = parent === host &&
+            (['auto', 'scroll'].includes(paint.overflowX) || ['auto', 'scroll'].includes(paint.overflowY));
+        if (!hostScrollport &&
+            // display:contents has computed overflow but generates no clipping box.
+            paint.display !== 'contents' &&
+            ['hidden', 'clip', 'auto', 'scroll'].includes(paint.overflowX) &&
+            ['hidden', 'clip', 'auto', 'scroll'].includes(paint.overflowY)) {
+            const clip = parent.getBoundingClientRect();
+            const clipOrigin = relativeOrigins
+                ? parent === host
+                    ? clip
+                    : host.getBoundingClientRect()
+                : bounds;
+            const radii = [
+                paint.borderTopLeftRadius,
+                paint.borderTopRightRadius,
+                paint.borderBottomRightRadius,
+                paint.borderBottomLeftRadius,
+            ].map(value => numeric(value));
+            // A plane capture of a host that does not scroll also leaves its rectangular
+            // clip to the backdrop compositor. Rounded and nested clips still belong to
+            // the captured pixels.
+            if (capture !== 'plane' || parent !== host || radii.some(radius => radius !== 0)) {
+                own.push({
+                    x: clip.left - clipOrigin.left + host.scrollLeft,
+                    y: clip.top - clipOrigin.top + host.scrollTop,
+                    width: clip.width,
+                    height: clip.height,
+                    radii,
+                });
+            }
+        }
+        const chain = parent === host ? own : [...own, ...clipChain(parent.parentElement)];
+        chains.set(parent, chain);
+        return chain;
+    };
+    const measureElement = (element, ranged) => {
+        while (afterPaint.length && !afterPaint.at(-1).element.contains(element))
+            nodes.push(afterPaint.pop().node);
+        // A windowed capture reads one rectangle for an element outside its range (the raster's
+        // paint margin included) and nothing else: no style, no ancestor walk, no text range.
+        // Subtrees that cannot reach the range are not visited at all (scanMirrorTree).
+        if (ranged && captureRange) {
+            const rangedTop = ranged.top - bounds.top + host.scrollTop;
+            const outside = (range) => rangedTop + ranged.height < range.top - 64 || rangedTop > range.bottom + 64;
+            if (captureRange.bands ? captureRange.bands.every(outside) : outside(captureRange))
+                return;
+        }
+        if (element.closest('dialog') && topLayerDialogOf(element) !== hostDialog)
+            return;
+        // Navigation title layers are foreground chrome, even when exposed to AX.
+        // Accessibility visibility must not put their backdrop into the glass source.
+        // The search drawer is navigation chrome pinned inside the scroll view (search/SearchDrawer.tsx):
+        // its field and scope labels would show through their own glass.
+        const excluded = element.closest('[data-satin-covered="true"], [aria-hidden="true"], [data-satin-liquid], [data-satin-navigation-title-stage], [data-satin-search], [data-satin-searchable] > [data-satin-list-title], [data-satin-searchable] > [data-satin-scroll-content] > [data-satin-scroll-title]');
+        if (excluded && (!includeCoveredRoot || host.contains(excluded)))
+            return;
+        const accessibleActions = element.closest('[data-satin-action-access]');
+        if (accessibleActions && getComputedStyle(accessibleActions).clipPath?.startsWith('inset('))
+            return;
+        // Pair each node with the host on the same short read path. A cached origin
+        // can drift throughout a large scan while the compositor keeps translating.
+        // This preserves descendant motion and all existing stability tolerances.
+        const rect = relativeOrigins
+            ? element.getBoundingClientRect()
+            : (ranged ?? element.getBoundingClientRect());
+        const origin = relativeOrigins
+            ? element === host
+                ? rect
+                : host.getBoundingClientRect()
+            : bounds;
+        const style = getComputedStyle(element);
+        if (!rect.width || !rect.height || style.display === 'none' || style.visibility === 'hidden')
+            return;
+        // Content of a glass region is drawn above that glass, not into its backdrop. A presentation's
+        // own material around the whole plane is different: it never samples its content (it samples
+        // below its dialog), and that content is ordinary backdrop for the glass nested in it.
+        const region = element.closest('[data-satin-glass-region-id]');
+        const presentationMaterial = !!region?.classList?.contains('satin-presentation-surface') && !host.contains(region);
+        const glassRegionId = presentationMaterial ? undefined : region?.dataset.satinGlassRegionId;
+        const clips = clipChain(element.parentElement);
+        const box = {
+            sourceElement: `${element.tagName?.toLowerCase() ?? 'element'}${element.id ? `#${element.id}` : ''}${typeof element.className === 'string' && element.className ? `.${element.className.trim().replace(/\s+/g, '.')}` : ''}`.slice(0, 200),
+            clips,
+            glassRegionId,
+            regionId: glassRegionId,
+            x: rect.left - origin.left + host.scrollLeft,
+            y: rect.top - origin.top + host.scrollTop,
+            width: rect.width,
+            height: rect.height,
+        };
+        if ((capture !== 'plane' || element !== host) &&
+            style.backgroundColor !== 'rgba(0, 0, 0, 0)' &&
+            style.backgroundColor !== 'transparent') {
+            nodes.push({
+                ...box,
+                id: `background-${nodes.length}`,
+                kind: 'rect',
+                color: style.backgroundColor,
+                radius: numeric(style.borderRadius),
+            });
+        }
+        // Background images (gradients) paint above the background colour, below the content.
+        if (style.backgroundImage && style.backgroundImage !== 'none') {
+            nodes.push({
+                ...box,
+                id: `background-image-${nodes.length}`,
+                kind: 'background',
+                color: 'transparent',
+                radius: numeric(style.borderRadius),
+                background: {
+                    image: style.backgroundImage,
+                    size: style.backgroundSize,
+                    position: style.backgroundPosition,
+                    repeat: style.backgroundRepeat,
+                },
+            });
+        }
+        if (typeof HTMLImageElement !== 'undefined' && element instanceof HTMLImageElement) {
+            nodes.push({
+                ...box,
+                id: `image-${nodes.length}`,
+                kind: 'image',
+                color: 'transparent',
+                imageSource: imageCapture(element)?.source ??
+                    (element.dataset.satinImageState === 'error'
+                        ? element.src
+                        : element.currentSrc || element.src),
+                imageReady: paintedImage(element),
+                imageFit: style.objectFit,
+            });
+        }
+        for (const pseudo of ['::before', '::after']) {
+            const paint = getComputedStyle(element, pseudo);
+            if (!paint.content ||
+                paint.content === 'none' ||
+                paint.content === 'normal' ||
+                paint.display === 'none' ||
+                paint.position !== 'absolute' ||
+                paint.backgroundColor === 'rgba(0, 0, 0, 0)' ||
+                paint.backgroundColor === 'transparent')
+                continue;
+            const height = numeric(paint.height), width = paint.width === 'auto'
+                ? rect.width - numeric(paint.left) - numeric(paint.right)
+                : numeric(paint.width);
+            if (height <= 0 || width <= 0)
+                continue;
+            const node = {
+                ...box,
+                id: `pseudo-${nodes.length}`,
+                kind: 'rect',
+                color: paint.backgroundColor,
+                radius: numeric(paint.borderRadius),
+                x: box.x +
+                    (paint.left === 'auto' ? rect.width - width - numeric(paint.right) : numeric(paint.left)),
+                y: box.y +
+                    (paint.top === 'auto'
+                        ? rect.height - height - numeric(paint.bottom)
+                        : numeric(paint.top)),
+                width,
+                height,
+            };
+            if (pseudo === '::after')
+                afterPaint.push({ element, node });
+            else
+                nodes.push(node);
+        }
+        // Leaf text uses its browser line box. Complex media remains DOM-owned.
+        if (element.childElementCount === 0 &&
+            element.textContent?.trim() &&
+            !(element instanceof SVGElement)) {
+            const measured = measuredText(element, rect, origin, style);
+            nodes.push({
+                ...measured,
+                sourceElement: box.sourceElement,
+                clips,
+                glassRegionId,
+                regionId: glassRegionId,
+                x: measured.x + host.scrollLeft,
+                y: measured.y + host.scrollTop,
+            });
+        }
+    };
+    if (captureRange && canTrackMirrorExtents()) {
+        const viewportTop = bounds.top - host.scrollTop;
+        const window = {
+            top: captureRange.top - 64 + viewportTop,
+            bottom: captureRange.bottom + 64 + viewportTop,
+        };
+        scanMirrorTree(host, window, bounded, measureElement);
+    }
+    else
+        for (const element of presentationContent
+            ? outsideNestedScrolls(host)
+            : [host, ...host.querySelectorAll('*')])
+            measureElement(element, captureRange ? element.getBoundingClientRect() : undefined);
+    while (afterPaint.length)
+        nodes.push(afterPaint.pop().node);
+    return {
+        contentHeight: host.scrollHeight,
+        measuredAt: performance.now(),
+        nodes,
+        screen,
+        width: bounds.width,
+    };
+}