@reticlehq/browser 2.14.0 → 3.2.0

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

@@ -1,3 +1,6 @@
+import type { AccountState } from '@reticlehq/core';
+import { type AccountDetails } from './presenter-account.js';
+export declare const TOOLBAR_ACCOUNT_ATTR = "data-reticle-toolbar-account";
 export declare function readWorkspaceRoot(): string | undefined;
 export declare function workspaceFolderLabel(root: string): string;
 export declare function readProjectIdFromUrl(): string | undefined;
@@ -9,3 +12,4 @@ export declare function workspaceSummary(): {
 export declare function workspaceRowHtml(): string;
 export declare function paintWorkspace(root: HTMLElement): void;
 export declare function mountWorkspaceSelector(root: HTMLElement): () => void;
+export declare function paintToolbarAccount(root: HTMLElement, account: AccountState | undefined, dashboardUrl: string | undefined, details?: AccountDetails): void;

package/dist/presenter/presenter-workspace.js

@@ -1,11 +1,14 @@
 import { RETICLE_ROOT_GLOBAL, RETICLE_URL_PARAM } from '@reticlehq/core';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './presenter-icons.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './icons/presenter-icons.js';
+import { ACCOUNT_SIGNIN_ATTR, ACCOUNT_TEXT, accountControlHtml, } from './presenter-account.js';
 const WORKSPACE_BTN_ATTR = 'data-reticle-workspace-btn';
 const WORKSPACE_MENU_ATTR = 'data-reticle-workspace-menu';
 const WORKSPACE_NAME_ATTR = 'data-reticle-workspace-name';
 const WORKSPACE_PATH_ATTR = 'data-reticle-workspace-path';
 const WORKSPACE_PROJECT_ATTR = 'data-reticle-workspace-project';
 const WORKSPACE_COPY_ATTR = 'data-reticle-workspace-copy';
+export const TOOLBAR_ACCOUNT_ATTR = 'data-reticle-toolbar-account';
+const COPIED_MS = 1_200;
 const WORKSPACE_LABEL = 'Workspace';
 const PROJECT_LABEL = 'Project';
 const COPY_PATH_LABEL = 'Copy path';
@@ -53,7 +56,9 @@ export function workspaceRowHtml() {
     <div class="reticle-workspace-menu" ${WORKSPACE_MENU_ATTR} role="region" aria-label="${WORKSPACE_LABEL}" aria-hidden="true" hidden>
       <div class="reticle-workspace-menu-head">
         <div class="reticle-workspace-menu-title">${WORKSPACE_LABEL}</div>
-        <button type="button" class="reticle-workspace-copy" ${WORKSPACE_COPY_ATTR} title="${COPY_PATH_LABEL}" aria-label="${COPY_PATH_LABEL}">${copyIcon}</button>
+        <div class="reticle-workspace-menu-actions">
+          <button type="button" class="reticle-workspace-copy" ${WORKSPACE_COPY_ATTR} title="${COPY_PATH_LABEL}" aria-label="${COPY_PATH_LABEL}">${copyIcon}</button>
+        </div>
       </div>
       <div class="reticle-workspace-menu-row"><span class="reticle-workspace-menu-k">Folder</span><span class="reticle-workspace-menu-v" data-reticle-workspace-folder></span></div>
       <div class="reticle-workspace-menu-row"><span class="reticle-workspace-menu-k">Path</span><span class="reticle-workspace-menu-v reticle-workspace-menu-path" ${WORKSPACE_PATH_ATTR}></span></div>
@@ -128,6 +133,22 @@ export function mountWorkspaceSelector(root) {
         e.stopPropagation();
         toggle();
     };
+    const onMenuClick = (e) => {
+        const target = e.target;
+        if (!(target instanceof Element))
+            return;
+        const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
+        if (null === signin)
+            return;
+        e.stopPropagation();
+        void navigator.clipboard?.writeText(ACCOUNT_TEXT.SIGNIN_COMMAND).catch(() => undefined);
+        const previous = signin.textContent;
+        signin.textContent = ACCOUNT_TEXT.COPIED;
+        setTimeout(() => {
+            signin.textContent = previous;
+        }, COPIED_MS);
+    };
+    menu.addEventListener('click', onMenuClick);
     const onDocPointer = (e) => {
         const target = e.target;
         if (!(target instanceof Node))
@@ -171,3 +192,9 @@ export function mountWorkspaceSelector(root) {
         document.removeEventListener('keydown', onKeyDown);
     };
 }
+export function paintToolbarAccount(root, account, dashboardUrl, details = {}) {
+    const slot = root.querySelector(`[${TOOLBAR_ACCOUNT_ATTR}]`);
+    if (!(slot instanceof HTMLElement))
+        return;
+    slot.innerHTML = accountControlHtml(account, { ...details, dashboardUrl }, true);
+}

package/dist/presenter/presenter.d.ts

@@ -1,13 +1,13 @@
 import { PresenterMode, SessionState, type PresenterTone } from '@reticlehq/core';
-import { type LogKind, type LogResult, type LogHandle } from './presenter-log.js';
+import { type LogKind, type LogResult, type LogHandle } from './chrome/presenter-log.js';
 import { type PresenterOptions } from './presenter-config.js';
 import { type PresenterRunState } from './presenter-run-state.js';
 import { type ControlHandler } from './presenter-controls.js';
 import { Annotator } from '../review/annotator.js';
 export { GlowPhase } from './presenter-config.js';
 export type { PresenterOptions } from './presenter-config.js';
-export { LOG_KIND, LOG_RESULT } from './presenter-log.js';
-export type { LogHandle } from './presenter-log.js';
+export { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
+export type { LogHandle } from './chrome/presenter-log.js';
 export type { ControlIntent, ControlHandler } from './presenter-controls.js';
 export declare class Presenter {
     #private;

package/dist/presenter/presenter.js

@@ -1,23 +1,23 @@
-import { ActionType, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
-import { refs } from '../dom/refs.js';
+import { ActionType, HumanControlKind, ReticleCommand, PresenterMode, SessionState, isPresenterTone, isSessionState, } from '@reticlehq/core';
+import { refs } from '../dom/addressing/refs.js';
 import { unreachableStripText } from '../transport/unreachable-message.js';
-import { actionVerb } from './presenter-verbs.js';
-import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native-timers.js';
-import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, } from './presenter-log.js';
+import { actionVerb } from './chrome/presenter-verbs.js';
+import { nativeSetTimeout, nativeClearTimeout, nativeNow } from '../timers/native/native-timers.js';
+import { LOG_KIND, CHIP_LABEL, DATA_RETICLE_LOG, clampLogMax, formatElapsed, humanDuration, appendLogRow, } from './chrome/presenter-log.js';
 import { PRESENTER_CSS } from './presenter-styles.js';
 import { HudShell } from './presenter-shell.js';
-import { parseImpactSnapshot } from './presenter-report-copy.js';
+import { parseImpactSnapshot } from './chrome/presenter-report-copy.js';
 import { BorderMode, DEFAULT_BORDER_MODE, DATA_BUSY, BUSY_OFF, effectivePaceMs, IDLE_AFTER_MS, HEARTBEAT_MS, IDLE_NOTICE_MS, IDLE_END_MS, IDLE_END_MIN_MS, ACT_STRIP, STATE_ATTR, UNREACHABLE_STATE, GLOW_FADE_MS, GLOW_ON, GLOW_OFF, DATA_ON, THROTTLED_ATTR, LIVENESS_ATTR, MARKERS_BTN_ATTR, CLEAR_MARKS_ATTR, MARK_COUNT_ATTR, } from './presenter-config.js';
 import { buildRunState } from './presenter-run-state.js';
-import { moveCursor, ringAround, spawnRipple, pace } from './presenter-effects.js';
+import { moveCursor, ringAround, spawnRipple, pace } from './chrome/presenter-effects.js';
 import { GlowController } from './presenter-glow.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './presenter-icons.js';
-import { renderTally } from './presenter-tally.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon } from './icons/presenter-icons.js';
+import { renderTally } from './chrome/presenter-tally.js';
 import { CONTROLS_BANNER_HTML, CONTROLS_FLOWS_HTML, CONTROLS_FOOT_HTML, ENDED_FADE_MS, ControlPanel, } from './presenter-controls.js';
 import { statusTheme, blockerHtml, getPresenterSettings, OutputDetail, syncPageBlocker, } from './presenter-settings.js';
 import { Annotator } from '../review/annotator.js';
 export { GlowPhase } from './presenter-config.js';
-export { LOG_KIND, LOG_RESULT } from './presenter-log.js';
+export { LOG_KIND, LOG_RESULT } from './chrome/presenter-log.js';
 export class Presenter {
     #paceMs;
     #root;
@@ -85,6 +85,7 @@ export class Presenter {
             onExpand: () => this.#syncAnnotator(),
             onAnnotateToggle: () => this.#syncAnnotator(),
             onCollapse: () => this.#syncAnnotator(),
+            onSyncNow: () => this.#onControl?.({ kind: HumanControlKind.SYNC }),
             settings: {
                 onBeforeOpen: () => {
                     if (this.#shell.isCollapsed())
@@ -92,6 +93,7 @@ export class Presenter {
                 },
                 onHideUntilRestart: () => this.#applyHideUntilRestart(),
                 onSettingsChange: (s) => this.#onSettingsChange(s),
+                onHarness: (enabled) => this.#onControl?.({ kind: HumanControlKind.HARNESS, text: enabled ? 'on' : 'off' }),
             },
         });
     }
@@ -116,8 +118,17 @@ export class Presenter {
             return void this.#panel.setFlows(a['flows']);
         if (command.name === ReticleCommand.IMPACT) {
             const snapshot = parseImpactSnapshot(a['snapshot']);
-            if (snapshot !== undefined)
+            if (snapshot !== undefined) {
                 this.#shell.report.setSnapshot(snapshot);
+                this.#shell.paintOffer(snapshot.harnessOffer);
+                this.#shell.paintHarness(snapshot.harnessConfig);
+                this.#shell.paintAccount(snapshot.account, snapshot.dashboardUrl, {
+                    projectName: snapshot.projectName,
+                    dashboardUrl: snapshot.dashboardUrl,
+                    verdicts: snapshot.project.counts.verdicts,
+                    defects: snapshot.project.counts.failed,
+                });
+            }
             return;
         }
         const state = a['state'];
@@ -352,14 +363,17 @@ export class Presenter {
         }
         if (idleMs < this.#idleNoticeMs)
             return;
-        const since = this.#lastActionText !== '' ? ACT_STRIP.SINCE_LAST : '';
-        this.#paintActStrip(`${ACT_STRIP.IDLE_PREFIX}${humanDuration(idleMs)}${since}`, true);
+        if ('' === this.#lastActionText)
+            return;
+        const since = ACT_STRIP.SINCE_LAST;
+        this.#paintActStrip(`${ACT_STRIP.PLANNING_PREFIX}${humanDuration(idleMs)}${since}`, true);
         if (this.#chatPillTime !== undefined)
             this.#chatPillTime.textContent = humanDuration(idleMs);
     }
     #endIdle(idleMs) {
         this.#endMs = this.#now();
-        this.#panel.setState(SessionState.ENDED, `idle ${humanDuration(idleMs)}`);
+        this.#panel.setState(SessionState.ENDED, `${ACT_STRIP.STOPPED_PREFIX}${humanDuration(idleMs)} quiet`);
+        this.#paintActStrip(ACT_STRIP.STOPPED, false);
         if (this.#heartbeatTimer !== undefined) {
             nativeClearTimeout(this.#heartbeatTimer);
             this.#heartbeatTimer = undefined;

package/dist/presenter/tour/tour-view.d.ts

@@ -0,0 +1,33 @@
+import { TourAnchor, type TourPrompt } from '@reticlehq/core/tour';
+export declare const HANDOFF_INDEX: number;
+export declare const SLIDE_COUNT: number;
+export declare const TOUR_ATTR = "data-reticle-tour";
+export declare const TOUR_TARGET_ATTR = "data-reticle-tour-target";
+export declare const TOUR_PROMPT_ATTR = "data-reticle-tour-prompt";
+export declare const COPY_LABEL = "Copy";
+export declare const COPIED_LABEL = "Copied";
+export declare const COPY_MANUAL_LABEL = "Selected \u2014 press Ctrl/Cmd+C";
+export declare const COPY_FLASH_MS = 1600;
+export interface TourSlide {
+    readonly index: number;
+    readonly title: string;
+    readonly body: string;
+    readonly anchor: TourAnchor;
+    readonly tryIt?: string;
+    readonly prompts?: readonly TourPrompt[];
+}
+export declare const isInteractive: (slide: TourSlide) => boolean;
+export declare function tourSlides(): readonly TourSlide[];
+export declare function escapeHtml(text: string): string;
+export declare function withInlineCode(text: string): string;
+export declare function nextIndex(current: number, delta: number): number;
+export declare const isLastSlide: (index: number) => boolean;
+export interface TourRect {
+    readonly left: number;
+    readonly top: number;
+    readonly width: number;
+    readonly height: number;
+}
+export declare function holeRects(box: TourRect, viewWidth: number, viewHeight: number): readonly TourRect[];
+export declare function slideHtml(slide: TourSlide): string;
+export declare const TOUR_CSS: string;

package/dist/presenter/tour/tour-view.js

@@ -0,0 +1,192 @@
+import { TOUR_STEPS, TOUR_HUD_STEPS, TOUR_HANDOFF_PROMPTS, TourAnchor, } from '@reticlehq/core/tour';
+import { Z_TOUR } from '../chrome/layers.js';
+const ORDERED_STEPS = [...TOUR_STEPS.slice(0, 1), ...TOUR_HUD_STEPS];
+export const HANDOFF_INDEX = ORDERED_STEPS.length;
+export const SLIDE_COUNT = ORDERED_STEPS.length + 1;
+export const TOUR_ATTR = 'data-reticle-tour';
+export const TOUR_TARGET_ATTR = 'data-reticle-tour-target';
+export const TOUR_PROMPT_ATTR = 'data-reticle-tour-prompt';
+export const COPY_LABEL = 'Copy';
+export const COPIED_LABEL = 'Copied';
+export const COPY_MANUAL_LABEL = 'Selected — press Ctrl/Cmd+C';
+export const COPY_FLASH_MS = 1600;
+const stepSlide = (step, index) => ({
+    index,
+    title: step.title,
+    body: step.say,
+    anchor: step.anchor ?? TourAnchor.NONE,
+    ...(undefined === step.tryIt ? {} : { tryIt: step.tryIt }),
+});
+export const isInteractive = (slide) => undefined !== slide.tryIt;
+export function tourSlides() {
+    return [
+        ...ORDERED_STEPS.map(stepSlide),
+        {
+            index: HANDOFF_INDEX,
+            title: 'Get Started',
+            body: 'Paste one of these into Claude Code, Cursor, Codex, or whatever you use.',
+            anchor: TourAnchor.NONE,
+            prompts: TOUR_HANDOFF_PROMPTS,
+        },
+    ];
+}
+export function escapeHtml(text) {
+    return text
+        .split('&')
+        .join('&')
+        .split('<')
+        .join('&lt;')
+        .split('>')
+        .join('&gt;')
+        .split('"')
+        .join('&quot;');
+}
+export function withInlineCode(text) {
+    return escapeHtml(text).replace(/`([^`]+)`/g, '<code class="reticle-tour-code">$1</code>');
+}
+export function nextIndex(current, delta) {
+    const wanted = current + delta;
+    if (wanted < 0)
+        return 0;
+    if (wanted > SLIDE_COUNT - 1)
+        return SLIDE_COUNT - 1;
+    return wanted;
+}
+export const isLastSlide = (index) => index === SLIDE_COUNT - 1;
+export function holeRects(box, viewWidth, viewHeight) {
+    const left = Math.max(0, box.left);
+    const top = Math.max(0, box.top);
+    const right = Math.min(viewWidth, box.left + box.width);
+    const bottom = Math.min(viewHeight, box.top + box.height);
+    const candidates = [
+        { left: 0, top: 0, width: viewWidth, height: top },
+        { left: 0, top: bottom, width: viewWidth, height: viewHeight - bottom },
+        { left: 0, top, width: left, height: bottom - top },
+        { left: right, top, width: viewWidth - right, height: bottom - top },
+    ];
+    return candidates.filter((r) => r.width > 0 && r.height > 0);
+}
+export function slideHtml(slide) {
+    const dots = tourSlides()
+        .map((s) => `<span class="reticle-tour-dot${s.index === slide.index ? ' is-on' : ''}" aria-hidden="true"></span>`)
+        .join('');
+    const tryIt = undefined === slide.tryIt
+        ? ''
+        : `<p class="reticle-tour-try" ${TOUR_TARGET_ATTR}="try">${escapeHtml(slide.tryIt)}</p>`;
+    const prompt = undefined === slide.prompts
+        ? ''
+        : `<div class="reticle-tour-prompts">` +
+            slide.prompts
+                .map((p, i) => `<div class="reticle-tour-prompt" ${TOUR_PROMPT_ATTR}="${String(i)}">` +
+                `<span class="reticle-tour-prompt-label">${escapeHtml(p.label)}</span>` +
+                `<pre class="reticle-tour-prompt-text">${escapeHtml(p.text)}</pre>` +
+                `<button type="button" class="reticle-tour-copy" ${TOUR_TARGET_ATTR}="copy" ` +
+                `${TOUR_PROMPT_ATTR}="${String(i)}">${COPY_LABEL}</button></div>`)
+                .join('') +
+            `</div>`;
+    const back = 0 === slide.index
+        ? ''
+        : `<button type="button" class="reticle-tour-back" ${TOUR_TARGET_ATTR}="back">Back</button>`;
+    const forward = isLastSlide(slide.index)
+        ? `<button type="button" class="reticle-tour-next" ${TOUR_TARGET_ATTR}="done">Done</button>`
+        : `<button type="button" class="reticle-tour-next" ${TOUR_TARGET_ATTR}="next">Next</button>`;
+    return (`<div class="reticle-tour-card" role="dialog" aria-modal="false" aria-label="Reticle tour">` +
+        `<button type="button" class="reticle-tour-skip" ${TOUR_TARGET_ATTR}="skip" aria-label="Skip the tour">Skip</button>` +
+        `<p class="reticle-tour-step">Step ${String(slide.index + 1)} of ${String(SLIDE_COUNT)}</p>` +
+        `<h2 class="reticle-tour-title">${escapeHtml(slide.title)}</h2>` +
+        `<p class="reticle-tour-body">${withInlineCode(slide.body)}</p>` +
+        tryIt +
+        prompt +
+        `<div class="reticle-tour-foot"><div class="reticle-tour-dots">${dots}</div>` +
+        `<div class="reticle-tour-nav">${back}${forward}</div></div>` +
+        `</div>`);
+}
+export const TOUR_CSS = `
+[${TOUR_ATTR}]{position:fixed;inset:0;z-index:${String(Z_TOUR)};pointer-events:none;
+  font:13px/1.55 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
+[${TOUR_ATTR}] .reticle-tour-scrim{position:absolute;inset:0;background:rgba(6,8,14,.55);
+  backdrop-filter:blur(1.5px);pointer-events:auto;z-index:0;}
+/* Blocks the click everywhere the hole is not. Same job as the scrim, minus the one rectangle the
+   slide is inviting somebody to press. */
+[${TOUR_ATTR}] .reticle-tour-blocker{position:absolute;pointer-events:auto;z-index:0;}
+/* Ringed slides dim through the ring's own 9999px shadow, which leaves a hole over the thing being
+   pointed at. The scrim would cover that hole -- dimming the HUD the slide is ABOUT, and washing
+   the page twice (~80% rather than 55%).
+   It is cleared for the clicks too, and that half was missing. A scrim blocks only while it is
+   VISIBLY blocking: reported from the field on 3.1.0 by several users, one of whom removed the
+   plugin, because a cleared scrim went on eating every press on a page that looked lit and
+   reachable. An overlay that looks transparent and behaves opaque reads as the app being broken. */
+[${TOUR_ATTR}] .reticle-tour-scrim.is-clear{background:transparent;backdrop-filter:none;
+  pointer-events:none;}
+/* Above the ring, and the z-index is the whole point.
+   The ring is appended after the card, and both are positioned with an auto z-index, so the ring
+   painted on top of it -- and the ring's dimming IS a 9999px shadow, which therefore fell across the
+   card as well. On every ringed slide the card was washed at 55% and read as sitting BEHIND the page
+   it was drawn over. The ring must stay above the scrim and below the card; saying so explicitly is
+   the fix, because DOM order alone cannot express "between these two". */
+[${TOUR_ATTR}] .reticle-tour-card{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
+  width:min(430px,calc(100vw - 32px));box-sizing:border-box;pointer-events:auto;z-index:3;
+  background:#14161d;color:#e8eaf0;border:1px solid #2b303d;border-radius:14px;padding:20px 20px 16px;
+  box-shadow:0 24px 60px rgba(0,0,0,.5);}
+[${TOUR_ATTR}] .reticle-tour-skip{position:absolute;top:10px;right:12px;background:none;border:0;
+  color:#8a93a6;font:inherit;font-size:12px;cursor:pointer;padding:4px 6px;border-radius:6px;}
+[${TOUR_ATTR}] .reticle-tour-skip:hover{color:#e8eaf0;background:rgba(255,255,255,.06);}
+[${TOUR_ATTR}] .reticle-tour-step{margin:0 0 6px;font-size:11px;letter-spacing:.06em;
+  text-transform:uppercase;color:#7f8798;}
+[${TOUR_ATTR}] .reticle-tour-title{margin:0 0 8px;font-size:18px;line-height:1.25;font-weight:650;
+  color:#f2f4f8;}
+[${TOUR_ATTR}] .reticle-tour-body{margin:0 0 10px;color:#c9cedb;}
+/* A call named inside a sentence. Sets its own colour for the reason every other text class does:
+   an inherited one loses to any direct element selector in the host app. */
+[${TOUR_ATTR}] .reticle-tour-code{padding:1px 5px;border-radius:5px;background:#0c0e14;
+  border:1px solid #232834;color:#9fb6ff;
+  font:11.5px/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;}
+[${TOUR_ATTR}] .reticle-tour-try{margin:0 0 12px;padding:8px 10px;border-radius:8px;
+  background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.32);color:#c7cbff;
+  font-size:12.5px;font-weight:550;}
+[${TOUR_ATTR}] .reticle-tour-prompts{display:flex;flex-direction:column;gap:8px;margin:0 0 12px;}
+[${TOUR_ATTR}] .reticle-tour-prompt{display:grid;gap:6px;padding:9px 10px;border-radius:8px;
+  background:#0c0e14;border:1px solid #232834;
+  grid-template-columns:1fr auto;grid-template-areas:"label copy" "text text";align-items:center;}
+[${TOUR_ATTR}] .reticle-tour-prompt-label{grid-area:label;color:#8a93a6;font-size:11px;
+  letter-spacing:.05em;text-transform:uppercase;}
+[${TOUR_ATTR}] .reticle-tour-prompt-text{grid-area:text;width:100%;box-sizing:border-box;margin:0;
+  white-space:pre-wrap;overflow-wrap:anywhere;color:#c9cedb;
+  font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;}
+[${TOUR_ATTR}] .reticle-tour-copy{grid-area:copy;padding:5px 10px;border-radius:6px;
+  border:1px solid #2b303d;background:transparent;color:#c9cedb;font:inherit;font-size:11.5px;
+  font-weight:600;cursor:pointer;white-space:nowrap;}
+[${TOUR_ATTR}] .reticle-tour-copy:hover{background:rgba(255,255,255,.07);color:#fff;}
+/* The flash that tells somebody the click did something. Colour AND text: colour alone is not an
+   answer for the people who cannot see the difference. */
+[${TOUR_ATTR}] .reticle-tour-copy.is-done{background:#16a34a;border-color:#16a34a;color:#fff;}
+[${TOUR_ATTR}] .reticle-tour-copy.is-manual{background:#b45309;border-color:#b45309;color:#fff;}
+[${TOUR_ATTR}] .reticle-tour-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;}
+[${TOUR_ATTR}] .reticle-tour-dots{display:flex;gap:6px;}
+[${TOUR_ATTR}] .reticle-tour-dot{width:6px;height:6px;border-radius:50%;background:#333a49;}
+[${TOUR_ATTR}] .reticle-tour-dot.is-on{background:#6366f1;}
+[${TOUR_ATTR}] .reticle-tour-nav{display:flex;gap:8px;}
+[${TOUR_ATTR}] .reticle-tour-back,[${TOUR_ATTR}] .reticle-tour-next{padding:8px 14px;border-radius:8px;
+  font:inherit;font-weight:600;cursor:pointer;border:1px solid #2b303d;background:transparent;color:#c9cedb;}
+[${TOUR_ATTR}] .reticle-tour-next{background:#6366f1;border-color:#6366f1;color:#fff;}
+[${TOUR_ATTR}] .reticle-tour-next:hover{filter:brightness(1.08);}
+[${TOUR_ATTR}] .reticle-tour-back:hover{background:rgba(255,255,255,.06);color:#e8eaf0;}
+[${TOUR_ATTR}] .reticle-tour-ring{position:absolute;border-radius:14px;pointer-events:none;z-index:1;
+  box-shadow:0 0 0 3px #6366f1,0 0 0 9999px rgba(6,8,14,.55);transition:all .25s ease;}
+/* A ring somebody is being asked to press, rather than to look at: it pulses, so the invitation in
+   the prose has something on the page agreeing with it. */
+[${TOUR_ATTR}] .reticle-tour-ring.is-live{animation:reticle-tour-pulse 1.8s ease-in-out infinite;}
+@keyframes reticle-tour-pulse{
+  0%,100%{box-shadow:0 0 0 3px #6366f1,0 0 0 9999px rgba(6,8,14,.55);}
+  50%{box-shadow:0 0 0 6px rgba(99,102,241,.55),0 0 0 9999px rgba(6,8,14,.55);}
+}
+/* A REGION, not a target. The spotlight above cuts a hole in the dimming, which is right for
+   something small and wrong for the app: the hole becomes the whole viewport, the dimming
+   disappears, and the card is left competing with a fully lit page while the ring edges sit off at
+   the margins pointing at nothing. An outline says "all of this" without turning the lights on. */
+[${TOUR_ATTR}] .reticle-tour-ring.is-region{box-shadow:none;border:2px dashed #7c83f5;
+  background:rgba(99,102,241,.06);}
+@media (prefers-reduced-motion:reduce){
+  [${TOUR_ATTR}] .reticle-tour-ring{transition:none;}
+}
+`;

package/dist/presenter/tour/tour.d.ts

@@ -0,0 +1,25 @@
+import { isLastSlide } from './tour-view.js';
+export declare const TOUR_SEEN_KEY_PREFIX = "reticle.tour.seen.";
+export declare const tourSeenKey: (projectId: string) => string;
+export interface TourStorage {
+    getItem: (key: string) => string | null;
+    setItem: (key: string, value: string) => void;
+}
+export interface TourDeps {
+    readonly document: Document;
+    readonly storage: TourStorage | undefined;
+    readonly projectId: string;
+    readonly isDriving: () => boolean;
+    readonly search?: string;
+    readonly copy?: (text: string) => Promise<boolean> | boolean;
+    readonly select?: (element: Element) => void;
+}
+export interface TourHandle {
+    readonly destroy: () => void;
+    readonly isOpen: () => boolean;
+}
+export declare function openedByReticle(search: string | undefined): boolean;
+export declare function tourAlreadySeen(storage: TourStorage | undefined, projectId: string): boolean;
+export declare function mountTour(deps: TourDeps): TourHandle | undefined;
+export { isLastSlide };
+export declare function safeLocalStorage(): TourStorage | undefined;