@eintrek/erp-shell 0.1.76 → 0.1.78

package/dist/chunks/{format-BVoVc7Yk.cjs → format-BmTSD3DB.cjs}

@@ -1012,6 +1012,7 @@ function initialGuideState(audience, progress, pages) {
         pageRun: null,
         panelSection: "all",
         autoPassed: null,
+        counter: null,
         audience,
         progress,
         screen: { name: "idle" },
@@ -1390,7 +1391,7 @@ function announceStep(d, suite, env) {
     const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
     const title = s.bridge ? COPY.bridgeTitle : plainTitle(resolveText(step.title, ctx));
     const why = s.bridge ? COPY.bridgeWhy(suite.appName) : plainTitle(resolveText(step.why, ctx));
-    const pos = stepPosition(mission, s.index, env, d.state.progress.context, autoPassedOf(d.state, mission.key));
+    const pos = s.pos ?? stepPosition(mission, s.index, env, d.state.progress.context, autoPassedOf(d.state, mission.key));
     d.effects.push({
         type: "announce",
         text: `ขั้นที่ ${pos.no} จาก ${pos.total}. ${title}${why ? `. ${why}` : ""}`,
@@ -1424,6 +1425,54 @@ function stepPosition(mission, index, env, context, autoPassed = []) {
     });
     return { no: Math.max(no, 1), total: Math.max(total, 1) };
 }
+/**
+ * The steps after `index` this person will see, as far as can be known from
+ * here: on this page, everything is read (requires, skipIf, a click whose
+ * outcome already holds); on another page, a step whose showing depends on
+ * what is on that page (`skipIf`, `onMissing: "skip"`) is not counted until
+ * its page is reached.
+ */
+function stepsAhead(mission, index, env, context) {
+    let n = 0;
+    for (let j = index + 1; j < mission.steps.length; j++) {
+        const step = mission.steps[j];
+        if (step.requires && !safe(() => env.can(step.requires), true))
+            continue;
+        const home = stepHomeRoute(mission.steps, j);
+        const here = !home || !!matchRoute(home, env.pathname, env.search, env.code);
+        if (here) {
+            const ctx = guideContext(env, context, routeParamsFor(step, env));
+            if (step.skipIf && safe(() => step.skipIf(ctx), false))
+                continue;
+            if (wouldAutoPass(step, env))
+                continue;
+        }
+        else if (step.skipIf || step.onMissing === "skip") {
+            continue;
+        }
+        n++;
+    }
+    return n;
+}
+/**
+ * The counter as shown when entering step `index` (shell ≥ 0.1.77). `no`
+ * counts the steps actually shown in this run up to this one. The total is
+ * worked out on entering a step on a new page — the shown steps so far plus
+ * stepsAhead — and kept while the run stays on that page; it never goes
+ * down (the larger of the old and the new), and is never below `no`.
+ */
+function countStep(d, env, mission, index) {
+    const prev = d.state.counter?.mission === mission.key ? d.state.counter : null;
+    const shown = prev ? (prev.shown.includes(index) ? prev.shown : [...prev.shown, index]) : [index];
+    const no = Math.max(1, shown.filter(i => i <= index).length);
+    let total;
+    if (prev && prev.path === env.pathname)
+        total = Math.max(prev.total, no);
+    else
+        total = Math.max(prev?.total ?? 0, no + stepsAhead(mission, index, env, d.state.progress.context), no);
+    d.state = { ...d.state, counter: { mission: mission.key, shown, total, path: env.pathname } };
+    return { no, total };
+}
 /** A step entered now would pass at once: a click or select step whose route or visible outcome holds. */
 function wouldAutoPass(step, env) {
     const kind = stepKind(step);
@@ -1493,6 +1542,7 @@ function enterStep(d, suite, env, mission, index, opts) {
     const away = !page && !section && !!where && !matchRoute(where, env.pathname, env.search, env.code);
     const bridge = !away && needsBridge(step, env, ctx);
     const nts = !away && !bridge && nothingToSaveHolds(step, env, ctx);
+    const pos = countStep(d, env, mission, i);
     setScreen(d, {
         name: "step",
         mission: mission.key,
@@ -1510,6 +1560,7 @@ function enterStep(d, suite, env, mission, index, opts) {
         ...(page ? { page } : {}),
         ...(section ? { section } : {}),
         ...(flow ? { flow } : {}),
+        pos,
     });
     if (!opts.replay) {
         const cp = checkpointAtOrBefore(steps, i);
@@ -1784,7 +1835,7 @@ function startMission(d, suite, env, key, replay) {
     const isReplay = replay || entry?.status === "done";
     const before = d.state.progress;
     // A new run: what passed by itself is counted afresh.
-    d.state = { ...d.state, panelOpen: false, justDone: null, autoPassed: null };
+    d.state = { ...d.state, panelOpen: false, justDone: null, autoPassed: null, counter: null };
     if (d.state.progress.welcome === "not_seen")
         withProgress(d, { welcome: "started" });
     if (!isReplay && d.state.progress.mission_key !== key)
@@ -1934,24 +1985,33 @@ function pageStillHere(suite, key, env) {
     const page = findPage(suite, key);
     return !!page && pageMatchScore(page, whereOf(env)) !== null;
 }
-/** Write a page guide's row (once per page and version): recorded here at once, saved by the host. */
+/**
+ * Whether a row may be written now: none of this version yet, or — once —
+ * a skipped one that the person has now finished (skipped → completed,
+ * shell ≥ 0.1.77). A completed row is final; skipped again changes nothing.
+ */
+function rowWritable(row, version, status) {
+    if (!row || row.version < version)
+        return true;
+    return row.version === version && row.status === "skipped" && status === "completed";
+}
+/** Whether a run should keep its row to write at its end: no row yet, or only a skipped one. */
+function rowStillDue(row, version) {
+    return rowWritable(row, version, "completed");
+}
+/** Write a page guide's row (once per page and version; skipped → completed once): recorded here at once, saved by the host. */
 function recordPage(d, suite, key, status) {
     const page = findPage(suite, key);
-    if (!page || pageRecorded(d.state, page))
+    if (!page || !rowWritable(d.state.pages[key], page.version, status))
         return;
     const prev = d.state.pages[key];
     d.state = { ...d.state, pages: { ...d.state.pages, [key]: { version: page.version, status, rev: prev?.rev ?? 0 } } };
     d.effects.push({ type: "savePage", key, version: page.version, status });
 }
-/** The section guide's row says this person has ended this version of it. */
-function sectionRecorded(state, section) {
-    const row = state.sections?.[section.key];
-    return !!row && row.version >= section.version;
-}
 /** Write a section guide's row (once per section and version). */
 function recordSection(d, suite, key, status) {
     const section = findSection(suite, key);
-    if (!section || sectionRecorded(d.state, section))
+    if (!section || !rowWritable(d.state.sections?.[key], section.version, status))
         return;
     const prev = d.state.sections?.[key];
     d.state = { ...d.state, sections: { ...d.state.sections, [key]: { version: section.version, status, rev: prev?.rev ?? 0 } } };
@@ -1982,7 +2042,7 @@ function flowRecorded(state, flow) {
 /** Write a flow's row (once per flow and version). */
 function recordFlow(d, suite, key, status) {
     const flow = findFlow(suite, key);
-    if (!flow || flowRecorded(d.state, flow))
+    if (!flow || !rowWritable(d.state.flows?.[key], flow.version, status))
         return;
     const prev = d.state.flows?.[key];
     d.state = { ...d.state, flows: { ...d.state.flows, [key]: { version: flow.version, status, rev: prev?.rev ?? 0 } } };
@@ -2067,6 +2127,7 @@ function startFlow(d, suite, env, key, write, at) {
         justDone: null,
         pageRun: { key, write, kind: "flow", context: saved },
         autoPassed: null,
+        counter: null,
         replayPage: {
             mission: mission.key,
             anchors: abortAnchorsOf(mission).filter(a => safe(() => env.isVisible(a), false)),
@@ -2097,6 +2158,7 @@ function startSection(d, suite, env, key, write) {
         justDone: null,
         pageRun: { key, write, kind: "section" },
         autoPassed: null,
+        counter: null,
         replayPage: {
             mission: mission.key,
             anchors: abortAnchorsOf(mission).filter(a => safe(() => env.isVisible(a), false)),
@@ -2116,6 +2178,7 @@ function startPage(d, suite, env, key, write) {
         justDone: null,
         pageRun: { key, write, kind: "page" },
         autoPassed: null,
+        counter: null,
         // What is open now is the person's: ending the guide leaves it alone.
         replayPage: {
             mission: mission.key,
@@ -2159,6 +2222,28 @@ function backTarget(mission, index, env, context) {
     }
     return prev >= 0 ? { index: prev, close: false } : null;
 }
+/**
+ * A flow's next step (the next one this person sees) when the person is on
+ * its page and no longer on the current step's: they moved on by
+ * themselves. -1 otherwise (still on this step's page, or elsewhere).
+ */
+function flowStepArrivedAt(mission, index, env, context) {
+    const here = (route) => !!route && !!matchRoute(route, env.pathname, env.search, env.code);
+    const curHome = stepHomeRoute(mission.steps, index);
+    if (!curHome || here(curHome))
+        return -1;
+    for (let j = index + 1; j < mission.steps.length; j++) {
+        const st = mission.steps[j];
+        const ctx = guideContext(env, context, routeParamsFor(st, env));
+        if (st.requires && !safe(() => env.can(st.requires), true))
+            continue;
+        if (st.skipIf && safe(() => st.skipIf(ctx), false))
+            continue;
+        const where = st.route ?? stepHomeRoute(mission.steps, j);
+        return here(where) ? j : -1;
+    }
+    return -1;
+}
 function reduceGuide(state, action, suite, env) {
     const d = { state, effects: [] };
     const s = state.screen;
@@ -2236,7 +2321,7 @@ function reduceGuide(state, action, suite, env) {
             const stepAt = mission.steps.findIndex(st => st.key === d.state.progress.step_key);
             const cpAt = mission.steps.findIndex(st => st.key === d.state.progress.checkpoint_key);
             const index = stepAt >= 0 ? checkpointAtOrBefore(mission.steps, stepAt) : Math.max(cpAt, 0);
-            d.state = { ...d.state, autoPassed: null };
+            d.state = { ...d.state, autoPassed: null, counter: null };
             enterStep(d, suite, env, mission, index, { replay: false });
             break;
         }
@@ -2279,6 +2364,15 @@ function reduceGuide(state, action, suite, env) {
                 break;
             const step = mission.steps[s.index];
             const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            if (s.flow && !s.confirmExit) {
+                // Within the chain, the person went on to the next step's page by
+                // themselves: carry on there, no "ทำต่อ" (shell ≥ 0.1.77).
+                const next = flowStepArrivedAt(mission, s.index, env, d.state.progress.context);
+                if (next >= 0) {
+                    enterStep(d, suite, env, mission, next, { replay: s.replay });
+                    break;
+                }
+            }
             if (s.phase === "away") {
                 const where = placeRoute(mission.steps, s.index);
                 if (!where || matchRoute(where, env.pathname, env.search, env.code)) {
@@ -2673,7 +2767,7 @@ function reduceGuide(state, action, suite, env) {
             if (!flowsAvailable(suite, env).includes(action.flow))
                 break;
             const flow = findFlow(suite, action.flow);
-            startFlow(d, suite, env, flow.key, !flowRecorded(state, flow));
+            startFlow(d, suite, env, flow.key, rowStillDue(state.flows?.[flow.key], flow.version));
             break;
         }
         case "resumeFlow": {
@@ -2682,7 +2776,7 @@ function reduceGuide(state, action, suite, env) {
             const flow = findFlow(suite, action.flow);
             if (!flow || !flowShown(flow, guideContext(env, {})) || !inFlowChain(flow, whereOf(env)))
                 break;
-            startFlow(d, suite, env, flow.key, action.write && !flowRecorded(state, flow), { step: action.step, context: action.context });
+            startFlow(d, suite, env, flow.key, action.write && rowStillDue(state.flows?.[flow.key], flow.version), { step: action.step, context: action.context });
             break;
         }
         case "startPage": {
@@ -2694,7 +2788,7 @@ function reduceGuide(state, action, suite, env) {
             const page = pageHere(suite, env);
             if (!page || page.key !== action.page)
                 break;
-            startPage(d, suite, env, page.key, !pageRecorded(state, page));
+            startPage(d, suite, env, page.key, rowStillDue(state.pages[page.key], page.version));
             break;
         }
         case "back": {
@@ -2733,6 +2827,37 @@ function reduceGuide(state, action, suite, env) {
             d.state = { ...d.state, pages: { ...d.state.pages, [action.key]: action.row } };
             break;
         }
+        case "yield": {
+            const run = d.state.pageRun;
+            if (run?.kind === "flow" && run.context)
+                withProgress(d, { context: run.context });
+            d.state = { ...d.state, pageRun: null, replayPage: null, panelOpen: false, justDone: null, pendingCelebrate: [] };
+            setScreen(d, { name: "idle" });
+            break;
+        }
+        case "refresh": {
+            const p = action.progress;
+            const local = d.state.progress;
+            // The server's row when it is this version and not behind this tab's.
+            if (p.guide_version === local.guide_version && p.rev >= local.rev)
+                d.state = { ...d.state, progress: p };
+            const newer = (server, mine) => {
+                const out = { ...(mine ?? {}) };
+                for (const [k, r] of Object.entries(server ?? {})) {
+                    const m = out[k];
+                    if (!m || r.version > m.version || (r.version === m.version && r.rev >= m.rev))
+                        out[k] = r;
+                }
+                return out;
+            };
+            d.state = {
+                ...d.state,
+                pages: newer(action.pages, d.state.pages),
+                sections: newer(action.sections, d.state.sections),
+                flows: newer(action.flows, d.state.flows),
+            };
+            break;
+        }
         case "startSection": {
             // Never offered: only on request. Never over a mission step, a
             // welcome, a gate or a celebration; only on screen, only theirs.
@@ -2743,7 +2868,7 @@ function reduceGuide(state, action, suite, env) {
             if (!sectionsAvailable(suite, env).includes(action.section))
                 break;
             const section = findSection(suite, action.section);
-            startSection(d, suite, env, section.key, !sectionRecorded(state, section));
+            startSection(d, suite, env, section.key, rowStillDue(state.sections?.[section.key], section.version));
             break;
         }
         case "idleCelebrate": {
@@ -3102,9 +3227,9 @@ function conflictOf(err) {
     return null;
 }
 /** The GET, parsed for this suite; null (show nothing) on any failure or odd answer. */
-async function loadGuides(adapter, suite, signal) {
+async function loadGuides(adapter, suite, signal, fresh = false) {
     try {
-        const raw = await adapter.fetchProgress({ app: suite.app, guideKey: suite.key, signal });
+        const raw = await adapter.fetchProgress({ app: suite.app, guideKey: suite.key, signal, ...(fresh ? { fresh: true } : {}) });
         return parseGuidesAnswer(raw, suite);
     }
     catch {
@@ -3189,7 +3314,10 @@ async function storePageRow(adapter, app, key, version, status, rev, kind = "pag
         }
         if (current.version > version)
             return null;
-        if (current.version === version && current.status !== "in_progress")
+        // This version already recorded: kept, except a skipped row this run
+        // finished (skipped → completed, once, shell ≥ 0.1.77).
+        const finishing = status === "completed" && current.status === "skipped";
+        if (current.version === version && current.status !== "in_progress" && !finishing)
             return current;
         at = current.rev;
     }
@@ -3856,6 +3984,9 @@ function useNudge(nudge, ref) {
 }
 function StepLayer(p) {
     const { spot, phone, viewport } = p;
+    // Where the bubble may sit: the content column when the app has one.
+    const col = p.bounds && p.bounds.width > 0 ? p.bounds : { x: 0, width: viewport.width || (typeof window !== "undefined" ? window.innerWidth : 0)};
+    const colKey = `${col.x}|${col.width}`;
     const bubbleRef = React.useRef(null);
     const arrowRef = React.useRef(null);
     const ringRef = React.useRef(null);
@@ -3896,8 +4027,8 @@ function StepLayer(p) {
             const bw = el.offsetWidth;
             const bh = el.offsetHeight;
             setPos(phone
-                ? { left: m, top: viewport.offsetTop + viewport.height - bh - m, side: "dock" }
-                : { left: (window.innerWidth - bw) / 2, top: viewport.offsetTop + (viewport.height - bh) / 2, side: "dock" });
+                ? { left: col.x + m, top: viewport.offsetTop + viewport.height - bh - m, side: "dock" }
+                : { left: col.x + (col.width - bw) / 2, top: viewport.offsetTop + (viewport.height - bh) / 2, side: "dock" });
             return;
         }
         if (phone) {
@@ -3918,7 +4049,7 @@ function StepLayer(p) {
                 : overlapBot <= overlapTop
                     ? botT
                     : topT;
-            setPos({ left: m, top, side: "dock" });
+            setPos({ left: col.x + m, top, side: "dock" });
             return;
         }
         let cancelled = false;
@@ -3940,7 +4071,7 @@ function StepLayer(p) {
             placement,
             middleware: [
                 dom.offset(placement.startsWith("bottom") ? gap : 14),
-                dom.shift({ padding: m }),
+                dom.shift({ padding: m, rootBoundary: { x: col.x, y: 0, width: col.width, height: window.innerHeight } }),
                 ...(arrowRef.current ? [dom.arrow({ element: arrowRef.current, padding: 14 })] : []),
             ],
         });
@@ -3950,11 +4081,11 @@ function StepLayer(p) {
                 return;
             const bw = el.offsetWidth;
             const bh = el.offsetHeight;
-            const bounds = { x: m, y: viewport.offsetTop + m, width: window.innerWidth - 2 * m, height: viewport.height - 2 * m };
+            const bounds = { x: col.x + m, y: viewport.offsetTop + m, width: col.width - 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" });
+                setPos({ left: col.x + col.width - bw - m, top: viewport.height + viewport.offsetTop - bh - m, side: "dock" });
                 return;
             }
             const { x, y, placement, middlewareData } = results[i];
@@ -3970,7 +4101,7 @@ function StepLayer(p) {
         };
         // The keys stand for spot, the lists, the holes and the bubble's size.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [spotKey, anchorKey, clearKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop]);
+    }, [spotKey, anchorKey, clearKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop, colKey]);
     const popovers = p.popovers ?? [];
     const covered = !!p.covered;
     const holes = [...(spot && !covered ? [spot] : []), ...popovers, ...p.holes];
@@ -3991,7 +4122,7 @@ function StepLayer(p) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scrim, { holes: p.phase === "ready" ? holes : [], open: p.phase === "ready" ? openHoles : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && ringShown ? (jsxRuntime.jsx("div", { ref: ringRef, className: "eg-ring" + (p.moving ? " eg-move" : ""), style: { left: spot.x, top: spot.y, width: spot.width, height: spot.height }, "aria-hidden": "true" })) : null, hand ? (jsxRuntime.jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxRuntime.jsxs("div", { ref: bubbleRef, className: "eg-bubble" + (p.bubble.error ? " eg-err" : ""), role: "dialog", "aria-modal": "false", "aria-labelledby": BUBBLE_TITLE_ID, "aria-describedby": BUBBLE_WHY_ID, tabIndex: -1, "data-eg-bubble": "", style: {
                     left: pos?.left ?? 0,
                     top: pos?.top ?? 0,
-                    width: phone ? viewport.width - 32 : undefined,
+                    width: phone ? col.width - 32 : col.width < 352 ? col.width - 32 : undefined,
                     visibility: pos ? "visible" : "hidden",
                 }, children: [jsxRuntime.jsx(BubbleBody, { ...p }), jsxRuntime.jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxRuntime.jsxs("div", { className: "eg-loading", children: [jsxRuntime.jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsxRuntime.jsx("div", { className: "eg-row", children: jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }) })] })) : null, p.phase === "missing" ? (jsxRuntime.jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-missing-t", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onRetry, children: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" })] })] })) : null, p.phase === "away" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsx("span", { className: "eg-mis", children: headingOf(p.bubble) }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsxRuntime.jsx(GuideTitle, { text: p.bubble.title }) }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (jsxRuntime.jsx(ConfirmModal, { title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49?", line: p.reopenHint || REOPEN_HINT, leaveLabel: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C", stayLabel: "\u0E17\u0E33\u0E15\u0E48\u0E2D", onLeave: p.onExitConfirm, onStay: p.onExitCancel })) : null] }));
 }
@@ -4297,36 +4428,81 @@ const flowMirrorKey = (orgId, suite) => `erp-guide-flow-run:${orgId}:${suite.app
 /* One tab at a time                                                    */
 /* ------------------------------------------------------------------ */
 /**
- * Whether this tab runs the tour. With two tabs open, the first holds a Web
- * Lock and the second shows nothing until the first goes away.
+ * Whether this tab runs the tour: one tab at a time holds a Web Lock and
+ * runs steps, offers, the welcome and saves. Every other tab still reads
+ * progress and shows the "?" menu (shell ≥ 0.1.78); pressing one of its
+ * guide items calls `takeover`, which steals the lock. The tab it was
+ * stolen from goes back to waiting its turn (and yields what it was running).
+ * Without Web Locks every tab runs, as before.
  */
 function usePrimaryTab(name) {
     const [primary, setPrimary] = React.useState(false);
+    const primaryRef = React.useRef(false);
+    const takeoverRef = React.useRef(() => Promise.resolve());
     React.useEffect(() => {
         const locks = (typeof navigator !== "undefined" ? navigator.locks : undefined);
+        const set = (v) => {
+            primaryRef.current = v;
+            setPrimary(v);
+        };
         if (!locks?.request) {
-            setPrimary(true);
+            set(true);
+            takeoverRef.current = () => Promise.resolve();
             return;
         }
-        const abort = new AbortController();
+        let alive = true;
+        let gen = 0;
+        let pending = null;
         let release = null;
-        locks
-            .request(name, { signal: abort.signal }, () => {
-            setPrimary(true);
-            return new Promise(resolve => {
-                release = resolve;
+        let waiters = [];
+        const queue = (steal) => {
+            const my = ++gen;
+            const ac = new AbortController();
+            pending = steal ? null : ac;
+            locks
+                .request(name, steal ? { steal: true } : { signal: ac.signal }, () => {
+                if (!alive || my !== gen)
+                    return undefined;
+                pending = null;
+                set(true);
+                const w = waiters;
+                waiters = [];
+                w.forEach(f => f());
+                return new Promise(resolve => {
+                    release = resolve;
+                });
+            })
+                .catch(() => {
+                // Stolen by another tab (or this request aborted): not the runner;
+                // wait for the lock again.
+                if (!alive || my !== gen)
+                    return;
+                release = null;
+                set(false);
+                queue(false);
             });
-        })
-            .catch(() => {
-            /* aborted on unmount */
+        };
+        queue(false);
+        takeoverRef.current = () => new Promise(resolve => {
+            if (primaryRef.current) {
+                resolve();
+                return;
+            }
+            waiters.push(resolve);
+            pending?.abort();
+            queue(true);
         });
         return () => {
-            abort.abort();
+            alive = false;
+            pending?.abort();
             release?.();
-            setPrimary(false);
+            waiters.forEach(f => f());
+            waiters = [];
+            set(false);
         };
     }, [name]);
-    return primary;
+    const takeover = React.useCallback(() => takeoverRef.current(), []);
+    return { primary, takeover };
 }
 /* ------------------------------------------------------------------ */
 /* Putting the page back after a replay                                 */
@@ -4359,6 +4535,42 @@ function runAbort(actions) {
         }, ABORT_DELAY_MS + i * ABORT_GAP_MS);
     });
 }
+/** The app's content column (GuideConfig.contentRoot), cut to the viewport; null when none is declared or found. */
+function contentColumn(selector, vw) {
+    if (!selector || typeof document === "undefined")
+        return null;
+    let el = null;
+    try {
+        el = document.querySelector(selector);
+    }
+    catch {
+        return null;
+    }
+    if (!el)
+        return null;
+    const r = el.getBoundingClientRect();
+    const x = Math.max(0, r.left);
+    const right = Math.min(vw || window.innerWidth, r.right);
+    if (right - x <= 0)
+        return null;
+    return { x, y: 0, width: right - x, height: 0 };
+}
+/** The control a form's implicit submit (Enter in a field) presses: its first submit button. */
+function defaultSubmitControl(form) {
+    for (const el of Array.from(form.elements)) {
+        if (el instanceof HTMLButtonElement && (el.type === "submit" || !el.getAttribute("type")))
+            return el;
+        if (el instanceof HTMLInputElement && (el.type === "submit" || el.type === "image"))
+            return el;
+    }
+    return null;
+}
+/** A field where Enter submits its form (not a textarea, a button or a select). */
+function submitsOnEnter(el) {
+    if (!(el instanceof HTMLInputElement))
+        return false;
+    return !["button", "submit", "reset", "image", "file", "hidden"].includes(el.type);
+}
 /** A step's own target takes presses: not on a "view" step, unless the step allows it. */
 function targetPressable(step, bridge) {
     if (!step || bridge)
@@ -4399,7 +4611,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     busyRef.current = busy;
     // No menu: never a menu step (the machine sees it as always open).
     const sidebarOpen = menu ? !!menu.open : true;
-    const primary = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
+    const { primary, takeover } = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
+    const primaryRef = React.useRef(primary);
+    primaryRef.current = primary;
     // Progress: read once this tab runs the tour and the app is ready (for
     // the missions, or for the page guides alone: config.pagesReady).
     const [answer, setAnswer] = React.useState(null);
@@ -4408,7 +4622,8 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const hasPages = React.useMemo(() => validPages(suite).length > 0 || validSections(suite).length > 0 || validFlows(suite).length > 0, [suite]);
     const hasFlows = React.useMemo(() => validFlows(suite).length > 0, [suite]);
     const hasSections = React.useMemo(() => validSections(suite).length > 0, [suite]);
-    const enabled = primary && (missionsReady || (hasPages && pagesReady));
+    // Every tab reads progress (0.1.78): the "?" menu is shown in all of them.
+    const enabled = missionsReady || (hasPages && pagesReady);
     const loaded = React.useRef(false);
     React.useEffect(() => {
         if (!enabled || loaded.current)
@@ -4432,8 +4647,12 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     }, [enabled, suite]);
     // The missions run for their audience; the page guides for theirs (every
     // member while pages are on), each with its own ready.
-    const missionsLive = !!answer && answer.audience !== "none" && !answer.newerOnServer && primary && missionsReady && !hidden;
-    const pagesLive = !!answer && hasPages && answer.pageAudience !== "none" && primary && pagesReady && !hidden;
+    // On: this person has them here (every tab, for the "?" menu). Live: this
+    // tab runs them (the primary tab only): steps, offers, the welcome, saves.
+    const missionsOn = !!answer && answer.audience !== "none" && !answer.newerOnServer && missionsReady && !hidden;
+    const pagesOn = !!answer && hasPages && answer.pageAudience !== "none" && pagesReady && !hidden;
+    const missionsLive = missionsOn && primary;
+    const pagesLive = pagesOn && primary;
     const live = missionsLive || pagesLive;
     /* ---------------- machine ---------------- */
     const [state, setState] = React.useState(null);
@@ -4526,6 +4745,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 const row = await storeGuides(adapterRef.current, suite, cur.progress);
                 if (row)
                     savedKey.current = payloadKey(row, suite.app);
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                if (row)
+                    announceSaved();
                 if (row && stateRef.current) {
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
                     dispatchRef.current({ type: "serverRow", progress: row });
@@ -4582,6 +4804,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
                         if (row)
                             dispatchRef.current({ type: "pageRow", key: e.key, row, kind });
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        if (row)
+                            announceSaved();
                     });
                 }
             }
@@ -4628,6 +4853,95 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 clearTimeout(toastTimer.current);
         };
     }, [flushSave]);
+    /* ---------------- other tabs (0.1.78) ---------------- */
+    // Progress saved in one tab reaches the others: a message on a channel
+    // per organisation and app, and a fresh read when a tab comes back into
+    // view. Only the server's rows are read, never another tab's state.
+    const channelRef = React.useRef(null);
+    const refreshNow = React.useCallback(async () => {
+        const a = await loadGuides(adapterRef.current, suite, undefined, true);
+        const cur = stateRef.current;
+        if (!a || !cur)
+            return;
+        // The runner's own state wins while it is running something.
+        if (primaryRef.current && (cur.screen.name !== "idle" || saving.current))
+            return;
+        if (a.progress.guide_version === cur.progress.guide_version && a.progress.rev >= cur.progress.rev) {
+            savedKey.current = a.progress.rev > 0 ? payloadKey(a.progress, suite.app) : null;
+        }
+        dispatchRef.current({ type: "refresh", progress: a.progress, pages: a.pages, sections: a.sections, flows: a.flows });
+    }, [suite]);
+    const refreshRef = React.useRef(refreshNow);
+    refreshRef.current = refreshNow;
+    React.useEffect(() => {
+        if (typeof BroadcastChannel === "undefined")
+            return;
+        let ch;
+        try {
+            ch = new BroadcastChannel(`erp-guide:${organizationId}:${suite.app}`);
+        }
+        catch {
+            return;
+        }
+        channelRef.current = ch;
+        ch.onmessage = (e) => {
+            if (e.data?.type === "saved")
+                void refreshRef.current();
+        };
+        return () => {
+            channelRef.current = null;
+            ch.close();
+        };
+    }, [organizationId, suite.app]);
+    React.useEffect(() => {
+        const onVisible = () => {
+            if (document.visibilityState === "visible" && stateRef.current)
+                void refreshRef.current();
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => document.removeEventListener("visibilitychange", onVisible);
+    }, []);
+    function announceSaved() {
+        try {
+            channelRef.current?.postMessage({ type: "saved" });
+        }
+        catch {
+            /* a closed channel: the next visibility change reads again */
+        }
+    }
+    // The tab that lost the lock stops cleanly: whatever it was running ends
+    // silently, without writing.
+    React.useEffect(() => {
+        if (primary || !stateRef.current)
+            return;
+        const cur = stateRef.current;
+        if (saveTimer.current) {
+            clearTimeout(saveTimer.current);
+            saveTimer.current = null;
+        }
+        if (cur.screen.name !== "idle" || cur.panelOpen)
+            dispatchRef.current({ type: "yield" });
+    }, [primary]);
+    /**
+     * A guide item pressed in this tab: run it here. In a tab that is not the
+     * runner, take the lock first (the other tab stops), read progress fresh,
+     * then do it. Nothing resumes by itself in a tab taken over this way.
+     */
+    const viaRunner = React.useCallback((fn) => {
+        if (primaryRef.current) {
+            fn();
+            return;
+        }
+        resumed.current = true;
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        flowResumed.current = true;
+        void takeover()
+            .then(() => refreshRef.current().catch(() => undefined))
+            .then(() => {
+            if (primaryRef.current)
+                fn();
+        });
+    }, [takeover]);
     /* ---------------- boot: resume, welcome ---------------- */
     const screen = state?.screen ?? { name: "idle" };
     const resumed = React.useRef(false);
@@ -4737,6 +5051,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const stepId = screen.name === "step" ? `${screen.mission}:${screen.index}:${screen.bridge ? "b" : ""}${screen.nothingToSave ? "n" : ""}` : "";
     /* Measure every frame while a step is shown: the spotlight follows
        scrolling, dialogs animating in, the drawer sliding, the keyboard. */
+    const contentRoot = config.contentRoot;
     const [layout, setLayout] = React.useState({
         spot: null,
         covered: false,
@@ -4745,6 +5060,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         vw: 0,
         vh: 0,
         oy: 0,
+        col: null,
     });
     React.useEffect(() => {
         if (!inStep) {
@@ -4753,7 +5069,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         }
         let raf = 0;
         let lostSince = null;
-        let last = { spot: null, covered: false, holes: [], popovers: [], vw: 0, vh: 0, oy: 0 };
+        let last = { spot: null, covered: false, holes: [], popovers: [], vw: 0, vh: 0, oy: 0, col: null };
         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
@@ -4813,13 +5129,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                     holes.push(padRect(rectOf(ael), TARGET_PAD));
             }
             const covered = !!spot && coveredByDialog(targetElRef.current);
-            const next = { spot, covered, holes, popovers, vw, vh, oy };
+            const col = contentColumn(contentRoot, vw);
+            const next = { spot, covered, holes, popovers, vw, vh, oy, col };
             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 ||
+                !sameRect(next.col, last.col) ||
                 !sameList(next.holes, last.holes) ||
                 !sameList(next.popovers, last.popovers)) {
                 last = next;
@@ -4974,6 +5292,43 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             }
             return false;
         };
+        /**
+         * Whether a form may be submitted during this step (shell ≥ 0.1.77): only
+         * when its submit control — the button pressed, or the one Enter in a
+         * field would press — is the step's pressable target or in its `allow`.
+         * Otherwise Enter in an allowed field would save a draft (and take a
+         * document number) behind the guide's back.
+         */
+        const submitAllowed = (form, submitter) => {
+            const btn = submitter ?? defaultSubmitControl(form);
+            if (!btn)
+                return false;
+            const el = targetElRef.current;
+            const sc = stateRef.current?.screen;
+            const pressable = targetPressable(stepInfoRef.current?.step, sc?.name === "step" && sc.bridge);
+            if (el && pressable && el.contains(btn))
+                return true;
+            for (const a of stepInfoRef.current?.step.allow ?? []) {
+                const ael = findAnchor(a);
+                if (ael && ael.contains(btn))
+                    return true;
+            }
+            return false;
+        };
+        const onSubmit = (e) => {
+            const sc = stateRef.current?.screen;
+            if (!guardingRef.current || sc?.name !== "step")
+                return;
+            const form = e.target;
+            if (!(form instanceof HTMLFormElement) || inGuideLayer(form))
+                return;
+            const submitter = e.submitter ?? null;
+            if (submitAllowed(form, submitter))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            dispatchRef.current({ type: "blocked" });
+        };
         const onPointer = (e) => {
             const t = e.target;
             if (inGuideLayer(t)) {
@@ -5093,8 +5448,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                         return;
                     }
                 }
-                if (modalRef.current || !allowedTarget(active))
+                if (modalRef.current || !allowedTarget(active)) {
                     stop();
+                    return;
+                }
+                // Enter in a field the step lets the person type in: no implicit
+                // submit unless the form's submit control is allowed now.
+                if (e.key === "Enter" && sc.name === "step" && submitsOnEnter(active) && active.form && !submitAllowed(active.form, null)) {
+                    e.preventDefault();
+                }
             }
         };
         window.addEventListener("pointerdown", onPointer, true);
@@ -5104,7 +5466,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         window.addEventListener("focusin", onFocusIn, true);
         window.addEventListener("focusout", onFocusOut, true);
         window.addEventListener("keydown", onKey, true);
+        window.addEventListener("submit", onSubmit, true);
         return () => {
+            window.removeEventListener("submit", onSubmit, true);
             window.removeEventListener("pointerdown", onPointer, true);
             window.removeEventListener("mousedown", onPointer, true);
             window.removeEventListener("touchstart", onPointer, true);
@@ -5226,12 +5590,13 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         !due;
     useAfterIdle(passiveDue, PASSIVE_IDLE_MS, busy, () => dispatchRef.current({ type: "idleCelebrate" }), [state?.pendingCelebrate?.join(",")]);
     React.useEffect(() => {
-        if (!missionsLive || !state) {
+        // Every tab shows "ไกด์เริ่มต้น n/N"; pressing it runs it in this tab.
+        if (!missionsOn || !state) {
             publishGuideEntry(null, null);
             return;
         }
-        publishGuideEntry({ done, total }, () => dispatchRef.current({ type: "openPanel" }));
-    }, [missionsLive, state, done, total]);
+        publishGuideEntry({ done, total }, () => viaRunner(() => dispatchRef.current({ type: "openPanel" })));
+    }, [missionsOn, state, done, total, viaRunner]);
     React.useEffect(() => () => publishGuideEntry(null, null), []);
     /* ---------------- page guides: this page's, the offer, the list ---------------- */
     // `when` anchors (LIFF's sub-screens) come and go without a route change:
@@ -5239,7 +5604,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const hasWhen = React.useMemo(() => validPages(suite).some(p => !!p.when) || validSections(suite).length > 0, [suite]);
     const [domTick, setDomTick] = React.useState(0);
     React.useEffect(() => {
-        if (!pagesLive || !hasWhen || typeof MutationObserver === "undefined")
+        if (!pagesOn || !hasWhen || typeof MutationObserver === "undefined")
             return;
         let t = null;
         const obs = new MutationObserver(records => {
@@ -5263,18 +5628,18 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (t)
                 clearTimeout(t);
         };
-    }, [pagesLive, hasWhen]);
+    }, [pagesOn, hasWhen]);
     const hasState = !!state;
-    const pageNow = React.useMemo(() => (pagesLive && hasState ? pageHere(suite, env()) : null), 
+    const pageNow = React.useMemo(() => (pagesOn && hasState ? pageHere(suite, env()) : null), 
     // pathname/search/factsKey/domTick make it current.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pagesLive, hasState, suite, env, pathname, search, factsKey, domTick]);
-    const listed = React.useMemo(() => (pagesLive && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesLive, suite, ctxIdle]);
-    const sectionsNow = React.useMemo(() => pagesLive && hasState && hasSections
+    [pagesOn, hasState, suite, env, pathname, search, factsKey, domTick]);
+    const listed = React.useMemo(() => (pagesOn && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesOn, suite, ctxIdle]);
+    const sectionsNow = React.useMemo(() => pagesOn && hasState && hasSections
         ? sectionsAvailable(suite, env()).map(k => ({ key: k, title: findSection(suite, k)?.title ?? "" }))
         : [], 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pagesLive, hasState, hasSections, suite, env, pathname, search, factsKey, domTick]);
+    [pagesOn, hasState, hasSections, suite, env, pathname, search, factsKey, domTick]);
     const sectionsSig = sectionsNow.map(x => x.key).join(",");
     const openSection = React.useCallback((key) => {
         openingSection.current = key;
@@ -5285,14 +5650,14 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             openingSection.current = null;
         }
     }, []);
-    const flowsNow = React.useMemo(() => pagesLive && hasState && hasFlows
+    const flowsNow = React.useMemo(() => pagesOn && hasState && hasFlows
         ? flowsAvailable(suite, env()).map(k => ({ key: k, title: findFlow(suite, k)?.title ?? "" }))
         : [], 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pagesLive, hasState, hasFlows, suite, env, pathname, search, factsKey]);
+    [pagesOn, hasState, hasFlows, suite, env, pathname, search, factsKey]);
     const flowsSig = flowsNow.map(x => x.key).join(",");
     /** The flows the panel lists: this person's, startable here or with somewhere to go. */
-    const flowsListed = React.useMemo(() => (pagesLive && hasFlows && ctxIdle ? shownFlows(suite, ctxIdle).filter(f => onFlowStart(f, { code, pathname, search: new URLSearchParams(search) }) || !!flowHref(f, ctxIdle)) : []), [pagesLive, hasFlows, suite, ctxIdle, code, pathname, search]);
+    const flowsListed = React.useMemo(() => (pagesOn && hasFlows && ctxIdle ? shownFlows(suite, ctxIdle).filter(f => onFlowStart(f, { code, pathname, search: new URLSearchParams(search) }) || !!flowHref(f, ctxIdle)) : []), [pagesOn, hasFlows, suite, ctxIdle, code, pathname, search]);
     const openFlowHere = React.useCallback((key) => dispatchRef.current({ type: "startFlow", flow: key }), []);
     const openPageHere = React.useCallback(() => {
         const p = pageHere(suite, env());
@@ -5300,7 +5665,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             dispatchRef.current({ type: "startPage", page: p.key });
     }, [suite, env]);
     React.useEffect(() => {
-        if (!pagesLive || !hasState) {
+        if (!pagesOn || !hasState) {
             publishPageGuides(null, null, null);
             return;
         }
@@ -5310,10 +5675,10 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             sections: sectionsNow,
             flows: flowsNow,
             flowsListed: flowsListed.length,
-        }, openPageHere, () => dispatchRef.current({ type: "openPanel", section: "pages" }), openSection, openFlowHere, () => dispatchRef.current({ type: "openPanel", section: "flows" }));
+        }, () => viaRunner(openPageHere), () => viaRunner(() => dispatchRef.current({ type: "openPanel", section: "pages" })), (key) => viaRunner(() => openSection(key)), (key) => viaRunner(() => openFlowHere(key)), () => viaRunner(() => dispatchRef.current({ type: "openPanel", section: "flows" })));
         // sectionsSig / flowsSig stand for sectionsNow / flowsNow.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pagesLive, hasState, pageNow, listed.length, openPageHere, sectionsSig, openSection, flowsSig, flowsListed.length, openFlowHere]);
+    }, [pagesOn, hasState, pageNow, listed.length, openPageHere, sectionsSig, openSection, flowsSig, flowsListed.length, openFlowHere, viaRunner]);
     React.useEffect(() => () => publishPageGuides(null, null, null), []);
     // The first-visit offer: in "offer" mode, nothing else up, the welcome
     // not due here, and a moment of nothing loading on this page.
@@ -5532,7 +5897,11 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         const missionNo = missionNumber(suite, mission.key, ctxIdle);
         const kind = stepKind(step);
         const bridge = screen.bridge;
-        const pos = stepPosition(mission, screen.index, env(), state.progress.context, autoPassedOf(state, mission.key));
+        // What is ahead now decides เสร็จ; the number shown is the run's counter,
+        // which never goes down (0.1.77).
+        const raw = stepPosition(mission, screen.index, env(), state.progress.context, autoPassedOf(state, mission.key));
+        const last = raw.no >= raw.total;
+        const pos = screen.pos ?? raw;
         const page = screen.page ? findPage(suite, screen.page) : undefined;
         const section = screen.section ? findSection(suite, screen.section) : undefined;
         const flow = screen.flow ? findFlow(suite, screen.flow) : undefined;
@@ -5541,16 +5910,16 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             ? {
                 ...read,
                 showBack: kind === "view" && !!backTarget(mission, screen.index, env(), state.progress.context),
-                nextLabel: pos.no >= pos.total ? "เสร็จ" : undefined,
+                nextLabel: last ? "เสร็จ" : undefined,
             }
             : flow
                 ? {
                     heading: `พาทำ · ${flow.title}`,
                     exitLabel: "ออกจากการพาทำ",
-                    nextLabel: kind === "view" && pos.no >= pos.total ? "เสร็จ" : undefined,
+                    nextLabel: kind === "view" && last ? "เสร็จ" : undefined,
                 }
                 : {};
-        content = (jsxRuntime.jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
+        content = (jsxRuntime.jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, bounds: layout.col, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
                 missionNo,
                 missionTitle: mission.title,
                 replay: screen.replay,
@@ -5766,4 +6135,4 @@ exports.useGuideEntry = useGuideEntry;
 exports.usePageGuideEntry = usePageGuideEntry;
 exports.usePageGuides = usePageGuides;
 exports.useSectionGuideValues = useSectionGuideValues;
-//# sourceMappingURL=format-BVoVc7Yk.cjs.map
+//# sourceMappingURL=format-BmTSD3DB.cjs.map