@eintrek/erp-shell 0.1.72 → 0.1.74

package/dist/chunks/{guide-runtime-DfnNdrjZ.cjs → guide-runtime-YS2nUhwS.cjs}

@@ -357,6 +357,44 @@ function publishGuideEntry(next, openPanel) {
         emit();
     }
 }
+const NO_PAGES = { page: null, listed: 0 };
+let pages = NO_PAGES;
+let openPageImpl = null;
+let openPagesImpl = null;
+/** Called by the host: this page's guide and the listed count, and how to open them. */
+function publishPageGuides(next, openPage, openPages) {
+    const n = next ?? NO_PAGES;
+    openPageImpl = openPage;
+    openPagesImpl = openPages;
+    const same = n.listed === pages.listed && (n.page?.title ?? null) === (pages.page?.title ?? null);
+    if (!same) {
+        pages = n.page || n.listed ? { page: n.page ? { title: n.page.title } : null, listed: n.listed } : NO_PAGES;
+        emit();
+    }
+}
+function guideMenuItems(e, p = NO_PAGES) {
+    const items = [];
+    if (p.page)
+        items.push("page");
+    if (e && e.total > 0)
+        items.push("missions");
+    if (p.listed > 0)
+        items.push("pages");
+    if (items.length)
+        items.push("help");
+    return items;
+}
+/**
+ * Whether the "?" press opens a menu rather than the help dialog: a tour
+ * with missions shown, a guide for this page, or page guides to list. A tour
+ * whose missions are all hidden for this user (`visible`, e.g. Plannex
+ * without an employee record) has nothing to open, and "0/0" led to an
+ * empty panel. The entry itself stays published: apps wait on it before
+ * they load the facts that make missions visible.
+ */
+function guideMenuShown(e, p = NO_PAGES) {
+    return guideMenuItems(e, p).length > 0;
+}
 /** Opens the tour's quest panel, when this user has a tour here. */
 function openGuidePanel() {
     openPanelImpl?.();
@@ -365,6 +403,206 @@ function openGuidePanel() {
 function useGuideEntry() {
     return React.useSyncExternalStore(subscribe, () => entry, () => null);
 }
+/** Opens this page's guide ("คู่มือหน้านี้"), when there is one. */
+function openPageGuide() {
+    openPageImpl?.();
+}
+/** Opens the panel on the page guides alone ("คู่มือทุกหน้า"). */
+function openPagesPanel() {
+    openPagesImpl?.();
+}
+/** Page guides here (this page's, and the listed count); stable until they change. */
+function usePageGuides() {
+    return React.useSyncExternalStore(subscribe, () => pages, () => NO_PAGES);
+}
+/**
+ * This page's guide: `{ title, open }`, or null when the page (or the
+ * sub-screen, `when`) has none for this person. For an app that draws its
+ * own "?" (LIFF's page head): draw it only when this is not null.
+ */
+function usePageGuideEntry() {
+    const p = usePageGuides();
+    const title = p.page?.title ?? null;
+    return React.useMemo(() => (title === null ? null : { title, open: openPageGuide }), [title]);
+}
+
+/** The synthetic mission key of a page guide: `page:<key>`. */
+const PAGE_PREFIX = "page:";
+/** A page guide's key: lower case, digits and hyphens. */
+const PAGE_KEY_RE = /^[a-z0-9][a-z0-9-]*$/;
+/** The server's row key limit (`<app>.page.<key>`). */
+const ROW_KEY_MAX = 64;
+function isPageMissionKey(key) {
+    return !!key && key.startsWith(PAGE_PREFIX);
+}
+function pageKeyOf(missionKey) {
+    return isPageMissionKey(missionKey) ? missionKey.slice(PAGE_PREFIX.length) : undefined;
+}
+function devWarn(message) {
+    try {
+        // Written out in full so the app's bundler replaces it.
+        if (typeof process !== "undefined" && process.env.NODE_ENV === "production")
+            return;
+        if (typeof console !== "undefined")
+            console.warn(`[erp-shell guide] ${message}`);
+    }
+    catch {
+        /* never breaks the app */
+    }
+}
+/** Why a page guide cannot run, or null when it can. */
+function pageProblem(app, page) {
+    if (!page || typeof page.key !== "string" || !PAGE_KEY_RE.test(page.key))
+        return "its key is not [a-z0-9-]";
+    if (`${app}.page.${page.key}`.length > ROW_KEY_MAX)
+        return `its row key is over ${ROW_KEY_MAX} characters`;
+    if (!Number.isInteger(page.version) || page.version < 1)
+        return "its version is not a whole number ≥ 1";
+    const routes = Array.isArray(page.route) ? page.route : [page.route];
+    if (!routes.length || routes.some(r => typeof r !== "string" || !r.startsWith("/")))
+        return "it has no route";
+    if (!Array.isArray(page.steps) || page.steps.length === 0)
+        return "it has no steps";
+    for (const st of page.steps) {
+        const kind = st.kind ?? "click";
+        if (kind !== "view" && kind !== "click")
+            return `step "${st.key}" is a ${kind} step (a page guide never saves)`;
+    }
+    return null;
+}
+const validCache = new WeakMap();
+const warned = new Set();
+/**
+ * The suite's page guides that can run. A page guide with a commit, input or
+ * select step (it would save), a bad key or no route is dropped, with a
+ * warning in development; so is a second one with the same key.
+ */
+function validPages(suite) {
+    const hit = validCache.get(suite);
+    if (hit)
+        return hit;
+    const out = [];
+    const seen = new Set();
+    for (const page of suite.pages ?? []) {
+        let problem = pageProblem(suite.app, page);
+        if (!problem && seen.has(page.key))
+            problem = "another page guide has the same key";
+        if (problem) {
+            const id = `${suite.key}:${page?.key}:${problem}`;
+            if (!warned.has(id)) {
+                warned.add(id);
+                devWarn(`page guide "${page?.key}" dropped: ${problem}`);
+            }
+            continue;
+        }
+        seen.add(page.key);
+        out.push(page);
+    }
+    validCache.set(suite, out);
+    return out;
+}
+function findPage(suite, key) {
+    return key ? validPages(suite).find(p => p.key === key) : undefined;
+}
+const missionCache = new WeakMap();
+/**
+ * The page guide as a mission the machine plays: `page:<key>`. Steps lose
+ * any `route` (the guide is the page's, and ends when it is left) and are
+ * checkpoints unless they say otherwise.
+ */
+function pageMission(page) {
+    const hit = missionCache.get(page);
+    if (hit)
+        return hit;
+    const steps = page.steps.map(st => {
+        const { route: _route, resumeUrl: _resume, ...rest } = st;
+        return { ...rest, checkpoint: st.checkpoint ?? true };
+    });
+    const m = { key: PAGE_PREFIX + page.key, title: page.title, minutes: 1, steps };
+    missionCache.set(page, m);
+    return m;
+}
+function routesOf(page) {
+    return Array.isArray(page.route) ? page.route : [page.route];
+}
+/** How specific a route pattern is: its `?k=v` constraints, then its static segments. */
+function routeSpecificity(pattern) {
+    const q = pattern.indexOf("?");
+    const path = q < 0 ? pattern : pattern.slice(0, q);
+    const query = q < 0 ? 0 : [...new URLSearchParams(pattern.slice(q + 1)).keys()].length;
+    const statics = path.split("/").filter(seg => seg && !/^\[.*\]$/.test(seg) && !seg.startsWith(":")).length;
+    return [query, statics];
+}
+/**
+ * Whether the page guide applies here: one of its routes matches and its
+ * `when` anchor (if any) is on screen. The score ranks matches: `when`
+ * first, then query constraints, then static segments. Null when it does
+ * not apply.
+ */
+function pageMatchScore(page, where) {
+    let best = null;
+    for (const r of routesOf(page)) {
+        if (!matchRoute(r, where.pathname, where.search, where.code))
+            continue;
+        const s = routeSpecificity(r);
+        if (!best || s[0] > best[0] || (s[0] === best[0] && s[1] > best[1]))
+            best = s;
+    }
+    if (!best)
+        return null;
+    if (page.when) {
+        let on = false;
+        try {
+            on = where.isVisible(page.when);
+        }
+        catch {
+            on = false;
+        }
+        if (!on)
+            return null;
+    }
+    return [page.when ? 1 : 0, best[0], best[1]];
+}
+const after = (a, b) => a[0] !== b[0] ? a[0] > b[0] : a[1] !== b[1] ? a[1] > b[1] : a[2] > b[2];
+/** The most specific page guide that applies here, whoever it is for (first in the list on a tie). */
+function matchingPage(suite, where) {
+    let best = null;
+    let bestScore = null;
+    for (const p of validPages(suite)) {
+        const s = pageMatchScore(p, where);
+        if (s && (!bestScore || after(s, bestScore))) {
+            best = p;
+            bestScore = s;
+        }
+    }
+    return best;
+}
+/** Whether this person has the page guide: `visible` (only true) and `requires`. */
+function pageShown(page, ctx) {
+    try {
+        if (page.visible && page.visible(ctx) !== true)
+            return false;
+        if (page.requires && !ctx.can(page.requires))
+            return false;
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * This page's guide for this person: the most specific match, when it is
+ * theirs. A more specific guide they do not have is not replaced by a less
+ * specific one (it would describe what is not on screen).
+ */
+function currentPage(suite, where, ctx) {
+    const p = matchingPage(suite, where);
+    return p && pageShown(p, ctx) ? p : null;
+}
+/** The page guides this person has, for the panel's list (those with an `href`). */
+function listedPages(suite, ctx) {
+    return validPages(suite).filter(p => p.href !== undefined && pageShown(p, ctx));
+}
 
 /* ------------------------------------------------------------------ */
 /* Copy                                                                 */
@@ -378,6 +616,7 @@ const COPY = {
     replayEnded: "จบการทบทวนแล้ว",
     hiddenToast: "ซ่อนแล้ว",
     aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
+    pageDone: "จบคู่มือหน้านี้",
     bridgeTitle: "กดปุ่มเมนู",
     bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
 };
@@ -385,8 +624,13 @@ const COPY = {
 /* Helpers                                                              */
 /* ------------------------------------------------------------------ */
 const BRIDGE_TARGET = "shell.menu-toggle";
-function initialGuideState(audience, progress) {
+function initialGuideState(audience, progress, pages) {
     return {
+        pageAudience: pages?.pageAudience ?? "none",
+        pagesMode: pages?.pagesMode ?? "off",
+        pages: pages?.pages ?? {},
+        pageRun: null,
+        panelSection: "all",
         audience,
         progress,
         screen: { name: "idle" },
@@ -400,7 +644,13 @@ function initialGuideState(audience, progress) {
     };
 }
 function findMission(suite, key) {
-    return key ? suite.missions.find(m => m.key === key) : undefined;
+    if (!key)
+        return undefined;
+    if (isPageMissionKey(key)) {
+        const page = findPage(suite, pageKeyOf(key));
+        return page ? pageMission(page) : undefined;
+    }
+    return suite.missions.find(m => m.key === key);
 }
 /**
  * Whether the user has this mission (GuideMission.visible). Without the
@@ -563,8 +813,10 @@ function placeRoute(steps, index) {
         return step.route;
     return step.checkpoint ? stepHomeRoute(steps, index) : undefined;
 }
-/** The user is not on the page the step happens on. */
-function offRoute(steps, index, env) {
+/** The user is not on the page the step happens on (a page guide's step never is: leaving the page ends it). */
+function offRoute(steps, index, env, page) {
+    if (page)
+        return false;
     const home = stepHomeRoute(steps, index);
     return !!home && !matchRoute(home, env.pathname, env.search, env.code);
 }
@@ -707,7 +959,8 @@ function welcomeDue(state, suite, ctx) {
         state.progress.welcome === "not_seen" &&
         state.progress.status === "in_progress" &&
         !state.progress.mission_key &&
-        state.screen.name === "idle" &&
+        // The missions' welcome always wins over a page guide's offer.
+        (state.screen.name === "idle" || state.screen.name === "pageOffer") &&
         (ctx ? shownMissions(suite, ctx).length : suite.missions.length) > 0);
 }
 /** Whether the floating "ภารกิจ n/N" chip shows. */
@@ -820,9 +1073,12 @@ function enterStep(d, suite, env, mission, index, opts) {
     }
     const step = steps[i];
     const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    const page = pageKeyOf(mission.key);
     const where = placeRoute(steps, i);
-    const away = !!where && !matchRoute(where, env.pathname, env.search, env.code);
+    // A page guide is on its page: leaving it ends the guide (never "ทำต่อ").
+    const away = !page && !!where && !matchRoute(where, env.pathname, env.search, env.code);
     const bridge = !away && needsBridge(step, env, ctx);
+    const nts = !away && !bridge && nothingToSaveHolds(step, env, ctx);
     setScreen(d, {
         name: "step",
         mission: mission.key,
@@ -834,7 +1090,10 @@ function enterStep(d, suite, env, mission, index, opts) {
         confirmExit: false,
         misses: 0,
         armed: hiddenAnchorShown(step, env),
-        nothingToSave: !away && !bridge && nothingToSaveHolds(step, env, ctx),
+        nothingToSave: nts,
+        status: away || bridge ? null : stepStatus(shownStep(step, nts), ctx),
+        replayNext: !away && !bridge && opts.replay && replayCanGoOn(mission, i, env, d.state.progress.context, nts),
+        ...(page ? { page } : {}),
     });
     if (!opts.replay) {
         const cp = checkpointAtOrBefore(steps, i);
@@ -877,6 +1136,54 @@ function setNothingToSave(d, suite, env, on) {
     if (stepTargetVisible(step, env, ctx, s.bridge))
         announceStep(d, suite, env);
 }
+/** The step's status line (GuideStep.status): trimmed text, or null. */
+function stepStatus(step, ctx) {
+    if (!step.status)
+        return null;
+    const text = safe(() => step.status(ctx), undefined);
+    return typeof text === "string" && text.trim() ? text.trim() : null;
+}
+/**
+ * In a replay, whether a "select" step may go on with ถัดไป: the next step
+ * this person sees has its target on the page already (or there is none).
+ * A pick that makes the next step's target (a save shown only once the
+ * right value is chosen) is still needed.
+ */
+function replayCanGoOn(mission, index, env, context, nothingToSave = false) {
+    if (stepKind(shownStep(mission.steps[index], nothingToSave)) !== "select")
+        return false;
+    for (let i = index + 1; i < mission.steps.length; i++) {
+        const next = mission.steps[i];
+        const ctx = guideContext(env, context, routeParamsFor(next, env));
+        if (next.requires && !safe(() => env.can(next.requires), true))
+            continue;
+        if (next.skipIf && safe(() => next.skipIf(ctx), false))
+            continue;
+        if (!next.target)
+            return true;
+        if (stepTargetVisible(next, env, ctx, false))
+            return true;
+        // A commit step with nothing to save is read on its saved state.
+        return nothingToSaveHolds(next, env, ctx);
+    }
+    return true;
+}
+/** Keep the status line and a replay's ถัดไป current (the page changed). */
+function syncStatus(d, suite, env) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = shownStep(mission.steps[s.index], s.nothingToSave);
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    const off = s.phase === "away" || s.bridge;
+    const status = off ? null : stepStatus(step, ctx);
+    const replayNext = !off && s.replay && replayCanGoOn(mission, s.index, env, d.state.progress.context, s.nothingToSave);
+    if (status !== s.status || replayNext !== s.replayNext)
+        setScreen(d, { ...s, status, replayNext });
+}
 function markReadyIfVisible(d, suite, env) {
     const s = d.state.screen;
     if (s.name !== "step" || s.phase !== "waiting")
@@ -951,6 +1258,11 @@ function advance(d, suite, env, capture) {
     enterStep(d, suite, env, mission, s.index + 1, { replay: s.replay });
 }
 function finishMission(d, suite, env, mission, replay) {
+    if (isPageMissionKey(mission.key)) {
+        endPage(d, suite, "completed");
+        d.effects.push({ type: "toast", text: COPY.pageDone });
+        return;
+    }
     if (replay) {
         setScreen(d, { name: "idle" });
         d.effects.push({ type: "toast", text: COPY.replayDone });
@@ -1144,6 +1456,134 @@ function pushAbort(d, suite, s) {
     if (actions.length)
         d.effects.push({ type: "abort", actions });
 }
+/* ------------------------------------------------------------------ */
+/* Page guides                                                          */
+/* ------------------------------------------------------------------ */
+function whereOf(env) {
+    return { code: env.code, pathname: env.pathname, search: env.search, isVisible: a => env.isVisible(a) };
+}
+/** This page's guide for this person (the most specific match, if theirs). */
+function pageHere(suite, env) {
+    return currentPage(suite, whereOf(env), guideContext(env, {}));
+}
+/** The page guide's row says this person has ended this version of it. */
+function pageRecorded(state, page) {
+    const row = state.pages[page.key];
+    return !!row && row.version >= page.version;
+}
+/** Whether the first step this person sees has its target on screen (or none). */
+function firstStepReady(suite, pageKey, env) {
+    const page = findPage(suite, pageKey);
+    if (!page)
+        return false;
+    const mission = pageMission(page);
+    for (const step of mission.steps) {
+        const ctx = guideContext(env, {});
+        if (step.requires && !safe(() => env.can(step.requires), true))
+            continue;
+        if (step.skipIf && safe(() => step.skipIf(ctx), false))
+            continue;
+        return stepTargetVisible(step, env, ctx, false);
+    }
+    return true;
+}
+/**
+ * The page guide to offer now, or null. Due when: pages mode is "offer" and
+ * this person has page guides; nothing else is up (no step, card, panel or
+ * celebration waiting); this page's guide is theirs, may be offered, and has
+ * no row of this version; its first step's target is on screen; no app
+ * dialog is open. The host adds the rest: the welcome not due on this
+ * route, a moment of nothing loading, the primary tab, not hidden.
+ */
+function pageOfferDue(state, suite, env) {
+    if (state.pagesMode !== "offer" || state.pageAudience === "none")
+        return null;
+    if (state.screen.name !== "idle" || state.panelOpen || (state.pendingCelebrate?.length ?? 0) > 0)
+        return null;
+    const page = pageHere(suite, env);
+    if (!page || page.offer === false || pageRecorded(state, page))
+        return null;
+    if (!firstStepReady(suite, page.key, env))
+        return null;
+    if (safe(() => env.dialogOpen?.() === true, false))
+        return null;
+    return page.key;
+}
+/** Whether the page guide still applies where the person is (its route, its `when`). */
+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. */
+function recordPage(d, suite, key, status) {
+    const page = findPage(suite, key);
+    if (!page || pageRecorded(d.state, page))
+        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 page guide ends: its row written when it is due one; back to idle. */
+function endPage(d, suite, how) {
+    const run = d.state.pageRun;
+    if (run?.write)
+        recordPage(d, suite, run.key, how);
+    d.state = { ...d.state, pageRun: null, replayPage: null };
+    setScreen(d, { name: "idle" });
+}
+function startPage(d, suite, env, key, write) {
+    const page = findPage(suite, key);
+    if (!page)
+        return;
+    const mission = pageMission(page);
+    d.state = {
+        ...d.state,
+        panelOpen: false,
+        justDone: null,
+        pageRun: { key, write },
+        // What is open now is the person's: ending the guide leaves it alone.
+        replayPage: {
+            mission: mission.key,
+            anchors: abortAnchorsOf(mission).filter(a => safe(() => env.isVisible(a), false)),
+            dialog: safe(() => env.dialogOpen?.() === true, false),
+        },
+    };
+    enterStep(d, suite, env, mission, 0, { replay: true });
+}
+/** The step before this one that this person sees, or -1. */
+function previousShownIndex(mission, index, env, context) {
+    for (let j = index - 1; j >= 0; 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;
+        return j;
+    }
+    return -1;
+}
+/**
+ * Where ย้อนกลับ goes from a page guide's step, or null. The step before it
+ * that this person sees; from inside what a click opened (not a
+ * checkpoint) back to that click, closing it first (the step's abort,
+ * Escape by default). A click step whose result is still on screen (a tab
+ * switched) is passed over: entering it again would pass it at once.
+ */
+function backTarget(mission, index, env, context) {
+    const cur = mission.steps[index];
+    let prev = previousShownIndex(mission, index, env, context);
+    if (prev < 0 || !cur)
+        return null;
+    if (cur.checkpoint === false) {
+        const to = mission.steps[prev];
+        return { index: prev, close: to.checkpoint !== false };
+    }
+    while (prev >= 0 && stepKind(mission.steps[prev]) !== "view" && stateTriggerHolds(mission.steps[prev], env)) {
+        prev = previousShownIndex(mission, prev, env, context);
+    }
+    return prev >= 0 ? { index: prev, close: false } : null;
+}
 function reduceGuide(state, action, suite, env) {
     const d = { state, effects: [] };
     const s = state.screen;
@@ -1155,6 +1595,9 @@ function reduceGuide(state, action, suite, env) {
             const gate = gateState(suite, ctxNow());
             if (gate === undefined)
                 break;
+            // The welcome wins: the page offer goes, unrecorded (it comes back on a later visit).
+            if (s.name === "pageOffer")
+                setScreen(d, { name: "idle" });
             if (gate === false) {
                 if (!state.gateDismissed)
                     setScreen(d, { name: "gate" });
@@ -1195,6 +1638,12 @@ function reduceGuide(state, action, suite, env) {
         case "start":
             if (state.audience === "none")
                 break;
+            // A mission always wins over a page guide: a running one ends (its row
+            // written if due), an offer goes unrecorded.
+            if (s.name === "step" && s.page)
+                endPage(d, suite, "skipped");
+            else if (s.name === "pageOffer")
+                setScreen(d, { name: "idle" });
             if (s.name === "step" && !s.replay && s.mission !== action.mission) {
                 // Leaving one mission for another: the first is set aside.
                 exitMission(d);
@@ -1216,8 +1665,21 @@ function reduceGuide(state, action, suite, env) {
             break;
         }
         case "sync": {
+            if (s.name === "pageOffer") {
+                // Ignored: the person left the page (or its sub-screen). Recorded.
+                if (!pageStillHere(suite, s.page, env)) {
+                    recordPage(d, suite, s.page, "skipped");
+                    setScreen(d, { name: "idle" });
+                }
+                break;
+            }
             if (s.name !== "step")
                 break;
+            if (s.page && !pageStillHere(suite, s.page, env)) {
+                // Leaving the page ends its guide, silently.
+                endPage(d, suite, "skipped");
+                break;
+            }
             const mission = findMission(suite, s.mission);
             if (!mission)
                 break;
@@ -1247,7 +1709,7 @@ function reduceGuide(state, action, suite, env) {
                     break;
                 }
             }
-            if (!s.bridge && !stepTargetVisible(shownStep(step, s.nothingToSave), env, ctx, false) && offRoute(mission.steps, s.index, env)) {
+            if (!s.bridge && !stepTargetVisible(shownStep(step, s.nothingToSave), env, ctx, false) && offRoute(mission.steps, s.index, env, s.page)) {
                 // The target is missing because the page is another one.
                 recoverOffRoute(d, suite, env, false);
                 break;
@@ -1262,6 +1724,7 @@ function reduceGuide(state, action, suite, env) {
             else if (!cur.bridge && needsBridge(step, env, ctx)) {
                 setScreen(d, { ...cur, bridge: true, phase: "waiting" });
             }
+            syncStatus(d, suite, env);
             markReadyIfVisible(d, suite, env);
             break;
         }
@@ -1324,6 +1787,12 @@ function reduceGuide(state, action, suite, env) {
                 advance(d, suite, env);
                 break;
             }
+            if (kind === "select") {
+                // A replay goes on without a pick when the next step is on the page.
+                if (s.replay && replayCanGoOn(mission, s.index, env, d.state.progress.context, s.nothingToSave))
+                    advance(d, suite, env);
+                break;
+            }
             if (kind !== "input")
                 break;
             const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
@@ -1356,7 +1825,7 @@ function reduceGuide(state, action, suite, env) {
             const cur = d.state.screen;
             if (stepTargetVisible(shownStep(raw, cur.nothingToSave), env, ctx, cur.bridge))
                 break;
-            if (!cur.bridge && offRoute(mission.steps, cur.index, env)) {
+            if (!cur.bridge && offRoute(mission.steps, cur.index, env, cur.page)) {
                 recoverOffRoute(d, suite, env, false);
                 break;
             }
@@ -1377,7 +1846,7 @@ function reduceGuide(state, action, suite, env) {
             if (!mission)
                 break;
             const step = mission.steps[s.index];
-            if (!s.bridge && offRoute(mission.steps, s.index, env)) {
+            if (!s.bridge && offRoute(mission.steps, s.index, env, s.page)) {
                 recoverOffRoute(d, suite, env, false);
                 break;
             }
@@ -1394,7 +1863,10 @@ function reduceGuide(state, action, suite, env) {
                 advance(d, suite, env);
             }
             else if (policy === "abort") {
-                exitMission(d);
+                if (s.page)
+                    endPage(d, suite, "skipped");
+                else
+                    exitMission(d);
                 d.effects.push({ type: "toast", text: COPY.aborted });
             }
             else if ((policy === "rewind" || (policy === "retry" && misses >= 2)) && cp < s.index) {
@@ -1417,7 +1889,7 @@ function reduceGuide(state, action, suite, env) {
             if (s.name !== "step" || s.phase !== "missing")
                 break;
             const mission = findMission(suite, s.mission);
-            if (mission && !s.bridge && offRoute(mission.steps, s.index, env)) {
+            if (mission && !s.bridge && offRoute(mission.steps, s.index, env, s.page)) {
                 // Polling again cannot help on another page: go back to the step's.
                 recoverOffRoute(d, suite, env, true);
                 break;
@@ -1433,6 +1905,12 @@ function reduceGuide(state, action, suite, env) {
         case "exit":
             if (s.name !== "step")
                 break;
+            if (s.page) {
+                // ✕, Escape or ปิดคู่มือ: ends silently.
+                pushAbort(d, suite, s);
+                endPage(d, suite, "skipped");
+                break;
+            }
             if (s.replay) {
                 pushAbort(d, suite, s);
                 setScreen(d, { name: "idle" });
@@ -1501,11 +1979,17 @@ function reduceGuide(state, action, suite, env) {
                 break;
             setScreen(d, { name: "idle" });
             break;
-        case "openPanel":
-            if (state.audience !== "none" && s.name === "idle") {
-                d.state = { ...d.state, panelOpen: true };
-            }
+        case "openPanel": {
+            const section = action.section ?? "all";
+            const allowed = section === "pages" ? state.pageAudience !== "none" : state.audience !== "none" || state.pageAudience !== "none";
+            if (!allowed || (s.name !== "idle" && s.name !== "pageOffer"))
+                break;
+            // The offer gives way to the panel, unrecorded.
+            if (s.name === "pageOffer")
+                setScreen(d, { name: "idle" });
+            d.state = { ...d.state, panelOpen: true, panelSection: section };
             break;
+        }
         case "closePanel":
             d.state = { ...d.state, panelOpen: false, justDone: null };
             break;
@@ -1549,6 +2033,58 @@ function reduceGuide(state, action, suite, env) {
                 passiveDone(d, suite, env, m);
             break;
         }
+        case "pageOffer": {
+            if (pageOfferDue(state, suite, env) !== action.page)
+                break;
+            setScreen(d, { name: "pageOffer", page: action.page });
+            d.effects.push({ type: "announce", text: `คู่มือหน้านี้ ${findPage(suite, action.page)?.title ?? ""}` });
+            break;
+        }
+        case "pageOfferStart":
+            if (s.name !== "pageOffer" || state.pageAudience === "none")
+                break;
+            startPage(d, suite, env, s.page, true);
+            break;
+        case "pageOfferLater":
+            if (s.name !== "pageOffer")
+                break;
+            recordPage(d, suite, s.page, "skipped");
+            setScreen(d, { name: "idle" });
+            break;
+        case "startPage": {
+            // Never over a mission step, a welcome, a gate or a celebration.
+            if (state.pageAudience === "none" || state.pagesMode === "off")
+                break;
+            if (s.name !== "idle" && s.name !== "pageOffer")
+                break;
+            const page = pageHere(suite, env);
+            if (!page || page.key !== action.page)
+                break;
+            startPage(d, suite, env, page.key, !pageRecorded(state, page));
+            break;
+        }
+        case "back": {
+            if (s.name !== "step" || !s.page || s.phase !== "ready" || s.confirmExit)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const to = backTarget(mission, s.index, env, d.state.progress.context);
+            if (!to)
+                break;
+            // Close what the click opened, then show the click again.
+            if (to.close)
+                pushAbort(d, suite, s);
+            enterStep(d, suite, env, mission, to.index, { replay: true, noAutoPass: true });
+            break;
+        }
+        case "pageRow": {
+            const cur = d.state.pages[action.key];
+            if (cur && cur.version > action.row.version)
+                break;
+            d.state = { ...d.state, pages: { ...d.state.pages, [action.key]: action.row } };
+            break;
+        }
         case "idleCelebrate": {
             if (s.name !== "idle" || state.panelOpen)
                 break;
@@ -1672,6 +2208,11 @@ function parseGuidesAnswer(payload, suite) {
     if (typeof data.app === "string" && data.app !== suite.app)
         return null;
     const rows = Array.isArray(data.guides) ? data.guides : [];
+    const pagesMode = data.pages_mode === "menu" || data.pages_mode === "offer" ? data.pages_mode : "off";
+    const pageAudience = pagesMode !== "off" && (data.page_audience === "optional" || data.page_audience === "forced")
+        ? data.page_audience
+        : "none";
+    const pages = parsePageRows(rows, suite.app);
     let row = null;
     for (const r of rows) {
         if (isRecord(r) && r.guide_key === suite.key) {
@@ -1692,7 +2233,58 @@ function parseGuidesAnswer(payload, suite) {
         progress = row;
         newerOnServer = row.guide_version > suite.version;
     }
-    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer };
+    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer, pagesMode, pageAudience, pages };
+}
+/** The row key of a page guide: `<app>.page.<key>`. */
+function pageRowKey(app, key) {
+    return `${app}.page.${key}`;
+}
+/** Page rows among the list's rows, by page key. Off-shape rows are left out. */
+function parsePageRows(rows, app) {
+    const prefix = pageRowKey(app, "");
+    const out = {};
+    for (const r of rows) {
+        if (!isRecord(r) || typeof r.guide_key !== "string" || !r.guide_key.startsWith(prefix))
+            continue;
+        const row = parsePageRow(r);
+        if (row)
+            out[r.guide_key.slice(prefix.length)] = row;
+    }
+    return out;
+}
+/** One page row (a list entry, a PUT answer, a 409's `current`); null when off-shape. */
+function parsePageRow(raw) {
+    if (!isRecord(raw))
+        return null;
+    const version = Number(raw.guide_version);
+    const rev = Number(raw.rev);
+    if (!Number.isInteger(version) || version < 1 || !Number.isInteger(rev) || rev < 0)
+        return null;
+    const status = ROW_STATUSES.includes(raw.status) ? raw.status : "in_progress";
+    return { version, status, rev };
+}
+/**
+ * A page row's PUT body: the least the server takes. Written once per page
+ * and version (finished: completed; not now, exited or left: skipped).
+ */
+function pageBody(app, version, rev, status) {
+    return {
+        app,
+        guide_version: version,
+        rev,
+        status,
+        mission_key: null,
+        step_key: null,
+        step_index: 0,
+        checkpoint_key: null,
+        missions: {},
+        context: {},
+        welcome: "started",
+        chip_hidden: false,
+        last_error: null,
+        skipped_step: null,
+        restart: false,
+    };
 }
 const TERMINAL = ["completed", "skipped", "aborted"];
 /** The PUT body for the client's state. Drops keys the server would refuse. */
@@ -1898,6 +2490,47 @@ async function storeGuides(adapter, suite, progress) {
     }
     return null;
 }
+/**
+ * Writes a page guide's row (`<app>.page.<key>`) once: the minimal body,
+ * with the same 409 handling as the tour's row. Another tab that already
+ * recorded this version wins (its row is returned, nothing is sent again);
+ * an older version's row is replaced with its rev; a newer one stops. Returns
+ * the stored row, or null when it could not be saved.
+ */
+async function storePageRow(adapter, app, key, version, status, rev) {
+    const guideKey = pageRowKey(app, key);
+    let at = rev;
+    for (let attempt = 0; attempt < 2; attempt++) {
+        let res;
+        try {
+            res = await adapter.saveProgress({ app, guideKey, body: pageBody(app, version, at, status) });
+        }
+        catch (err) {
+            const conflict = conflictOf(err);
+            if (!conflict)
+                return null;
+            res = conflict;
+        }
+        if (!res || typeof res.status !== "number")
+            return null;
+        const payload = res.data;
+        if (res.status >= 200 && res.status < 300)
+            return parsePageRow(payload?.data ?? payload);
+        if (res.status !== 409)
+            return null;
+        const current = parsePageRow(payload?.current);
+        if (!current) {
+            at = 0;
+            continue;
+        }
+        if (current.version > version)
+            return null;
+        if (current.version === version && current.status !== "in_progress")
+            return current;
+        at = current.rev;
+    }
+    return null;
+}
 
 /**
  * The tour's DOM side: finding anchors, deciding whether one is really on
@@ -2330,6 +2963,7 @@ const GUIDE_CSS = `
 .eg-b-t{margin:0;font-size:16px;font-weight:600;line-height:1.45}
 .eg-b-w{margin:2px 0 0;font-size:13.5px;color:var(--eg-muted)}
 .eg-bubble.eg-err .eg-b-t{color:var(--eg-danger)}
+.eg-b-s{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--eg-danger)}
 .eg-k{display:inline-block;background:var(--eg-tint);color:var(--eg-strong);border-radius:7px;padding:0 7px;font-weight:600}
 .eg-b-f{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
 .eg-b-f .eg-btn{height:34px;padding:0 14px;font-size:13.5px}
@@ -2416,6 +3050,12 @@ const GUIDE_CSS = `
 .eg-q-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
 .eg-q-acts .eg-link{height:22px;font-size:12px;padding:0 2px}
 .eg-q-f{border-top:1px solid var(--eg-line);padding:8px 12px;display:flex;justify-content:flex-end}
+.eg-q-sub{margin:6px 0 0;padding:12px 18px 2px;border-top:1px solid var(--eg-line);font-size:13px;font-weight:700;color:var(--eg-muted)}
+.eg-pg-item{padding:8px}
+.eg-pg-item .eg-t small.eg-new{color:var(--eg-strong);font-weight:600}
+.eg-card.eg-offer{left:auto;right:22px;transform:none;bottom:var(--erp-guide-bottom-offset,22px);width:min(320px,calc(100vw - 32px))}
+.eg-offer .eg-po-e{margin:0 0 2px;font-size:12px;font-weight:600;color:var(--eg-strong)}
+.eg-offer .eg-row .eg-btn{height:34px;padding:0 14px;font-size:13.5px}
 .eg-toast{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,22px) + 62px);transform:translateX(-50%);background:#1c2634;color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--eg-shadow);max-width:calc(100vw - 32px);pointer-events:none}
 svg.eg-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
 @media (max-width:767px){
@@ -2429,6 +3069,7 @@ svg.eg-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
   .eg-panel{left:0;right:0;bottom:0;width:100%;max-height:85vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}
   .eg-q-item{padding:12px 8px}
   .eg-card{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) - 4px)}
+  .eg-card.eg-offer{left:16px;right:16px;width:auto;bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) - 4px)}
   .eg-toast{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) + 60px)}
 }
 @keyframes eg-up{from{opacity:0;transform:translate(-50%,30px)}}
@@ -2526,6 +3167,14 @@ function pickPlacement(results, bw, bh, anchor, clear, bounds) {
     const best = results.findIndex((r, i) => ok[i] && !clear.some(c => meets(box(r), c)));
     return best >= 0 ? best : ok.indexOf(true);
 }
+/** The way out of a step, as the bubble and the cards say it. */
+function exitLabelOf(b) {
+    return b.exitLabel ?? (b.replay ? "จบการทบทวน" : "ออกจากไกด์");
+}
+/** The bubble's top line. */
+function headingOf(b) {
+    return b.heading ?? `ภารกิจ ${b.missionNo} · ${b.missionTitle}${b.replay ? " (ทบทวน)" : ""}`;
+}
 const BUBBLE_TITLE_ID = "eg-bubble-title";
 const BUBBLE_WHY_ID = "eg-bubble-why";
 function useNudge(nudge, ref) {
@@ -2563,7 +3212,7 @@ function StepLayer(p) {
     const showBubble = p.phase === "ready" && (!!spot || !p.hasTarget);
     const gap = p.showHand ? 34 : 14;
     const spotKey = spot ? `${spot.x}|${spot.y}|${spot.width}|${spot.height}` : "";
-    const contentKey = `${p.bubble.title}|${p.bubble.why}|${p.bubble.error?.title ?? ""}|${p.bubble.showNext}`;
+    const contentKey = `${p.bubble.title}|${p.bubble.why}|${p.bubble.error?.title ?? ""}|${p.bubble.status ?? ""}|${p.bubble.showNext}|${!!p.bubble.showBack}`;
     // 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
@@ -2680,13 +3329,13 @@ function StepLayer(p) {
                     top: pos?.top ?? 0,
                     width: phone ? viewport.width - 32 : undefined,
                     visibility: pos ? "visible" : "hidden",
-                }, children: [jsxRuntime.jsx(BubbleBody, { ...p }), jsxRuntime.jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxRuntime.jsxs("div", { className: "eg-loading", children: [jsxRuntime.jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsxRuntime.jsx("div", { className: "eg-row", children: jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }) })] })) : null, p.phase === "missing" ? (jsxRuntime.jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-missing-t", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onRetry, children: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" })] })] })) : null, p.phase === "away" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", p.bubble.missionNo, " \u00B7 ", p.bubble.missionTitle, p.bubble.replay ? " (ทบทวน)" : ""] }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsxRuntime.jsx(GuideTitle, { text: p.bubble.title }) }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (jsxRuntime.jsx(ConfirmModal, { title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49?", line: 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] }));
+                }, 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] }));
 }
 function BubbleBody(p) {
     const b = p.bubble;
     const title = b.error ? b.error.title : b.title;
     const why = b.error ? (b.error.detail ?? "") : b.why;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", b.missionNo, " \u00B7 ", b.missionTitle, b.replay ? " (ทบทวน)" : ""] }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsxRuntime.jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsxRuntime.jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsxRuntime.jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsxRuntime.jsx(GuideTitle, { text: title }) }), jsxRuntime.jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsxRuntime.jsx(GuideTitle, { text: why }) }), jsxRuntime.jsxs("div", { className: "eg-b-f", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: b.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxRuntime.jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showEndWithoutSave ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onEndWithoutSave, children: "\u0E08\u0E1A\u0E42\u0E14\u0E22\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" })) : null, b.showNext ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: "\u0E16\u0E31\u0E14\u0E44\u0E1B" })) : null] })] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsx("span", { className: "eg-mis", children: headingOf(b) }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsxRuntime.jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsxRuntime.jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsxRuntime.jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsxRuntime.jsx(GuideTitle, { text: title }) }), jsxRuntime.jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsxRuntime.jsx(GuideTitle, { text: why }) }), b.status && !b.error ? (jsxRuntime.jsx("p", { className: "eg-b-s", role: "status", "data-eg-status": "", children: b.status })) : null, jsxRuntime.jsxs("div", { className: "eg-b-f", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(b) }), jsxRuntime.jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showBack ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onBack, children: "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A" })) : null, b.showEndWithoutSave ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onEndWithoutSave, children: "\u0E08\u0E1A\u0E42\u0E14\u0E22\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" })) : null, b.showNext ? (jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: b.nextLabel ?? "ถัดไป" })) : null] })] })] }));
 }
 /** The fingertip at ≈62% across and down the target; upside down near the bottom. */
 function handPosition(spot, viewportHeight) {
@@ -2760,6 +3409,19 @@ function CompleteModal(p) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxRuntime.jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-f-t", "data-eg-modal": "", tabIndex: -1, children: [jsxRuntime.jsx(Confetti, { reduced: p.reduced }), jsxRuntime.jsx("div", { className: "eg-medal", children: jsxRuntime.jsx(IconTrophy, {}) }), jsxRuntime.jsxs("p", { className: "eg-eyebrow", children: ["\u0E04\u0E23\u0E1A ", p.total, " \u0E20\u0E32\u0E23\u0E01\u0E34\u0E08"] }), jsxRuntime.jsx("h2", { id: "eg-f-t", children: p.title }), p.subtitle ? jsxRuntime.jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsxRuntime.jsx("ol", { className: "eg-quests", children: p.missions.map((m, i) => (jsxRuntime.jsxs("li", { className: "eg-ok", children: [jsxRuntime.jsx("span", { className: "eg-n", children: jsxRuntime.jsx(IconCheck, {}) }), jsxRuntime.jsx("span", { className: "eg-t", children: m })] }, i))) }), jsxRuntime.jsxs("div", { className: "eg-actions", children: [jsxRuntime.jsx("button", { type: "button", ref: primary, className: "eg-btn eg-primary", onClick: p.onFinish, children: p.actionLabel }), p.secondary ? (jsxRuntime.jsx("a", { className: "eg-btn eg-ghost", href: p.secondary.href, style: { textDecoration: "none" }, children: p.secondary.label })) : null] })] })] }));
 }
 /* ------------------------------------------------------------------ */
+/* Page guides: the first-visit offer                                   */
+/* ------------------------------------------------------------------ */
+/**
+ * The offer of this page's guide on a first visit: a small card in the
+ * corner, not modal (the page stays usable; focus is not taken). Shell ≥ 0.1.74.
+ */
+function PageOfferCard(p) {
+    return (jsxRuntime.jsxs("section", { className: "eg-card eg-offer", role: "region", "aria-labelledby": "eg-po-t", "data-eg-offer": "", children: [jsxRuntime.jsx("p", { className: "eg-po-e", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49" }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-po-t", children: p.title }), jsxRuntime.jsxs("p", { className: "eg-b-w", children: [p.steps, " \u0E02\u0E31\u0E49\u0E19"] }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onLater, children: "\u0E44\u0E21\u0E48\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onStart, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" })] })] }));
+}
+function PageList({ items, onOpen }) {
+    return (jsxRuntime.jsx("ul", { className: "eg-q-list eg-pg-list", children: items.map(it => (jsxRuntime.jsxs("li", { className: "eg-q-item eg-pg-item", children: [jsxRuntime.jsxs("div", { className: "eg-t", children: [jsxRuntime.jsx("b", { children: it.title }), jsxRuntime.jsx("small", { className: it.seen ? undefined : "eg-new", children: it.seen ? "ดูแล้ว" : "ใหม่" })] }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onOpen(it.key), children: "\u0E40\u0E1B\u0E34\u0E14" })] }, it.key))) }));
+}
+/* ------------------------------------------------------------------ */
 /* Quest chip and panel                                                 */
 /* ------------------------------------------------------------------ */
 function QuestChip({ done, total, pulse, onOpen }) {
@@ -2781,7 +3443,12 @@ function QuestChip({ done, total, pulse, onOpen }) {
 }
 function QuestPanel(p) {
     const ref = useAutoFocus();
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx("div", { className: "eg-prog", children: jsxRuntime.jsx("div", { className: "eg-bar", children: jsxRuntime.jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsxRuntime.jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (jsxRuntime.jsx(QuestRow, { item: it, n: i + 1, just: p.justDone === it.key, gate: p.gate, onStart: p.onStart, onDismiss: p.onDismiss }, it.key))) }), p.canHideChip ? (jsxRuntime.jsx("div", { className: "eg-q-f", children: jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onHideChip, children: "\u0E0B\u0E48\u0E2D\u0E19\u0E1B\u0E38\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08" }) })) : null] })] }));
+    const pages = p.pages ?? [];
+    const openPage = p.onOpenPage ?? (() => { });
+    if (p.showMissions === false) {
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E41\u0E15\u0E48\u0E25\u0E30\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx(PageList, { items: pages, onOpen: openPage })] })] }));
+    }
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx("div", { className: "eg-prog", children: jsxRuntime.jsx("div", { className: "eg-bar", children: jsxRuntime.jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsxRuntime.jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (jsxRuntime.jsx(QuestRow, { item: it, n: i + 1, just: p.justDone === it.key, gate: p.gate, onStart: p.onStart, onDismiss: p.onDismiss }, it.key))) }), pages.length ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h3", { className: "eg-q-sub", id: "eg-q-pages", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E41\u0E15\u0E48\u0E25\u0E30\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsx(PageList, { items: pages, onOpen: openPage })] })) : null, p.canHideChip ? (jsxRuntime.jsx("div", { className: "eg-q-f", children: jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onHideChip, children: "\u0E0B\u0E48\u0E2D\u0E19\u0E1B\u0E38\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08" }) })) : null] })] }));
 }
 function QuestRow({ item, n, just, gate, onStart, onDismiss, }) {
     const v = item.view;
@@ -2842,6 +3509,7 @@ class GuideErrorBoundary extends React__namespace.Component {
             console.warn("[erp-shell guide] hidden after an error", error);
         try {
             publishGuideEntry(null, null);
+            publishPageGuides(null, null, null);
         }
         catch {
             /* ignore */
@@ -2918,6 +3586,41 @@ function writeMirror(orgId, suite, p) {
         /* private mode: the server copy is enough */
     }
 }
+/** Page rows written in this tab, kept for a remount within the GET's cache time. */
+const pagesMirrorKey = (orgId, suite) => `erp-guide-pages:${orgId}:${suite.app}`;
+function readPagesMirror(orgId, suite) {
+    try {
+        const raw = sessionStorage.getItem(pagesMirrorKey(orgId, suite));
+        const parsed = raw ? JSON.parse(raw) : {};
+        const out = {};
+        for (const [k, v] of Object.entries(parsed ?? {})) {
+            if (v && Number.isInteger(v.version) && Number.isInteger(v.rev) && typeof v.status === "string")
+                out[k] = v;
+        }
+        return out;
+    }
+    catch {
+        return {};
+    }
+}
+function writePagesMirror(orgId, suite, pages) {
+    try {
+        sessionStorage.setItem(pagesMirrorKey(orgId, suite), JSON.stringify(pages));
+    }
+    catch {
+        /* private mode */
+    }
+}
+/** The server's page rows, with this tab's newer ones laid over. */
+function mergePageRows(server, local) {
+    const out = { ...server };
+    for (const [k, v] of Object.entries(local)) {
+        const r = out[k];
+        if (!r || v.version > r.version)
+            out[k] = v;
+    }
+    return out;
+}
 /* ------------------------------------------------------------------ */
 /* One tab at a time                                                    */
 /* ------------------------------------------------------------------ */
@@ -3005,6 +3708,12 @@ const SAVE_DEBOUNCE_MS = 600;
 const IDLE_POLL_MS = 100;
 /** A celebration earned outside the tour waits this long of nothing loading. */
 const PASSIVE_IDLE_MS = 600;
+/** A page guide's offer waits this long of nothing loading. */
+const PAGE_OFFER_IDLE_MS = 600;
+/** How often the page guides look at the page while idle (offer due, `when`). */
+const PAGE_POLL_MS = 250;
+/** How long a page opened from the panel's list may take to arrive. */
+const PAGE_ARRIVE_MS = 8000;
 function GuideRuntimeInner({ config, organizationId, code, routing, progress: progressAdapter, isBusy, menu, hidden, bottomOffset }) {
     const suite = config.suite;
     const pathname = routing.pathname || "/";
@@ -3019,9 +3728,13 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     // No menu: never a menu step (the machine sees it as always open).
     const sidebarOpen = menu ? !!menu.open : true;
     const primary = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
-    // Progress: read once this tab runs the tour and the app is ready.
+    // 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);
-    const enabled = primary && config.ready !== false;
+    const missionsReady = config.ready !== false;
+    const pagesReady = config.pagesReady ?? missionsReady;
+    const hasPages = React.useMemo(() => validPages(suite).length > 0, [suite]);
+    const enabled = primary && (missionsReady || (hasPages && pagesReady));
     const loaded = React.useRef(false);
     React.useEffect(() => {
         if (!enabled || loaded.current)
@@ -3043,7 +3756,11 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 loaded.current = false;
         };
     }, [enabled, suite]);
-    const live = !!answer && answer.audience !== "none" && !answer.newerOnServer && primary && config.ready !== false && !hidden;
+    // 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;
+    const live = missionsLive || pagesLive;
     /* ---------------- machine ---------------- */
     const [state, setState] = React.useState(null);
     const stateRef = React.useRef(null);
@@ -3051,7 +3768,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     // is not sent and does not bump its rev.
     const savedKey = React.useRef(null);
     React.useEffect(() => {
-        if (!answer || answer.audience === "none" || answer.newerOnServer) {
+        const missionsOn = !!answer && answer.audience !== "none" && !answer.newerOnServer;
+        const pagesOn = !!answer && hasPages && answer.pageAudience !== "none";
+        if (!answer || (!missionsOn && !pagesOn)) {
             stateRef.current = null;
             setState(null);
             return;
@@ -3065,10 +3784,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         let progress = answer.progress;
         if (mirror && furtherProgress(mirror, progress) === mirror)
             progress = mergeProgress(mirror, progress);
-        const s = initialGuideState(answer.audience, progress);
+        // A tour newer on the server than this build's: the missions stay out.
+        const s = initialGuideState(missionsOn ? answer.audience : "none", progress, {
+            pageAudience: pagesOn ? answer.pageAudience : "none",
+            pagesMode: answer.pagesMode,
+            pages: mergePageRows(answer.pages, readPagesMirror(organizationId, suite)),
+        });
         stateRef.current = s;
         setState(s);
-    }, [answer, organizationId, suite]);
+    }, [answer, organizationId, suite, hasPages]);
     // The latest page facts, read by the machine through env.
     const pageRef = React.useRef({ pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can });
     pageRef.current = { pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can };
@@ -3165,6 +3889,17 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                     // After this render takes the guard away, put the page back.
                     runAbort(e.actions);
                 }
+                else if (e.type === "savePage") {
+                    // Once per page and version; the machine already holds it as written.
+                    if (stateRef.current)
+                        writePagesMirror(organizationId, suite, stateRef.current.pages);
+                    const rev = stateRef.current?.pages[e.key]?.rev ?? 0;
+                    void storePageRow(adapterRef.current, suite.app, e.key, e.version, e.status, rev).then(row => {
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        if (row)
+                            dispatchRef.current({ type: "pageRow", key: e.key, row });
+                    });
+                }
             }
             catch {
                 /* an effect never breaks the app */
@@ -3213,16 +3948,16 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const screen = state?.screen ?? { name: "idle" };
     const resumed = React.useRef(false);
     React.useEffect(() => {
-        if (!live || !state || resumed.current)
+        if (!missionsLive || !state || resumed.current)
             return;
         resumed.current = true;
         dispatch({ type: "resume" });
-    }, [live, state, dispatch]);
+    }, [missionsLive, state, dispatch]);
     const welcomeRoutes = suite.welcomeRoutes ?? ["/[code]"];
     const onWelcomeRoute = welcomeRoutes.some(r => !!matchRoute(r, pathname, search, code));
     const factsKey = useFactsKey(config.facts);
     const welcomeCtx = state ? guideContext(env(), state.progress.context) : null;
-    const welcomeIsDue = !!state && !!welcomeCtx && live && welcomeDue(state, suite, welcomeCtx);
+    const welcomeIsDue = !!state && !!welcomeCtx && missionsLive && welcomeDue(state, suite, welcomeCtx);
     const due = welcomeIsDue && onWelcomeRoute;
     // After a moment of nothing loading (the page has settled).
     useAfterIdle(due, WELCOME_DELAY_MS, busy, () => dispatchRef.current({ type: "welcome" }), [factsKey]);
@@ -3230,7 +3965,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const passiveNames = React.useMemo(() => passiveEventNames(suite), [suite]);
     const hasPassive = React.useMemo(() => suite.missions.some(m => !!m.completeOn), [suite]);
     React.useEffect(() => {
-        if (!live || !hasPassive)
+        if (!missionsLive || !hasPassive)
             return;
         const onApi = (e) => {
             const d = e.detail;
@@ -3248,15 +3983,19 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             window.removeEventListener(API_EVENT, onApi);
             handlers.forEach(([n, h]) => window.removeEventListener(n, h));
         };
-    }, [live, hasPassive, passiveNames]);
+    }, [missionsLive, hasPassive, passiveNames]);
     /* ---------------- sync on route, sidebar, facts, DOM ---------------- */
-    const inStep = live && screen.name === "step";
+    // A page guide's step runs while page guides are live; a mission's while
+    // the missions are. The offer card is watched the same way (left: ignored).
+    const inStep = screen.name === "step" && (screen.page ? pagesLive : missionsLive);
+    const offerUp = pagesLive && screen.name === "pageOffer";
+    const watching = inStep || offerUp;
     React.useEffect(() => {
-        if (inStep)
+        if (watching)
             dispatch({ type: "sync" });
-    }, [inStep, pathname, search, sidebarOpen, factsKey, dispatch]);
+    }, [watching, pathname, search, sidebarOpen, factsKey, dispatch]);
     React.useEffect(() => {
-        if (!inStep || typeof MutationObserver === "undefined")
+        if (!watching || typeof MutationObserver === "undefined")
             return;
         let raf = 0;
         const obs = new MutationObserver(records => {
@@ -3281,7 +4020,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (raf)
                 cancelAnimationFrame(raf);
         };
-    }, [inStep]);
+    }, [watching]);
     /* ---------------- the current step ---------------- */
     const stepInfo = React.useMemo(() => {
         if (!state || screen.name !== "step")
@@ -3517,7 +4256,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         };
     }, [inStep, stepInfo]);
     /* ---------------- the guard ---------------- */
-    const modalScreen = live && (screen.name === "welcome" || screen.name === "gate" || screen.name === "celebrate" || screen.name === "complete");
+    const modalScreen = missionsLive && (screen.name === "welcome" || screen.name === "gate" || screen.name === "celebrate" || screen.name === "complete");
     const panelOpen = live && !!state?.panelOpen;
     const guarding = inStep || modalScreen;
     const guardingRef = React.useRef(guarding);
@@ -3794,7 +4533,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const total = shown.length;
     // A celebration earned outside the tour: at the next idle moment — no
     // step, card or panel up, the welcome not waiting, nothing loading.
-    const passiveDue = live &&
+    const passiveDue = missionsLive &&
         !!state &&
         (state.pendingCelebrate?.length ?? 0) > 0 &&
         screen.name === "idle" &&
@@ -3802,13 +4541,156 @@ 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 (!live || !state) {
+        if (!missionsLive || !state) {
             publishGuideEntry(null, null);
             return;
         }
         publishGuideEntry({ done, total }, () => dispatchRef.current({ type: "openPanel" }));
-    }, [live, state, done, total]);
+    }, [missionsLive, state, done, total]);
     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:
+    // look again when the page changes.
+    const hasWhen = React.useMemo(() => validPages(suite).some(p => !!p.when), [suite]);
+    const [domTick, setDomTick] = React.useState(0);
+    React.useEffect(() => {
+        if (!pagesLive || !hasWhen || typeof MutationObserver === "undefined")
+            return;
+        let t = null;
+        const obs = new MutationObserver(records => {
+            if (records.every(r => inGuideLayer(r.target)))
+                return;
+            if (t)
+                return;
+            t = setTimeout(() => {
+                t = null;
+                setDomTick(n => n + 1);
+            }, PAGE_POLL_MS);
+        });
+        obs.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-state", "hidden", "aria-hidden", "class", "style", "open"],
+        });
+        return () => {
+            obs.disconnect();
+            if (t)
+                clearTimeout(t);
+        };
+    }, [pagesLive, hasWhen]);
+    const hasState = !!state;
+    const pageNow = React.useMemo(() => (pagesLive && 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 openPageHere = React.useCallback(() => {
+        const p = pageHere(suite, env());
+        if (p)
+            dispatchRef.current({ type: "startPage", page: p.key });
+    }, [suite, env]);
+    React.useEffect(() => {
+        if (!pagesLive || !hasState) {
+            publishPageGuides(null, null, null);
+            return;
+        }
+        publishPageGuides({ page: pageNow ? { title: pageNow.title } : null, listed: listed.length }, openPageHere, () => dispatchRef.current({ type: "openPanel", section: "pages" }));
+    }, [pagesLive, hasState, pageNow, listed.length, openPageHere]);
+    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.
+    const offerWatch = pagesLive && !!state && state.pagesMode === "offer" && screen.name === "idle" && !state.panelOpen && !due;
+    React.useEffect(() => {
+        if (!offerWatch)
+            return;
+        let idleSince = null;
+        const iv = setInterval(() => {
+            const cur = stateRef.current;
+            if (!cur)
+                return;
+            let b = false;
+            try {
+                b = busyRef.current();
+            }
+            catch {
+                b = false;
+            }
+            if (b || document.visibilityState === "hidden") {
+                idleSince = null;
+                return;
+            }
+            idleSince ?? (idleSince = Date.now());
+            if (Date.now() - idleSince < PAGE_OFFER_IDLE_MS)
+                return;
+            let key = null;
+            try {
+                key = pageOfferDue(cur, suite, env());
+            }
+            catch {
+                key = null;
+            }
+            if (key)
+                dispatchRef.current({ type: "pageOffer", page: key });
+        }, PAGE_POLL_MS);
+        return () => clearInterval(iv);
+    }, [offerWatch, suite, env, pathname, search]);
+    // A page in the panel's list: start it here, or go there and start it on arrival.
+    const [pending, setPending] = React.useState(null);
+    const openListedPage = React.useCallback((key) => {
+        const page = findPage(suite, key);
+        if (!page)
+            return;
+        const e = env();
+        if (pageHere(suite, e)?.key === key) {
+            dispatchRef.current({ type: "startPage", page: key });
+            return;
+        }
+        dispatchRef.current({ type: "closePanel" });
+        const raw = resolveText(page.href, guideContext(e, {}));
+        const href = raw ? (fillRoute(raw, { code }) ?? raw) : "";
+        if (!href)
+            return;
+        setPending({ key, until: Date.now() + PAGE_ARRIVE_MS });
+        try {
+            if (/^https?:\/\//i.test(href))
+                window.location.assign(href);
+            else
+                navigateRef.current(href);
+        }
+        catch {
+            /* never breaks the app */
+        }
+    }, [suite, env, code]);
+    React.useEffect(() => {
+        if (!pending || !pagesLive)
+            return;
+        const iv = setInterval(() => {
+            if (Date.now() > pending.until) {
+                setPending(null);
+                return;
+            }
+            const cur = stateRef.current;
+            if (!cur || (cur.screen.name !== "idle" && cur.screen.name !== "pageOffer"))
+                return;
+            let b = false;
+            try {
+                b = busyRef.current();
+            }
+            catch {
+                b = false;
+            }
+            if (b)
+                return;
+            const e = env();
+            const page = findPage(suite, pending.key);
+            if (!page || !pageMatchScore(page, { code, pathname: e.pathname, search: e.search, isVisible: a => e.isVisible(a) }))
+                return;
+            setPending(null);
+            dispatchRef.current({ type: "startPage", page: pending.key });
+        }, PAGE_POLL_MS);
+        return () => clearInterval(iv);
+    }, [pending, pagesLive, suite, env, code]);
     if (!live || !state || !layer || !ctxIdle)
         return null;
     /* ---------------- render ---------------- */
@@ -3817,30 +4699,52 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const gateHref = gate ? resolveText(gate.action.href, ctxIdle) : "";
     const gateFailing = gate ? gateState(suite, ctxIdle) === false : false;
     let content = null;
-    if (screen.name === "welcome") {
+    if (!missionsLive && (screen.name === "welcome" || screen.name === "gate" || screen.name === "celebrate" || screen.name === "complete")) {
+        content = null;
+    }
+    else if (screen.name === "welcome") {
         content = (jsxRuntime.jsx(WelcomeModal, { title: resolveText(suite.welcome.title, ctxIdle), subtitle: resolveText(suite.welcome.subtitle, ctxIdle) || `มาตั้งค่าบริษัทให้พร้อมใน ${total} ภารกิจ`, missions: shown.map(m => ({ title: m.title, minutes: m.minutes })), confirm: screen.confirm, reopenHint: suite.reopenHint, onStart: () => dispatch({ type: "welcomeStart" }), onSkip: () => dispatch({ type: "welcomeSkip" }), onSkipConfirm: () => dispatch({ type: "welcomeSkipConfirm" }), onSkipCancel: () => dispatch({ type: "welcomeSkipCancel" }) }));
     }
     else if (screen.name === "gate" && gate) {
         content = (jsxRuntime.jsx(GateModal, { title: gate.title, subtitle: gate.subtitle, actionLabel: gate.action.label, href: gateHref, onLater: () => dispatch({ type: "gateLater" }) }));
     }
-    else if (screen.name === "step" && stepInfo && stepCtx) {
+    else if (screen.name === "step" && inStep && stepInfo && stepCtx) {
         const { mission, step } = stepInfo;
         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);
+        const page = screen.page ? findPage(suite, screen.page) : undefined;
+        const pageBits = page
+            ? {
+                heading: `คู่มือหน้านี้ · ${page.title}`,
+                exitLabel: "ปิดคู่มือ",
+                showBack: kind === "view" && !!backTarget(mission, screen.index, env(), state.progress.context),
+                nextLabel: pos.no >= pos.total ? "เสร็จ" : 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: {
                 missionNo,
                 missionTitle: mission.title,
                 replay: screen.replay,
                 // Steps this person skips (requires / skipIf) are not counted.
-                index: stepPosition(mission, screen.index, env(), state.progress.context).no - 1,
-                total: stepPosition(mission, screen.index, env(), state.progress.context).total,
+                index: pos.no - 1,
+                total: pos.total,
                 title: bridge ? "กดปุ่มเมนู" : resolveText(step.title, stepCtx),
                 why: bridge ? `เมนูทั้งหมดของ ${suite.appName} อยู่ในนี้` : resolveText(step.why, stepCtx),
                 error: screen.error,
-                showNext: !bridge && (kind === "input" || kind === "view"),
+                status: bridge ? null : screen.status,
+                showNext: !bridge && (kind === "input" || kind === "view" || (kind === "select" && screen.replay && screen.replayNext)),
                 showEndWithoutSave: !bridge && screen.replay && kind === "commit",
-            }, hasTarget: bridge || !!step.target, targetPressable: targetPressable(step, bridge), phase: screen.phase, confirmExit: screen.confirmExit, reopenHint: suite.reopenHint, nudge: state.nudge, moving: moving, onExit: () => dispatch({ type: "exit" }), onNext: () => dispatch({ type: "next" }), onEndWithoutSave: () => dispatch({ type: "endWithoutSave" }), onRetry: () => dispatch({ type: "retry" }), onGoResume: () => dispatch({ type: "goResume" }), onExitConfirm: () => dispatch({ type: "exitConfirm" }), onExitCancel: () => dispatch({ type: "exitCancel" }) }));
+                ...pageBits,
+            }, hasTarget: bridge || !!step.target, targetPressable: targetPressable(step, bridge), phase: screen.phase, confirmExit: screen.confirmExit, reopenHint: suite.reopenHint, nudge: state.nudge, moving: moving, onExit: () => dispatch({ type: "exit" }), onNext: () => dispatch({ type: "next" }), onBack: () => dispatch({ type: "back" }), onEndWithoutSave: () => dispatch({ type: "endWithoutSave" }), onRetry: () => dispatch({ type: "retry" }), onGoResume: () => dispatch({ type: "goResume" }), onExitConfirm: () => dispatch({ type: "exitConfirm" }), onExitCancel: () => dispatch({ type: "exitCancel" }) }));
+    }
+    else if (screen.name === "pageOffer" && pagesLive) {
+        const page = findPage(suite, screen.page);
+        if (page) {
+            const mission = findMission(suite, PAGE_PREFIX + page.key);
+            content = (jsxRuntime.jsx(PageOfferCard, { title: page.title, steps: mission ? stepPosition(mission, 0, env(), {}).total : page.steps.length, onStart: () => dispatch({ type: "pageOfferStart" }), onLater: () => dispatch({ type: "pageOfferLater" }) }));
+        }
     }
     else if (screen.name === "celebrate" && celebrateShown) {
         const mission = findMission(suite, screen.mission);
@@ -3875,8 +4779,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 .join(", ")
             : undefined,
     }));
-    const showChip = chipVisible(state, suite, ctxIdle);
-    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: GUIDE_CSS }), jsxRuntime.jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsxRuntime.jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, state.panelOpen && screen.name === "idle" ? (jsxRuntime.jsx(QuestPanel, { items: items, done: done, total: total, justDone: state.justDone, gate: gate && gateFailing ? { label: gate.action.label, pending: gate.pending, href: gateHref } : null, canHideChip: !state.progress.chip_hidden && state.progress.status !== "completed", onClose: () => dispatch({ type: "closePanel" }), onStart: (key, replayIt) => dispatch({ type: "start", mission: key, replay: replayIt }), onDismiss: key => dispatch({ type: "dismissMission", mission: key }), onHideChip: () => dispatch({ type: "hideChip" }) })) : null, toast ? jsxRuntime.jsx(GuideToast, { text: toast }) : null] }), layer);
+    const showChip = missionsLive && chipVisible(state, suite, ctxIdle);
+    // The panel: the missions (when this person has them, and not "คู่มือทุกหน้า"),
+    // then the page guides they have.
+    const panelMissions = missionsLive && total > 0 && state.panelSection !== "pages";
+    const pageItems = pagesLive
+        ? listed.map(p => ({ key: p.key, title: p.title, seen: pageRecorded(state, p) }))
+        : [];
+    const panelShown = state.panelOpen && screen.name === "idle" && (panelMissions || pageItems.length > 0);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: GUIDE_CSS }), jsxRuntime.jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsxRuntime.jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, panelShown ? (jsxRuntime.jsx(QuestPanel, { items: items, done: done, total: total, justDone: state.justDone, gate: gate && gateFailing ? { label: gate.action.label, pending: gate.pending, href: gateHref } : null, canHideChip: !state.progress.chip_hidden && state.progress.status !== "completed", onClose: () => dispatch({ type: "closePanel" }), onStart: (key, replayIt) => dispatch({ type: "start", mission: key, replay: replayIt }), onDismiss: key => dispatch({ type: "dismissMission", mission: key }), onHideChip: () => dispatch({ type: "hideChip" }), pages: pageItems, showMissions: panelMissions, onOpenPage: openListedPage })) : null, toast ? jsxRuntime.jsx(GuideToast, { text: toast }) : null] }), layer);
 }
 /** A stable key for the facts object, so effects re-run when they change. */
 function useFactsKey(facts) {
@@ -3900,12 +4811,18 @@ exports.apiCallDetail = apiCallDetail;
 exports.emitGuideEvent = emitGuideEvent;
 exports.fillRoute = fillRoute;
 exports.guideAnchor = guideAnchor;
+exports.guideMenuItems = guideMenuItems;
+exports.guideMenuShown = guideMenuShown;
 exports.loadGuides = loadGuides;
 exports.matchApiPath = matchApiPath;
 exports.matchRoute = matchRoute;
 exports.openGuidePanel = openGuidePanel;
+exports.openPageGuide = openPageGuide;
+exports.openPagesPanel = openPagesPanel;
 exports.reportApiCall = reportApiCall;
 exports.reportApiEvent = reportApiEvent;
 exports.storeGuides = storeGuides;
 exports.useGuideEntry = useGuideEntry;
-//# sourceMappingURL=guide-runtime-DfnNdrjZ.cjs.map
+exports.usePageGuideEntry = usePageGuideEntry;
+exports.usePageGuides = usePageGuides;
+//# sourceMappingURL=guide-runtime-YS2nUhwS.cjs.map