@reticlehq/browser 3.7.0 → 3.8.1

package/dist/dom/visibility.js

@@ -0,0 +1,322 @@
+import { isHtmlElement } from './realm.js';
+import { parentAcrossShadowBoundary } from './shadow-registry.js';
+import { clippingBox, overflowAxes, scrolledInto, } from './paint-context.js';
+export const HTML_DETAILS_TAG = 'details';
+export const HTML_DETAILS_OPEN_ATTRIBUTE = 'open';
+export const HTML_SUMMARY_TAG = 'summary';
+function hiddenInsideClosedDetails(el) {
+    const parent = el.parentElement;
+    if (null === parent) {
+        return false;
+    }
+    const details = parent.closest(HTML_DETAILS_TAG);
+    if (null === details || details.hasAttribute(HTML_DETAILS_OPEN_ATTRIBUTE)) {
+        return false;
+    }
+    const summary = Array.from(details.children).find((child) => HTML_SUMMARY_TAG === child.localName);
+    return summary === undefined || !summary.contains(el);
+}
+function stalledFade(el) {
+    if (!el.ownerDocument.hidden || !('getAnimations' in el)) {
+        return false;
+    }
+    return el.getAnimations().some((a) => 'running' === a.playState || a.pending);
+}
+const OVERLAY_ARIA_HIDDEN = 'data-aria-hidden';
+function hiddenByAnOverlay(el) {
+    return el.hasAttribute(OVERLAY_ARIA_HIDDEN);
+}
+function selfCssHidden(el, style) {
+    if (isHtmlElement(el) && el.hidden) {
+        return true;
+    }
+    if (hiddenInsideClosedDetails(el)) {
+        return true;
+    }
+    if (style !== null) {
+        if ('none' === style.display ||
+            'hidden' === style.visibility ||
+            'collapse' === style.visibility) {
+            return true;
+        }
+        if (0 === Number.parseFloat(style.opacity || '1') && !stalledFade(el)) {
+            return true;
+        }
+        if (clippedAway(style)) {
+            return true;
+        }
+    }
+    return false;
+}
+function clippedAway(style) {
+    const rect = /^rect\((.*)\)$/.exec(style.getPropertyValue('clip').trim());
+    if (null !== rect && ('absolute' === style.position || 'fixed' === style.position)) {
+        const [top, right, bottom, left] = (rect[1] ?? '').split(/[\s,]+/).map(Number.parseFloat);
+        if (right !== undefined && left !== undefined && right <= left) {
+            return true;
+        }
+        if (bottom !== undefined && top !== undefined && bottom <= top) {
+            return true;
+        }
+    }
+    const inset = /^inset\(([^)]*)\)$/.exec(style.getPropertyValue('clip-path').trim());
+    const edges = inset?.[1]
+        ?.split(/\s+round\s/)[0]
+        ?.trim()
+        .split(/\s+/) ?? [];
+    const known = (edge) => edge.endsWith('%') || 0 === Number.parseFloat(edge);
+    if (0 === edges.length || !edges.every(known)) {
+        return false;
+    }
+    const [top = 0, right = top, bottom = top, left = right] = edges.map(Number.parseFloat);
+    return top + bottom >= 100 || left + right >= 100;
+}
+function selfHidden(el, style) {
+    if ('true' === el.getAttribute('aria-hidden') && !hiddenByAnOverlay(el)) {
+        return true;
+    }
+    return selfCssHidden(el, style);
+}
+export function isHiddenByAriaOnly(el) {
+    let foundAriaHidden = false;
+    let current = el;
+    while (null !== current) {
+        if ('true' === current.getAttribute('aria-hidden')) {
+            foundAriaHidden = true;
+        }
+        const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
+        if (selfCssHidden(current, style)) {
+            return false;
+        }
+        current = parentAcrossShadowBoundary(current);
+    }
+    return foundAriaHidden;
+}
+export function isRenderedOutsideAriaHidden(el) {
+    let current = el;
+    while (null !== current) {
+        if ('true' === current.getAttribute('aria-hidden')) {
+            return false;
+        }
+        const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
+        if (selfCssHidden(current, style)) {
+            return false;
+        }
+        current = parentAcrossShadowBoundary(current);
+    }
+    return true;
+}
+const CLIPPING_OVERFLOW = new Set(['hidden', 'clip']);
+const SCROLLING_OVERFLOW = new Set(['auto', 'scroll']);
+const NON_CLIPPING_DISPLAY = new Set([
+    'contents',
+    'table-row',
+    'table-row-group',
+    'table-header-group',
+    'table-footer-group',
+    'table-column',
+    'table-column-group',
+]);
+const TRANSFORM_CONTAINING_BLOCK_PROPERTIES = new Set([
+    'transform',
+    'translate',
+    'rotate',
+    'scale',
+    'perspective',
+]);
+const CONTAINING_BLOCK_PROPERTIES = new Set([
+    ...TRANSFORM_CONTAINING_BLOCK_PROPERTIES,
+    'filter',
+    'backdrop-filter',
+]);
+const CONTAINING_BLOCK_CONTAIN = new Set(['layout', 'paint', 'strict', 'content']);
+const REPLACED_INLINE_TAGS = new Set([
+    'img',
+    'video',
+    'audio',
+    'canvas',
+    'iframe',
+    'embed',
+    'object',
+    'input',
+    'textarea',
+    'select',
+]);
+const visibilityInfoMemos = new WeakMap();
+function visibilityInfoMemo(memo) {
+    if (memo === undefined) {
+        return new Map();
+    }
+    let info = visibilityInfoMemos.get(memo);
+    if (info === undefined) {
+        info = new Map();
+        visibilityInfoMemos.set(memo, info);
+    }
+    return info;
+}
+function ownVisibilityInfo(el, memo) {
+    let info = memo.get(el);
+    if (info === undefined) {
+        const style = el.ownerDocument.defaultView?.getComputedStyle(el) ?? null;
+        if (selfHidden(el, style)) {
+            info = {
+                hidden: true,
+                style,
+                parent: null,
+                clipX: false,
+                clipY: false,
+                scrollX: false,
+                scrollY: false,
+                hasClipping: false,
+            };
+            memo.set(el, info);
+            return info;
+        }
+        const parent = parentAcrossShadowBoundary(el);
+        const inherited = null === parent ? undefined : ownVisibilityInfo(parent, memo);
+        const [overflowX, overflowY] = overflowAxes(style);
+        const root = el.ownerDocument.documentElement;
+        const viewportOverflow = el === root ||
+            (el === el.ownerDocument.body &&
+                overflowAxes(ownVisibilityInfo(root, memo).style).every((axis) => 'visible' === axis));
+        const hasClipBox = !viewportOverflow &&
+            !NON_CLIPPING_DISPLAY.has(style?.display ?? '') &&
+            !(isHtmlElement(el) && 'inline' === style?.display);
+        const clipX = hasClipBox && CLIPPING_OVERFLOW.has(overflowX);
+        const clipY = hasClipBox && CLIPPING_OVERFLOW.has(overflowY);
+        info = {
+            hidden: true === inherited?.hidden,
+            style,
+            parent,
+            clipX,
+            clipY,
+            scrollX: hasClipBox && SCROLLING_OVERFLOW.has(overflowX),
+            scrollY: hasClipBox && SCROLLING_OVERFLOW.has(overflowY),
+            hasClipping: clipX || clipY || true === inherited?.hasClipping,
+        };
+        memo.set(el, info);
+    }
+    return info;
+}
+function positionedContainingBlock(el, fixed, memo) {
+    for (let parent = ownVisibilityInfo(el, memo).parent; parent !== null; parent = ownVisibilityInfo(parent, memo).parent) {
+        const style = ownVisibilityInfo(parent, memo).style;
+        if (null === style || 'contents' === style.display) {
+            continue;
+        }
+        if (!fixed && '' !== style.position && 'static' !== style.position) {
+            return parent;
+        }
+        const transformable = !('inline' === style.display &&
+            isHtmlElement(parent) &&
+            !REPLACED_INLINE_TAGS.has(parent.localName)) &&
+            'table-column' !== style.display &&
+            'table-column-group' !== style.display;
+        const applies = (property) => transformable || !TRANSFORM_CONTAINING_BLOCK_PROPERTIES.has(property);
+        if ([...CONTAINING_BLOCK_PROPERTIES].some((property) => {
+            const value = style.getPropertyValue(property);
+            return applies(property) && '' !== value && 'none' !== value;
+        }) ||
+            style.willChange
+                .split(',')
+                .some((property) => CONTAINING_BLOCK_PROPERTIES.has(property.trim()) && applies(property.trim())) ||
+            (transformable &&
+                !NON_CLIPPING_DISPLAY.has(style.display) &&
+                (style.contain.split(/\s+/).some((value) => CONTAINING_BLOCK_CONTAIN.has(value)) ||
+                    'auto' === style.contentVisibility))) {
+            return parent;
+        }
+    }
+    return null;
+}
+function visibleBounds(el, memo, initial, throughScrollers = false) {
+    let bounds = initial;
+    const target = ownVisibilityInfo(el, memo);
+    if (target.hidden) {
+        return null;
+    }
+    if (null === target.parent || !ownVisibilityInfo(target.parent, memo).hasClipping) {
+        return bounds;
+    }
+    let clipFrom;
+    for (let current = el; current !== null; current = ownVisibilityInfo(current, memo).parent) {
+        const info = ownVisibilityInfo(current, memo);
+        if (info.hidden) {
+            return null;
+        }
+        if (current === clipFrom) {
+            clipFrom = undefined;
+        }
+        const style = info.style;
+        if (throughScrollers &&
+            current !== el &&
+            undefined === clipFrom &&
+            (info.scrollX || info.scrollY)) {
+            bounds ??= el.getBoundingClientRect();
+            if (bounds.width > 0 && bounds.height > 0) {
+                bounds = scrolledInto(bounds, clippingBox(current, info), info.scrollX, info.scrollY);
+            }
+        }
+        if (current !== el && undefined === clipFrom && (info.clipX || info.clipY)) {
+            bounds ??= el.getBoundingClientRect();
+            if (bounds.width > 0 && bounds.height > 0) {
+                const clip = clippingBox(current, info);
+                const left = info.clipX ? Math.max(bounds.left, clip.left) : bounds.left;
+                const right = info.clipX ? Math.min(bounds.right, clip.right) : bounds.right;
+                const top = info.clipY ? Math.max(bounds.top, clip.top) : bounds.top;
+                const bottom = info.clipY ? Math.min(bounds.bottom, clip.bottom) : bounds.bottom;
+                if (right <= left || bottom <= top) {
+                    return null;
+                }
+                bounds = { left, right, top, bottom, width: right - left, height: bottom - top };
+            }
+        }
+        if (clipFrom === undefined && ('absolute' === style?.position || 'fixed' === style?.position)) {
+            clipFrom = positionedContainingBlock(current, 'fixed' === style?.position, memo);
+        }
+    }
+    return bounds;
+}
+export function isInViewport(el, memo) {
+    if (!isVisible(el, memo)) {
+        return false;
+    }
+    const view = el.ownerDocument.defaultView;
+    if (null === view) {
+        return false;
+    }
+    const r = visibleBounds(el, visibilityInfoMemo(memo), el.getBoundingClientRect());
+    if (null === r || undefined === r) {
+        return false;
+    }
+    if (r.width <= 0 || r.height <= 0) {
+        return false;
+    }
+    return r.bottom > 0 && r.right > 0 && r.top < view.innerHeight && r.left < view.innerWidth;
+}
+function collapsed(el, memo) {
+    const own = ownVisibilityInfo(el, memo);
+    if (!own.clipX && !own.clipY) {
+        return false;
+    }
+    const rects = Array.from(el.getClientRects());
+    return (rects.length > 0 &&
+        rects.every((r) => (own.clipX && 0 === r.width) ||
+            (own.clipY && 0 === r.height) ||
+            (own.clipX && own.clipY && r.width <= 1 && r.height <= 1)));
+}
+export function isVisible(el, memo) {
+    if (!el.isConnected) {
+        return false;
+    }
+    const cached = memo?.get(el);
+    if (cached !== undefined) {
+        return cached;
+    }
+    const info = visibilityInfoMemo(memo);
+    const result = visibleBounds(el, info, undefined, true) !== null && !collapsed(el, info);
+    if (memo !== undefined) {
+        memo.set(el, result);
+    }
+    return result;
+}

package/dist/index.d.ts

@@ -18,10 +18,12 @@ export { registerReticleDomain } from './registry/domains.js';
 export type { ReticleDomain } from './registry/domains.js';
 export { buildSnapshot } from './dom/snapshot.js';
 export { inspectChart, canvasChartData } from './dom/chart.js';
-export type { ChartReport, ChartFinding, CanvasChartData } from './dom/chart.js';
+export type { ChartReport, ChartFinding, CanvasChartData, ChartGlobals } from './dom/chart.js';
 export { matchQuery, runQuery } from './dom/query.js';
 export { executeAction, executeSequence } from './actions/actions.js';
-export { describe, getRole, getAccessibleName, getStates, isVisible } from './dom/a11y.js';
+export { describe, getRole, getAccessibleName, getStates } from './dom/a11y.js';
+export { isVisible } from './dom/visibility.js';
 export { refs, RefRegistry } from './dom/addressing/refs.js';
 export { Annotator, installAnnotator, type AnnotatorDeps } from './review/annotator.js';
 export { resolveMarkAnchor, type MarkAnchor } from './review/mark-anchor.js';
+export declare const trackShortTimers: (maxMs?: number) => (() => void);

package/dist/index.js

@@ -1,4 +1,6 @@
 export { reticle } from './reticle-singleton.js';
+import { reticle } from './reticle-singleton.js';
+import { trackShortTimers as trackTimers } from './busy.js';
 export { Reticle } from './reticle.js';
 export { SESSION_AUTO } from '@reticlehq/core';
 export { setIgnoreSelectors } from './dom/dom-ignore.js';
@@ -13,7 +15,11 @@ export { buildSnapshot } from './dom/snapshot.js';
 export { inspectChart, canvasChartData } from './dom/chart.js';
 export { matchQuery, runQuery } from './dom/query.js';
 export { executeAction, executeSequence } from './actions/actions.js';
-export { describe, getRole, getAccessibleName, getStates, isVisible } from './dom/a11y.js';
+export { describe, getRole, getAccessibleName, getStates } from './dom/a11y.js';
+export { isVisible } from './dom/visibility.js';
 export { refs, RefRegistry } from './dom/addressing/refs.js';
 export { Annotator, installAnnotator } from './review/annotator.js';
 export { resolveMarkAnchor } from './review/mark-anchor.js';
+export const trackShortTimers = (maxMs) => trackTimers((name, data) => {
+    reticle.signal(name, data);
+}, maxMs);

package/dist/observers/blind-spots.js

@@ -58,10 +58,11 @@ export function installBlindSpots(emit) {
     const report = () => {
         for (const sensor of sensors) {
             const count = sensor.count();
-            if (count === last.get(sensor.kind))
+            const previous = last.get(sensor.kind);
+            if (count === previous)
                 continue;
             last.set(sensor.kind, count);
-            if (count > 0)
+            if (count > 0 || previous !== undefined)
                 emit(EventType.BLIND_SPOT, { kind: sensor.kind, count });
         }
     };

package/dist/observers/canvas.d.ts

@@ -0,0 +1,18 @@
+import { CanvasTrigger } from '@reticlehq/core';
+export { CanvasTrigger };
+import { type Emit, type Teardown } from './types.js';
+export interface CanvasSample {
+    data: Uint8ClampedArray;
+    width: number;
+    height: number;
+}
+export declare function digestPixels(data: Uint8ClampedArray): {
+    digest: string;
+    mean: [number, number, number];
+};
+interface CanvasOptions {
+    sample?: (canvas: HTMLCanvasElement) => CanvasSample | undefined;
+    every?: (run: () => void, ms: number) => () => void;
+}
+export declare function canvasAfterAct(): void;
+export declare function installCanvas(emit: Emit, opts?: CanvasOptions): Teardown;

package/dist/observers/canvas.js

@@ -0,0 +1,76 @@
+import { CanvasTrigger, EventType } from '@reticlehq/core';
+export { CanvasTrigger };
+import { refs } from '../dom/addressing/refs.js';
+import { nativeSetInterval } from '../timers/native/native-timers.js';
+import { observeSafely, observeValue } from './types.js';
+const SIDE = 16;
+const POLL_MS = 500;
+const MAX_CANVASES = 4;
+const FNV_OFFSET = 0x811c9dc5;
+const FNV_PRIME = 0x01000193;
+const QUANTUM = 8;
+export function digestPixels(data) {
+    let hash = FNV_OFFSET;
+    const sum = [0, 0, 0];
+    const pixels = Math.max(1, data.length / 4);
+    for (let i = 0; i < data.length; i += 4) {
+        for (let c = 0; c < 3; c += 1) {
+            const value = data[i + c] ?? 0;
+            sum[c] = (sum[c] ?? 0) + value;
+            hash = Math.imul(hash ^ Math.floor(value / QUANTUM), FNV_PRIME) >>> 0;
+        }
+    }
+    const mean = sum.map((s) => Math.round(s / pixels));
+    return { digest: hash.toString(16).padStart(8, '0'), mean };
+}
+function sampleCanvas(canvas) {
+    if (0 === canvas.width || 0 === canvas.height) {
+        return undefined;
+    }
+    const scratch = document.createElement('canvas');
+    scratch.width = SIDE;
+    scratch.height = SIDE;
+    const ctx = scratch.getContext('2d');
+    if (null === ctx) {
+        return undefined;
+    }
+    const data = observeValue(() => {
+        ctx.drawImage(canvas, 0, 0, SIDE, SIDE);
+        return ctx.getImageData(0, 0, SIDE, SIDE).data;
+    });
+    return data === undefined ? undefined : { data, width: canvas.width, height: canvas.height };
+}
+let sampleAll;
+export function canvasAfterAct() {
+    sampleAll?.(CanvasTrigger.ACT);
+}
+export function installCanvas(emit, opts = {}) {
+    const sample = opts.sample ?? sampleCanvas;
+    const every = opts.every ?? nativeSetInterval;
+    const last = new WeakMap();
+    const look = (trigger) => {
+        observeSafely(() => {
+            const canvases = Array.from(document.querySelectorAll('canvas')).slice(0, MAX_CANVASES);
+            for (const canvas of canvases) {
+                const read = sample(canvas);
+                if (read === undefined) {
+                    continue;
+                }
+                const { digest, mean } = digestPixels(read.data);
+                if (CanvasTrigger.POLL === trigger && last.get(canvas) === digest) {
+                    continue;
+                }
+                last.set(canvas, digest);
+                emit(EventType.CANVAS_DIGEST, { digest, width: read.width, height: read.height, mean, trigger }, refs.refFor(canvas));
+            }
+        });
+    };
+    sampleAll = look;
+    const stop = every(() => look(CanvasTrigger.POLL), POLL_MS);
+    return () => {
+        stop();
+        if (sampleAll === look) {
+            sampleAll = undefined;
+        }
+    };
+}

package/dist/observers/dom.js

@@ -1,11 +1,13 @@
 import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
 import { EventType, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
-import { getAccessibleName, getRole, isSensitiveField, isVisible } from '../dom/a11y.js';
+import { getAccessibleName, getRole, isSensitiveField } from '../dom/a11y.js';
+import { isVisible } from '../dom/visibility.js';
 import { refs } from '../dom/addressing/refs.js';
 function regionKeyOf(target) {
     const el = isElement(target) ? target : null;
-    if (null === el)
+    if (null === el) {
         return undefined;
+    }
     const labelled = el.closest(testIdSelector());
     return (labelled ? readTestId(labelled) : null) ?? refs.refFor(el);
 }
@@ -30,8 +32,9 @@ const WATCHED_ATTRS = [
 ];
 const MAX_ATTR_VALUE_LEN = 120;
 function capValue(value) {
-    if (null === value)
+    if (null === value) {
         return undefined;
+    }
     return value.length > MAX_ATTR_VALUE_LEN ? `${value.slice(0, MAX_ATTR_VALUE_LEN)}…` : value;
 }
 const DIALOG_ROLES = new Set(['dialog', 'alertdialog']);
@@ -44,19 +47,23 @@ const MOUNT_SCAN_LIMIT = 40;
 function describeMount(node) {
     const role = getRole(node);
     const name = getAccessibleName(node);
-    if (isMeaningful(role, name))
+    if (isMeaningful(role, name)) {
         return { role, name, el: node };
+    }
     let scanned = 0;
     for (const child of node.querySelectorAll('*')) {
-        if (scanned >= MOUNT_SCAN_LIMIT)
+        if (scanned >= MOUNT_SCAN_LIMIT) {
             return undefined;
+        }
         scanned += 1;
-        if (isUnobserved(child))
+        if (isUnobserved(child)) {
             continue;
+        }
         const childRole = getRole(child);
         const childName = getAccessibleName(child);
-        if (isMeaningful(childRole, childName))
+        if (isMeaningful(childRole, childName)) {
             return { role: childRole, name: childName, el: child };
+        }
     }
     return undefined;
 }
@@ -64,8 +71,9 @@ const TEXT_NODE = 3;
 function textOf(nodes) {
     let out = '';
     for (const node of nodes) {
-        if (node.nodeType !== TEXT_NODE)
+        if (node.nodeType !== TEXT_NODE) {
             continue;
+        }
         out += node.nodeValue ?? '';
     }
     const trimmed = out.trim();
@@ -83,12 +91,30 @@ const SAFE_ON_SECRET = new Set([
 function secretAttr(el, attr) {
     return !SAFE_ON_SECRET.has(attr) && !attr.startsWith('aria-') && isSensitiveField(el);
 }
+const TESTID_DEPTH = 3;
+const MAX_INITIAL_TEXTS = 50;
+function testidNear(el) {
+    let at = el;
+    for (let depth = 0; at !== null && depth <= TESTID_DEPTH; depth += 1) {
+        const id = readTestId(at);
+        if (id !== null && id.length > 0) {
+            return id;
+        }
+        at = at.parentElement;
+    }
+    return undefined;
+}
+const named = (el) => {
+    const testid = testidNear(el);
+    return testid === undefined ? {} : { testid };
+};
 export function installDom(emit) {
     const stopRegistry = installShadowRegistry();
     const observer = new MutationObserver((records) => {
         let added = 0;
         let removed = 0;
         let changed = 0;
+        let initials = 0;
         let dropped = 0;
         for (const record of records) {
             if ('attributes' === record.type) {
@@ -123,36 +149,54 @@ export function installDom(emit) {
                         ? REDACTED_VALUE
                         : (record.target.textContent ?? '').trim().slice(0, 80);
                     const old = hide ? undefined : capValue(record.oldValue?.trim() ?? null);
-                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }) }, refs.refFor(parent));
+                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent) }, refs.refFor(parent));
                 }
                 continue;
             }
             if (textOf(record.addedNodes) !== undefined || textOf(record.removedNodes) !== undefined) {
                 const parent = isElement(record.target) ? record.target : null;
                 if (parent !== null && !isUnobserved(parent)) {
-                    if (changed >= MAX_PER_BATCH)
+                    if (changed >= MAX_PER_BATCH) {
                         dropped += 1;
+                    }
                     else {
                         changed += 1;
                         const hide = isSensitiveField(parent);
                         const text = hide ? REDACTED_VALUE : (parent.textContent ?? '').trim().slice(0, 80);
                         const old = hide ? undefined : capValue(textOf(record.removedNodes) ?? null);
-                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }) }, refs.refFor(parent));
+                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent) }, refs.refFor(parent));
                     }
                 }
             }
             for (const node of record.addedNodes) {
-                if (!isElement(node))
+                if (!isElement(node)) {
                     continue;
+                }
                 if (added >= MAX_PER_BATCH) {
                     dropped += 1;
                     continue;
                 }
-                if (isUnobserved(node))
+                if (isUnobserved(node)) {
                     continue;
+                }
+                const testids = [node, ...Array.from(node.querySelectorAll(testIdSelector()))].filter((el) => readTestId(el) !== null);
+                for (const el of testids) {
+                    const text = (el.textContent ?? '').trim();
+                    if (0 === text.length) {
+                        continue;
+                    }
+                    if (initials >= MAX_INITIAL_TEXTS) {
+                        dropped += 1;
+                        continue;
+                    }
+                    initials += 1;
+                    const shown = isSensitiveField(el) ? REDACTED_VALUE : text.slice(0, 80);
+                    emit(EventType.DOM_TEXT, { text: shown, testid: readTestId(el) ?? '', initial: true }, refs.refFor(el));
+                }
                 const mounted = describeMount(node);
-                if (mounted === undefined)
+                if (mounted === undefined) {
                     continue;
+                }
                 const { role, name } = mounted;
                 added += 1;
                 const ref = refs.refFor(mounted.el);
@@ -160,13 +204,15 @@ export function installDom(emit) {
                 if (DIALOG_ROLES.has(role) ||
                     LIVE_ROLES.has(role) ||
                     'true' === node.getAttribute('aria-modal')) {
-                    if (isVisible(node))
+                    if (isVisible(node)) {
                         emit(EventType.VISIBLE_SHOWN, { role, name }, ref);
+                    }
                 }
             }
             for (const node of record.removedNodes) {
-                if (!isElement(node))
+                if (!isElement(node)) {
                     continue;
+                }
                 if (removed >= MAX_PER_BATCH) {
                     dropped += 1;
                     continue;
@@ -175,15 +221,17 @@ export function installDom(emit) {
                     continue;
                 }
                 const gone = describeMount(node);
-                if (gone === undefined)
+                if (gone === undefined) {
                     continue;
+                }
                 const { role, name } = gone;
                 removed += 1;
                 emit(EventType.DOM_REMOVED, { role, name, region: regionKeyOf(record.target) });
             }
         }
-        if (dropped > 0)
+        if (dropped > 0) {
             emit(EventType.TRUNCATED, { channel: TruncationChannel.DOM, dropped });
+        }
     });
     const options = {
         subtree: true,
@@ -195,8 +243,9 @@ export function installDom(emit) {
         characterDataOldValue: true,
     };
     observer.observe(document.documentElement, options);
-    for (const root of capturedRoots())
+    for (const root of capturedRoots()) {
         observer.observe(root, options);
+    }
     const unsubscribe = onShadowRoot((root) => observer.observe(root, options));
     const stopFrames = observeSameOriginFrames((body) => observer.observe(body, options));
     return () => {

package/dist/observers/field.d.ts

@@ -1,2 +1,13 @@
 import type { Emit, Teardown } from './types.js';
+export interface FieldReading {
+    value: string;
+    checked?: boolean;
+}
+export interface ActedField {
+    before: FieldReading;
+    stop: () => void;
+    written: () => boolean;
+}
+export declare function watchActedField(el: Element): ActedField | undefined;
+export declare function publishSettledField(el: Element, acted: ActedField | undefined): void;
 export declare function installField(emit: Emit): Teardown;