passenger-mode 0.0.0-stage → 0.3.0

package/dist/lib/runtime/planner.js

@@ -0,0 +1,107 @@
+import { hrefRoute } from "./routes.js";
+// ---------- offline route planner ----------
+const STOP = new Set("a an the my me i to of for on in and or please want would like can you how do go get help with this that it our".split(" "));
+const words = (s) => s.toLowerCase().replace(/[{}]/g, " ").split(/[^a-z0-9]+/).filter((w) => w.length > 1 && !STOP.has(w))
+    .map((w) => w.replace(/(ing|es|s)$/, ""));
+function overlap(a, b) {
+    const bw = new Set(words(b));
+    return words(a).filter((w) => bw.has(w)).length;
+}
+/**
+ * Plans without a model: matches the destination to a manifest action, then walks the link graph
+ * from the current page to that action's page. Good for tests, demos and as a fallback when the
+ * model is unavailable. Production plans with Claude (see ../server/claude-planner.ts).
+ */
+export class RoutePlanner {
+    target = new Map(); // destination → action id
+    pickTarget(dest, m) {
+        const cached = this.target.get(dest);
+        if (cached)
+            return cached;
+        let best = null;
+        const consider = (id, score) => { if (score > 0 && (!best || score > best.score))
+            best = { id, score }; };
+        for (const d of m.destinations) {
+            const s = overlap(dest, d.goal);
+            if (s === 0)
+                continue;
+            for (const id of d.actionIds) {
+                const a = m.actions.find((x) => x.id === id);
+                if (a)
+                    consider(id, s * 2 + overlap(dest, a.label) + (a.kind !== "navigate" ? 0.5 : 0));
+            }
+        }
+        for (const a of m.actions) {
+            const s = overlap(dest, a.label);
+            if (s > 0)
+                consider(a.id, s + (a.kind !== "navigate" ? 0.25 : 0)); // the bonus only breaks ties between real matches
+        }
+        const found = best;
+        if (found)
+            this.target.set(dest, found.id);
+        return found ? found.id : null;
+    }
+    /** Whether an action can be on a page: its own page, the pages it was seen on, or anywhere. */
+    static on(a, route) {
+        if (a.route !== null)
+            return a.route === route;
+        return !a.seenOn || (route !== null && a.seenOn.includes(route));
+    }
+    /** Breadth-first over navigate actions: which links to take from `from` to a page where `target` is. */
+    path(from, target, m) {
+        if (RoutePlanner.on(target, from))
+            return [];
+        const queue = [{ route: from, via: [] }];
+        const seen = new Set([from]);
+        while (queue.length) {
+            const { route, via } = queue.shift();
+            for (const a of m.actions) {
+                if (a.kind !== "navigate" || !a.href || !RoutePlanner.on(a, route))
+                    continue;
+                const dest = hrefRoute(a.href, m.routes);
+                if (!dest || seen.has(dest))
+                    continue;
+                const next = [...via, a.id];
+                if (RoutePlanner.on(target, dest))
+                    return next;
+                seen.add(dest);
+                queue.push({ route: dest, via: next });
+            }
+        }
+        return null;
+    }
+    async plan(view, m) {
+        const id = this.pickTarget(view.destination, m);
+        if (!id)
+            return null;
+        const target = m.actions.find((a) => a.id === id);
+        const route = this.path(view.route, target, m);
+        if (route === null)
+            return null;
+        const steps = route.map((aid) => {
+            const a = m.actions.find((x) => x.id === aid);
+            return `Open ${a.label}`;
+        });
+        steps.push(target.irreversible ? `Stop at ${target.label}. You press it.` : `${target.kind === "submit" ? "Submit" : "Press"} ${target.label}`);
+        const n = steps.length;
+        return { summary: `${target.label}: ${n} step${n === 1 ? "" : "s"}`, steps };
+    }
+    async next(view, m) {
+        const id = this.pickTarget(view.destination, m);
+        if (!id)
+            return { kind: "stuck", reason: "I don't know this road." };
+        const target = m.actions.find((a) => a.id === id);
+        if (view.history.some((h) => h.actionId === id)) {
+            return { kind: "arrived", summary: `Done: ${target.label}.` };
+        }
+        if (view.visible.some((v) => v.id === id)) {
+            return { kind: "act", actionId: id, caption: target.irreversible ? `Pull over: ${target.label} is yours to press` : `${target.kind === "submit" ? "Submitting" : "Pressing"} ${target.label}` };
+        }
+        const route = this.path(view.route, target, m);
+        const first = route?.[0];
+        if (!first || !view.visible.some((v) => v.id === first))
+            return { kind: "stuck", reason: "I don't know this road." };
+        const a = m.actions.find((x) => x.id === first);
+        return { kind: "act", actionId: first, caption: `Opening ${a.label}` };
+    }
+}

package/dist/lib/runtime/remote-planner.d.ts

@@ -0,0 +1,18 @@
+import type { Manifest } from "../types.ts";
+import type { PageView, Planner, Step, TripPlan } from "./planner.ts";
+/**
+ * Plans on the site's own server (which holds the model key). Only the PageView is sent:
+ * the destination, the route, and the manifest actions visible now. Never field values or page text.
+ */
+export declare class RemotePlanner implements Planner {
+    private endpoint;
+    private fetchImpl;
+    /** Extra headers, e.g. the site's public key for the hosted planner. */
+    private headers;
+    constructor(endpoint: string, fetchImpl?: typeof fetch, 
+    /** Extra headers, e.g. the site's public key for the hosted planner. */
+    headers?: Record<string, string>);
+    private call;
+    plan(view: PageView, _m: Manifest): Promise<TripPlan | null>;
+    next(view: PageView, _m: Manifest): Promise<Step>;
+}

package/dist/lib/runtime/remote-planner.js

@@ -0,0 +1,37 @@
+/**
+ * Plans on the site's own server (which holds the model key). Only the PageView is sent:
+ * the destination, the route, and the manifest actions visible now. Never field values or page text.
+ */
+export class RemotePlanner {
+    endpoint;
+    fetchImpl;
+    headers;
+    constructor(endpoint, fetchImpl = (...a) => fetch(...a), 
+    /** Extra headers, e.g. the site's public key for the hosted planner. */
+    headers = {}) {
+        this.endpoint = endpoint;
+        this.fetchImpl = fetchImpl;
+        this.headers = headers;
+    }
+    async call(op, view) {
+        const res = await this.fetchImpl(this.endpoint, {
+            method: "POST",
+            headers: { "content-type": "application/json", ...this.headers },
+            body: JSON.stringify({ op, view }),
+            // Cookies go only to the site's own planner (which may sit behind the site's own auth or preview
+            // protection), never to a planner on another origin such as the hosted one.
+            credentials: "same-origin",
+        });
+        if (!res.ok)
+            throw new Error(`planner ${res.status}`);
+        return (await res.json());
+    }
+    async plan(view, _m) {
+        const r = await this.call("plan", view);
+        return r.plan;
+    }
+    async next(view, _m) {
+        const r = await this.call("next", view);
+        return r.step;
+    }
+}

package/dist/lib/runtime/resolve.d.ts

@@ -0,0 +1,6 @@
+import type { Action } from "../types.ts";
+export declare function isVisible(el: Element): boolean;
+/** Finds the live element for a manifest action: most stable selector first, visible matches only. */
+export declare function resolveElement(action: Action, doc: Document, exclude?: Element | null): HTMLElement | null;
+/** The runtime words on a control, for actions whose label is filled in at runtime ("{link.label}"). */
+export declare function liveLabel(el: Element): string;

package/dist/lib/runtime/resolve.js

@@ -0,0 +1,72 @@
+const q = (v) => '"' + v.replace(/\\/g, "\\\\").replace(/"/g, '\\"') + '"';
+const norm = (s) => (s ?? "").replace(/\s+/g, " ").trim().toLowerCase();
+export function isVisible(el) {
+    if (!el.isConnected)
+        return false;
+    if (el.closest("[hidden],[inert],[aria-hidden='true']"))
+        return false;
+    const win = el.ownerDocument?.defaultView;
+    for (let n = el; n; n = n.parentElement) {
+        const cs = win?.getComputedStyle(n);
+        if (cs && (cs.display === "none" || cs.visibility === "hidden"))
+            return false;
+    }
+    if (el.disabled)
+        return false;
+    return true;
+}
+const TAGS = {
+    navigate: "a[href]",
+    click: "button, [role='button'], input[type='submit'], input[type='button']",
+    submit: "form",
+};
+/** Finds the live element for a manifest action: most stable selector first, visible matches only. */
+export function resolveElement(action, doc, exclude) {
+    const ok = (el) => !!el && isVisible(el) && !(exclude && exclude.contains(el));
+    const pick = (sel) => {
+        for (const el of Array.from(doc.querySelectorAll(sel))) {
+            const target = action.kind === "submit" && el.tagName !== "FORM" ? el.closest("form") ?? el : el;
+            if (ok(target))
+                return target;
+        }
+        return null;
+    };
+    for (const s of action.selectors) {
+        let el = null;
+        switch (s.by) {
+            case "testid":
+                el = pick(`[data-testid=${q(s.value)}],[data-test=${q(s.value)}],[data-cy=${q(s.value)}]`);
+                break;
+            case "id":
+                el = pick(`[id=${q(s.value)}]`);
+                break;
+            case "name":
+                el = pick(`[name=${q(s.value)}]`);
+                break;
+            case "aria-label":
+                el = pick(`[aria-label=${q(s.value)}]`);
+                break;
+            case "href":
+                el = pick(`a[href=${q(s.value)}]`);
+                break;
+            case "text": {
+                if (s.value.startsWith("{"))
+                    break; // runtime label: no fixed text to look for
+                const want = norm(s.value);
+                const candidates = action.kind === "submit"
+                    ? Array.from(doc.querySelectorAll("form button, form input[type='submit']")).map((b) => ({ el: b.closest("form"), text: norm(b.textContent || b.getAttribute("value")) }))
+                    : Array.from(doc.querySelectorAll(TAGS[action.kind])).map((el) => ({ el, text: norm(el.getAttribute("aria-label") || el.textContent || el.getAttribute("value")) }));
+                const hit = candidates.find((c) => c.text === want && ok(c.el)) ?? candidates.find((c) => c.text.startsWith(want) && ok(c.el));
+                el = hit?.el ?? null;
+                break;
+            }
+        }
+        if (el)
+            return el;
+    }
+    return null;
+}
+/** The runtime words on a control, for actions whose label is filled in at runtime ("{link.label}"). */
+export function liveLabel(el) {
+    return (el.getAttribute("aria-label") || el.textContent || el.getAttribute("value") || "").replace(/\s+/g, " ").trim().slice(0, 80);
+}

package/dist/lib/runtime/routes.d.ts

@@ -0,0 +1,13 @@
+import type { Route } from "../types.ts";
+/** "/products/[id]", "/join/:code", "/[[...slug]]" → a RegExp over a pathname. */
+export declare function patternToRegex(pattern: string): RegExp;
+/** "/?b=2&utm_source=x&a=1" → "/?a=1&b=2": the form routes are stored in. */
+export declare function canonicalPath(pathWithSearch: string): string;
+/**
+ * The manifest route a location belongs to, or null ("I don't know this road").
+ * Routes may carry query pairs ("/?lobby=1") for apps that switch screens with parameters;
+ * a location matches when its path matches and it has every pair. More pairs = more specific.
+ */
+export declare function matchRoute(pathWithSearch: string, routes: Route[]): string | null;
+/** Where a link goes, as a manifest route (hrefs carry ":param" for dynamic parts). */
+export declare function hrefRoute(href: string, routes: Route[]): string | null;

package/dist/lib/runtime/routes.js

@@ -0,0 +1,65 @@
+/** "/products/[id]", "/join/:code", "/[[...slug]]" → a RegExp over a pathname. */
+export function patternToRegex(pattern) {
+    const parts = pattern.split("/").filter(Boolean).map((seg) => {
+        if (/^\[\[\.\.\..+\]\]$/.test(seg))
+            return "(?:/.*)?";
+        if (/^\[\.\.\..+\]$/.test(seg))
+            return "/.+";
+        if (/^\[.+\]$/.test(seg) || seg.startsWith(":") || seg.includes(":param"))
+            return "/[^/]+";
+        if (seg === "*")
+            return "(?:/.*)?";
+        return "/" + seg.replace(/[.*+?^${}()|\\]/g, "\\$&");
+    });
+    return new RegExp("^" + (parts.join("") || "/?") + "/?$");
+}
+/** How specific a pattern is: static segments win over params, params over catch-alls. */
+function specificity(pattern) {
+    return pattern.split("/").filter(Boolean).reduce((n, seg) => {
+        if (seg.startsWith("[[...") || seg === "*")
+            return n;
+        if (seg.startsWith("[") || seg.startsWith(":"))
+            return n + 1;
+        return n + 3;
+    }, 0);
+}
+/** Tracking parameters never define a screen. */
+const TRACKING = /^(utm_\w+|fbclid|gclid|msclkid|ref|ttclid|mc_\w+)$/i;
+/** "/?b=2&utm_source=x&a=1" → "/?a=1&b=2": the form routes are stored in. */
+export function canonicalPath(pathWithSearch) {
+    const [path, query = ""] = pathWithSearch.split("#")[0].split("?");
+    const params = [...new URLSearchParams(query)].filter(([k]) => !TRACKING.test(k)).sort(([a], [b]) => a.localeCompare(b));
+    return (path || "/") + (params.length ? "?" + new URLSearchParams(params).toString() : "");
+}
+/**
+ * The manifest route a location belongs to, or null ("I don't know this road").
+ * Routes may carry query pairs ("/?lobby=1") for apps that switch screens with parameters;
+ * a location matches when its path matches and it has every pair. More pairs = more specific.
+ */
+export function matchRoute(pathWithSearch, routes) {
+    const [clean, query = ""] = pathWithSearch.split("#")[0].split("?");
+    const params = new URLSearchParams(query);
+    let best = null;
+    let bestScore = -1;
+    for (const r of routes) {
+        const [p, q] = r.path.split("?");
+        if (!patternToRegex(p).test(clean || "/"))
+            continue;
+        const pairs = q ? [...new URLSearchParams(q)] : [];
+        if (!pairs.every(([k, v]) => params.get(k) === v))
+            continue;
+        const sc = specificity(p) + pairs.length * 2;
+        if (sc > bestScore) {
+            best = r.path;
+            bestScore = sc;
+        }
+    }
+    return best;
+}
+/** Where a link goes, as a manifest route (hrefs carry ":param" for dynamic parts). */
+export function hrefRoute(href, routes) {
+    if (!href.startsWith("/") && !href.startsWith("#/"))
+        return null;
+    const path = href.startsWith("#") ? href.slice(1) : href;
+    return matchRoute(path.replace(/:param/g, "x"), routes);
+}

package/dist/lib/runtime/ui.d.ts

@@ -0,0 +1,58 @@
+import type { DriverState, DriverUI } from "./driver.ts";
+import type { TripPlan } from "./planner.ts";
+export interface OverlayHandlers {
+    open(e: Event): void;
+    close(): void;
+    plan(destination: string, e: Event): void;
+    go(e: Event): void;
+    notThis(): void;
+    takeWheel(): void;
+    resume(e: Event): void;
+    end(): void;
+    rate(up: boolean): void;
+}
+export interface OverlayOptions {
+    /** Goals shown as chips under "Where to?" (the manifest's destinations). */
+    suggestions?: string[];
+    /** Free tier shows the badge. */
+    badge?: boolean;
+    /** Distance of the switch from the bottom-right corner, to clear a site's own corner buttons. */
+    offset?: {
+        right?: number;
+        bottom?: number;
+    };
+}
+/** The overlay: switch, destination box, ghost cursor, trip bar, rings. Lives in a shadow root. */
+export declare class OverlayUI implements DriverUI {
+    private on;
+    private opts;
+    readonly host: HTMLElement;
+    private root;
+    private layer;
+    private switchBtn;
+    private panel;
+    private bar;
+    private cursor;
+    private cap;
+    private ringEl;
+    private ringTarget;
+    private raf;
+    private doc;
+    private win;
+    private destination;
+    constructor(win: Window, on: OverlayHandlers, opts?: OverlayOptions);
+    owns(node: Node | null): boolean;
+    destroy(): void;
+    render(state: DriverState, info: {
+        plan?: TripPlan | null;
+        caption?: string;
+        message?: string;
+        destination?: string;
+        step?: number;
+    }): void;
+    private renderOpen;
+    private renderPlan;
+    private renderArrived;
+    moveCursor(el: Element, caption: string): Promise<void>;
+    ring(el: Element | null, tone?: "drive" | "gate" | "handoff"): void;
+}

package/dist/lib/runtime/ui.js

@@ -0,0 +1,267 @@
+const CSS = `
+:host{all:initial}
+*{box-sizing:border-box;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}
+.layer{position:fixed;inset:0;pointer-events:none;z-index:2147483646}
+.auto{pointer-events:auto}
+button{font:inherit;cursor:pointer}
+.switch{position:fixed;right:var(--pm-right,20px);bottom:var(--pm-bottom,20px);max-width:calc(100vw - var(--pm-right,20px) - 12px);display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:6px 8px 6px 16px;border-radius:999px;border:1px solid #DDDAD0;background:#fff;color:#111418;box-shadow:0 8px 24px rgba(17,20,24,.12);text-align:left}
+.switch[aria-checked="true"]{background:#E6ECFF;border-color:#A9BCFF}
+.switch .t{display:flex;flex-direction:column;line-height:1.15}
+.switch .t b{font-size:14px;font-weight:600}
+.switch[aria-checked="true"] .t b{color:#1A3FCC}
+.switch .t span{font-size:12px;color:#565C66}
+.track{width:40px;height:24px;border-radius:999px;background:#C9C6BE;position:relative;flex:none;transition:background .16s}
+.knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .16s}
+.switch[aria-checked="true"] .track{background:#2D5BFF}
+.switch[aria-checked="true"] .knob{left:19px}
+.badge{position:fixed;right:calc(var(--pm-right,20px) + 8px);bottom:calc(var(--pm-bottom,20px) - 16px);font-size:10px;color:#565C66}
+.panel{position:fixed;right:var(--pm-right,20px);bottom:calc(var(--pm-bottom,20px) + 60px);width:min(420px,calc(100vw - var(--pm-right,20px) - 20px));background:#fff;color:#111418;border:1px solid #DDDAD0;border-radius:18px;box-shadow:0 24px 60px rgba(17,20,24,.16);padding:20px;display:flex;flex-direction:column;gap:14px}
+.panel h2{margin:0;font-size:20px;font-weight:650;letter-spacing:-.01em}
+.panel p{margin:0;font-size:14px;line-height:1.5;color:#3A4049}
+.small{font-size:12px!important;color:#565C66!important}
+.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
+input{flex:1;min-width:0;min-height:46px;border:1.5px solid #2D5BFF;border-radius:12px;padding:0 14px;font:inherit;font-size:15px;color:#111418;outline:none}
+.primary{min-height:46px;padding:0 16px;border-radius:12px;border:none;background:#111418;color:#F5F4EF;font-weight:600}
+.go{flex:1;background:#2D5BFF;color:#fff}
+.ghost{min-height:46px;padding:0 14px;border-radius:12px;border:1px solid #DDDAD0;background:#fff;color:#111418}
+.chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid #DDDAD0;background:#FAF9F6;color:#111418;font-size:13px}
+ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px}
+ol li{display:flex;gap:10px;align-items:center}
+.n{width:22px;height:22px;border-radius:50%;background:#E6ECFF;color:#1A3FCC;font-size:12px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;flex:none}
+.n.gate{background:#FDF1DC;color:#6B4A0E}
+.bar{position:fixed;left:50%;bottom:calc(var(--pm-bottom,20px) + 64px);transform:translateX(-50%);max-width:calc(100vw - 24px);display:flex;flex-wrap:wrap;align-items:center;gap:12px;background:#111418;color:#F5F4EF;border-radius:16px;padding:10px 10px 10px 16px;box-shadow:0 16px 40px rgba(17,20,24,.25);font-size:14px}
+.bar .dot{width:8px;height:8px;border-radius:50%;background:#5C84FF;flex:none}
+.bar[data-tone="gate"] .dot,.bar[data-tone="handoff"] .dot{background:#F2A93B}
+.bar[data-tone="paused"] .dot{background:#C9C6BE}
+.bar .msg{color:#C9C6BE;max-width:44ch}
+.bar button{min-height:40px;padding:0 14px;border-radius:10px;border:1px solid #3A4049;background:transparent;color:#F5F4EF}
+.bar .resume{background:#2D5BFF;border-color:#2D5BFF;color:#fff;font-weight:600}
+.cursor{position:fixed;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:6px;transition:transform .7s cubic-bezier(.4,0,.2,1);will-change:transform}
+.cap{background:#111418;color:#F5F4EF;font-size:13px;font-weight:500;border-radius:8px;padding:6px 10px;white-space:nowrap}
+.ring{position:fixed;border-radius:12px;transition:all .25s ease}
+.ring[data-tone="drive"]{box-shadow:0 0 0 3px #2D5BFF,0 0 0 9px rgba(45,91,255,.18)}
+.ring[data-tone="gate"]{box-shadow:0 0 0 3px #F2A93B,0 0 0 10px rgba(242,169,59,.28);animation:pulse 1.6s infinite}
+.ring[data-tone="handoff"]{box-shadow:0 0 0 3px #F2A93B,0 0 0 9px rgba(242,169,59,.18)}
+@keyframes pulse{0%,100%{box-shadow:0 0 0 3px #F2A93B,0 0 0 6px rgba(242,169,59,.35)}50%{box-shadow:0 0 0 3px #F2A93B,0 0 0 16px rgba(242,169,59,0)}}
+.done{display:flex;align-items:center;gap:10px}
+.thumb{width:44px;height:44px;border-radius:12px;border:1px solid #DDDAD0;background:#fff;display:inline-flex;align-items:center;justify-content:center}
+.thumb[aria-pressed="true"]{border-color:#2D5BFF;background:#E6ECFF}
+[hidden]{display:none!important}
+@media (prefers-reduced-motion:reduce){.cursor,.ring,.knob,.track{transition:none}.ring[data-tone="gate"]{animation:none}}
+@media (max-width:600px){.cursor svg{display:none}.panel{left:12px;right:12px;width:auto}.bar{left:12px;right:12px;transform:none;max-width:none}}
+`;
+const CURSOR_SVG = `<svg width="30" height="34" viewBox="0 0 30 34" aria-hidden="true"><path d="M3 2 L26 19 L15 21 L10 32 Z" fill="#2D5BFF" fill-opacity=".6" stroke="#fff" stroke-width="2" stroke-linejoin="round"/></svg>`;
+const THUMB = `<svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="#111418" stroke-width="1.6" stroke-linejoin="round" aria-hidden="true"><path d="M6 9v8H3V9zM6 9l3.5-6.5c1.2 0 2 .9 1.8 2.1L10.8 8H16a1.5 1.5 0 0 1 1.5 1.8l-1.2 6A1.5 1.5 0 0 1 14.8 17H6"/></svg>`;
+function h(doc, tag, attrs = {}, text) {
+    const el = doc.createElement(tag);
+    for (const [k, v] of Object.entries(attrs))
+        el.setAttribute(k, v);
+    if (text !== undefined)
+        el.textContent = text;
+    return el;
+}
+/** The overlay: switch, destination box, ghost cursor, trip bar, rings. Lives in a shadow root. */
+export class OverlayUI {
+    on;
+    opts;
+    host;
+    root;
+    layer;
+    switchBtn;
+    panel;
+    bar;
+    cursor;
+    cap;
+    ringEl;
+    ringTarget = null;
+    raf = 0;
+    doc;
+    win;
+    destination = "";
+    constructor(win, on, opts = {}) {
+        this.on = on;
+        this.opts = opts;
+        this.win = win;
+        this.doc = win.document;
+        const d = this.doc;
+        this.host = h(d, "div", { id: "passenger-mode", "data-passenger-mode": "" });
+        this.root = this.host.attachShadow({ mode: "open" });
+        const style = h(d, "style");
+        style.textContent = CSS;
+        this.layer = h(d, "div", { class: "layer" });
+        if (opts.offset?.right != null)
+            this.layer.style.setProperty("--pm-right", `${opts.offset.right}px`);
+        if (opts.offset?.bottom != null)
+            this.layer.style.setProperty("--pm-bottom", `${opts.offset.bottom}px`);
+        this.ringEl = h(d, "div", { class: "ring", hidden: "" });
+        this.cursor = h(d, "div", { class: "cursor", hidden: "", "aria-hidden": "true" });
+        this.cursor.innerHTML = CURSOR_SVG;
+        this.cap = h(d, "span", { class: "cap" });
+        this.cursor.appendChild(this.cap);
+        this.switchBtn = h(d, "button", { class: "switch auto", type: "button", role: "switch", "aria-checked": "false" });
+        this.switchBtn.innerHTML = `<span class="t"><b>Passenger mode</b><span>Say where you're going. We'll do the clicking.</span></span><span class="track"><span class="knob"></span></span>`;
+        this.switchBtn.addEventListener("click", (e) => (this.switchBtn.getAttribute("aria-checked") === "true" ? this.on.close() : this.on.open(e)));
+        this.panel = h(d, "div", { class: "panel auto", role: "dialog", "aria-label": "Passenger mode", hidden: "" });
+        this.bar = h(d, "div", { class: "bar auto", role: "status", "aria-live": "polite", hidden: "" });
+        this.layer.append(this.ringEl, this.cursor, this.panel, this.bar, this.switchBtn);
+        if (opts.badge)
+            this.layer.appendChild(h(d, "span", { class: "badge" }, "by Passenger Mode"));
+        this.root.append(style, this.layer);
+        d.body.appendChild(this.host);
+    }
+    owns(node) {
+        if (!node)
+            return false;
+        if (node === this.host || this.host.contains(node))
+            return true;
+        const r = node.getRootNode?.();
+        return r === this.root;
+    }
+    destroy() {
+        this.win.cancelAnimationFrame?.(this.raf);
+        this.host.remove();
+    }
+    // ---------- rendering ----------
+    render(state, info) {
+        const d = this.doc;
+        if (info.destination)
+            this.destination = info.destination;
+        this.switchBtn.setAttribute("aria-checked", state === "off" ? "false" : "true");
+        const inTrip = state === "driving" || state === "paused" || state === "gate" || state === "handoff";
+        // On a handoff the passenger is typing: no ghost cursor saying what the driver is pressing.
+        this.cursor.hidden = !inTrip || state === "handoff";
+        if (!inTrip)
+            this.ring(null);
+        // Panel
+        this.panel.replaceChildren();
+        this.panel.hidden = !(state === "open" || state === "planning" || state === "ready" || state === "stuck" || state === "arrived");
+        if (state === "open")
+            this.renderOpen();
+        if (state === "planning")
+            this.panel.append(h(d, "h2", {}, "Planning the route…"), h(d, "p", { class: "small" }, this.destination));
+        if (state === "ready" && info.plan)
+            this.renderPlan(info.plan);
+        if (state === "stuck") {
+            const again = h(d, "button", { class: "primary", type: "button" }, "Try another destination");
+            again.addEventListener("click", () => this.on.notThis());
+            this.panel.append(h(d, "h2", {}, "Pulled over"), h(d, "p", {}, info.message ?? "I don't know this road."), again);
+        }
+        if (state === "arrived")
+            this.renderArrived(info.message ?? "");
+        // Trip bar
+        this.bar.replaceChildren();
+        this.bar.hidden = !inTrip;
+        if (inTrip) {
+            this.bar.dataset.tone = state === "driving" ? "drive" : state;
+            const title = state === "driving" ? "Passenger mode is driving" : state === "paused" ? "You have the wheel" : state === "gate" ? "Pulled over" : "Your turn";
+            this.bar.append(h(d, "span", { class: "dot" }), h(d, "b", {}, title));
+            const msg = state === "driving" ? info.caption : info.message;
+            if (msg)
+                this.bar.append(h(d, "span", { class: "msg" }, msg));
+            if (state === "driving") {
+                const take = h(d, "button", { type: "button" }, "Take the wheel");
+                take.addEventListener("click", () => this.on.takeWheel());
+                this.bar.append(take);
+            }
+            if (state === "paused" || state === "handoff") {
+                const res = h(d, "button", { type: "button", class: "resume" }, "Resume");
+                res.addEventListener("click", (e) => this.on.resume(e));
+                this.bar.append(res);
+            }
+            const end = h(d, "button", { type: "button" }, "End trip");
+            end.addEventListener("click", () => this.on.end());
+            this.bar.append(end);
+        }
+        if (state === "driving" && info.caption)
+            this.cap.textContent = info.caption;
+    }
+    renderOpen() {
+        const d = this.doc;
+        const form = h(d, "form", { class: "row" });
+        const label = h(d, "label", { for: "pm-dest" }, "Where to?");
+        const title = h(d, "h2");
+        title.appendChild(label);
+        const input = h(d, "input", { id: "pm-dest", name: "destination", autocomplete: "off", maxlength: "300", placeholder: "Say it your way: cancel my plan, invite Jo…" });
+        const btn = h(d, "button", { class: "primary", type: "submit" }, "Plan trip");
+        form.append(input, btn);
+        form.addEventListener("submit", (e) => { e.preventDefault(); if (input.value.trim())
+            this.on.plan(input.value, e); });
+        this.panel.append(title, form);
+        const sugg = (this.opts.suggestions ?? []).slice(0, 4);
+        if (sugg.length) {
+            const row = h(d, "div", { class: "row" });
+            for (const s of sugg) {
+                const chip = h(d, "button", { class: "chip", type: "button" }, s);
+                chip.addEventListener("click", (e) => this.on.plan(s, e));
+                row.appendChild(chip);
+            }
+            this.panel.append(h(d, "p", { class: "small" }, "Popular here"), row);
+        }
+        this.panel.append(h(d, "p", { class: "small" }, "Nothing moves until you press Go. Any click takes the wheel."));
+        setTimeout(() => input.focus(), 0);
+    }
+    renderPlan(plan) {
+        const d = this.doc;
+        this.panel.append(h(d, "p", { class: "small" }, `Where to: ${this.destination}`), h(d, "h2", {}, plan.summary));
+        const ol = h(d, "ol");
+        plan.steps.forEach((s, i) => {
+            const li = h(d, "li");
+            const gated = /you press it/i.test(s);
+            li.append(h(d, "span", { class: gated ? "n gate" : "n" }, String(i + 1)), d.createTextNode(s));
+            ol.appendChild(li);
+        });
+        const go = h(d, "button", { class: "primary go", type: "button" }, "Go");
+        go.addEventListener("click", (e) => this.on.go(e));
+        const not = h(d, "button", { class: "ghost", type: "button" }, "Not this");
+        not.addEventListener("click", () => this.on.notThis());
+        const row = h(d, "div", { class: "row" });
+        row.append(go, not);
+        this.panel.append(ol, row);
+        setTimeout(() => go.focus(), 0);
+    }
+    renderArrived(message) {
+        const d = this.doc;
+        const head = h(d, "div", { class: "done" });
+        head.innerHTML = `<svg width="28" height="28" viewBox="0 0 28 28" aria-hidden="true"><circle cx="14" cy="14" r="13" fill="#2D5BFF"/><path d="M8.5 14.5l3.5 3.5 7.5-8" stroke="#fff" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+        head.appendChild(h(d, "h2", {}, "You're here"));
+        const row = h(d, "div", { class: "row" });
+        const mk = (up) => {
+            const b = h(d, "button", { class: "thumb", type: "button", "aria-label": up ? "Good trip" : "Bad trip", "aria-pressed": "false" });
+            b.innerHTML = up ? THUMB : THUMB.replace("<svg ", '<svg style="transform:rotate(180deg)" ');
+            b.addEventListener("click", () => { this.on.rate(up); row.querySelectorAll(".thumb").forEach((t) => t.setAttribute("aria-pressed", "false")); b.setAttribute("aria-pressed", "true"); });
+            return b;
+        };
+        const done = h(d, "button", { class: "ghost", type: "button" }, "Done");
+        done.addEventListener("click", () => this.on.end());
+        row.append(h(d, "span", { class: "small" }, "How was the trip?"), mk(true), mk(false), done);
+        this.panel.append(head, h(d, "p", {}, message), row);
+    }
+    // ---------- cursor and ring ----------
+    moveCursor(el, caption) {
+        this.cap.textContent = caption;
+        this.cursor.hidden = false;
+        const r = el.getBoundingClientRect();
+        const x = Math.max(4, Math.min(r.left + Math.min(r.width * 0.6, 60), (this.win.innerWidth || 1024) - 40));
+        const y = Math.max(4, r.top + Math.min(r.height * 0.6, 24));
+        this.cursor.style.transform = `translate(${x}px, ${y}px)`;
+        const reduce = this.win.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+        return new Promise((res) => setTimeout(res, reduce ? 300 : 900));
+    }
+    ring(el, tone = "drive") {
+        this.ringTarget = el;
+        this.ringEl.hidden = !el;
+        if (!el) {
+            this.win.cancelAnimationFrame?.(this.raf);
+            return;
+        }
+        this.ringEl.dataset.tone = tone;
+        const tick = () => {
+            if (!this.ringTarget)
+                return;
+            const r = this.ringTarget.getBoundingClientRect();
+            Object.assign(this.ringEl.style, { left: `${r.left - 4}px`, top: `${r.top - 4}px`, width: `${r.width + 8}px`, height: `${r.height + 8}px` });
+            this.raf = this.win.requestAnimationFrame?.(tick) ?? 0;
+        };
+        tick();
+    }
+}