@reticlehq/browser 3.2.0 → 3.4.0

package/dist/actions/actions-dom.d.ts

@@ -1,3 +1,4 @@
+import type { ActionTarget } from '../dom/realm.js';
 interface ClickGeometry {
     occluded: boolean;
     occludedBy: string | null;
@@ -5,19 +6,19 @@ interface ClickGeometry {
 }
 export declare const NO_GEOMETRY: ClickGeometry;
 export declare function mouseEventFor(el: Element, type: string, init?: MouseEventInit): MouseEvent;
-export declare function fireClickSequence(el: HTMLElement, hold?: {
+export declare function fireClickSequence(el: ActionTarget, hold?: {
     ms: number;
     sleep: (ms: number) => Promise<void>;
     now: () => number;
-}): Promise<{
+}, detail?: number): Promise<{
     prevented: boolean;
     heldMs: number;
 }>;
-export declare function clickGeometry(el: HTMLElement): ClickGeometry;
+export declare function clickGeometry(el: ActionTarget): ClickGeometry;
 export declare function firePointer(el: Element, type: string, relatedTarget?: EventTarget | null): void;
 export declare function firePointerNonBubbling(el: Element, type: string, relatedTarget?: EventTarget | null): void;
-export declare function dragElement(source: HTMLElement, target: HTMLElement | null, data: unknown): Promise<boolean>;
-export declare function fireTapSequence(el: HTMLElement, hold: {
+export declare function dragElement(source: ActionTarget, target: ActionTarget | null, data: unknown): Promise<boolean>;
+export declare function fireTapSequence(el: ActionTarget, hold: {
     ms: number;
     sleep: (ms: number) => Promise<void>;
     now: () => number;

package/dist/actions/actions-dom.js

@@ -16,11 +16,12 @@ function pointerEventFor(el, type, init) {
         ? new PointerEvent(type, full)
         : new MouseEvent(type, full);
 }
-export async function fireClickSequence(el, hold) {
+export async function fireClickSequence(el, hold, detail) {
     const doc = el.ownerDocument;
     const from = doc.activeElement ?? doc.body;
+    const init = { bubbles: true, cancelable: true, detail: detail ?? 0 };
     firePointer(el, 'pointerdown', from);
-    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mousedown', { bubbles: true, cancelable: true })));
+    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mousedown', init)));
     if (el.tabIndex >= 0 && 'function' === typeof el.focus)
         el.focus();
     let heldMs = 0;
@@ -30,8 +31,8 @@ export async function fireClickSequence(el, hold) {
         heldMs = hold.now() - startedAt;
     }
     firePointer(el, 'pointerup', from);
-    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mouseup', { bubbles: true, cancelable: true })));
-    const notPrevented = asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'click', { bubbles: true, cancelable: true })));
+    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mouseup', init)));
+    const notPrevented = asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'click', init)));
     return { prevented: !notPrevented, heldMs };
 }
 function isMeasurable(rect) {

package/dist/actions/actions-press.d.ts

@@ -1,3 +1,4 @@
+import { type ActionTarget } from '../dom/realm.js';
 export declare function pressKey(args: Record<string, unknown>): string;
 export declare function pressModifiers(args: Record<string, unknown>): {
     metaKey: boolean;
@@ -9,6 +10,5 @@ export declare function pressCode(args: Record<string, unknown>, key: string): s
 export declare function focusedOrDocument(): HTMLElement;
 export declare function isReflessDocumentPress(ref: string, action: string, args: Record<string, unknown>): boolean;
 export declare function pressKeys(args: Record<string, unknown>): string[];
-export declare function holdKey(el: HTMLElement, key: string, code: string, mods: Record<string, boolean>, ms: number): Promise<void>;
-export declare function pressCombo(el: HTMLElement, keys: readonly string[], mods: Record<string, boolean>, holdMs: number): Promise<boolean>;
-export declare const ZOOM_NEEDS_REAL_BROWSER_MSG: string;
+export declare function holdKey(el: ActionTarget, key: string, code: string, mods: Record<string, boolean>, ms: number): Promise<void>;
+export declare function pressCombo(el: ActionTarget, keys: readonly string[], mods: Record<string, boolean>, holdMs: number): Promise<boolean>;

package/dist/actions/actions-press.js

@@ -118,6 +118,3 @@ export async function pressCombo(el, keys, mods, holdMs) {
     }
     return prevented;
 }
-export const ZOOM_NEEDS_REAL_BROWSER_MSG = 'cannot zoom from inside the page — CSS zoom changes how it LOOKS without changing the layout ' +
-    'viewport, visualViewport or media queries, so a layout that breaks at 200% would be reported as ' +
-    'checked and passing. Drive a real browser (reticle drive <url>, or reticle_lease) and zoom there.';

package/dist/actions/actions.d.ts

@@ -34,7 +34,6 @@ interface ActionResult {
     };
     warning?: string;
 }
-export declare const MAX_HOLD_MS = 30000;
 export declare const ZOOM_NEEDS_REAL_BROWSER_MSG: string;
 export declare function executeAction(ref: string, action: string, args?: Record<string, unknown>): Promise<ActionResult>;
 export declare function dispatchWebMcp(tool: string, params: Record<string, unknown>, confirmDangerous?: boolean): Promise<unknown>;

package/dist/actions/actions.js

@@ -5,9 +5,10 @@ import { dangerousActionContext, requiresDangerousConfirmation, submitControlFor
 import { assertEditable, assertNotRichText, setNativeValue } from './value-input.js';
 import { getAccessibleName, getRole, isVisible, getStates } from '../dom/a11y.js';
 import { elementHasHoverHandlers, identifyComponent } from '../registry/stores/adapters.js';
-import { isForm, isHtmlElement, isInput, isSelect, isTextArea } from '../dom/realm.js';
+import { isActionTarget, isForm, isInput, isSelect, isTextArea, } from '../dom/realm.js';
 import { nativeSetTimeout, settle } from '../timers/native/native-timers.js';
 import { AppearedText } from './appeared-text.js';
+import { alreadyAtCheckedState, assertAriaToggleLanded, isAriaToggle } from './check-state.js';
 import { focusedOrDocument, isReflessDocumentPress, pressCode, pressKey, pressModifiers, pressKeys, holdKey, pressCombo, } from './actions-press.js';
 function asString(value, fallback = '') {
     return 'string' === typeof value ? value : fallback;
@@ -16,8 +17,8 @@ function requireElement(ref) {
     const el = refs.resolve(ref);
     if (null === el)
         throw new Error(`ref '${echoRef(ref)}' no longer resolves to an element`);
-    if (!isHtmlElement(el))
-        throw new Error(`ref '${echoRef(ref)}' is not an HTMLElement`);
+    if (!isActionTarget(el))
+        throw new Error(`ref '${echoRef(ref)}' is not an HTML or SVG element`);
     return el;
 }
 function anchorOf(el) {
@@ -76,11 +77,6 @@ const CLICK_LIKE = new Set([
     ActionType.CHECK,
     ActionType.UNCHECK,
 ]);
-function alreadyAtCheckedState(el, action) {
-    if (action !== ActionType.CHECK && action !== ActionType.UNCHECK)
-        return false;
-    return isInput(el) && el.checked === (action === ActionType.CHECK);
-}
 function dragTargetRef(args) {
     const named = asString(args['toRef']);
     return '' !== named ? named : asString(args['target']);
@@ -116,7 +112,7 @@ function assertActionAllowed(el, action, args) {
     const sourceDangerous = requiresDangerousConfirmation(dangerousActionContext(el), getRole(el)) ||
         (submitter !== null &&
             requiresDangerousConfirmation(dangerousActionContext(submitter), getRole(submitter)));
-    const targetDangerous = isHtmlElement(dragTarget) &&
+    const targetDangerous = isActionTarget(dragTarget) &&
         requiresDangerousConfirmation(dangerousActionContext(dragTarget), getRole(dragTarget));
     if (canTrigger &&
         (sourceDangerous || targetDangerous) &&
@@ -141,7 +137,7 @@ function activeRef(el) {
         return null;
     return refs.refFor(active);
 }
-export const MAX_HOLD_MS = 30_000;
+const MAX_HOLD_MS = 30_000;
 function clampHold(raw) {
     if ('number' !== typeof raw || !Number.isFinite(raw) || raw <= 0)
         return 0;
@@ -167,7 +163,9 @@ function asFiniteNumber(raw) {
 async function dispatchOther(el, action, args) {
     switch (action) {
         case ActionType.DBLCLICK:
-            return !asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'dblclick', { bubbles: true, cancelable: true })));
+            await fireClickSequence(el, undefined, 1);
+            await fireClickSequence(el, undefined, 2);
+            return !asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'dblclick', { bubbles: true, cancelable: true, detail: 2 })));
         case ActionType.HOVER: {
             const doc = el.ownerDocument;
             const from = doc.activeElement ?? doc.body;
@@ -242,11 +240,16 @@ async function dispatchOther(el, action, args) {
             throw new Error(`cannot select on a <${el.tagName.toLowerCase()}>`);
         case ActionType.CHECK:
         case ActionType.UNCHECK: {
-            if (!isInput(el))
+            const aria = isAriaToggle(el);
+            if (!isInput(el) && !aria) {
                 throw new Error(`cannot (un)check a <${el.tagName.toLowerCase()}>`);
+            }
             if (!enabledOf(el)) {
                 throw new Error(`cannot ${action} a disabled control — a real user could not, so neither will Reticle`);
             }
+            if (!isInput(el)) {
+                return alreadyAtCheckedState(el, action) ? false : (await fireClickSequence(el)).prevented;
+            }
             if ('radio' === el.type && action === ActionType.UNCHECK) {
                 throw new Error('cannot uncheck a radio button — a real user could not; select another radio in the group');
             }
@@ -322,7 +325,7 @@ async function dispatchOther(el, action, args) {
             if ('' === toRef)
                 return await dragElement(el, null, args['data']);
             const resolved = refs.resolve(toRef);
-            if (!isHtmlElement(resolved)) {
+            if (!isActionTarget(resolved)) {
                 throw new Error(`drag target '${echoRef(toRef)}' did not resolve to an element — pass a ref from ` +
                     'reticle_snapshot or reticle_query as args.toRef (alias: args.target)');
             }
@@ -378,6 +381,7 @@ export async function executeAction(ref, action, args = {}) {
         settleReason = outcome.settled ? null : SettleReason.TIMEOUT;
         obs.disconnect();
     }
+    assertAriaToggleLanded(el, action, alreadyAtValue);
     const valueAfter = valueOf(el);
     const nextFocus = activeRef(el);
     const effect = {

package/dist/actions/check-state.d.ts

@@ -0,0 +1,5 @@
+import { type ActionTarget } from '../dom/realm.js';
+export declare const isAriaToggle: (el: Element) => boolean;
+export declare const ariaChecked: (el: Element) => boolean;
+export declare function assertAriaToggleLanded(el: Element, action: string, skipped: boolean): void;
+export declare function alreadyAtCheckedState(el: ActionTarget, action: string): boolean;

package/dist/actions/check-state.js

@@ -0,0 +1,24 @@
+import { ActionType } from '@reticlehq/core';
+import { isInput } from '../dom/realm.js';
+const ARIA_TOGGLE_ROLES = new Set(['checkbox', 'switch']);
+const ARIA_CHECKED = 'aria-checked';
+export const isAriaToggle = (el) => !isInput(el) && ARIA_TOGGLE_ROLES.has(el.getAttribute('role') ?? '');
+export const ariaChecked = (el) => 'true' === el.getAttribute(ARIA_CHECKED);
+export function assertAriaToggleLanded(el, action, skipped) {
+    if (skipped || !isAriaToggle(el))
+        return;
+    if (action !== ActionType.CHECK && action !== ActionType.UNCHECK)
+        return;
+    const wanted = action === ActionType.CHECK;
+    if (ariaChecked(el) === wanted)
+        return;
+    throw new Error(`${action} clicked the ${el.getAttribute('role') ?? ''} but ${ARIA_CHECKED} is still "${String(!wanted)}" — the app did not toggle it`);
+}
+export function alreadyAtCheckedState(el, action) {
+    if (action !== ActionType.CHECK && action !== ActionType.UNCHECK)
+        return false;
+    const wanted = action === ActionType.CHECK;
+    if (isInput(el))
+        return el.checked === wanted;
+    return isAriaToggle(el) && ariaChecked(el) === wanted;
+}

package/dist/actions/danger-context.d.ts

@@ -1,3 +1,4 @@
-export declare function dangerousActionContext(el: HTMLElement): string;
-export declare function submitControlFor(el: HTMLElement): HTMLElement | null;
+import { type ActionTarget } from '../dom/realm.js';
+export declare function dangerousActionContext(el: ActionTarget): string;
+export declare function submitControlFor(el: ActionTarget): HTMLElement | null;
 export declare function requiresDangerousConfirmation(text: string, role?: string): boolean;

package/dist/actions/danger-context.js

@@ -1,5 +1,6 @@
 import { isDangerousActionText } from '@reticlehq/core';
 import { getAccessibleName } from '../dom/a11y.js';
+import { isHtmlElement } from '../dom/realm.js';
 const LABEL_VALUED_INPUT_TYPES = new Set([
     'submit',
     'button',
@@ -7,7 +8,7 @@ const LABEL_VALUED_INPUT_TYPES = new Set([
     'image',
 ]);
 function holdsUserText(el) {
-    if (el.isContentEditable)
+    if (isHtmlElement(el) && el.isContentEditable)
         return true;
     if (el instanceof HTMLTextAreaElement)
         return true;

package/dist/actions/value-input.d.ts

@@ -1,3 +1,4 @@
+import { type ActionTarget } from '../dom/realm.js';
 export declare function setNativeValue(el: HTMLInputElement | HTMLTextAreaElement, value: string): boolean;
-export declare function assertNotRichText(el: HTMLElement, action: string): void;
+export declare function assertNotRichText(el: ActionTarget, action: string): void;
 export declare function assertEditable(el: HTMLInputElement | HTMLTextAreaElement, action: string): void;

package/dist/actions/value-input.js

@@ -1,5 +1,5 @@
 import { captureValueSetter } from '../patching/capture-method.js';
-import { valuePrototypeOf } from '../dom/realm.js';
+import { isHtmlElement, valuePrototypeOf } from '../dom/realm.js';
 export function setNativeValue(el, value) {
     const proto = valuePrototypeOf(el);
     const setter = proto === undefined ? undefined : captureValueSetter(proto);
@@ -13,12 +13,21 @@ export function setNativeValue(el, value) {
     el.dispatchEvent(new Event('change', { bubbles: true }));
     return !notPrevented;
 }
-export function assertNotRichText(el, action) {
+function isRichText(el) {
     const flag = el.getAttribute('contenteditable');
-    if (el.isContentEditable || (flag !== null && flag !== 'false')) {
-        throw new Error(`cannot ${action} a contenteditable element — rich-text editors keep their own document model, ` +
-            'so writing to the DOM here would look right and submit the old content. This surface is not supported yet.');
-    }
+    if ((isHtmlElement(el) && el.isContentEditable) || (null !== flag && 'false' !== flag))
+        return true;
+    if ('textbox' === el.getAttribute('role'))
+        return true;
+    if (!('editContext' in el))
+        return false;
+    const surface = el;
+    return null !== surface.editContext && undefined !== surface.editContext;
+}
+export function assertNotRichText(el, action) {
+    if (!isRichText(el))
+        return;
+    throw new Error(`cannot ${action} a contenteditable or EditContext editor; use press or an input`);
 }
 export function assertEditable(el, action) {
     if (el.disabled) {

package/dist/connect-options.d.ts

@@ -8,6 +8,7 @@ export interface ReticleConnectOptions {
     allowInProduction?: boolean;
     overlay?: boolean;
     captureNetworkBodies?: boolean;
+    networkBodyMaxChars?: number;
     sourceMapping?: boolean;
     captureErrorBodies?: boolean;
     exposePresenter?: boolean;

package/dist/dom/a11y.js

@@ -1,9 +1,12 @@
 import { ElementState, REDACTED_VALUE } from '@reticlehq/core';
-import { isButton, isHtmlElement, isImage, isInput, isSelect, isTextArea } from './realm.js';
+import { isButton, isHtmlElement, isImage, isInput, isMeter, isOutput, isProgress, isSelect, isTextArea, } from './realm.js';
 import { refs } from './addressing/refs.js';
 import { inspectChart } from './chart.js';
 import { isSensitiveKey } from '../security/serialization.js';
 import { formatSource, sourceFromDom } from './addressing/source.js';
+const HTML_DETAILS_TAG = 'details';
+const HTML_DETAILS_OPEN_ATTRIBUTE = 'open';
+const HTML_DIRECT_SUMMARY_SELECTOR = ':scope > summary';
 const NAME_FROM_CONTENT = new Set([
     'button',
     'link',
@@ -190,7 +193,14 @@ export function getAccessibleName(el) {
         if (alt !== null)
             return alt.trim();
     }
-    if (isInput(el) || isTextArea(el) || isSelect(el)) {
+    const isLabelable = isInput(el) ||
+        isTextArea(el) ||
+        isSelect(el) ||
+        isButton(el) ||
+        isMeter(el) ||
+        isOutput(el) ||
+        isProgress(el);
+    if (isLabelable) {
         const labels = el.labels;
         if (labels !== null && labels.length > 0) {
             const text = [...labels]
@@ -200,6 +210,16 @@ export function getAccessibleName(el) {
             if (text.length > 0)
                 return text;
         }
+    }
+    if ('fieldset' === el.tagName.toLowerCase()) {
+        const legend = [...el.children].find((child) => 'legend' === child.tagName.toLowerCase());
+        if (legend !== undefined) {
+            const text = collapse(textWithoutHidden(legend));
+            if (text.length > 0)
+                return text;
+        }
+    }
+    if (isInput(el) || isTextArea(el) || isSelect(el)) {
         if (isInput(el)) {
             const type = el.type.toLowerCase();
             if ('submit' === type || 'button' === type || 'reset' === type) {
@@ -241,6 +261,8 @@ export function getStates(el, visible = isVisible(el)) {
         states.push(ElementState.CHECKED);
     if (true === ariaBool(el, 'aria-expanded'))
         states.push(ElementState.EXPANDED);
+    if (true === ariaBool(el, 'aria-pressed'))
+        states.push(ElementState.PRESSED);
     if (el.ownerDocument.activeElement === el)
         states.push(ElementState.FOCUSED);
     return states;
@@ -270,11 +292,23 @@ export function getValue(el) {
     const valueNow = el.getAttribute('aria-valuenow');
     return valueNow ?? undefined;
 }
+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 = details.querySelector(HTML_DIRECT_SUMMARY_SELECTOR);
+    return null === summary || !summary.contains(el);
+}
 function selfHidden(el) {
     if ('true' === el.getAttribute('aria-hidden'))
         return true;
     if (isHtmlElement(el) && el.hidden)
         return true;
+    if (hiddenInsideClosedDetails(el))
+        return true;
     const view = el.ownerDocument.defaultView;
     if (view !== null) {
         const style = view.getComputedStyle(el);
@@ -288,6 +322,12 @@ function selfHidden(el) {
     }
     return false;
 }
+function parentAcrossShadowBoundary(el) {
+    if (null !== el.parentElement)
+        return el.parentElement;
+    const host = el.getRootNode().host;
+    return host ?? null;
+}
 export function isInViewport(el, memo) {
     if (!isVisible(el, memo))
         return false;
@@ -305,7 +345,7 @@ export function isVisible(el, memo) {
     const cached = memo?.get(el);
     if (cached !== undefined)
         return cached;
-    const parent = el.parentElement;
+    const parent = parentAcrossShadowBoundary(el);
     const result = !selfHidden(el) && (null === parent || isVisible(parent, memo));
     if (memo !== undefined)
         memo.set(el, result);

package/dist/dom/addressing/source.d.ts

@@ -1,4 +1,4 @@
-export interface SourceLocation {
+interface SourceLocation {
     file: string;
     line: number;
 }
@@ -7,3 +7,4 @@ export declare function sourceFromDom(el: Element): SourceLocation | undefined;
 export declare function sourceFor(el: Element, adapterSource: SourceLocation | undefined): SourceLocation | undefined;
 export declare function documentHasSourceStamps(doc: Document): boolean;
 export declare function formatSource(source: SourceLocation | undefined): string | undefined;
+export {};

package/dist/dom/dom-ignore.d.ts

@@ -5,3 +5,4 @@ export declare function setIgnoreSelectors(selectors: string[]): void;
 export declare function isReticleOverlay(el: Element): boolean;
 export declare function isReticleUi(node: Element | null): boolean;
 export declare function isIgnored(el: Element): boolean;
+export declare function appModalOpen(doc: Document): boolean;

package/dist/dom/dom-ignore.js

@@ -22,3 +22,16 @@ export function isIgnored(el) {
     const sel = [ours, DEV_OVERLAYS, extraIgnore].filter((part) => part.length > 0).join(',');
     return el.closest(sel) !== null;
 }
+const APP_MODAL = 'dialog[open], [aria-modal="true"]';
+export function appModalOpen(doc) {
+    for (const el of Array.from(doc.querySelectorAll(APP_MODAL))) {
+        if (el.closest(RETICLE_OVERLAY) !== null)
+            continue;
+        if (el instanceof HTMLElement && (el.hidden || null !== el.closest('[hidden]')))
+            continue;
+        if (el instanceof HTMLElement && 'none' === getComputedStyle(el).display)
+            continue;
+        return true;
+    }
+    return false;
+}

package/dist/dom/query.js

@@ -409,15 +409,16 @@ function buildEmptyHint(query) {
     const container = resolveContainer(query.scope).container ?? document.body;
     const all = container.querySelectorAll(`[${TESTID_ATTR}]`);
     const present = [];
+    const seen = new Set();
     for (const el of Array.from(all)) {
         if (isIgnored(el))
             continue;
         const id = el.getAttribute(TESTID_ATTR);
-        if (id !== null && id.length > 0 && !present.includes(id)) {
+        if (null === id || 0 === id.length || seen.has(id))
+            continue;
+        seen.add(id);
+        if (present.length < MAX_PRESENT_TESTIDS)
             present.push(id);
-            if (present.length >= MAX_PRESENT_TESTIDS)
-                break;
-        }
     }
     const registered = declaredTestids();
     const knownEmptyState = present.some((id) => registered.includes(id));
@@ -425,6 +426,7 @@ function buildEmptyHint(query) {
     const hint = {
         route,
         presentTestids: present,
+        ...(seen.size > present.length ? { presentTestidsTotal: seen.size } : {}),
         presentRegions: buildPresentRegions(query),
         knownEmptyState,
     };

package/dist/dom/realm.d.ts

@@ -1,10 +1,16 @@
 export declare const isElement: (n: unknown) => n is Element;
 export declare const isImage: (n: unknown) => n is HTMLImageElement;
 export declare const isHtmlElement: (n: unknown) => n is HTMLElement;
+export declare const isSvgElement: (n: unknown) => n is SVGElement;
+export type ActionTarget = HTMLElement | SVGElement;
+export declare const isActionTarget: (n: unknown) => n is ActionTarget;
 export declare const isInput: (n: unknown) => n is HTMLInputElement;
 export declare const isTextArea: (n: unknown) => n is HTMLTextAreaElement;
 export declare const isSelect: (n: unknown) => n is HTMLSelectElement;
 export declare const isButton: (n: unknown) => n is HTMLButtonElement;
+export declare const isMeter: (n: unknown) => n is HTMLMeterElement;
+export declare const isOutput: (n: unknown) => n is HTMLOutputElement;
+export declare const isProgress: (n: unknown) => n is HTMLProgressElement;
 export declare const isForm: (n: unknown) => n is HTMLFormElement;
 export declare const isFrame: (n: unknown) => n is HTMLIFrameElement;
 export declare function valuePrototypeOf(el: Element): object | undefined;

package/dist/dom/realm.js

@@ -14,10 +14,15 @@ function isIn(node, name, ambient) {
 export const isElement = (n) => isIn(n, 'Element', 'undefined' === typeof Element ? undefined : Element);
 export const isImage = (n) => isIn(n, 'HTMLImageElement', 'undefined' === typeof HTMLImageElement ? undefined : HTMLImageElement);
 export const isHtmlElement = (n) => isIn(n, 'HTMLElement', 'undefined' === typeof HTMLElement ? undefined : HTMLElement);
+export const isSvgElement = (n) => isIn(n, 'SVGElement', 'undefined' === typeof SVGElement ? undefined : SVGElement);
+export const isActionTarget = (n) => isHtmlElement(n) || isSvgElement(n);
 export const isInput = (n) => isIn(n, 'HTMLInputElement', 'undefined' === typeof HTMLInputElement ? undefined : HTMLInputElement);
 export const isTextArea = (n) => isIn(n, 'HTMLTextAreaElement', 'undefined' === typeof HTMLTextAreaElement ? undefined : HTMLTextAreaElement);
 export const isSelect = (n) => isIn(n, 'HTMLSelectElement', 'undefined' === typeof HTMLSelectElement ? undefined : HTMLSelectElement);
 export const isButton = (n) => isIn(n, 'HTMLButtonElement', 'undefined' === typeof HTMLButtonElement ? undefined : HTMLButtonElement);
+export const isMeter = (n) => isIn(n, 'HTMLMeterElement', 'undefined' === typeof HTMLMeterElement ? undefined : HTMLMeterElement);
+export const isOutput = (n) => isIn(n, 'HTMLOutputElement', 'undefined' === typeof HTMLOutputElement ? undefined : HTMLOutputElement);
+export const isProgress = (n) => isIn(n, 'HTMLProgressElement', 'undefined' === typeof HTMLProgressElement ? undefined : HTMLProgressElement);
 export const isForm = (n) => isIn(n, 'HTMLFormElement', 'undefined' === typeof HTMLFormElement ? undefined : HTMLFormElement);
 export const isFrame = (n) => isIn(n, 'HTMLIFrameElement', 'undefined' === typeof HTMLIFrameElement ? undefined : HTMLIFrameElement);
 export function valuePrototypeOf(el) {

package/dist/dom/snapshot.d.ts

@@ -5,7 +5,7 @@ interface SnapshotStatus {
     visibleDialogs?: string[];
     overlayHidingPage?: string;
 }
-export interface SnapshotResult {
+interface SnapshotResult {
     tree: string;
     status: SnapshotStatus;
     nodes: number;

package/dist/dom/snapshot.js

@@ -54,6 +54,7 @@ function stateSuffix(el) {
     const states = getStates(el).filter((s) => s === ElementState.DISABLED ||
         s === ElementState.CHECKED ||
         s === ElementState.EXPANDED ||
+        s === ElementState.PRESSED ||
         s === ElementState.FOCUSED);
     return states.length > 0 ? ` [${states.join(',')}]` : '';
 }
@@ -142,9 +143,14 @@ function visit(child, depth, ctx, inLive) {
     }
 }
 function walk(parent, depth, ctx, inLive = false) {
-    if (depth > ctx.maxDepth)
-        return;
     const children = pierceChildren(parent);
+    if (depth > ctx.maxDepth) {
+        if (children.length > 0) {
+            ctx.truncated = true;
+            recordUnread([parent], ctx);
+        }
+        return;
+    }
     for (let index = 0; index < children.length; index += 1) {
         if (ctx.nodes >= ctx.maxNodes) {
             ctx.truncated = true;

package/dist/observers/console.js

@@ -2,6 +2,9 @@ import { EventType, TRANSPORT_LIMITS } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 import { safeStringify } from '../security/serialization.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
+import { createRepeatLimiter } from './error-repeats.js';
+const CSP_VIOLATION_EVENT = 'securitypolicyviolation';
+const REPORT_ONLY = 'report';
 const METHOD_EVENT = {
     log: EventType.CONSOLE_LOG,
     warn: EventType.CONSOLE_WARN,
@@ -54,6 +57,16 @@ export function installConsole(emit) {
         patched.set(method, wrapper);
         console[method] = wrapper;
     }
+    const repeats = createRepeatLimiter();
+    const emitError = (payload) => {
+        const decision = repeats.admit(payload);
+        if (!decision.emit)
+            return;
+        emit(EventType.ERROR_UNCAUGHT, {
+            ...payload,
+            ...(undefined === decision.repeats ? {} : { repeats: decision.repeats }),
+        });
+    };
     const onError = (event) => {
         if (!(event instanceof ErrorEvent)) {
             const target = event.target;
@@ -62,43 +75,55 @@ export function installConsole(emit) {
             const tag = target.tagName.toLowerCase();
             const url = target.getAttribute('src') ?? target.getAttribute('href') ?? '';
             observeSafely(() => {
-                emit(EventType.ERROR_UNCAUGHT, {
-                    message: `<${tag}> failed to load${0 === url.length ? '' : `: ${url}`}`,
-                    kind: 'resource',
-                    ...(0 === url.length ? {} : { source: url }),
-                });
+                const message = `<${tag}> failed to load${0 === url.length ? '' : `: ${url}`}`;
+                emitError({ message, kind: 'resource', ...(0 === url.length ? {} : { source: url }) });
             });
             return;
         }
         observeSafely(() => {
             const stack = capStack(event.error instanceof Error ? event.error.stack : undefined);
-            emit(EventType.ERROR_UNCAUGHT, {
+            const payload = {
                 message: event.message,
                 source: event.filename,
                 line: event.lineno,
                 ...(stack === undefined ? {} : { stack }),
-            });
+            };
+            emitError(payload);
         });
     };
     const onRejection = (event) => {
         observeSafely(() => {
             const reason = event.reason;
             const stack = capStack(reason instanceof Error ? reason.stack : undefined);
-            emit(EventType.ERROR_UNCAUGHT, {
+            const payload = {
                 message: reason instanceof Error ? reason.message : String(reason),
                 kind: 'unhandledrejection',
                 ...(stack === undefined ? {} : { stack }),
-            });
+            };
+            emitError(payload);
+        });
+    };
+    const onViolation = (event) => {
+        const what = 0 === event.blockedURI.length ? 'inline content' : event.blockedURI;
+        const reportOnly = REPORT_ONLY === event.disposition;
+        emit(reportOnly ? EventType.CONSOLE_WARN : EventType.CONSOLE_ERROR, {
+            message: reportOnly
+                ? `[Report Only] Content Security Policy directive: ${event.violatedDirective} would block ${what}`
+                : `Content Security Policy directive: ${event.violatedDirective} blocked ${what}`,
+            kind: CSP_VIOLATION_EVENT,
+            ...(0 === event.blockedURI.length ? {} : { source: event.blockedURI }),
         });
     };
-    window.addEventListener('error', onError, true);
-    window.addEventListener('unhandledrejection', onRejection);
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    window.addEventListener('error', onError, { capture: true, signal });
+    window.addEventListener('unhandledrejection', onRejection, { signal });
+    window.addEventListener(CSP_VIOLATION_EVENT, onViolation, { capture: true, signal });
     return () => {
         for (const [method, original] of originals) {
             if (console[method] === patched.get(method))
                 console[method] = original;
         }
-        window.removeEventListener('error', onError, true);
-        window.removeEventListener('unhandledrejection', onRejection);
+        listeners.abort();
     };
 }

package/dist/observers/dom.js

@@ -153,8 +153,10 @@ export function installDom(emit) {
                     dropped += 1;
                     continue;
                 }
-                if (isReticleOverlay(node))
+                if (isReticleOverlay(node) ||
+                    (isElement(record.target) && isReticleOverlay(record.target))) {
                     continue;
+                }
                 const gone = describeMount(node);
                 if (gone === undefined)
                     continue;