@eintrek/erp-shell 0.1.63 → 0.1.64

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.64";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -4033,7 +4033,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}` : ""}`,
@@ -4195,6 +4195,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 +4213,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) {
@@ -4786,6 +4789,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 +4944,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 +5026,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 +5063,181 @@ 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" };
+}
+/** Scrolls the target into view (instant under reduced motion). */
 function revealTarget(el) {
-    const r = el.getBoundingClientRect();
     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: prefersReducedMotion() ? "auto" : "smooth" });
+    }
+    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 +5259,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 +5369,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 +5434,51 @@ 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. 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 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.
  */
 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": "" }) }));
+    const maskId = "eg-scrim-mask-" + React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const block = blockedRects(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 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";
@@ -5272,12 +5518,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 +5543,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 +5563,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 +5609,14 @@ 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 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 +5628,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 : [], 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 +5639,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 +5752,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 +5763,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 }));
@@ -5692,6 +5955,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 +5966,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 +6023,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 });
@@ -5933,7 +6204,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 +6218,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 +6248,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 +6268,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);
             }
@@ -6380,7 +6670,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,