@reticlehq/browser 2.8.0 → 2.9.0

package/dist/presenter/presenter-report.js

@@ -0,0 +1,217 @@
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIconHtml } from './presenter-icons.js';
+import { HUD_SURFACE_CLASS } from './presenter-hud-chrome.js';
+import { REPORT_PANEL_ATTR, REPORT_ATTR, REPORT_CLOSE_ATTR } from './presenter-config.js';
+import { REPORT_LINKS, REPORT_TEXT, buildLinkedInShareUrl, buildReferralText, buildShareText, buildXShareUrl, compactDuration, compactNumber, } from './presenter-report-copy.js';
+/**
+ * The impact report: what Reticle has actually done for this user.
+ *
+ * Reads the local record only - the panel is a view over `.reticle/impact.json`, pushed by the
+ * daemon, never fetched from us. Two scopes (this project, this machine) behind one toggle.
+ */
+const SCOPE_ATTR = 'data-reticle-report-scope';
+const SHARE_X_ATTR = 'data-reticle-share-x';
+const SHARE_IN_ATTR = 'data-reticle-share-in';
+const SHARE_COPY_ATTR = 'data-reticle-share-copy';
+const REFER_ATTR = 'data-reticle-refer';
+const COPIED_FLASH_MS = 1600;
+export function reportPanelHtml() {
+    const close = hiIconHtml(PresenterIcon.REMOVE, PRESENTER_ICON_SIZE.MIN);
+    return `<div ${REPORT_PANEL_ATTR} class="reticle-report ${HUD_SURFACE_CLASS}" role="dialog" aria-label="Reticle impact" aria-hidden="true">
+    <div class="reticle-report-inner">
+      <div class="reticle-report-head">
+        <span class="reticle-report-title">${REPORT_TEXT.TITLE}</span>
+        <button type="button" ${SCOPE_ATTR} class="reticle-report-scope" aria-pressed="false">${REPORT_TEXT.PROJECT}</button>
+        <button type="button" ${REPORT_CLOSE_ATTR} class="reticle-report-close" title="Close" aria-label="Close impact">${close}</button>
+      </div>
+      <div class="reticle-report-body" data-reticle-report-body></div>
+      <div class="reticle-report-foot">
+        <button type="button" ${SHARE_X_ATTR} class="reticle-report-share">Post on X</button>
+        <button type="button" ${SHARE_IN_ATTR} class="reticle-report-share">LinkedIn</button>
+        <button type="button" ${SHARE_COPY_ATTR} class="reticle-report-share">${REPORT_TEXT.COPY}</button>
+        <button type="button" ${REFER_ATTR} class="reticle-report-share reticle-report-refer">${REPORT_TEXT.REFER}</button>
+      </div>
+      <div class="reticle-report-links">
+        <a href="${REPORT_LINKS.DOCS}" target="_blank" rel="noreferrer noopener">Docs</a>
+        <a href="${REPORT_LINKS.GITHUB}" target="_blank" rel="noreferrer noopener">GitHub</a>
+        <a href="${REPORT_LINKS.SITE}" target="_blank" rel="noreferrer noopener">reticle.sh</a>
+        <a href="${REPORT_LINKS.DISCORD}" target="_blank" rel="noreferrer noopener">Discord</a>
+      </div>
+    </div>
+  </div>`;
+}
+/** A stat card: the number, what it is, and - for an estimate - what it is measured against. */
+function card(value, label, basis) {
+    const tag = basis === undefined
+        ? ''
+        : `<span class="reticle-report-basis" title="${basis}">${REPORT_TEXT.ESTIMATE_TAG}</span>`;
+    return `<div class="reticle-report-card"><span class="reticle-report-value">${value}</span><span class="reticle-report-label">${label}${tag}</span></div>`;
+}
+/**
+ * A 30-day bar chart of verdicts, as inline spans.
+ *
+ * Bars rather than a line: a day with no verdicts is a real fact about the week, and a line chart
+ * interpolates straight through it.
+ */
+function chart(scope) {
+    const days = scope.days.slice(-30);
+    if (0 === days.length)
+        return '';
+    const peak = Math.max(1, ...days.map((d) => d.counts.verdicts));
+    const bars = days
+        .map((d) => {
+        const pct = Math.max(4, Math.round((d.counts.verdicts / peak) * 100));
+        const title = `${d.date}: ${String(d.counts.verdicts)} verdicts, ${String(d.counts.failed)} defects`;
+        const hot = d.counts.failed > 0 ? ' data-hot="1"' : '';
+        return `<span class="reticle-report-bar" style="height:${String(pct)}%" title="${title}"${hot}></span>`;
+    })
+        .join('');
+    return `<div class="reticle-report-chart-wrap"><span class="reticle-report-section">${REPORT_TEXT.CHART}</span><div class="reticle-report-chart">${bars}</div></div>`;
+}
+export function reportBodyHtml(scope) {
+    const c = scope.counts;
+    if (0 === c.calls)
+        return `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`;
+    const streak = scope.records.streakDays > 0
+        ? `<span class="reticle-report-streak" title="Consecutive days with at least one verdict">🔥 ${String(scope.records.streakDays)} <span class="reticle-report-streak-label">${REPORT_TEXT.STREAK}</span></span>`
+        : '';
+    const hero = `<div class="reticle-report-hero"><span class="reticle-report-hero-value">${compactNumber(c.failed)}</span><span class="reticle-report-hero-label">${REPORT_TEXT.HERO_DEFECTS}</span></div>`;
+    const verdicts = `<div class="reticle-report-verdicts" title="${REPORT_TEXT.UNKNOWN_HELP}">
+    <span class="reticle-report-verdict" data-kind="pass">${compactNumber(c.passed)} ${REPORT_TEXT.PASSED}</span>
+    <span class="reticle-report-verdict" data-kind="fail">${compactNumber(c.failed)} ${REPORT_TEXT.FAILED}</span>
+    <span class="reticle-report-verdict" data-kind="unknown">${compactNumber(c.unknown)} ${REPORT_TEXT.UNKNOWN}</span>
+  </div>`;
+    const cards = [
+        card(compactNumber(c.verdicts), REPORT_TEXT.VERDICTS),
+        card(compactNumber(c.calls), REPORT_TEXT.CALLS),
+        card(compactDuration(c.drivingMs), REPORT_TEXT.DRIVING),
+        card(compactNumber(c.sessions), REPORT_TEXT.SESSIONS),
+        card(compactDuration(scope.records.longestRunMs), REPORT_TEXT.LONGEST),
+        card(compactNumber(c.tokensReturned), REPORT_TEXT.TOKENS),
+        card(compactNumber(scope.savings.tokens.value), REPORT_TEXT.SAVED_TOKENS, scope.savings.tokens.basis),
+        card(compactDuration(scope.savings.minutes.value * 60_000), REPORT_TEXT.SAVED_MINUTES, scope.savings.minutes.basis),
+    ].join('');
+    return `${streak}${hero}${verdicts}<div class="reticle-report-grid">${cards}</div>${chart(scope)}`;
+}
+/** The report panel controller: scope toggle, live repaint, share + referral actions. */
+export class PresenterReport {
+    #panel;
+    #body;
+    #root;
+    #snapshot;
+    #global = false;
+    #host;
+    constructor(host = {}) {
+        this.#host = host;
+    }
+    mount(root) {
+        this.#root = root;
+        this.#panel = root.querySelector(`[${REPORT_PANEL_ATTR}]`) ?? undefined;
+        this.#body = root.querySelector('[data-reticle-report-body]') ?? undefined;
+        root.querySelector(`[${REPORT_CLOSE_ATTR}]`)?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.close();
+        });
+        const scopeBtn = root.querySelector(`[${SCOPE_ATTR}]`);
+        scopeBtn?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.#global = !this.#global;
+            scopeBtn.setAttribute('aria-pressed', this.#global ? 'true' : 'false');
+            scopeBtn.textContent = this.#global ? REPORT_TEXT.GLOBAL : REPORT_TEXT.PROJECT;
+            this.#paint();
+        });
+        root.querySelector(`[${SHARE_X_ATTR}]`)?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            this.#openShare(buildXShareUrl(this.shareText()));
+        });
+        root.querySelector(`[${SHARE_IN_ATTR}]`)?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            // LinkedIn ignores every text parameter, so the caption goes to the clipboard first and the
+            // composer opens on the link - the only route that needs no posting permission.
+            void this.#copy(this.shareText());
+            this.#openShare(buildLinkedInShareUrl());
+        });
+        root.querySelector(`[${SHARE_COPY_ATTR}]`)?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            void this.#copy(this.shareText(), e.currentTarget);
+        });
+        root.querySelector(`[${REFER_ATTR}]`)?.addEventListener('click', (e) => {
+            e.stopPropagation();
+            void this.#copy(buildReferralText(), e.currentTarget);
+        });
+    }
+    /** The record arrived from the daemon. Repaint only if the panel is on screen. */
+    setSnapshot(snapshot) {
+        this.#snapshot = snapshot;
+        if (this.isOpen())
+            this.#paint();
+    }
+    snapshot() {
+        return this.#snapshot;
+    }
+    isOpen() {
+        return '1' === this.#root?.getAttribute(REPORT_ATTR);
+    }
+    open() {
+        if (this.#root === undefined)
+            return;
+        this.#host.onBeforeOpen?.();
+        this.#paint();
+        this.#root.setAttribute(REPORT_ATTR, '1');
+        this.#panel?.setAttribute('aria-hidden', 'false');
+    }
+    close() {
+        this.#root?.setAttribute(REPORT_ATTR, '0');
+        this.#panel?.setAttribute('aria-hidden', 'true');
+    }
+    toggle() {
+        if (this.isOpen())
+            this.close();
+        else
+            this.open();
+    }
+    contains(node) {
+        return true === this.#panel?.contains(node);
+    }
+    /** The post text for whichever scope is showing. */
+    shareText() {
+        const snap = this.#snapshot;
+        if (snap === undefined)
+            return buildReferralText();
+        return this.#global
+            ? buildShareText(snap.global)
+            : buildShareText(snap.project, snap.projectName);
+    }
+    #scope() {
+        const snap = this.#snapshot;
+        if (snap === undefined)
+            return undefined;
+        return this.#global ? snap.global : snap.project;
+    }
+    #paint() {
+        const scope = this.#scope();
+        if (this.#body === undefined)
+            return;
+        this.#body.innerHTML =
+            scope === undefined
+                ? `<p class="reticle-report-empty">${REPORT_TEXT.EMPTY}</p>`
+                : reportBodyHtml(scope);
+    }
+    #openShare(url) {
+        window.open(url, '_blank', 'noopener,noreferrer');
+    }
+    async #copy(text, button) {
+        try {
+            await navigator.clipboard?.writeText(text);
+        }
+        catch {
+            // A blocked clipboard is not worth an error dialog over; the text is on screen either way.
+        }
+        if (button instanceof HTMLElement) {
+            const original = button.textContent ?? '';
+            button.textContent = REPORT_TEXT.COPIED;
+            window.setTimeout(() => {
+                button.textContent = original;
+            }, COPIED_FLASH_MS);
+        }
+    }
+}

package/dist/presenter/presenter-run-state.d.ts

@@ -24,7 +24,7 @@ export interface PresenterRunState {
         result?: LogResult;
     }[];
 }
-/** Everything the controller hands the builder — the live fields a run state is computed from. */
+/** Everything the controller hands the builder - the live fields a run state is computed from. */
 interface RunStateInput {
     sessionId: string;
     state: SessionState;

package/dist/presenter/presenter-settings-styles.d.ts

@@ -0,0 +1,2 @@
+/** Compact settings card - dock-anchored above the HUD pill. */
+export declare const SETTINGS_CSS: string;

package/dist/presenter/presenter-settings-styles.js

@@ -0,0 +1,153 @@
+import { SETTINGS_PANEL_ATTR, SETTINGS_ATTR, DOCK_ATTR, DOCK_ALIGN_ATTR, SETTINGS_PLACEMENT_ATTR, } from './presenter-config.js';
+import { HUD_DROP_SHADOW, HUD_SURFACE_CLASS, HUD_SURFACE_PAINT } from './presenter-hud-chrome.js';
+/** Compact settings card - dock-anchored above the HUD pill. */
+export const SETTINGS_CSS = `
+[${'data-reticle-overlay'}][${SETTINGS_ATTR}="1"] [${'data-reticle-chat-panel'}]{
+  display:none !important;visibility:hidden !important;pointer-events:none !important;}
+[${SETTINGS_PANEL_ATTR}]{
+  position:absolute;right:0;left:auto;top:auto;bottom:calc(100% + 12px);z-index:30;
+  box-sizing:border-box;display:flex;flex-direction:column;width:272px;min-height:0;
+  max-width:min(272px,calc(100vw - 16px));
+  max-height:min(var(--reticle-settings-max-h,78vh),calc(100vh - 96px));
+  padding:0;border:none;border-radius:16px;overflow:hidden;
+  box-shadow:${HUD_DROP_SHADOW};
+  color:var(--reticle-fg);font-size:13px;line-height:1.35;
+  opacity:0;pointer-events:none;visibility:hidden;touch-action:manipulation;
+  transform:translate3d(0,6px,0) scale(.98);
+  transition:opacity .14s ease,transform .18s cubic-bezier(.22,1,.36,1),visibility .14s;
+  contain:none;isolation:isolate;${HUD_SURFACE_PAINT}}
+[${DOCK_ATTR}][${SETTINGS_PLACEMENT_ATTR}="below"] [${SETTINGS_PANEL_ATTR}]{
+  bottom:auto;top:calc(100% + 12px);}
+[${DOCK_ATTR}][${DOCK_ALIGN_ATTR}="start"] [${SETTINGS_PANEL_ATTR}]{
+  right:auto;left:0;}
+[${DOCK_ATTR}][${SETTINGS_PLACEMENT_ATTR}="below"] [${SETTINGS_PANEL_ATTR}].${HUD_SURFACE_CLASS}::after{
+  top:auto;bottom:100%;margin-top:0;margin-bottom:-4px;box-shadow:-1px -1px 0 0 rgba(255,255,255,.08);}
+[${DOCK_ATTR}][${DOCK_ALIGN_ATTR}="start"] [${SETTINGS_PANEL_ATTR}].${HUD_SURFACE_CLASS}::after{
+  right:auto;left:14px;}
+[${'data-reticle-overlay'}][${SETTINGS_ATTR}="1"] [${SETTINGS_PANEL_ATTR}]{
+  opacity:1;pointer-events:auto;visibility:visible;transform:translate3d(0,0,0) scale(1);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-inner{
+  position:relative;z-index:2;display:grid;grid-template-rows:auto minmax(0,1fr) auto;
+  flex:1 1 auto;min-height:0;max-height:100%;overflow:hidden;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-head{
+  display:flex;flex-shrink:0;align-items:center;justify-content:space-between;gap:8px;
+  padding:12px 14px 8px;border-bottom:1px solid rgba(255,255,255,.06);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-title{
+  font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);}
+[${SETTINGS_PANEL_ATTR}].${HUD_SURFACE_CLASS}::after{
+  content:"";position:absolute;top:100%;right:14px;width:8px;height:8px;margin-top:-4px;
+  background:#000;transform:rotate(45deg);box-shadow:1px 1px 0 0 rgba(255,255,255,.08);z-index:0;pointer-events:none;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-close{
+  position:relative;top:auto;right:auto;z-index:1;
+  display:inline-flex;align-items:center;justify-content:center;
+  width:24px;height:24px;padding:0;border:none;border-radius:999px;cursor:pointer;
+  background:rgba(255,255,255,.06);color:var(--reticle-muted);line-height:0;
+  transition:background .15s,color .15s,transform .1s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-close:hover{background:rgba(255,255,255,.12);color:var(--reticle-fg);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-close:active{transform:scale(.94);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-close:focus-visible{outline:2px solid rgba(59,130,246,.65);outline-offset:1px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-body{
+  min-height:0;padding:6px 0 4px;overflow-x:hidden;overflow-y:auto;
+  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
+  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
+  background:linear-gradient(180deg,#0a0a0e 0%,#000 100%);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-body::-webkit-scrollbar{width:8px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-body::-webkit-scrollbar-thumb{
+  background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:content-box;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-row{
+  display:flex;align-items:center;justify-content:space-between;gap:12px;
+  padding:8px 14px;min-height:30px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-label{
+  display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.62);font-size:13px;font-weight:500;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-help{
+  display:inline-flex;align-items:center;justify-content:center;
+  width:14px;height:14px;border:none;border-radius:999px;padding:0;cursor:help;
+  background:transparent;color:rgba(255,255,255,.35);line-height:0;flex:none;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-help:hover{color:rgba(255,255,255,.75);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-help:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:1px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-cycle{
+  display:inline-flex;align-items:center;gap:8px;border:none;border-radius:8px;cursor:pointer;
+  background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:12px;font-weight:600;
+  padding:5px 8px 5px 10px;transition:background .15s,transform .1s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-cycle:hover{background:rgba(255,255,255,.12);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-cycle:active{transform:scale(.97);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-cycle:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:1px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-dots{display:inline-flex;flex-direction:column;gap:2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-dot{
+  width:3px;height:3px;border-radius:999px;background:rgba(255,255,255,.22);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-dot[data-on="1"]{background:var(--reticle-accent);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-toggle{
+  position:relative;width:28px;height:18px;border:none;border-radius:999px;cursor:pointer;padding:0;flex:none;
+  background:rgba(255,255,255,.16);transition:background .15s ease,box-shadow .15s ease;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-toggle[data-on="1"]{background:var(--reticle-accent);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-toggle::after{
+  content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+  background:#fafafa;box-shadow:0 1px 2px rgba(0,0,0,.35);transition:transform .15s ease;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-toggle[data-on="1"]::after{transform:translateX(10px);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-toggle:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-row[data-disabled="1"]{opacity:.45;pointer-events:none;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-section{
+  padding:10px 14px 6px;color:rgba(255,255,255,.38);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-swatches{
+  display:flex;gap:8px;flex-wrap:wrap;padding:0 14px 10px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-swatch{
+  width:24px;height:24px;border-radius:999px;padding:0;cursor:pointer;
+  border:2px solid transparent;background-clip:padding-box;
+  box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);transition:transform .12s,border-color .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-swatch:hover{transform:scale(1.06);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-swatch[data-on="1"]{
+  border-color:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.35);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-swatch:focus-visible{outline:2px solid rgba(59,130,246,.65);outline-offset:2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-checkrow{
+  display:flex;align-items:center;gap:10px;padding:7px 14px;color:rgba(255,255,255,.8);font-size:13px;
+  cursor:pointer;user-select:none;margin:0;transition:background .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-checkrow:hover{background:rgba(255,255,255,.03);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-check{
+  width:16px;height:16px;border-radius:5px;border:1px solid rgba(255,255,255,.22);
+  background:rgba(255,255,255,.04);display:inline-flex;align-items:center;justify-content:center;
+  color:transparent;font-size:10px;line-height:1;flex:none;transition:background .12s,border-color .12s,color .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-check[data-on="1"]{
+  background:#fafafa;border-color:#fafafa;color:#111;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-check:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-foot{
+  flex-shrink:0;margin-top:2px;border-top:1px solid rgba(255,255,255,.08);
+  display:flex;flex-direction:column;gap:0;background:#000;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-reset{
+  width:100%;display:flex;align-items:center;justify-content:center;gap:6px;
+  border:none;background:rgba(255,255,255,.04);color:rgba(255,255,255,.78);font:inherit;font-size:12px;font-weight:600;
+  padding:10px 14px;cursor:pointer;text-align:center;transition:background .12s,color .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-reset:hover{background:rgba(255,255,255,.08);color:#fff;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-reset:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:-2px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-link{
+  width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
+  border:none;background:transparent;color:rgba(255,255,255,.82);font:inherit;font-size:13px;
+  padding:11px 14px;cursor:pointer;text-align:left;transition:background .12s,color .12s;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-link-caret{display:inline-flex;align-items:center;flex:none;opacity:.55;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-link:hover{background:rgba(255,255,255,.04);color:#fff;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-link:focus-visible{outline:2px solid rgba(59,130,246,.55);outline-offset:-2px;}
+[${'data-reticle-overlay'}][${SETTINGS_ATTR}="1"] [${'data-reticle-hud'}] .reticle-tb-tip{
+  opacity:0;visibility:hidden;transition-delay:0s;}
+/* The dock's accent IS the theme's active colour, published as --reticle-accent on the overlay by
+   applyPresenterSettings. It used to be a seventh independent picker with its own attribute. */
+[${'data-reticle-dock'}]{--reticle-accent-soft:color-mix(in srgb,var(--reticle-accent) 18%,transparent);}
+/* One chip per theme: three bands (active, idle, ended) over the theme's name. */
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-themes{
+  display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:8px;padding:4px 14px 12px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-theme{
+  display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;
+  border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.03);
+  cursor:pointer;transition:border-color .15s ease,background .15s ease;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-theme:hover{background:rgba(255,255,255,.07);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-theme[data-on="1"]{
+  border-color:#fff;background:rgba(255,255,255,.1);}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-theme-band{display:block;height:6px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-theme-band:first-of-type{height:10px;}
+[${SETTINGS_PANEL_ATTR}] .reticle-settings-theme-name{
+  display:block;padding:5px 6px 6px;color:rgba(255,255,255,.78);font-size:11px;text-align:center;}
+[${'data-reticle-blocker'}]{
+  position:fixed;inset:0;z-index:1;background:rgba(0,0,0,.16);pointer-events:auto;}
+[${'data-reticle-overlay'}][data-reticle-block="0"] [${'data-reticle-blocker'}]{
+  display:none;pointer-events:none;}
+[${'data-reticle-overlay'}][data-reticle-hidden="1"] [${DOCK_ATTR}],
+[${'data-reticle-overlay'}][data-reticle-hidden="1"] [${SETTINGS_PANEL_ATTR}]{display:none !important;}
+`;

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

@@ -0,0 +1,82 @@
+import { SETTINGS_CSS } from './presenter-settings-styles.js';
+export { SETTINGS_CSS };
+/** How much detail lands in copied/exported run state. */
+export declare const OutputDetail: {
+    readonly MINIMAL: "minimal";
+    readonly STANDARD: "standard";
+    readonly VERBOSE: "verbose";
+};
+export type OutputDetail = (typeof OutputDetail)[keyof typeof OutputDetail];
+/**
+ * Status themes: ONE choice, three colours.
+ *
+ * This was four separate pickers - a chrome accent plus a swatch row per state - which is 28
+ * decisions to land on a set that works together. A theme is a combination we have already checked
+ * reads as a progression (working -> waiting -> done) and against a dark app, so the choice is
+ * "which mood", not "which four hex values".
+ */
+export declare const StatusThemeId: {
+    readonly SIGNAL: "signal";
+    readonly TRAFFIC: "traffic";
+    readonly MONO: "mono";
+    readonly NEON: "neon";
+    readonly EMBER: "ember";
+};
+export type StatusThemeId = (typeof StatusThemeId)[keyof typeof StatusThemeId];
+export interface StatusTheme {
+    id: StatusThemeId;
+    label: string;
+    active: string;
+    idle: string;
+    ended: string;
+}
+export declare const STATUS_THEMES: readonly StatusTheme[];
+export declare function statusTheme(id: StatusThemeId): StatusTheme;
+export interface PresenterSettings {
+    outputDetail: OutputDetail;
+    /**
+     * The colours the HUD signals session state with - the dot, the panel wash, the page glow, the
+     * FAB halo and the annotation marks all read from whichever one is current. One choice, because
+     * the three have to work as a set and against the user's own app.
+     */
+    statusThemeId: StatusThemeId;
+    /** The page-edge glow. Off leaves every other signal (dot, panel, FAB) in place. */
+    ambientGlow: boolean;
+    reactComponents: boolean;
+    hideUntilRestart: boolean;
+    clearOnCopy: boolean;
+    blockPageInteractions: boolean;
+    showTally: boolean;
+    showTimestamps: boolean;
+    autoOpenChat: boolean;
+    reduceMotion: boolean;
+}
+export declare function getPresenterSettings(): PresenterSettings;
+export declare function loadPresenterSettings(): PresenterSettings;
+/** Settings panel markup - anchored above the gear in the toolbar. */
+export declare function settingsPanelHtml(): string;
+export interface SettingsHost {
+    onHideUntilRestart?: () => void;
+    onSettingsChange?: (settings: PresenterSettings) => void;
+    onBeforeOpen?: () => void;
+}
+/** Apply persisted settings onto the overlay + dock. */
+export declare function applyPresenterSettings(root: HTMLElement, settings: PresenterSettings): void;
+/**
+ * Toggle the full-page blocker. Only active while annotate mode is live AND the user opted in -
+ * never on a collapsed FAB, so real hover/click on the host app still works.
+ */
+export declare function syncPageBlocker(root: HTMLElement, settings: PresenterSettings, annotateLive: boolean): void;
+/** Blocker node - sits under Reticle UI, above the host page. */
+export declare function blockerHtml(): string;
+export declare class PresenterSettingsPanel {
+    #private;
+    constructor(host?: SettingsHost);
+    contains(node: Node): boolean;
+    mount(root: HTMLElement): void;
+    teardown(): void;
+    isOpen(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+}