@reticlehq/browser 3.2.0 → 3.4.0

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

@@ -1,4 +1,4 @@
-import { BlindSpotKind, EventType, REQUEST_SHAPE_FIELD, REQUEST_SHAPE_NONE, RETICLE_WS_PATH, StreamTransport, StreamDirection, fnv1a, } from '@reticlehq/core';
+import { BlindSpotKind, EventType, NEXT_ACTION_FIELD, NEXT_ACTION_HEADER, 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';
@@ -120,6 +120,15 @@ function methodOf(input, init) {
         return input.method.toUpperCase();
     return 'GET';
 }
+function nextActionOf(input, init) {
+    if (init !== undefined && init.headers !== undefined) {
+        return observeValue(() => new Headers(init.headers).get(NEXT_ACTION_HEADER)) ?? undefined;
+    }
+    if (input instanceof Request) {
+        return observeValue(() => input.headers.get(NEXT_ACTION_HEADER)) ?? undefined;
+    }
+    return undefined;
+}
 const NON_APP_FRAME = /@reticlehq|reticle\.ts|network\.ts|transport\.ts|<anonymous>|new Promise|node:internal/i;
 const DEPENDENCY_FRAME = /node_modules|\/\.vite\/deps\//i;
 export function firstAppFrame(stack) {
@@ -191,6 +200,8 @@ export function installNetwork(emit, opts = {}) {
         const id = nextId();
         const start = performance.now();
         const method = methodOf(input, init);
+        const nextAction = nextActionOf(input, init);
+        const nextActionFields = nextAction === undefined ? {} : { [NEXT_ACTION_FIELD]: nextAction };
         const urlFields = netUrlFields(rawUrl);
         const url = urlFields.url;
         const initiatorStack = observeValue(() => initiatorFrame());
@@ -226,6 +237,7 @@ export function installNetwork(emit, opts = {}) {
                         ...resourceTiming(rawUrl),
                         ...netResponseMeta(res.statusText, contentType, res.headers.get('content-length')),
                         ...projectRequestBody(init?.body, captureBodies),
+                        ...nextActionFields,
                         ...responseBodyFields,
                         ...(reinterpret?.(url, (name) => res.headers.get(name)) ?? {}),
                     });
@@ -282,6 +294,7 @@ export function installNetwork(emit, opts = {}) {
                     durationMs: Math.round(performance.now() - start),
                     initiator: 'fetch',
                     ...initiatorFields,
+                    ...nextActionFields,
                 });
             });
             throw error;

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,18 @@ 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);
+                    const same = isSensitiveKey(change.path)
+                        ? samePresentedValue(sanitizeForTransport(change.old), sanitizeForTransport(change.new))
+                        : samePresentedValue(old, value);
+                    if (same)
+                        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";