@reticlehq/browser 3.6.0 → 3.8.0

package/dist/observers/canvas.js

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

package/dist/observers/dom.js

@@ -1,15 +1,16 @@
 import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
-import { EventType, TruncationChannel } from '@reticlehq/core';
-import { getAccessibleName, getRole, isVisible } from '../dom/a11y.js';
+import { EventType, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
+import { getAccessibleName, getRole, isSensitiveField, isVisible } from '../dom/a11y.js';
 import { refs } from '../dom/addressing/refs.js';
 function regionKeyOf(target) {
     const el = isElement(target) ? target : null;
-    if (null === el)
+    if (null === el) {
         return undefined;
+    }
     const labelled = el.closest(testIdSelector());
     return (labelled ? readTestId(labelled) : null) ?? refs.refFor(el);
 }
-import { isReticleOverlay } from '../dom/dom-ignore.js';
+import { isUnobserved } from '../dom/dom-ignore.js';
 import { capturedRoots, installShadowRegistry, onShadowRoot } from '../dom/shadow-registry.js';
 import { isElement } from '../dom/realm.js';
 import { observeSameOriginFrames } from './frames.js';
@@ -30,8 +31,9 @@ const WATCHED_ATTRS = [
 ];
 const MAX_ATTR_VALUE_LEN = 120;
 function capValue(value) {
-    if (null === value)
+    if (null === value) {
         return undefined;
+    }
     return value.length > MAX_ATTR_VALUE_LEN ? `${value.slice(0, MAX_ATTR_VALUE_LEN)}…` : value;
 }
 const DIALOG_ROLES = new Set(['dialog', 'alertdialog']);
@@ -44,19 +46,23 @@ const MOUNT_SCAN_LIMIT = 40;
 function describeMount(node) {
     const role = getRole(node);
     const name = getAccessibleName(node);
-    if (isMeaningful(role, name))
+    if (isMeaningful(role, name)) {
         return { role, name, el: node };
+    }
     let scanned = 0;
     for (const child of node.querySelectorAll('*')) {
-        if (scanned >= MOUNT_SCAN_LIMIT)
+        if (scanned >= MOUNT_SCAN_LIMIT) {
             return undefined;
+        }
         scanned += 1;
-        if (isReticleOverlay(child))
+        if (isUnobserved(child)) {
             continue;
+        }
         const childRole = getRole(child);
         const childName = getAccessibleName(child);
-        if (isMeaningful(childRole, childName))
+        if (isMeaningful(childRole, childName)) {
             return { role: childRole, name: childName, el: child };
+        }
     }
     return undefined;
 }
@@ -64,31 +70,63 @@ const TEXT_NODE = 3;
 function textOf(nodes) {
     let out = '';
     for (const node of nodes) {
-        if (node.nodeType !== TEXT_NODE)
+        if (node.nodeType !== TEXT_NODE) {
             continue;
+        }
         out += node.nodeValue ?? '';
     }
     const trimmed = out.trim();
     return trimmed.length > 0 ? trimmed : undefined;
 }
+const SAFE_ON_SECRET = new Set([
+    'class',
+    'style',
+    'type',
+    'disabled',
+    'readonly',
+    'required',
+    'hidden',
+]);
+function secretAttr(el, attr) {
+    return !SAFE_ON_SECRET.has(attr) && !attr.startsWith('aria-') && isSensitiveField(el);
+}
+const TESTID_DEPTH = 3;
+const MAX_INITIAL_TEXTS = 50;
+function testidNear(el) {
+    let at = el;
+    for (let depth = 0; at !== null && depth <= TESTID_DEPTH; depth += 1) {
+        const id = readTestId(at);
+        if (id !== null && id.length > 0) {
+            return id;
+        }
+        at = at.parentElement;
+    }
+    return undefined;
+}
+const named = (el) => {
+    const testid = testidNear(el);
+    return testid === undefined ? {} : { testid };
+};
 export function installDom(emit) {
     const stopRegistry = installShadowRegistry();
     const observer = new MutationObserver((records) => {
         let added = 0;
         let removed = 0;
         let changed = 0;
+        let initials = 0;
         let dropped = 0;
         for (const record of records) {
             if ('attributes' === record.type) {
                 const target = record.target;
-                if (isElement(target) && record.attributeName !== null && !isReticleOverlay(target)) {
+                if (isElement(target) && record.attributeName !== null && !isUnobserved(target)) {
                     if (changed >= MAX_PER_BATCH) {
                         dropped += 1;
                         continue;
                     }
                     changed += 1;
-                    const value = capValue(target.getAttribute(record.attributeName));
-                    const old = capValue(record.oldValue);
+                    const hide = secretAttr(target, record.attributeName);
+                    const value = hide ? REDACTED_VALUE : capValue(target.getAttribute(record.attributeName));
+                    const old = hide && null !== record.oldValue ? REDACTED_VALUE : capValue(record.oldValue);
                     emit(EventType.DOM_ATTR, {
                         attr: record.attributeName,
                         ...(value === undefined ? {} : { value }),
@@ -99,43 +137,65 @@ export function installDom(emit) {
             }
             if ('characterData' === record.type) {
                 const parent = record.target.parentElement;
-                if (parent !== null && !isReticleOverlay(parent)) {
+                if (parent !== null && !isUnobserved(parent)) {
                     if (changed >= MAX_PER_BATCH) {
                         dropped += 1;
                         continue;
                     }
                     changed += 1;
-                    const text = (record.target.textContent ?? '').trim().slice(0, 80);
-                    const old = capValue(record.oldValue?.trim() ?? null);
-                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }) }, refs.refFor(parent));
+                    const hide = isSensitiveField(parent);
+                    const text = hide
+                        ? REDACTED_VALUE
+                        : (record.target.textContent ?? '').trim().slice(0, 80);
+                    const old = hide ? undefined : capValue(record.oldValue?.trim() ?? null);
+                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent) }, refs.refFor(parent));
                 }
                 continue;
             }
             if (textOf(record.addedNodes) !== undefined || textOf(record.removedNodes) !== undefined) {
                 const parent = isElement(record.target) ? record.target : null;
-                if (parent !== null && !isReticleOverlay(parent)) {
-                    if (changed >= MAX_PER_BATCH)
+                if (parent !== null && !isUnobserved(parent)) {
+                    if (changed >= MAX_PER_BATCH) {
                         dropped += 1;
+                    }
                     else {
                         changed += 1;
-                        const text = (parent.textContent ?? '').trim().slice(0, 80);
-                        const old = capValue(textOf(record.removedNodes) ?? null);
-                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }) }, refs.refFor(parent));
+                        const hide = isSensitiveField(parent);
+                        const text = hide ? REDACTED_VALUE : (parent.textContent ?? '').trim().slice(0, 80);
+                        const old = hide ? undefined : capValue(textOf(record.removedNodes) ?? null);
+                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent) }, refs.refFor(parent));
                     }
                 }
             }
             for (const node of record.addedNodes) {
-                if (!isElement(node))
+                if (!isElement(node)) {
                     continue;
+                }
                 if (added >= MAX_PER_BATCH) {
                     dropped += 1;
                     continue;
                 }
-                if (isReticleOverlay(node))
+                if (isUnobserved(node)) {
                     continue;
+                }
+                const testids = [node, ...Array.from(node.querySelectorAll(testIdSelector()))].filter((el) => readTestId(el) !== null);
+                for (const el of testids) {
+                    const text = (el.textContent ?? '').trim();
+                    if (0 === text.length) {
+                        continue;
+                    }
+                    if (initials >= MAX_INITIAL_TEXTS) {
+                        dropped += 1;
+                        continue;
+                    }
+                    initials += 1;
+                    const shown = isSensitiveField(el) ? REDACTED_VALUE : text.slice(0, 80);
+                    emit(EventType.DOM_TEXT, { text: shown, testid: readTestId(el) ?? '', initial: true }, refs.refFor(el));
+                }
                 const mounted = describeMount(node);
-                if (mounted === undefined)
+                if (mounted === undefined) {
                     continue;
+                }
                 const { role, name } = mounted;
                 added += 1;
                 const ref = refs.refFor(mounted.el);
@@ -143,31 +203,34 @@ export function installDom(emit) {
                 if (DIALOG_ROLES.has(role) ||
                     LIVE_ROLES.has(role) ||
                     'true' === node.getAttribute('aria-modal')) {
-                    if (isVisible(node))
+                    if (isVisible(node)) {
                         emit(EventType.VISIBLE_SHOWN, { role, name }, ref);
+                    }
                 }
             }
             for (const node of record.removedNodes) {
-                if (!isElement(node))
+                if (!isElement(node)) {
                     continue;
+                }
                 if (removed >= MAX_PER_BATCH) {
                     dropped += 1;
                     continue;
                 }
-                if (isReticleOverlay(node) ||
-                    (isElement(record.target) && isReticleOverlay(record.target))) {
+                if (isUnobserved(node) || (isElement(record.target) && isUnobserved(record.target))) {
                     continue;
                 }
                 const gone = describeMount(node);
-                if (gone === undefined)
+                if (gone === undefined) {
                     continue;
+                }
                 const { role, name } = gone;
                 removed += 1;
                 emit(EventType.DOM_REMOVED, { role, name, region: regionKeyOf(record.target) });
             }
         }
-        if (dropped > 0)
+        if (dropped > 0) {
             emit(EventType.TRUNCATED, { channel: TruncationChannel.DOM, dropped });
+        }
     });
     const options = {
         subtree: true,
@@ -179,8 +242,9 @@ export function installDom(emit) {
         characterDataOldValue: true,
     };
     observer.observe(document.documentElement, options);
-    for (const root of capturedRoots())
+    for (const root of capturedRoots()) {
         observer.observe(root, options);
+    }
     const unsubscribe = onShadowRoot((root) => observer.observe(root, options));
     const stopFrames = observeSameOriginFrames((body) => observer.observe(body, options));
     return () => {

package/dist/observers/field.d.ts

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

package/dist/observers/field.js

@@ -1,14 +1,34 @@
 import { readTestId } from '../dom/addressing/testid-attr.js';
-import { DEFAULT_TESTID_ATTR, EventType, isSensitiveKey } from '@reticlehq/core';
-import { getAccessibleName } from '../dom/a11y.js';
+import { EventType, FieldChangeField, FieldChangeKind } from '@reticlehq/core';
+import { getAccessibleName, isSensitiveField } from '../dom/a11y.js';
 const MAX_VALUE_LEN = 160;
 const BURST_MS = 150;
-const PAYMENT_AUTOCOMPLETE = /^(cc-|current-password|new-password)/i;
+const CHECKBOX_TYPE = 'checkbox';
+const RADIO_TYPE = 'radio';
+let settledEmit;
 function isField(target) {
     return (target instanceof HTMLInputElement ||
         target instanceof HTMLTextAreaElement ||
         target instanceof HTMLSelectElement);
 }
+function isCheckable(element) {
+    return (element instanceof HTMLInputElement &&
+        (CHECKBOX_TYPE === element.type || RADIO_TYPE === element.type));
+}
+function readingOf(element) {
+    if (isCheckable(element))
+        return { value: element.value, checked: element.checked };
+    return { value: element.value };
+}
+function readingMoved(before, after) {
+    if (before.checked !== undefined || after.checked !== undefined) {
+        return before.checked !== after.checked;
+    }
+    return before.value !== after.value;
+}
+function clip(value) {
+    return value.length > MAX_VALUE_LEN ? `${value.slice(0, MAX_VALUE_LEN)}…` : value;
+}
 function fieldName(element) {
     const testid = readTestId(element);
     if (null !== testid && testid.length > 0)
@@ -21,38 +41,102 @@ function fieldName(element) {
     const id = element.getAttribute('id');
     return null !== id && id.length > 0 ? id : element.tagName.toLowerCase();
 }
-function isSecret(element) {
-    if (element instanceof HTMLInputElement && 'password' === element.type)
-        return true;
-    const hint = element.getAttribute('autocomplete');
-    if (null !== hint && PAYMENT_AUTOCOMPLETE.test(hint))
-        return true;
-    for (const key of [
-        element.name,
-        readTestId(element),
-        element.getAttribute(DEFAULT_TESTID_ATTR),
-        element.getAttribute('id'),
-    ]) {
-        if (null !== key && key.length > 0 && isSensitiveKey(key))
-            return true;
+function fieldPayload(element, kind, after, before) {
+    const secret = isSensitiveField(element);
+    const payload = {
+        [FieldChangeField.FIELD]: fieldName(element),
+        [FieldChangeField.KIND]: kind,
+        [FieldChangeField.LENGTH]: after.value.length,
+    };
+    if (after.checked !== undefined)
+        payload[FieldChangeField.CHECKED] = after.checked;
+    if (before?.checked !== undefined)
+        payload[FieldChangeField.PREVIOUS_CHECKED] = before.checked;
+    if (secret) {
+        payload[FieldChangeField.REDACTED] = true;
+        return payload;
     }
-    return false;
+    payload[FieldChangeField.VALUE] = clip(after.value);
+    if (before !== undefined && before.checked === undefined) {
+        payload[FieldChangeField.PREVIOUS] = clip(before.value);
+    }
+    return payload;
+}
+function settledProperty(el) {
+    return isCheckable(el) ? 'checked' : 'value';
+}
+function inheritedDescriptor(el, prop) {
+    for (let proto = Object.getPrototypeOf(el); proto !== null;) {
+        const found = Object.getOwnPropertyDescriptor(proto, prop);
+        if (found !== undefined)
+            return found;
+        proto = Object.getPrototypeOf(proto);
+    }
+    return undefined;
+}
+function watchWrites(el, prop) {
+    const own = Object.getOwnPropertyDescriptor(el, prop);
+    const target = own ?? inheritedDescriptor(el, prop);
+    const get = target === undefined ? undefined : Reflect.get(target, 'get');
+    const set = target === undefined ? undefined : Reflect.get(target, 'set');
+    let written = false;
+    const usable = 'function' === typeof get && 'function' === typeof set;
+    if (!usable || false === own?.configurable) {
+        return { stop: () => { }, written: () => written };
+    }
+    Object.defineProperty(el, prop, {
+        configurable: true,
+        enumerable: target?.enumerable ?? false,
+        get() {
+            return Reflect.apply(get, this, []);
+        },
+        set(next) {
+            written = true;
+            Reflect.apply(set, this, [next]);
+        },
+    });
+    let stopped = false;
+    return {
+        stop: () => {
+            if (stopped)
+                return;
+            stopped = true;
+            if (own === undefined)
+                Reflect.deleteProperty(el, prop);
+            else
+                Object.defineProperty(el, prop, own);
+        },
+        written: () => written,
+    };
+}
+export function watchActedField(el) {
+    if (!isField(el) || el instanceof HTMLSelectElement)
+        return undefined;
+    return { before: readingOf(el), ...watchWrites(el, settledProperty(el)) };
+}
+export function publishSettledField(el, acted) {
+    const emit = settledEmit;
+    if (acted === undefined)
+        return;
+    acted.stop();
+    if (emit === undefined || !isField(el) || !el.isConnected || !acted.written())
+        return;
+    const before = acted.before;
+    if (isSensitiveField(el) && before.checked === undefined)
+        return;
+    const after = readingOf(el);
+    if (!readingMoved(before, after))
+        return;
+    emit(EventType.FIELD_CHANGE, fieldPayload(el, FieldChangeKind.SETTLED, after, before));
 }
 export function installField(emit) {
     const ac = new AbortController();
     const { signal } = ac;
+    const previousEmit = settledEmit;
+    settledEmit = emit;
     const pending = new Map();
     const report = (element, kind) => {
-        const value = element.value;
-        const secret = isSecret(element);
-        emit(EventType.FIELD_CHANGE, {
-            field: fieldName(element),
-            kind,
-            length: value.length,
-            ...(secret
-                ? { redacted: true }
-                : { value: value.length > MAX_VALUE_LEN ? `${value.slice(0, MAX_VALUE_LEN)}…` : value }),
-        });
+        emit(EventType.FIELD_CHANGE, fieldPayload(element, kind, readingOf(element)));
     };
     const clear = (element) => {
         const timer = pending.get(element);
@@ -67,7 +151,7 @@ export function installField(emit) {
         clear(element);
         pending.set(element, setTimeout(() => {
             pending.delete(element);
-            report(element, 'input');
+            report(element, FieldChangeKind.INPUT);
         }, BURST_MS));
     };
     const onChange = (event) => {
@@ -75,7 +159,7 @@ export function installField(emit) {
         if (!isField(element))
             return;
         clear(element);
-        report(element, 'change');
+        report(element, FieldChangeKind.CHANGE);
     };
     document.addEventListener('input', onInput, { signal, capture: true });
     document.addEventListener('change', onChange, { signal, capture: true });
@@ -83,6 +167,8 @@ export function installField(emit) {
         for (const timer of pending.values())
             clearTimeout(timer);
         pending.clear();
+        if (settledEmit === emit)
+            settledEmit = previousEmit;
         ac.abort();
     };
 }

package/dist/observers/install-all.js

@@ -17,6 +17,8 @@ import { installDialogs } from './dialogs.js';
 import { installAnimation } from './animation.js';
 import { installScroll } from './scroll.js';
 import { installHealth } from './health.js';
+import { installMedia } from './media.js';
+import { installCanvas } from './canvas.js';
 import { reportSdkFailure, SdkSite } from './sdk-failure.js';
 function guard(emit, site, install) {
     try {
@@ -65,5 +67,7 @@ export function installAllObservers(emit, options) {
         guard(emit, SdkSite.DOM_OBSERVER, () => installBlindSpots(emit)),
         guard(emit, SdkSite.HEALTH_OBSERVER, () => installHealth(emit)),
         guard(emit, SdkSite.DOM_OBSERVER, () => installContextOpen(emit)),
+        guard(emit, SdkSite.DOM_OBSERVER, () => installMedia(emit)),
+        guard(emit, SdkSite.DOM_OBSERVER, () => installCanvas(emit)),
     ];
 }

package/dist/observers/media.d.ts

@@ -0,0 +1,2 @@
+import { type Emit, type Teardown } from './types.js';
+export declare function installMedia(emit: Emit): Teardown;

package/dist/observers/media.js

@@ -0,0 +1,32 @@
+import { EventType, MediaEvent } from '@reticlehq/core';
+import { refs } from '../dom/addressing/refs.js';
+import { observeSafely } from './types.js';
+const TAGS = { VIDEO: 'video', AUDIO: 'audio' };
+export function installMedia(emit) {
+    const ac = new AbortController();
+    const onMedia = (event) => {
+        observeSafely(() => {
+            const el = event.target;
+            if (!(el instanceof HTMLMediaElement)) {
+                return;
+            }
+            const tag = TAGS[el.tagName];
+            if (tag === undefined) {
+                return;
+            }
+            const duration = Number.isFinite(el.duration) ? el.duration : undefined;
+            emit(EventType.MEDIA_STATE, {
+                event: event.type,
+                tag,
+                currentTime: el.currentTime,
+                ...(duration === undefined ? {} : { duration }),
+                readyState: el.readyState,
+                paused: el.paused,
+            }, refs.refFor(el));
+        });
+    };
+    for (const type of Object.values(MediaEvent)) {
+        document.addEventListener(type, onMedia, { capture: true, signal: ac.signal });
+    }
+    return () => ac.abort();
+}

package/dist/observers/net-detail/network-body.d.ts

@@ -1,5 +1,7 @@
+import { ResponseBodyReason } from '@reticlehq/core';
 export declare function isStreamingBody(contentType: string | null, contentLength: string | null): boolean;
 export declare function withBodyDeadline(read: Promise<string>): Promise<string | undefined>;
+export declare function skippedBodyReason(contentType: string | null): ResponseBodyReason | undefined;
 export declare function isCapturableType(contentType: string | null): boolean;
 export declare function setNetworkBodyMaxChars(chars: number): void;
 export declare function networkBodyMaxChars(): number;

package/dist/observers/net-detail/network-body.js

@@ -1,4 +1,4 @@
-import { REDACTED_VALUE } from '@reticlehq/core';
+import { REDACTED_VALUE, ResponseBodyReason } from '@reticlehq/core';
 import { isSensitiveKey, safeStringify, scrubKnownSecrets } from '../../security/serialization.js';
 import { nativeClearTimeout, nativeSetTimeout } from '../../timers/native/native-timers.js';
 const CAPTURABLE_CONTENT = /application\/json|text\/|application\/xml|x-www-form-urlencoded|graphql/i;
@@ -25,6 +25,13 @@ export async function withBodyDeadline(read) {
             nativeClearTimeout(timer);
     }
 }
+export function skippedBodyReason(contentType) {
+    if (null === contentType)
+        return undefined;
+    return STREAMING_CONTENT.test(contentType)
+        ? ResponseBodyReason.STREAMING
+        : ResponseBodyReason.NOT_TEXT;
+}
 export function isCapturableType(contentType) {
     if (null === contentType)
         return false;