@eintrek/erp-shell 0.1.67 → 0.1.69

package/dist/chunks/guide-runtime-CFVYM8Xi.cjs

@@ -0,0 +1,3878 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var reactDom = require('react-dom');
+var dom = require('@floating-ui/dom');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/**
+ * Route and API-path patterns for tour steps.
+ *
+ * No runtime imports: the tests run this file in Node as it is.
+ */
+const trimSlash = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+function splitPattern(pattern) {
+    const q = pattern.indexOf("?");
+    if (q < 0)
+        return { path: pattern, query: new URLSearchParams() };
+    return { path: pattern.slice(0, q), query: new URLSearchParams(pattern.slice(q + 1)) };
+}
+function paramName(segment) {
+    const bracket = /^\[([A-Za-z0-9_]+)\]$/.exec(segment);
+    if (bracket)
+        return bracket[1];
+    const colon = /^:([A-Za-z0-9_]+)$/.exec(segment);
+    return colon ? colon[1] : null;
+}
+function safeDecode(s) {
+    try {
+        return decodeURIComponent(s);
+    }
+    catch {
+        return s;
+    }
+}
+/** `[[name]]`: a segment that may be absent (`/me/[[org]]/attendance`). */
+function optionalName(segment) {
+    const m = /^\[\[([A-Za-z0-9_]+)\]\]$/.exec(segment);
+    return m ? m[1] : null;
+}
+/**
+ * Page segments against pattern segments; `[[x]]` may match nothing. A
+ * `code` param, when `code` is given, must be that code.
+ */
+function matchPage(want, wi, have, hi, params, code) {
+    if (wi === want.length)
+        return hi === have.length;
+    const bind = (name, raw) => {
+        const v = safeDecode(raw);
+        if (name === "code" && code !== undefined && v !== code)
+            return false;
+        params[name] = v;
+        if (matchPage(want, wi + 1, have, hi + 1, params, code))
+            return true;
+        delete params[name];
+        return false;
+    };
+    const opt = optionalName(want[wi]);
+    if (opt) {
+        // Present first (`/me/O1/attendance`), then absent (`/me/attendance`).
+        if (hi < have.length && have[hi] && bind(opt, have[hi]))
+            return true;
+        return matchPage(want, wi + 1, have, hi, params, code);
+    }
+    if (hi >= have.length)
+        return false;
+    const name = paramName(want[wi]);
+    if (name)
+        return !!have[hi] && bind(name, have[hi]);
+    return want[wi] === have[hi] && matchPage(want, wi + 1, have, hi + 1, params, code);
+}
+/**
+ * Matches a Next-style page pattern ("/[code]/employee/[id]", optionally
+ * "?tab=job") against a path and query. `[code]`, when given, must be the
+ * organisation code. `[[x]]` is a segment that may be absent. Returns the
+ * params, or null.
+ */
+function matchRoute(pattern, pathname, search, code) {
+    const { path, query } = splitPattern(pattern);
+    const want = trimSlash(path).split("/");
+    const have = trimSlash(pathname || "/").split("/");
+    const params = {};
+    if (!matchPage(want, 0, have, 0, params, code))
+        return null;
+    if ([...query.keys()].length > 0) {
+        const s = search instanceof URLSearchParams ? search : new URLSearchParams(search ?? "");
+        for (const [k, v] of query.entries()) {
+            if (s.get(k) !== v)
+                return null;
+        }
+    }
+    return params;
+}
+/**
+ * Fills a page pattern's params ("/[code]/x/[id]" → "/O1/x/42"); null if one
+ * is missing. A `[[x]]` segment without a value is left out.
+ */
+function fillRoute(pattern, params) {
+    const { path, query } = splitPattern(pattern);
+    const out = [];
+    for (const seg of path.split("/")) {
+        const opt = optionalName(seg);
+        if (opt) {
+            const v = params[opt];
+            if (v)
+                out.push(encodeURIComponent(v));
+            continue;
+        }
+        const name = paramName(seg);
+        if (!name) {
+            out.push(seg);
+            continue;
+        }
+        const v = params[name];
+        if (!v)
+            return null;
+        out.push(encodeURIComponent(v));
+    }
+    const qs = query.toString();
+    return out.join("/") + (qs ? `?${qs}` : "");
+}
+/**
+ * The path of a request, without origin, base URL query or hash:
+ * ("/shifts/4", "https://hr-api/api/v1") → "/api/v1/shifts/4".
+ */
+function requestPath(url, baseURL) {
+    const raw = url ?? "";
+    let full = raw;
+    if (!/^[a-z][a-z0-9+.-]*:\/\//i.test(raw) && baseURL) {
+        full = baseURL.replace(/\/+$/, "") + "/" + raw.replace(/^\/+/, "");
+    }
+    try {
+        return trimSlash(new URL(full, "http://local.invalid").pathname);
+    }
+    catch {
+        return trimSlash(full.split(/[?#]/)[0] || "/");
+    }
+}
+/**
+ * Whether a request path matches a step's API path: the pattern's segments
+ * must be the END of the path ("/shifts/[id]" matches "/api/v1/shifts/42");
+ * `[x]`/`:x` is one segment, `*` any number (including none). A RegExp is
+ * tested against the whole path.
+ */
+function matchApiPath(pattern, path) {
+    if (pattern instanceof RegExp)
+        return pattern.test(path);
+    const want = trimSlash(pattern).split("/").filter(Boolean);
+    const have = trimSlash(path).split("/").filter(Boolean);
+    // Try every suffix of the path as the place the pattern starts.
+    for (let start = 0; start <= have.length; start++) {
+        if (matchSegments(want, 0, have, start))
+            return true;
+    }
+    return false;
+}
+function matchSegments(want, wi, have, hi) {
+    if (wi === want.length)
+        return hi === have.length;
+    const seg = want[wi];
+    if (seg === "*") {
+        for (let k = hi; k <= have.length; k++) {
+            if (matchSegments(want, wi + 1, have, k))
+                return true;
+        }
+        return false;
+    }
+    if (hi >= have.length)
+        return false;
+    if (paramName(seg) || seg === have[hi])
+        return matchSegments(want, wi + 1, have, hi + 1);
+    return false;
+}
+/** "2xx" or an exact status. */
+function matchStatus(want, status) {
+    if (want === undefined || want === "2xx")
+        return status >= 200 && status < 300;
+    return status === want;
+}
+
+/**
+ * The tour's event bus and anchor helper — the parts an app calls.
+ *
+ * - `guideAnchor(key, id?)` → `{ "data-guide": key, "data-guide-id"?: id }`
+ * - `emitGuideEvent(name, detail?)` → window CustomEvent `erp:guide:<name>`
+ * - `reportApiEvent(responseOrError)` → window CustomEvent `erp:api`, which
+ *   the shell's own axios instance already sends for every answer. An app
+ *   with a second axios instance calls it from that instance's interceptor.
+ * - `reportApiCall({ method, url, status, data })` → the same event, for a
+ *   client built on plain `fetch` (erp-liff's hrPost).
+ *
+ * Only method, path, status, the saved record's id and (on a refusal) the
+ * server's message go on the bus — never a request or response body.
+ *
+ * No runtime imports beyond sibling pure modules.
+ */
+const GUIDE_ATTRIBUTE = "data-guide";
+const GUIDE_ID_ATTRIBUTE = "data-guide-id";
+const GUIDE_LAYER_ATTRIBUTE = "data-erp-guide-layer";
+const API_EVENT = "erp:api";
+const GUIDE_EVENT_PREFIX = "erp:guide:";
+/** Spread onto the element a tour step points at. */
+function guideAnchor(key, id) {
+    return id === undefined || id === null || id === ""
+        ? { [GUIDE_ATTRIBUTE]: key }
+        : { [GUIDE_ATTRIBUTE]: key, [GUIDE_ID_ATTRIBUTE]: String(id) };
+}
+/** Announces an app event a step can wait for (`advanceOn: { event: name }`). */
+function emitGuideEvent(name, detail) {
+    if (typeof window === "undefined" || !name)
+        return;
+    const clean = {};
+    for (const [k, v] of Object.entries(detail ?? {})) {
+        if (typeof v === "string" || typeof v === "number")
+            clean[k] = String(v);
+    }
+    try {
+        window.dispatchEvent(new CustomEvent(GUIDE_EVENT_PREFIX + name, { detail: clean }));
+    }
+    catch {
+        /* never let the tour break the app */
+    }
+}
+const isRecord$1 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function idOf(data) {
+    const pick = (v) => typeof v === "string" && v ? v : typeof v === "number" ? String(v) : undefined;
+    if (!isRecord$1(data))
+        return undefined;
+    return pick(data.id) ?? (isRecord$1(data.data) ? pick(data.data.id) : undefined);
+}
+function messageOf(data) {
+    if (!isRecord$1(data))
+        return undefined;
+    const m = data.message ?? (isRecord$1(data.error) ? data.error.message : data.error);
+    return typeof m === "string" && m.trim() ? m.trim().slice(0, 200) : undefined;
+}
+/** The bus detail for an axios answer or error; null when it is neither. */
+function apiEventDetail(responseOrError) {
+    if (!isRecord$1(responseOrError))
+        return null;
+    const err = responseOrError;
+    // An AxiosError has .response (or none: network failure) and .config.
+    const isError = "isAxiosError" in responseOrError || ("response" in responseOrError && !("data" in responseOrError));
+    const res = isError ? err.response : responseOrError;
+    const config = (res?.config ?? err.config);
+    if (!config)
+        return null;
+    const status = typeof res?.status === "number" ? res.status : 0;
+    const detail = {
+        method: (config.method ?? "get").toUpperCase(),
+        path: requestPath(config.url, config.baseURL),
+        status,
+    };
+    if (status >= 200 && status < 300) {
+        const id = idOf(res?.data);
+        if (id)
+            detail.id = id;
+    }
+    else {
+        const msg = messageOf(res?.data);
+        if (msg)
+            detail.message = msg;
+    }
+    return detail;
+}
+/** Puts an axios answer (or error) on the bus. Safe to call with anything. */
+function reportApiEvent(responseOrError) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const detail = apiEventDetail(responseOrError);
+        if (detail)
+            window.dispatchEvent(new CustomEvent(API_EVENT, { detail }));
+    }
+    catch {
+        /* never let the tour break the app */
+    }
+}
+/** The bus detail for a fetch-style report; null when it has no URL. */
+function apiCallDetail(call) {
+    if (!call || typeof call.url !== "string" || !call.url)
+        return null;
+    const status = typeof call.status === "number" && Number.isFinite(call.status) ? call.status : 0;
+    const detail = {
+        method: (call.method || "GET").toUpperCase(),
+        path: requestPath(call.url, call.baseURL),
+        status,
+    };
+    if (status >= 200 && status < 300) {
+        const id = idOf(call.data);
+        if (id)
+            detail.id = id;
+    }
+    else {
+        const msg = messageOf(call.data);
+        if (msg)
+            detail.message = msg;
+    }
+    return detail;
+}
+/**
+ * Puts a request answered through plain `fetch` on the bus (`{ api }`
+ * triggers and `completeOn`). Call it once per answer, refusals and network
+ * failures (status 0) included. Safe to call with anything.
+ */
+function reportApiCall(call) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const detail = apiCallDetail(call);
+        if (detail)
+            window.dispatchEvent(new CustomEvent(API_EVENT, { detail }));
+    }
+    catch {
+        /* never let the tour break the app */
+    }
+}
+
+let entry = null;
+let openPanelImpl = null;
+const listeners = new Set();
+function emit() {
+    listeners.forEach(l => l());
+}
+function subscribe(l) {
+    listeners.add(l);
+    return () => {
+        listeners.delete(l);
+    };
+}
+/** Called by the host: the entry to show (null: none), and how to open the panel. */
+function publishGuideEntry(next, openPanel) {
+    const same = (next === null && entry === null) ||
+        (next !== null && entry !== null && next.done === entry.done && next.total === entry.total);
+    openPanelImpl = openPanel;
+    if (!same) {
+        entry = next;
+        emit();
+    }
+}
+/** Opens the tour's quest panel, when this user has a tour here. */
+function openGuidePanel() {
+    openPanelImpl?.();
+}
+/** The "?" menu's entry, or null when there is no tour for this user. */
+function useGuideEntry() {
+    return React.useSyncExternalStore(subscribe, () => entry, () => null);
+}
+
+/* ------------------------------------------------------------------ */
+/* Copy                                                                 */
+/* ------------------------------------------------------------------ */
+const COPY = {
+    fieldFix: "แก้ในช่องที่ไฮไลต์ แล้วกด ถัดไป",
+    saveFailed: "บันทึกไม่สำเร็จ",
+    blank: "ยังไม่ได้พิมพ์",
+    exitToast: "ออกจากไกด์แล้ว",
+    replayDone: "ทบทวนภารกิจเสร็จแล้ว",
+    replayEnded: "จบการทบทวนแล้ว",
+    hiddenToast: "ซ่อนแล้ว",
+    aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
+    bridgeTitle: "กดปุ่มเมนู",
+    bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
+};
+/* ------------------------------------------------------------------ */
+/* Helpers                                                              */
+/* ------------------------------------------------------------------ */
+const BRIDGE_TARGET = "shell.menu-toggle";
+function initialGuideState(audience, progress) {
+    return {
+        audience,
+        progress,
+        screen: { name: "idle" },
+        panelOpen: false,
+        justDone: null,
+        chipPulse: 0,
+        nudge: 0,
+        gateDismissed: false,
+        replayPage: null,
+        pendingCelebrate: [],
+    };
+}
+function findMission(suite, key) {
+    return key ? suite.missions.find(m => m.key === key) : undefined;
+}
+/**
+ * Whether the user has this mission (GuideMission.visible). Without the
+ * predicate, yes; with it, only `true` (undefined — not known yet — and a
+ * throw hide it).
+ */
+function missionShown(m, ctx) {
+    if (!m.visible)
+        return true;
+    try {
+        return m.visible(ctx) === true;
+    }
+    catch {
+        return false;
+    }
+}
+/** The missions this user has, in order: what the panel draws and n/N counts. */
+function shownMissions(suite, ctx) {
+    return suite.missions.filter(m => missionShown(m, ctx));
+}
+/** The mission's number among the shown ones (1-based); its place in the suite when hidden. */
+function missionNumber(suite, key, ctx) {
+    const shown = shownMissions(suite, ctx);
+    const i = shown.findIndex(m => m.key === key);
+    return i >= 0 ? i + 1 : suite.missions.findIndex(m => m.key === key) + 1;
+}
+function guideContext(env, data, params = {}) {
+    return {
+        code: env.code,
+        pathname: env.pathname,
+        search: env.search,
+        params: { code: env.code, ...params },
+        data,
+        facts: env.facts,
+        can: env.can,
+        visible: (anchor) => env.isVisible(anchor),
+    };
+}
+function resolveText(t, ctx) {
+    if (t === undefined)
+        return "";
+    try {
+        return typeof t === "function" ? t(ctx) : t;
+    }
+    catch {
+        return "";
+    }
+}
+/** Runs an app predicate; a throw counts as `fallback`. */
+function safe(fn, fallback) {
+    try {
+        return fn();
+    }
+    catch {
+        return fallback;
+    }
+}
+function triggersOf(step) {
+    if (!step.advanceOn)
+        return [];
+    return Array.isArray(step.advanceOn) ? step.advanceOn : [step.advanceOn];
+}
+function stepKind(step) {
+    return step.kind ?? "click";
+}
+/** The last checkpoint at or before `index` (a mission's first step always is one). */
+function checkpointAtOrBefore(steps, index) {
+    for (let i = Math.min(index, steps.length - 1); i > 0; i--) {
+        if (steps[i].checkpoint)
+            return i;
+    }
+    return 0;
+}
+function targetIdOf(step, ctx) {
+    if (typeof step.targetId === "function")
+        return safe(() => step.targetId(ctx), undefined);
+    return step.targetId;
+}
+/**
+ * A commit step with nothing to save: its button is not on the page, and what
+ * is saved is (GuideStep.nothingToSave).
+ */
+function nothingToSaveHolds(step, env, ctx) {
+    const n = step.nothingToSave;
+    if (!n || !step.target)
+        return false;
+    return !env.isVisible(step.target, targetIdOf(step, ctx)) && env.isVisible(n.target);
+}
+/**
+ * The step as it is shown: a commit step with nothing to save is a read step
+ * on what is saved, with its own title (ถัดไป moves on).
+ */
+function shownStep(step, nothingToSave) {
+    const n = step.nothingToSave;
+    if (!nothingToSave || !n)
+        return step;
+    return {
+        key: step.key,
+        kind: "view",
+        target: n.target,
+        title: n.title,
+        why: n.why,
+        allow: n.allow,
+        route: step.route,
+        resumeUrl: step.resumeUrl,
+        checkpoint: step.checkpoint,
+        timeoutMs: step.timeoutMs,
+        abort: step.abort,
+    };
+}
+/** Whether the step's target (or the bridge's) is on screen. */
+function stepTargetVisible(step, env, ctx, bridge) {
+    if (bridge)
+        return env.isVisible(BRIDGE_TARGET);
+    if (!step.target)
+        return true;
+    return env.isVisible(step.target, targetIdOf(step, ctx));
+}
+/** The anchor the spotlight is on for the current step. */
+function spotlightTarget(step, ctx, bridge) {
+    if (bridge)
+        return { anchor: BRIDGE_TARGET };
+    if (!step.target)
+        return null;
+    return { anchor: step.target, id: targetIdOf(step, ctx) };
+}
+function needsBridge(step, env, ctx) {
+    return (!!step.target &&
+        step.target.startsWith("nav.") &&
+        !env.sidebarOpen &&
+        !env.isVisible(step.target, targetIdOf(step, ctx)));
+}
+/**
+ * The page a step happens on: its own `route`, or else where the steps before
+ * it left the user (an earlier step's route trigger or route). Undefined when
+ * nothing says (a mission's first steps, which work from any page).
+ */
+function stepHomeRoute(steps, index) {
+    for (let j = Math.min(index, steps.length - 1); j >= 0; j--) {
+        const s = steps[j];
+        if (j < index) {
+            // What this earlier step moved the user to comes after where it happened.
+            const t = triggersOf(s).find((x) => "route" in x);
+            if (t)
+                return t.route;
+        }
+        if (s.route)
+            return s.route;
+    }
+    return undefined;
+}
+/**
+ * The page a step is shown on, or the "ทำต่อ" card when the user is elsewhere:
+ * its route; for a checkpoint without one, the page the steps before it lead
+ * to (so going back to it from another page cannot loop).
+ */
+function placeRoute(steps, index) {
+    const step = steps[index];
+    if (step.route)
+        return step.route;
+    return step.checkpoint ? stepHomeRoute(steps, index) : undefined;
+}
+/** The user is not on the page the step happens on. */
+function offRoute(steps, index, env) {
+    const home = stepHomeRoute(steps, index);
+    return !!home && !matchRoute(home, env.pathname, env.search, env.code);
+}
+/** What puts the page back when a replay ends at this step (see GuideStep.abort). */
+function abortActionsFor(mission, index) {
+    const step = mission.steps[index];
+    const own = step?.abort ?? mission.abort;
+    if (own)
+        return Array.isArray(own) ? own : [own];
+    // Default: Escape to the dialog the tour opened; nothing on a stable page.
+    if (!step || index === 0 || step.checkpoint)
+        return [];
+    return [{ escape: true }];
+}
+/** Every anchor the mission's abort actions press. */
+function abortAnchorsOf(mission) {
+    const out = new Set();
+    const add = (a) => {
+        for (const x of a ? (Array.isArray(a) ? a : [a]) : [])
+            if ("click" in x)
+                out.add(x.click);
+    };
+    add(mission.abort);
+    for (const st of mission.steps)
+        add(st.abort);
+    return Array.from(out);
+}
+/**
+ * What the replay may do to put the page back: not press what the user had
+ * open before it started, not Escape out of a dialog that was already open,
+ * and no app event while anything of theirs was open.
+ */
+function abortActionsLeft(actions, before) {
+    if (!before)
+        return actions;
+    const busy = before.anchors.length > 0 || before.dialog;
+    return actions.filter(a => "click" in a ? !before.anchors.includes(a.click) : "escape" in a ? !before.dialog : !busy);
+}
+function routeParamsFor(step, env) {
+    if (!step.route)
+        return {};
+    return matchRoute(step.route, env.pathname, env.search, env.code) ?? {};
+}
+/** A state trigger (route, visible) that holds now; the capture event for it. */
+function stateTriggerHolds(step, env) {
+    for (const t of triggersOf(step)) {
+        if ("route" in t) {
+            const params = matchRoute(t.route, env.pathname, env.search, env.code);
+            if (params)
+                return { route: { pathname: env.pathname, params } };
+        }
+        else if ("visible" in t) {
+            if (env.isVisible(t.visible))
+                return {};
+        }
+    }
+    return null;
+}
+/** Any trigger that holds on a sync (route, visible, and — once armed — hidden). */
+function syncTriggerHolds(step, env, armed) {
+    const held = stateTriggerHolds(step, env);
+    if (held)
+        return held;
+    if (!armed)
+        return null;
+    for (const t of triggersOf(step)) {
+        if ("hidden" in t && !env.isVisible(t.hidden))
+            return {};
+    }
+    return null;
+}
+/** Whether any of the step's `hidden` anchors is on screen now. */
+function hiddenAnchorShown(step, env) {
+    return triggersOf(step).some(t => "hidden" in t && env.isVisible(t.hidden));
+}
+function missionCount(suite, ctx) {
+    return shownMissions(suite, ctx).length;
+}
+function missionSettled(m, entry, ctx) {
+    if (entry?.status === "done")
+        return true;
+    if (m.optional && entry?.status === "skipped")
+        return true;
+    return safe(() => m.alreadyDone?.(ctx) === true, false);
+}
+/** Settled missions among the shown ones (the n of n/N). */
+function settledCount(suite, progress, ctx) {
+    return shownMissions(suite, ctx).filter(m => missionSettled(m, progress.missions[m.key], ctx)).length;
+}
+function gateState(suite, ctx) {
+    if (!suite.gate)
+        return true;
+    return safe(() => suite.gate.ready(ctx), undefined);
+}
+function missionViews(suite, progress, ctx) {
+    const gate = gateState(suite, ctx);
+    const settled = (key) => {
+        const m = findMission(suite, key);
+        // A prerequisite this user does not have never locks anything.
+        return !!m && (missionSettled(m, progress.missions[key], ctx) || !missionShown(m, ctx));
+    };
+    let nextMarked = false;
+    return shownMissions(suite, ctx).map(mission => {
+        const entry = progress.missions[mission.key];
+        let view;
+        if (entry?.status === "done")
+            view = "done";
+        else if (safe(() => mission.alreadyDone?.(ctx) === true, false))
+            view = "already";
+        else if (entry?.status === "skipped")
+            view = "skipped";
+        else if (entry?.status === "active")
+            view = "active";
+        else if (gate === false)
+            view = "waiting";
+        else if ((mission.after ?? []).some(k => !settled(k)))
+            view = "locked";
+        else
+            view = "todo";
+        if (!nextMarked && (view === "todo" || view === "active" || view === "skipped")) {
+            nextMarked = true;
+            if (view === "todo")
+                view = "next";
+        }
+        return { mission, view, entry };
+    });
+}
+/** The mission the celebration offers next: the first one not settled and not locked. */
+function nextMissionKey(suite, progress, ctx) {
+    for (const v of missionViews(suite, progress, ctx)) {
+        if (v.view === "next" || v.view === "todo" || v.view === "active" || v.view === "skipped") {
+            return v.mission.key;
+        }
+    }
+    return null;
+}
+/** Whether the welcome should open by itself (with `ctx`: only when a mission is shown). */
+function welcomeDue(state, suite, ctx) {
+    return (state.audience === "forced" &&
+        state.progress.welcome === "not_seen" &&
+        state.progress.status === "in_progress" &&
+        !state.progress.mission_key &&
+        state.screen.name === "idle" &&
+        (ctx ? shownMissions(suite, ctx).length : suite.missions.length) > 0);
+}
+/** Whether the floating "ภารกิจ n/N" chip shows. */
+function chipVisible(state, suite, ctx) {
+    return (state.audience !== "none" &&
+        state.progress.welcome !== "not_seen" &&
+        state.progress.status !== "completed" &&
+        !state.progress.chip_hidden &&
+        state.screen.name === "idle" &&
+        !state.panelOpen &&
+        settledCount(suite, state.progress, ctx) < missionCount(suite, ctx));
+}
+function withProgress(d, patch) {
+    d.state = { ...d.state, progress: { ...d.state.progress, ...patch } };
+}
+function setMission(d, key, entry) {
+    withProgress(d, { missions: { ...d.state.progress.missions, [key]: entry } });
+}
+function setScreen(d, screen) {
+    d.state = { ...d.state, screen };
+}
+function save(d, immediate = false) {
+    const existing = d.effects.find(e => e.type === "save");
+    if (existing)
+        existing.immediate = existing.immediate || immediate;
+    else
+        d.effects.push({ type: "save", immediate });
+}
+function announceStep(d, suite, env) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = shownStep(mission.steps[s.index], s.nothingToSave);
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    const title = s.bridge ? COPY.bridgeTitle : plainTitle(resolveText(step.title, ctx));
+    const why = s.bridge ? COPY.bridgeWhy(suite.appName) : plainTitle(resolveText(step.why, ctx));
+    d.effects.push({
+        type: "announce",
+        text: `ขั้นที่ ${s.index + 1} จาก ${mission.steps.length}. ${title}${why ? `. ${why}` : ""}`,
+    });
+}
+/** "กด [บันทึก]" → "กด บันทึก" (for screen readers). */
+function plainTitle(t) {
+    return t.replace(/\[([^\]]+)\]/g, "$1");
+}
+/**
+ * Enter step `index` of the mission (or the first one after it that is not
+ * skipped, forbidden or already passed). Past the end, the mission is over.
+ */
+function enterStep(d, suite, env, mission, index, opts) {
+    const steps = mission.steps;
+    let i = Math.max(0, index);
+    let firstPass = true;
+    while (i < steps.length) {
+        const step = steps[i];
+        const params = routeParamsFor(step, env);
+        const ctx = guideContext(env, d.state.progress.context, params);
+        if (step.requires && !safe(() => env.can(step.requires), true)) {
+            // A replay writes nothing, not even what went wrong.
+            if (!opts.replay)
+                withProgress(d, { last_error: `forbidden:${step.requires}`.slice(0, 128) });
+            i++;
+            continue;
+        }
+        if (step.skipIf && safe(() => step.skipIf(ctx), false)) {
+            i++;
+            continue;
+        }
+        const autoPass = step.autoPass !== false && !(firstPass && opts.noAutoPass);
+        firstPass = false;
+        if (autoPass && stepKind(step) !== "input" && stepKind(step) !== "view") {
+            const held = stateTriggerHolds(step, env);
+            if (held) {
+                captureInto(d, step, held, ctx);
+                i++;
+                continue;
+            }
+        }
+        break;
+    }
+    if (i >= steps.length) {
+        finishMission(d, suite, env, mission, opts.replay);
+        return;
+    }
+    const step = steps[i];
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    const where = placeRoute(steps, i);
+    const away = !!where && !matchRoute(where, env.pathname, env.search, env.code);
+    const bridge = !away && needsBridge(step, env, ctx);
+    setScreen(d, {
+        name: "step",
+        mission: mission.key,
+        index: i,
+        replay: opts.replay,
+        bridge,
+        phase: away ? "away" : "waiting",
+        error: opts.error ?? null,
+        confirmExit: false,
+        misses: 0,
+        armed: hiddenAnchorShown(step, env),
+        nothingToSave: !away && !bridge && nothingToSaveHolds(step, env, ctx),
+    });
+    if (!opts.replay) {
+        const cp = checkpointAtOrBefore(steps, i);
+        // Done outside the tour meanwhile (completeOn): it stays done.
+        if (d.state.progress.missions[mission.key]?.status !== "done") {
+            setMission(d, mission.key, { status: "active", step_key: step.key });
+        }
+        withProgress(d, {
+            mission_key: mission.key,
+            step_key: step.key,
+            step_index: i,
+            checkpoint_key: steps[cp].key,
+        });
+        save(d);
+    }
+    if (!away) {
+        // The target may already be there.
+        markReadyIfVisible(d, suite, env);
+    }
+}
+/**
+ * The save button came (a change) or went (nothing left to save): show the
+ * commit step's other form. A ready step whose new target is not there is
+ * left to the target-lost path (back to the checkpoint).
+ */
+function setNothingToSave(d, suite, env, on) {
+    const s = d.state.screen;
+    if (s.name !== "step" || s.nothingToSave === on)
+        return;
+    setScreen(d, { ...s, nothingToSave: on, error: null });
+    if (s.phase !== "ready") {
+        markReadyIfVisible(d, suite, env);
+        return;
+    }
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = shownStep(mission.steps[s.index], on);
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    if (stepTargetVisible(step, env, ctx, s.bridge))
+        announceStep(d, suite, env);
+}
+function markReadyIfVisible(d, suite, env) {
+    const s = d.state.screen;
+    if (s.name !== "step" || s.phase !== "waiting")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = shownStep(mission.steps[s.index], s.nothingToSave);
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    if (stepTargetVisible(step, env, ctx, s.bridge)) {
+        setScreen(d, { ...s, phase: "ready" });
+        announceStep(d, suite, env);
+        if (s.error)
+            d.effects.push({ type: "announce", text: s.error.title });
+    }
+}
+/** Where to send the user to resume at a step: its resumeUrl, or its page filled in. */
+function resumeHref(mission, index, d, env) {
+    const step = mission.steps[index];
+    const ctx = guideContext(env, d.state.progress.context);
+    const where = placeRoute(mission.steps, index);
+    return (safe(() => step.resumeUrl?.(ctx), undefined) ??
+        (where ? fillRoute(where, { ...d.state.progress.context, code: env.code }) : null));
+}
+/**
+ * The user left the page the step happens on (a link, the browser's back):
+ * back to the last checkpoint. On another page that is the "ทำต่อ" card;
+ * `navigate` (ลองอีกครั้ง) goes there at once.
+ */
+function recoverOffRoute(d, suite, env, navigate) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const cp = checkpointAtOrBefore(mission.steps, s.index);
+    enterStep(d, suite, env, mission, cp, { replay: s.replay });
+    const now = d.state.screen;
+    if (navigate && now.name === "step" && now.phase === "away") {
+        const href = resumeHref(mission, now.index, d, env);
+        if (href)
+            d.effects.push({ type: "navigate", href });
+    }
+}
+function captureInto(d, step, e, ctx) {
+    if (!step.capture)
+        return;
+    const got = safe(() => step.capture(e, ctx), undefined);
+    if (!got)
+        return;
+    const clean = {};
+    for (const [k, v] of Object.entries(got)) {
+        if (typeof v === "string" && v)
+            clean[k] = v;
+    }
+    if (Object.keys(clean).length) {
+        withProgress(d, { context: { ...d.state.progress.context, ...clean } });
+    }
+}
+function advance(d, suite, env, capture) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = mission.steps[s.index];
+    if (capture) {
+        captureInto(d, step, capture, guideContext(env, d.state.progress.context, routeParamsFor(step, env)));
+    }
+    enterStep(d, suite, env, mission, s.index + 1, { replay: s.replay });
+}
+function finishMission(d, suite, env, mission, replay) {
+    if (replay) {
+        setScreen(d, { name: "idle" });
+        d.effects.push({ type: "toast", text: COPY.replayDone });
+        return;
+    }
+    setMission(d, mission.key, { status: "done", step_key: null, skipped_step: null });
+    withProgress(d, {
+        mission_key: null,
+        step_key: null,
+        step_index: 0,
+        checkpoint_key: null,
+        context: {},
+        last_error: null,
+    });
+    const ctx = guideContext(env, {});
+    const all = settledCount(suite, d.state.progress, ctx) >= missionCount(suite, ctx);
+    if (all)
+        withProgress(d, { status: "completed" });
+    // This celebration (or the finish) covers a passive one for the same mission.
+    const pending = all ? [] : (d.state.pendingCelebrate ?? []).filter(k => k !== mission.key);
+    d.state = { ...d.state, pendingCelebrate: pending };
+    showCelebration(d, suite, mission, all, ctx);
+    save(d, true);
+}
+/** The celebration (or the finish) for a mission just done, and what it announces. */
+function showCelebration(d, suite, mission, all, ctx) {
+    setScreen(d, all ? { name: "complete" } : { name: "celebrate", mission: mission.key });
+    d.state = { ...d.state, justDone: mission.key };
+    const n = settledCount(suite, d.state.progress, ctx);
+    const N = missionCount(suite, ctx);
+    const title = resolveText(mission.done?.title, ctx) || `${mission.title}แล้ว`;
+    d.effects.push({
+        type: "announce",
+        text: all
+            ? `ครบ ${N} ภารกิจ ${resolveText(suite.complete.title, ctx) || "บริษัทพร้อมใช้งานแล้ว"}`
+            : `ภารกิจสำเร็จ ${title} เสร็จ ${n} จาก ${N} ภารกิจ`,
+    });
+}
+/** A mission's `completeOn` triggers, as a list. */
+function completeTriggersOf(mission) {
+    if (!mission.completeOn)
+        return [];
+    return Array.isArray(mission.completeOn) ? mission.completeOn : [mission.completeOn];
+}
+/** Every app event name a suite's `completeOn` listens for. */
+function passiveEventNames(suite) {
+    const out = new Set();
+    for (const m of suite.missions) {
+        for (const t of completeTriggersOf(m))
+            if ("event" in t && t.event)
+                out.add(t.event);
+    }
+    return Array.from(out);
+}
+/** Missions whose `completeOn` this signal meets ({ api } and { event } only). */
+function passiveMatches(suite, sig) {
+    if (sig.kind !== "api" && sig.kind !== "event")
+        return [];
+    return suite.missions.filter(m => completeTriggersOf(m).some(t => {
+        if ("api" in t && sig.kind === "api") {
+            if (t.api.method && t.api.method.toUpperCase() !== sig.method.toUpperCase())
+                return false;
+            return matchApiPath(t.api.path, sig.path) && matchStatus(t.api.status, sig.status);
+        }
+        return "event" in t && sig.kind === "event" && t.event === sig.name;
+    }));
+}
+/**
+ * A mission done outside the tour: done with the ordinary save; its
+ * celebration waits for the next idle moment (idleCelebrate). A mission being
+ * played right now is left to its own end (which celebrates it); one already
+ * done changes nothing.
+ */
+function passiveDone(d, suite, env, mission) {
+    if (d.state.progress.missions[mission.key]?.status === "done")
+        return;
+    const s = d.state.screen;
+    const playing = s.name === "step" && !s.replay && s.mission === mission.key;
+    setMission(d, mission.key, { status: "done", step_key: null, skipped_step: null });
+    if (!playing && d.state.progress.mission_key === mission.key) {
+        // Saved as the one in progress (not running now): nothing to resume.
+        withProgress(d, { mission_key: null, step_key: null, step_index: 0, checkpoint_key: null, context: {} });
+    }
+    const ctx = guideContext(env, {});
+    if (!playing && settledCount(suite, d.state.progress, ctx) >= missionCount(suite, ctx)) {
+        withProgress(d, { status: "completed" });
+    }
+    const pending = d.state.pendingCelebrate ?? [];
+    if (missionShown(mission, ctx) && !pending.includes(mission.key)) {
+        d.state = { ...d.state, pendingCelebrate: [...pending, mission.key] };
+    }
+    save(d, true);
+}
+function startMission(d, suite, env, key, replay) {
+    const mission = findMission(suite, key);
+    if (!mission || mission.steps.length === 0)
+        return;
+    const entry = d.state.progress.missions[key];
+    // A mission already done is only ever replayed; its done status stays.
+    const isReplay = replay || entry?.status === "done";
+    const before = d.state.progress;
+    d.state = { ...d.state, panelOpen: false, justDone: null };
+    if (d.state.progress.welcome === "not_seen")
+        withProgress(d, { welcome: "started" });
+    if (!isReplay && d.state.progress.mission_key !== key)
+        withProgress(d, { context: {} });
+    if (!isReplay && d.state.progress.status !== "in_progress") {
+        // Picking up an optional mission after the tour completed.
+        withProgress(d, { status: "in_progress" });
+    }
+    // Resume where it was left: back to the checkpoint at or before it.
+    let index = 0;
+    if (!isReplay && entry && (entry.status === "active" || entry.status === "skipped")) {
+        const at = mission.steps.findIndex(s => s.key === (entry.step_key ?? entry.skipped_step));
+        if (at > 0)
+            index = checkpointAtOrBefore(mission.steps, at);
+    }
+    if (isReplay) {
+        // What is open now is the user's: ending the replay leaves it alone.
+        d.state = {
+            ...d.state,
+            replayPage: {
+                mission: key,
+                anchors: abortAnchorsOf(mission).filter(a => safe(() => env.isVisible(a), false)),
+                dialog: safe(() => env.dialogOpen?.() === true, false),
+            },
+        };
+    }
+    enterStep(d, suite, env, mission, index, { replay: isReplay });
+    // A replay never writes progress; only what starting it changed (the
+    // welcome, first seen through a replay) is saved.
+    if (isReplay && d.state.progress !== before)
+        save(d);
+}
+function exitMission(d) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    if (!s.replay) {
+        const prev = d.state.progress.missions[s.mission];
+        if (prev?.status !== "done") {
+            setMission(d, s.mission, {
+                status: "skipped",
+                step_key: d.state.progress.step_key,
+                skipped_step: d.state.progress.step_key,
+            });
+        }
+        withProgress(d, { mission_key: null });
+        save(d, true);
+    }
+    d.state = { ...d.state, chipPulse: d.state.chipPulse + 1 };
+    setScreen(d, { name: "idle" });
+}
+function triggerMatchesSignal(t, sig, env, ctx) {
+    if ("api" in t && sig.kind === "api") {
+        if (t.api.method && t.api.method.toUpperCase() !== sig.method.toUpperCase())
+            return null;
+        if (!matchApiPath(t.api.path, sig.path))
+            return null;
+        if (!matchStatus(t.api.status, sig.status))
+            return null;
+        return { api: { method: sig.method.toUpperCase(), path: sig.path, status: sig.status, id: sig.id } };
+    }
+    if ("event" in t && sig.kind === "event") {
+        return t.event === sig.name ? { event: { name: sig.name, detail: sig.detail } } : null;
+    }
+    if ("activate" in t && sig.kind === "activate")
+        return {};
+    if ("value" in t && sig.kind === "value") {
+        return safe(() => t.value(sig.value, ctx), false) ? {} : null;
+    }
+    return null;
+}
+/** A refused save that a commit step listens for. */
+function apiFailureFor(step, sig) {
+    if (sig.kind !== "api" || sig.status < 400)
+        return false;
+    return triggersOf(step).some(t => "api" in t &&
+        (!t.api.method || t.api.method.toUpperCase() === sig.method.toUpperCase()) &&
+        matchApiPath(t.api.path, sig.path));
+}
+/** A replay ends early: what puts the page back (nothing on another page). */
+function pushAbort(d, suite, s) {
+    if (s.phase === "away")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const before = d.state.replayPage?.mission === s.mission ? d.state.replayPage : null;
+    const actions = abortActionsLeft(abortActionsFor(mission, s.index), before);
+    if (actions.length)
+        d.effects.push({ type: "abort", actions });
+}
+function reduceGuide(state, action, suite, env) {
+    const d = { state, effects: [] };
+    const s = state.screen;
+    const ctxNow = () => guideContext(env, d.state.progress.context);
+    switch (action.type) {
+        case "welcome": {
+            if (!welcomeDue(state, suite))
+                break;
+            const gate = gateState(suite, ctxNow());
+            if (gate === undefined)
+                break;
+            if (gate === false) {
+                if (!state.gateDismissed)
+                    setScreen(d, { name: "gate" });
+                break;
+            }
+            setScreen(d, { name: "welcome", confirm: false });
+            break;
+        }
+        case "welcomeSkip":
+            if (s.name === "welcome")
+                setScreen(d, { name: "welcome", confirm: true });
+            break;
+        case "welcomeStart":
+        case "welcomeSkipCancel": {
+            if (s.name !== "welcome")
+                break;
+            const first = nextMissionKey(suite, d.state.progress, ctxNow());
+            if (first)
+                startMission(d, suite, env, first, false);
+            else
+                setScreen(d, { name: "idle" });
+            break;
+        }
+        case "welcomeSkipConfirm":
+            if (s.name !== "welcome")
+                break;
+            withProgress(d, { welcome: "skipped" });
+            d.state = { ...d.state, chipPulse: d.state.chipPulse + 1 };
+            setScreen(d, { name: "idle" });
+            save(d, true);
+            break;
+        case "gateLater":
+            if (s.name === "gate") {
+                d.state = { ...d.state, gateDismissed: true };
+                setScreen(d, { name: "idle" });
+            }
+            break;
+        case "start":
+            if (state.audience === "none")
+                break;
+            if (s.name === "step" && !s.replay && s.mission !== action.mission) {
+                // Leaving one mission for another: the first is set aside.
+                exitMission(d);
+            }
+            startMission(d, suite, env, action.mission, !!action.replay);
+            break;
+        case "resume": {
+            if (state.audience === "none" || s.name !== "idle")
+                break;
+            const mission = findMission(suite, d.state.progress.mission_key);
+            if (!mission || d.state.progress.missions[mission.key]?.status !== "active")
+                break;
+            // Back to the last checkpoint at or before the step reached; the saved
+            // checkpoint when the step is no longer in the tour.
+            const stepAt = mission.steps.findIndex(st => st.key === d.state.progress.step_key);
+            const cpAt = mission.steps.findIndex(st => st.key === d.state.progress.checkpoint_key);
+            const index = stepAt >= 0 ? checkpointAtOrBefore(mission.steps, stepAt) : Math.max(cpAt, 0);
+            enterStep(d, suite, env, mission, index, { replay: false });
+            break;
+        }
+        case "sync": {
+            if (s.name !== "step")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            if (s.phase === "away") {
+                const where = placeRoute(mission.steps, s.index);
+                if (!where || matchRoute(where, env.pathname, env.search, env.code)) {
+                    // Arrived: run the step again from here (it may already be passed).
+                    enterStep(d, suite, env, mission, s.index, { replay: s.replay, error: s.error });
+                }
+                break;
+            }
+            if (s.confirmExit)
+                break;
+            const nts = !s.bridge && nothingToSaveHolds(step, env, ctx);
+            if (nts !== s.nothingToSave) {
+                setNothingToSave(d, suite, env, nts);
+                break;
+            }
+            const kind = stepKind(shownStep(step, s.nothingToSave));
+            const armed = s.armed || hiddenAnchorShown(step, env);
+            if (kind !== "input" && kind !== "view") {
+                const held = syncTriggerHolds(step, env, armed);
+                if (held) {
+                    advance(d, suite, env, held);
+                    break;
+                }
+            }
+            if (!s.bridge && !stepTargetVisible(shownStep(step, s.nothingToSave), env, ctx, false) && offRoute(mission.steps, s.index, env)) {
+                // The target is missing because the page is another one.
+                recoverOffRoute(d, suite, env, false);
+                break;
+            }
+            if (armed !== s.armed)
+                setScreen(d, { ...s, armed });
+            const cur = d.state.screen;
+            // The menu step: done once the sidebar is open; needed again if shut.
+            if (cur.bridge && (env.sidebarOpen || stepTargetVisible(step, env, ctx, false))) {
+                setScreen(d, { ...cur, bridge: false, phase: "waiting" });
+            }
+            else if (!cur.bridge && needsBridge(step, env, ctx)) {
+                setScreen(d, { ...cur, bridge: true, phase: "waiting" });
+            }
+            markReadyIfVisible(d, suite, env);
+            break;
+        }
+        case "signal": {
+            if (s.name !== "step" || s.phase === "away" || s.confirmExit)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            const sig = action.signal;
+            if (sig.kind === "typing") {
+                if (s.error)
+                    setScreen(d, { ...s, error: null });
+                break;
+            }
+            if (s.bridge)
+                break;
+            for (const t of triggersOf(step)) {
+                const hit = triggerMatchesSignal(t, sig, env, ctx);
+                if (hit) {
+                    advance(d, suite, env, hit);
+                    return { state: d.state, effects: d.effects };
+                }
+            }
+            if (sig.kind === "api" && stepKind(step) === "commit" && apiFailureFor(step, sig)) {
+                const mapped = safe(() => step.onApiError?.({ status: sig.status, message: sig.message }, ctx), undefined);
+                if (mapped && mapped.step) {
+                    const to = mission.steps.findIndex(st => st.key === mapped.step);
+                    if (to >= 0) {
+                        enterStep(d, suite, env, mission, to, {
+                            replay: s.replay,
+                            noAutoPass: true,
+                            error: { title: mapped.message ?? sig.message ?? COPY.saveFailed, detail: COPY.fieldFix },
+                        });
+                        break;
+                    }
+                }
+                const error = mapped?.message
+                    ? { title: mapped.message, detail: undefined }
+                    : { title: COPY.saveFailed, detail: sig.message };
+                setScreen(d, { ...s, error });
+                d.effects.push({ type: "announce", text: [error.title, error.detail].filter(Boolean).join(". ") });
+                if (!s.replay)
+                    withProgress(d, { last_error: `api_${sig.status}:${step.key}`.slice(0, 128) });
+            }
+            break;
+        }
+        case "next": {
+            if (s.name !== "step" || s.phase !== "ready" || s.confirmExit || s.bridge)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const kind = stepKind(shownStep(step, s.nothingToSave));
+            if (kind === "view") {
+                // A read step, or a commit step with nothing to save.
+                advance(d, suite, env);
+                break;
+            }
+            if (kind !== "input")
+                break;
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            const value = safe(() => env.targetValue(), "");
+            const problem = step.validate
+                ? safe(() => step.validate(value, ctx), null)
+                : value.trim()
+                    ? null
+                    : COPY.blank;
+            if (problem) {
+                setScreen(d, { ...s, error: { title: problem, detail: COPY.fieldFix } });
+                d.state = { ...d.state, nudge: d.state.nudge + 1 };
+                d.effects.push({ type: "announce", text: problem });
+            }
+            else {
+                advance(d, suite, env);
+            }
+            break;
+        }
+        case "targetLost": {
+            if (s.name !== "step" || s.phase !== "ready" || s.confirmExit)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const raw = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(raw, env));
+            // The save went with nothing left to save, or came back: the other form.
+            setNothingToSave(d, suite, env, !s.bridge && nothingToSaveHolds(raw, env, ctx));
+            const cur = d.state.screen;
+            if (stepTargetVisible(shownStep(raw, cur.nothingToSave), env, ctx, cur.bridge))
+                break;
+            if (!cur.bridge && offRoute(mission.steps, cur.index, env)) {
+                recoverOffRoute(d, suite, env, false);
+                break;
+            }
+            const cp = checkpointAtOrBefore(mission.steps, cur.index);
+            if (cp < cur.index && !cur.bridge) {
+                // A dialog or a menu closed under the step: back to what opens it.
+                enterStep(d, suite, env, mission, cp, { replay: cur.replay, noAutoPass: false });
+            }
+            else {
+                setScreen(d, { ...cur, phase: "waiting" });
+            }
+            break;
+        }
+        case "timeout": {
+            if (s.name !== "step" || s.phase !== "waiting")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            if (!s.bridge && offRoute(mission.steps, s.index, env)) {
+                recoverOffRoute(d, suite, env, false);
+                break;
+            }
+            const anchor = s.bridge ? BRIDGE_TARGET : (step.target ?? step.key);
+            // Diagnostic only: kept with the progress, sent with its next save (a
+            // replay keeps nothing). The same error again changes nothing, so it
+            // never sends a PUT on its own.
+            if (!s.replay)
+                withProgress(d, { last_error: `target_missing:${anchor}`.slice(0, 128) });
+            const misses = s.misses + 1;
+            const policy = step.onMissing ?? "retry";
+            const cp = checkpointAtOrBefore(mission.steps, s.index);
+            if (policy === "skip") {
+                advance(d, suite, env);
+            }
+            else if (policy === "abort") {
+                exitMission(d);
+                d.effects.push({ type: "toast", text: COPY.aborted });
+            }
+            else if ((policy === "rewind" || (policy === "retry" && misses >= 2)) && cp < s.index) {
+                enterStep(d, suite, env, mission, cp, { replay: s.replay });
+                const now = d.state.screen;
+                if (now.name === "step" && now.index === s.index) {
+                    // The checkpoint passed straight back to this step (its dialog is
+                    // still open): going back cannot help, so say so.
+                    setScreen(d, { ...now, phase: "missing", misses });
+                    d.effects.push({ type: "announce", text: "ไม่พบส่วนนี้บนหน้า" });
+                }
+            }
+            else {
+                setScreen(d, { ...s, phase: "missing", misses });
+                d.effects.push({ type: "announce", text: "ไม่พบส่วนนี้บนหน้า" });
+            }
+            break;
+        }
+        case "retry": {
+            if (s.name !== "step" || s.phase !== "missing")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (mission && !s.bridge && offRoute(mission.steps, s.index, env)) {
+                // Polling again cannot help on another page: go back to the step's.
+                recoverOffRoute(d, suite, env, true);
+                break;
+            }
+            setScreen(d, { ...s, phase: "waiting" });
+            markReadyIfVisible(d, suite, env);
+            break;
+        }
+        case "blocked":
+            if (s.name === "step")
+                d.state = { ...d.state, nudge: d.state.nudge + 1 };
+            break;
+        case "exit":
+            if (s.name !== "step")
+                break;
+            if (s.replay) {
+                pushAbort(d, suite, s);
+                setScreen(d, { name: "idle" });
+                d.effects.push({ type: "toast", text: COPY.replayEnded });
+            }
+            else {
+                setScreen(d, { ...s, confirmExit: true });
+            }
+            break;
+        case "exitCancel":
+            if (s.name === "step" && s.confirmExit)
+                setScreen(d, { ...s, confirmExit: false });
+            break;
+        case "exitConfirm":
+            if (s.name !== "step")
+                break;
+            exitMission(d);
+            d.effects.push({ type: "toast", text: COPY.exitToast });
+            break;
+        case "endWithoutSave":
+            if (s.name !== "step" || !s.replay)
+                break;
+            pushAbort(d, suite, s);
+            setScreen(d, { name: "idle" });
+            d.effects.push({ type: "toast", text: COPY.replayEnded });
+            break;
+        case "goResume": {
+            if (s.name !== "step" || s.phase !== "away")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const href = resumeHref(mission, s.index, d, env);
+            if (href)
+                d.effects.push({ type: "navigate", href });
+            break;
+        }
+        case "celebrateNext": {
+            if (s.name !== "celebrate")
+                break;
+            const next = nextMissionKey(suite, d.state.progress, ctxNow());
+            if (next)
+                startMission(d, suite, env, next, false);
+            else
+                setScreen(d, { name: "idle" });
+            break;
+        }
+        case "rest":
+            if (s.name !== "celebrate")
+                break;
+            setScreen(d, { name: "idle" });
+            d.state = { ...d.state, panelOpen: true, justDone: s.mission };
+            break;
+        case "finish": {
+            if (s.name !== "complete")
+                break;
+            setScreen(d, { name: "idle" });
+            const href = resolveText(suite.complete.action.href, ctxNow());
+            const filled = href ? (fillRoute(href, { code: env.code }) ?? href) : "";
+            if (filled)
+                d.effects.push({ type: "navigate", href: filled });
+            break;
+        }
+        case "openPanel":
+            if (state.audience !== "none" && s.name === "idle") {
+                d.state = { ...d.state, panelOpen: true };
+            }
+            break;
+        case "closePanel":
+            d.state = { ...d.state, panelOpen: false, justDone: null };
+            break;
+        case "hideChip":
+            withProgress(d, { chip_hidden: true });
+            d.state = { ...d.state, panelOpen: false };
+            d.effects.push({ type: "toast", text: COPY.hiddenToast });
+            save(d, true);
+            break;
+        case "dismissMission": {
+            const m = findMission(suite, action.mission);
+            if (!m?.optional)
+                break;
+            setMission(d, m.key, { status: "skipped", step_key: null, skipped_step: null });
+            const all = settledCount(suite, d.state.progress, ctxNow()) >= missionCount(suite, ctxNow());
+            if (all) {
+                withProgress(d, { status: "completed" });
+                d.state = { ...d.state, panelOpen: false };
+                setScreen(d, { name: "complete" });
+            }
+            save(d, true);
+            break;
+        }
+        case "serverRow": {
+            // A saved row came back: its rev, the server's status, and the dates
+            // the server stamps on missions ("เสร็จ 26 ต.ค. 2569 13:04").
+            const missions = { ...d.state.progress.missions };
+            for (const [k, m] of Object.entries(missions)) {
+                const r = action.progress.missions[k];
+                if (r && r.status === m.status) {
+                    missions[k] = { ...m, completed_at: r.completed_at ?? m.completed_at, skipped_at: r.skipped_at ?? m.skipped_at };
+                }
+            }
+            withProgress(d, { rev: action.progress.rev, server_status: action.progress.server_status, missions });
+            break;
+        }
+        case "passive": {
+            if (state.audience === "none")
+                break;
+            for (const m of passiveMatches(suite, action.signal))
+                passiveDone(d, suite, env, m);
+            break;
+        }
+        case "idleCelebrate": {
+            if (s.name !== "idle" || state.panelOpen)
+                break;
+            const ctx = ctxNow();
+            // Only what is still done and still shown.
+            const pending = (state.pendingCelebrate ?? []).filter(k => {
+                const m = findMission(suite, k);
+                return !!m && d.state.progress.missions[k]?.status === "done" && missionShown(m, ctx);
+            });
+            const key = pending.shift();
+            d.state = { ...d.state, pendingCelebrate: pending };
+            const mission = findMission(suite, key);
+            if (!mission)
+                break;
+            const all = d.state.progress.status === "completed" && settledCount(suite, d.state.progress, ctx) >= missionCount(suite, ctx);
+            if (all)
+                d.state = { ...d.state, pendingCelebrate: [] };
+            showCelebration(d, suite, mission, all, ctx);
+            break;
+        }
+    }
+    return { state: d.state, effects: d.effects };
+}
+
+/**
+ * A tour's progress as platform-api stores it (one row per user, org and
+ * suite: GET/PUT /organizations/:id/guides/me), and the rules for reading,
+ * writing and merging it. See _claude-work/peoplx-guide/API.md.
+ *
+ * No runtime imports: the tests run this file in Node as it is.
+ */
+const KEY_RE = /^[a-z0-9][a-z0-9._-]{0,63}$/;
+const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+const str = (v) => (typeof v === "string" && v !== "" ? v : null);
+function freshProgress(version, rev = 0) {
+    return {
+        guide_version: version,
+        rev,
+        status: "in_progress",
+        mission_key: null,
+        step_key: null,
+        step_index: 0,
+        checkpoint_key: null,
+        missions: {},
+        context: {},
+        welcome: "not_seen",
+        chip_hidden: false,
+        last_error: null,
+        skipped_step: null,
+        server_status: null,
+    };
+}
+const ROW_STATUSES = ["in_progress", "completed", "skipped", "aborted"];
+const MISSION_STATUSES = ["todo", "active", "done", "skipped"];
+const WELCOMES = ["not_seen", "started", "skipped"];
+/** One row (a GET `guides[]` entry, a PUT answer, a 409's `current`). Null when off-shape. */
+function parseRow(raw) {
+    if (!isRecord(raw))
+        return null;
+    const version = Number(raw.guide_version);
+    const rev = Number(raw.rev);
+    if (!Number.isInteger(version) || version < 1 || !Number.isInteger(rev) || rev < 0)
+        return null;
+    const status = ROW_STATUSES.includes(raw.status)
+        ? raw.status
+        : "in_progress";
+    const missions = {};
+    if (isRecord(raw.missions)) {
+        for (const [k, v] of Object.entries(raw.missions)) {
+            if (!isRecord(v) || !MISSION_STATUSES.includes(v.status))
+                continue;
+            missions[k] = {
+                status: v.status,
+                step_key: str(v.step_key),
+                skipped_step: str(v.skipped_step),
+                completed_at: str(v.completed_at),
+                skipped_at: str(v.skipped_at),
+            };
+        }
+    }
+    const context = {};
+    if (isRecord(raw.context)) {
+        for (const [k, v] of Object.entries(raw.context)) {
+            if (typeof v === "string")
+                context[k] = v;
+            else if (typeof v === "number")
+                context[k] = String(v);
+        }
+    }
+    return {
+        guide_version: version,
+        rev,
+        status,
+        mission_key: str(raw.mission_key),
+        step_key: str(raw.step_key),
+        step_index: Number.isInteger(raw.step_index) ? raw.step_index : 0,
+        checkpoint_key: str(raw.checkpoint_key),
+        missions,
+        context,
+        welcome: WELCOMES.includes(raw.welcome) ? raw.welcome : "not_seen",
+        chip_hidden: raw.chip_hidden === true,
+        last_error: str(raw.last_error),
+        skipped_step: str(raw.skipped_step),
+        server_status: status,
+    };
+}
+/**
+ * The GET answer for one suite. Null — show nothing — for anything that is
+ * not the expected shape (an older API, a proxy's page, another app's answer).
+ */
+function parseGuidesAnswer(payload, suite) {
+    if (!isRecord(payload))
+        return null;
+    const data = isRecord(payload.data) ? payload.data : payload;
+    const mode = data.mode;
+    const audience = data.audience;
+    if (mode !== "off" && mode !== "invite" && mode !== "forced")
+        return null;
+    if (audience !== "forced" && audience !== "optional" && audience !== "none")
+        return null;
+    if (typeof data.app === "string" && data.app !== suite.app)
+        return null;
+    const rows = Array.isArray(data.guides) ? data.guides : [];
+    let row = null;
+    for (const r of rows) {
+        if (isRecord(r) && r.guide_key === suite.key) {
+            row = parseRow(r);
+            break;
+        }
+    }
+    let progress;
+    let newerOnServer = false;
+    if (!row)
+        progress = freshProgress(suite.version);
+    else if (row.guide_version < suite.version) {
+        // A new version of the tour: start over (the server resets the row on the
+        // PUT); keep the rev the server will check.
+        progress = { ...freshProgress(suite.version, row.rev), server_status: row.server_status };
+    }
+    else {
+        progress = row;
+        newerOnServer = row.guide_version > suite.version;
+    }
+    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer };
+}
+const TERMINAL = ["completed", "skipped", "aborted"];
+/** The PUT body for the client's state. Drops keys the server would refuse. */
+function putBody(p, app) {
+    const key = (k) => (k && KEY_RE.test(k) ? k : null);
+    const missions = {};
+    for (const [k, m] of Object.entries(p.missions)) {
+        if (!KEY_RE.test(k))
+            continue;
+        missions[k] = {
+            status: m.status,
+            step_key: key(m.step_key ?? null),
+            skipped_step: key(m.skipped_step ?? null),
+        };
+    }
+    const context = {};
+    for (const [k, v] of Object.entries(p.context)) {
+        if (typeof v === "string" && v.length <= 200)
+            context[k] = v;
+    }
+    return {
+        app,
+        guide_version: p.guide_version,
+        rev: p.rev,
+        status: p.status,
+        mission_key: key(p.mission_key),
+        step_key: key(p.step_key),
+        step_index: Math.max(0, Math.min(1000, Math.floor(p.step_index || 0))),
+        checkpoint_key: key(p.checkpoint_key),
+        missions,
+        context,
+        welcome: p.welcome,
+        chip_hidden: p.chip_hidden,
+        last_error: p.last_error ? p.last_error.slice(0, 128) : null,
+        skipped_step: key(p.skipped_step),
+        restart: p.status === "in_progress" &&
+            p.server_status !== null &&
+            TERMINAL.includes(p.server_status),
+    };
+}
+function stable(v) {
+    if (Array.isArray(v))
+        return `[${v.map(stable).join(",")}]`;
+    if (isRecord(v)) {
+        return `{${Object.keys(v)
+            .sort()
+            .map(k => `${JSON.stringify(k)}:${stable(v[k])}`)
+            .join(",")}}`;
+    }
+    return JSON.stringify(v) ?? "null";
+}
+/**
+ * What a PUT would store, without the rev it is checked against: two equal
+ * keys mean the save would change nothing, and it is not sent (a replay
+ * starting, a step entered again, never bump the row's rev). Key order does
+ * not matter.
+ */
+function payloadKey(p, app) {
+    const { rev: _rev, restart: _restart, ...rest } = putBody(p, app);
+    return stable(rest);
+}
+const MISSION_RANK = { todo: 0, skipped: 1, active: 1, done: 3 };
+const WELCOME_RANK = { not_seen: 0, skipped: 1, started: 1 };
+/**
+ * After a 409: this tab's state laid over the server's, keeping whatever is
+ * further along — a mission done anywhere stays done, the welcome once seen
+ * stays seen, a hidden chip stays hidden. Otherwise this tab's own choice
+ * wins. The rev is the server's.
+ */
+function mergeProgress(local, remote) {
+    const missions = { ...remote.missions };
+    for (const [k, m] of Object.entries(local.missions)) {
+        const r = remote.missions[k];
+        missions[k] = !r || MISSION_RANK[m.status] >= MISSION_RANK[r.status] ? { ...r, ...m } : r;
+    }
+    const welcome = WELCOME_RANK[local.welcome] >= WELCOME_RANK[remote.welcome] ? local.welcome : remote.welcome;
+    const completed = local.status === "completed" || remote.status === "completed";
+    const mission_key = local.mission_key && missions[local.mission_key]?.status === "active"
+        ? local.mission_key
+        : remote.mission_key && missions[remote.mission_key]?.status === "active"
+            ? remote.mission_key
+            : null;
+    const fromLocal = mission_key !== null && mission_key === local.mission_key;
+    return {
+        ...local,
+        rev: remote.rev,
+        server_status: remote.server_status,
+        status: completed ? "completed" : local.status,
+        missions,
+        welcome,
+        chip_hidden: local.chip_hidden || remote.chip_hidden,
+        mission_key,
+        step_key: fromLocal ? local.step_key : mission_key ? remote.step_key : null,
+        step_index: fromLocal ? local.step_index : mission_key ? remote.step_index : 0,
+        checkpoint_key: fromLocal ? local.checkpoint_key : mission_key ? remote.checkpoint_key : null,
+        context: fromLocal ? local.context : mission_key ? remote.context : {},
+    };
+}
+/**
+ * Which of two copies (sessionStorage after F5, the server) to resume from:
+ * the one further along for the same version; the server's on a tie.
+ */
+function furtherProgress(a, b) {
+    const score = (p) => Object.values(p.missions).reduce((s, m) => s + MISSION_RANK[m.status] * 1000, 0) +
+        (p.mission_key ? 100 + p.step_index : 0) +
+        WELCOME_RANK[p.welcome];
+    return score(a) > score(b) ? a : b;
+}
+
+/**
+ * A 409 from the progress API, for a client that throws on non-2xx: throw
+ * it from `saveProgress` with the answer's `current` (the stored row, or
+ * null) and the engine merges as if `{ status: 409, data: { current } }` had
+ * been returned.
+ */
+class GuideProgressConflict extends Error {
+    constructor(current, code = "guides.stale") {
+        super(code);
+        Object.defineProperty(this, "current", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: current
+        });
+        Object.defineProperty(this, "code", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: code
+        });
+        Object.defineProperty(this, "status", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: 409
+        });
+        this.name = "GuideProgressConflict";
+    }
+}
+/** A thrown 409 that carries the stored row: what the engine merges with. */
+function conflictOf(err) {
+    if (typeof err !== "object" || err === null)
+        return null;
+    const e = err;
+    if (e.status !== 409)
+        return null;
+    if ("current" in e)
+        return { status: 409, data: { current: e.current } };
+    const data = e.data;
+    if (data && typeof data === "object" && "current" in data)
+        return { status: 409, data };
+    return null;
+}
+/** The GET, parsed for this suite; null (show nothing) on any failure or odd answer. */
+async function loadGuides(adapter, suite, signal) {
+    try {
+        const raw = await adapter.fetchProgress({ app: suite.app, guideKey: suite.key, signal });
+        return parseGuidesAnswer(raw, suite);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * PUT the whole state. On 409 the server's row comes back: merge (keeping
+ * whatever is further along) and try once more with its rev. Returns the
+ * stored row, or null when it could not be saved.
+ */
+async function storeGuides(adapter, suite, progress) {
+    let body = progress;
+    for (let attempt = 0; attempt < 2; attempt++) {
+        let res;
+        try {
+            res = await adapter.saveProgress({ app: suite.app, guideKey: suite.key, body: putBody(body, suite.app) });
+        }
+        catch (err) {
+            const conflict = conflictOf(err);
+            if (!conflict)
+                return null;
+            res = conflict;
+        }
+        if (!res || typeof res.status !== "number")
+            return null;
+        const payload = res.data;
+        if (res.status >= 200 && res.status < 300) {
+            return parseRow(payload?.data ?? payload);
+        }
+        if (res.status !== 409)
+            return null;
+        const current = parseRow(payload?.current);
+        if (current && current.guide_version > body.guide_version) {
+            // Another app build is ahead of this one: stop writing.
+            return null;
+        }
+        if (!current)
+            body = { ...body, rev: 0, server_status: null };
+        else if (current.guide_version < body.guide_version) {
+            // The server's row is the previous version: this one replaces it.
+            body = { ...body, rev: current.rev, server_status: current.server_status };
+        }
+        else
+            body = mergeProgress(body, current);
+    }
+    return null;
+}
+
+/**
+ * The tour's DOM side: finding anchors, deciding whether one is really on
+ * screen, and the rectangles the spotlight cuts out. Browser only; every
+ * function tolerates a missing document.
+ */
+const hasDocument = () => typeof document !== "undefined";
+function cssString(value) {
+    return `"${value.replace(/["\\]/g, "\\$&")}"`;
+}
+function anchorSelector(anchor, id) {
+    return (`[${GUIDE_ATTRIBUTE}=${cssString(anchor)}]` +
+        (id ? `[${GUIDE_ID_ATTRIBUTE}=${cssString(id)}]` : ""));
+}
+/**
+ * On screen: connected, with a size, not hidden by style, not inside
+ * aria-hidden or inert (other than the guide's own), not a closed Radix part.
+ *
+ * aria-hidden that Radix put there (data-aria-hidden: everything outside an
+ * open dialog, select or menu is hidden from screen readers) does not count:
+ * a dialog's field is still on screen while its select's list is open.
+ */
+function isPresent(el) {
+    if (!el || !el.isConnected)
+        return false;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0)
+        return false;
+    // Slid off the side (a closed drawer); off the top or bottom is only
+    // scrolled away, and the tour scrolls it back. So is a tab scrolled out of
+    // a row of tabs that scrolls sideways, as long as the row is on screen.
+    if ((r.right <= 0 || r.left >= window.innerWidth) && !inSidewaysScroller(el))
+        return false;
+    // Closed Radix content (a shut dialog, popover or collapsible body) is
+    // absent. Its trigger also says data-state="closed" while shut, but it is
+    // on screen and is what a step points at (a sidebar group header, a
+    // dialog's open button), so a trigger (aria-expanded) stays present.
+    if (el.getAttribute("data-state") === "closed" && !el.hasAttribute("aria-expanded"))
+        return false;
+    const style = getComputedStyle(el);
+    if (style.visibility === "hidden" || style.display === "none")
+        return false;
+    for (let n = el; n; n = n.parentElement) {
+        if (n.hasAttribute(GUIDE_LAYER_ATTRIBUTE))
+            break;
+        if (n.hasAttribute("inert"))
+            return false;
+        if (n.getAttribute("aria-hidden") === "true" && !n.hasAttribute("data-aria-hidden"))
+            return false;
+    }
+    return true;
+}
+/** The first matching anchor that is on screen. */
+function findAnchor(anchor, id) {
+    if (!hasDocument() || !anchor)
+        return null;
+    let list;
+    try {
+        list = document.querySelectorAll(anchorSelector(anchor, id));
+    }
+    catch {
+        return null;
+    }
+    for (const el of Array.from(list)) {
+        if (isPresent(el))
+            return el;
+    }
+    return null;
+}
+function anchorVisible(anchor, id) {
+    return findAnchor(anchor, id) !== null;
+}
+const FIELD = "input:not([type=hidden]),textarea,select,[contenteditable=''],[contenteditable=true]";
+/** The field to type into: the anchor itself, or the first field inside it. */
+function fieldOf(el) {
+    if (!el)
+        return null;
+    if (el.matches(FIELD))
+        return el;
+    return el.querySelector(FIELD);
+}
+function fieldValue(el) {
+    const f = fieldOf(el);
+    if (!f)
+        return "";
+    if ("value" in f && typeof f.value === "string")
+        return f.value;
+    return f.textContent ?? "";
+}
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]):not([type=hidden]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1']),[contenteditable=''],[contenteditable=true]";
+function focusablesIn(root) {
+    if (!root)
+        return [];
+    const own = root.matches(FOCUSABLE) ? [root] : [];
+    return own.concat(Array.from(root.querySelectorAll(FOCUSABLE)).filter(isPresent));
+}
+function rectOf(el) {
+    const r = el.getBoundingClientRect();
+    return { x: r.left, y: r.top, width: r.width, height: r.height };
+}
+function padRect(r, pad) {
+    return { x: r.x - pad, y: r.y - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
+}
+function sameRect(a, b) {
+    if (!a || !b)
+        return a === b;
+    return (Math.abs(a.x - b.x) < 0.5 &&
+        Math.abs(a.y - b.y) < 0.5 &&
+        Math.abs(a.width - b.width) < 0.5 &&
+        Math.abs(a.height - b.height) < 0.5);
+}
+/** Open Radix poppers (a select's list, a menu): usable while a step runs. */
+const POPPER_SELECTOR = "[data-radix-popper-content-wrapper]";
+/** Toasts stay usable above the tour. */
+const TOASTER_SELECTOR = "[data-sonner-toaster]";
+/** Open dialogs (Radix dialog, alert dialog, sheet, popover content). */
+const OPEN_DIALOG_SELECTOR = '[role="dialog"][data-state="open"],[role="alertdialog"][data-state="open"]';
+/**
+ * Whether an open dialog of the app's covers the target: the target is
+ * neither in it nor around it (a confirm opened by the step's own button).
+ * The ring and the hand would be drawn over the dialog, pointing at a button
+ * behind it.
+ */
+function coveredByDialog(el) {
+    if (!hasDocument() || !el)
+        return false;
+    for (const d of Array.from(document.querySelectorAll(OPEN_DIALOG_SELECTOR))) {
+        if (inGuideLayer(d) || !isPresent(d))
+            continue;
+        if (d.contains(el) || el.contains(d))
+            continue;
+        return true;
+    }
+    return false;
+}
+/** An app dialog (not the tour's) is open on the page. */
+function appDialogOpen() {
+    if (!hasDocument())
+        return false;
+    return Array.from(document.querySelectorAll(OPEN_DIALOG_SELECTOR)).some(d => !inGuideLayer(d) && isPresent(d));
+}
+function openPoppers() {
+    if (!hasDocument())
+        return [];
+    return Array.from(document.querySelectorAll(POPPER_SELECTOR)).filter(isPresent);
+}
+function inGuideLayer(node) {
+    if (!node || typeof Node === "undefined" || !(node instanceof Node))
+        return false;
+    const el = node instanceof Element ? node : node.parentElement;
+    return !!el?.closest(`[${GUIDE_LAYER_ATTRIBUTE}]`);
+}
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function isPhoneWidth() {
+    return typeof window !== "undefined" && window.innerWidth < 768;
+}
+/* ---------------- what is really on screen ---------------- */
+const INFINITE = 1e7;
+/** The overlap of two rectangles, or null when they do not meet. */
+function intersectRect(a, b) {
+    const x = Math.max(a.x, b.x);
+    const y = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const bottom = Math.min(a.y + a.height, b.y + b.height);
+    if (right - x <= 0 || bottom - y <= 0)
+        return null;
+    return { x, y, width: right - x, height: bottom - y };
+}
+/** The part of `rect` inside every clip (scroll boxes, the viewport); null when none is. */
+function visibleRect(rect, clips) {
+    let r = rect;
+    for (const c of clips) {
+        if (!r)
+            return null;
+        r = intersectRect(r, c);
+    }
+    return r;
+}
+const clipsX = (v) => v !== "visible";
+const scrollsX = (v) => v === "auto" || v === "scroll";
+/**
+ * The ancestors that cut the element off: anything with overflow other than
+ * visible on an axis. The body and the root scroll the page and are covered by
+ * the viewport. Read once per target; their rectangles are read every frame.
+ */
+function clipAncestors(el) {
+    const out = [];
+    if (typeof getComputedStyle !== "function")
+        return out;
+    for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        if (n.hasAttribute(GUIDE_LAYER_ATTRIBUTE))
+            break;
+        const s = getComputedStyle(n);
+        const x = clipsX(s.overflowX);
+        const y = clipsX(s.overflowY);
+        if (x || y)
+            out.push({ el: n, x, y });
+        if (s.position === "fixed")
+            break;
+    }
+    return out;
+}
+/** An ancestor's clip as a rectangle: unbounded on an axis it does not clip. */
+function clipRectOf(c) {
+    const r = c.el.getBoundingClientRect();
+    return {
+        x: c.x ? r.left : -INFINITE,
+        y: c.y ? r.top : -INFINITE,
+        width: c.x ? r.width : INFINITE * 2,
+        height: c.y ? r.height : INFINITE * 2,
+    };
+}
+function viewportRect() {
+    const vv = typeof window !== "undefined" ? window.visualViewport : undefined;
+    return {
+        x: 0,
+        y: vv ? vv.offsetTop : 0,
+        width: window.innerWidth,
+        height: vv ? vv.height : window.innerHeight,
+    };
+}
+/**
+ * The part of the element a person can see: its box cut by every scroll box
+ * around it and by the viewport. The spotlight, its hole, the ring and the
+ * hand use this, so a tab half out of a sideways-scrolling row of tabs is not
+ * spotlit where it cannot be pressed. Null when none of it is on screen.
+ */
+function visibleRectOf(el, ancestors = clipAncestors(el)) {
+    return visibleRect(rectOf(el), [...ancestors.map(clipRectOf), viewportRect()]);
+}
+/** Inside a box that scrolls sideways (with somewhere to scroll) that is itself on screen. */
+function inSidewaysScroller(el) {
+    if (typeof getComputedStyle !== "function")
+        return false;
+    for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        const s = getComputedStyle(n);
+        if (scrollsX(s.overflowX) && n.scrollWidth > n.clientWidth + 1) {
+            const r = n.getBoundingClientRect();
+            return r.width > 0 && r.right > 0 && r.left < window.innerWidth;
+        }
+    }
+    return false;
+}
+/**
+ * How to bring a target into view, or null when it already is: to the middle
+ * when it is above or below the comfortable band (under the header, at the
+ * bottom edge), the nearest edge when only a side is cut off (a tab out of a
+ * sideways-scrolling row, on a phone).
+ */
+function revealPlan(rect, visible, viewportHeight) {
+    const offVertically = rect.y < 70 || rect.y + rect.height > viewportHeight - 20;
+    const cutSideways = !visible || visible.width < rect.width - 1;
+    if (!offVertically && !cutSideways)
+        return null;
+    return { block: offVertically ? "center" : "nearest", inline: "nearest" };
+}
+/** Room left beside a target scrolled into a sideways scroll box. */
+const SIDEWAYS_MARGIN = 12;
+/**
+ * How far to scroll a sideways scroll box so the target sits inside its
+ * visible part (`box`: the box cut by the viewport) with `margin` to spare on
+ * both sides; 0 when it already does. Clamped to what the box can scroll.
+ * A target wider than the room is aligned to its start.
+ */
+function sidewaysDelta(target, box, scrollLeft, maxScrollLeft, margin = SIDEWAYS_MARGIN) {
+    const left = box.x + margin;
+    const right = box.x + box.width - margin;
+    let delta = 0;
+    if (target.x < left || target.width > right - left)
+        delta = target.x - left;
+    else if (target.x + target.width > right)
+        delta = target.x + target.width - right;
+    const next = Math.min(Math.max(scrollLeft + delta, 0), Math.max(maxScrollLeft, 0));
+    return next - scrollLeft;
+}
+/** The nearest ancestor that scrolls sideways and has somewhere to scroll. */
+function sidewaysScroller(el) {
+    if (typeof getComputedStyle !== "function")
+        return null;
+    for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        if (scrollsX(getComputedStyle(n).overflowX) && n.scrollWidth > n.clientWidth + 1)
+            return n;
+    }
+    return null;
+}
+/**
+ * Scrolls the target into view (instant under reduced motion). In a box that
+ * scrolls sideways (a row of tabs on a phone) the box is scrolled first,
+ * leaving SIDEWAYS_MARGIN beside the target so its whole label shows; then
+ * the page, up or down only.
+ */
+function revealTarget(el) {
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
+    const scroller = sidewaysScroller(el);
+    if (scroller) {
+        const box = intersectRect(rectOf(scroller), viewportRect()) ?? rectOf(scroller);
+        const dx = sidewaysDelta(rectOf(el), box, scroller.scrollLeft, scroller.scrollWidth - scroller.clientWidth);
+        // Instant: the page's own scroll below must not cancel it.
+        if (Math.abs(dx) >= 1)
+            scroller.scrollLeft += dx;
+    }
+    const vh = window.visualViewport?.height ?? window.innerHeight;
+    const plan = revealPlan(rectOf(el), visibleRectOf(el), vh);
+    if (!plan)
+        return;
+    try {
+        el.scrollIntoView({ ...plan, behavior });
+    }
+    catch {
+        el.scrollIntoView();
+    }
+}
+/* ---------------- the scrim's holes, as one union ---------------- */
+/**
+ * The scrim's blocking area: the screen (with a 10 px margin) minus the union
+ * of the holes, as rectangles that do not overlap. Cutting each hole out with
+ * an even-odd fill made the place where two holes overlap (a field and the
+ * select list open over it) solid again, and the option there could not be
+ * pressed.
+ *
+ * Every hole edge splits the screen into a grid; a cell is blocked when no
+ * hole covers it. Cells in a row are joined, and identical rows stacked.
+ */
+function blockedRects(holes, width, height) {
+    const x0 = -10;
+    const y0 = -10;
+    const x1 = width + 10;
+    const y1 = height + 10;
+    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+    const hs = holes
+        .filter(h => h.width > 0 && h.height > 0)
+        .map(h => ({
+        l: clamp(h.x, x0, x1),
+        t: clamp(h.y, y0, y1),
+        r: clamp(h.x + h.width, x0, x1),
+        b: clamp(h.y + h.height, y0, y1),
+    }))
+        .filter(h => h.r > h.l && h.b > h.t);
+    if (!hs.length)
+        return [{ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }];
+    const uniq = (v) => Array.from(new Set(v)).sort((a, b) => a - b);
+    const xs = uniq([x0, x1, ...hs.flatMap(h => [h.l, h.r])]);
+    const ys = uniq([y0, y1, ...hs.flatMap(h => [h.t, h.b])]);
+    const out = [];
+    let prev = null;
+    for (let j = 0; j < ys.length - 1; j++) {
+        const top = ys[j];
+        const bottom = ys[j + 1];
+        const cy = (top + bottom) / 2;
+        const row = [];
+        for (let i = 0; i < xs.length - 1; i++) {
+            const left = xs[i];
+            const right = xs[i + 1];
+            const cx = (left + right) / 2;
+            const covered = hs.some(h => cx > h.l && cx < h.r && cy > h.t && cy < h.b);
+            if (covered)
+                continue;
+            const last = row[row.length - 1];
+            if (last && last.x + last.width === left)
+                last.width = right - last.x;
+            else
+                row.push({ x: left, y: top, width: right - left, height: bottom - top });
+        }
+        const key = row.map(r => `${r.x},${r.width}`).join("|");
+        if (prev && prev.key === key) {
+            for (const r of prev.rects)
+                r.height += bottom - top;
+        }
+        else {
+            out.push(...row);
+            prev = { key, rects: row };
+        }
+    }
+    return out;
+}
+
+/**
+ * The tour's stylesheet. The shell has no CSS pipeline and the apps only scan
+ * its dist for Tailwind classes, which cannot carry keyframes; so the layer
+ * brings its own sheet, namespaced `eg-`, drawn from the theme's tokens
+ * (--primary carries each app's brand accent; light and dark follow).
+ *
+ * `--erp-guide-bottom-offset` (set by the app on :root/body, or through
+ * GuideRuntime's `bottomOffset`) lifts the chip, the bottom card, the toast
+ * and the desktop panel above a bottom nav. Unset, they sit where they did
+ * before 0.1.68: 16px from the bottom (+ the safe area) on a phone, 22px on
+ * desktop.
+ */
+const GUIDE_CSS = `
+[data-erp-guide-layer]{position:fixed;inset:0;z-index:1000;pointer-events:none;font-family:inherit;color:var(--popover-foreground,#1c2634);
+  --eg-scrim:rgba(12,20,34,.64);--eg-card:var(--popover,#fff);--eg-fg:var(--popover-foreground,#1c2634);
+  --eg-muted:var(--muted-foreground,#6d7886);--eg-soft:var(--muted,#eef3f9);--eg-line:var(--border,#e8ecf1);
+  --eg-primary:var(--primary,#3280dd);--eg-on-primary:var(--primary-foreground,#fff);
+  --eg-tint:color-mix(in oklab,var(--eg-primary) 13%,var(--eg-card));--eg-strong:color-mix(in oklab,var(--eg-primary) 82%,#000);
+  --eg-danger:var(--destructive,#d23b4b);--eg-ok:#1d9a5f;--eg-gold:#e6a417;
+  --eg-shadow:0 18px 50px -12px rgba(16,32,64,.35),0 4px 12px rgba(16,32,64,.08);line-height:1.5;font-size:14px}
+[data-erp-guide-layer] *{box-sizing:border-box}
+[data-erp-guide-layer] button{font:inherit;color:inherit;cursor:pointer}
+.eg-i{pointer-events:auto}
+.eg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.eg-scrim-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
+.eg-scrim-svg .eg-scrim-fill{fill:var(--eg-scrim);pointer-events:none}
+.eg-scrim-svg .eg-scrim-hit{fill:transparent;pointer-events:all}
+.eg-scrim{position:fixed;inset:0;background:var(--eg-scrim);pointer-events:auto}
+.eg-scrim.eg-light{background:rgba(12,20,34,.45)}
+.eg-scrim.eg-faint{background:rgba(12,20,34,.35)}
+.eg-ring{position:fixed;border-radius:12px;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--eg-primary)}
+.eg-ring.eg-move{transition:left .26s ease,top .26s ease,width .26s ease,height .26s ease}
+.eg-ring::after{content:"";position:absolute;inset:-6px;border-radius:15px;border:3px solid var(--eg-primary);animation:eg-pulse 1.6s ease-out infinite}
+.eg-ring.eg-flash::after{animation:eg-flash .5s ease 1}
+@keyframes eg-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
+@keyframes eg-flash{0%,100%{opacity:1;transform:none}50%{opacity:.2}}
+.eg-hand{position:fixed;width:46px;height:46px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:eg-tap 1.1s ease-in-out infinite}
+.eg-hand svg{width:46px;height:46px;fill:#fff;stroke:#1c2634;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
+.eg-hand.eg-flip svg{transform:scaleY(-1)}
+@keyframes eg-tap{0%,100%{transform:translate(6px,8px)}50%{transform:translate(0,0)}}
+.eg-bubble{position:fixed;left:0;top:0;width:320px;background:var(--eg-card);color:var(--eg-fg);border-radius:14px;box-shadow:var(--eg-shadow);padding:14px 16px 12px;border-top:4px solid var(--eg-primary);outline:none;pointer-events:auto}
+.eg-bubble.eg-err{border-top-color:var(--eg-danger)}
+.eg-bubble.eg-nudge{animation:eg-nudge .38s ease}
+@keyframes eg-nudge{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:2px}}
+.eg-b-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--eg-muted)}
+.eg-b-top .eg-mis{font-weight:600;color:var(--eg-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.eg-b-top .eg-cnt{white-space:nowrap;font-weight:600}
+.eg-pips{display:flex;gap:4px;margin:8px 0 10px}
+.eg-pips i{flex:1;height:4px;border-radius:2px;background:var(--eg-soft)}
+.eg-pips i.eg-d{background:var(--eg-primary)}
+.eg-pips i.eg-c{background:color-mix(in oklab,var(--eg-primary) 45%,var(--eg-card))}
+.eg-b-t{margin:0;font-size:16px;font-weight:600;line-height:1.45}
+.eg-b-w{margin:2px 0 0;font-size:13.5px;color:var(--eg-muted)}
+.eg-bubble.eg-err .eg-b-t{color:var(--eg-danger)}
+.eg-k{display:inline-block;background:var(--eg-tint);color:var(--eg-strong);border-radius:7px;padding:0 7px;font-weight:600}
+.eg-b-f{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
+.eg-b-f .eg-btn{height:34px;padding:0 14px;font-size:13.5px}
+.eg-exit{border:0;background:none;color:var(--eg-muted);font-size:12.5px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
+.eg-exit:hover{color:var(--eg-fg)}
+.eg-arrow{position:absolute;width:14px;height:14px;background:var(--eg-card);transform:rotate(45deg);border-radius:2px}
+.eg-arrow.eg-top{background:var(--eg-primary)}
+.eg-bubble.eg-err .eg-arrow.eg-top{background:var(--eg-danger)}
+.eg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:600;white-space:nowrap}
+.eg-btn:focus-visible,.eg-exit:focus-visible,.eg-chip:focus-visible,.eg-x:focus-visible{outline:2px solid var(--eg-primary);outline-offset:2px}
+.eg-primary{background:var(--eg-primary);color:var(--eg-on-primary)!important}
+.eg-primary:hover{background:var(--eg-strong)}
+.eg-primary[disabled]{opacity:.55;cursor:default}
+.eg-ghost{background:var(--eg-card);border-color:var(--eg-line)}
+.eg-ghost:hover{background:var(--eg-soft)}
+.eg-ghost[disabled]{opacity:.55;cursor:default}
+.eg-link{background:none;border:0;color:var(--eg-muted);font-weight:500;padding:0 6px;height:32px}
+.eg-link:hover{color:var(--eg-fg);text-decoration:underline}
+.eg-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--eg-card);color:var(--eg-fg);border-radius:20px;box-shadow:var(--eg-shadow);padding:28px 28px 22px;text-align:center;outline:none;pointer-events:auto}
+.eg-modal.eg-pop{animation:eg-pop .32s cubic-bezier(.2,.9,.3,1.3)}
+@keyframes eg-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}
+.eg-modal h2{margin:6px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
+.eg-modal .eg-sub{margin:0;color:var(--eg-muted);font-size:14.5px}
+.eg-eyebrow{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--eg-strong)}
+.eg-actions{display:grid;gap:6px;margin-top:20px}
+.eg-actions .eg-btn{height:44px}
+.eg-badge{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:var(--eg-tint);color:var(--eg-strong)}
+.eg-badge svg.eg-ic{width:30px;height:30px}
+.eg-quests{list-style:none;padding:0;margin:18px 0 0;text-align:left;display:grid;gap:6px}
+.eg-quests li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;background:var(--eg-soft);font-size:14px}
+.eg-quests li .eg-n{width:26px;height:26px;border-radius:50%;background:var(--eg-card);border:1.5px solid var(--eg-line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--eg-muted);flex:none}
+.eg-quests li.eg-first{background:var(--eg-tint)}
+.eg-quests li.eg-first .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}
+.eg-quests li.eg-ok .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}
+.eg-quests li .eg-n svg.eg-ic{width:15px;height:15px;stroke-width:3}
+.eg-quests li .eg-t{flex:1}
+.eg-quests li small{color:var(--eg-muted);font-size:12px;white-space:nowrap}
+.eg-modal.eg-confirm{text-align:left;width:min(380px,calc(100vw - 32px));padding:22px}
+.eg-modal.eg-confirm h2{font-size:18px;margin-top:0}
+.eg-modal.eg-confirm .eg-actions{grid-template-columns:1fr 1fr}
+.eg-medal{width:84px;height:84px;border-radius:50%;margin:4px auto 10px;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#ffd666,var(--eg-gold));box-shadow:0 0 0 8px #fff4d6;animation:eg-stamp .5s cubic-bezier(.2,.9,.3,1.4) .1s both}
+.eg-medal svg.eg-ic{width:42px;height:42px;stroke-width:2.6}
+@keyframes eg-stamp{from{transform:scale(.3) rotate(-25deg);opacity:0}}
+.eg-prog{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--eg-muted);font-weight:600}
+.eg-prog .eg-bar{flex:1;height:8px;border-radius:4px;background:var(--eg-soft);overflow:hidden}
+.eg-prog .eg-bar i{display:block;height:100%;background:var(--eg-primary);border-radius:4px;transition:width .9s cubic-bezier(.2,.8,.2,1) .35s}
+.eg-burst{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}
+.eg-burst span{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:eg-conf 1.1s cubic-bezier(.15,.7,.3,1) forwards}
+@keyframes eg-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
+.eg-card{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,16px) + 12px);transform:translateX(-50%);width:min(360px,calc(100vw - 32px));background:var(--eg-card);color:var(--eg-fg);border-radius:14px;box-shadow:var(--eg-shadow);padding:14px 16px;border-top:4px solid var(--eg-primary);pointer-events:auto;outline:none}
+.eg-card .eg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
+.eg-loading{display:flex;align-items:center;gap:10px;font-weight:600}
+.eg-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--eg-soft);border-top-color:var(--eg-primary);animation:eg-spin .8s linear infinite;flex:none}
+@keyframes eg-spin{to{transform:rotate(360deg)}}
+.eg-chip{position:fixed;right:22px;bottom:var(--erp-guide-bottom-offset,22px);display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:24px;border:1px solid var(--eg-line);background:var(--eg-card);color:var(--eg-fg);box-shadow:0 8px 24px -8px rgba(16,32,64,.3);font-weight:600;font-size:14px;pointer-events:auto}
+.eg-chip svg{width:34px;height:34px}
+.eg-chip.eg-hi{animation:eg-hi 1.2s ease 2}
+@keyframes eg-hi{50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--eg-primary) 35%,transparent),0 8px 24px -8px rgba(16,32,64,.3)}}
+.eg-panel{position:fixed;right:22px;bottom:calc(var(--erp-guide-bottom-offset,22px) + 60px);width:360px;max-height:calc(100vh - 110px);overflow:auto;background:var(--eg-card);color:var(--eg-fg);border:1px solid var(--eg-line);border-radius:16px;box-shadow:var(--eg-shadow);outline:none;pointer-events:auto}
+.eg-panel-bd{display:none}
+.eg-q-h{display:flex;align-items:center;gap:10px;padding:16px 12px 4px 18px}
+.eg-q-h h2{margin:0;font-size:16px;font-weight:700;flex:1}
+.eg-q-h .eg-n{font-size:13px;color:var(--eg-muted);font-weight:600}
+.eg-x{width:34px;height:34px;border-radius:10px;border:0;background:none;display:grid;place-items:center;color:var(--eg-muted)}
+.eg-x:hover{background:var(--eg-soft)}
+.eg-x svg.eg-ic{width:18px;height:18px}
+.eg-panel .eg-prog{margin:6px 18px 8px}
+.eg-q-list{list-style:none;margin:0;padding:4px 10px 6px;display:grid;gap:2px}
+.eg-q-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:11px}
+.eg-q-item.eg-next{background:var(--eg-tint)}
+.eg-q-item .eg-n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--eg-line);display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--eg-muted);flex:none;background:var(--eg-card)}
+.eg-q-item.eg-next .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}
+.eg-q-item.eg-done .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}
+.eg-q-item.eg-done .eg-n svg.eg-ic{width:16px;height:16px;stroke-width:3}
+.eg-q-item.eg-dim .eg-n{opacity:.55}
+.eg-q-item.eg-just .eg-n{animation:eg-stamp .55s cubic-bezier(.2,.9,.3,1.4) .2s both}
+.eg-q-item .eg-t{flex:1;min-width:0}
+.eg-q-item .eg-t b{display:block;font-size:14px;font-weight:600}
+.eg-q-item.eg-done .eg-t b{color:var(--eg-muted)}
+.eg-q-item .eg-t small{display:block;font-size:12px;color:var(--eg-muted)}
+.eg-q-item .eg-t small.eg-sk{color:#b06a00}
+.eg-q-item .eg-t small.eg-lock{color:var(--eg-fg);font-weight:500}
+.eg-q-item .eg-btn{height:32px;padding:0 12px;font-size:13px}
+.eg-q-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
+.eg-q-acts .eg-link{height:22px;font-size:12px;padding:0 2px}
+.eg-q-f{border-top:1px solid var(--eg-line);padding:8px 12px;display:flex;justify-content:flex-end}
+.eg-toast{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,22px) + 62px);transform:translateX(-50%);background:#1c2634;color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--eg-shadow);max-width:calc(100vw - 32px);pointer-events:none}
+svg.eg-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
+@media (max-width:767px){
+  .eg-bubble{width:auto}
+  .eg-arrow{display:none}
+  .eg-modal{top:auto;bottom:12px;transform:translateX(-50%);width:calc(100vw - 24px);padding:24px 20px 18px}
+  .eg-modal.eg-pop{animation:eg-up .3s cubic-bezier(.2,.9,.3,1.1)}
+  .eg-modal .eg-actions .eg-btn{height:46px}
+  .eg-chip{right:16px;bottom:var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom)))}
+  .eg-panel-bd{display:block;position:fixed;inset:0;background:rgba(15,23,42,.38);pointer-events:auto}
+  .eg-panel{left:0;right:0;bottom:0;width:100%;max-height:85vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
+  .eg-q-item{padding:12px 8px}
+  .eg-card{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) - 4px)}
+  .eg-toast{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) + 60px)}
+}
+@keyframes eg-up{from{opacity:0;transform:translate(-50%,30px)}}
+@media (prefers-reduced-motion:reduce){
+  [data-erp-guide-layer] *,[data-erp-guide-layer] *::before,[data-erp-guide-layer] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
+  .eg-ring::after{animation:none!important;opacity:1;transform:none}
+  .eg-ring.eg-flash::after{animation:eg-flash .5s ease 1!important;animation-duration:.5s!important}
+  .eg-hand{animation:none!important;transform:translate(4px,6px)}
+  .eg-burst{display:none}
+  .eg-bubble.eg-nudge{animation:none!important;border-top-color:var(--eg-danger)}
+}
+`;
+
+/* ------------------------------------------------------------------ */
+/* Bits                                                                 */
+/* ------------------------------------------------------------------ */
+const TH_MONTHS = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
+const pad2 = (n) => String(n).padStart(2, "0");
+/** "26 ต.ค. 2569 13:04" — day, month, Buddhist year, 24 h. */
+function formatThaiDateTime(iso) {
+    if (!iso)
+        return "";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return "";
+    return `${d.getDate()} ${TH_MONTHS[d.getMonth()]} ${d.getFullYear() + 543} ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+/** "กด [บันทึก]": the bracketed word is a chip in the brand colour. */
+function GuideTitle({ text }) {
+    const parts = text.split(/(\[[^\]]+\])/g).filter(Boolean);
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: parts.map((p, i) => p.startsWith("[") && p.endsWith("]") ? (jsxRuntime.jsx("span", { className: "eg-k", children: p.slice(1, -1) }, i)) : (jsxRuntime.jsx(React__namespace.Fragment, { children: p }, i))) }));
+}
+const Svg = ({ children, className = "eg-ic" }) => (jsxRuntime.jsx("svg", { className: className, viewBox: "0 0 24 24", "aria-hidden": "true", children: children }));
+const IconCheck = () => (jsxRuntime.jsx(Svg, { children: jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+const IconX = () => (jsxRuntime.jsx(Svg, { children: jsxRuntime.jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }));
+const IconFlag = () => (jsxRuntime.jsxs(Svg, { children: [jsxRuntime.jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }), jsxRuntime.jsx("path", { d: "M4 22v-7" })] }));
+const IconTrophy = () => (jsxRuntime.jsx(Svg, { children: jsxRuntime.jsx("path", { d: "M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z" }) }));
+const HAND_PATH = "M18 11V9.5a2 2 0 0 0-4 0V9a2 2 0 0 0-4 0v.5V4a2 2 0 0 0-4 0v10l-1.6-1.6a2 2 0 0 0-2.83 2.83l3.6 3.6C6.66 20.3 8.6 22 11.5 22H14a8 8 0 0 0 8-8v-3a2 2 0 0 0-4 0z";
+/** Rounded-rectangle subpath for the scrim's holes. */
+function roundRect(r, radius) {
+    const rad = Math.max(0, Math.min(radius, r.width / 2, r.height / 2));
+    const { x, y, width: w, height: h } = r;
+    return (`M${x + rad} ${y}H${x + w - rad}A${rad} ${rad} 0 0 1 ${x + w} ${y + rad}` +
+        `V${y + h - rad}A${rad} ${rad} 0 0 1 ${x + w - rad} ${y + h}` +
+        `H${x + rad}A${rad} ${rad} 0 0 1 ${x} ${y + h - rad}` +
+        `V${y + rad}A${rad} ${rad} 0 0 1 ${x + rad} ${y}Z`);
+}
+const rectPath = (r) => `M${r.x} ${r.y}H${r.x + r.width}V${r.y + r.height}H${r.x}Z`;
+/**
+ * The dim layer that eats every press outside the holes. The holes are a
+ * union: where two overlap (a field and the select list open over it) the
+ * page stays open.
+ *
+ * - The look: one rectangle masked by the rounded holes (a mask adds holes
+ *   up, so an overlap is not filled back in).
+ * - The presses: a transparent path made of the screen minus the holes, as
+ *   rectangles that do not overlap (blockedRects). A press inside a hole
+ *   reaches the page underneath; any other lands on the path (marked
+ *   data-eg-block) and is cancelled.
+ * - `open`: the holes a press may go through, when not all of them (a "view"
+ *   step's target is shown but not pressable). Default: every hole.
+ */
+function Scrim({ holes, open, width, height }) {
+    const maskId = "eg-scrim-mask-" + React__namespace.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const block = blockedRects(open ?? holes, width, height).map(rectPath).join("");
+    return (jsxRuntime.jsxs("svg", { className: "eg-scrim-svg", width: width, height: height, "aria-hidden": "true", children: [holes.length ? (jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: -10, y: -10, width: width + 20, height: height + 20, children: [jsxRuntime.jsx("rect", { x: -10, y: -10, width: width + 20, height: height + 20, fill: "#fff" }), holes.map((h, i) => (jsxRuntime.jsx("path", { d: roundRect(h, 12), fill: "#000" }, i)))] }) })) : null, jsxRuntime.jsx("rect", { className: "eg-scrim-fill", x: -10, y: -10, width: width + 20, height: height + 20, mask: holes.length ? `url(#${maskId})` : undefined }), jsxRuntime.jsx("path", { className: "eg-scrim-hit", d: block, "data-eg-block": "" })] }));
+}
+/** Whether two rectangles overlap. */
+const meets = (a, b) => !!intersectRect(a, b);
+/** The smallest rectangle around all of them. */
+function boundingRect(rs) {
+    const x = Math.min(...rs.map(r => r.x));
+    const y = Math.min(...rs.map(r => r.y));
+    const right = Math.max(...rs.map(r => r.x + r.width));
+    const bottom = Math.max(...rs.map(r => r.y + r.height));
+    return { x, y, width: right - x, height: bottom - y };
+}
+/** Where the bubble may go, in order of preference. */
+const BUBBLE_PLACEMENTS = ["right", "bottom", "top", "left"];
+/**
+ * The first placement (in BUBBLE_PLACEMENTS order) whose bubble is on screen,
+ * off the target (with its open list), and off everything to keep clear;
+ * failing that, the first that is only on screen and off the target; -1 when
+ * none is.
+ */
+function pickPlacement(results, bw, bh, anchor, clear, bounds) {
+    const box = (r) => ({ x: r.x, y: r.y, width: bw, height: bh });
+    const fits = (b) => b.x >= bounds.x - 1 && b.y >= bounds.y - 1 && b.x + b.width <= bounds.x + bounds.width + 1 && b.y + b.height <= bounds.y + bounds.height + 1;
+    const ok = results.map(r => {
+        const b = box(r);
+        return fits(b) && !meets(b, anchor);
+    });
+    const best = results.findIndex((r, i) => ok[i] && !clear.some(c => meets(box(r), c)));
+    return best >= 0 ? best : ok.indexOf(true);
+}
+const BUBBLE_TITLE_ID = "eg-bubble-title";
+const BUBBLE_WHY_ID = "eg-bubble-why";
+function useNudge(nudge, ref) {
+    const first = React.useRef(nudge);
+    React.useEffect(() => {
+        if (nudge === first.current)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        el.classList.remove("eg-nudge");
+        void el.offsetWidth;
+        el.classList.add("eg-nudge");
+    }, [nudge, ref]);
+}
+function StepLayer(p) {
+    const { spot, phone, viewport } = p;
+    const bubbleRef = React.useRef(null);
+    const arrowRef = React.useRef(null);
+    const ringRef = React.useRef(null);
+    const [pos, setPos] = React.useState(null);
+    useNudge(p.nudge, bubbleRef);
+    // Flash the ring with each nudge too (a press outside the hole).
+    const firstNudge = React.useRef(p.nudge);
+    React.useEffect(() => {
+        if (p.nudge === firstNudge.current)
+            return;
+        const el = ringRef.current;
+        if (!el)
+            return;
+        el.classList.remove("eg-flash");
+        void el.offsetWidth;
+        el.classList.add("eg-flash");
+    }, [p.nudge]);
+    const showBubble = p.phase === "ready" && (!!spot || !p.hasTarget);
+    const gap = p.showHand ? 34 : 14;
+    const spotKey = spot ? `${spot.x}|${spot.y}|${spot.width}|${spot.height}` : "";
+    const contentKey = `${p.bubble.title}|${p.bubble.why}|${p.bubble.error?.title ?? ""}|${p.bubble.showNext}`;
+    // What the bubble sits beside: the target, with an open list over it (the
+    // list is what the person is choosing from now). What it must not cover:
+    // open lists, and the other anchors the step allows (a map step's
+    // coordinate fields).
+    const popoverList = p.popovers ?? [];
+    const anchor = spot ? boundingRect([spot, ...popoverList.filter(o => meets(o, spot))]) : null;
+    const clear = [...popoverList, ...p.holes];
+    const anchorKey = anchor ? `${anchor.x}|${anchor.y}|${anchor.width}|${anchor.height}` : "";
+    const clearKey = clear.map(r => `${r.x},${r.y},${r.width},${r.height}`).join(";");
+    React.useLayoutEffect(() => {
+        const el = bubbleRef.current;
+        if (!el || !showBubble)
+            return;
+        const m = 16;
+        if (!spot || !anchor) {
+            // Nothing to point at: the middle of the screen (the bottom on a phone).
+            const bw = el.offsetWidth;
+            const bh = el.offsetHeight;
+            setPos(phone
+                ? { left: m, top: viewport.offsetTop + viewport.height - bh - m, side: "dock" }
+                : { left: (window.innerWidth - bw) / 2, top: viewport.offsetTop + (viewport.height - bh) / 2, side: "dock" });
+            return;
+        }
+        if (phone) {
+            // Docked to the top or the bottom of the screen, whichever covers less
+            // of the target and its open list (target in the lower half: top).
+            const vh = viewport.height;
+            const oy = viewport.offsetTop;
+            const bh = el.offsetHeight;
+            const topT = oy + m + 4;
+            const botT = oy + vh - bh - m;
+            const { y, height: h } = anchor;
+            const overlapTop = Math.max(0, topT + bh + 8 - y);
+            const overlapBot = Math.max(0, y + h + gap - botT);
+            const top = y + h / 2 > vh / 2
+                ? overlapTop <= overlapBot
+                    ? topT
+                    : botT
+                : overlapBot <= overlapTop
+                    ? botT
+                    : topT;
+            setPos({ left: m, top, side: "dock" });
+            return;
+        }
+        let cancelled = false;
+        const a = anchor;
+        const ref = {
+            getBoundingClientRect: () => ({
+                x: a.x,
+                y: a.y,
+                left: a.x,
+                top: a.y,
+                width: a.width,
+                height: a.height,
+                right: a.x + a.width,
+                bottom: a.y + a.height,
+            }),
+        };
+        const at = (placement) => dom.computePosition(ref, el, {
+            strategy: "fixed",
+            placement,
+            middleware: [
+                dom.offset(placement.startsWith("bottom") ? gap : 14),
+                dom.shift({ padding: m }),
+                ...(arrowRef.current ? [dom.arrow({ element: arrowRef.current, padding: 14 })] : []),
+            ],
+        });
+        Promise.all(BUBBLE_PLACEMENTS.map(at))
+            .then(results => {
+            if (cancelled)
+                return;
+            const bw = el.offsetWidth;
+            const bh = el.offsetHeight;
+            const bounds = { x: m, y: viewport.offsetTop + m, width: window.innerWidth - 2 * m, height: viewport.height - 2 * m };
+            const i = pickPlacement(results, bw, bh, a, clear, bounds);
+            if (i < 0) {
+                // Nowhere beside it: the bottom-right corner.
+                setPos({ left: window.innerWidth - bw - m, top: viewport.height + viewport.offsetTop - bh - m, side: "dock" });
+                return;
+            }
+            const { x, y, placement, middlewareData } = results[i];
+            const side = placement.split("-")[0];
+            setPos({ left: x, top: y, side, ax: middlewareData.arrow?.x, ay: middlewareData.arrow?.y });
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPos({ left: m, top: m, side: "dock" });
+        });
+        return () => {
+            cancelled = true;
+        };
+        // The keys stand for spot, the lists, the holes and the bubble's size.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [spotKey, anchorKey, clearKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop]);
+    const popovers = p.popovers ?? [];
+    const covered = !!p.covered;
+    const holes = [...(spot && !covered ? [spot] : []), ...popovers, ...p.holes];
+    const openHoles = p.targetPressable === false ? [...popovers, ...p.holes] : holes;
+    const ringShown = !!spot && p.phase === "ready" && !covered && !popovers.some(o => meets(o, spot));
+    const hand = spot && p.showHand && p.phase === "ready" && !covered && !popovers.length ? handPosition(spot, viewport.height) : null;
+    let arrowStyle;
+    if (pos && pos.side !== "dock") {
+        if (pos.side === "right")
+            arrowStyle = { left: -7, top: pos.ay };
+        else if (pos.side === "left")
+            arrowStyle = { right: -7, top: pos.ay };
+        else if (pos.side === "bottom")
+            arrowStyle = { top: -9, left: pos.ax };
+        else
+            arrowStyle = { bottom: -7, left: pos.ax };
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scrim, { holes: p.phase === "ready" ? holes : [], open: p.phase === "ready" ? openHoles : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && ringShown ? (jsxRuntime.jsx("div", { ref: ringRef, className: "eg-ring" + (p.moving ? " eg-move" : ""), style: { left: spot.x, top: spot.y, width: spot.width, height: spot.height }, "aria-hidden": "true" })) : null, hand ? (jsxRuntime.jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxRuntime.jsxs("div", { ref: bubbleRef, className: "eg-bubble" + (p.bubble.error ? " eg-err" : ""), role: "dialog", "aria-modal": "false", "aria-labelledby": BUBBLE_TITLE_ID, "aria-describedby": BUBBLE_WHY_ID, tabIndex: -1, "data-eg-bubble": "", style: {
+                    left: pos?.left ?? 0,
+                    top: pos?.top ?? 0,
+                    width: phone ? viewport.width - 32 : undefined,
+                    visibility: pos ? "visible" : "hidden",
+                }, children: [jsxRuntime.jsx(BubbleBody, { ...p }), jsxRuntime.jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxRuntime.jsxs("div", { className: "eg-loading", children: [jsxRuntime.jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsxRuntime.jsx("div", { className: "eg-row", children: jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }) })] })) : null, p.phase === "missing" ? (jsxRuntime.jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-missing-t", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onRetry, children: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" })] })] })) : null, p.phase === "away" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", p.bubble.missionNo, " \u00B7 ", p.bubble.missionTitle, p.bubble.replay ? " (ทบทวน)" : ""] }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsxRuntime.jsx(GuideTitle, { text: p.bubble.title }) }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (jsxRuntime.jsx(ConfirmModal, { title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49?", line: "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E44\u0E14\u0E49\u0E17\u0E35\u0E48\u0E1B\u0E38\u0E48\u0E21 ? \u0E21\u0E38\u0E21\u0E02\u0E27\u0E32\u0E1A\u0E19", leaveLabel: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C", stayLabel: "\u0E17\u0E33\u0E15\u0E48\u0E2D", onLeave: p.onExitConfirm, onStay: p.onExitCancel })) : null] }));
+}
+function BubbleBody(p) {
+    const b = p.bubble;
+    const title = b.error ? b.error.title : b.title;
+    const why = b.error ? (b.error.detail ?? "") : b.why;
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", b.missionNo, " \u00B7 ", b.missionTitle, b.replay ? " (ทบทวน)" : ""] }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsxRuntime.jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsxRuntime.jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsxRuntime.jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsxRuntime.jsx(GuideTitle, { text: title }) }), jsxRuntime.jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsxRuntime.jsx(GuideTitle, { text: why }) }), jsxRuntime.jsxs("div", { className: "eg-b-f", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: b.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxRuntime.jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showEndWithoutSave ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onEndWithoutSave, children: "\u0E08\u0E1A\u0E42\u0E14\u0E22\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" })) : null, b.showNext ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: "\u0E16\u0E31\u0E14\u0E44\u0E1B" })) : null] })] })] }));
+}
+/** The fingertip at ≈62% across and down the target; upside down near the bottom. */
+function handPosition(spot, viewportHeight) {
+    const { x, y, width: w, height: h } = spot;
+    const px = x + Math.min(w * 0.62, w - 14);
+    const py = y + h * 0.62;
+    const flip = py + 50 > viewportHeight;
+    return { left: px - 11.5, top: flip ? py - h * 0.3 - 42 : py - 4, flip };
+}
+/* ------------------------------------------------------------------ */
+/* Modals                                                               */
+/* ------------------------------------------------------------------ */
+function useAutoFocus() {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        ref.current?.focus({ preventScroll: true });
+    }, []);
+    return ref;
+}
+function ConfirmModal(p) {
+    const stay = useAutoFocus();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-scrim eg-faint", "data-eg-block": "", onClick: p.onStay }), jsxRuntime.jsxs("div", { className: "eg-modal eg-confirm eg-pop", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "eg-c-t", "aria-describedby": "eg-c-d", "data-eg-modal": "", children: [jsxRuntime.jsx("h2", { id: "eg-c-t", children: p.title }), jsxRuntime.jsx("p", { className: "eg-sub", id: "eg-c-d", style: { fontSize: 14 }, children: p.line }), jsxRuntime.jsxs("div", { className: "eg-actions", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onLeave, children: p.leaveLabel }), jsxRuntime.jsx("button", { type: "button", ref: stay, className: "eg-btn eg-primary", onClick: p.onStay, children: p.stayLabel })] })] })] }));
+}
+function WelcomeModal(p) {
+    const start = useAutoFocus();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxRuntime.jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-w-t", "data-eg-modal": "", tabIndex: -1, children: [jsxRuntime.jsx("div", { className: "eg-badge", children: jsxRuntime.jsx(IconFlag, {}) }), jsxRuntime.jsx("p", { className: "eg-eyebrow", children: "\u0E44\u0E01\u0E14\u0E4C\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsx("h2", { id: "eg-w-t", children: p.title }), p.subtitle ? jsxRuntime.jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsxRuntime.jsx("ol", { className: "eg-quests", children: p.missions.map((m, i) => (jsxRuntime.jsxs("li", { className: i === 0 ? "eg-first" : undefined, children: [jsxRuntime.jsx("span", { className: "eg-n", children: i + 1 }), jsxRuntime.jsx("span", { className: "eg-t", children: m.title }), jsxRuntime.jsxs("small", { children: [m.minutes, " \u0E19\u0E32\u0E17\u0E35"] })] }, i))) }), jsxRuntime.jsxs("div", { className: "eg-actions", children: [jsxRuntime.jsx("button", { type: "button", ref: start, className: "eg-btn eg-primary", onClick: p.onStart, children: "\u0E40\u0E23\u0E34\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E41\u0E23\u0E01" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onSkip, children: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E1B\u0E01\u0E48\u0E2D\u0E19" })] })] }), p.confirm ? (jsxRuntime.jsx(ConfirmModal, { title: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E01\u0E14\u0E4C\u0E44\u0E1B\u0E01\u0E48\u0E2D\u0E19?", line: "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E44\u0E14\u0E49\u0E17\u0E35\u0E48\u0E1B\u0E38\u0E48\u0E21 ? \u0E21\u0E38\u0E21\u0E02\u0E27\u0E32\u0E1A\u0E19", leaveLabel: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E1B\u0E01\u0E48\u0E2D\u0E19", stayLabel: "\u0E40\u0E23\u0E34\u0E48\u0E21\u0E40\u0E25\u0E22", onLeave: p.onSkipConfirm, onStay: p.onSkipCancel })) : null] }));
+}
+function GateModal(p) {
+    const go = useAutoFocus();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxRuntime.jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-g-t", "data-eg-modal": "", tabIndex: -1, children: [jsxRuntime.jsx("div", { className: "eg-badge", children: jsxRuntime.jsx(IconFlag, {}) }), jsxRuntime.jsx("p", { className: "eg-eyebrow", children: "\u0E44\u0E01\u0E14\u0E4C\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsx("h2", { id: "eg-g-t", children: p.title }), p.subtitle ? jsxRuntime.jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsxRuntime.jsxs("div", { className: "eg-actions", children: [jsxRuntime.jsx("a", { ref: go, className: "eg-btn eg-primary", href: p.href, style: { textDecoration: "none" }, children: p.actionLabel }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onLater, children: "\u0E44\u0E27\u0E49\u0E17\u0E35\u0E2B\u0E25\u0E31\u0E07" })] })] })] }));
+}
+const CONFETTI_COLOURS = ["#3b82f6", "#7db7ff", "#e6a417", "#ff7a6b", "#1d9a5f", "#b0d2ff"];
+function Confetti({ reduced }) {
+    // Fixed per mount, so a re-render does not throw new pieces.
+    const [pieces] = React.useState(() => Array.from({ length: 26 }, (_, i) => {
+        const a = (Math.PI * 2 * i) / 26 + Math.random() * 0.3;
+        const dist = 90 + Math.random() * 90;
+        return {
+            background: CONFETTI_COLOURS[i % CONFETTI_COLOURS.length],
+            "--x": `${Math.cos(a) * dist}px`,
+            "--y": `${Math.sin(a) * dist + 40}px`,
+            "--r": `${Math.random() * 540 - 270}deg`,
+            animationDelay: `${Math.random() * 0.12}s`,
+        };
+    }));
+    if (reduced)
+        return null;
+    return (jsxRuntime.jsx("div", { className: "eg-burst", "aria-hidden": "true", children: pieces.map((s, i) => (jsxRuntime.jsx("span", { style: s }, i))) }));
+}
+function ProgressBar({ from, to, total, label }) {
+    const [width, setWidth] = React.useState(total ? (from / total) * 100 : 0);
+    React.useEffect(() => {
+        // Two frames so the bar is drawn at `from` before it runs to `to`.
+        let raf2 = 0;
+        const raf1 = requestAnimationFrame(() => {
+            raf2 = requestAnimationFrame(() => setWidth(total ? (to / total) * 100 : 0));
+        });
+        return () => {
+            cancelAnimationFrame(raf1);
+            cancelAnimationFrame(raf2);
+        };
+    }, [to, total]);
+    return (jsxRuntime.jsxs("div", { className: "eg-prog", children: [jsxRuntime.jsx("div", { className: "eg-bar", children: jsxRuntime.jsx("i", { style: { width: `${width}%` } }) }), jsxRuntime.jsx("span", { children: label })] }));
+}
+function CelebrateModal(p) {
+    const primary = useAutoFocus();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-scrim eg-light", "data-eg-block": "" }), jsxRuntime.jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-cel-t", "data-eg-modal": "", tabIndex: -1, children: [jsxRuntime.jsx(Confetti, { reduced: p.reduced }), jsxRuntime.jsx("div", { className: "eg-medal", children: jsxRuntime.jsx(IconCheck, {}) }), jsxRuntime.jsxs("p", { className: "eg-eyebrow", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", p.missionNo, " \u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"] }), jsxRuntime.jsx("h2", { id: "eg-cel-t", children: p.title }), p.subtitle ? jsxRuntime.jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsxRuntime.jsx(ProgressBar, { from: p.reduced ? p.done : Math.max(0, p.done - 1), to: p.done, total: p.total, label: `${p.done}/${p.total} ภารกิจ` }), jsxRuntime.jsxs("div", { className: "eg-actions", children: [p.nextTitle ? (jsxRuntime.jsxs("button", { type: "button", ref: primary, className: "eg-btn eg-primary", onClick: p.onNext, children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E16\u0E31\u0E14\u0E44\u0E1B: ", p.nextTitle] })) : null, jsxRuntime.jsx("button", { type: "button", ref: p.nextTitle ? undefined : primary, className: "eg-btn eg-link", onClick: p.onRest, children: "\u0E1E\u0E31\u0E01\u0E01\u0E48\u0E2D\u0E19" })] })] })] }));
+}
+function CompleteModal(p) {
+    const primary = useAutoFocus();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxRuntime.jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-f-t", "data-eg-modal": "", tabIndex: -1, children: [jsxRuntime.jsx(Confetti, { reduced: p.reduced }), jsxRuntime.jsx("div", { className: "eg-medal", children: jsxRuntime.jsx(IconTrophy, {}) }), jsxRuntime.jsxs("p", { className: "eg-eyebrow", children: ["\u0E04\u0E23\u0E1A ", p.total, " \u0E20\u0E32\u0E23\u0E01\u0E34\u0E08"] }), jsxRuntime.jsx("h2", { id: "eg-f-t", children: p.title }), p.subtitle ? jsxRuntime.jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsxRuntime.jsx("ol", { className: "eg-quests", children: p.missions.map((m, i) => (jsxRuntime.jsxs("li", { className: "eg-ok", children: [jsxRuntime.jsx("span", { className: "eg-n", children: jsxRuntime.jsx(IconCheck, {}) }), jsxRuntime.jsx("span", { className: "eg-t", children: m })] }, i))) }), jsxRuntime.jsxs("div", { className: "eg-actions", children: [jsxRuntime.jsx("button", { type: "button", ref: primary, className: "eg-btn eg-primary", onClick: p.onFinish, children: p.actionLabel }), p.secondary ? (jsxRuntime.jsx("a", { className: "eg-btn eg-ghost", href: p.secondary.href, style: { textDecoration: "none" }, children: p.secondary.label })) : null] })] })] }));
+}
+/* ------------------------------------------------------------------ */
+/* Quest chip and panel                                                 */
+/* ------------------------------------------------------------------ */
+function QuestChip({ done, total, pulse, onOpen }) {
+    const ref = React.useRef(null);
+    const first = React.useRef(pulse);
+    React.useEffect(() => {
+        if (pulse === first.current)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        el.classList.remove("eg-hi");
+        void el.offsetWidth;
+        el.classList.add("eg-hi");
+    }, [pulse]);
+    const C = 2 * Math.PI * 14;
+    const pct = total ? done / total : 0;
+    return (jsxRuntime.jsxs("button", { ref: ref, type: "button", className: "eg-chip", onClick: onOpen, "aria-label": `ภารกิจเริ่มต้น เสร็จ ${done} จาก ${total}`, children: [jsxRuntime.jsxs("svg", { viewBox: "0 0 34 34", "aria-hidden": "true", children: [jsxRuntime.jsx("circle", { cx: "17", cy: "17", r: "14", fill: "none", stroke: "var(--eg-soft)", strokeWidth: "4" }), done ? (jsxRuntime.jsx("circle", { cx: "17", cy: "17", r: "14", fill: "none", stroke: "var(--eg-primary)", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: `${C * pct} ${C}`, transform: "rotate(-90 17 17)" })) : null] }), "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", done, "/", total] }));
+}
+function QuestPanel(p) {
+    const ref = useAutoFocus();
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx("div", { className: "eg-prog", children: jsxRuntime.jsx("div", { className: "eg-bar", children: jsxRuntime.jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsxRuntime.jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (jsxRuntime.jsx(QuestRow, { item: it, n: i + 1, just: p.justDone === it.key, gate: p.gate, onStart: p.onStart, onDismiss: p.onDismiss }, it.key))) }), p.canHideChip ? (jsxRuntime.jsx("div", { className: "eg-q-f", children: jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onHideChip, children: "\u0E0B\u0E48\u0E2D\u0E19\u0E1B\u0E38\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08" }) })) : null] })] }));
+}
+function QuestRow({ item, n, just, gate, onStart, onDismiss, }) {
+    const v = item.view;
+    const ticked = v === "done" || v === "already";
+    const cls = "eg-q-item" +
+        (ticked ? " eg-done" : v === "next" ? " eg-next" : "") +
+        (v === "locked" || v === "waiting" ? " eg-dim" : "") +
+        (just ? " eg-just" : "");
+    let meta = `ประมาณ ${item.minutes} นาที`;
+    if (v === "done")
+        meta = item.completedAt ? `เสร็จ ${formatThaiDateTime(item.completedAt)}` : "เสร็จแล้ว";
+    else if (v === "already")
+        meta = "ทำไว้แล้ว";
+    else if (v === "skipped")
+        meta = jsxRuntime.jsx("span", { children: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E27\u0E49" });
+    else if (v === "waiting" && gate)
+        meta = gate.pending;
+    // Locked: what to do first gets its own line under the title, so the title
+    // keeps the row's width and the button stays short.
+    const lockHint = v === "locked" && item.lockedBy ? `ทำ ${item.lockedBy} ก่อน` : null;
+    let button;
+    if (v === "done")
+        button = jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onStart(item.key, true), children: "\u0E17\u0E33\u0E0B\u0E49\u0E33" });
+    else if (v === "already")
+        button = jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onStart(item.key, true), children: "\u0E14\u0E39\u0E27\u0E34\u0E18\u0E35\u0E17\u0E33" });
+    else if (v === "waiting" && gate)
+        button = (jsxRuntime.jsx("a", { className: "eg-btn eg-ghost", href: gate.href, style: { textDecoration: "none" }, children: gate.label }));
+    else if (v === "locked")
+        button = (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", disabled: true, "aria-label": lockHint ? `เริ่ม (${lockHint})` : undefined, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" }));
+    else
+        button = (jsxRuntime.jsx("button", { type: "button", className: "eg-btn " + (v === "next" ? "eg-primary" : "eg-ghost"), onClick: () => onStart(item.key, false), children: v === "skipped" || v === "active" ? "ทำต่อ" : "เริ่ม" }));
+    const dismissable = item.optional && (v === "todo" || v === "next");
+    return (jsxRuntime.jsxs("li", { className: cls, children: [jsxRuntime.jsx("span", { className: "eg-n", children: ticked ? jsxRuntime.jsx(IconCheck, {}) : n }), jsxRuntime.jsxs("div", { className: "eg-t", children: [jsxRuntime.jsx("b", { children: item.title }), lockHint ? jsxRuntime.jsx("small", { className: "eg-lock", children: lockHint }) : null, jsxRuntime.jsx("small", { className: v === "skipped" ? "eg-sk" : undefined, children: meta })] }), dismissable ? (jsxRuntime.jsxs("span", { className: "eg-q-acts", children: [button, jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: () => onDismiss(item.key), children: "\u0E44\u0E21\u0E48\u0E43\u0E0A\u0E49\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E19\u0E35\u0E49" })] })) : (button)] }));
+}
+function GuideToast({ text }) {
+    return (jsxRuntime.jsx("div", { className: "eg-toast", role: "status", children: text }));
+}
+
+/* ------------------------------------------------------------------ */
+/* Fail-open wrappers                                                   */
+/* ------------------------------------------------------------------ */
+/** Hides the tour (and only the tour) after any error under it. */
+class GuideErrorBoundary extends React__namespace.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { failed: false }
+        });
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        if (typeof console !== "undefined")
+            console.warn("[erp-shell guide] hidden after an error", error);
+        try {
+            publishGuideEntry(null, null);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+/**
+ * Runs a tour with the app's adapters. Mount it once, above the pages (so a
+ * route change does not unmount it), only where the tour may run.
+ */
+function GuideRuntime(props) {
+    return (jsxRuntime.jsx(GuideErrorBoundary, { children: jsxRuntime.jsx(GuideRuntimeInner, { ...props }) }, `${props.organizationId}|${props.config.suite.key}`));
+}
+/** Waits for `ms` of the page not loading (isBusy false), then calls `fn`; null `isBusy` waits `ms`. */
+function useAfterIdle(active, ms, isBusy, fn, deps) {
+    const fnRef = React.useRef(fn);
+    fnRef.current = fn;
+    const busyRef = React.useRef(isBusy);
+    busyRef.current = isBusy;
+    React.useEffect(() => {
+        if (!active)
+            return;
+        let idleSince = null;
+        const iv = setInterval(() => {
+            let busy = false;
+            try {
+                busy = busyRef.current();
+            }
+            catch {
+                busy = false;
+            }
+            if (busy) {
+                idleSince = null;
+                return;
+            }
+            idleSince ?? (idleSince = Date.now());
+            if (Date.now() - idleSince >= ms) {
+                clearInterval(iv);
+                fnRef.current();
+            }
+        }, IDLE_POLL_MS);
+        return () => clearInterval(iv);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [active, ms, ...deps]);
+}
+const notBusy = () => false;
+/* ------------------------------------------------------------------ */
+/* Session mirror (instant resume after F5)                             */
+/* ------------------------------------------------------------------ */
+const mirrorKey = (orgId, suite) => `erp-guide:${orgId}:${suite.key}`;
+function readMirror(orgId, suite) {
+    try {
+        const raw = sessionStorage.getItem(mirrorKey(orgId, suite));
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        const row = parseRow(parsed);
+        if (!row || row.guide_version !== suite.version)
+            return null;
+        return { ...row, server_status: parsed.server_status ?? null };
+    }
+    catch {
+        return null;
+    }
+}
+function writeMirror(orgId, suite, p) {
+    try {
+        sessionStorage.setItem(mirrorKey(orgId, suite), JSON.stringify(p));
+    }
+    catch {
+        /* private mode: the server copy is enough */
+    }
+}
+/* ------------------------------------------------------------------ */
+/* One tab at a time                                                    */
+/* ------------------------------------------------------------------ */
+/**
+ * Whether this tab runs the tour. With two tabs open, the first holds a Web
+ * Lock and the second shows nothing until the first goes away.
+ */
+function usePrimaryTab(name) {
+    const [primary, setPrimary] = React.useState(false);
+    React.useEffect(() => {
+        const locks = (typeof navigator !== "undefined" ? navigator.locks : undefined);
+        if (!locks?.request) {
+            setPrimary(true);
+            return;
+        }
+        const abort = new AbortController();
+        let release = null;
+        locks
+            .request(name, { signal: abort.signal }, () => {
+            setPrimary(true);
+            return new Promise(resolve => {
+                release = resolve;
+            });
+        })
+            .catch(() => {
+            /* aborted on unmount */
+        });
+        return () => {
+            abort.abort();
+            release?.();
+            setPrimary(false);
+        };
+    }, [name]);
+    return primary;
+}
+/* ------------------------------------------------------------------ */
+/* Putting the page back after a replay                                 */
+/* ------------------------------------------------------------------ */
+const ABORT_DELAY_MS = 60;
+const ABORT_GAP_MS = 150;
+/**
+ * Runs a replay's abort actions in order, once the tour has let go of the
+ * page: press an anchor (passed over when it is not there), emit an app
+ * event, or Escape to the open dialog (Radix listens on the document).
+ */
+function runAbort(actions) {
+    actions.forEach((a, i) => {
+        setTimeout(() => {
+            try {
+                if ("click" in a) {
+                    findAnchor(a.click)?.click();
+                }
+                else if ("event" in a) {
+                    emitGuideEvent(a.event);
+                }
+                else if ("escape" in a) {
+                    const t = document.activeElement ?? document.body;
+                    t.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true, cancelable: true }));
+                }
+            }
+            catch {
+                /* never breaks the app */
+            }
+        }, ABORT_DELAY_MS + i * ABORT_GAP_MS);
+    });
+}
+/** A step's own target takes presses: not on a "view" step, unless the step allows it. */
+function targetPressable(step, bridge) {
+    if (!step || bridge)
+        return true;
+    if (stepKind(step) !== "view")
+        return true;
+    return !!step.target && (step.allow ?? []).includes(step.target);
+}
+/* ------------------------------------------------------------------ */
+/* Host                                                                 */
+/* ------------------------------------------------------------------ */
+const TARGET_PAD = 6;
+const LOST_GRACE_MS = 350;
+const WAIT_MS = 8000;
+const WAIT_CAP_MS = 30000;
+const WELCOME_DELAY_MS = 500;
+const CELEBRATE_DELAY_MS = 450;
+const SAVE_DEBOUNCE_MS = 600;
+const IDLE_POLL_MS = 100;
+/** A celebration earned outside the tour waits this long of nothing loading. */
+const PASSIVE_IDLE_MS = 600;
+function GuideRuntimeInner({ config, organizationId, code, routing, progress: progressAdapter, isBusy, menu, hidden, bottomOffset }) {
+    const suite = config.suite;
+    const pathname = routing.pathname || "/";
+    const search = routing.search ?? "";
+    const navigateRef = React.useRef(routing.navigate);
+    navigateRef.current = routing.navigate;
+    const adapterRef = React.useRef(progressAdapter);
+    adapterRef.current = progressAdapter;
+    const busy = isBusy ?? notBusy;
+    const busyRef = React.useRef(busy);
+    busyRef.current = busy;
+    // No menu: never a menu step (the machine sees it as always open).
+    const sidebarOpen = menu ? !!menu.open : true;
+    const primary = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
+    // Progress: read once this tab runs the tour and the app is ready.
+    const [answer, setAnswer] = React.useState(null);
+    const enabled = primary && config.ready !== false;
+    const loaded = React.useRef(false);
+    React.useEffect(() => {
+        if (!enabled || loaded.current)
+            return;
+        loaded.current = true;
+        const ac = new AbortController();
+        let alive = true;
+        let settled = false;
+        void loadGuides(adapterRef.current, suite, ac.signal).then(a => {
+            settled = true;
+            if (alive)
+                setAnswer(a);
+        });
+        return () => {
+            alive = false;
+            ac.abort();
+            // Unmounted before the answer (StrictMode's second pass): ask again.
+            if (!settled)
+                loaded.current = false;
+        };
+    }, [enabled, suite]);
+    const live = !!answer && answer.audience !== "none" && !answer.newerOnServer && primary && config.ready !== false && !hidden;
+    /* ---------------- machine ---------------- */
+    const [state, setState] = React.useState(null);
+    const stateRef = React.useRef(null);
+    // What the server holds (payloadKey), so a save that would change nothing
+    // is not sent and does not bump its rev.
+    const savedKey = React.useRef(null);
+    React.useEffect(() => {
+        if (!answer || answer.audience === "none" || answer.newerOnServer) {
+            stateRef.current = null;
+            setState(null);
+            return;
+        }
+        if (stateRef.current)
+            return;
+        savedKey.current = answer.progress && answer.progress.rev > 0 ? payloadKey(answer.progress, suite.app) : null;
+        // Resume from whichever copy is further along: the server's, or this
+        // tab's session copy from before a refresh (its rev is the server's).
+        const mirror = readMirror(organizationId, suite);
+        let progress = answer.progress;
+        if (mirror && furtherProgress(mirror, progress) === mirror)
+            progress = mergeProgress(mirror, progress);
+        const s = initialGuideState(answer.audience, progress);
+        stateRef.current = s;
+        setState(s);
+    }, [answer, organizationId, suite]);
+    // The latest page facts, read by the machine through env.
+    const pageRef = React.useRef({ pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can });
+    pageRef.current = { pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can };
+    const targetElRef = React.useRef(null);
+    const env = React.useCallback(() => {
+        const pg = pageRef.current;
+        return {
+            code,
+            pathname: pg.pathname,
+            search: new URLSearchParams(pg.search),
+            facts: pg.facts,
+            can: (key) => {
+                try {
+                    return pg.can ? pg.can(key) : true;
+                }
+                catch {
+                    return true;
+                }
+            },
+            isVisible: (anchor, id) => anchorVisible(anchor, id),
+            sidebarOpen: pg.sidebarOpen,
+            targetValue: () => fieldValue(targetElRef.current),
+            dialogOpen: () => appDialogOpen(),
+        };
+    }, [code]);
+    /* ---------------- effects: save, announce, toast, navigate ---------------- */
+    const [liveText, setLiveText] = React.useState("");
+    const [toast, setToast] = React.useState(null);
+    const toastTimer = React.useRef(null);
+    const saveTimer = React.useRef(null);
+    const saving = React.useRef(null);
+    const savePending = React.useRef(false);
+    const flushSave = React.useCallback(async () => {
+        if (saveTimer.current) {
+            clearTimeout(saveTimer.current);
+            saveTimer.current = null;
+        }
+        if (saving.current) {
+            savePending.current = true;
+            return;
+        }
+        const run = async () => {
+            do {
+                savePending.current = false;
+                const cur = stateRef.current;
+                if (!cur)
+                    return;
+                if (payloadKey(cur.progress, suite.app) === savedKey.current)
+                    continue;
+                const row = await storeGuides(adapterRef.current, suite, cur.progress);
+                if (row)
+                    savedKey.current = payloadKey(row, suite.app);
+                if (row && stateRef.current) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    dispatchRef.current({ type: "serverRow", progress: row });
+                }
+            } while (savePending.current);
+        };
+        saving.current = run().finally(() => {
+            saving.current = null;
+        });
+    }, [organizationId, suite]);
+    const runEffects = React.useCallback((effects) => {
+        for (const e of effects) {
+            try {
+                if (e.type === "save") {
+                    if (stateRef.current)
+                        writeMirror(organizationId, suite, stateRef.current.progress);
+                    if (e.immediate)
+                        void flushSave();
+                    else {
+                        if (saveTimer.current)
+                            clearTimeout(saveTimer.current);
+                        saveTimer.current = setTimeout(() => void flushSave(), SAVE_DEBOUNCE_MS);
+                    }
+                }
+                else if (e.type === "announce") {
+                    setLiveText("");
+                    setTimeout(() => setLiveText(e.text), 60);
+                }
+                else if (e.type === "toast") {
+                    setToast(e.text);
+                    if (toastTimer.current)
+                        clearTimeout(toastTimer.current);
+                    toastTimer.current = setTimeout(() => setToast(null), 3200);
+                }
+                else if (e.type === "navigate") {
+                    if (/^https?:\/\//i.test(e.href))
+                        window.location.assign(e.href);
+                    else
+                        navigateRef.current(e.href);
+                }
+                else if (e.type === "abort") {
+                    // After this render takes the guard away, put the page back.
+                    runAbort(e.actions);
+                }
+            }
+            catch {
+                /* an effect never breaks the app */
+            }
+        }
+    }, [flushSave, organizationId, suite]);
+    const dispatch = React.useCallback((action) => {
+        const cur = stateRef.current;
+        if (!cur)
+            return;
+        let r;
+        try {
+            r = reduceGuide(cur, action, suite, env());
+        }
+        catch (err) {
+            if (typeof console !== "undefined")
+                console.warn("[erp-shell guide] stopped", err);
+            stateRef.current = null;
+            setState(null);
+            return;
+        }
+        if (r.state !== cur) {
+            stateRef.current = r.state;
+            setState(r.state);
+        }
+        if (r.effects.length)
+            runEffects(r.effects);
+    }, [env, runEffects, suite]);
+    const dispatchRef = React.useRef(dispatch);
+    dispatchRef.current = dispatch;
+    // Save what is pending when the page goes away.
+    React.useEffect(() => {
+        const flush = () => {
+            if (saveTimer.current)
+                void flushSave();
+        };
+        window.addEventListener("pagehide", flush);
+        return () => {
+            window.removeEventListener("pagehide", flush);
+            flush();
+            if (toastTimer.current)
+                clearTimeout(toastTimer.current);
+        };
+    }, [flushSave]);
+    /* ---------------- boot: resume, welcome ---------------- */
+    const screen = state?.screen ?? { name: "idle" };
+    const resumed = React.useRef(false);
+    React.useEffect(() => {
+        if (!live || !state || resumed.current)
+            return;
+        resumed.current = true;
+        dispatch({ type: "resume" });
+    }, [live, state, dispatch]);
+    const welcomeRoutes = suite.welcomeRoutes ?? ["/[code]"];
+    const onWelcomeRoute = welcomeRoutes.some(r => !!matchRoute(r, pathname, search, code));
+    const factsKey = useFactsKey(config.facts);
+    const welcomeCtx = state ? guideContext(env(), state.progress.context) : null;
+    const welcomeIsDue = !!state && !!welcomeCtx && live && welcomeDue(state, suite, welcomeCtx);
+    const due = welcomeIsDue && onWelcomeRoute;
+    // After a moment of nothing loading (the page has settled).
+    useAfterIdle(due, WELCOME_DELAY_MS, busy, () => dispatchRef.current({ type: "welcome" }), [factsKey]);
+    /* ---------------- done outside the tour (completeOn) ---------------- */
+    const passiveNames = React.useMemo(() => passiveEventNames(suite), [suite]);
+    const hasPassive = React.useMemo(() => suite.missions.some(m => !!m.completeOn), [suite]);
+    React.useEffect(() => {
+        if (!live || !hasPassive)
+            return;
+        const onApi = (e) => {
+            const d = e.detail;
+            if (!d || typeof d.status !== "number" || typeof d.path !== "string")
+                return;
+            dispatchRef.current({ type: "passive", signal: { kind: "api", method: String(d.method ?? "GET"), path: d.path, status: d.status, id: d.id, message: d.message } });
+        };
+        window.addEventListener(API_EVENT, onApi);
+        const handlers = passiveNames.map(n => [
+            GUIDE_EVENT_PREFIX + n,
+            (e) => dispatchRef.current({ type: "passive", signal: { kind: "event", name: n, detail: e.detail ?? undefined } }),
+        ]);
+        handlers.forEach(([n, h]) => window.addEventListener(n, h));
+        return () => {
+            window.removeEventListener(API_EVENT, onApi);
+            handlers.forEach(([n, h]) => window.removeEventListener(n, h));
+        };
+    }, [live, hasPassive, passiveNames]);
+    /* ---------------- sync on route, sidebar, facts, DOM ---------------- */
+    const inStep = live && screen.name === "step";
+    React.useEffect(() => {
+        if (inStep)
+            dispatch({ type: "sync" });
+    }, [inStep, pathname, search, sidebarOpen, factsKey, dispatch]);
+    React.useEffect(() => {
+        if (!inStep || typeof MutationObserver === "undefined")
+            return;
+        let raf = 0;
+        const obs = new MutationObserver(records => {
+            // Our own layer's changes are not the page's.
+            if (records.every(r => inGuideLayer(r.target)))
+                return;
+            if (raf)
+                return;
+            raf = requestAnimationFrame(() => {
+                raf = 0;
+                dispatchRef.current({ type: "sync" });
+            });
+        });
+        obs.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-state", "hidden", "aria-hidden", "class", "style", "open"],
+        });
+        return () => {
+            obs.disconnect();
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    }, [inStep]);
+    /* ---------------- the current step ---------------- */
+    const stepInfo = React.useMemo(() => {
+        if (!state || screen.name !== "step")
+            return null;
+        const mission = findMission(suite, screen.mission);
+        if (!mission)
+            return null;
+        const raw = mission.steps[screen.index];
+        if (!raw)
+            return null;
+        // A commit step with nothing to save is shown as its read form.
+        const step = shownStep(raw, screen.nothingToSave);
+        return { mission, step, raw };
+    }, [state, screen, suite]);
+    const stepCtx = React.useMemo(() => {
+        if (!state)
+            return null;
+        const e = env();
+        const params = stepInfo?.step.route ? (matchRoute(stepInfo.step.route, e.pathname, e.search, code) ?? {}) : {};
+        return guideContext(e, state.progress.context, params);
+        // pathname/search/factsKey make it current.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state, stepInfo, env, code, pathname, search, factsKey]);
+    const target = stepInfo && stepCtx && screen.name === "step"
+        ? spotlightTarget(stepInfo.step, stepCtx, screen.bridge)
+        : null;
+    const targetKey = target ? `${target.anchor}|${target.id ?? ""}` : "";
+    const phase = screen.name === "step" ? screen.phase : null;
+    const stepId = screen.name === "step" ? `${screen.mission}:${screen.index}:${screen.bridge ? "b" : ""}${screen.nothingToSave ? "n" : ""}` : "";
+    /* Measure every frame while a step is shown: the spotlight follows
+       scrolling, dialogs animating in, the drawer sliding, the keyboard. */
+    const [layout, setLayout] = React.useState({
+        spot: null,
+        covered: false,
+        holes: [],
+        popovers: [],
+        vw: 0,
+        vh: 0,
+        oy: 0,
+    });
+    React.useEffect(() => {
+        if (!inStep) {
+            targetElRef.current = null;
+            return;
+        }
+        let raf = 0;
+        let lostSince = null;
+        let last = { spot: null, covered: false, holes: [], popovers: [], vw: 0, vh: 0, oy: 0 };
+        targetElRef.current = target ? findAnchor(target.anchor, target.id) : null;
+        const allow = stepInfo?.step.allow ?? [];
+        // The spotlight is the part of the target a person can see: cut by the
+        // scroll boxes around it (a row of tabs that scrolls sideways) and the
+        // viewport. Wholly out of view (scrolled away up or down), its own box,
+        // and the tour scrolls it back.
+        let clipFor = null;
+        let clips = [];
+        const spotOf = (el) => {
+            if (el !== clipFor) {
+                clipFor = el;
+                clips = clipAncestors(el);
+            }
+            return padRect(visibleRectOf(el, clips) ?? rectOf(el), TARGET_PAD);
+        };
+        const tick = () => {
+            raf = requestAnimationFrame(tick);
+            const vv = window.visualViewport;
+            const vw = window.innerWidth;
+            const vh = vv ? vv.height : window.innerHeight;
+            const oy = vv ? vv.offsetTop : 0;
+            let el = targetElRef.current;
+            if (target && (!el || !el.isConnected)) {
+                el = findAnchor(target.anchor, target.id);
+                targetElRef.current = el;
+            }
+            let spot = null;
+            if (target && el && isPresent(el)) {
+                lostSince = null;
+                spot = spotOf(el);
+            }
+            else if (target) {
+                // Maybe re-rendered under another node.
+                const again = findAnchor(target.anchor, target.id);
+                if (again) {
+                    targetElRef.current = again;
+                    spot = spotOf(again);
+                    lostSince = null;
+                }
+                else if (phase === "ready") {
+                    lostSince ?? (lostSince = performance.now());
+                    if (performance.now() - lostSince > LOST_GRACE_MS) {
+                        lostSince = null;
+                        dispatchRef.current({ type: "targetLost" });
+                    }
+                }
+            }
+            if (phase === "waiting" && spot)
+                dispatchRef.current({ type: "sync" });
+            const popovers = [];
+            for (const p of openPoppers())
+                popovers.push(padRect(rectOf(p), 2));
+            const holes = [];
+            for (const a of allow) {
+                const ael = findAnchor(a);
+                if (ael)
+                    holes.push(padRect(rectOf(ael), TARGET_PAD));
+            }
+            const covered = !!spot && coveredByDialog(targetElRef.current);
+            const next = { spot, covered, holes, popovers, vw, vh, oy };
+            const sameList = (a, b) => a.length === b.length && a.every((h, i) => sameRect(h, b[i]));
+            if (!sameRect(next.spot, last.spot) ||
+                next.covered !== last.covered ||
+                next.vw !== last.vw ||
+                next.vh !== last.vh ||
+                next.oy !== last.oy ||
+                !sameList(next.holes, last.holes) ||
+                !sameList(next.popovers, last.popovers)) {
+                last = next;
+                setLayout(next);
+            }
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+        // stepId/targetKey/phase restart the loop for a new step.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inStep, stepId, targetKey, phase]);
+    /* Waiting for the target: 8 s of not-loading time (30 s at most). */
+    React.useEffect(() => {
+        if (!inStep || phase !== "waiting")
+            return;
+        let idle = 0;
+        const started = Date.now();
+        const timeout = stepInfo?.step.timeoutMs ?? WAIT_MS;
+        const iv = setInterval(() => {
+            let loading = false;
+            try {
+                loading = busyRef.current();
+            }
+            catch {
+                loading = false;
+            }
+            if (!loading && document.visibilityState !== "hidden")
+                idle += 250;
+            if (idle >= timeout || Date.now() - started >= WAIT_CAP_MS) {
+                clearInterval(iv);
+                dispatchRef.current({ type: "timeout" });
+            }
+        }, 250);
+        return () => clearInterval(iv);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inStep, stepId, phase, screen.name === "step" ? screen.misses : 0]);
+    /* On a step becoming ready: bring the target into view, focus, describe. */
+    const readyKey = inStep && phase === "ready" ? stepId : "";
+    React.useEffect(() => {
+        if (!readyKey || !stepInfo || screen.name !== "step")
+            return;
+        const el = targetElRef.current ?? (target ? findAnchor(target.anchor, target.id) : null);
+        if (el)
+            revealTarget(el);
+        const isInput = !screen.bridge && stepKind(stepInfo.step) === "input";
+        const t = setTimeout(() => {
+            if (isInput && el) {
+                const f = fieldOf(el);
+                f?.focus({ preventScroll: true });
+            }
+            else {
+                const b = document.querySelector(`[${GUIDE_LAYER_ATTRIBUTE}] [data-eg-bubble]`);
+                b?.focus({ preventScroll: true });
+            }
+        }, 30);
+        // The target is described by the bubble while the step lasts.
+        const described = el ? (isInput ? fieldOf(el) : el) : null;
+        const prev = described?.getAttribute("aria-describedby") ?? null;
+        if (described)
+            described.setAttribute("aria-describedby", [BUBBLE_TITLE_ID, BUBBLE_WHY_ID, prev].filter(Boolean).join(" "));
+        return () => {
+            clearTimeout(t);
+            if (!described)
+                return;
+            if (prev)
+                described.setAttribute("aria-describedby", prev);
+            else
+                described.removeAttribute("aria-describedby");
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [readyKey]);
+    /* Signals from the page: API answers, app events, presses, typing. */
+    React.useEffect(() => {
+        if (!inStep || !stepInfo)
+            return;
+        const onApi = (e) => {
+            const d = e.detail;
+            if (!d || typeof d.status !== "number")
+                return;
+            dispatchRef.current({ type: "signal", signal: { kind: "api", method: d.method, path: d.path, status: d.status, id: d.id, message: d.message } });
+        };
+        window.addEventListener(API_EVENT, onApi);
+        const names = triggersOf(stepInfo.raw).flatMap(t => ("event" in t ? [t.event] : []));
+        const onApp = (name) => (e) => dispatchRef.current({ type: "signal", signal: { kind: "event", name, detail: e.detail ?? undefined } });
+        const appHandlers = names.map(n => [GUIDE_EVENT_PREFIX + n, onApp(n)]);
+        appHandlers.forEach(([n, h]) => window.addEventListener(n, h));
+        const inTarget = (node) => {
+            const el = targetElRef.current;
+            return !!el && node instanceof Node && el.contains(node);
+        };
+        // After the app has handled it, so what it does comes first.
+        const later = (a) => setTimeout(() => dispatchRef.current(a), 0);
+        const onPress = (e) => {
+            if (inTarget(e.target))
+                later({ type: "signal", signal: { kind: "activate" } });
+        };
+        const onKey = (e) => {
+            if ((e.key === "Enter" || e.key === " ") && inTarget(e.target) && stepKind(stepInfo.step) !== "input") {
+                later({ type: "signal", signal: { kind: "activate" } });
+            }
+        };
+        const onInput = (e) => {
+            if (!inTarget(e.target))
+                return;
+            dispatchRef.current({ type: "signal", signal: { kind: "typing" } });
+            later({ type: "signal", signal: { kind: "value", value: fieldValue(targetElRef.current) } });
+        };
+        document.addEventListener("pointerup", onPress, true);
+        document.addEventListener("keydown", onKey, true);
+        document.addEventListener("input", onInput, true);
+        document.addEventListener("change", onInput, true);
+        return () => {
+            window.removeEventListener(API_EVENT, onApi);
+            appHandlers.forEach(([n, h]) => window.removeEventListener(n, h));
+            document.removeEventListener("pointerup", onPress, true);
+            document.removeEventListener("keydown", onKey, true);
+            document.removeEventListener("input", onInput, true);
+            document.removeEventListener("change", onInput, true);
+        };
+    }, [inStep, stepInfo]);
+    /* ---------------- the guard ---------------- */
+    const modalScreen = live && (screen.name === "welcome" || screen.name === "gate" || screen.name === "celebrate" || screen.name === "complete");
+    const panelOpen = live && !!state?.panelOpen;
+    const guarding = inStep || modalScreen;
+    const guardingRef = React.useRef(guarding);
+    guardingRef.current = guarding;
+    const modalRef = React.useRef(false);
+    modalRef.current = modalScreen || (screen.name === "step" && (screen.confirmExit || screen.phase !== "ready"));
+    const stepInfoRef = React.useRef(stepInfo);
+    stepInfoRef.current = stepInfo;
+    React.useEffect(() => {
+        if (!live)
+            return;
+        const allowedTarget = (node) => {
+            if (!(node instanceof Node))
+                return false;
+            const el = targetElRef.current;
+            // A "view" step's target is there to be read: ถัดไป is the way on.
+            const sc = stateRef.current?.screen;
+            const pressable = targetPressable(stepInfoRef.current?.step, sc?.name === "step" && sc.bridge);
+            if (el && pressable && el.contains(node))
+                return true;
+            const elNode = node instanceof Element ? node : node.parentElement;
+            if (!elNode)
+                return false;
+            if (elNode.closest(POPPER_SELECTOR) || elNode.closest(TOASTER_SELECTOR))
+                return true;
+            for (const a of stepInfoRef.current?.step.allow ?? []) {
+                const ael = findAnchor(a);
+                if (ael && ael.contains(node))
+                    return true;
+            }
+            return false;
+        };
+        const onPointer = (e) => {
+            const t = e.target;
+            if (inGuideLayer(t)) {
+                // Our dim layer eats the press (and keeps focus where it is).
+                if (t instanceof Element && t.closest("[data-eg-block]")) {
+                    e.preventDefault();
+                    if (e.type === "pointerdown")
+                        dispatchRef.current({ type: "blocked" });
+                }
+                // The app's open dialog or menu never hears the press (the click
+                // itself goes on to our buttons).
+                if (e.type !== "click")
+                    e.stopPropagation();
+                return;
+            }
+            if (!guardingRef.current)
+                return;
+            if (modalRef.current || !allowedTarget(t)) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.type === "pointerdown")
+                    dispatchRef.current({ type: "blocked" });
+            }
+        };
+        // Radix FocusScope pulls focus back into an open dialog; DismissableLayer
+        // closes on focus outside. Neither may see focus moving to the tour.
+        const onFocusIn = (e) => {
+            if (inGuideLayer(e.target))
+                e.stopPropagation();
+        };
+        const onFocusOut = (e) => {
+            if (inGuideLayer(e.relatedTarget))
+                e.stopPropagation();
+        };
+        const onKey = (e) => {
+            const s = stateRef.current;
+            if (!s)
+                return;
+            const sc = s.screen;
+            const stop = () => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            };
+            if (e.key === "Escape") {
+                if (sc.name === "step") {
+                    stop();
+                    if (sc.confirmExit)
+                        dispatchRef.current({ type: "exitCancel" });
+                    else
+                        dispatchRef.current({ type: "exit" });
+                }
+                else if (sc.name === "welcome") {
+                    stop();
+                    dispatchRef.current({ type: sc.confirm ? "welcomeSkipCancel" : "welcomeSkip" });
+                }
+                else if (sc.name === "gate") {
+                    stop();
+                    dispatchRef.current({ type: "gateLater" });
+                }
+                else if (sc.name === "celebrate") {
+                    stop();
+                    dispatchRef.current({ type: "rest" });
+                }
+                else if (sc.name === "complete") {
+                    stop();
+                    dispatchRef.current({ type: "finish" });
+                }
+                else if (s.panelOpen) {
+                    stop();
+                    dispatchRef.current({ type: "closePanel" });
+                }
+                return;
+            }
+            if (!guardingRef.current)
+                return;
+            const layer = layerRef.current;
+            if (e.key === "Tab") {
+                // Tab stays on what the step is about: the target and the bubble, or
+                // the open card.
+                const modals = layer ? Array.from(layer.querySelectorAll("[data-eg-modal],[data-eg-card]")) : [];
+                let list;
+                if (sc.name === "step" && !sc.confirmExit && sc.phase === "ready") {
+                    const el = targetElRef.current;
+                    const step = stepInfoRef.current?.step;
+                    const isInput = !!step && !sc.bridge && stepKind(step) === "input";
+                    const inTargetList = el && targetPressable(step, sc.bridge) ? focusablesIn(isInput ? (fieldOf(el) ?? el) : el) : [];
+                    const bubble = layer?.querySelector("[data-eg-bubble]") ?? null;
+                    list = [...inTargetList, ...(bubble ? Array.from(bubble.querySelectorAll(FOCUSABLE)) : [])];
+                    for (const p of openPoppers())
+                        list.push(...focusablesIn(p));
+                }
+                else {
+                    const last = modals[modals.length - 1] ?? null;
+                    list = last ? Array.from(last.querySelectorAll(FOCUSABLE)) : [];
+                }
+                if (!list.length)
+                    return;
+                stop();
+                const i = list.indexOf(document.activeElement);
+                const n = e.shiftKey ? (i <= 0 ? list.length - 1 : i - 1) : i === -1 || i === list.length - 1 ? 0 : i + 1;
+                list[n].focus();
+                return;
+            }
+            if (e.key === "Enter" || e.key === " ") {
+                const active = document.activeElement;
+                if (inGuideLayer(active))
+                    return;
+                if (sc.name === "step" && sc.phase === "ready" && !sc.confirmExit && e.key === "Enter") {
+                    const step = stepInfoRef.current?.step;
+                    const el = targetElRef.current;
+                    if (step && stepKind(step) === "input" && el && active instanceof Node && el.contains(active) && !(active instanceof HTMLTextAreaElement)) {
+                        // During the tour Enter is ถัดไป, not "submit the form".
+                        stop();
+                        dispatchRef.current({ type: "next" });
+                        return;
+                    }
+                }
+                if (modalRef.current || !allowedTarget(active))
+                    stop();
+            }
+        };
+        window.addEventListener("pointerdown", onPointer, true);
+        window.addEventListener("mousedown", onPointer, true);
+        window.addEventListener("touchstart", onPointer, { capture: true, passive: false });
+        window.addEventListener("click", onPointer, true);
+        window.addEventListener("focusin", onFocusIn, true);
+        window.addEventListener("focusout", onFocusOut, true);
+        window.addEventListener("keydown", onKey, true);
+        return () => {
+            window.removeEventListener("pointerdown", onPointer, true);
+            window.removeEventListener("mousedown", onPointer, true);
+            window.removeEventListener("touchstart", onPointer, true);
+            window.removeEventListener("click", onPointer, true);
+            window.removeEventListener("focusin", onFocusIn, true);
+            window.removeEventListener("focusout", onFocusOut, true);
+            window.removeEventListener("keydown", onKey, true);
+        };
+    }, [live]);
+    /* Focus comes back to where it was when the tour lets go. */
+    const lastFocus = React.useRef(null);
+    const engaged = guarding || panelOpen;
+    React.useLayoutEffect(() => {
+        if (engaged) {
+            if (!lastFocus.current) {
+                const a = document.activeElement;
+                lastFocus.current = a instanceof HTMLElement && !inGuideLayer(a) ? a : null;
+            }
+            return;
+        }
+        const back = lastFocus.current;
+        lastFocus.current = null;
+        if (back && back.isConnected)
+            back.focus({ preventScroll: true });
+    }, [engaged]);
+    /* ---------------- the layer ---------------- */
+    const [layer, setLayer] = React.useState(null);
+    const layerRef = React.useRef(null);
+    React.useEffect(() => {
+        const el = layerRef.current;
+        if (!el)
+            return;
+        if (bottomOffset)
+            el.style.setProperty("--erp-guide-bottom-offset", bottomOffset);
+        else
+            el.style.removeProperty("--erp-guide-bottom-offset");
+    }, [bottomOffset, layer]);
+    React.useEffect(() => {
+        const el = document.createElement("div");
+        el.setAttribute(GUIDE_LAYER_ATTRIBUTE, "");
+        document.body.appendChild(el);
+        layerRef.current = el;
+        setLayer(el);
+        // A Radix modal (dialog, select, menu) hides everything outside it from
+        // screen readers with aria-hidden's hideOthers. It keeps [aria-live]
+        // elements but walks into their ancestors and hides the other children:
+        // with the status line live, the bubble and its buttons were hidden.
+        // Take off what it adds, at once. hideOthers marks what it hides with
+        // data-aria-hidden (the layer never sets that, or inert); aria-hidden goes
+        // only where it was just added, so the layer's own decorative aria-hidden
+        // stays. (aria-live="off" on the layer would make hideOthers skip it, but
+        // it changed what test tools match by text.)
+        const obs = new MutationObserver(records => {
+            for (const r of records) {
+                const n = r.target;
+                if (!(n instanceof Element))
+                    continue;
+                if (r.attributeName === "inert" && n.hasAttribute("inert"))
+                    n.removeAttribute("inert");
+                else if (r.attributeName === "data-aria-hidden" && n.hasAttribute("data-aria-hidden"))
+                    n.removeAttribute("data-aria-hidden");
+                else if (r.attributeName === "aria-hidden" &&
+                    n.getAttribute("aria-hidden") === "true" &&
+                    (n === el || r.oldValue === null)) {
+                    n.removeAttribute("aria-hidden");
+                }
+            }
+        });
+        obs.observe(el, { attributes: true, attributeOldValue: true, subtree: true, attributeFilter: ["aria-hidden", "data-aria-hidden", "inert"] });
+        return () => {
+            obs.disconnect();
+            el.remove();
+            layerRef.current = null;
+        };
+    }, []);
+    const [phone, setPhone] = React.useState(false);
+    const [reduced, setReduced] = React.useState(false);
+    React.useEffect(() => {
+        const sync = () => {
+            setPhone(isPhoneWidth());
+            setReduced(prefersReducedMotion());
+        };
+        sync();
+        window.addEventListener("resize", sync);
+        return () => window.removeEventListener("resize", sync);
+    }, []);
+    // The celebration waits a beat, so the new row can be seen first.
+    const [celebrateShown, setCelebrateShown] = React.useState(false);
+    const celebrateKey = screen.name === "celebrate" || screen.name === "complete" ? screen.name + (screen.name === "celebrate" ? screen.mission : "") : "";
+    React.useEffect(() => {
+        setCelebrateShown(false);
+        if (!celebrateKey)
+            return;
+        const t = setTimeout(() => setCelebrateShown(true), CELEBRATE_DELAY_MS);
+        return () => clearTimeout(t);
+    }, [celebrateKey]);
+    // Ring moves smoothly only right after a step change.
+    const [moving, setMoving] = React.useState(false);
+    React.useEffect(() => {
+        if (!stepId)
+            return;
+        setMoving(true);
+        const t = setTimeout(() => setMoving(false), 320);
+        return () => clearTimeout(t);
+    }, [stepId]);
+    /* ---------------- the "?" menu entry ---------------- */
+    const ctxIdle = React.useMemo(() => (state ? guideContext(env(), state.progress.context) : null), [state, env, factsKey, pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+    const done = state && ctxIdle ? settledCount(suite, state.progress, ctxIdle) : 0;
+    // Only the missions this user has (GuideMission.visible).
+    const shown = React.useMemo(() => (ctxIdle ? shownMissions(suite, ctxIdle) : suite.missions), [suite, ctxIdle]);
+    const total = shown.length;
+    // A celebration earned outside the tour: at the next idle moment — no
+    // step, card or panel up, the welcome not waiting, nothing loading.
+    const passiveDue = live &&
+        !!state &&
+        (state.pendingCelebrate?.length ?? 0) > 0 &&
+        screen.name === "idle" &&
+        !state.panelOpen &&
+        !due;
+    useAfterIdle(passiveDue, PASSIVE_IDLE_MS, busy, () => dispatchRef.current({ type: "idleCelebrate" }), [state?.pendingCelebrate?.join(",")]);
+    React.useEffect(() => {
+        if (!live || !state) {
+            publishGuideEntry(null, null);
+            return;
+        }
+        publishGuideEntry({ done, total }, () => dispatchRef.current({ type: "openPanel" }));
+    }, [live, state, done, total]);
+    React.useEffect(() => () => publishGuideEntry(null, null), []);
+    if (!live || !state || !layer || !ctxIdle)
+        return null;
+    /* ---------------- render ---------------- */
+    const views = missionViews(suite, state.progress, ctxIdle);
+    const gate = suite.gate;
+    const gateHref = gate ? resolveText(gate.action.href, ctxIdle) : "";
+    const gateFailing = gate ? gateState(suite, ctxIdle) === false : false;
+    let content = null;
+    if (screen.name === "welcome") {
+        content = (jsxRuntime.jsx(WelcomeModal, { title: resolveText(suite.welcome.title, ctxIdle), subtitle: resolveText(suite.welcome.subtitle, ctxIdle) || `มาตั้งค่าบริษัทให้พร้อมใน ${total} ภารกิจ`, missions: shown.map(m => ({ title: m.title, minutes: m.minutes })), confirm: screen.confirm, onStart: () => dispatch({ type: "welcomeStart" }), onSkip: () => dispatch({ type: "welcomeSkip" }), onSkipConfirm: () => dispatch({ type: "welcomeSkipConfirm" }), onSkipCancel: () => dispatch({ type: "welcomeSkipCancel" }) }));
+    }
+    else if (screen.name === "gate" && gate) {
+        content = (jsxRuntime.jsx(GateModal, { title: gate.title, subtitle: gate.subtitle, actionLabel: gate.action.label, href: gateHref, onLater: () => dispatch({ type: "gateLater" }) }));
+    }
+    else if (screen.name === "step" && stepInfo && stepCtx) {
+        const { mission, step } = stepInfo;
+        const missionNo = missionNumber(suite, mission.key, ctxIdle);
+        const kind = stepKind(step);
+        const bridge = screen.bridge;
+        content = (jsxRuntime.jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
+                missionNo,
+                missionTitle: mission.title,
+                replay: screen.replay,
+                index: screen.index,
+                total: mission.steps.length,
+                title: bridge ? "กดปุ่มเมนู" : resolveText(step.title, stepCtx),
+                why: bridge ? `เมนูทั้งหมดของ ${suite.appName} อยู่ในนี้` : resolveText(step.why, stepCtx),
+                error: screen.error,
+                showNext: !bridge && (kind === "input" || kind === "view"),
+                showEndWithoutSave: !bridge && screen.replay && kind === "commit",
+            }, hasTarget: bridge || !!step.target, targetPressable: targetPressable(step, bridge), phase: screen.phase, confirmExit: screen.confirmExit, nudge: state.nudge, moving: moving, onExit: () => dispatch({ type: "exit" }), onNext: () => dispatch({ type: "next" }), onEndWithoutSave: () => dispatch({ type: "endWithoutSave" }), onRetry: () => dispatch({ type: "retry" }), onGoResume: () => dispatch({ type: "goResume" }), onExitConfirm: () => dispatch({ type: "exitConfirm" }), onExitCancel: () => dispatch({ type: "exitCancel" }) }));
+    }
+    else if (screen.name === "celebrate" && celebrateShown) {
+        const mission = findMission(suite, screen.mission);
+        const next = findMission(suite, nextMissionKey(suite, state.progress, ctxIdle));
+        if (mission) {
+            content = (jsxRuntime.jsx(CelebrateModal, { missionNo: missionNumber(suite, mission.key, ctxIdle), title: resolveText(mission.done?.title, ctxIdle) || `${mission.title}แล้ว`, subtitle: resolveText(mission.done?.subtitle, ctxIdle), done: done, total: total, nextTitle: next?.title ?? null, reduced: reduced, onNext: () => dispatch({ type: "celebrateNext" }), onRest: () => dispatch({ type: "rest" }) }));
+        }
+    }
+    else if (screen.name === "complete" && celebrateShown) {
+        const secondary = suite.complete.secondary;
+        let secondaryHref;
+        try {
+            secondaryHref = secondary ? (typeof secondary.href === "function" ? secondary.href(ctxIdle) : secondary.href) : undefined;
+        }
+        catch {
+            secondaryHref = undefined;
+        }
+        content = (jsxRuntime.jsx(CompleteModal, { total: total, title: resolveText(suite.complete.title, ctxIdle) || "บริษัทพร้อมใช้งานแล้ว", subtitle: resolveText(suite.complete.subtitle, ctxIdle), missions: shown.map(m => m.title), actionLabel: suite.complete.action.label, secondary: secondary && secondaryHref ? { label: secondary.label, href: secondaryHref } : null, reduced: reduced, onFinish: () => dispatch({ type: "finish" }) }));
+    }
+    const items = views.map(v => ({
+        key: v.mission.key,
+        title: v.mission.title,
+        minutes: v.mission.minutes,
+        view: v.view,
+        optional: !!v.mission.optional,
+        completedAt: v.entry?.completed_at ?? null,
+        lockedBy: v.view === "locked"
+            ? (v.mission.after ?? [])
+                .filter(k => shown.some(m => m.key === k))
+                .map(k => findMission(suite, k)?.title)
+                .filter(Boolean)
+                .join(", ")
+            : undefined,
+    }));
+    const showChip = chipVisible(state, suite, ctxIdle);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: GUIDE_CSS }), jsxRuntime.jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsxRuntime.jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, state.panelOpen && screen.name === "idle" ? (jsxRuntime.jsx(QuestPanel, { items: items, done: done, total: total, justDone: state.justDone, gate: gate && gateFailing ? { label: gate.action.label, pending: gate.pending, href: gateHref } : null, canHideChip: !state.progress.chip_hidden && state.progress.status !== "completed", onClose: () => dispatch({ type: "closePanel" }), onStart: (key, replayIt) => dispatch({ type: "start", mission: key, replay: replayIt }), onDismiss: key => dispatch({ type: "dismissMission", mission: key }), onHideChip: () => dispatch({ type: "hideChip" }) })) : null, toast ? jsxRuntime.jsx(GuideToast, { text: toast }) : null] }), layer);
+}
+/** A stable key for the facts object, so effects re-run when they change. */
+function useFactsKey(facts) {
+    return React.useMemo(() => {
+        try {
+            return JSON.stringify(facts ?? {});
+        }
+        catch {
+            return String(Math.random());
+        }
+    }, [facts]);
+}
+
+exports.API_EVENT = API_EVENT;
+exports.GUIDE_EVENT_PREFIX = GUIDE_EVENT_PREFIX;
+exports.GUIDE_LAYER_ATTRIBUTE = GUIDE_LAYER_ATTRIBUTE;
+exports.GuideErrorBoundary = GuideErrorBoundary;
+exports.GuideProgressConflict = GuideProgressConflict;
+exports.GuideRuntime = GuideRuntime;
+exports.apiCallDetail = apiCallDetail;
+exports.emitGuideEvent = emitGuideEvent;
+exports.fillRoute = fillRoute;
+exports.guideAnchor = guideAnchor;
+exports.loadGuides = loadGuides;
+exports.matchApiPath = matchApiPath;
+exports.matchRoute = matchRoute;
+exports.openGuidePanel = openGuidePanel;
+exports.reportApiCall = reportApiCall;
+exports.reportApiEvent = reportApiEvent;
+exports.storeGuides = storeGuides;
+exports.useGuideEntry = useGuideEntry;
+//# sourceMappingURL=guide-runtime-CFVYM8Xi.cjs.map