@reticlehq/browser 2.14.0 → 3.2.0

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

@@ -0,0 +1,99 @@
+import { HUD_DROP_SHADOW, HUD_SURFACE_PAINT } from './chrome/presenter-hud-chrome.js';
+const AVATAR = 20;
+const AVATAR_LG = 28;
+export const ACCOUNT_CSS = `
+/* The control establishes its own stacking context, and a high one.
+   Its menu is absolutely positioned inside a panel whose other children (the log well, the act strip)
+   are themselves positioned with their own z-index, so a z-index on the MENU alone was being compared
+   inside the wrong context and lost to a sibling with a lower number. Raising it here, on the thing
+   that contains the menu, is what actually puts the menu above them. 9 clears the workspace menu's 8,
+   which is the highest in-panel chrome. */
+/* The header row has to out-stack the log well, or nothing inside it can.
+   .reticle-chat-head is position:relative with z-index:2, so it IS a stacking context and the number
+   below is scoped inside it -- while the log well is a SIBLING, also at z-index:2, and later in DOM
+   order. Equal z, later sibling wins, so the well painted over the whole header and took the open
+   menu with it. The menu measured correctly and was invisible, which is the shape of bug that reads
+   as "the dropdown does not work". Raising the header is what lets its children escape; the two only
+   overlap while a menu is open, so nothing else moves. */
+.reticle-chat-head{z-index:3;}
+.reticle-account{position:relative;z-index:9;display:inline-flex;align-items:center;gap:6px;flex:none;}
+.reticle-account-avatar{
+  display:inline-flex;align-items:center;justify-content:center;
+  width:${String(AVATAR)}px;height:${String(AVATAR)}px;border-radius:999px;
+  font-size:9px;font-weight:600;letter-spacing:.02em;
+  background:rgba(255,255,255,.12);color:rgba(255,255,255,.92);user-select:none;}
+.reticle-account-avatar--lg{
+  width:${String(AVATAR_LG)}px;height:${String(AVATAR_LG)}px;font-size:11px;}
+
+/* The trigger is the avatar plus a hit area, never a second visual element: an avatar that looks
+   like a button reads as an action, and this one opens a menu about a state. */
+.reticle-account-trigger{
+  display:inline-flex;align-items:center;justify-content:center;
+  padding:0;border:none;background:transparent;cursor:pointer;line-height:0;border-radius:999px;
+  transition:box-shadow .12s,opacity .12s;}
+.reticle-account-trigger:hover{opacity:.85;}
+.reticle-account-trigger:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(255,255,255,.35);}
+.reticle-account-trigger[aria-expanded="true"]{box-shadow:0 0 0 2px rgba(255,255,255,.28);}
+
+.reticle-account-signin{
+  border:none;border-radius:6px;padding:2px 9px;cursor:pointer;font:inherit;font-size:10.5px;
+  background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);transition:background .12s,color .12s;}
+.reticle-account-signin:hover{background:rgba(255,255,255,.12);color:#fff;}
+
+/* Anchored to the control and opening DOWNWARD.
+   Not upward, which is what it looked like it wanted: all three surfaces mount this near the TOP of
+   a panel whose own overflow is hidden for its rounded corners, so a menu opening upward is laid
+   out correctly and then clipped away entirely -- present to the probe, invisible to the eye. Panels
+   grow downward and have the height, so down is the direction that stays inside the box. */
+.reticle-account-menu{
+  position:absolute;right:0;top:calc(100% + 8px);z-index:6;
+  min-width:212px;max-width:280px;padding:10px;box-sizing:border-box;
+  display:flex;flex-direction:column;gap:8px;
+  border-radius:10px;
+  /* The HUD's own surface tokens, not a colour invented here. A menu with its own near-black is a
+     second design language in the same panel, and a translucent one lets the panel's empty-state text
+     read straight through the rows -- which is what the first version did. */
+  ${HUD_SURFACE_PAINT}
+  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),${HUD_DROP_SHADOW};
+  font-size:11px;color:rgba(255,255,255,.78);text-align:left;}
+.reticle-account-menu[hidden]{display:none;}
+
+.reticle-account-head{display:flex;align-items:center;gap:8px;min-width:0;}
+.reticle-account-who{display:flex;flex-direction:column;min-width:0;gap:1px;}
+.reticle-account-org{
+  font-size:11.5px;font-weight:600;color:rgba(255,255,255,.95);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+.reticle-account-email{
+  font-size:10.5px;color:rgba(255,255,255,.55);
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
+
+.reticle-account-rows{
+  display:flex;flex-direction:column;gap:4px;
+  padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
+.reticle-account-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
+.reticle-account-k{color:rgba(255,255,255,.5);flex:none;}
+.reticle-account-v{
+  color:rgba(255,255,255,.88);min-width:0;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  font-variant-numeric:tabular-nums;}
+
+.reticle-account-actions{
+  display:flex;flex-direction:column;gap:2px;
+  padding-top:8px;border-top:1px solid rgba(255,255,255,.08);}
+.reticle-account-action{
+  display:flex;align-items:center;gap:6px;width:100%;box-sizing:border-box;
+  padding:5px 6px;border:none;border-radius:6px;cursor:pointer;
+  font:inherit;font-size:11px;text-align:left;text-decoration:none;
+  background:transparent;color:rgba(255,255,255,.8);transition:background .12s,color .12s;}
+.reticle-account-action:hover{background:rgba(255,255,255,.08);color:#fff;}
+.reticle-account-action:focus-visible{outline:none;background:rgba(255,255,255,.1);color:#fff;}
+/* The unlinked hint is a sentence, not a verb: it wraps rather than truncating, because a clipped
+   instruction is worse than a tall menu. */
+.reticle-account-action--hint{
+  color:rgba(255,255,255,.5);font-size:10.5px;line-height:1.35;white-space:normal;cursor:pointer;}
+
+.reticle-account-dashboard{
+  display:inline-flex;align-items:center;justify-content:center;
+  border:none;background:transparent;color:rgba(255,255,255,.6);cursor:pointer;line-height:0;padding:2px;}
+.reticle-account-dashboard:hover{color:#fff;}
+`;

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

@@ -0,0 +1,40 @@
+import type { AccountState } from '@reticlehq/core';
+export declare const ACCOUNT_ROOT_ATTR = "data-reticle-account";
+export declare const ACCOUNT_SIGNIN_ATTR = "data-reticle-account-signin";
+export declare const SYNC_BTN_ATTR = "data-reticle-sync-now";
+export declare const ACCOUNT_TRIGGER_ATTR = "data-reticle-account-trigger";
+export declare const ACCOUNT_MENU_ATTR = "data-reticle-account-menu";
+export declare const ACCOUNT_SIGNOUT_ATTR = "data-reticle-account-signout";
+export declare const ACCOUNT_TEXT: {
+    readonly SIGNED_OUT: "Sign in";
+    readonly SIGNIN_TITLE: "Run `reticle login` in your terminal — click to copy the command";
+    readonly SIGNIN_COMMAND: "reticle login";
+    readonly DASHBOARD_TITLE: "Open this project on the dashboard";
+    readonly SYNC_TITLE: "Push to the dashboard now, instead of waiting for the next sync";
+    readonly COPIED: "Copied";
+    readonly AVATAR_FALLBACK: "•";
+    readonly MENU_LABEL: "Reticle account";
+    readonly TRIGGER_TITLE: "Your Reticle account";
+    readonly SIGNED_IN_AS: "Signed in";
+    readonly DASHBOARD_ACTION: "Open dashboard";
+    readonly LINK_HINT: "Not linked — run `reticle link` to keep a record on the dashboard";
+    readonly LINK_COMMAND: "reticle link";
+    readonly SIGNOUT_ACTION: "Sign out";
+    readonly SIGNOUT_TITLE: "Run `reticle logout` in your terminal — click to copy the command";
+    readonly SIGNOUT_COMMAND: "reticle logout";
+    readonly PROJECT_LABEL: "Project";
+    readonly HOST_LABEL: "Host";
+    readonly VERDICTS_LABEL: "Verdicts";
+    readonly DEFECTS_LABEL: "Defects found";
+};
+export interface AccountDetails {
+    projectName?: string | undefined;
+    dashboardUrl?: string | undefined;
+    verdicts?: number | undefined;
+    defects?: number | undefined;
+}
+export declare function accountInitials(org: string | undefined): string;
+export declare function accountControlHtml(account: AccountState | undefined, details?: AccountDetails, offerSignIn?: boolean): string;
+export declare function accountCapsuleHtml(account: AccountState | undefined, dashboardUrl?: string, offerSignIn?: boolean): string;
+export declare function syncButtonHtml(dashboardUrl: string | undefined): string;
+export declare function mountAccountControl(root: HTMLElement): () => void;

package/dist/presenter/presenter-account.js

@@ -0,0 +1,178 @@
+import { hiIconHtml, PRESENTER_ICON_SIZE, PresenterIcon } from './icons/presenter-icons.js';
+import { esc, isSafeDashboardUrl } from './chrome/presenter-safe-html.js';
+export const ACCOUNT_ROOT_ATTR = 'data-reticle-account';
+export const ACCOUNT_SIGNIN_ATTR = 'data-reticle-account-signin';
+export const SYNC_BTN_ATTR = 'data-reticle-sync-now';
+export const ACCOUNT_TRIGGER_ATTR = 'data-reticle-account-trigger';
+export const ACCOUNT_MENU_ATTR = 'data-reticle-account-menu';
+export const ACCOUNT_SIGNOUT_ATTR = 'data-reticle-account-signout';
+export const ACCOUNT_TEXT = {
+    SIGNED_OUT: 'Sign in',
+    SIGNIN_TITLE: 'Run `reticle login` in your terminal — click to copy the command',
+    SIGNIN_COMMAND: 'reticle login',
+    DASHBOARD_TITLE: 'Open this project on the dashboard',
+    SYNC_TITLE: 'Push to the dashboard now, instead of waiting for the next sync',
+    COPIED: 'Copied',
+    AVATAR_FALLBACK: '•',
+    MENU_LABEL: 'Reticle account',
+    TRIGGER_TITLE: 'Your Reticle account',
+    SIGNED_IN_AS: 'Signed in',
+    DASHBOARD_ACTION: 'Open dashboard',
+    LINK_HINT: 'Not linked — run `reticle link` to keep a record on the dashboard',
+    LINK_COMMAND: 'reticle link',
+    SIGNOUT_ACTION: 'Sign out',
+    SIGNOUT_TITLE: 'Run `reticle logout` in your terminal — click to copy the command',
+    SIGNOUT_COMMAND: 'reticle logout',
+    PROJECT_LABEL: 'Project',
+    HOST_LABEL: 'Host',
+    VERDICTS_LABEL: 'Verdicts',
+    DEFECTS_LABEL: 'Defects found',
+};
+const ACCOUNT_COPIED_MS = 1200;
+export function accountInitials(org) {
+    const words = (org ?? '')
+        .trim()
+        .split(/[\s._-]+/)
+        .filter((word) => word.length > 0);
+    const letters = words
+        .slice(0, 2)
+        .map((word) => [...word][0] ?? '')
+        .join('');
+    return letters.length > 0 ? letters.toUpperCase() : ACCOUNT_TEXT.AVATAR_FALLBACK;
+}
+export function accountControlHtml(account, details = {}, offerSignIn = false) {
+    if (account === undefined)
+        return '';
+    if (!account.signedIn) {
+        if (!offerSignIn)
+            return '';
+        return `<div class="reticle-account" ${ACCOUNT_ROOT_ATTR}><button type="button" class="reticle-account-signin" ${ACCOUNT_SIGNIN_ATTR} title="${ACCOUNT_TEXT.SIGNIN_TITLE}" aria-label="${ACCOUNT_TEXT.SIGNIN_TITLE}">${ACCOUNT_TEXT.SIGNED_OUT}</button></div>`;
+    }
+    const org = account.org ?? '';
+    const label = org.length > 0 ? esc(org) : ACCOUNT_TEXT.SIGNED_IN_AS;
+    const avatar = `<span class="reticle-account-avatar" aria-hidden="true">${esc(accountInitials(account.org))}</span>`;
+    const trigger = `<button type="button" class="reticle-account-trigger" ${ACCOUNT_TRIGGER_ATTR}` +
+        ` aria-haspopup="true" aria-expanded="false" title="${ACCOUNT_TEXT.TRIGGER_TITLE}"` +
+        ` aria-label="${ACCOUNT_TEXT.TRIGGER_TITLE}: ${label}">${avatar}</button>`;
+    return `<div class="reticle-account" ${ACCOUNT_ROOT_ATTR}>${trigger}${accountMenuHtml(account, details)}</div>`;
+}
+function detailRow(key, value) {
+    if (value === undefined || 0 === value.length)
+        return '';
+    return `<div class="reticle-account-row"><span class="reticle-account-k">${esc(key)}</span><span class="reticle-account-v" title="${esc(value)}">${esc(value)}</span></div>`;
+}
+function accountMenuHtml(account, details) {
+    const org = account.org ?? '';
+    const identity = `<div class="reticle-account-head">` +
+        `<span class="reticle-account-avatar reticle-account-avatar--lg" aria-hidden="true">${esc(accountInitials(account.org))}</span>` +
+        `<span class="reticle-account-who">` +
+        `<span class="reticle-account-org">${org.length > 0 ? esc(org) : ACCOUNT_TEXT.SIGNED_IN_AS}</span>` +
+        (account.email !== undefined && account.email.length > 0
+            ? `<span class="reticle-account-email" title="${esc(account.email)}">${esc(account.email)}</span>`
+            : `<span class="reticle-account-email">${ACCOUNT_TEXT.SIGNED_IN_AS}</span>`) +
+        `</span></div>`;
+    const rows = detailRow(ACCOUNT_TEXT.HOST_LABEL, account.host) +
+        detailRow(ACCOUNT_TEXT.PROJECT_LABEL, details.projectName) +
+        detailRow(ACCOUNT_TEXT.VERDICTS_LABEL, details.verdicts !== undefined ? String(details.verdicts) : undefined) +
+        detailRow(ACCOUNT_TEXT.DEFECTS_LABEL, details.defects !== undefined ? String(details.defects) : undefined);
+    const linked = details.dashboardUrl !== undefined && isSafeDashboardUrl(details.dashboardUrl);
+    const dashboard = linked
+        ? `<a class="reticle-account-action" href="${esc(details.dashboardUrl ?? '')}" target="_blank" rel="noreferrer noopener" title="${ACCOUNT_TEXT.DASHBOARD_TITLE}">${hiIconHtml(PresenterIcon.VIEW, PRESENTER_ICON_SIZE.HELP)}<span>${ACCOUNT_TEXT.DASHBOARD_ACTION}</span></a>`
+        :
+            `<button type="button" class="reticle-account-action reticle-account-action--hint" ${ACCOUNT_SIGNIN_ATTR} data-reticle-copy="${ACCOUNT_TEXT.LINK_COMMAND}" title="${ACCOUNT_TEXT.LINK_HINT}"><span>${ACCOUNT_TEXT.LINK_HINT}</span></button>`;
+    const signOut = `<button type="button" class="reticle-account-action" ${ACCOUNT_SIGNOUT_ATTR} data-reticle-copy="${ACCOUNT_TEXT.SIGNOUT_COMMAND}" title="${ACCOUNT_TEXT.SIGNOUT_TITLE}"><span>${ACCOUNT_TEXT.SIGNOUT_ACTION}</span></button>`;
+    return (`<div class="reticle-account-menu" ${ACCOUNT_MENU_ATTR} role="menu" aria-label="${ACCOUNT_TEXT.MENU_LABEL}" aria-hidden="true" hidden>` +
+        identity +
+        (rows.length > 0 ? `<div class="reticle-account-rows">${rows}</div>` : '') +
+        `<div class="reticle-account-actions">${dashboard}${signOut}</div>` +
+        `</div>`);
+}
+export function accountCapsuleHtml(account, dashboardUrl, offerSignIn = false) {
+    return accountControlHtml(account, { dashboardUrl }, offerSignIn);
+}
+export function syncButtonHtml(dashboardUrl) {
+    if (dashboardUrl === undefined || !isSafeDashboardUrl(dashboardUrl))
+        return '';
+    return `<button type="button" class="reticle-sync-now" ${SYNC_BTN_ATTR} title="${ACCOUNT_TEXT.SYNC_TITLE}" aria-label="${ACCOUNT_TEXT.SYNC_TITLE}">${hiIconHtml(PresenterIcon.SYNC, PRESENTER_ICON_SIZE.HELP)}</button>`;
+}
+export function mountAccountControl(root) {
+    const controller = new AbortController();
+    const { signal } = controller;
+    const closeAll = (except) => {
+        for (const menu of root.querySelectorAll(`[${ACCOUNT_MENU_ATTR}]`)) {
+            if (menu === except)
+                continue;
+            menu.setAttribute('hidden', '');
+            menu.setAttribute('aria-hidden', 'true');
+        }
+        for (const trigger of root.querySelectorAll(`[${ACCOUNT_TRIGGER_ATTR}]`)) {
+            if (except !== undefined && trigger.parentElement === except.parentElement)
+                continue;
+            trigger.setAttribute('aria-expanded', 'false');
+        }
+    };
+    const flashCopied = (el) => {
+        const label = el.querySelector('span') ?? el;
+        const previous = label.textContent;
+        label.textContent = ACCOUNT_TEXT.COPIED;
+        setTimeout(() => {
+            label.textContent = previous;
+        }, ACCOUNT_COPIED_MS);
+    };
+    root.addEventListener('click', (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const trigger = target.closest(`[${ACCOUNT_TRIGGER_ATTR}]`);
+        if (trigger instanceof HTMLElement) {
+            event.preventDefault();
+            event.stopPropagation();
+            const menu = trigger.parentElement?.querySelector(`[${ACCOUNT_MENU_ATTR}]`);
+            if (!(menu instanceof HTMLElement))
+                return;
+            const wasOpen = !menu.hasAttribute('hidden');
+            closeAll();
+            if (wasOpen)
+                return;
+            menu.removeAttribute('hidden');
+            menu.setAttribute('aria-hidden', 'false');
+            trigger.setAttribute('aria-expanded', 'true');
+            return;
+        }
+        const copier = target.closest('[data-reticle-copy]');
+        if (copier instanceof HTMLElement) {
+            event.preventDefault();
+            event.stopPropagation();
+            const command = copier.getAttribute('data-reticle-copy') ?? '';
+            if (command.length > 0)
+                void navigator.clipboard?.writeText(command).catch(() => undefined);
+            flashCopied(copier);
+            return;
+        }
+        const signin = target.closest(`[${ACCOUNT_SIGNIN_ATTR}]`);
+        if (signin instanceof HTMLElement) {
+            event.preventDefault();
+            event.stopPropagation();
+            void navigator.clipboard?.writeText(ACCOUNT_TEXT.SIGNIN_COMMAND).catch(() => undefined);
+            flashCopied(signin);
+            return;
+        }
+        closeAll();
+    }, { signal });
+    document.addEventListener('pointerdown', (event) => {
+        const target = event.target;
+        if (target instanceof Node && root.contains(target))
+            return;
+        closeAll();
+    }, { signal });
+    document.addEventListener('keydown', (event) => {
+        if ('Escape' !== event.key)
+            return;
+        const open = root.querySelector(`[${ACCOUNT_MENU_ATTR}]:not([hidden])`);
+        if (null === open)
+            return;
+        event.stopPropagation();
+        closeAll();
+    }, { signal });
+    return () => controller.abort();
+}

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

@@ -1,4 +1,4 @@
-import type { ControlHandler } from './presenter-controls.js';
+import type { HumanControlKind } from '@reticlehq/core';
 export declare const BorderMode: {
     readonly SESSION: "session";
     readonly BUSY: "busy";
@@ -36,7 +36,9 @@ export declare const HEARTBEAT_MS = 1000;
 export declare const IDLE_NOTICE_MS = 4000;
 export declare const ACT_STRIP: {
     readonly READY: "Ready";
-    readonly IDLE_PREFIX: "idle · ";
+    readonly PLANNING_PREFIX: "planning next action · ";
+    readonly STOPPED: "stopped";
+    readonly STOPPED_PREFIX: "stopped · ";
     readonly NOW: "now";
     readonly SINCE_LAST: " since last action";
 };
@@ -92,3 +94,8 @@ export declare const HUD_DOCK_MARGIN_PX = 8;
 export declare const HUD_DRAG_IGNORE_SEL: string;
 export declare const THROTTLED_ATTR = "data-reticle-throttled";
 export declare const Z_HUD_TOOLTIP = 100;
+export interface ControlIntent {
+    kind: HumanControlKind;
+    text?: string;
+}
+export type ControlHandler = (intent: ControlIntent) => void;

package/dist/presenter/presenter-config.js

@@ -19,7 +19,9 @@ export const HEARTBEAT_MS = 1000;
 export const IDLE_NOTICE_MS = 4000;
 export const ACT_STRIP = {
     READY: 'Ready',
-    IDLE_PREFIX: 'idle · ',
+    PLANNING_PREFIX: 'planning next action · ',
+    STOPPED: 'stopped',
+    STOPPED_PREFIX: 'stopped · ',
     NOW: 'now',
     SINCE_LAST: ' since last action',
 };

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

@@ -1,10 +1,6 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
+export type { ControlIntent, ControlHandler } from './presenter-config.js';
 export declare const ENDED_FADE_MS = 4000;
-export interface ControlIntent {
-    kind: HumanControlKind;
-    text?: string;
-}
-export type ControlHandler = (intent: ControlIntent) => void;
 export declare const CONTROLS_CSS: string;
 export declare const CONTROLS_TOOLBAR_HTML: string;
 export declare const CONTROLS_BANNER_HTML = "<div data-reticle-banner class=\"reticle-banner\">Session ended</div>";
@@ -28,4 +24,3 @@ export declare class ControlPanel {
     refilterFlows(): void;
     setState(state: SessionState, text?: string, tone?: PresenterTone): void;
 }
-export {};

package/dist/presenter/presenter-controls.js

@@ -1,7 +1,7 @@
 import { HumanControlKind, PresenterTone, SessionState } from '@reticlehq/core';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { CHAT_TOGGLE_ATTR, CLEAR_MARKS_ATTR, MARKERS_BTN_ATTR } from './presenter-config.js';
-import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './presenter-icons.js';
+import { PresenterIcon, PRESENTER_ICON_SIZE, hiIcon, hiIconHtml, hiToggleIconHtml, } from './icons/presenter-icons.js';
 import { getPresenterSettings } from './presenter-settings.js';
 import { mountWorkspaceSelector, workspaceRowHtml } from './presenter-workspace.js';
 const DATA_RETICLE_STATE = 'data-reticle-state';
@@ -57,6 +57,11 @@ export const CONTROLS_CSS = `
   background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);cursor:pointer;line-height:0;transition:background .12s,color .12s;}
 [data-reticle-chat-panel] .reticle-workspace-copy:hover:not(:disabled){background:rgba(255,255,255,.12);color:#fff;}
 [data-reticle-chat-panel] .reticle-workspace-copy:disabled{opacity:.35;cursor:not-allowed;}
+/* The account capsule, to the right of the menu title. Matches the local idiom in this block:
+   the workspace menu predates the design tokens used in the report panel and states its own
+   greys, so a token here would be the only one and would not match its neighbours. */
+[data-reticle-chat-panel] .reticle-workspace-menu-actions{
+  display:flex;align-items:center;gap:6px;}
 [data-reticle-chat-panel] .reticle-workspace-menu-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:4px 0;}
 [data-reticle-chat-panel] .reticle-workspace-menu-k{flex:none;color:rgba(255,255,255,.42);}
 [data-reticle-chat-panel] .reticle-workspace-menu-v{min-width:0;text-align:right;color:rgba(255,255,255,.9);font-weight:500;word-break:break-all;}

package/dist/presenter/presenter-dock-layout.js

@@ -1,5 +1,5 @@
 import { CHAT_ATTR, CHAT_PANEL_ATTR, CHAT_PLACEMENT_ATTR, DOCK_ALIGN_ATTR, DOCK_ATTR, HUD_DOCK_MARGIN_PX, Placement, SETTINGS_ATTR, SETTINGS_PANEL_ATTR, SETTINGS_PLACEMENT_ATTR, } from './presenter-config.js';
-import { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, } from './presenter-drag.js';
+import { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, } from './presenter-hud-position.js';
 const HUD_ATTR = 'data-reticle-hud';
 const DOCK_PANEL_GAP_PX = 8;
 const DOCK_SETTINGS_GAP_PX = 12;

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

@@ -1,26 +1,8 @@
+export { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
 interface HudDragCallbacks {
     onDragMove?: () => void;
     onDragEnd?: (moved: boolean) => void;
 }
-export declare function isHudDragged(hud: HTMLElement): boolean;
-export declare function clampHudPosition(left: number, top: number, width: number, height: number, viewportWidth: number, viewportHeight: number, margin?: number): {
-    left: number;
-    top: number;
-};
-export declare function applyHudPosition(hud: HTMLElement, left: number, top: number): void;
-export declare function resetHudDockPosition(hud: HTMLElement): void;
-export declare function hudLayoutBox(hud: HTMLElement): {
-    left: number;
-    top: number;
-    width: number;
-    height: number;
-};
-export declare function readHudPosition(hud: HTMLElement): {
-    left: number;
-    top: number;
-};
-export declare function relayoutHudPosition(hud: HTMLElement): void;
 export declare function installHudPositionGuards(hud: HTMLElement, overlay: HTMLElement): () => void;
 export declare function installHudDrag(hud: HTMLElement, head: HTMLElement, callbacks?: HudDragCallbacks): () => void;
 export declare function installHudDragHandles(hud: HTMLElement, handles: HTMLElement[], callbacks?: HudDragCallbacks): () => void;
-export {};

package/dist/presenter/presenter-drag.js

@@ -1,55 +1,8 @@
-import { HUD_DOCK_MARGIN_PX, HUD_DRAG_IGNORE_SEL, HUD_DRAG_THRESHOLD_PX, HUD_DRAGGED_ATTR, HUD_POS_X_VAR, HUD_POS_Y_VAR, MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, } from './presenter-config.js';
+import { HUD_DRAG_IGNORE_SEL, HUD_DRAG_THRESHOLD_PX, MIN_ATTR, CHAT_ATTR, SETTINGS_ATTR, } from './presenter-config.js';
 import { scheduleSyncDockLayout } from './presenter-dock-layout.js';
+import { applyHudPosition, clampHudPosition, hudLayoutBox, relayoutHudPosition, } from './presenter-hud-position.js';
+export { applyHudPosition, isHudDragged, readHudPosition, relayoutHudPosition, clampHudPosition, hudLayoutBox, resetHudDockPosition, } from './presenter-hud-position.js';
 const DRAG_HANDLE_DRAGGING_CLASS = 'reticle-drag-handle--dragging';
-export function isHudDragged(hud) {
-    return '1' === hud.getAttribute(HUD_DRAGGED_ATTR);
-}
-export function clampHudPosition(left, top, width, height, viewportWidth, viewportHeight, margin = HUD_DOCK_MARGIN_PX) {
-    const minLeft = margin;
-    const minTop = margin;
-    const maxLeft = Math.max(minLeft, viewportWidth - width - margin);
-    const maxTop = Math.max(minTop, viewportHeight - height - margin);
-    return {
-        left: Math.max(minLeft, Math.min(left, maxLeft)),
-        top: Math.max(minTop, Math.min(top, maxTop)),
-    };
-}
-export function applyHudPosition(hud, left, top) {
-    hud.setAttribute(HUD_DRAGGED_ATTR, '1');
-    hud.style.setProperty(HUD_POS_X_VAR, `${String(left)}px`);
-    hud.style.setProperty(HUD_POS_Y_VAR, `${String(top)}px`);
-}
-export function resetHudDockPosition(hud) {
-    hud.removeAttribute(HUD_DRAGGED_ATTR);
-    hud.style.removeProperty(HUD_POS_X_VAR);
-    hud.style.removeProperty(HUD_POS_Y_VAR);
-}
-export function hudLayoutBox(hud) {
-    const rect = hud.getBoundingClientRect();
-    return {
-        left: rect.left,
-        top: rect.top,
-        width: rect.width,
-        height: rect.height,
-    };
-}
-export function readHudPosition(hud) {
-    const x = hud.style.getPropertyValue(HUD_POS_X_VAR);
-    const y = hud.style.getPropertyValue(HUD_POS_Y_VAR);
-    if (x !== '' && y !== '') {
-        return { left: Number.parseFloat(x), top: Number.parseFloat(y) };
-    }
-    const rect = hud.getBoundingClientRect();
-    return { left: rect.left, top: rect.top };
-}
-export function relayoutHudPosition(hud) {
-    if (!isHudDragged(hud))
-        return;
-    const { left, top } = readHudPosition(hud);
-    const { width, height } = hudLayoutBox(hud);
-    const next = clampHudPosition(left, top, width, height, window.innerWidth, window.innerHeight);
-    applyHudPosition(hud, next.left, next.top);
-}
 export function installHudPositionGuards(hud, overlay) {
     const scheduleRelayout = () => {
         scheduleSyncDockLayout(hud, overlay);

package/dist/presenter/presenter-glow.js

@@ -1,5 +1,5 @@
 import { PresenterMode } from '@reticlehq/core';
-import { nativeSetTimeout, nativeClearTimeout } from '../timers/native-timers.js';
+import { nativeSetTimeout, nativeClearTimeout } from '../timers/native/native-timers.js';
 import { GlowPhase, BorderMode, DATA_BUSY, BUSY_ON, BUSY_OFF, GLOW_ON, GLOW_OFF, DATA_ON, } from './presenter-config.js';
 export class GlowController {
     #phase = GlowPhase.IDLE;

package/dist/presenter/presenter-hud-position.d.ts

@@ -0,0 +1,18 @@
+export declare function isHudDragged(hud: HTMLElement): boolean;
+export declare function clampHudPosition(left: number, top: number, width: number, height: number, viewportWidth: number, viewportHeight: number, margin?: number): {
+    left: number;
+    top: number;
+};
+export declare function applyHudPosition(hud: HTMLElement, left: number, top: number): void;
+export declare function resetHudDockPosition(hud: HTMLElement): void;
+export declare function hudLayoutBox(hud: HTMLElement): {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export declare function readHudPosition(hud: HTMLElement): {
+    left: number;
+    top: number;
+};
+export declare function relayoutHudPosition(hud: HTMLElement): void;

package/dist/presenter/presenter-hud-position.js

@@ -0,0 +1,50 @@
+import { HUD_DOCK_MARGIN_PX, HUD_DRAGGED_ATTR, HUD_POS_X_VAR, HUD_POS_Y_VAR, } from './presenter-config.js';
+export function isHudDragged(hud) {
+    return '1' === hud.getAttribute(HUD_DRAGGED_ATTR);
+}
+export function clampHudPosition(left, top, width, height, viewportWidth, viewportHeight, margin = HUD_DOCK_MARGIN_PX) {
+    const minLeft = margin;
+    const minTop = margin;
+    const maxLeft = Math.max(minLeft, viewportWidth - width - margin);
+    const maxTop = Math.max(minTop, viewportHeight - height - margin);
+    return {
+        left: Math.max(minLeft, Math.min(left, maxLeft)),
+        top: Math.max(minTop, Math.min(top, maxTop)),
+    };
+}
+export function applyHudPosition(hud, left, top) {
+    hud.setAttribute(HUD_DRAGGED_ATTR, '1');
+    hud.style.setProperty(HUD_POS_X_VAR, `${String(left)}px`);
+    hud.style.setProperty(HUD_POS_Y_VAR, `${String(top)}px`);
+}
+export function resetHudDockPosition(hud) {
+    hud.removeAttribute(HUD_DRAGGED_ATTR);
+    hud.style.removeProperty(HUD_POS_X_VAR);
+    hud.style.removeProperty(HUD_POS_Y_VAR);
+}
+export function hudLayoutBox(hud) {
+    const rect = hud.getBoundingClientRect();
+    return {
+        left: rect.left,
+        top: rect.top,
+        width: rect.width,
+        height: rect.height,
+    };
+}
+export function readHudPosition(hud) {
+    const x = hud.style.getPropertyValue(HUD_POS_X_VAR);
+    const y = hud.style.getPropertyValue(HUD_POS_Y_VAR);
+    if (x !== '' && y !== '') {
+        return { left: Number.parseFloat(x), top: Number.parseFloat(y) };
+    }
+    const rect = hud.getBoundingClientRect();
+    return { left: rect.left, top: rect.top };
+}
+export function relayoutHudPosition(hud) {
+    if (!isHudDragged(hud))
+        return;
+    const { left, top } = readHudPosition(hud);
+    const { width, height } = hudLayoutBox(hud);
+    const next = clampHudPosition(left, top, width, height, window.innerWidth, window.innerHeight);
+    applyHudPosition(hud, next.left, next.top);
+}

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

@@ -0,0 +1,25 @@
+export declare const OFFER_ATTR = "data-reticle-offer";
+export declare const OFFER_SLOT_ATTR = "data-reticle-offer-slot";
+export declare const OFFER_CLAIM_ATTR = "data-reticle-offer-claim";
+export declare const OFFER_DISMISS_ATTR = "data-reticle-offer-dismiss";
+export declare const OFFER_DISMISSED_KEY = "reticle.harnessOffer.dismissed";
+export declare const OFFER_TEXT: {
+    readonly HEADLINE: "Reticle drives your app for you";
+    readonly BODY: "The harness explores your app, proves what works, and saves every journey as a test that replays for free. Built on Jev — no model API key needed.";
+    readonly FREE: "Free for 3 months";
+    readonly CLAIM: "Claim now";
+    readonly DISMISS: "Not now";
+    readonly claimed: (days: number) => string;
+    readonly ending: (days: number) => string;
+};
+export declare function offerDismissed(storage: Pick<Storage, 'getItem'> | undefined): boolean;
+export declare function dismissOffer(storage: Pick<Storage, 'setItem'> | undefined): void;
+export interface OfferState {
+    claimed: boolean;
+    daysRemaining?: number | undefined;
+    claimUrl?: string | undefined;
+    eligible?: boolean | undefined;
+}
+export declare function offerHtml(offer: OfferState | undefined, dismissed: boolean): string;
+export declare function paintOffer(root: ParentNode, offer: OfferState | undefined, storage: Pick<Storage, 'getItem' | 'setItem'> | undefined): void;
+export declare const OFFER_CSS = "\n.reticle-offer{margin:8px 10px;padding:10px 12px;border:1px solid var(--reticle-line,#2a2f3a);border-radius:10px;background:var(--reticle-surface-inset,rgba(255,255,255,.03));}\n.reticle-offer-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}\n.reticle-offer-title{font-weight:600;font-size:12px;}\n.reticle-offer-free{font-size:10px;padding:2px 6px;border-radius:999px;background:var(--reticle-accent,#4f7cff);color:#fff;white-space:nowrap;}\n.reticle-offer-body{margin:6px 0 8px;font-size:11px;line-height:1.45;opacity:.8;}\n.reticle-offer-actions{display:flex;align-items:center;gap:8px;}\n.reticle-offer-claim{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:var(--reticle-accent,#4f7cff);color:#fff;text-decoration:none;}\n.reticle-offer-dismiss{font-size:11px;padding:4px 8px;border-radius:6px;background:none;border:0;color:inherit;opacity:.6;cursor:pointer;}\n.reticle-offer-dismiss:hover{opacity:1;}\n.reticle-offer-claimed{margin:6px 10px;font-size:10px;opacity:.6;}\n";