@eintrek/erp-shell 0.1.63 → 0.1.65

package/dist/index.esm.js

@@ -14,7 +14,7 @@ import { createPortal } from 'react-dom';
 import { useTheme, ThemeProvider as ThemeProvider$1 } from 'next-themes';
 import axios, { isAxiosError, AxiosHeaders } from 'axios';
 export { isAxiosError } from 'axios';
-import { computePosition, offset, flip, shift, arrow } from '@floating-ui/dom';
+import { computePosition, offset, shift, arrow } from '@floating-ui/dom';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 /**
@@ -1956,7 +1956,7 @@ function platformApiBase(app) {
  * This package's version, attached to help messages so the back office can
  * tell which shell a report came from. Keep in step with package.json.
  */
-const SHELL_VERSION = "0.1.63";
+const SHELL_VERSION = "0.1.65";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -3892,6 +3892,52 @@ function needsBridge(step, env, ctx) {
         !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 }];
+}
 function routeParamsFor(step, env) {
     if (!step.route)
         return {};
@@ -4033,7 +4079,7 @@ function announceStep(d, suite, env) {
     const step = mission.steps[s.index];
     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) : resolveText(step.why, 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}` : ""}`,
@@ -4056,7 +4102,9 @@ function enterStep(d, suite, env, mission, index, opts) {
         const params = routeParamsFor(step, env);
         const ctx = guideContext(env, d.state.progress.context, params);
         if (step.requires && !safe(() => env.can(step.requires), true)) {
-            withProgress(d, { last_error: `forbidden:${step.requires}`.slice(0, 128) });
+            // A replay writes nothing, not even what went wrong.
+            if (!opts.replay)
+                withProgress(d, { last_error: `forbidden:${step.requires}`.slice(0, 128) });
             i++;
             continue;
         }
@@ -4082,7 +4130,8 @@ function enterStep(d, suite, env, mission, index, opts) {
     }
     const step = steps[i];
     const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
-    const away = !!step.route && !matchRoute(step.route, env.pathname, env.search, env.code);
+    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",
@@ -4128,6 +4177,35 @@ function markReadyIfVisible(d, suite, env) {
             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;
@@ -4195,6 +4273,7 @@ function startMission(d, suite, env, key, replay) {
     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" });
@@ -4212,7 +4291,9 @@ function startMission(d, suite, env, key, replay) {
             index = checkpointAtOrBefore(mission.steps, at);
     }
     enterStep(d, suite, env, mission, index, { replay: isReplay });
-    if (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) {
@@ -4262,6 +4343,17 @@ function apiFailureFor(step, sig) {
         (!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 actions = abortActionsFor(mission, s.index);
+    if (actions.length)
+        d.effects.push({ type: "abort", actions });
+}
 function reduceGuide(state, action, suite, env) {
     const d = { state, effects: [] };
     const s = state.screen;
@@ -4342,7 +4434,8 @@ function reduceGuide(state, action, suite, env) {
             const step = mission.steps[s.index];
             const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
             if (s.phase === "away") {
-                if (!step.route || matchRoute(step.route, env.pathname, env.search, env.code)) {
+                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 });
                 }
@@ -4359,6 +4452,11 @@ function reduceGuide(state, action, suite, env) {
                     break;
                 }
             }
+            if (!s.bridge && !stepTargetVisible(step, 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;
@@ -4413,7 +4511,8 @@ function reduceGuide(state, action, suite, env) {
                     : { title: COPY.saveFailed, detail: sig.message };
                 setScreen(d, { ...s, error });
                 d.effects.push({ type: "announce", text: [error.title, error.detail].filter(Boolean).join(". ") });
-                withProgress(d, { last_error: `api_${sig.status}:${step.key}`.slice(0, 128) });
+                if (!s.replay)
+                    withProgress(d, { last_error: `api_${sig.status}:${step.key}`.slice(0, 128) });
             }
             break;
         }
@@ -4458,6 +4557,10 @@ function reduceGuide(state, action, suite, env) {
             const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
             if (stepTargetVisible(step, env, ctx, s.bridge))
                 break;
+            if (!s.bridge && offRoute(mission.steps, s.index, env)) {
+                recoverOffRoute(d, suite, env, false);
+                break;
+            }
             const cp = checkpointAtOrBefore(mission.steps, s.index);
             if (cp < s.index && !s.bridge) {
                 // A dialog or a menu closed under the step: back to what opens it.
@@ -4475,9 +4578,16 @@ function reduceGuide(state, action, suite, env) {
             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);
-            withProgress(d, { last_error: `target_missing:${anchor}`.slice(0, 128) });
-            save(d);
+            // 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);
@@ -4504,12 +4614,19 @@ function reduceGuide(state, action, suite, env) {
             }
             break;
         }
-        case "retry":
-            if (s.name === "step" && s.phase === "missing") {
-                setScreen(d, { ...s, phase: "waiting" });
-                markReadyIfVisible(d, suite, env);
+        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 };
@@ -4518,6 +4635,7 @@ function reduceGuide(state, action, suite, env) {
             if (s.name !== "step")
                 break;
             if (s.replay) {
+                pushAbort(d, suite, s);
                 setScreen(d, { name: "idle" });
                 d.effects.push({ type: "toast", text: COPY.replayEnded });
             }
@@ -4538,8 +4656,9 @@ function reduceGuide(state, action, suite, env) {
         case "endWithoutSave":
             if (s.name !== "step" || !s.replay)
                 break;
+            pushAbort(d, suite, s);
             setScreen(d, { name: "idle" });
-            d.effects.push({ type: "closeAppDialog" }, { type: "toast", text: COPY.replayEnded });
+            d.effects.push({ type: "toast", text: COPY.replayEnded });
             break;
         case "goResume": {
             if (s.name !== "step" || s.phase !== "away")
@@ -4547,10 +4666,7 @@ function reduceGuide(state, action, suite, env) {
             const mission = findMission(suite, s.mission);
             if (!mission)
                 break;
-            const step = mission.steps[s.index];
-            const ctx = guideContext(env, d.state.progress.context);
-            const href = safe(() => step.resumeUrl?.(ctx), undefined) ??
-                (step.route ? fillRoute(step.route, { ...d.state.progress.context, code: env.code }) : null);
+            const href = resumeHref(mission, s.index, d, env);
             if (href)
                 d.effects.push({ type: "navigate", href });
             break;
@@ -4786,6 +4902,27 @@ function putBody(p, app) {
             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 };
 /**
@@ -4920,8 +5057,9 @@ function isPresent(el) {
     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.
-    if (r.right <= 0 || r.left >= window.innerWidth)
+    // 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;
     if (el.getAttribute("data-state") === "closed")
         return false;
@@ -5001,6 +5139,26 @@ function sameRect(a, b) {
 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;
+}
 function openPoppers() {
     if (!hasDocument())
         return [];
@@ -5018,18 +5176,224 @@ function prefersReducedMotion() {
 function isPhoneWidth() {
     return typeof window !== "undefined" && window.innerWidth < 768;
 }
-/** Scrolls the target to the middle when it is out of view (instant under reduced motion). */
+/* ---------------- 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 r = el.getBoundingClientRect();
+    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;
-    if (r.top < 70 || r.bottom > vh - 20) {
-        try {
-            el.scrollIntoView({ block: "center", behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    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 });
         }
-        catch {
-            el.scrollIntoView();
+        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;
 }
 
 /**
@@ -5051,7 +5415,8 @@ const GUIDE_CSS = `
 .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 path{fill:var(--eg-scrim);pointer-events:visiblePainted;fill-rule:evenodd}
+.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)}
@@ -5160,6 +5525,7 @@ const GUIDE_CSS = `
 .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}
@@ -5224,15 +5590,53 @@ function roundRect(r, radius) {
         `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.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const block = blockedRects(open ?? holes, width, height).map(rectPath).join("");
+    return (jsxs("svg", { className: "eg-scrim-svg", width: width, height: height, "aria-hidden": "true", children: [holes.length ? (jsx("defs", { children: jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: -10, y: -10, width: width + 20, height: height + 20, children: [jsx("rect", { x: -10, y: -10, width: width + 20, height: height + 20, fill: "#fff" }), holes.map((h, i) => (jsx("path", { d: roundRect(h, 12), fill: "#000" }, i)))] }) })) : null, jsx("rect", { className: "eg-scrim-fill", x: -10, y: -10, width: width + 20, height: height + 20, mask: holes.length ? `url(#${maskId})` : undefined }), 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 dim layer that eats every press outside the holes. One SVG path with
- * even-odd holes: a press inside a hole reaches the page underneath, any
- * other lands on the path (marked data-eg-block) and is cancelled.
+ * 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 Scrim({ holes, width, height }) {
-    const outer = `M-10 -10H${width + 10}V${height + 10}H-10Z`;
-    const d = outer + holes.map(h => roundRect(h, 12)).join("");
-    return (jsx("svg", { className: "eg-scrim-svg", width: width, height: height, "aria-hidden": "true", children: jsx("path", { d: d, "data-eg-block": "" }) }));
+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";
@@ -5272,12 +5676,21 @@ function StepLayer(p) {
     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(";");
     useLayoutEffect(() => {
         const el = bubbleRef.current;
         if (!el || !showBubble)
             return;
         const m = 16;
-        if (!spot) {
+        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;
@@ -5288,13 +5701,13 @@ function StepLayer(p) {
         }
         if (phone) {
             // Docked to the top or the bottom of the screen, whichever covers less
-            // of the target (target in the lower half: top).
+            // 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 } = spot;
+            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
@@ -5308,40 +5721,42 @@ function StepLayer(p) {
             return;
         }
         let cancelled = false;
+        const a = anchor;
         const ref = {
             getBoundingClientRect: () => ({
-                x: spot.x,
-                y: spot.y,
-                left: spot.x,
-                top: spot.y,
-                width: spot.width,
-                height: spot.height,
-                right: spot.x + spot.width,
-                bottom: spot.y + spot.height,
+                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,
             }),
         };
-        computePosition(ref, el, {
+        const at = (placement) => computePosition(ref, el, {
             strategy: "fixed",
-            placement: "right",
+            placement,
             middleware: [
-                offset(({ placement }) => (placement.startsWith("bottom") ? gap : 14)),
-                flip({ fallbackPlacements: ["bottom", "top", "left"], padding: m }),
+                offset(placement.startsWith("bottom") ? gap : 14),
                 shift({ padding: m }),
                 ...(arrowRef.current ? [arrow({ element: arrowRef.current, padding: 14 })] : []),
             ],
-        })
-            .then(({ x, y, placement, middlewareData }) => {
+        });
+        Promise.all(BUBBLE_PLACEMENTS.map(at))
+            .then(results => {
             if (cancelled)
                 return;
             const bw = el.offsetWidth;
             const bh = el.offsetHeight;
-            const fits = x >= m - 1 && y >= m - 1 && x + bw <= window.innerWidth - m + 1 && y + bh <= viewport.height + viewport.offsetTop - m + 1;
-            const overlaps = x < spot.x + spot.width && x + bw > spot.x && y < spot.y + spot.height && y + bh > spot.y;
-            if (!fits || overlaps) {
+            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 });
         })
@@ -5352,11 +5767,15 @@ function StepLayer(p) {
         return () => {
             cancelled = true;
         };
-        // spotKey/contentKey stand for spot and the bubble's size.
+        // The keys stand for spot, the lists, the holes and the bubble's size.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [spotKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop]);
-    const holes = [...(spot ? [spot] : []), ...p.holes];
-    const hand = spot && p.showHand && p.phase === "ready" ? handPosition(spot, viewport.height) : null;
+    }, [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")
@@ -5368,7 +5787,7 @@ function StepLayer(p) {
         else
             arrowStyle = { bottom: -7, left: pos.ax };
     }
-    return (jsxs(Fragment$1, { children: [jsx(Scrim, { holes: p.phase === "ready" ? holes : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && p.phase === "ready" ? (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 ? (jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (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: {
+    return (jsxs(Fragment$1, { children: [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 ? (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 ? (jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (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,
@@ -5379,7 +5798,7 @@ 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 (jsxs(Fragment$1, { children: [jsxs("div", { className: "eg-b-top", children: [jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", b.missionNo, " \u00B7 ", b.missionTitle, b.replay ? " (ทบทวน)" : ""] }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsx(GuideTitle, { text: title }) }), jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: why }), jsxs("div", { className: "eg-b-f", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: b.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showEndWithoutSave ? (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 ? (jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: "\u0E16\u0E31\u0E14\u0E44\u0E1B" })) : null] })] })] }));
+    return (jsxs(Fragment$1, { children: [jsxs("div", { className: "eg-b-top", children: [jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", b.missionNo, " \u00B7 ", b.missionTitle, b.replay ? " (ทบทวน)" : ""] }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsx(GuideTitle, { text: title }) }), jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsx(GuideTitle, { text: why }) }), jsxs("div", { className: "eg-b-f", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: b.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showEndWithoutSave ? (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 ? (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) {
@@ -5492,6 +5911,9 @@ function QuestRow({ item, n, just, gate, onStart, onDismiss, }) {
         meta = 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 = jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onStart(item.key, true), children: "\u0E17\u0E33\u0E0B\u0E49\u0E33" });
@@ -5500,11 +5922,11 @@ function QuestRow({ item, n, just, gate, onStart, onDismiss, }) {
     else if (v === "waiting" && gate)
         button = (jsx("a", { className: "eg-btn eg-ghost", href: gate.href, style: { textDecoration: "none" }, children: gate.label }));
     else if (v === "locked")
-        button = (jsxs("button", { type: "button", className: "eg-btn eg-ghost", disabled: true, children: ["\u0E17\u0E33 ", item.lockedBy, " \u0E01\u0E48\u0E2D\u0E19"] }));
+        button = (jsx("button", { type: "button", className: "eg-btn eg-ghost", disabled: true, "aria-label": lockHint ? `เริ่ม (${lockHint})` : undefined, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" }));
     else
         button = (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 (jsxs("li", { className: cls, children: [jsx("span", { className: "eg-n", children: ticked ? jsx(IconCheck, {}) : n }), jsxs("div", { className: "eg-t", children: [jsx("b", { children: item.title }), jsx("small", { className: v === "skipped" ? "eg-sk" : undefined, children: meta })] }), dismissable ? (jsxs("span", { className: "eg-q-acts", children: [button, 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)] }));
+    return (jsxs("li", { className: cls, children: [jsx("span", { className: "eg-n", children: ticked ? jsx(IconCheck, {}) : n }), jsxs("div", { className: "eg-t", children: [jsx("b", { children: item.title }), lockHint ? jsx("small", { className: "eg-lock", children: lockHint }) : null, jsx("small", { className: v === "skipped" ? "eg-sk" : undefined, children: meta })] }), dismissable ? (jsxs("span", { className: "eg-q-acts", children: [button, 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 (jsx("div", { className: "eg-toast", role: "status", children: text }));
@@ -5647,6 +6069,45 @@ function usePrimaryTab(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;
@@ -5692,6 +6153,9 @@ function GuideHostInner({ config, organizationId, code }) {
     /* ---------------- machine ---------------- */
     const [state, setState] = useState(null);
     const stateRef = 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 = useRef(null);
     useEffect(() => {
         if (!answer || answer.audience === "none" || answer.newerOnServer) {
             stateRef.current = null;
@@ -5700,6 +6164,7 @@ function GuideHostInner({ config, organizationId, code }) {
         }
         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);
@@ -5756,7 +6221,11 @@ function GuideHostInner({ config, organizationId, code }) {
                 const cur = stateRef.current;
                 if (!cur)
                     return;
+                if (payloadKey(cur.progress, suite.app) === savedKey.current)
+                    continue;
                 const row = await saveGuides(organizationId, 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 });
@@ -5797,13 +6266,9 @@ function GuideHostInner({ config, organizationId, code }) {
                     else
                         router.push(e.href);
                 }
-                else if (e.type === "closeAppDialog") {
-                    // After this render takes the guard away, Escape to the app's
-                    // dialog (Radix listens on the document).
-                    setTimeout(() => {
-                        const t = document.activeElement ?? document.body;
-                        t.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true, cancelable: true }));
-                    }, 60);
+                else if (e.type === "abort") {
+                    // After this render takes the guard away, put the page back.
+                    runAbort(e.actions);
                 }
             }
             catch {
@@ -5933,7 +6398,9 @@ function GuideHostInner({ config, organizationId, code }) {
        scrolling, dialogs animating in, the drawer sliding, the keyboard. */
     const [layout, setLayout] = useState({
         spot: null,
+        covered: false,
         holes: [],
+        popovers: [],
         vw: 0,
         vh: 0,
         oy: 0,
@@ -5945,9 +6412,22 @@ function GuideHostInner({ config, organizationId, code }) {
         }
         let raf = 0;
         let lostSince = null;
-        let last = { spot: null, holes: [], vw: 0, vh: 0, oy: 0 };
+        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;
@@ -5962,14 +6442,14 @@ function GuideHostInner({ config, organizationId, code }) {
             let spot = null;
             if (target && el && isPresent(el)) {
                 lostSince = null;
-                spot = padRect(rectOf(el), TARGET_PAD);
+                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 = padRect(rectOf(again), TARGET_PAD);
+                    spot = spotOf(again);
                     lostSince = null;
                 }
                 else if (phase === "ready") {
@@ -5982,21 +6462,25 @@ function GuideHostInner({ config, organizationId, code }) {
             }
             if (phase === "waiting" && spot)
                 dispatchRef.current({ type: "sync" });
-            const holes = [];
+            const popovers = [];
             for (const p of openPoppers())
-                holes.push(padRect(rectOf(p), 2));
+                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 next = { spot, holes, vw, vh, oy };
+            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 ||
-                next.holes.length !== last.holes.length ||
-                next.holes.some((h, i) => !sameRect(h, last.holes[i]))) {
+                !sameList(next.holes, last.holes) ||
+                !sameList(next.popovers, last.popovers)) {
                 last = next;
                 setLayout(next);
             }
@@ -6127,7 +6611,10 @@ function GuideHostInner({ config, organizationId, code }) {
             if (!(node instanceof Node))
                 return false;
             const el = targetElRef.current;
-            if (el && el.contains(node))
+            // 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)
@@ -6226,7 +6713,7 @@ function GuideHostInner({ config, organizationId, code }) {
                     const el = targetElRef.current;
                     const step = stepInfoRef.current?.step;
                     const isInput = !!step && !sc.bridge && stepKind(step) === "input";
-                    const inTargetList = el ? focusablesIn(isInput ? (fieldOf(el) ?? el) : el) : [];
+                    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())
@@ -6301,19 +6788,38 @@ function GuideHostInner({ config, organizationId, code }) {
     useEffect(() => {
         const el = document.createElement("div");
         el.setAttribute(GUIDE_LAYER_ATTRIBUTE, "");
+        // A Radix modal (dialog, select, menu) hides everything outside it from
+        // screen readers with aria-hidden's hideOthers. It leaves [aria-live]
+        // elements and their insides alone, but walks into their ancestors and
+        // hides the siblings: with only the status line live, the bubble and its
+        // buttons were hidden. "off" announces nothing; it only makes the whole
+        // layer one of the kept elements.
+        el.setAttribute("aria-live", "off");
         document.body.appendChild(el);
         layerRef.current = el;
         setLayer(el);
-        // A Radix modal hides everything else from screen readers; not us.
-        const obs = new MutationObserver(() => {
-            if (el.getAttribute("aria-hidden") === "true")
-                el.removeAttribute("aria-hidden");
-            if (el.hasAttribute("data-aria-hidden"))
-                el.removeAttribute("data-aria-hidden");
-            if (el.hasAttribute("inert"))
-                el.removeAttribute("inert");
+        // And should anything still hide the layer or a part of it (another
+        // library, a later hideOthers), take it off again. 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.
+        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, attributeFilter: ["aria-hidden", "data-aria-hidden", "inert"] });
+        obs.observe(el, { attributes: true, attributeOldValue: true, subtree: true, attributeFilter: ["aria-hidden", "data-aria-hidden", "inert"] });
         return () => {
             obs.disconnect();
             el.remove();
@@ -6380,7 +6886,7 @@ function GuideHostInner({ config, organizationId, code }) {
         const { mission, step, missionNo } = stepInfo;
         const kind = stepKind(step);
         const bridge = screen.bridge;
-        content = (jsx(StepLayer, { spot: layout.spot, holes: layout.holes, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
+        content = (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,
@@ -6391,7 +6897,7 @@ function GuideHostInner({ config, organizationId, code }) {
                 error: screen.error,
                 showNext: !bridge && (kind === "input" || kind === "view"),
                 showEndWithoutSave: !bridge && screen.replay && kind === "commit",
-            }, hasTarget: bridge || !!step.target, 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" }) }));
+            }, 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);