@reticlehq/browser 3.4.0 → 3.6.0

package/dist/actions/actions-dom.js

@@ -16,12 +16,32 @@ function pointerEventFor(el, type, init) {
         ? new PointerEvent(type, full)
         : new MouseEvent(type, full);
 }
+const BUTTON_HELD = 1;
+const BUTTON_RELEASED = 0;
+function fireAt(el, type, at, buttons, related, detail = 0) {
+    const init = {
+        bubbles: !(type.endsWith('enter') || type.endsWith('leave')),
+        cancelable: true,
+        detail,
+        clientX: at.x,
+        clientY: at.y,
+        screenX: at.x,
+        screenY: at.y,
+        buttons,
+        button: 0,
+        ...(related !== undefined ? { relatedTarget: related } : {}),
+    };
+    return el.dispatchEvent(type.startsWith('pointer')
+        ? pointerEventFor(el, type, { ...init, pointerId: 1, isPrimary: true })
+        : mouseEventFor(el, type, init));
+}
 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', init)));
+    const at = centreOf(el);
+    const d = detail ?? 0;
+    asSyntheticInput(() => fireAt(el, 'pointerdown', at, BUTTON_HELD, from, d));
+    asSyntheticInput(() => fireAt(el, 'mousedown', at, BUTTON_HELD, undefined, d));
     if (el.tabIndex >= 0 && 'function' === typeof el.focus)
         el.focus();
     let heldMs = 0;
@@ -30,9 +50,9 @@ export async function fireClickSequence(el, hold, detail) {
         await hold.sleep(hold.ms);
         heldMs = hold.now() - startedAt;
     }
-    firePointer(el, 'pointerup', from);
-    asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'mouseup', init)));
-    const notPrevented = asSyntheticInput(() => el.dispatchEvent(mouseEventFor(el, 'click', init)));
+    asSyntheticInput(() => fireAt(el, 'pointerup', at, BUTTON_RELEASED, from, d));
+    asSyntheticInput(() => fireAt(el, 'mouseup', at, BUTTON_RELEASED, undefined, d));
+    const notPrevented = asSyntheticInput(() => fireAt(el, 'click', at, BUTTON_RELEASED, undefined, d));
     return { prevented: !notPrevented, heldMs };
 }
 function isMeasurable(rect) {
@@ -86,8 +106,6 @@ function makeDataTransfer(data) {
     }
     return dt;
 }
-const BUTTON_HELD = 1;
-const BUTTON_RELEASED = 0;
 const DRAG_STEPS = 5;
 function centreOf(el) {
     const box = el.getBoundingClientRect();
@@ -100,28 +118,11 @@ export async function dragElement(source, target, data) {
     const dest = target ?? source;
     const from = centreOf(source);
     const to = centreOf(dest);
-    const fire = (el, type, at, buttons, related) => {
-        const bubbles = !(type.endsWith('enter') || type.endsWith('leave'));
-        const init = {
-            bubbles,
-            cancelable: true,
-            clientX: at.x,
-            clientY: at.y,
-            screenX: at.x,
-            screenY: at.y,
-            buttons,
-            button: 0,
-            ...(related !== undefined ? { relatedTarget: related } : {}),
-        };
-        el.dispatchEvent(type.startsWith('pointer')
-            ? pointerEventFor(el, type, { ...init, pointerId: 1, isPrimary: true })
-            : mouseEventFor(el, type, init));
-    };
     const sourceRect = source.getBoundingClientRect();
     const destRect = target !== null ? dest.getBoundingClientRect() : null;
     const crosses = (rect, p) => p.x >= rect.left && p.x <= rect.right && p.y >= rect.top && p.y <= rect.bottom;
-    fire(source, 'pointerdown', from, BUTTON_HELD);
-    fire(source, 'mousedown', from, BUTTON_HELD);
+    fireAt(source, 'pointerdown', from, BUTTON_HELD);
+    fireAt(source, 'mousedown', from, BUTTON_HELD);
     await nativeFrame();
     let leftSource = false;
     let enteredDest = false;
@@ -129,30 +130,30 @@ export async function dragElement(source, target, data) {
         const at = lerp(from, to, step / DRAG_STEPS);
         if (!leftSource && !crosses(sourceRect, at)) {
             leftSource = true;
-            fire(source, 'pointerout', at, BUTTON_HELD, dest);
-            fire(source, 'mouseout', at, BUTTON_HELD, dest);
-            fire(source, 'pointerleave', at, BUTTON_HELD, dest);
-            fire(source, 'mouseleave', at, BUTTON_HELD, dest);
+            fireAt(source, 'pointerout', at, BUTTON_HELD, dest);
+            fireAt(source, 'mouseout', at, BUTTON_HELD, dest);
+            fireAt(source, 'pointerleave', at, BUTTON_HELD, dest);
+            fireAt(source, 'mouseleave', at, BUTTON_HELD, dest);
         }
         if (leftSource && !enteredDest && destRect !== null && crosses(destRect, at)) {
             enteredDest = true;
-            fire(dest, 'pointerover', at, BUTTON_HELD, source);
-            fire(dest, 'mouseover', at, BUTTON_HELD, source);
-            fire(dest, 'pointerenter', at, BUTTON_HELD, source);
-            fire(dest, 'mouseenter', at, BUTTON_HELD, source);
+            fireAt(dest, 'pointerover', at, BUTTON_HELD, source);
+            fireAt(dest, 'mouseover', at, BUTTON_HELD, source);
+            fireAt(dest, 'pointerenter', at, BUTTON_HELD, source);
+            fireAt(dest, 'mouseenter', at, BUTTON_HELD, source);
         }
-        fire(dest, 'pointermove', at, BUTTON_HELD);
-        fire(dest, 'mousemove', at, BUTTON_HELD);
+        fireAt(dest, 'pointermove', at, BUTTON_HELD);
+        fireAt(dest, 'mousemove', at, BUTTON_HELD);
         await nativeFrame();
     }
     if (!enteredDest && destRect !== null) {
-        fire(dest, 'pointerover', to, BUTTON_HELD, source);
-        fire(dest, 'mouseover', to, BUTTON_HELD, source);
-        fire(dest, 'pointerenter', to, BUTTON_HELD, source);
-        fire(dest, 'mouseenter', to, BUTTON_HELD, source);
+        fireAt(dest, 'pointerover', to, BUTTON_HELD, source);
+        fireAt(dest, 'mouseover', to, BUTTON_HELD, source);
+        fireAt(dest, 'pointerenter', to, BUTTON_HELD, source);
+        fireAt(dest, 'mouseenter', to, BUTTON_HELD, source);
     }
-    fire(dest, 'pointerup', to, BUTTON_RELEASED);
-    fire(dest, 'mouseup', to, BUTTON_RELEASED);
+    fireAt(dest, 'pointerup', to, BUTTON_RELEASED);
+    fireAt(dest, 'mouseup', to, BUTTON_RELEASED);
     let dropPrevented = false;
     if ('function' === typeof DragEvent) {
         const dataTransfer = makeDataTransfer(data);

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

@@ -1,14 +1,20 @@
 import { type ActionTarget } from '../dom/realm.js';
 export declare function pressKey(args: Record<string, unknown>): string;
-export declare function pressModifiers(args: Record<string, unknown>): {
+export interface ModifierFlags {
     metaKey: boolean;
     ctrlKey: boolean;
     shiftKey: boolean;
     altKey: boolean;
-};
+}
+export declare function pressModifiers(args: Record<string, unknown>): ModifierFlags;
 export declare function pressCode(args: Record<string, unknown>, key: string): string;
 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: 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>;
+export declare const legacyKeyCode: (key: string) => number;
+export declare function keyboardEvent(type: string, init: KeyboardEventInit & {
+    key: string;
+}): KeyboardEvent;
+export declare function holdKey(el: ActionTarget, key: string, code: string, mods: ModifierFlags, ms: number): Promise<void>;
+export declare function pressCombo(el: ActionTarget, keys: readonly string[], mods: ModifierFlags, holdMs: number): Promise<boolean>;
+export declare function closeModalOnEscape(el: ActionTarget, key: string, keydownProceeded: boolean): void;

package/dist/actions/actions-press.js

@@ -1,4 +1,4 @@
-import { ActionType, isGlobalPress, pressKeyFromArgs } from '@reticlehq/core';
+import { ActionType, isGlobalPress, pressKeyFromArgs, pressKeysFromArgs } from '@reticlehq/core';
 import { asSyntheticInput } from './synthetic/synthetic-input.js';
 import { nativeSetTimeout } from '../timers/native/native-timers.js';
 const sleep = (ms) => new Promise((r) => nativeSetTimeout(r, ms));
@@ -9,16 +9,38 @@ function asString(value, fallback = '') {
 export function pressKey(args) {
     return pressKeyFromArgs(args);
 }
+const MODIFIER_FLAG_KEYS = [
+    'metaKey',
+    'ctrlKey',
+    'shiftKey',
+    'altKey',
+];
+const MODIFIER_FLAG_ALIASES = {
+    meta: 'metaKey',
+    cmd: 'metaKey',
+    command: 'metaKey',
+    super: 'metaKey',
+    win: 'metaKey',
+    control: 'ctrlKey',
+    ctrl: 'ctrlKey',
+    shift: 'shiftKey',
+    alt: 'altKey',
+    option: 'altKey',
+    opt: 'altKey',
+};
 export function pressModifiers(args) {
     const raw = args['modifiers'];
     const names = Array.isArray(raw) ? raw.map((m) => asString(m).toLowerCase()) : [];
-    const has = (...aliases) => aliases.some((a) => names.includes(a));
-    return {
-        metaKey: has('meta', 'cmd', 'command', 'super', 'win'),
-        ctrlKey: has('control', 'ctrl'),
-        shiftKey: has('shift'),
-        altKey: has('alt', 'option', 'opt'),
-    };
+    const flags = { metaKey: false, ctrlKey: false, shiftKey: false, altKey: false };
+    for (const name of names) {
+        const flag = MODIFIER_FLAG_ALIASES[name];
+        if (flag !== undefined)
+            flags[flag] = true;
+    }
+    return flags;
+}
+function modifierFlagFor(key) {
+    return MODIFIER_FLAG_ALIASES[key.toLowerCase()];
 }
 export function pressCode(args, key) {
     const explicit = args['code'];
@@ -79,19 +101,45 @@ export function isReflessDocumentPress(ref, action, args) {
     return 0 === ref.length && isGlobalPress(args) && ActionType.PRESS === action;
 }
 export function pressKeys(args) {
-    const raw = args['keys'];
-    if (!Array.isArray(raw))
-        return [];
-    return raw.map((k) => asString(k)).filter((k) => k.length > 0);
+    return pressKeysFromArgs(args);
 }
 const KEY_REPEAT_MS = 33;
 const KEY_REPEAT_DELAY_MS = 500;
+const LEGACY_KEY_CODES = {
+    Backspace: 8,
+    Tab: 9,
+    Enter: 13,
+    Shift: 16,
+    Control: 17,
+    Alt: 18,
+    Escape: 27,
+    ' ': 32,
+    PageUp: 33,
+    PageDown: 34,
+    End: 35,
+    Home: 36,
+    ArrowLeft: 37,
+    ArrowUp: 38,
+    ArrowRight: 39,
+    ArrowDown: 40,
+    Delete: 46,
+    Meta: 91,
+};
+const SINGLE_ALNUM = /^[a-z0-9]$/i;
+export const legacyKeyCode = (key) => LEGACY_KEY_CODES[key] ?? (SINGLE_ALNUM.test(key) ? key.toUpperCase().charCodeAt(0) : 0);
+export function keyboardEvent(type, init) {
+    const event = new KeyboardEvent(type, init);
+    const code = legacyKeyCode(init.key);
+    for (const legacy of ['keyCode', 'which'])
+        Object.defineProperty(event, legacy, { get: () => code });
+    return event;
+}
 export async function holdKey(el, key, code, mods, ms) {
     const started = Date.now();
     if (ms > KEY_REPEAT_DELAY_MS)
         await sleep(KEY_REPEAT_DELAY_MS);
     while (Date.now() - started < ms) {
-        asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keydown', {
+        asSyntheticInput(() => el.dispatchEvent(keyboardEvent('keydown', {
             key,
             code,
             bubbles: true,
@@ -103,18 +151,61 @@ export async function holdKey(el, key, code, mods, ms) {
     }
 }
 export async function pressCombo(el, keys, mods, holdMs) {
+    const held = { ...mods };
+    const dispatch = (type, key) => {
+        const code = pressCode({}, key);
+        return asSyntheticInput(() => el.dispatchEvent(keyboardEvent(type, { key, code, bubbles: true, cancelable: true, ...held })));
+    };
+    const presses = new Map();
+    for (const flag of MODIFIER_FLAG_KEYS) {
+        if (held[flag])
+            presses.set(flag, 1);
+    }
+    const pressFlag = (flag) => {
+        presses.set(flag, (presses.get(flag) ?? 0) + 1);
+        held[flag] = true;
+    };
+    const releaseFlag = (flag) => {
+        const left = (presses.get(flag) ?? 1) - 1;
+        presses.set(flag, left);
+        if (left <= 0)
+            held[flag] = false;
+    };
     let prevented = false;
     for (const key of keys) {
-        const code = pressCode({}, key);
-        const ok = asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keydown', { key, code, bubbles: true, cancelable: true, ...mods })));
+        const flag = modifierFlagFor(key);
+        if (flag !== undefined)
+            pressFlag(flag);
+        const ok = dispatch('keydown', key);
         if (!ok)
             prevented = true;
+        closeModalOnEscape(el, key, ok);
     }
     if (holdMs > 0)
         await sleep(holdMs);
     for (const key of [...keys].reverse()) {
-        const code = pressCode({}, key);
-        asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keyup', { key, code, bubbles: true, ...mods })));
+        const flag = modifierFlagFor(key);
+        if (flag !== undefined)
+            releaseFlag(flag);
+        dispatch('keyup', key);
     }
     return prevented;
 }
+export function closeModalOnEscape(el, key, keydownProceeded) {
+    if ('Escape' !== key || !keydownProceeded)
+        return;
+    for (let dialog = el.closest('dialog'); null !== dialog; dialog = dialog.parentElement?.closest('dialog') ?? null) {
+        try {
+            if (!dialog.open || !dialog.matches(':modal'))
+                continue;
+        }
+        catch {
+            return;
+        }
+        if ('function' === typeof dialog.requestClose)
+            dialog.requestClose();
+        else if (dialog.dispatchEvent(new Event('cancel', { cancelable: true })))
+            dialog.close();
+        return;
+    }
+}

package/dist/actions/actions.d.ts

@@ -27,6 +27,8 @@ interface ActionResult {
     component?: string;
     role?: string;
     name?: string;
+    nth?: number;
+    of?: number;
     source?: {
         file: string;
         line: number;
@@ -36,7 +38,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

@@ -1,4 +1,6 @@
-import { ActionType, ActionWarning, DANGEROUS_ACTION_CONFIRM_ARG, ElementState, NATIVE_INPUT_ARG, SettleReason, } from '@reticlehq/core';
+import { readTestId } from '../dom/addressing/testid-attr.js';
+import { ActionType, ActionWarning, clampHoldMs, DANGEROUS_ACTION_CONFIRM_ARG, ElementState, NATIVE_INPUT_ARG, QueryBy, SettleReason, } from '@reticlehq/core';
+import { elementsMatching } from '../dom/query.js';
 import { asSyntheticInput } from './synthetic/synthetic-input.js';
 import { echoRef, refs } from '../dom/addressing/refs.js';
 import { dangerousActionContext, requiresDangerousConfirmation, submitControlFor, } from './danger-context.js';
@@ -9,7 +11,7 @@ import { isActionTarget, isForm, isInput, isSelect, isTextArea, } from '../dom/r
 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';
+import { focusedOrDocument, isReflessDocumentPress, pressCode, pressKey, pressModifiers, pressKeys, holdKey, pressCombo, closeModalOnEscape, keyboardEvent, } from './actions-press.js';
 function asString(value, fallback = '') {
     return 'string' === typeof value ? value : fallback;
 }
@@ -22,7 +24,7 @@ function requireElement(ref) {
     return el;
 }
 function anchorOf(el) {
-    const testid = el.getAttribute('data-testid') ?? undefined;
+    const testid = readTestId(el) ?? undefined;
     const info = identifyComponent(el);
     const out = {};
     if (testid !== undefined)
@@ -38,6 +40,14 @@ function anchorOf(el) {
         out.role = role;
     if (name.length > 0)
         out.name = name;
+    if (role.length > 0 && name.length > 0) {
+        const same = elementsMatching({ by: QueryBy.ROLE, value: role, name });
+        const at = same.indexOf(el);
+        if (1 < same.length && 0 <= at) {
+            out.nth = at;
+            out.of = same.length;
+        }
+    }
     return out;
 }
 const result = (ref, action, effect, settled, settleReason, anchor, warning) => {
@@ -60,6 +70,10 @@ const result = (ref, action, effect, settled, settleReason, anchor, warning) =>
         base.role = anchor.role;
     if (anchor.name !== undefined)
         base.name = anchor.name;
+    if (anchor.nth !== undefined)
+        base.nth = anchor.nth;
+    if (anchor.of !== undefined)
+        base.of = anchor.of;
     if (warning !== undefined)
         base.warning = warning;
     return base;
@@ -137,19 +151,13 @@ function activeRef(el) {
         return null;
     return refs.refFor(active);
 }
-const MAX_HOLD_MS = 30_000;
-function clampHold(raw) {
-    if ('number' !== typeof raw || !Number.isFinite(raw) || raw <= 0)
-        return 0;
-    return Math.min(raw, MAX_HOLD_MS);
-}
 async function dispatchFor(el, action, args) {
     if (ActionType.CLICK === action) {
-        const hold = clampHold(args['holdMs']);
+        const hold = clampHoldMs(args['holdMs']);
         return await fireClickSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() });
     }
     if (ActionType.TAP === action) {
-        const hold = clampHold(args['holdMs']);
+        const hold = clampHoldMs(args['holdMs']);
         return await fireTapSequence(el, 0 === hold ? undefined : { ms: hold, sleep, now: () => Date.now() });
     }
     return { prevented: await dispatchOther(el, action, args), heldMs: 0 };
@@ -175,7 +183,7 @@ async function dispatchOther(el, action, args) {
             el.dispatchEvent(mouseEventFor(el, 'mouseenter', { relatedTarget: from }));
             firePointer(el, 'pointermove', from);
             const moved = el.dispatchEvent(mouseEventFor(el, 'mousemove', { bubbles: true, cancelable: true }));
-            const holdMs = clampHold(args['holdMs']);
+            const holdMs = clampHoldMs(args['holdMs']);
             if (holdMs > 0)
                 await sleep(holdMs);
             return !moved;
@@ -274,14 +282,15 @@ async function dispatchOther(el, action, args) {
             const mods = pressModifiers(args);
             const combo = pressKeys(args);
             if (combo.length > 0)
-                return await pressCombo(el, combo, mods, clampHold(args['holdMs']));
+                return await pressCombo(el, combo, mods, clampHoldMs(args['holdMs']));
             const key = pressKey(args);
             const code = pressCode(args, key);
-            const down = asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keydown', { key, code, bubbles: true, cancelable: true, ...mods })));
-            const hold = clampHold(args['holdMs']);
+            const down = asSyntheticInput(() => el.dispatchEvent(keyboardEvent('keydown', { key, code, bubbles: true, cancelable: true, ...mods })));
+            closeModalOnEscape(el, key, down);
+            const hold = clampHoldMs(args['holdMs']);
             if (hold > 0)
                 await holdKey(el, key, code, mods, hold);
-            asSyntheticInput(() => el.dispatchEvent(new KeyboardEvent('keyup', { key, code, bubbles: true, ...mods })));
+            asSyntheticInput(() => el.dispatchEvent(keyboardEvent('keyup', { key, code, bubbles: true, ...mods })));
             return !down;
         }
         case ActionType.SCROLL_INTO_VIEW:
@@ -410,16 +419,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/danger-context.js

@@ -33,7 +33,7 @@ export function dangerousActionContext(el) {
 const SUBMIT_CONTROL_SELECTOR = 'button[type="submit"], input[type="submit"], button:not([type]):not([type=""])';
 export function submitControlFor(el) {
     const found = el.closest('form')?.querySelector(SUBMIT_CONTROL_SELECTOR);
-    return found instanceof HTMLElement ? found : null;
+    return isHtmlElement(found) ? found : null;
 }
 export function requiresDangerousConfirmation(text, role) {
     return isDangerousActionText(text, role);

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/connect-options.d.ts

@@ -6,6 +6,7 @@ export interface ReticleConnectOptions {
     token?: string;
     allowNonLocalhost?: boolean;
     allowInProduction?: boolean;
+    testIdAttribute?: string;
     overlay?: boolean;
     captureNetworkBodies?: boolean;
     networkBodyMaxChars?: number;

package/dist/dom/a11y.js

@@ -1,12 +1,14 @@
-import { ElementState, REDACTED_VALUE } from '@reticlehq/core';
+import { readTestId } from './addressing/testid-attr.js';
+import { DEFAULT_TESTID_ATTR, ElementState, REDACTED_VALUE, } from '@reticlehq/core';
 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_DIRECT_SUMMARY_SELECTOR = ':scope > summary';
+const HTML_SUMMARY_TAG = 'summary';
 const NAME_FROM_CONTENT = new Set([
     'button',
     'link',
@@ -30,9 +32,11 @@ const NAME_FROM_CONTENT = new Set([
     'status',
     'alert',
 ]);
-const INPUT_TEXT_TYPES = new Set(['text', 'email', 'tel', 'url', 'search', 'password', '']);
+const INPUT_TEXT_TYPES = new Set(['text', 'email', 'tel', 'url', 'password', '']);
 function inputRole(input) {
     const type = input.type.toLowerCase();
+    if ('search' === type)
+        return 'searchbox';
     if (INPUT_TEXT_TYPES.has(type))
         return 'textbox';
     if ('checkbox' === type)
@@ -173,13 +177,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);
@@ -275,7 +285,8 @@ export function isSensitiveField(el) {
     const identifiers = [
         el.getAttribute('name') ?? '',
         el.id,
-        el.getAttribute('data-testid') ?? '',
+        readTestId(el) ?? '',
+        el.getAttribute(DEFAULT_TESTID_ATTR) ?? '',
         el.getAttribute('aria-label') ?? '',
     ];
     const sensitiveAutocomplete = /current-password|new-password|cc-number|cc-csc|one-time-code/i.test(autocomplete);
@@ -299,8 +310,13 @@ function hiddenInsideClosedDetails(el) {
     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);
+    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);
 }
 function selfHidden(el) {
     if ('true' === el.getAttribute('aria-hidden'))
@@ -317,12 +333,28 @@ function selfHidden(el) {
             'collapse' === style.visibility) {
             return true;
         }
-        if (0 === Number.parseFloat(style.opacity || '1'))
+        if (0 === Number.parseFloat(style.opacity || '1') && !stalledFade(el))
             return true;
     }
     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;

package/dist/dom/addressing/refs.js

@@ -1,4 +1,5 @@
 import { TRANSPORT_LIMITS, asRef } from '@reticlehq/core';
+import { ReticleStorageKey } from '../../storage-keys.js';
 export const MAX_TRACKED_REFS = 10000;
 const REF_ELISION = '…';
 const REF_PREFIX = 'e';
@@ -7,7 +8,7 @@ export function echoRef(ref) {
     return max >= ref.length ? ref : `${ref.slice(0, max)}${REF_ELISION}`;
 }
 const SWEEP_EVERY_MINTS = 1000;
-const REF_BASE_KEY = '__reticle_ref_base';
+const REF_BASE_KEY = ReticleStorageKey.REF_BASE;
 export const REF_BLOCK = 100;
 function readBase(store) {
     try {

package/dist/dom/addressing/testid-attr.d.ts

@@ -0,0 +1,4 @@
+export declare function getTestIdAttr(): string;
+export declare function testIdSelector(): string;
+export declare function readTestId(el: Element): string | null;
+export declare function setTestIdAttr(name: string | undefined): void;

package/dist/dom/addressing/testid-attr.js

@@ -0,0 +1,14 @@
+import { DEFAULT_TESTID_ATTR, TESTID_ATTR_PATTERN } from '@reticlehq/core';
+let testIdAttr = DEFAULT_TESTID_ATTR;
+export function getTestIdAttr() {
+    return testIdAttr;
+}
+export function testIdSelector() {
+    return `[${testIdAttr}]`;
+}
+export function readTestId(el) {
+    return el.getAttribute(testIdAttr);
+}
+export function setTestIdAttr(name) {
+    testIdAttr = undefined !== name && TESTID_ATTR_PATTERN.test(name) ? name : DEFAULT_TESTID_ATTR;
+}