@reticlehq/browser 2.14.0 → 3.2.0

package/dist/presenter/tour/tour.js

@@ -0,0 +1,264 @@
+import { COPIED_LABEL, COPY_FLASH_MS, COPY_LABEL, COPY_MANUAL_LABEL, TOUR_ATTR, TOUR_CSS, TOUR_PROMPT_ATTR, TOUR_TARGET_ATTR, holeRects, isInteractive, isLastSlide, nextIndex, slideHtml, tourSlides, } from './tour-view.js';
+import { TourAnchor } from '@reticlehq/core/tour';
+import { RETICLE_URL_PARAM } from '@reticlehq/core';
+export const TOUR_SEEN_KEY_PREFIX = 'reticle.tour.seen.';
+const APP_SELECTORS = ['main', '#root', '#app'];
+const HUD_PARTS = ['[data-reticle-hud]', '[data-reticle-chat-panel]'];
+function unionOfVisible(doc, selectors) {
+    let left = Number.POSITIVE_INFINITY;
+    let top = Number.POSITIVE_INFINITY;
+    let right = Number.NEGATIVE_INFINITY;
+    let bottom = Number.NEGATIVE_INFINITY;
+    for (const selector of selectors) {
+        const box = doc.querySelector(selector)?.getBoundingClientRect();
+        if (undefined === box || box.width <= 0 || box.height <= 0)
+            continue;
+        left = Math.min(left, box.left);
+        top = Math.min(top, box.top);
+        right = Math.max(right, box.left + box.width);
+        bottom = Math.max(bottom, box.top + box.height);
+    }
+    if (right === Number.NEGATIVE_INFINITY)
+        return undefined;
+    return { left, top, width: right - left, height: bottom - top };
+}
+const HUD_CONTROL_SELECTORS = {
+    [TourAnchor.HUD_CHAT]: '[data-reticle-chat-toggle]',
+    [TourAnchor.HUD_ANNOTATE]: '[data-reticle-annotate-btn]',
+    [TourAnchor.HUD_IMPACT]: '[data-reticle-report-btn]',
+    [TourAnchor.HUD_SETTINGS]: '[data-reticle-settings-btn]',
+};
+function anchorBox(doc, anchor) {
+    if (TourAnchor.HUD === anchor)
+        return unionOfVisible(doc, HUD_PARTS);
+    const control = HUD_CONTROL_SELECTORS[anchor];
+    if (undefined !== control) {
+        const box = doc.querySelector(control)?.getBoundingClientRect();
+        return undefined === box ? undefined : box;
+    }
+    if (TourAnchor.APP !== anchor)
+        return undefined;
+    for (const selector of APP_SELECTORS) {
+        const found = doc.querySelector(selector);
+        if (null === found)
+            continue;
+        const box = found.getBoundingClientRect();
+        if (box.width > 0)
+            return box;
+    }
+    return undefined;
+}
+export const tourSeenKey = (projectId) => `${TOUR_SEEN_KEY_PREFIX}${projectId}`;
+export function openedByReticle(search) {
+    if (search === undefined || '' === search)
+        return false;
+    const params = new URLSearchParams(search.startsWith('?') ? search.slice(1) : search);
+    return (params.has(RETICLE_URL_PARAM.OPENED) ||
+        params.has(RETICLE_URL_PARAM.SESSION) ||
+        params.has(RETICLE_URL_PARAM.PROJECT));
+}
+export function tourAlreadySeen(storage, projectId) {
+    if (undefined === storage)
+        return true;
+    try {
+        return null !== storage.getItem(tourSeenKey(projectId));
+    }
+    catch {
+        return true;
+    }
+}
+function markSeen(storage, projectId) {
+    try {
+        storage?.setItem(tourSeenKey(projectId), '1');
+    }
+    catch {
+    }
+}
+export function mountTour(deps) {
+    if (deps.isDriving())
+        return undefined;
+    if (openedByReticle(deps.search))
+        return undefined;
+    if (tourAlreadySeen(deps.storage, deps.projectId))
+        return undefined;
+    const doc = deps.document;
+    const style = doc.createElement('style');
+    style.setAttribute(TOUR_ATTR, '');
+    style.textContent = TOUR_CSS;
+    doc.head.appendChild(style);
+    const root = doc.createElement('div');
+    root.setAttribute(TOUR_ATTR, '');
+    const slides = tourSlides();
+    let index = 0;
+    let open = true;
+    let detachKeys = () => undefined;
+    let stopWatch = () => undefined;
+    const remove = () => {
+        if (!open)
+            return;
+        open = false;
+        detachKeys();
+        stopWatch();
+        root.remove();
+        style.remove();
+    };
+    const close = () => {
+        if (!open)
+            return;
+        markSeen(deps.storage, deps.projectId);
+        remove();
+    };
+    const yieldToDrive = () => {
+        if (!deps.isDriving())
+            return;
+        remove();
+    };
+    const draw = () => {
+        const slide = slides[index];
+        if (undefined === slide)
+            return;
+        root.innerHTML = `<div class="reticle-tour-scrim"></div>${slideHtml(slide)}`;
+        if (TourAnchor.NONE !== slide.anchor) {
+            const box = anchorBox(doc, slide.anchor);
+            if (undefined !== box && box.width > 0) {
+                const region = TourAnchor.APP === slide.anchor;
+                const ring = doc.createElement('div');
+                ring.className = region ? 'reticle-tour-ring is-region' : 'reticle-tour-ring';
+                const pad = region ? -2 : 6;
+                ring.style.left = `${String(Math.round(box.left - pad))}px`;
+                ring.style.top = `${String(Math.round(box.top - pad))}px`;
+                ring.style.width = `${String(Math.round(box.width + pad * 2))}px`;
+                ring.style.height = `${String(Math.round(box.height + pad * 2))}px`;
+                root.appendChild(ring);
+                if (!region)
+                    root.querySelector('.reticle-tour-scrim')?.classList.add('is-clear');
+                if (isInteractive(slide)) {
+                    ring.classList.add('is-live');
+                    root.querySelector('.reticle-tour-scrim')?.remove();
+                    const view = doc.defaultView;
+                    for (const rect of holeRects({
+                        left: box.left - pad,
+                        top: box.top - pad,
+                        width: box.width + pad * 2,
+                        height: box.height + pad * 2,
+                    }, view?.innerWidth ?? doc.documentElement.clientWidth, view?.innerHeight ?? doc.documentElement.clientHeight)) {
+                        const blocker = doc.createElement('div');
+                        blocker.className = 'reticle-tour-blocker';
+                        blocker.style.left = `${String(Math.round(rect.left))}px`;
+                        blocker.style.top = `${String(Math.round(rect.top))}px`;
+                        blocker.style.width = `${String(Math.round(rect.width))}px`;
+                        blocker.style.height = `${String(Math.round(rect.height))}px`;
+                        root.appendChild(blocker);
+                    }
+                }
+            }
+        }
+    };
+    const copyPrompt = (button) => {
+        const slide = slides[index];
+        const which = Number(button.getAttribute(TOUR_PROMPT_ATTR));
+        const prompt = slide?.prompts?.[which];
+        if (undefined === prompt)
+            return;
+        const flash = (label, mark) => {
+            button.textContent = label;
+            button.classList.add(mark);
+            doc.defaultView?.setTimeout(() => {
+                button.textContent = COPY_LABEL;
+                button.classList.remove(mark);
+            }, COPY_FLASH_MS);
+        };
+        const settle = (copied) => {
+            if (copied) {
+                flash(COPIED_LABEL, 'is-done');
+                return;
+            }
+            const text = root.querySelector(`.reticle-tour-prompt[${TOUR_PROMPT_ATTR}="${String(which)}"] .reticle-tour-prompt-text`);
+            if (null !== text)
+                deps.select?.(text);
+            flash(COPY_MANUAL_LABEL, 'is-manual');
+        };
+        const result = deps.copy?.(prompt.text);
+        if (undefined === result) {
+            settle(false);
+            return;
+        }
+        if ('boolean' === typeof result) {
+            settle(result);
+            return;
+        }
+        void result.then(settle).catch(() => {
+            settle(false);
+        });
+    };
+    root.addEventListener('click', (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const hit = target.closest(`[${TOUR_TARGET_ATTR}]`);
+        if (null === hit)
+            return;
+        const what = hit.getAttribute(TOUR_TARGET_ATTR);
+        if (null === what)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        if ('skip' === what || 'done' === what) {
+            close();
+            return;
+        }
+        if ('copy' === what) {
+            copyPrompt(hit);
+            return;
+        }
+        const moved = nextIndex(index, 'back' === what ? -1 : 1);
+        if (moved === index)
+            return;
+        index = moved;
+        draw();
+    });
+    const onKey = (event) => {
+        if (!open)
+            return;
+        const step = 'ArrowRight' === event.key ? 1 : 'ArrowLeft' === event.key ? -1 : 0;
+        if ('Escape' === event.key) {
+            event.preventDefault();
+            close();
+            return;
+        }
+        if (0 === step)
+            return;
+        const moved = nextIndex(index, step);
+        if (moved === index)
+            return;
+        event.preventDefault();
+        index = moved;
+        draw();
+    };
+    doc.addEventListener('keydown', onKey);
+    detachKeys = () => {
+        doc.removeEventListener('keydown', onKey);
+    };
+    draw();
+    doc.body.appendChild(root);
+    const overlay = doc.querySelector('[data-reticle-overlay]');
+    if (null !== overlay) {
+        const observer = new MutationObserver(yieldToDrive);
+        observer.observe(overlay, { attributes: true, attributeFilter: ['data-reticle-mode'] });
+        stopWatch = () => observer.disconnect();
+        yieldToDrive();
+    }
+    return {
+        destroy: close,
+        isOpen: () => open,
+    };
+}
+export { isLastSlide };
+export function safeLocalStorage() {
+    try {
+        return window.localStorage;
+    }
+    catch {
+        return undefined;
+    }
+}

package/dist/recorder/recorder.js

@@ -1,5 +1,6 @@
 import { ActionType, AnchorKind, AnnotationKind, DEGRADED_ANCHOR_ROLE, EventType, FLOW_FILE_VERSION, FlowStepTool, RecorderPhase, } from '@reticlehq/core';
 import { REDACTED_VALUE } from '@reticlehq/core';
+import { sourceFromDom } from '../dom/addressing/source.js';
 import { getAccessibleName, getRole, isSensitiveField } from '../dom/a11y.js';
 import { isReticleOverlay } from '../dom/dom-ignore.js';
 import { getCapabilities } from '../registry/capabilities.js';
@@ -64,6 +65,11 @@ function buildStep(el, action, args) {
         step.args = args;
     if (degraded)
         step.degraded = true;
+    const source = sourceFromDom(el);
+    if (source !== undefined) {
+        step.source =
+            source.line === undefined ? { file: source.file } : { file: source.file, line: source.line };
+    }
     return step;
 }
 export function compileRecording(name, steps, annotations, createdAt, startPath) {

package/dist/registry/declared-channels.d.ts

@@ -0,0 +1,2 @@
+import { ChannelId } from '@reticlehq/core';
+export declare function declaredChannels(): ChannelId[];

package/dist/registry/declared-channels.js

@@ -0,0 +1,14 @@
+import { ChannelId } from '@reticlehq/core';
+import { storeNames } from './stores.js';
+export function declaredChannels() {
+    const fixed = [
+        ChannelId.UI,
+        ChannelId.NET,
+        ChannelId.LOG,
+        ChannelId.ROUTE,
+        ChannelId.STORAGE,
+        ChannelId.TIME,
+        ChannelId.SIGNAL,
+    ];
+    return storeNames().length > 0 ? [...fixed, ChannelId.STATE] : fixed;
+}

package/dist/registry/declared-platform.d.ts

@@ -0,0 +1,4 @@
+import { PlatformProfile } from '@reticlehq/core';
+export declare function declaredPlatform(): PlatformProfile;
+export declare const SERVED_COMMANDS: readonly string[];
+export declare function declaredCommands(): string[];

package/dist/registry/declared-platform.js

@@ -0,0 +1,34 @@
+import { PlatformProfile, RETICLE_IPC_GLOBAL, ReticleCommand } from '@reticlehq/core';
+const TAURI_INTERNALS_GLOBAL = '__TAURI_INTERNALS__';
+export function declaredPlatform() {
+    if ('undefined' === typeof window)
+        return PlatformProfile.SERVICE;
+    const global = window;
+    const isDesktop = global[RETICLE_IPC_GLOBAL] !== undefined || global[TAURI_INTERNALS_GLOBAL] !== undefined;
+    return isDesktop ? PlatformProfile.WEBVIEW : PlatformProfile.WEB;
+}
+export const SERVED_COMMANDS = [
+    ReticleCommand.SNAPSHOT,
+    ReticleCommand.QUERY,
+    ReticleCommand.MATCH,
+    ReticleCommand.INSPECT,
+    ReticleCommand.ACT,
+    ReticleCommand.ACT_SEQUENCE,
+    ReticleCommand.ANIMATIONS,
+    ReticleCommand.NARRATE,
+    ReticleCommand.CLOCK,
+    ReticleCommand.CAPABILITIES,
+    ReticleCommand.STATE_READ,
+    ReticleCommand.STORAGE_READ,
+    ReticleCommand.SCROLL,
+    ReticleCommand.SESSION_CONFIG,
+    ReticleCommand.PRESENTER,
+    ReticleCommand.IMPACT,
+    ReticleCommand.CAPTURE,
+    ReticleCommand.NAVIGATE,
+    ReticleCommand.REFRESH,
+    ReticleCommand.FLOWS,
+];
+export function declaredCommands() {
+    return [...SERVED_COMMANDS];
+}

package/dist/registry/emitter.js

@@ -1,4 +1,4 @@
-import { reticle } from '../index.js';
+import { reticle } from '../reticle-singleton.js';
 export function createReticleEmitter(options = {}) {
     const target = options.target ?? reticle;
     return {

package/dist/registry/store-adapters.js

@@ -1,4 +1,4 @@
-import { nativeWarn } from '../timers/native-console.js';
+import { nativeWarn } from '../timers/console/native-console.js';
 import { markAdapterSource } from './stores.js';
 export function tanstackQueryStore(client) {
     const store = {

package/dist/registry/stores.js

@@ -1,5 +1,5 @@
 import { RETICLE_RENDERS_STORE } from '@reticlehq/core';
-import { nativeWarn } from '../timers/native-console.js';
+import { nativeWarn } from '../timers/console/native-console.js';
 import { sanitizeWithReport } from '../security/serialization.js';
 const globalStore = globalThis;
 const stores = (globalStore.__reticleStores ??= new Map());

package/dist/reticle-presenter-helpers.js

@@ -1,9 +1,13 @@
 import { ReticleCommand, PresenterMode, QueryBy } from '@reticlehq/core';
-import { refs } from './dom/refs.js';
+import { refs } from './dom/addressing/refs.js';
 import { describe } from './dom/a11y.js';
 export function str(value, fallback = '') {
     return 'string' === typeof value ? value : fallback;
 }
+function text(value) {
+    const asString = str(value);
+    return '' === asString ? undefined : asString;
+}
 export function refLabel(refId) {
     const el = refs.resolve(refId);
     if (!(el instanceof Element))
@@ -39,13 +43,13 @@ export function presentStatus(commandName, args = {}) {
             return target !== undefined ? `Finding ${target}` : 'Finding an element';
         }
         case ReticleCommand.INSPECT: {
-            const ref = str(args['ref']);
+            const ref = text(args['ref']);
             return ref !== undefined ? `Inspecting ${refLabel(ref)}` : 'Inspecting an element';
         }
         case ReticleCommand.ANIMATIONS:
             return 'Reading animations';
         case ReticleCommand.STATE_READ: {
-            const store = str(args['store']);
+            const store = text(args['store']);
             return store !== undefined ? `Reading state: ${store}` : 'Reading state';
         }
         case ReticleCommand.CAPABILITIES:
@@ -55,11 +59,11 @@ export function presentStatus(commandName, args = {}) {
     }
 }
 function queryTarget(q) {
-    const testid = str(q['testid']) ?? (QueryBy.TESTID === str(q['by']) ? str(q['value']) : undefined);
+    const testid = text(q['testid']) ?? (QueryBy.TESTID === str(q['by']) ? text(q['value']) : undefined);
     if (testid !== undefined)
         return `[testid=${testid}]`;
-    const name = str(q['name']);
-    const value = str(q['value']) ?? str(q['text']) ?? str(q['label']) ?? str(q['role']);
+    const name = text(q['name']);
+    const value = text(q['value']) ?? text(q['text']) ?? text(q['label']) ?? text(q['role']);
     if (value !== undefined)
         return name !== undefined ? `"${value}" (${name})` : `"${value}"`;
     return name !== undefined ? `"${name}"` : undefined;

package/dist/reticle-singleton.d.ts

@@ -0,0 +1,2 @@
+import { Reticle } from './reticle.js';
+export declare const reticle: Reticle;

package/dist/reticle-singleton.js

@@ -0,0 +1,3 @@
+import { Reticle } from './reticle.js';
+const globalStore = globalThis;
+export const reticle = (globalStore.__reticleInstance ??= new Reticle());

package/dist/reticle.js

@@ -1,20 +1,21 @@
 import { setPresenterVisible } from './dom/dom-ignore.js';
-import { EventType, RETICLE_DEFAULT_PORT, RETICLE_PROTOCOL_VERSION, RETICLE_URL_PARAM, bridgeWsUrl, ReticleCommand, MessageKind, SESSION_AUTO, SessionState, TRANSPORT_LIMITS, buildRedactionPolicy, isLoopbackHostname, isLocalPage, setActiveRedactionPolicy, wireRedactionKeys, RETICLE_ROOT_GLOBAL, RETICLE_SDK_VERSION_GLOBAL, CONTRACT_FINGERPRINT, newDocumentId, NO_EDITS_OBSERVED, } from '@reticlehq/core';
+import { EventType, RETICLE_DEFAULT_PORT, RETICLE_PROTOCOL_VERSION, RETICLE_URL_PARAM, bridgeWsUrl, ReticleCommand, MessageKind, SESSION_AUTO, SessionState, TRANSPORT_LIMITS, buildRedactionPolicy, isLoopbackHostname, isLocalPage, setActiveRedactionPolicy, wireRedactionKeys, RETICLE_ROOT_GLOBAL, RETICLE_SDK_VERSION_GLOBAL, CONTRACT_FINGERPRINT, CONTRACT_PARTS, newDocumentId, NO_EDITS_OBSERVED, PresenterMode, } from '@reticlehq/core';
 import { rememberSessionLabel } from './session-continuity.js';
 import { editEpoch } from './edit-epoch.js';
 import { createCommandRegistry, RELOAD_CACHE_BUST_PARAM, } from './commands/commands.js';
 import { Transport } from './transport/transport.js';
 import { unreachableMessage } from './transport/unreachable-message.js';
-import { adapterNames } from './registry/adapters.js';
+import { adapterNames } from './registry/stores/adapters.js';
+import { declaredChannels } from './registry/declared-channels.js';
+import { declaredCommands, declaredPlatform } from './registry/declared-platform.js';
 import { registerCapabilities, setCapabilitiesListener, hasCapabilities, } from './registry/capabilities.js';
 import { installAllObservers, runTeardowns } from './observers/install-all.js';
-import { installOverlay } from './presenter/overlay.js';
-import { Presenter, LOG_KIND, LOG_RESULT, } from './presenter/presenter.js';
-import { getPresenterSettings } from './presenter/presenter-settings.js';
-import { actionVerb } from './presenter/presenter-verbs.js';
+import { installOverlay } from './presenter/chrome/overlay.js';
+import { LOG_KIND, LOG_RESULT } from './presenter/chrome/log-kinds.js';
+import { actionVerb } from './presenter/chrome/presenter-verbs.js';
 import { str, refLabel, modeForCommand, presentStatus } from './reticle-presenter-helpers.js';
 import { resetClock } from './timers/clock.js';
-import { nativeWarn } from './timers/native-console.js';
+import { nativeWarn } from './timers/console/native-console.js';
 import { installRecorder } from './recorder/recorder.js';
 import { Annotator } from './review/annotator.js';
 export function shouldBlockProduction(nodeEnv, allowInProduction) {
@@ -113,6 +114,10 @@ export class Reticle {
     #start = 0;
     #overlay;
     #presenter;
+    #pendingPushes = new Map();
+    #readPanelSettings;
+    #panelRequested = false;
+    #bridgeConnected = false;
     #recorder;
     #annotator;
     #eventCount = 0;
@@ -165,7 +170,10 @@ export class Reticle {
             url,
             hello: () => this.#hello(),
             handleCommand: (command) => this.#handleCommand(command),
-            onConnected: () => this.#presenter?.sessionStart(),
+            onConnected: () => {
+                this.#bridgeConnected = true;
+                this.#presenter?.sessionStart();
+            },
             onConnectionLost: () => {
                 resetClock();
                 if (true === this.#presenter?.sessionActive) {
@@ -193,39 +201,18 @@ export class Reticle {
             this.#overlay = installOverlay();
             this.#overlay.update({ connected: true, events: 0 });
         }
-        if (options.present !== false) {
-            const presenterOptions = {};
-            if (options.pace !== undefined)
-                presenterOptions.paceMs = options.pace;
-            if (options.narrationDwellMs !== undefined) {
-                presenterOptions.narrationDwellMs = options.narrationDwellMs;
-            }
-            if (options.border !== undefined)
-                presenterOptions.border = options.border;
-            if (options.logMax !== undefined)
-                presenterOptions.logMax = options.logMax;
-            if (options.endedFadeMs !== undefined)
-                presenterOptions.endedFadeMs = options.endedFadeMs;
-            if (options.idleEndMs !== undefined)
-                presenterOptions.idleEndMs = options.idleEndMs;
-            presenterOptions.sessionId = this.#session;
-            presenterOptions.onControl = (intent) => this.#emit(EventType.HUMAN_CONTROL, intent.text !== undefined
-                ? { kind: intent.kind, text: intent.text }
-                : { kind: intent.kind });
-            this.#presenter = new Presenter(presenterOptions);
-            this.#presenter.mount();
-        }
+        if (options.present !== false)
+            this.#fetchAndShowPanel(options);
         if (true === options.recorder) {
             this.#recorder = installRecorder({ emit, now: () => Date.now() });
             this.#recorder.mount();
         }
         if (options.annotate ?? options.present !== false) {
-            const presenter = this.#presenter;
             this.#annotator = new Annotator({
                 emit,
                 now: () => Date.now(),
-                onMark: (mark) => presenter?.log(LOG_KIND.HUMAN, `🚩 #${String(mark.index)} ${mark.anchor}${mark.source !== undefined ? ` · ${mark.source}` : ''} — ${mark.note}`),
-                shouldBlock: () => getPresenterSettings().blockPageInteractions,
+                onMark: (mark) => this.#presenter?.log(LOG_KIND.HUMAN, `🚩 #${String(mark.index)} ${mark.anchor}${mark.source !== undefined ? ` · ${mark.source}` : ''} — ${mark.note}`),
+                shouldBlock: () => this.#readPanelSettings?.().blockPageInteractions ?? true,
             });
             this.#annotator.mount();
             this.#presenter?.bindAnnotator(this.#annotator);
@@ -233,6 +220,71 @@ export class Reticle {
         this.#transport.connect();
         this.#connected = true;
     }
+    #fetchAndShowPanel(options) {
+        if (this.#panelRequested)
+            return;
+        this.#panelRequested = true;
+        void import('./presenter/presenter.js')
+            .then(({ Presenter }) => import('./presenter/presenter-settings.js').then((settings) => ({ Presenter, settings })))
+            .then(({ Presenter, settings }) => {
+            if (!this.#connected)
+                return;
+            this.#readPanelSettings = settings.getPresenterSettings;
+            const panelOptions = {};
+            if (options.pace !== undefined)
+                panelOptions.paceMs = options.pace;
+            if (options.narrationDwellMs !== undefined) {
+                panelOptions.narrationDwellMs = options.narrationDwellMs;
+            }
+            if (options.border !== undefined)
+                panelOptions.border = options.border;
+            if (options.logMax !== undefined)
+                panelOptions.logMax = options.logMax;
+            if (options.endedFadeMs !== undefined)
+                panelOptions.endedFadeMs = options.endedFadeMs;
+            if (options.idleEndMs !== undefined)
+                panelOptions.idleEndMs = options.idleEndMs;
+            panelOptions.sessionId = this.#session;
+            panelOptions.onControl = (intent) => this.#emit(EventType.HUMAN_CONTROL, intent.text !== undefined
+                ? { kind: intent.kind, text: intent.text }
+                : { kind: intent.kind });
+            const panel = new Presenter(panelOptions);
+            this.#presenter = panel;
+            panel.mount();
+            for (const buffered of this.#pendingPushes.values())
+                panel.handlePush(buffered);
+            this.#pendingPushes.clear();
+            void import('./presenter/tour/tour.js').then((tour) => {
+                if (!this.#connected)
+                    return;
+                const shown = tour.mountTour({
+                    document,
+                    storage: tour.safeLocalStorage(),
+                    projectId: reticleParamsFromSearch(window.location.search).projectId ?? window.location.origin,
+                    isDriving: () => PresenterMode.IDLE !== panel.mode,
+                    search: window.location.search,
+                    copy: (text) => navigator.clipboard?.writeText(text).then(() => true, () => false) ?? false,
+                    select: (element) => {
+                        const selection = window.getSelection();
+                        if (null === selection)
+                            return;
+                        const range = document.createRange();
+                        range.selectNodeContents(element);
+                        selection.removeAllRanges();
+                        selection.addRange(range);
+                    },
+                });
+                if (shown !== undefined)
+                    this.#teardowns.push(shown.destroy);
+            });
+            if (this.#bridgeConnected)
+                panel.sessionStart();
+            if (this.#annotator !== undefined)
+                panel.bindAnnotator(this.#annotator);
+        })
+            .catch(() => {
+        });
+    }
     get connected() {
         return this.#connected;
     }
@@ -310,10 +362,18 @@ export class Reticle {
             adapters: adapterNames(),
             ...(this.#token === undefined ? {} : { token: this.#token }),
             hasCapabilities: hasCapabilities(),
+            channels: declaredChannels(),
+            platform: declaredPlatform(),
+            commands: declaredCommands(),
             captureBodies: this.#captureBodies,
             ...(this.#sourceMapping === undefined ? {} : { sourceMapping: this.#sourceMapping }),
             ...(this.#sdkVersion === undefined ? {} : { sdkVersion: this.#sdkVersion }),
             contract: CONTRACT_FINGERPRINT,
+            contractParts: {
+                commands: [...CONTRACT_PARTS.commands],
+                events: [...CONTRACT_PARTS.events],
+                actions: [...CONTRACT_PARTS.actions],
+            },
             ...(0 === this.#redactKeys.length ? {} : { redactKeys: this.#redactKeys }),
         };
     }
@@ -332,8 +392,12 @@ export class Reticle {
         if (command.name === ReticleCommand.PRESENTER ||
             command.name === ReticleCommand.FLOWS ||
             command.name === ReticleCommand.IMPACT) {
-            this.#presenter?.handlePush(command);
-            return { ok: true, result: { applied: this.#presenter !== undefined } };
+            if (this.#presenter === undefined) {
+                this.#pendingPushes.set(command.name, command);
+                return { ok: true, result: { applied: false, buffered: true } };
+            }
+            this.#presenter.handlePush(command);
+            return { ok: true, result: { applied: true } };
         }
         const handler = this.#registry.get(command.name);
         if (handler === undefined) {

package/dist/review/annotator-styles.js

@@ -1,4 +1,4 @@
-import { Z_OVERLAY } from '../presenter/presenter-styles.js';
+import { Z_OVERLAY } from '../presenter/chrome/layers.js';
 const MARK_ATTR = 'data-reticle-mark';
 const sel = (role) => `[${MARK_ATTR}="${role}"]`;
 export const MARK_PLACEHOLDER = 'What should change?';

package/dist/review/annotator.js

@@ -1,8 +1,8 @@
-import { isSyntheticInput } from '../actions/synthetic-input.js';
+import { isSyntheticInput } from '../actions/synthetic/synthetic-input.js';
 import { EventType } from '@reticlehq/core';
 import { isReticleUi, isReticleOverlay } from '../dom/dom-ignore.js';
 import { resolveMarkAnchor } from './mark-anchor.js';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { ANNOTATOR_CSS, ANNOTATOR_ROOT_HTML, MARK_CANCEL, MARK_PENDING_GLYPH, MARK_PLACEHOLDER, MARK_SUBMIT, } from './annotator-styles.js';
 const HIGHLIGHT_REST_MS = 130;
 const SHAKE_MS = 250;

package/dist/review/mark-anchor.js

@@ -1,8 +1,8 @@
 import { MarkAnchorStrategy } from '@reticlehq/core';
-import { AnchorStrategy, synthesizeAnchor } from '../dom/auto-anchor.js';
+import { AnchorStrategy, synthesizeAnchor, } from '../dom/addressing/auto-anchor.js';
 import { getAccessibleName, getRole } from '../dom/a11y.js';
-import { identifyComponent } from '../registry/adapters.js';
-import { sourceFor } from '../dom/source.js';
+import { identifyComponent } from '../registry/stores/adapters.js';
+import { sourceFor } from '../dom/addressing/source.js';
 const TESTID_ATTR = 'data-testid';
 const STRATEGY = {
     [AnchorStrategy.TESTID]: MarkAnchorStrategy.TESTID,

package/dist/transport/transport.js

@@ -1,6 +1,6 @@
 import { CHURN_TYPES, CommandMessageSchema, EventType, MessageKind, SESSION_LIFECYCLE, } from '@reticlehq/core';
-import { nativeSetTimeout, nativeNow } from '../timers/native-timers.js';
-import { nativeWarn } from '../timers/native-console.js';
+import { nativeSetTimeout, nativeNow } from '../timers/native/native-timers.js';
+import { nativeWarn } from '../timers/console/native-console.js';
 import { safeStringify } from '../security/serialization.js';
 function subscribeDocumentVisible(handler) {
     if ('undefined' === typeof document)