@reticlehq/browser 3.9.0 → 3.10.0

package/dist/dom/visibility.js

@@ -25,6 +25,10 @@ export function stalledFade(el) {
 }
 const OVERLAY_ARIA_HIDDEN = 'data-aria-hidden';
 const OPEN_LAYER = '[role="dialog"], [role="alertdialog"], [role="menu"], [role="listbox"], dialog[open], [aria-modal="true"]';
+const NON_RENDERED_TAGS = ['script', 'style', 'template', 'noscript'];
+export function isNonRendered(el) {
+    return NON_RENDERED_TAGS.includes(el.tagName.toLowerCase());
+}
 const UNPAINTED_TAGS = new Set(['script', 'style', 'template', 'noscript', 'link', 'meta']);
 function hiddenByAnOverlay(el) {
     if (el.hasAttribute(OVERLAY_ARIA_HIDDEN)) {
@@ -57,7 +61,7 @@ function holdsOpenLayer(portal) {
     }
     return false;
 }
-function selfCssHidden(el, style) {
+function selfCssHidden(el, style, includeVisibility = true) {
     if (isHtmlElement(el) && el.hidden) {
         return true;
     }
@@ -65,9 +69,7 @@ function selfCssHidden(el, style) {
         return true;
     }
     if (style !== null) {
-        if ('none' === style.display ||
-            'hidden' === style.visibility ||
-            'collapse' === style.visibility) {
+        if ('none' === style.display || (includeVisibility && visibilityHidden(style))) {
             return true;
         }
         if (0 === Number.parseFloat(style.opacity || '1') && !stalledFade(el)) {
@@ -79,6 +81,9 @@ function selfCssHidden(el, style) {
     }
     return false;
 }
+function visibilityHidden(style) {
+    return 'hidden' === style?.visibility || 'collapse' === style?.visibility;
+}
 function clippedAway(style) {
     const rect = /^rect\((.*)\)$/.exec(style.getPropertyValue('clip').trim());
     if (null !== rect && ('absolute' === style.position || 'fixed' === style.position)) {
@@ -106,7 +111,7 @@ function selfHidden(el, style) {
     if ('true' === el.getAttribute('aria-hidden') && !hiddenByAnOverlay(el)) {
         return true;
     }
-    return selfCssHidden(el, style);
+    return selfCssHidden(el, style, false);
 }
 export function isHiddenByAriaOnly(el) {
     let foundAriaHidden = false;
@@ -116,7 +121,7 @@ export function isHiddenByAriaOnly(el) {
             foundAriaHidden = true;
         }
         const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
-        if (selfCssHidden(current, style)) {
+        if (selfCssHidden(current, style, current === el)) {
             return false;
         }
         current = parentAcrossShadowBoundary(current);
@@ -130,7 +135,7 @@ export function isRenderedOutsideAriaHidden(el) {
             return false;
         }
         const style = current.ownerDocument.defaultView?.getComputedStyle(current) ?? null;
-        if (selfCssHidden(current, style)) {
+        if (selfCssHidden(current, style, current === el)) {
             return false;
         }
         current = parentAcrossShadowBoundary(current);
@@ -235,9 +240,32 @@ function visibilityInfoMemo(memo) {
     }
     return info;
 }
+function underKnownHidden(el, memo) {
+    for (let up = parentAcrossShadowBoundary(el); null !== up; up = parentAcrossShadowBoundary(up)) {
+        const known = memo.get(up);
+        if (known !== undefined) {
+            return known.hidden;
+        }
+    }
+    return false;
+}
 function ownVisibilityInfo(el, memo) {
     let info = memo.get(el);
     if (info === undefined) {
+        if (underKnownHidden(el, memo)) {
+            info = {
+                hidden: true,
+                style: null,
+                parent: null,
+                clipX: false,
+                clipY: false,
+                scrollX: false,
+                scrollY: false,
+                hasClipping: false,
+            };
+            memo.set(el, info);
+            return info;
+        }
         const style = el.ownerDocument.defaultView?.getComputedStyle(el) ?? null;
         if (selfHidden(el, style)) {
             info = {
@@ -386,6 +414,9 @@ function collapsed(el, memo) {
             (own.clipY && 0 === r.height) ||
             (own.clipX && own.clipY && r.width <= 1 && r.height <= 1)));
 }
+export function isHiddenSubtree(el, memo) {
+    return ownVisibilityInfo(el, visibilityInfoMemo(memo)).hidden;
+}
 export function isVisible(el, memo) {
     if (!el.isConnected) {
         return false;
@@ -395,7 +426,8 @@ export function isVisible(el, memo) {
         return cached;
     }
     const info = visibilityInfoMemo(memo);
-    const result = visibleBounds(el, info, undefined, true) !== null &&
+    const result = !visibilityHidden(ownVisibilityInfo(el, info).style) &&
+        visibleBounds(el, info, undefined, true) !== null &&
         !collapsed(el, info) &&
         !backfaceHidden(el, info);
     if (memo !== undefined) {

package/dist/observers/canvas.d.ts

@@ -13,6 +13,7 @@ export declare function digestPixels(data: Uint8ClampedArray): {
 interface CanvasOptions {
     sample?: (canvas: HTMLCanvasElement) => CanvasSample | undefined;
     every?: (run: () => void, ms: number) => () => void;
+    onScreen?: (canvas: HTMLCanvasElement) => boolean;
 }
 export declare function canvasAfterAct(): void;
 export declare function installCanvas(emit: Emit, opts?: CanvasOptions): Teardown;

package/dist/observers/canvas.js

@@ -1,6 +1,7 @@
 import { CanvasTrigger, EventType } from '@reticlehq/core';
 export { CanvasTrigger };
 import { refs } from '../dom/addressing/refs.js';
+import { isInViewport } from '../dom/visibility.js';
 import { nativeSetInterval } from '../timers/native/native-timers.js';
 import { observeSafely, observeValue } from './types.js';
 const SIDE = 16;
@@ -47,6 +48,7 @@ export function canvasAfterAct() {
 export function installCanvas(emit, opts = {}) {
     const sample = opts.sample ?? sampleCanvas;
     const every = opts.every ?? nativeSetInterval;
+    const onScreen = opts.onScreen ?? ((canvas) => isInViewport(canvas));
     const last = new WeakMap();
     const look = (trigger) => {
         observeSafely(() => {
@@ -61,7 +63,14 @@ export function installCanvas(emit, opts = {}) {
                     continue;
                 }
                 last.set(canvas, digest);
-                emit(EventType.CANVAS_DIGEST, { digest, width: read.width, height: read.height, mean, trigger }, refs.refFor(canvas));
+                emit(EventType.CANVAS_DIGEST, {
+                    digest,
+                    width: read.width,
+                    height: read.height,
+                    mean,
+                    trigger,
+                    visible: onScreen(canvas),
+                }, refs.refFor(canvas));
             }
         });
     };

package/dist/observers/console.js

@@ -1,4 +1,4 @@
-import { EventType, TRANSPORT_LIMITS } from '@reticlehq/core';
+import { DROPPED_PRE_ATTACH_FIELD, EventType, PRE_ATTACH_FIELD, RETICLE_PRE_ATTACH_ERRORS, TRANSPORT_LIMITS, } from '@reticlehq/core';
 import { observeSafely } from './types.js';
 import { safeStringify } from '../security/serialization.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
@@ -15,44 +15,48 @@ const METHOD_EVENT = {
 function stringifyArgs(args) {
     return args
         .map((a) => {
-        if ('string' === typeof a)
+        if ('string' === typeof a) {
             return a;
-        if (a instanceof Error)
+        }
+        if (a instanceof Error) {
             return a.message;
+        }
         return safeStringify(a);
     })
         .join(' ');
 }
 const MAX_STACK_LEN = TRANSPORT_LIMITS.MAX_STACK_LENGTH;
 function capStack(stack) {
-    if (stack === undefined || 0 === stack.length)
+    if (stack === undefined || 0 === stack.length) {
         return undefined;
+    }
     return stack.length > MAX_STACK_LEN ? stack.slice(0, MAX_STACK_LEN) : stack;
 }
-function firstErrorStack(args) {
-    for (const arg of args) {
-        if (arg instanceof Error)
-            return capStack(arg.stack);
-    }
-    return undefined;
+function stackOf(value) {
+    const stack = value instanceof Error ? capStack(value.stack) : undefined;
+    return stack === undefined ? {} : { stack };
 }
 export function installConsole(emit) {
     const methods = ['log', 'warn', 'error', 'info', 'debug'];
     const originals = new Map();
     const patched = new Map();
+    let marks = {};
+    const report = (method, args) => {
+        observeSafely(() => {
+            emit(METHOD_EVENT[method], {
+                ...marks,
+                message: stringifyArgs(args),
+                ...('error' === method ? stackOf(args.find((arg) => arg instanceof Error)) : {}),
+            });
+        });
+    };
     for (const method of methods) {
         const original = requireCapturedMethod(console, method);
         originals.set(method, original);
         const callOriginal = original.bind(console);
         const wrapper = (...args) => {
             callOriginal(...args);
-            observeSafely(() => {
-                const stack = 'error' === method ? firstErrorStack(args) : undefined;
-                emit(METHOD_EVENT[method], {
-                    message: stringifyArgs(args),
-                    ...(stack === undefined ? {} : { stack }),
-                });
-            });
+            report(method, args);
         };
         patched.set(method, wrapper);
         console[method] = wrapper;
@@ -60,9 +64,11 @@ export function installConsole(emit) {
     const repeats = createRepeatLimiter();
     const emitError = (payload) => {
         const decision = repeats.admit(payload);
-        if (!decision.emit)
+        if (!decision.emit) {
             return;
+        }
         emit(EventType.ERROR_UNCAUGHT, {
+            ...marks,
             ...payload,
             ...(undefined === decision.repeats ? {} : { repeats: decision.repeats }),
         });
@@ -70,8 +76,9 @@ export function installConsole(emit) {
     const onError = (event) => {
         if (!(event instanceof ErrorEvent)) {
             const target = event.target;
-            if (!(target instanceof Element) || target === document)
+            if (!(target instanceof Element) || target === document) {
                 return;
+            }
             const tag = target.tagName.toLowerCase();
             const url = target.getAttribute('src') ?? target.getAttribute('href') ?? '';
             observeSafely(() => {
@@ -81,37 +88,32 @@ export function installConsole(emit) {
             return;
         }
         observeSafely(() => {
-            const stack = capStack(event.error instanceof Error ? event.error.stack : undefined);
-            const payload = {
+            emitError({
                 message: event.message,
                 source: event.filename,
                 line: event.lineno,
-                ...(stack === undefined ? {} : { stack }),
-            };
-            emitError(payload);
+                ...stackOf(event.error),
+            });
         });
     };
     const onRejection = (event) => {
         observeSafely(() => {
             const reason = event.reason;
-            const stack = capStack(reason instanceof Error ? reason.stack : undefined);
-            const payload = {
+            emitError({
                 message: reason instanceof Error ? reason.message : String(reason),
                 kind: 'unhandledrejection',
-                ...(stack === undefined ? {} : { stack }),
-            };
-            emitError(payload);
+                ...stackOf(reason),
+            });
         });
     };
     const onViolation = (event) => {
-        const what = 0 === event.blockedURI.length ? 'inline content' : event.blockedURI;
+        const uri = event.blockedURI;
+        const what = 0 === uri.length ? 'inline content' : uri;
         const reportOnly = REPORT_ONLY === event.disposition;
         emit(reportOnly ? EventType.CONSOLE_WARN : EventType.CONSOLE_ERROR, {
-            message: reportOnly
-                ? `[Report Only] Content Security Policy directive: ${event.violatedDirective} would block ${what}`
-                : `Content Security Policy directive: ${event.violatedDirective} blocked ${what}`,
+            message: `${reportOnly ? '[Report Only] ' : ''}Content Security Policy directive: ${event.violatedDirective} ${reportOnly ? 'would block' : 'blocked'} ${what}`,
             kind: CSP_VIOLATION_EVENT,
-            ...(0 === event.blockedURI.length ? {} : { source: event.blockedURI }),
+            ...(0 === uri.length ? {} : { source: uri }),
         });
     };
     const listeners = new AbortController();
@@ -119,10 +121,19 @@ export function installConsole(emit) {
     window.addEventListener('error', onError, { capture: true, signal });
     window.addEventListener('unhandledrejection', onRejection, { signal });
     window.addEventListener(CSP_VIOLATION_EVENT, onViolation, { capture: true, signal });
+    observeSafely(() => {
+        const mark = { [PRE_ATTACH_FIELD]: true };
+        marks = mark;
+        globalThis[RETICLE_PRE_ATTACH_ERRORS]?.drain(onError, onRejection, report, (count) => {
+            mark[DROPPED_PRE_ATTACH_FIELD] = Number.isInteger(count) && count > 0 ? count : undefined;
+        });
+    });
+    marks = {};
     return () => {
         for (const [method, original] of originals) {
-            if (console[method] === patched.get(method))
+            if (console[method] === patched.get(method)) {
                 console[method] = original;
+            }
         }
         listeners.abort();
     };

package/dist/observers/dom.js

@@ -1,5 +1,5 @@
 import { readTestId, testIdSelector } from '../dom/addressing/testid-attr.js';
-import { EventType, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
+import { EventType, LivePoliteness, REDACTED_VALUE, TruncationChannel } from '@reticlehq/core';
 import { getAccessibleName, getRole, isSensitiveField } from '../dom/a11y.js';
 import { isVisible } from '../dom/visibility.js';
 import { refs } from '../dom/addressing/refs.js';
@@ -108,6 +108,24 @@ const named = (el) => {
     const testid = testidNear(el);
     return testid === undefined ? {} : { testid };
 };
+const ALERT_REGION = '[role="alert"]';
+const LIVE_REGION = `[aria-live],${ALERT_REGION},[role="status"]`;
+const liveOf = (el) => {
+    const region = el.closest(LIVE_REGION);
+    if (null === region) {
+        return {};
+    }
+    const level = region.getAttribute('aria-live');
+    if (level === LivePoliteness.ASSERTIVE || level === LivePoliteness.POLITE) {
+        return { live: level };
+    }
+    if (level !== null) {
+        return {};
+    }
+    return {
+        live: region.matches(ALERT_REGION) ? LivePoliteness.ASSERTIVE : LivePoliteness.POLITE,
+    };
+};
 export function installDom(emit) {
     const stopRegistry = installShadowRegistry();
     const observer = new MutationObserver((records) => {
@@ -149,7 +167,7 @@ export function installDom(emit) {
                         ? 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 }), ...named(parent) }, refs.refFor(parent));
+                    emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent), ...liveOf(parent) }, refs.refFor(parent));
                 }
                 continue;
             }
@@ -164,7 +182,7 @@ export function installDom(emit) {
                         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 }), ...named(parent) }, refs.refFor(parent));
+                        emit(EventType.DOM_TEXT, { text, ...(old === undefined ? {} : { old }), ...named(parent), ...liveOf(parent) }, refs.refFor(parent));
                     }
                 }
             }
@@ -226,7 +244,13 @@ export function installDom(emit) {
                 }
                 const { role, name } = gone;
                 removed += 1;
-                emit(EventType.DOM_REMOVED, { role, name, region: regionKeyOf(record.target) });
+                const testid = readTestId(gone.el) ?? readTestId(node);
+                emit(EventType.DOM_REMOVED, {
+                    role,
+                    name,
+                    region: regionKeyOf(record.target),
+                    ...(null === testid ? {} : { testid }),
+                });
             }
         }
         if (dropped > 0) {

package/dist/observers/net-detail/resource-timing.d.ts

@@ -0,0 +1,12 @@
+import { EventType } from '@reticlehq/core';
+type EmitNet = (type: EventType, data: Record<string, unknown>) => void;
+export declare function absoluteUrl(raw: string): string;
+export interface ResourceTimingInput {
+    emit: EmitNet;
+    installedAt: number;
+    nextId: () => string;
+    reportedNetUrls: Set<string>;
+    patchedNetUrls: ReadonlySet<string>;
+}
+export declare function observeResourceTiming(input: ResourceTimingInput): PerformanceObserver | undefined;
+export {};

package/dist/observers/net-detail/resource-timing.js

@@ -0,0 +1,69 @@
+import { EventType } from '@reticlehq/core';
+import { netUrlFields } from './network-redact.js';
+const RESOURCE_CAP = 200;
+export function absoluteUrl(raw) {
+    try {
+        return new URL(raw, location.href).href;
+    }
+    catch {
+        return raw;
+    }
+}
+function statusFields(entry, withOk) {
+    const status = entry.responseStatus ?? 0;
+    if (status <= 0) {
+        return {};
+    }
+    return withOk ? { status, ok: status >= 200 && status < 400 } : { status };
+}
+export function observeResourceTiming(input) {
+    const { emit, installedAt, nextId, reportedNetUrls, patchedNetUrls } = input;
+    if ('undefined' === typeof PerformanceObserver) {
+        return undefined;
+    }
+    let subresourceEvents = 0;
+    let unpatchedEvents = 0;
+    const onEntry = (entry) => {
+        const type = entry.initiatorType || 'other';
+        const rawUrl = entry.name;
+        const patched = 'fetch' === type || 'xmlhttprequest' === type;
+        if (patched && entry.startTime >= installedAt) {
+            if (patchedNetUrls.has(absoluteUrl(rawUrl)) || unpatchedEvents >= RESOURCE_CAP) {
+                return;
+            }
+            unpatchedEvents += 1;
+            emit(EventType.NET_UNPATCHED, {
+                ...netUrlFields(rawUrl),
+                initiator: type,
+                ...statusFields(entry, false),
+            });
+            return;
+        }
+        if (reportedNetUrls.has(rawUrl) || subresourceEvents >= RESOURCE_CAP) {
+            return;
+        }
+        reportedNetUrls.add(rawUrl);
+        subresourceEvents += 1;
+        emit(EventType.NET_REQUEST, {
+            id: nextId(),
+            method: 'GET',
+            ...netUrlFields(rawUrl),
+            durationMs: Math.round(entry.duration),
+            initiator: type,
+            ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),
+            ...statusFields(entry, true),
+        });
+    };
+    try {
+        const observer = new PerformanceObserver((list) => {
+            for (const raw of list.getEntries()) {
+                onEntry(raw);
+            }
+        });
+        observer.observe({ type: 'resource', buffered: true });
+        return observer;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/observers/network.js

@@ -7,6 +7,7 @@ import { redactUrl, netUrlFields } from './net-detail/network-redact.js';
 import { watchStreamedBody } from './network-stream.js';
 import { frameFields, isBridgeSocket } from './net-detail/network-frames.js';
 import { requireCapturedMethod } from '../util/captured-method.js';
+import { absoluteUrl, observeResourceTiming } from './net-detail/resource-timing.js';
 export { redactUrl, netUrlFields };
 const ShapeToken = { NULL: '0', STRING: 's', NUMBER: 'n', BOOLEAN: 'b', OTHER: '?' };
 function shapeOf(value) {
@@ -240,8 +241,11 @@ export function installNetwork(emit, opts = {}) {
     }
     let seq = 0;
     const nextId = () => `n${++seq}`;
+    const reportedNetUrls = new Set();
+    const patchedNetUrls = new Set();
     window.fetch = async (input, init) => {
         const rawUrl = urlOf(input);
+        patchedNetUrls.add(absoluteUrl(rawUrl));
         if (true === opts.ignore?.(rawUrl)) {
             return callFetch(input, init);
         }
@@ -354,6 +358,7 @@ export function installNetwork(emit, opts = {}) {
                 rawUrl: String(url),
                 start: 0,
             });
+            patchedNetUrls.add(absoluteUrl(String(url)));
         });
         callOpen.call(this, method, url, ...rest);
     };
@@ -538,51 +543,13 @@ export function installNetwork(emit, opts = {}) {
         };
         navProto.sendBeacon = patchedBeacon;
     }
-    const reportedNetUrls = new Set();
-    let subresourceEvents = 0;
-    const SUBRESOURCE_CAP = 200;
-    let subresourceObserver;
-    if (typeof PerformanceObserver !== 'undefined') {
-        try {
-            const observer = new PerformanceObserver((list) => {
-                for (const raw of list.getEntries()) {
-                    const entry = raw;
-                    if (subresourceEvents >= SUBRESOURCE_CAP) {
-                        return;
-                    }
-                    const type = entry.initiatorType || 'other';
-                    const patched = 'fetch' === type || 'xmlhttprequest' === type;
-                    if (patched && entry.startTime >= installedAt) {
-                        continue;
-                    }
-                    const rawUrl = entry.name;
-                    if (reportedNetUrls.has(rawUrl)) {
-                        continue;
-                    }
-                    reportedNetUrls.add(rawUrl);
-                    subresourceEvents += 1;
-                    emit(EventType.NET_REQUEST, {
-                        id: nextId(),
-                        method: 'GET',
-                        ...netUrlFields(rawUrl),
-                        durationMs: Math.round(entry.duration),
-                        initiator: type,
-                        ...(entry.transferSize > 0 ? { transferSize: entry.transferSize } : {}),
-                        ...((entry.responseStatus ?? 0) > 0
-                            ? {
-                                status: entry.responseStatus,
-                                ok: (entry.responseStatus ?? 0) >= 200 && (entry.responseStatus ?? 0) < 400,
-                            }
-                            : {}),
-                    });
-                }
-            });
-            subresourceObserver = observer;
-            observer.observe({ type: 'resource', buffered: true });
-        }
-        catch {
-        }
-    }
+    const subresourceObserver = observeResourceTiming({
+        emit,
+        installedAt,
+        nextId,
+        reportedNetUrls,
+        patchedNetUrls,
+    });
     return () => {
         if (pageSlots()[PAGE_CAPTURE] === owner) {
             delete pageSlots()[PAGE_CAPTURE];

package/dist/observers/perf.js

@@ -45,6 +45,15 @@ function largestShifted(sources) {
         ? undefined
         : { ref: refs.refFor(best.el), selector: shortSelector(best.el) };
 }
+function onlyReticleMoved(sources) {
+    if (sources === undefined || 0 === sources.length) {
+        return false;
+    }
+    return sources.every(({ node }) => {
+        const el = isElement(node) ? node : node?.parentElement;
+        return el !== null && el !== undefined && isReticleOverlay(el);
+    });
+}
 export function installPerf(emit) {
     if (typeof PerformanceObserver !== 'function')
         return () => undefined;
@@ -74,11 +83,16 @@ export function installPerf(emit) {
         const ls = e;
         if (true === ls.hadRecentInput)
             return;
-        cls += ls.value ?? 0;
+        if (onlyReticleMoved(ls.sources)) {
+            return;
+        }
+        const shift = ls.value ?? 0;
+        cls += shift;
         const shifted = largestShifted(ls.sources);
         emit(EventType.PERF, {
             metric: PerfMetric.CLS,
             value: cls,
+            shift,
             at: Math.round(e.startTime),
             ...(shifted === undefined ? {} : { shifted }),
         });

package/dist/presenter/chrome/presenter-verbs.js

@@ -6,6 +6,7 @@ export function actionVerb(action) {
             return 'Clicking';
         case ActionType.FILL:
         case ActionType.TYPE:
+        case ActionType.INSERT_TEXT:
             return 'Typing into';
         case ActionType.HOVER:
             return 'Hovering';

package/dist/presenter/presenter-config.d.ts

@@ -54,6 +54,7 @@ export declare const GLOW_OFF = "0";
 export declare const DATA_ON = "data-on";
 export declare const STATE_ATTR = "data-reticle-state";
 export declare const UNREACHABLE_STATE = "unreachable";
+export declare const NARROW_VIEWPORT_PX = 480;
 export declare const MIN_ATTR = "data-reticle-min";
 export declare const CHAT_ATTR = "data-reticle-chat";
 export declare const DOCK_ATTR = "data-reticle-dock";

package/dist/presenter/presenter-config.js

@@ -35,6 +35,7 @@ export const GLOW_OFF = '0';
 export const DATA_ON = 'data-on';
 export const STATE_ATTR = 'data-reticle-state';
 export const UNREACHABLE_STATE = 'unreachable';
+export const NARROW_VIEWPORT_PX = 480;
 export const MIN_ATTR = 'data-reticle-min';
 export const CHAT_ATTR = 'data-reticle-chat';
 export const DOCK_ATTR = 'data-reticle-dock';

package/dist/presenter/presenter-shell.d.ts

@@ -53,4 +53,5 @@ export declare function wasLeftOpen(): boolean;
 export declare function rememberLeftOpen(open: boolean): void;
 export declare function shouldReopenPanel(): boolean;
 export declare function shouldAutoOpenChat(autoOpenChat: boolean): boolean;
+export declare function isNarrowViewport(): boolean;
 export {};

package/dist/presenter/presenter-shell.js

@@ -3,7 +3,7 @@ import { PresenterReport, reportPanelHtml } from './presenter-report.js';
 import { paintToolbarAccount, TOOLBAR_ACCOUNT_ATTR } from './presenter-workspace.js';
 import { mountAccountControl, TEAM_SLOT_ATTR } from './presenter-account.js';
 import { paintSettingsAccount } from './presenter-settings.js';
-import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, SETTINGS_ATTR, SETTINGS_BTN_ATTR, MINIMISED_STORAGE_KEY, OPEN_STORAGE_KEY, } from './presenter-config.js';
+import { CHAT_MIN_ATTR, CHAT_PILL_ATTR, REPORT_ATTR, ANNOTATE_BTN_ATTR, CHAT_ATTR, CHAT_TOGGLE_ATTR, CHAT_PANEL_ATTR, DOCK_ATTR, FAB_ATTR, MIN_ATTR, NARROW_VIEWPORT_PX, SETTINGS_ATTR, SETTINGS_BTN_ATTR, MINIMISED_STORAGE_KEY, OPEN_STORAGE_KEY, } from './presenter-config.js';
 import { paintCarousel } from './carousel/carousel.js';
 import { panelSlides } from './carousel/panel-slides.js';
 import { paintRail, RAIL_HTML, RAIL_PROMO_ATTR, RAIL_SIGNIN_HTML } from './presenter-frame.js';
@@ -513,8 +513,11 @@ export function rememberLeftOpen(open) {
     }
 }
 export function shouldReopenPanel() {
-    return wasLeftOpen() && !wasMinimised();
+    return !isNarrowViewport() && wasLeftOpen() && !wasMinimised();
 }
 export function shouldAutoOpenChat(autoOpenChat) {
-    return autoOpenChat && !wasMinimised();
+    return autoOpenChat && !isNarrowViewport() && !wasMinimised();
+}
+export function isNarrowViewport() {
+    return globalThis.innerWidth < NARROW_VIEWPORT_PX;
 }

package/dist/presenter/tour/tour.js

@@ -225,6 +225,10 @@ export function mountTour(deps) {
     const onKey = (event) => {
         if (!open)
             return;
+        if (deps.isDriving()) {
+            remove();
+            return;
+        }
         if (appModalOpen(doc))
             return;
         const step = 'ArrowRight' === event.key ? 1 : 'ArrowLeft' === event.key ? -1 : 0;