@reticlehq/browser 3.2.0 → 3.3.0

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

@@ -9,7 +9,7 @@ export declare function fireClickSequence(el: HTMLElement, hold?: {
     ms: number;
     sleep: (ms: number) => Promise<void>;
     now: () => number;
-}): Promise<{
+}, detail?: number): Promise<{
     prevented: boolean;
     heldMs: 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.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

@@ -141,7 +141,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 +167,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;

package/dist/actions/value-input.js

@@ -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 (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/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/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/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;

package/dist/observers/download.js

@@ -7,6 +7,7 @@ const PREVIEW_CHARS = 2000;
 export function installDownload(emit, opts = {}) {
     if (typeof URL.createObjectURL !== 'function')
         return () => undefined;
+    const ac = new AbortController();
     const objectUrl = URL.createObjectURL.bind(URL);
     const known = new Map();
     const originalCreate = captureMethod(URL, 'createObjectURL');
@@ -58,7 +59,7 @@ export function installDownload(emit, opts = {}) {
             report(anchor.getAttribute('href') ?? '', anchor.getAttribute('download') ?? undefined);
         });
     };
-    document.addEventListener('click', onClick, true);
+    document.addEventListener('click', onClick, { capture: true, signal: ac.signal });
     const originalClick = captureMethod(HTMLAnchorElement.prototype, 'click');
     const patchedClick = function reticleObservedAnchorClick() {
         const pending = observeValue(() => this.hasAttribute('download')
@@ -75,7 +76,7 @@ export function installDownload(emit, opts = {}) {
     };
     HTMLAnchorElement.prototype.click = patchedClick;
     return () => {
-        document.removeEventListener('click', onClick, true);
+        ac.abort();
         if (URL.createObjectURL === patchedCreate)
             URL.createObjectURL = originalCreate;
         if (HTMLAnchorElement.prototype.click === patchedClick) {

package/dist/observers/error-repeats.d.ts

@@ -0,0 +1,18 @@
+export declare const REPEAT_BURST = 3;
+export declare const MAX_TRACKED_FINGERPRINTS = 256;
+export interface RepeatDecision {
+    readonly emit: boolean;
+    readonly repeats?: number;
+}
+export interface ErrorIdentity {
+    readonly message: string;
+    readonly source?: string;
+    readonly line?: number;
+    readonly kind?: string;
+    readonly stack?: string;
+}
+export declare function fingerprintError(identity: ErrorIdentity): string;
+export interface RepeatLimiter {
+    admit(identity: ErrorIdentity): RepeatDecision;
+}
+export declare function createRepeatLimiter(burst?: number, maxTracked?: number): RepeatLimiter;

package/dist/observers/error-repeats.js

@@ -0,0 +1,41 @@
+import { fnv1a } from '@reticlehq/core';
+export const REPEAT_BURST = 3;
+export const MAX_TRACKED_FINGERPRINTS = 256;
+const PASS = { emit: true };
+const DROP = { emit: false };
+function isCheckpoint(count) {
+    if (count < 10)
+        return false;
+    let n = count;
+    while (0 === n % 10)
+        n /= 10;
+    return 1 === n;
+}
+export function fingerprintError(identity) {
+    return fnv1a([
+        identity.message,
+        identity.source ?? '',
+        undefined === identity.line ? '' : String(identity.line),
+        identity.kind ?? '',
+        identity.stack ?? '',
+    ].join('\x00'));
+}
+export function createRepeatLimiter(burst = REPEAT_BURST, maxTracked = MAX_TRACKED_FINGERPRINTS) {
+    const counts = new Map();
+    return {
+        admit(identity) {
+            const key = fingerprintError(identity);
+            const seen = (counts.get(key) ?? 0) + 1;
+            counts.delete(key);
+            if (counts.size >= maxTracked) {
+                const oldest = counts.keys().next();
+                if (!(oldest.done ?? false))
+                    counts.delete(oldest.value);
+            }
+            counts.set(key, seen);
+            if (seen <= burst)
+                return PASS;
+            return isCheckpoint(seen) ? { emit: true, repeats: seen } : DROP;
+        },
+    };
+}

package/dist/observers/field.d.ts

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

package/dist/observers/field.js

@@ -0,0 +1,86 @@
+import { EventType, isSensitiveKey } from '@reticlehq/core';
+import { getAccessibleName } from '../dom/a11y.js';
+const MAX_VALUE_LEN = 160;
+const BURST_MS = 150;
+const PAYMENT_AUTOCOMPLETE = /^(cc-|current-password|new-password)/i;
+function isField(target) {
+    return (target instanceof HTMLInputElement ||
+        target instanceof HTMLTextAreaElement ||
+        target instanceof HTMLSelectElement);
+}
+function fieldName(element) {
+    const testid = element.getAttribute('data-testid');
+    if (null !== testid && testid.length > 0)
+        return testid;
+    if (element.name.length > 0)
+        return element.name;
+    const accessible = getAccessibleName(element);
+    if (accessible.length > 0)
+        return accessible;
+    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,
+        element.getAttribute('data-testid'),
+        element.getAttribute('id'),
+    ]) {
+        if (null !== key && key.length > 0 && isSensitiveKey(key))
+            return true;
+    }
+    return false;
+}
+export function installField(emit) {
+    const ac = new AbortController();
+    const { signal } = ac;
+    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 }),
+        });
+    };
+    const clear = (element) => {
+        const timer = pending.get(element);
+        if (timer !== undefined)
+            clearTimeout(timer);
+        pending.delete(element);
+    };
+    const onInput = (event) => {
+        const element = event.target;
+        if (!isField(element))
+            return;
+        clear(element);
+        pending.set(element, setTimeout(() => {
+            pending.delete(element);
+            report(element, 'input');
+        }, BURST_MS));
+    };
+    const onChange = (event) => {
+        const element = event.target;
+        if (!isField(element))
+            return;
+        clear(element);
+        report(element, 'change');
+    };
+    document.addEventListener('input', onInput, { signal, capture: true });
+    document.addEventListener('change', onChange, { signal, capture: true });
+    return () => {
+        for (const timer of pending.values())
+            clearTimeout(timer);
+        pending.clear();
+        ac.abort();
+    };
+}

package/dist/observers/frames.js

@@ -24,6 +24,7 @@ export function sameOriginFrameBodies(root) {
     return found;
 }
 export function observeSameOriginFrames(attach) {
+    const ac = new AbortController();
     const attachAll = () => {
         for (const body of sameOriginFrameBodies(document))
             attach(body);
@@ -33,8 +34,6 @@ export function observeSameOriginFrames(attach) {
         if (event.target instanceof HTMLIFrameElement)
             attachAll();
     };
-    document.addEventListener('load', onLoad, true);
-    return () => {
-        document.removeEventListener('load', onLoad, true);
-    };
+    document.addEventListener('load', onLoad, { capture: true, signal: ac.signal });
+    return () => ac.abort();
 }

package/dist/observers/install-all.js

@@ -2,6 +2,7 @@ import { installDom } from './dom.js';
 import { installStorage } from './storage.js';
 import { installStoreState } from './state.js';
 import { installFocus } from './focus.js';
+import { installField } from './field.js';
 import { installBlindSpots } from './blind-spots.js';
 import { installDownload } from './download.js';
 import { installContextOpen } from './context-open.js';
@@ -59,6 +60,7 @@ export function installAllObservers(emit, options) {
         guard(emit, SdkSite.STORE_ADAPTER, () => installStorage(emit)),
         guard(emit, SdkSite.STORE_ADAPTER, () => installStoreState(emit)),
         guard(emit, SdkSite.DOM_OBSERVER, () => installFocus(emit)),
+        guard(emit, SdkSite.DOM_OBSERVER, () => installField(emit)),
         guard(emit, SdkSite.NETWORK_OBSERVER, () => installDownload(emit, { capturePreview: options.captureBodies })),
         guard(emit, SdkSite.DOM_OBSERVER, () => installBlindSpots(emit)),
         guard(emit, SdkSite.HEALTH_OBSERVER, () => installHealth(emit)),

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

@@ -1,6 +1,8 @@
 export declare function isStreamingBody(contentType: string | null, contentLength: string | null): boolean;
 export declare function withBodyDeadline(read: Promise<string>): Promise<string | undefined>;
 export declare function isCapturableType(contentType: string | null): boolean;
+export declare function setNetworkBodyMaxChars(chars: number): void;
+export declare function networkBodyMaxChars(): number;
 export declare function shouldCaptureErrorBody(status: number, enabled: boolean): boolean;
 export declare function projectErrorBody(rawText: string, contentType: string | null): {
     body: string;

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

@@ -32,8 +32,23 @@ export function isCapturableType(contentType) {
         return false;
     return CAPTURABLE_CONTENT.test(contentType);
 }
-const MAX_BODY_CHARS = 8192;
-const MAX_BODY_SCAN_CHARS = MAX_BODY_CHARS * 2;
+const DEFAULT_BODY_CHARS = 8192;
+const MAX_CONFIGURABLE_BODY_CHARS = 262144;
+const MIN_CONFIGURABLE_BODY_CHARS = 256;
+let bodyMaxChars = DEFAULT_BODY_CHARS;
+export function setNetworkBodyMaxChars(chars) {
+    if (!Number.isFinite(chars))
+        return;
+    bodyMaxChars = Math.min(MAX_CONFIGURABLE_BODY_CHARS, Math.max(MIN_CONFIGURABLE_BODY_CHARS, Math.floor(chars)));
+}
+export function networkBodyMaxChars() {
+    return bodyMaxChars;
+}
+const REDACT_SCAN_CEILING = DEFAULT_BODY_CHARS * 2;
+function scanWidth(redacting) {
+    const generous = bodyMaxChars * 2;
+    return redacting ? Math.min(generous, REDACT_SCAN_CEILING) : generous;
+}
 const AUTH_SCHEME_TOKEN = /\b(Bearer|Basic)\s+(?=[A-Za-z0-9._~+/=-]{16,})(?=[A-Za-z0-9._~+/=-]*[\d._~+/=-])[A-Za-z0-9._~+/=-]+/gi;
 function redactText(text) {
     return (text
@@ -51,10 +66,12 @@ export function projectErrorBody(rawText, contentType) {
     return { body: projected.body.slice(0, ERROR_BODY_CHARS), truncated: true };
 }
 export function projectBody(rawText, contentType) {
-    const oversized = rawText.length > MAX_BODY_SCAN_CHARS;
-    const text = oversized ? rawText.slice(0, MAX_BODY_SCAN_CHARS) : rawText;
+    const isJson = contentType !== null && /json|graphql/i.test(contentType);
+    const scanChars = scanWidth(!isJson);
+    const oversized = rawText.length > scanChars;
+    const text = oversized ? rawText.slice(0, scanChars) : rawText;
     let out;
-    if (contentType !== null && /json|graphql/i.test(contentType)) {
+    if (isJson) {
         try {
             out = safeStringify(JSON.parse(text));
         }
@@ -66,6 +83,6 @@ export function projectBody(rawText, contentType) {
         out = redactText(text);
     }
     out = scrubKnownSecrets(out);
-    const truncated = oversized || out.length > MAX_BODY_CHARS;
-    return { body: out.length > MAX_BODY_CHARS ? out.slice(0, MAX_BODY_CHARS) : out, truncated };
+    const truncated = oversized || out.length > bodyMaxChars;
+    return { body: out.length > bodyMaxChars ? out.slice(0, bodyMaxChars) : out, truncated };
 }

package/dist/observers/route.js

@@ -10,6 +10,7 @@ function snapshotLocation() {
     };
 }
 export function installRoute(emit) {
+    const ac = new AbortController();
     const origPush = captureMethod(history, 'pushState');
     const origReplace = captureMethod(history, 'replaceState');
     const callPush = origPush.bind(history);
@@ -45,14 +46,13 @@ export function installRoute(emit) {
     const onNav = () => {
         fire(lastHref);
     };
-    window.addEventListener('popstate', onNav);
-    window.addEventListener('hashchange', onNav);
+    window.addEventListener('popstate', onNav, { signal: ac.signal });
+    window.addEventListener('hashchange', onNav, { signal: ac.signal });
     return () => {
         if (history.pushState === patchedPush)
             history.pushState = origPush;
         if (history.replaceState === patchedReplace)
             history.replaceState = origReplace;
-        window.removeEventListener('popstate', onNav);
-        window.removeEventListener('hashchange', onNav);
+        ac.abort();
     };
 }

package/dist/observers/state.js

@@ -19,6 +19,16 @@ export function diffState(prev, next) {
 function project(path, value) {
     return isSensitiveKey(path) ? REDACTED_VALUE : sanitizeForTransport(value);
 }
+function samePresentedValue(oldValue, newValue) {
+    if (Object.is(oldValue, newValue))
+        return true;
+    try {
+        return JSON.stringify(oldValue) === JSON.stringify(newValue);
+    }
+    catch {
+        return false;
+    }
+}
 function safeRead(getter) {
     try {
         return getter();
@@ -39,15 +49,15 @@ export function installStoreState(emit) {
         active.set(name, subscribe(() => {
             observeSafely(() => {
                 const next = safeRead(getter);
-                for (const change of diffState(last, next)) {
-                    emit(EventType.STATE_CHANGE, {
-                        name,
-                        path: change.path,
-                        value: project(change.path, change.new),
-                        old: project(change.path, change.old),
-                    });
-                }
+                const changes = diffState(last, next);
                 last = next;
+                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))
+                        continue;
+                    observeSafely(() => emit(EventType.STATE_CHANGE, { name, path: change.path, value, old }));
+                }
             });
         }));
     };

package/dist/presenter/carousel/carousel.d.ts

@@ -0,0 +1,13 @@
+export declare const CAROUSEL_ATTR = "data-reticle-carousel";
+export declare const CAROUSEL_SLIDE_ATTR = "data-reticle-carousel-slide";
+export declare const CAROUSEL_DOT_ATTR = "data-reticle-carousel-dot";
+export declare const CAROUSEL_CLOSE_ATTR = "data-reticle-carousel-close";
+export declare const CAROUSEL_DISMISSED_KEY = "reticle.carousel.dismissed";
+export declare const ROTATE_MS = 6000;
+export interface Slide {
+    id: string;
+    html: string;
+}
+export declare function carouselHtml(slides: readonly Slide[], active: number): string;
+export declare function paintCarousel(log: HTMLElement, slides: readonly Slide[], storage: Pick<Storage, 'getItem' | 'setItem'> | undefined): void;
+export declare const CAROUSEL_CSS = "\n.reticle-carousel{position:relative;margin:8px 10px;padding:10px 12px 8px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}\n.reticle-carousel-track{height:100px;overflow:hidden;}\n.reticle-carousel-slide .reticle-offer,.reticle-carousel-slide .reticle-talk{margin:0;padding:0;border:0;background:none;}\n.reticle-carousel-close{position:absolute;top:4px;right:6px;width:20px;height:20px;padding:0;border:0;background:none;color:inherit;opacity:.55;cursor:pointer;font-size:14px;line-height:20px;}\n.reticle-carousel-close:hover{opacity:1;}\n.reticle-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:6px;}\n.reticle-carousel-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.3;cursor:pointer;}\n.reticle-carousel-dot[aria-current=\"true\"]{opacity:.9;}\n";