@reticlehq/browser 3.1.0 → 3.3.0

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/network.js

@@ -1,4 +1,4 @@
-import { BlindSpotKind, EventType, RETICLE_WS_PATH, StreamTransport, StreamDirection, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
 import { captureMethod } from '../patching/capture-method.js';
 import { observeSafely, observeValue } from './types.js';
 import { isCapturableType, projectBody, projectErrorBody, shouldCaptureErrorBody, withBodyDeadline, } from './net-detail/network-body.js';
@@ -31,26 +31,66 @@ function frameFields(data, captureBodies) {
     }
     return out;
 }
+const ShapeToken = { NULL: '0', STRING: 's', NUMBER: 'n', BOOLEAN: 'b', OTHER: '?' };
+function shapeOf(value) {
+    if (null === value)
+        return ShapeToken.NULL;
+    if (Array.isArray(value))
+        return `[${value.map(shapeOf).join(',')}]`;
+    if ('object' === typeof value) {
+        const fields = value;
+        return `{${Object.keys(fields)
+            .sort()
+            .map((key) => `${key}:${shapeOf(fields[key])}`)
+            .join(',')}}`;
+    }
+    if ('string' === typeof value)
+        return ShapeToken.STRING;
+    if ('number' === typeof value)
+        return ShapeToken.NUMBER;
+    if ('boolean' === typeof value)
+        return ShapeToken.BOOLEAN;
+    return ShapeToken.OTHER;
+}
+function fingerprintBody(shape, length) {
+    return fnv1a(`${shape}#${String(length)}`);
+}
+function jsonShape(text) {
+    try {
+        return shapeOf(JSON.parse(text));
+    }
+    catch {
+        return ShapeToken.OTHER;
+    }
+}
 function projectRequestBody(body, captureBodies) {
-    if (!captureBodies)
-        return {};
     let text;
     let contentType = 'application/json';
+    let shape = REQUEST_SHAPE_NONE;
     if ('string' === typeof body) {
         text = body;
+        if (text.length > 0)
+            shape = fingerprintBody(jsonShape(text), text.length);
     }
     else if (typeof URLSearchParams !== 'undefined' && body instanceof URLSearchParams) {
         text = body.toString();
         contentType = 'application/x-www-form-urlencoded';
+        if (text.length > 0) {
+            const fields = Object.fromEntries(new URLSearchParams(text));
+            shape = fingerprintBody(shapeOf(fields), text.length);
+        }
     }
     else if (body !== undefined && body !== null) {
-        const shape = body.constructor?.name ?? typeof body;
-        return { requestBodyType: shape };
+        const kind = body.constructor?.name ?? typeof body;
+        return captureBodies ? { requestBodyType: kind } : {};
     }
-    if (text === undefined || 0 === text.length)
-        return {};
+    const fields = { [REQUEST_SHAPE_FIELD]: shape };
+    if (!captureBodies || text === undefined || 0 === text.length)
+        return fields;
     const { body: out, truncated } = projectBody(text, contentType);
-    return truncated ? { requestBody: out, requestBodyTruncated: true } : { requestBody: out };
+    return truncated
+        ? { ...fields, requestBody: out, requestBodyTruncated: true }
+        : { ...fields, requestBody: out };
 }
 function statusIsOk(status) {
     return status >= 200 && status < 400;
@@ -428,6 +468,7 @@ export function installNetwork(emit, opts = {}) {
                     durationMs: 0,
                     initiator: 'beacon',
                     ...(initiatorStack === undefined ? {} : { initiatorStack }),
+                    ...projectRequestBody(data, false),
                 });
             });
             return sent;

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";

package/dist/presenter/carousel/carousel.js

@@ -0,0 +1,126 @@
+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';
+const CLOSE_LABEL = 'Close';
+export const ROTATE_MS = 6000;
+const rotations = new WeakMap();
+function stopRotation(log) {
+    const timer = rotations.get(log);
+    if (timer !== undefined)
+        clearInterval(timer);
+    rotations.delete(log);
+}
+function prefersReducedMotion() {
+    try {
+        return true === globalThis.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+    }
+    catch {
+        return false;
+    }
+}
+function show(root, index) {
+    root.setAttribute('data-active', String(index));
+    root.querySelectorAll(`[${CAROUSEL_SLIDE_ATTR}]`).forEach((slide, i) => {
+        slide.hidden = i !== index;
+    });
+    root.querySelectorAll(`[${CAROUSEL_DOT_ATTR}]`).forEach((dot, i) => {
+        dot.setAttribute('aria-current', String(i === index));
+    });
+}
+const clampIndex = (index, count) => Number.isInteger(index) && index >= 0 && index < count ? index : 0;
+export function carouselHtml(slides, active) {
+    if (0 === slides.length)
+        return '';
+    const current = clampIndex(active, slides.length);
+    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
+        ? ''
+        : `<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>`;
+    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}
+    </div>`;
+}
+function dismissed(storage) {
+    try {
+        return '1' === storage?.getItem(CAROUSEL_DISMISSED_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function paintCarousel(log, slides, storage) {
+    const existing = log.querySelector(`:scope > [${CAROUSEL_ATTR}]`);
+    const active = Number(existing?.getAttribute('data-active') ?? '0');
+    existing?.remove();
+    stopRotation(log);
+    if (dismissed(storage))
+        return;
+    const html = carouselHtml(slides, active);
+    if ('' === html)
+        return;
+    log.insertAdjacentHTML('afterbegin', html);
+    const root = log.firstElementChild;
+    if (!(root instanceof HTMLElement))
+        return;
+    root.querySelector(`[${CAROUSEL_CLOSE_ATTR}]`)?.addEventListener('click', (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        try {
+            storage?.setItem(CAROUSEL_DISMISSED_KEY, '1');
+        }
+        catch {
+        }
+        stopRotation(log);
+        root.remove();
+    });
+    for (const dot of root.querySelectorAll(`[${CAROUSEL_DOT_ATTR}]`)) {
+        dot.addEventListener('click', (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            show(root, Number(dot.getAttribute(CAROUSEL_DOT_ATTR)));
+        });
+    }
+    startRotation(log, root, slides.length);
+}
+function startRotation(log, root, count) {
+    if (count < 2 || prefersReducedMotion())
+        return;
+    let paused = false;
+    const pause = () => {
+        paused = true;
+    };
+    const resume = () => {
+        paused = false;
+    };
+    root.addEventListener('mouseenter', pause);
+    root.addEventListener('mouseleave', resume);
+    root.addEventListener('focusin', pause);
+    root.addEventListener('focusout', resume);
+    rotations.set(log, setInterval(() => {
+        if (!root.isConnected) {
+            stopRotation(log);
+            return;
+        }
+        if (paused)
+            return;
+        show(root, (Number(root.getAttribute('data-active')) + 1) % count);
+    }, ROTATE_MS));
+}
+export const CAROUSEL_CSS = `
+.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));}
+.reticle-carousel-track{height:100px;overflow:hidden;}
+.reticle-carousel-slide .reticle-offer,.reticle-carousel-slide .reticle-talk{margin:0;padding:0;border:0;background:none;}
+.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;}
+.reticle-carousel-close:hover{opacity:1;}
+.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;}
+`;

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

@@ -0,0 +1,21 @@
+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_TEXT: {
+    readonly HEADLINE: "Get Harness free for 3 months";
+    readonly BODY: "Explores your app and saves every journey as a free replay.";
+    readonly CLAIM: "Claim now";
+    readonly DISMISS: "Not now";
+    readonly claimed: (days: number) => string;
+    readonly ending: (days: number) => string;
+};
+export declare function offerDismissed(storage: Pick<Storage, 'getItem'> | undefined): boolean;
+export interface OfferState {
+    claimed: boolean;
+    daysRemaining?: number | undefined;
+    claimUrl?: string | undefined;
+    eligible?: boolean | undefined;
+    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";

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

@@ -0,0 +1,55 @@
+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_TEXT = {
+    HEADLINE: 'Get Harness free for 3 months',
+    BODY: 'Explores your app and saves every journey as a free replay.',
+    CLAIM: 'Claim now',
+    DISMISS: 'Not now',
+    claimed: (days) => `Harness active — ${String(days)} days left`,
+    ending: (days) => 1 >= days
+        ? 'Harness free period ends today'
+        : `Harness free period ends in ${String(days)} days`,
+};
+const ENDING_SOON_DAYS = 14;
+export function offerDismissed(storage) {
+    try {
+        return '1' === storage?.getItem(OFFER_DISMISSED_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function offerHtml(offer, dismissed) {
+    if (offer === undefined)
+        return '';
+    if (offer.claimed) {
+        const days = offer.daysRemaining;
+        if (days === undefined || 0 > days)
+            return '';
+        const text = ENDING_SOON_DAYS >= days ? OFFER_TEXT.ending(days) : OFFER_TEXT.claimed(days);
+        return `<div ${OFFER_ATTR} class="reticle-offer reticle-offer-claimed">${escape(text)}</div>`;
+    }
+    if (false === offer.eligible)
+        return '';
+    if (false === offer.drivable)
+        return '';
+    if (dismissed)
+        return '';
+    const url = offer.claimUrl;
+    if (url === undefined || 0 === url.length)
+        return '';
+    return `<div ${OFFER_ATTR} class="reticle-offer" role="note">
+      <span class="reticle-offer-title">${escape(OFFER_TEXT.HEADLINE)}</span>
+      <p class="reticle-offer-body">${escape(OFFER_TEXT.BODY)}</p>
+      <a ${OFFER_CLAIM_ATTR} class="reticle-offer-claim" href="${escape(url)}" target="_blank" rel="noopener noreferrer">${escape(OFFER_TEXT.CLAIM)}</a>
+    </div>`;
+}
+export const OFFER_CSS = `
+.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));}
+.reticle-offer-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}
+.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.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;}
+.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}
+`;

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

@@ -0,0 +1,7 @@
+import { type OfferState } from './offer-card.js';
+import type { Slide } from './carousel.js';
+export declare const SLIDE_ID: {
+    readonly HARNESS: "harness";
+    readonly FOUNDERS: "founders";
+};
+export declare function panelSlides(offer: OfferState | undefined, offerDeclined: boolean): Slide[];

package/dist/presenter/carousel/panel-slides.js

@@ -0,0 +1,10 @@
+import { offerHtml } from './offer-card.js';
+import { talkCardHtml } from './talk-card.js';
+export const SLIDE_ID = { HARNESS: 'harness', FOUNDERS: 'founders' };
+export function panelSlides(offer, offerDeclined) {
+    const harness = offerHtml(offer, offerDeclined);
+    return [
+        ...('' === harness ? [] : [{ id: SLIDE_ID.HARNESS, html: harness }]),
+        { id: SLIDE_ID.FOUNDERS, html: talkCardHtml() },
+    ];
+}

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

@@ -0,0 +1,8 @@
+export declare const TALK_BOOK_ATTR = "data-reticle-talk-book";
+export declare const TALK_TEXT: {
+    readonly HEADLINE: "Talk to Founders";
+    readonly BODY: "Tell us where Reticle got in your way.";
+    readonly BOOK: "Book a call";
+};
+export declare function talkCardHtml(): string;
+export declare const TALK_CSS = "\n.reticle-talk-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}\n.reticle-talk-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-talk-book{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";

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

@@ -0,0 +1,20 @@
+import { DISCOVERY_CALL_URL } from '@reticlehq/core';
+export const TALK_BOOK_ATTR = 'data-reticle-talk-book';
+export const TALK_TEXT = {
+    HEADLINE: 'Talk to Founders',
+    BODY: 'Tell us where Reticle got in your way.',
+    BOOK: 'Book a call',
+};
+const escape = (text) => text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+export function talkCardHtml() {
+    return `<div class="reticle-talk">
+      <span class="reticle-talk-title">${escape(TALK_TEXT.HEADLINE)}</span>
+      <p class="reticle-talk-body">${escape(TALK_TEXT.BODY)}</p>
+      <a ${TALK_BOOK_ATTR} class="reticle-talk-book" href="${escape(DISCOVERY_CALL_URL)}" target="_blank" rel="noopener noreferrer">${escape(TALK_TEXT.BOOK)}</a>
+    </div>`;
+}
+export const TALK_CSS = `
+.reticle-talk-title{display:block;font-weight:600;font-size:12px;padding-right:18px;}
+.reticle-talk-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}
+.reticle-talk-book{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;}
+`;

package/dist/presenter/chrome/presenter-log.d.ts

@@ -6,11 +6,12 @@ export declare const CHIP_LABEL: Record<PresenterMode, string>;
 export declare const DATA_RETICLE_LOG = "data-reticle-log";
 export declare const LOG_TIME_ATTR = "data-reticle-log-time";
 export declare const LOG_CSS: string;
-export declare function scrollLogToLatest(container: HTMLElement): void;
 export declare function settleLogAtLatest(container: HTMLElement): void;
 export interface LogHandle {
     result(r: LogResult): void;
 }
+export declare function trimLogRows(container: HTMLElement, max: number): void;
+export declare function clearLogRows(container: HTMLElement): void;
 export declare function clampLogMax(n: number | undefined): number;
 export declare function humanDuration(ms: number): string;
 export declare function formatElapsed(ms: number): string;