@eintrek/erp-shell 0.1.76 → 0.1.77

package/dist/chunks/{format-BWUKNKxg.esm.js → format-ILrTMV4G.esm.js}

@@ -992,6 +992,7 @@ function initialGuideState(audience, progress, pages) {
         pageRun: null,
         panelSection: "all",
         autoPassed: null,
+        counter: null,
         audience,
         progress,
         screen: { name: "idle" },
@@ -1370,7 +1371,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}` : ""}`,
@@ -1404,6 +1405,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);
@@ -1473,6 +1522,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,
@@ -1490,6 +1540,7 @@ function enterStep(d, suite, env, mission, index, opts) {
         ...(page ? { page } : {}),
         ...(section ? { section } : {}),
         ...(flow ? { flow } : {}),
+        pos,
     });
     if (!opts.replay) {
         const cp = checkpointAtOrBefore(steps, i);
@@ -1764,7 +1815,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)
@@ -1914,24 +1965,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 } } };
@@ -1962,7 +2022,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 } } };
@@ -2047,6 +2107,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)),
@@ -2077,6 +2138,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)),
@@ -2096,6 +2158,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,
@@ -2139,6 +2202,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;
@@ -2216,7 +2301,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;
         }
@@ -2259,6 +2344,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)) {
@@ -2653,7 +2747,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": {
@@ -2662,7 +2756,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": {
@@ -2674,7 +2768,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": {
@@ -2723,7 +2817,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": {
@@ -3169,7 +3263,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;
     }
@@ -3836,6 +3933,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 = useRef(null);
     const arrowRef = useRef(null);
     const ringRef = useRef(null);
@@ -3876,8 +3976,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) {
@@ -3898,7 +3998,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;
@@ -3920,7 +4020,7 @@ function StepLayer(p) {
             placement,
             middleware: [
                 offset(placement.startsWith("bottom") ? gap : 14),
-                shift({ padding: m }),
+                shift({ padding: m, rootBoundary: { x: col.x, y: 0, width: col.width, height: window.innerHeight } }),
                 ...(arrowRef.current ? [arrow({ element: arrowRef.current, padding: 14 })] : []),
             ],
         });
@@ -3930,11 +4030,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];
@@ -3950,7 +4050,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];
@@ -3971,7 +4071,7 @@ function StepLayer(p) {
     return (jsxs(Fragment, { 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,
+                    width: phone ? col.width - 32 : col.width < 352 ? col.width - 32 : undefined,
                     visibility: pos ? "visible" : "hidden",
                 }, children: [jsx(BubbleBody, { ...p }), jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxs("div", { className: "eg-loading", children: [jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsx("div", { className: "eg-row", children: jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }) })] })) : null, p.phase === "missing" ? (jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [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" }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), 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" ? (jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxs("div", { className: "eg-b-top", children: [jsx("span", { className: "eg-mis", children: headingOf(p.bubble) }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsx(GuideTitle, { text: p.bubble.title }) }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (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] }));
 }
@@ -4339,6 +4439,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)
@@ -4717,6 +4853,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] = useState({
         spot: null,
         covered: false,
@@ -4725,6 +4862,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         vw: 0,
         vh: 0,
         oy: 0,
+        col: null,
     });
     useEffect(() => {
         if (!inStep) {
@@ -4733,7 +4871,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
@@ -4793,13 +4931,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;
@@ -4954,6 +5094,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)) {
@@ -5073,8 +5250,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);
@@ -5084,7 +5268,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);
@@ -5512,7 +5698,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;
@@ -5521,16 +5711,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 = (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 = (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,
@@ -5713,4 +5903,4 @@ function thaiMonthYear(m, opts = {}) {
 }
 
 export { API_EVENT as A, useGuideEntry as B, usePageGuideEntry as C, usePageGuides as D, useSectionGuideValues as E, GUIDE_EVENT_PREFIX as G, SectionGuideButton as S, THAI_MONTHS_SHORT as T, GUIDE_LAYER_ATTRIBUTE as a, GuideErrorBoundary as b, GuideProgressConflict as c, GuideRuntime as d, apiCallDetail as e, emitGuideEvent as f, fillRoute as g, formatBaht as h, guideAnchor as i, guideMenuItems as j, guideMenuShown as k, loadGuides as l, matchApiPath as m, matchRoute as n, openFlow as o, openFlowsPanel as p, openGuidePanel as q, openPageGuide as r, openPagesPanel as s, openSectionGuide as t, reportApiCall as u, reportApiEvent as v, setSectionGuideValues as w, storeGuides as x, thaiMonth as y, thaiMonthYear as z };
-//# sourceMappingURL=format-BWUKNKxg.esm.js.map
+//# sourceMappingURL=format-ILrTMV4G.esm.js.map