@reticlehq/browser 3.5.0 → 3.7.0

package/dist/observers/departure.js

@@ -1,12 +1,19 @@
 import { EventType, NetInitiator } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 const NON_NAVIGATING = /^(javascript|mailto|tel|sms|blob|data):/i;
+function navigationOf() {
+    if ('undefined' === typeof window)
+        return undefined;
+    const nav = window.navigation;
+    return nav instanceof EventTarget ? nav : undefined;
+}
 function anchorFor(target) {
     if (!(target instanceof Element))
         return undefined;
     const anchor = target.closest('a');
     return anchor instanceof HTMLAnchorElement ? anchor : undefined;
 }
+const DUPLICATE_WINDOW_MS = 1000;
 export function isDeparture(href, downloadAttr, here) {
     if (0 === href.length || NON_NAVIGATING.test(href))
         return false;
@@ -28,6 +35,24 @@ export function installDeparture(emit) {
     if ('undefined' === typeof document)
         return () => undefined;
     let seq = 0;
+    let lastRecorded;
+    const record = (url, download) => {
+        const now = Date.now();
+        if (lastRecorded !== undefined &&
+            lastRecorded.url === url &&
+            now - lastRecorded.at < DUPLICATE_WINDOW_MS) {
+            return;
+        }
+        lastRecorded = { url, at: now };
+        seq += 1;
+        emit(EventType.NET_PENDING, {
+            id: `nav-${String(seq)}`,
+            method: 'GET',
+            url,
+            initiator: NetInitiator.NAVIGATION,
+            ...(download ? { download: true } : {}),
+        });
+    };
     const onClick = (event) => {
         observeSafely(() => {
             const anchor = anchorFor(event.target);
@@ -43,18 +68,35 @@ export function installDeparture(emit) {
                 observeSafely(() => {
                     if (event.defaultPrevented)
                         return;
-                    seq += 1;
-                    emit(EventType.NET_PENDING, {
-                        id: `nav-${String(seq)}`,
-                        method: 'GET',
-                        url,
-                        initiator: NetInitiator.NAVIGATION,
-                        ...(download ? { download: true } : {}),
-                    });
+                    record(url, download);
                 });
             });
         });
     };
+    const onNavigate = (event) => {
+        observeSafely(() => {
+            const destination = event.destination;
+            if (destination === undefined || destination.sameDocument)
+                return;
+            const url = destination.url;
+            if (!isDeparture(url, false, document.location.href))
+                return;
+            queueMicrotask(() => {
+                observeSafely(() => {
+                    if (event.defaultPrevented)
+                        return;
+                    record(url, false);
+                });
+            });
+        });
+    };
+    const navigation = navigationOf();
+    if (navigation !== undefined)
+        navigation.addEventListener('navigate', onNavigate);
     document.addEventListener('click', onClick, true);
-    return () => document.removeEventListener('click', onClick, true);
+    return () => {
+        document.removeEventListener('click', onClick, true);
+        if (navigation !== undefined)
+            navigation.removeEventListener('navigate', onNavigate);
+    };
 }

package/dist/observers/dom.js

@@ -1,14 +1,15 @@
-import { EventType, TruncationChannel } from '@reticlehq/core';
-import { getAccessibleName, getRole, isVisible } from '../dom/a11y.js';
+import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.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)
         return undefined;
-    const labelled = el.closest('[data-testid]');
-    return labelled?.getAttribute('data-testid') ?? refs.refFor(el);
+    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';
@@ -50,7 +51,7 @@ function describeMount(node) {
         if (scanned >= MOUNT_SCAN_LIMIT)
             return undefined;
         scanned += 1;
-        if (isReticleOverlay(child))
+        if (isUnobserved(child))
             continue;
         const childRole = getRole(child);
         const childName = getAccessibleName(child);
@@ -70,6 +71,18 @@ function textOf(nodes) {
     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);
+}
 export function installDom(emit) {
     const stopRegistry = installShadowRegistry();
     const observer = new MutationObserver((records) => {
@@ -80,14 +93,15 @@ export function installDom(emit) {
         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 }),
@@ -98,27 +112,31 @@ 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);
+                    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 }) }, 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 (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);
+                        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 }) }, refs.refFor(parent));
                     }
                 }
@@ -130,7 +148,7 @@ export function installDom(emit) {
                     dropped += 1;
                     continue;
                 }
-                if (isReticleOverlay(node))
+                if (isUnobserved(node))
                     continue;
                 const mounted = describeMount(node);
                 if (mounted === undefined)
@@ -153,8 +171,7 @@ export function installDom(emit) {
                     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);

package/dist/observers/field.js

@@ -1,15 +1,15 @@
-import { EventType, isSensitiveKey } from '@reticlehq/core';
-import { getAccessibleName } from '../dom/a11y.js';
+import { readTestId } from '../dom/addressing/testid-attr.js';
+import { EventType } 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;
 function isField(target) {
     return (target instanceof HTMLInputElement ||
         target instanceof HTMLTextAreaElement ||
         target instanceof HTMLSelectElement);
 }
 function fieldName(element) {
-    const testid = element.getAttribute('data-testid');
+    const testid = readTestId(element);
     if (null !== testid && testid.length > 0)
         return testid;
     if (element.name.length > 0)
@@ -20,29 +20,13 @@ 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,
-        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);
+        const secret = isSensitiveField(element);
         emit(EventType.FIELD_CHANGE, {
             field: fieldName(element),
             kind,

package/dist/observers/health.js

@@ -67,25 +67,86 @@ function detectBrand() {
         return BrowserBrand.SAFARI;
     return BrowserBrand.OTHER;
 }
-function snapshotHealth() {
+const pageFetch = 'undefined' !== typeof window && 'function' === typeof window.fetch
+    ? window.fetch.bind(window)
+    : undefined;
+function tauriWindowLabel() {
+    const internals = window['__TAURI_INTERNALS__'];
+    const label = internals?.metadata?.currentWindow?.label;
+    return 'string' === typeof label && label.length > 0 ? label : undefined;
+}
+function navigationStatus() {
+    try {
+        const [entry] = performance.getEntriesByType('navigation');
+        const known = entry?.responseStatus;
+        return 'number' === typeof known && known > 0 ? known : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+async function documentStatus(runtime) {
+    const known = navigationStatus();
+    if (known !== undefined)
+        return known;
+    try {
+        if ('web' === runtime || pageFetch === undefined || !/^https?:$/.test(location.protocol)) {
+            return undefined;
+        }
+        return (await pageFetch(location.href, { method: 'HEAD', cache: 'no-store' })).status;
+    }
+    catch {
+        return undefined;
+    }
+}
+async function electronWindowLabel() {
+    const channel = window[RETICLE_IPC_GLOBAL];
+    if ('function' !== typeof channel?.windowLabel)
+        return undefined;
+    try {
+        const label = await channel.windowLabel();
+        return 'string' === typeof label && label.length > 0 ? label : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
+function snapshotHealth(windowLabel) {
     return {
         hidden: 'hidden' === document.visibilityState,
         focused: document.hasFocus(),
         runtime: detectRuntime(),
         engine: detectEngine(),
         brand: detectBrand(),
+        ...(windowLabel === undefined ? {} : { windowLabel }),
     };
 }
 export function installHealth(emit) {
     const ac = new AbortController();
     const { signal } = ac;
+    let status;
+    let label = tauriWindowLabel();
     const report = (reason) => {
-        emit(EventType.PAGE_HEALTH, { ...snapshotHealth(), reason });
+        emit(EventType.PAGE_HEALTH, {
+            ...snapshotHealth(label),
+            ...(status === undefined ? {} : { documentStatus: status }),
+            reason,
+        });
     };
     document.addEventListener('visibilitychange', () => report(HealthReason.VISIBILITY), { signal });
     window.addEventListener('focus', () => report(HealthReason.FOCUS), { signal });
     window.addEventListener('blur', () => report(HealthReason.BLUR), { signal });
     report(HealthReason.INITIAL);
+    void Promise.all([
+        documentStatus(detectRuntime()),
+        label === undefined ? electronWindowLabel() : Promise.resolve(label),
+    ]).then(([known, named]) => {
+        if (signal.aborted || (known === undefined && named === label))
+            return;
+        status = known;
+        label = named;
+        report(HealthReason.HEARTBEAT);
+    });
     const stopHeartbeat = nativeSetInterval(() => report(HealthReason.HEARTBEAT), SESSION_HEALTH.HEARTBEAT_MS);
     return () => {
         stopHeartbeat();

package/dist/observers/network-stream.d.ts

@@ -1,2 +1,2 @@
 import type { Emit } from './types.js';
-export declare function watchStreamedBody(emit: Emit, res: Response, id: string, url: string, contentType: string | null, contentLength: string | null): void;
+export declare function watchStreamedBody(emit: Emit, res: Response, id: string, urlFields: Readonly<Record<string, unknown>>, contentType: string | null, contentLength: string | null): void;

package/dist/observers/network-stream.js

@@ -2,7 +2,7 @@ import { EventType, StreamDirection, StreamTransport } from '@reticlehq/core';
 import { isStreamingBody } from './net-detail/network-body.js';
 import { nativeClearTimeout, nativeSetTimeout } from '../timers/native/native-timers.js';
 const STREAM_WATCH_MS = 10_000;
-export function watchStreamedBody(emit, res, id, url, contentType, contentLength) {
+export function watchStreamedBody(emit, res, id, urlFields, contentType, contentLength) {
     if (!isStreamingBody(contentType, contentLength))
         return;
     if (typeof res.body?.getReader !== 'function')
@@ -20,7 +20,7 @@ export function watchStreamedBody(emit, res, id, url, contentType, contentLength
     emit(EventType.NET_STREAM, {
         transport: StreamTransport.FETCH,
         direction: StreamDirection.OPEN,
-        url,
+        ...urlFields,
         id,
     });
     void (async () => {
@@ -51,7 +51,7 @@ export function watchStreamedBody(emit, res, id, url, contentType, contentLength
         emit(EventType.NET_STREAM, {
             transport: StreamTransport.FETCH,
             direction: StreamDirection.CLOSE,
-            url,
+            ...urlFields,
             id,
             ...(gaveUp ? { gaveUp: true } : {}),
         });

package/dist/observers/network.js

@@ -63,15 +63,64 @@ function jsonShape(text) {
         return ShapeToken.OTHER;
     }
 }
+const MAX_DECODED_BODY_BYTES = 1 << 20;
+const TAB = 0x09;
+const LINE_FEED = 0x0a;
+const CARRIAGE_RETURN = 0x0d;
+const FIRST_PRINTABLE = 0x20;
+const DELETE = 0x7f;
+function hasControlCharacter(text) {
+    for (let i = 0; i < text.length; i += 1) {
+        const code = text.charCodeAt(i);
+        if (code === DELETE)
+            return true;
+        if (code < FIRST_PRINTABLE && code !== TAB && code !== LINE_FEED && code !== CARRIAGE_RETURN) {
+            return true;
+        }
+    }
+    return false;
+}
+function textOfBytes(body) {
+    if (!(body instanceof ArrayBuffer || ArrayBuffer.isView(body)))
+        return undefined;
+    if (body.byteLength > MAX_DECODED_BODY_BYTES)
+        return undefined;
+    try {
+        const text = new TextDecoder('utf-8', { fatal: true }).decode(body);
+        return hasControlCharacter(text) ? undefined : text;
+    }
+    catch {
+        return undefined;
+    }
+}
+function formShape(form) {
+    const fields = [];
+    let length = 0;
+    form.forEach((value, name) => {
+        if ('string' === typeof value)
+            length += value.length;
+        fields.push(JSON.stringify([name, 'string' === typeof value ? 0 : [value.type, value.size]]));
+    });
+    return 0 === fields.length ? undefined : fingerprintBody(fields.sort().join(), length);
+}
 function projectRequestBody(body, captureBodies) {
     let text;
     let contentType = 'application/json';
     let shape = REQUEST_SHAPE_NONE;
-    if ('string' === typeof body) {
-        text = body;
+    const bytesText = textOfBytes(body);
+    const typeOf = () => body.constructor?.name ?? typeof body;
+    if ('string' === typeof body || bytesText !== undefined) {
+        text = bytesText ?? body;
         if (text.length > 0)
             shape = fingerprintBody(jsonShape(text), text.length);
     }
+    else if (typeof FormData !== 'undefined' && body instanceof FormData) {
+        const form = formShape(body);
+        return {
+            ...(form === undefined ? {} : { [REQUEST_SHAPE_FIELD]: form }),
+            ...(captureBodies ? { requestBodyType: typeOf() } : {}),
+        };
+    }
     else if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) {
         text = body.toString();
         contentType = 'application/x-www-form-urlencoded';
@@ -81,8 +130,7 @@ function projectRequestBody(body, captureBodies) {
         }
     }
     else if (body !== undefined && body !== null) {
-        const kind = body.constructor?.name ?? typeof body;
-        return captureBodies ? { requestBodyType: kind } : {};
+        return captureBodies ? { requestBodyType: typeOf() } : {};
     }
     const fields = { [REQUEST_SHAPE_FIELD]: shape };
     if (!captureBodies || text === undefined || 0 === text.length)
@@ -202,6 +250,7 @@ export function installNetwork(emit, opts = {}) {
         const method = methodOf(input, init);
         const nextAction = nextActionOf(input, init);
         const nextActionFields = nextAction === undefined ? {} : { [NEXT_ACTION_FIELD]: nextAction };
+        const bodyFields = observeValue(() => projectRequestBody(init?.body, captureBodies)) ?? {};
         const urlFields = netUrlFields(rawUrl);
         const url = urlFields.url;
         const initiatorStack = observeValue(() => initiatorFrame());
@@ -220,7 +269,7 @@ export function installNetwork(emit, opts = {}) {
             const headersAt = performance.now();
             const contentType = observeValue(() => res.headers.get('content-type')) ?? null;
             observeSafely(() => {
-                watchStreamedBody(emit, res, id, url, contentType, res.headers.get('content-length'));
+                watchStreamedBody(emit, res, id, urlFields, contentType, res.headers.get('content-length'));
             });
             reportedNetUrls.add(rawUrl);
             const emitRequest = (responseBodyFields) => {
@@ -236,7 +285,7 @@ export function installNetwork(emit, opts = {}) {
                         ...initiatorFields,
                         ...resourceTiming(rawUrl),
                         ...netResponseMeta(res.statusText, contentType, res.headers.get('content-length')),
-                        ...projectRequestBody(init?.body, captureBodies),
+                        ...bodyFields,
                         ...nextActionFields,
                         ...responseBodyFields,
                         ...(reinterpret?.(url, (name) => res.headers.get(name)) ?? {}),
@@ -326,7 +375,7 @@ export function installNetwork(emit, opts = {}) {
             const m = meta.get(this);
             if (m !== undefined) {
                 m.start = performance.now();
-                m.reqBody = body ?? null;
+                m.reqFields = observeValue(() => projectRequestBody(body ?? null, captureBodies)) ?? {};
                 m.initiatorStack = initiatorFrame();
                 const initiatorFields = m.initiatorStack === undefined ? {} : { initiatorStack: m.initiatorStack };
                 emit(EventType.NET_PENDING, {
@@ -375,7 +424,7 @@ export function installNetwork(emit, opts = {}) {
                                 ...(cur.initiatorStack === undefined ? {} : { initiatorStack: cur.initiatorStack }),
                                 ...resourceTiming(cur.rawUrl),
                                 ...netResponseMeta(this.statusText, xhrContentType, this.getResponseHeader('content-length')),
-                                ...projectRequestBody(cur.reqBody, captureBodies),
+                                ...cur.reqFields,
                                 ...responseBodyFields,
                             });
                         });

package/dist/observers/perf.js

@@ -1,4 +1,50 @@
 import { EventType, PerfMetric } from '@reticlehq/core';
+import { refs } from '../dom/addressing/refs.js';
+import { getTestIdAttr, readTestId } from '../dom/addressing/testid-attr.js';
+import { isReticleOverlay } from '../dom/dom-ignore.js';
+import { isElement } from '../dom/realm.js';
+const areaOf = (r) => r === undefined ? 0 : Math.max(0, r.width) * Math.max(0, r.height);
+function cssIdent(value) {
+    const css = globalThis.CSS;
+    if ('function' === typeof css?.escape)
+        return css.escape(value);
+    let out = '';
+    for (const [i, ch] of [...value].entries()) {
+        const startsWithDigit = /\d/.test(ch) && (0 === i || (1 === i && value.startsWith('-')));
+        if (startsWithDigit)
+            out += `\\${ch.charCodeAt(0).toString(16)} `;
+        else if (/[\w-]/.test(ch))
+            out += ch;
+        else
+            out += `\\${ch}`;
+    }
+    return out;
+}
+function shortSelector(el) {
+    const testid = readTestId(el);
+    if (null !== testid)
+        return `[${getTestIdAttr()}="${testid.replace(/["\\]/g, '\\$&')}"]`;
+    const tag = el.tagName.toLowerCase();
+    if (0 < el.id.length)
+        return `${tag}#${cssIdent(el.id)}`;
+    const cls = el.classList.item(0);
+    return null === cls ? tag : `${tag}.${cssIdent(cls)}`;
+}
+function largestShifted(sources) {
+    let best;
+    for (const source of sources ?? []) {
+        const node = source.node ?? null;
+        const el = null === node ? null : isElement(node) ? node : node.parentElement;
+        if (null === el || isReticleOverlay(el))
+            continue;
+        const area = Math.max(areaOf(source.previousRect), areaOf(source.currentRect));
+        if (best === undefined || area > best.area)
+            best = { el, area };
+    }
+    return best === undefined
+        ? undefined
+        : { ref: refs.refFor(best.el), selector: shortSelector(best.el) };
+}
 export function installPerf(emit) {
     if (typeof PerformanceObserver !== 'function')
         return () => undefined;
@@ -29,7 +75,13 @@ export function installPerf(emit) {
         if (true === ls.hadRecentInput)
             return;
         cls += ls.value ?? 0;
-        emit(EventType.PERF, { metric: PerfMetric.CLS, value: cls, at: Math.round(e.startTime) });
+        const shifted = largestShifted(ls.sources);
+        emit(EventType.PERF, {
+            metric: PerfMetric.CLS,
+            value: cls,
+            at: Math.round(e.startTime),
+            ...(shifted === undefined ? {} : { shifted }),
+        });
     });
     observe('longtask', (e) => {
         emit(EventType.PERF, {

package/dist/observers/route.js

@@ -1,4 +1,4 @@
-import { EventType } from '@reticlehq/core';
+import { EventType, ROUTE_CHANGE_HOW_FIELD, RouteChangeHow } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 import { captureMethod } from '../patching/capture-method.js';
 function snapshotLocation() {
@@ -16,7 +16,7 @@ export function installRoute(emit) {
     const callPush = origPush.bind(history);
     const callReplace = origReplace.bind(history);
     let lastHref = location.href;
-    const fire = (from) => {
+    const fire = (from, how) => {
         observeSafely(() => {
             const to = snapshotLocation();
             if (to.href === from)
@@ -28,23 +28,24 @@ export function installRoute(emit) {
                 pathname: to.pathname,
                 search: to.search,
                 hash: to.hash,
+                [ROUTE_CHANGE_HOW_FIELD]: how,
             });
         });
     };
     const patchedPush = (data, unused, url) => {
         const from = location.href;
         callPush(data, unused, url ?? null);
-        fire(from);
+        fire(from, RouteChangeHow.PUSH);
     };
     const patchedReplace = (data, unused, url) => {
         const from = location.href;
         callReplace(data, unused, url ?? null);
-        fire(from);
+        fire(from, RouteChangeHow.REPLACE);
     };
     history.pushState = patchedPush;
     history.replaceState = patchedReplace;
     const onNav = () => {
-        fire(lastHref);
+        fire(lastHref, RouteChangeHow.POP);
     };
     window.addEventListener('popstate', onNav, { signal: ac.signal });
     window.addEventListener('hashchange', onNav, { signal: ac.signal });

package/dist/observers/storage.js

@@ -1,5 +1,6 @@
 import { EventType, REDACTED_VALUE, StorageArea } from '@reticlehq/core';
 import { isSensitiveKey, scrubKnownSecrets } from '../security/serialization.js';
+import { isReticleStorageKey } from '../storage-keys.js';
 import { observeSafely, observeValue } from './types.js';
 function safeArea(get) {
     try {
@@ -95,6 +96,8 @@ export function installStorage(emit) {
         origSet.call(this, key, value);
         if (old === value)
             return;
+        if (isReticleStorageKey(key))
+            return;
         observeSafely(() => {
             emit(EventType.STORAGE_CHANGE, {
                 area: areaOf(this),
@@ -108,6 +111,8 @@ export function installStorage(emit) {
     const patchedRemoveItem = function (key) {
         const old = observeValue(() => readOld(this, key)) ?? null;
         origRemove.call(this, key);
+        if (isReticleStorageKey(key))
+            return;
         observeSafely(() => {
             emit(EventType.STORAGE_CHANGE, {
                 area: areaOf(this),
@@ -123,7 +128,7 @@ export function installStorage(emit) {
         try {
             for (let i = 0; i < this.length; i += 1) {
                 const key = this.key(i);
-                if (key !== null)
+                if (key !== null && !isReticleStorageKey(key))
                     removed.push({ key, old: readOld(this, key) });
             }
         }

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

@@ -2,7 +2,10 @@ 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 CAROUSEL_PREV_ATTR = "data-reticle-carousel-prev";
+export declare const CAROUSEL_NEXT_ATTR = "data-reticle-carousel-next";
+export declare const CAROUSEL_POSITION_ATTR = "data-reticle-carousel-position";
+export declare const CAROUSEL_DISMISSED_KEY: "reticle.carousel.dismissed";
 export declare const ROTATE_MS = 6000;
 export interface Slide {
     id: string;
@@ -10,4 +13,4 @@ export interface Slide {
 }
 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";
+export declare const CAROUSEL_CSS: string;