@reticlehq/browser 3.3.0 → 3.5.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,7 +6,7 @@ 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;
@@ -13,11 +14,11 @@ export declare function fireClickSequence(el: HTMLElement, hold?: {
     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-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

@@ -36,7 +36,6 @@ interface ActionResult {
 }
 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>;
 export interface ActionStep {
     ref: string;
     action: string;

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) &&
@@ -244,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');
             }
@@ -324,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)');
             }
@@ -380,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 = {
@@ -408,16 +410,6 @@ export async function executeAction(ref, action, args = {}) {
     return result(ref, action, effect, settled, settleReason, anchor, warning);
 }
 const sleep = (ms) => new Promise((r) => nativeSetTimeout(r, ms));
-export async function dispatchWebMcp(tool, params, confirmDangerous = false) {
-    if (requiresDangerousConfirmation(tool) && !confirmDangerous) {
-        throw new Error(`potentially destructive WebMCP tool blocked; retry with ${DANGEROUS_ACTION_CONFIRM_ARG}=true`);
-    }
-    const mc = navigator.modelContext;
-    if (mc === undefined || typeof mc.callTool !== 'function') {
-        throw new Error('WebMCP (navigator.modelContext) not available on this page');
-    }
-    return await mc.callTool(tool, params);
-}
 export async function executeSequence(steps) {
     const effects = [];
     const stepResults = [];

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);
@@ -15,7 +15,7 @@ export function setNativeValue(el, value) {
 }
 function isRichText(el) {
     const flag = el.getAttribute('contenteditable');
-    if (el.isContentEditable || (null !== flag && 'false' !== flag))
+    if ((isHtmlElement(el) && el.isContentEditable) || (null !== flag && 'false' !== flag))
         return true;
     if ('textbox' === el.getAttribute('role'))
         return true;

package/dist/commands/commands.js

@@ -1,8 +1,8 @@
-import { ActionType, ComponentStateReason, DANGEROUS_ACTION_CONFIRM_ARG, ElementQuerySchema, ReticleCommand, SnapshotMode, TRANSPORT_LIMITS, selectPath, capDepth, } from '@reticlehq/core';
+import { ComponentStateReason, ElementQuerySchema, ReticleCommand, SnapshotMode, TRANSPORT_LIMITS, selectPath, capDepth, } from '@reticlehq/core';
 import { buildSnapshot } from '../dom/snapshot.js';
 import { paintContextOf } from '../dom/paint-context.js';
 import { matchQuery, runQuery } from '../dom/query.js';
-import { executeAction, executeSequence, dispatchWebMcp, } from '../actions/actions.js';
+import { executeAction, executeSequence } from '../actions/actions.js';
 import { describe } from '../dom/a11y.js';
 import { documentHasSourceStamps, sourceFor, formatSource } from '../dom/addressing/source.js';
 import { themeReport } from '../dom/theme.js';
@@ -198,10 +198,6 @@ export function createCommandRegistry() {
     reg.set(ReticleCommand.MATCH, (args) => matchQuery(ElementQuerySchema.parse(record(args['query'])), str(args['state'])));
     reg.set(ReticleCommand.ACT, (args) => {
         const action = str(args['action']) ?? '';
-        if (action === ActionType.WEBMCP) {
-            const inner = record(args['args']);
-            return dispatchWebMcp(str(inner['tool']) ?? '', record(inner['params']), true === inner[DANGEROUS_ACTION_CONFIRM_ARG]);
-        }
         return executeAction(str(args['ref']) ?? '', action, record(args['args']));
     });
     reg.set(ReticleCommand.ACT_SEQUENCE, (args) => executeSequence((Array.isArray(args['steps']) ? args['steps'] : [])));

package/dist/dom/a11y.js

@@ -1,9 +1,13 @@
 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 { capturedRootOf } from './shadow-registry.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_SUMMARY_TAG = 'summary';
 const NAME_FROM_CONTENT = new Set([
     'button',
     'link',
@@ -170,13 +174,19 @@ function textWithoutHidden(node) {
         const alt = el.getAttribute('alt');
         return null === alt ? '' : alt;
     }
-    const parts = [];
+    let result = '';
+    let lastWasElement = false;
     for (const child of el.childNodes) {
         const piece = textWithoutHidden(child);
-        if (piece.length > 0)
-            parts.push(piece);
+        if (0 === piece.length)
+            continue;
+        const isEl = Node.ELEMENT_NODE === child.nodeType;
+        if (result.length > 0 && (isEl || lastWasElement))
+            result += ' ';
+        result += piece;
+        lastWasElement = isEl;
     }
-    return parts.join(' ');
+    return result;
 }
 export function getAccessibleName(el) {
     const labelled = labelledByText(el);
@@ -190,7 +200,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 +217,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 +268,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 +299,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 = Array.from(details.children).find((child) => HTML_SUMMARY_TAG === child.localName);
+    return summary === undefined || !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 +329,28 @@ function selfHidden(el) {
     }
     return false;
 }
+function slotInCapturedClosedRoot(el) {
+    const host = el.parentElement;
+    if (null === host || null !== host.shadowRoot)
+        return null;
+    const root = capturedRootOf(host);
+    if (null === root)
+        return null;
+    for (const slot of Array.from(root.querySelectorAll('slot'))) {
+        if (slot.assignedElements().includes(el))
+            return slot;
+    }
+    return null;
+}
+function parentAcrossShadowBoundary(el) {
+    const slot = el.assignedSlot ?? slotInCapturedClosedRoot(el);
+    if (null !== slot)
+        return slot;
+    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 +368,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/occlusion.js

@@ -14,9 +14,13 @@ export function hitTestOccluder(el, rect) {
     if (typeof doc.elementFromPoint !== 'function')
         return null;
     const withStack = doc;
+    const isOursButNotTheTarget = (candidate) => isReticleUi(candidate) &&
+        candidate !== el &&
+        !el.contains(candidate) &&
+        !candidate.contains(el);
     const topAt = (x, y) => {
         const found = withStack.elementsFromPoint?.(x, y) ?? [doc.elementFromPoint(x, y)];
-        return found.find((c) => null !== c && !isReticleUi(c)) ?? null;
+        return found.find((c) => null !== c && !isOursButNotTheTarget(c)) ?? null;
     };
     const blockers = new Map();
     for (const [fx, fy] of SAMPLE_POINTS) {

package/dist/dom/query.js

@@ -1,5 +1,5 @@
 import { DATA_RETICLE_SOURCE_ATTR, ElementState, QueryBy, REDACTED_VALUE, TRANSPORT_LIMITS, } from '@reticlehq/core';
-import { isElement, isFrame, isHtmlElement, isInput, isSelect, isTextArea } from './realm.js';
+import { isActionTarget, isElement, isFrame, isInput, isSelect, isTextArea } from './realm.js';
 import { capturedRootOf } from './shadow-registry.js';
 import { getAccessibleName, getRole, describe, getStates, isInViewport, isVisible, } from './a11y.js';
 import { isIgnored, isReticleOverlay } from './dom-ignore.js';
@@ -71,11 +71,11 @@ function resolveContainer(scope) {
     if (scope === undefined)
         return { container: document.body, scopeMissing: false };
     const byRef = refs.resolve(scope);
-    if (isHtmlElement(byRef))
+    if (isActionTarget(byRef))
         return { container: byRef, scopeMissing: false };
     try {
         const found = document.querySelector(scope);
-        if (isHtmlElement(found))
+        if (isActionTarget(found))
             return { container: found, scopeMissing: false };
     }
     catch {
@@ -269,7 +269,7 @@ export function matchQuery(query, state, limit = MAX_DESCRIBED) {
     const filtered = state === undefined ? elements : elements.filter((el) => inState(el, state, visMemo));
     const attrs = query.attrs;
     const described = filtered.slice(0, Math.max(0, Math.min(limit, MAX_DESCRIBED)));
-    const stampViewport = described.length > 1;
+    const stampViewport = described.length > 1 || ElementState.IN_VIEWPORT === state;
     const descriptors = described.map((el) => {
         let base = describe(el, visMemo);
         if (stampViewport &&

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.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/network.js

@@ -1,4 +1,4 @@
-import { BlindSpotKind, EventType, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { observeSafely, observeValue } from './types.js';
 import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, withBodyDeadline, } from './net-detail/network-body.js';
@@ -120,6 +120,15 @@ function methodOf(input, init) {
         return input.method.toUpperCase();
     return 'GET';
 }
+function nextActionOf(input, init) {
+    if (init !== undefined && init.headers !== undefined) {
+        return observeValue(() => new Headers(init.headers).get(NEXT_ACTION_HEADER)) ?? undefined;
+    }
+    if (input instanceof Request) {
+        return observeValue(() => input.headers.get(NEXT_ACTION_HEADER)) ?? undefined;
+    }
+    return undefined;
+}
 const NON_APP_FRAME = /@reticlehq|reticle\.ts|network\.ts|transport\.ts|<anonymous>|new Promise|node:internal/i;
 const DEPENDENCY_FRAME = /node_modules|\/\.vite\/deps\//i;
 export function firstAppFrame(stack) {
@@ -191,6 +200,8 @@ export function installNetwork(emit, opts = {}) {
         const id = nextId();
         const start = performance.now();
         const method = methodOf(input, init);
+        const nextAction = nextActionOf(input, init);
+        const nextActionFields = nextAction === undefined ? {} : { [NEXT_ACTION_FIELD]: nextAction };
         const urlFields = netUrlFields(rawUrl);
         const url = urlFields.url;
         const initiatorStack = observeValue(() => initiatorFrame());
@@ -226,6 +237,7 @@ export function installNetwork(emit, opts = {}) {
                         ...resourceTiming(rawUrl),
                         ...netResponseMeta(res.statusText, contentType, res.headers.get('content-length')),
                         ...projectRequestBody(init?.body, captureBodies),
+                        ...nextActionFields,
                         ...responseBodyFields,
                         ...(reinterpret?.(url, (name) => res.headers.get(name)) ?? {}),
                     });
@@ -282,6 +294,7 @@ export function installNetwork(emit, opts = {}) {
                     durationMs: Math.round(performance.now() - start),
                     initiator: 'fetch',
                     ...initiatorFields,
+                    ...nextActionFields,
                 });
             });
             throw error;

package/dist/observers/state.js

@@ -54,7 +54,10 @@ export function installStoreState(emit) {
                 for (const change of changes) {
                     const value = project(change.path, change.new);
                     const old = project(change.path, change.old);
-                    if (!isSensitiveKey(change.path) && samePresentedValue(old, value))
+                    const same = isSensitiveKey(change.path)
+                        ? samePresentedValue(sanitizeForTransport(change.old), sanitizeForTransport(change.new))
+                        : samePresentedValue(old, value);
+                    if (same)
                         continue;
                     observeSafely(() => emit(EventType.STATE_CHANGE, { name, path: change.path, value, old }));
                 }

package/dist/registry/store-adapters.js

@@ -1,5 +1,35 @@
 import { nativeWarn } from '../timers/console/native-console.js';
 import { markAdapterSource } from './stores.js';
+function snapshotLive(value) {
+    try {
+        return copyPlain(value, new WeakMap());
+    }
+    catch {
+        return value;
+    }
+}
+function copyPlain(value, seen) {
+    if ('object' !== typeof value || null === value)
+        return value;
+    const done = seen.get(value);
+    if (done !== undefined)
+        return done;
+    if (Array.isArray(value)) {
+        const out = [];
+        seen.set(value, out);
+        for (const item of value)
+            out.push(copyPlain(item, seen));
+        return out;
+    }
+    const proto = Object.getPrototypeOf(value);
+    if (proto !== Object.prototype && proto !== null)
+        return value;
+    const out = {};
+    seen.set(value, out);
+    for (const [key, item] of Object.entries(value))
+        out[key] = copyPlain(item, seen);
+    return out;
+}
 export function tanstackQueryStore(client) {
     const store = {
         getState: () => {
@@ -106,7 +136,7 @@ export function svelteStore(readable, warn = nativeWarn) {
             let value;
             let called = false;
             stopSubscription(readable.subscribe((next) => {
-                value = next;
+                value = snapshotLive(next);
                 called = true;
             }));
             if (!called && !warnedAboutLazyStore) {
@@ -132,7 +162,7 @@ export function svelteStore(readable, warn = nativeWarn) {
 const PINIA_SUBSCRIBE_OPTIONS = { detached: true, flush: 'sync' };
 export function piniaStore(store) {
     return {
-        getState: () => store.$state,
+        getState: () => snapshotLive(store.$state),
         subscribe: (listener) => store.$subscribe(() => listener(), { ...PINIA_SUBSCRIBE_OPTIONS }),
     };
 }

package/dist/registry/stores/adapters.js

@@ -6,8 +6,14 @@ export function registerAdapter(adapter) {
 }
 export function identifyComponent(el) {
     for (const adapter of adapters) {
-        const info = adapter.identify(el);
-        if (info !== null)
+        let info;
+        try {
+            info = adapter.identify(el);
+        }
+        catch {
+            continue;
+        }
+        if (info !== null && info !== undefined)
             return info;
     }
     return null;