@reticlehq/browser 3.4.0 → 3.6.0

package/dist/dom/occlusion.js

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

package/dist/dom/query.d.ts

@@ -1,4 +1,5 @@
 import { ElementState, type ElementQuery, type MatchResult, type QueryResult } from '@reticlehq/core';
 export declare const ATTR_VALUE_MAX = 512;
 export declare function matchQuery(query: ElementQuery, state?: ElementState, limit?: number): MatchResult;
+export declare function elementsMatching(query: ElementQuery): HTMLElement[];
 export declare function runQuery(query: ElementQuery, limit?: number): QueryResult;

package/dist/dom/query.js

@@ -1,5 +1,5 @@
-import { DATA_RETICLE_SOURCE_ATTR, ElementState, QueryBy, REDACTED_VALUE, TRANSPORT_LIMITS, } from '@reticlehq/core';
-import { isElement, isFrame, isHtmlElement, isInput, isSelect, isTextArea } from './realm.js';
+import { ALTERNATIVE_TESTID_ATTRS, DEFAULT_TESTID_ATTR, DATA_RETICLE_SOURCE_ATTR, ElementState, QueryBy, REDACTED_VALUE, TRANSPORT_LIMITS, } from '@reticlehq/core';
+import { isActionTarget, isElement, isFrame, isInput, isSelect, isTextArea } from './realm.js';
 import { capturedRootOf } from './shadow-registry.js';
 import { getAccessibleName, getRole, describe, getStates, isInViewport, isVisible, } from './a11y.js';
 import { isIgnored, isReticleOverlay } from './dom-ignore.js';
@@ -7,11 +7,11 @@ import { isSensitiveKey } from '../security/serialization.js';
 import { declaredTestids } from '../registry/capabilities.js';
 import { identifyComponent } from '../registry/stores/adapters.js';
 import { refs } from './addressing/refs.js';
-const TESTID_ATTR = 'data-testid';
+import { getTestIdAttr, readTestId, testIdSelector } from './addressing/testid-attr.js';
 const SOURCE_ATTR = DATA_RETICLE_SOURCE_ATTR;
 const MAX_PRESENT_TESTIDS = 12;
 const MAX_COMPONENT_CANDIDATES = 2000;
-const COMPONENT_CANDIDATE_SELECTOR = `[${SOURCE_ATTR}], [${TESTID_ATTR}], button, a, input, select, textarea, [role]`;
+const componentCandidateSelector = () => `[${SOURCE_ATTR}], ${testIdSelector()}, button, a, input, select, textarea, [role]`;
 function elementsUnder(container) {
     const self = Node.ELEMENT_NODE === container.nodeType ? [container] : [];
     return [...self, ...Array.from(container.querySelectorAll('*'))];
@@ -71,11 +71,11 @@ function resolveContainer(scope) {
     if (scope === undefined)
         return { container: document.body, scopeMissing: false };
     const byRef = refs.resolve(scope);
-    if (isHtmlElement(byRef))
+    if (isActionTarget(byRef))
         return { container: byRef, scopeMissing: false };
     try {
         const found = document.querySelector(scope);
-        if (isHtmlElement(found))
+        if (isActionTarget(found))
             return { container: found, scopeMissing: false };
     }
     catch {
@@ -94,7 +94,7 @@ function findBySource(container, source) {
 function findByComponentName(container, component) {
     const out = [];
     let scanned = 0;
-    for (const el of Array.from(container.querySelectorAll(COMPONENT_CANDIDATE_SELECTOR))) {
+    for (const el of Array.from(container.querySelectorAll(componentCandidateSelector()))) {
         if (scanned >= MAX_COMPONENT_CANDIDATES)
             break;
         scanned += 1;
@@ -115,8 +115,16 @@ function findByComponent(container, query) {
     }
     return [];
 }
+function matchesRole(actual, queried) {
+    if (actual === queried)
+        return true;
+    if ('textbox' === queried && 'searchbox' === actual)
+        return true;
+    return false;
+}
 function queryByRoleAndName(container, role, name) {
-    return elementsUnder(container).filter((el) => getRole(el) === role && (name === undefined || exactVisibleText(getAccessibleName(el), name)));
+    return elementsUnder(container).filter((el) => matchesRole(getRole(el), role) &&
+        (name === undefined || exactVisibleText(getAccessibleName(el), name)));
 }
 function queryByText(container, value) {
     return elementsUnder(container).filter((el) => fuzzyVisibleText(directText(el), value));
@@ -131,7 +139,7 @@ function queryByPlaceholder(container, value) {
     });
 }
 function queryByTestId(container, value) {
-    return elementsUnder(container).filter((el) => el.getAttribute(TESTID_ATTR) === value);
+    return elementsUnder(container).filter((el) => readTestId(el) === value);
 }
 function queryByAlt(container, value) {
     return elementsUnder(container).filter((el) => {
@@ -269,7 +277,7 @@ export function matchQuery(query, state, limit = MAX_DESCRIBED) {
     const filtered = state === undefined ? elements : elements.filter((el) => inState(el, state, visMemo));
     const attrs = query.attrs;
     const described = filtered.slice(0, Math.max(0, Math.min(limit, MAX_DESCRIBED)));
-    const stampViewport = described.length > 1;
+    const stampViewport = described.length > 1 || ElementState.IN_VIEWPORT === state;
     const descriptors = described.map((el) => {
         let base = describe(el, visMemo);
         if (stampViewport &&
@@ -329,7 +337,7 @@ function buildPresentRegions(query) {
                 continue;
             const name = el.getAttribute('aria-label') ??
                 resolveLabelledBy(el) ??
-                el.getAttribute('data-testid') ??
+                readTestId(el) ??
                 undefined;
             const children = el.querySelectorAll('[role]');
             const sample = [];
@@ -338,7 +346,7 @@ function buildPresentRegions(query) {
                     break;
                 const childRole = child.getAttribute('role');
                 const childName = child.getAttribute('aria-label') ??
-                    child.getAttribute('data-testid') ??
+                    readTestId(child) ??
                     child.textContent?.trim().slice(0, 40) ??
                     '';
                 if (childRole !== null && childName.length > 0) {
@@ -381,7 +389,7 @@ function wantedTextOf(query) {
 }
 const MAX_NAME_NEAR_MISSES = 5;
 function nameNearMisses(container, query) {
-    const role = QueryBy.ROLE === query.by ? query.value : undefined;
+    const role = QueryBy.ROLE === query.by ? query.value : query.role;
     const wanted = query.name;
     if (role === undefined || wanted === undefined || 0 === wanted.length)
         return [];
@@ -405,15 +413,28 @@ function nameNearMisses(container, query) {
     }
     return out;
 }
+function testidFoundUnder(container, query) {
+    if (QueryBy.TESTID !== query.by || undefined === query.value)
+        return undefined;
+    const configured = getTestIdAttr();
+    for (const attr of [DEFAULT_TESTID_ATTR, ...ALTERNATIVE_TESTID_ATTRS]) {
+        if (attr === configured)
+            continue;
+        const found = elementsUnder(container).some((el) => el.getAttribute(attr) === query.value && !isIgnored(el));
+        if (found)
+            return attr;
+    }
+    return undefined;
+}
 function buildEmptyHint(query) {
     const container = resolveContainer(query.scope).container ?? document.body;
-    const all = container.querySelectorAll(`[${TESTID_ATTR}]`);
+    const all = container.querySelectorAll(testIdSelector());
     const present = [];
     const seen = new Set();
     for (const el of Array.from(all)) {
         if (isIgnored(el))
             continue;
-        const id = el.getAttribute(TESTID_ATTR);
+        const id = readTestId(el);
         if (null === id || 0 === id.length || seen.has(id))
             continue;
         seen.add(id);
@@ -439,8 +460,14 @@ function buildEmptyHint(query) {
     const near = nameNearMisses(container, query);
     if (near.length > 0)
         hint.nameNearMiss = near;
+    const elsewhere = testidFoundUnder(container, query);
+    if (elsewhere !== undefined)
+        hint.testidFoundUnder = elsewhere;
     return hint;
 }
+export function elementsMatching(query) {
+    return findCandidates(query).candidates;
+}
 export function runQuery(query, limit) {
     const result = matchQuery(query, undefined, limit);
     const scopeFields = true === result.scopeMissing ? { scopeMissing: true } : {};

package/dist/dom/snapshot.js

@@ -8,6 +8,7 @@ const INTERACTIVE = new Set([
     'button',
     'link',
     'textbox',
+    'searchbox',
     'checkbox',
     'radio',
     'combobox',

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,3 +1,4 @@
+import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
 import { EventType, TruncationChannel } from '@reticlehq/core';
 import { getAccessibleName, getRole, isVisible } from '../dom/a11y.js';
 import { refs } from '../dom/addressing/refs.js';
@@ -5,8 +6,8 @@ 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 { capturedRoots, installShadowRegistry, onShadowRoot } from '../dom/shadow-registry.js';

package/dist/observers/field.js

@@ -1,4 +1,5 @@
-import { EventType, isSensitiveKey } from '@reticlehq/core';
+import { readTestId } from '../dom/addressing/testid-attr.js';
+import { DEFAULT_TESTID_ATTR, EventType, isSensitiveKey } from '@reticlehq/core';
 import { getAccessibleName } from '../dom/a11y.js';
 const MAX_VALUE_LEN = 160;
 const BURST_MS = 150;
@@ -9,7 +10,7 @@ function isField(target) {
         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)
@@ -28,7 +29,8 @@ function isSecret(element) {
         return true;
     for (const key of [
         element.name,
-        element.getAttribute('data-testid'),
+        readTestId(element),
+        element.getAttribute(DEFAULT_TESTID_ATTR),
         element.getAttribute('id'),
     ]) {
         if (null !== key && key.length > 0 && isSensitiveKey(key))

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

@@ -220,7 +220,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) => {

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;

package/dist/presenter/carousel/carousel.js

@@ -1,8 +1,12 @@
+import { ReticleStorageKey } from '../../storage-keys.js';
 export const CAROUSEL_ATTR = 'data-reticle-carousel';
 export const CAROUSEL_SLIDE_ATTR = 'data-reticle-carousel-slide';
 export const CAROUSEL_DOT_ATTR = 'data-reticle-carousel-dot';
 export const CAROUSEL_CLOSE_ATTR = 'data-reticle-carousel-close';
-export const CAROUSEL_DISMISSED_KEY = 'reticle.carousel.dismissed';
+export const CAROUSEL_PREV_ATTR = 'data-reticle-carousel-prev';
+export const CAROUSEL_NEXT_ATTR = 'data-reticle-carousel-next';
+export const CAROUSEL_POSITION_ATTR = 'data-reticle-carousel-position';
+export const CAROUSEL_DISMISSED_KEY = ReticleStorageKey.CAROUSEL_DISMISSED;
 const CLOSE_LABEL = 'Close';
 export const ROTATE_MS = 6000;
 const rotations = new WeakMap();
@@ -22,7 +26,11 @@ function prefersReducedMotion() {
 }
 function show(root, index) {
     root.setAttribute('data-active', String(index));
-    root.querySelectorAll(`[${CAROUSEL_SLIDE_ATTR}]`).forEach((slide, i) => {
+    const slides = root.querySelectorAll(`[${CAROUSEL_SLIDE_ATTR}]`);
+    const position = root.querySelector(`[${CAROUSEL_POSITION_ATTR}]`);
+    if (position !== null)
+        position.textContent = `${String(index + 1)} / ${String(slides.length)}`;
+    slides.forEach((slide, i) => {
         slide.hidden = i !== index;
     });
     root.querySelectorAll(`[${CAROUSEL_DOT_ATTR}]`).forEach((dot, i) => {
@@ -37,15 +45,15 @@ export function carouselHtml(slides, active) {
     const track = slides
         .map((slide, i) => `<div ${CAROUSEL_SLIDE_ATTR}="${slide.id}" class="reticle-carousel-slide"${i === current ? '' : ' hidden'}>${slide.html}</div>`)
         .join('');
-    const dots = 1 === slides.length
+    const controls = 1 === slides.length
         ? ''
-        : `<div class="reticle-carousel-dots">${slides
-            .map((slide, i) => `<button type="button" ${CAROUSEL_DOT_ATTR}="${String(i)}" class="reticle-carousel-dot" aria-label="${slide.id}" aria-current="${String(i === current)}"></button>`)
-            .join('')}</div>`;
+        : `<div class="reticle-carousel-controls"><button type="button" ${CAROUSEL_PREV_ATTR} aria-label="Previous message" class="reticle-carousel-arrow">‹</button><div class="reticle-carousel-dots">${slides
+            .map((slide, i) => `<button type="button" ${CAROUSEL_DOT_ATTR}="${String(i)}" class="reticle-carousel-dot" aria-label="Show ${slide.id}" aria-current="${String(i === current)}"></button>`)
+            .join('')}</div><span ${CAROUSEL_POSITION_ATTR} aria-live="polite">${String(current + 1)} / ${String(slides.length)}</span><button type="button" ${CAROUSEL_NEXT_ATTR} aria-label="Next message" class="reticle-carousel-arrow">›</button></div>`;
     return `<div ${CAROUSEL_ATTR} class="reticle-carousel" role="region" aria-label="Reticle" data-active="${String(current)}">
       <button type="button" ${CAROUSEL_CLOSE_ATTR} class="reticle-carousel-close" aria-label="${CLOSE_LABEL}" title="${CLOSE_LABEL}">×</button>
       <div class="reticle-carousel-track">${track}</div>
-      ${dots}
+      ${controls}
     </div>`;
 }
 function dismissed(storage) {
@@ -88,6 +96,16 @@ export function paintCarousel(log, slides, storage) {
             show(root, Number(dot.getAttribute(CAROUSEL_DOT_ATTR)));
         });
     }
+    root.querySelector(`[${CAROUSEL_PREV_ATTR}]`)?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        show(root, (Number(root.getAttribute('data-active')) + slides.length - 1) % slides.length);
+    });
+    root.querySelector(`[${CAROUSEL_NEXT_ATTR}]`)?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        show(root, (Number(root.getAttribute('data-active')) + 1) % slides.length);
+    });
     startRotation(log, root, slides.length);
 }
 function startRotation(log, root, count) {
@@ -123,4 +141,13 @@ export const CAROUSEL_CSS = `
 .reticle-carousel-dots{display:flex;justify-content:center;gap:6px;margin-top:6px;}
 .reticle-carousel-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:currentColor;opacity:.3;cursor:pointer;}
 .reticle-carousel-dot[aria-current="true"]{opacity:.9;}
+.reticle-carousel-controls{display:flex;align-items:center;gap:8px;margin-top:6px;}
+.reticle-carousel-arrow{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--reticle-line);border-radius:6px;background:rgba(255,255,255,.04);color:var(--reticle-fg);font:inherit;font-size:18px;line-height:1;cursor:pointer;}
+.reticle-carousel-arrow:hover{border-color:var(--reticle-accent);background:var(--reticle-accent-soft);}
+.reticle-carousel-position{margin-left:auto;color:var(--reticle-muted);font-size:10px;font-variant-numeric:tabular-nums;white-space:nowrap;}
+.reticle-carousel-slide .reticle-offer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px;margin:0;padding:0;border:0;background:none;}
+.reticle-carousel-slide .reticle-offer-title{grid-column:1/-1;overflow:hidden;padding:0;font-size:11px;text-overflow:ellipsis;white-space:nowrap;}
+.reticle-carousel-slide .reticle-offer-body{grid-column:1;grid-row:2;margin:0;overflow:hidden;font-size:10px;line-height:1.2;text-overflow:ellipsis;white-space:nowrap;}
+.reticle-carousel-slide .reticle-offer-claim{grid-column:2;grid-row:2;padding:3px 7px;font-size:10px;white-space:nowrap;}
+.reticle-carousel-slide .reticle-offer-claimed{overflow:hidden;margin:0;text-overflow:ellipsis;white-space:nowrap;}
 `;

package/dist/presenter/carousel/offer-card.d.ts

@@ -1,6 +1,6 @@
 export declare const OFFER_ATTR = "data-reticle-offer";
 export declare const OFFER_CLAIM_ATTR = "data-reticle-offer-claim";
-export declare const OFFER_DISMISSED_KEY = "reticle.harnessOffer.dismissed";
+export declare const OFFER_DISMISSED_KEY: "reticle.harnessOffer.dismissed";
 export declare const OFFER_TEXT: {
     readonly HEADLINE: "Get Harness free for 3 months";
     readonly BODY: "Explores your app and saves every journey as a free replay.";
@@ -18,4 +18,4 @@ export interface OfferState {
     drivable?: boolean | undefined;
 }
 export declare function offerHtml(offer: OfferState | undefined, dismissed: boolean): string;
-export declare const OFFER_CSS = "\n.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}\n.reticle-offer-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}\n.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-offer-claim{display:inline-block;font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}\n";
+export declare const OFFER_CSS: string;

package/dist/presenter/carousel/offer-card.js

@@ -1,6 +1,7 @@
+import { ReticleStorageKey } from '../../storage-keys.js';
 export const OFFER_ATTR = 'data-reticle-offer';
 export const OFFER_CLAIM_ATTR = 'data-reticle-offer-claim';
-export const OFFER_DISMISSED_KEY = 'reticle.harnessOffer.dismissed';
+export const OFFER_DISMISSED_KEY = ReticleStorageKey.HARNESS_OFFER_DISMISSED;
 export const OFFER_TEXT = {
     HEADLINE: 'Get Harness free for 3 months',
     BODY: 'Explores your app and saves every journey as a free replay.',

package/dist/presenter/carousel/panel-slides.d.ts

@@ -1,7 +1,8 @@
 import { type OfferState } from './offer-card.js';
 import type { Slide } from './carousel.js';
 export declare const SLIDE_ID: {
-    readonly HARNESS: "harness";
-    readonly FOUNDERS: "founders";
+    readonly HARNESS: "harness-journeys";
+    readonly REPLAY: "replay-confidence";
+    readonly OFFER: "harness-offer";
 };
-export declare function panelSlides(offer: OfferState | undefined, offerDeclined: boolean): Slide[];
+export declare function panelSlides(offer: OfferState | undefined, offerDeclined: boolean, notices?: readonly unknown[], base?: string): Slide[];