@eintrek/erp-shell 0.1.72 → 0.1.74

package/dist/chunks/{guide-runtime-B-3myqxe.esm.js → guide-runtime-Dl8V1iy9.esm.js}

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useSyncExternalStore, useRef, useState, useEffect, useLayoutEffect, useCallback, useMemo } from 'react';
+import { useSyncExternalStore, useMemo, useRef, useState, useEffect, useLayoutEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { computePosition, offset, shift, arrow } from '@floating-ui/dom';
 
@@ -337,6 +337,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?.();
@@ -345,6 +383,206 @@ function openGuidePanel() {
 function useGuideEntry() {
     return 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 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 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                                                                 */
@@ -358,6 +596,7 @@ const COPY = {
     replayEnded: "จบการทบทวนแล้ว",
     hiddenToast: "ซ่อนแล้ว",
     aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
+    pageDone: "จบคู่มือหน้านี้",
     bridgeTitle: "กดปุ่มเมนู",
     bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
 };
@@ -365,8 +604,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" },
@@ -380,7 +624,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
@@ -543,8 +793,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);
 }
@@ -687,7 +939,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. */
@@ -800,9 +1053,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,
@@ -814,7 +1070,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);
@@ -857,6 +1116,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")
@@ -931,6 +1238,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 });
@@ -1124,6 +1436,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;
@@ -1135,6 +1575,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" });
@@ -1175,6 +1618,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);
@@ -1196,8 +1645,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;
@@ -1227,7 +1689,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;
@@ -1242,6 +1704,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;
         }
@@ -1304,6 +1767,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));
@@ -1336,7 +1805,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;
             }
@@ -1357,7 +1826,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;
             }
@@ -1374,7 +1843,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) {
@@ -1397,7 +1869,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;
@@ -1413,6 +1885,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" });
@@ -1481,11 +1959,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;
@@ -1529,6 +2013,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;
@@ -1652,6 +2188,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) {
@@ -1672,7 +2213,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. */
@@ -1878,6 +2470,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
@@ -2310,6 +2943,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}
@@ -2396,6 +3030,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){
@@ -2409,6 +3049,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)}}
@@ -2506,6 +3147,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) {
@@ -2543,7 +3192,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
@@ -2660,13 +3309,13 @@ function StepLayer(p) {
                     top: pos?.top ?? 0,
                     width: phone ? viewport.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: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }) })] })) : 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: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), 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: [jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", p.bubble.missionNo, " \u00B7 ", p.bubble.missionTitle, p.bubble.replay ? " (ทบทวน)" : ""] }), 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: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), 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] }));
+                }, 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] }));
 }
 function BubbleBody(p) {
     const b = p.bubble;
     const title = b.error ? b.error.title : b.title;
     const why = b.error ? (b.error.detail ?? "") : b.why;
-    return (jsxs(Fragment, { children: [jsxs("div", { className: "eg-b-top", children: [jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", b.missionNo, " \u00B7 ", b.missionTitle, b.replay ? " (ทบทวน)" : ""] }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsx(GuideTitle, { text: title }) }), jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsx(GuideTitle, { text: why }) }), jsxs("div", { className: "eg-b-f", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: b.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showEndWithoutSave ? (jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onEndWithoutSave, children: "\u0E08\u0E1A\u0E42\u0E14\u0E22\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" })) : null, b.showNext ? (jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: "\u0E16\u0E31\u0E14\u0E44\u0E1B" })) : null] })] })] }));
+    return (jsxs(Fragment, { children: [jsxs("div", { className: "eg-b-top", children: [jsx("span", { className: "eg-mis", children: headingOf(b) }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsx(GuideTitle, { text: title }) }), jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsx(GuideTitle, { text: why }) }), b.status && !b.error ? (jsx("p", { className: "eg-b-s", role: "status", "data-eg-status": "", children: b.status })) : null, jsxs("div", { className: "eg-b-f", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(b) }), jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showBack ? (jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onBack, children: "\u0E22\u0E49\u0E2D\u0E19\u0E01\u0E25\u0E31\u0E1A" })) : null, b.showEndWithoutSave ? (jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onEndWithoutSave, children: "\u0E08\u0E1A\u0E42\u0E14\u0E22\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" })) : null, b.showNext ? (jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: b.nextLabel ?? "ถัดไป" })) : null] })] })] }));
 }
 /** The fingertip at ≈62% across and down the target; upside down near the bottom. */
 function handPosition(spot, viewportHeight) {
@@ -2740,6 +3389,19 @@ function CompleteModal(p) {
     return (jsxs(Fragment, { children: [jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-f-t", "data-eg-modal": "", tabIndex: -1, children: [jsx(Confetti, { reduced: p.reduced }), jsx("div", { className: "eg-medal", children: jsx(IconTrophy, {}) }), jsxs("p", { className: "eg-eyebrow", children: ["\u0E04\u0E23\u0E1A ", p.total, " \u0E20\u0E32\u0E23\u0E01\u0E34\u0E08"] }), jsx("h2", { id: "eg-f-t", children: p.title }), p.subtitle ? jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsx("ol", { className: "eg-quests", children: p.missions.map((m, i) => (jsxs("li", { className: "eg-ok", children: [jsx("span", { className: "eg-n", children: jsx(IconCheck, {}) }), jsx("span", { className: "eg-t", children: m })] }, i))) }), jsxs("div", { className: "eg-actions", children: [jsx("button", { type: "button", ref: primary, className: "eg-btn eg-primary", onClick: p.onFinish, children: p.actionLabel }), p.secondary ? (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 (jsxs("section", { className: "eg-card eg-offer", role: "region", "aria-labelledby": "eg-po-t", "data-eg-offer": "", children: [jsx("p", { className: "eg-po-e", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49" }), jsx("p", { className: "eg-b-t", id: "eg-po-t", children: p.title }), jsxs("p", { className: "eg-b-w", children: [p.steps, " \u0E02\u0E31\u0E49\u0E19"] }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onLater, children: "\u0E44\u0E21\u0E48\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49" }), jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onStart, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" })] })] }));
+}
+function PageList({ items, onOpen }) {
+    return (jsx("ul", { className: "eg-q-list eg-pg-list", children: items.map(it => (jsxs("li", { className: "eg-q-item eg-pg-item", children: [jsxs("div", { className: "eg-t", children: [jsx("b", { children: it.title }), jsx("small", { className: it.seen ? undefined : "eg-new", children: it.seen ? "ดูแล้ว" : "ใหม่" })] }), 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 }) {
@@ -2761,7 +3423,12 @@ function QuestChip({ done, total, pulse, onOpen }) {
 }
 function QuestPanel(p) {
     const ref = useAutoFocus();
-    return (jsxs(Fragment, { children: [jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxs("div", { className: "eg-q-h", children: [jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsx(IconX, {}) })] }), jsx("div", { className: "eg-prog", children: jsx("div", { className: "eg-bar", children: jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (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 ? (jsx("div", { className: "eg-q-f", children: 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 (jsxs(Fragment, { children: [jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxs("div", { className: "eg-q-h", children: [jsx("h2", { id: "eg-q-t", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E41\u0E15\u0E48\u0E25\u0E30\u0E2B\u0E19\u0E49\u0E32" }), jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsx(IconX, {}) })] }), jsx(PageList, { items: pages, onOpen: openPage })] })] }));
+    }
+    return (jsxs(Fragment, { children: [jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxs("div", { className: "eg-q-h", children: [jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsx(IconX, {}) })] }), jsx("div", { className: "eg-prog", children: jsx("div", { className: "eg-bar", children: jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (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 ? (jsxs(Fragment, { children: [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" }), jsx(PageList, { items: pages, onOpen: openPage })] })) : null, p.canHideChip ? (jsx("div", { className: "eg-q-f", children: 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;
@@ -2822,6 +3489,7 @@ class GuideErrorBoundary extends React.Component {
             console.warn("[erp-shell guide] hidden after an error", error);
         try {
             publishGuideEntry(null, null);
+            publishPageGuides(null, null, null);
         }
         catch {
             /* ignore */
@@ -2898,6 +3566,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                                                    */
 /* ------------------------------------------------------------------ */
@@ -2985,6 +3688,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 || "/";
@@ -2999,9 +3708,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] = useState(null);
-    const enabled = primary && config.ready !== false;
+    const missionsReady = config.ready !== false;
+    const pagesReady = config.pagesReady ?? missionsReady;
+    const hasPages = useMemo(() => validPages(suite).length > 0, [suite]);
+    const enabled = primary && (missionsReady || (hasPages && pagesReady));
     const loaded = useRef(false);
     useEffect(() => {
         if (!enabled || loaded.current)
@@ -3023,7 +3736,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] = useState(null);
     const stateRef = useRef(null);
@@ -3031,7 +3748,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     // is not sent and does not bump its rev.
     const savedKey = useRef(null);
     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;
@@ -3045,10 +3764,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 = useRef({ pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can });
     pageRef.current = { pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can };
@@ -3145,6 +3869,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 */
@@ -3193,16 +3928,16 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const screen = state?.screen ?? { name: "idle" };
     const resumed = useRef(false);
     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]);
@@ -3210,7 +3945,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const passiveNames = useMemo(() => passiveEventNames(suite), [suite]);
     const hasPassive = useMemo(() => suite.missions.some(m => !!m.completeOn), [suite]);
     useEffect(() => {
-        if (!live || !hasPassive)
+        if (!missionsLive || !hasPassive)
             return;
         const onApi = (e) => {
             const d = e.detail;
@@ -3228,15 +3963,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;
     useEffect(() => {
-        if (inStep)
+        if (watching)
             dispatch({ type: "sync" });
-    }, [inStep, pathname, search, sidebarOpen, factsKey, dispatch]);
+    }, [watching, pathname, search, sidebarOpen, factsKey, dispatch]);
     useEffect(() => {
-        if (!inStep || typeof MutationObserver === "undefined")
+        if (!watching || typeof MutationObserver === "undefined")
             return;
         let raf = 0;
         const obs = new MutationObserver(records => {
@@ -3261,7 +4000,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (raf)
                 cancelAnimationFrame(raf);
         };
-    }, [inStep]);
+    }, [watching]);
     /* ---------------- the current step ---------------- */
     const stepInfo = useMemo(() => {
         if (!state || screen.name !== "step")
@@ -3497,7 +4236,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 = useRef(guarding);
@@ -3774,7 +4513,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" &&
@@ -3782,13 +4521,156 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         !due;
     useAfterIdle(passiveDue, PASSIVE_IDLE_MS, busy, () => dispatchRef.current({ type: "idleCelebrate" }), [state?.pendingCelebrate?.join(",")]);
     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]);
     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 = useMemo(() => validPages(suite).some(p => !!p.when), [suite]);
+    const [domTick, setDomTick] = useState(0);
+    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 = 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 = useMemo(() => (pagesLive && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesLive, suite, ctxIdle]);
+    const openPageHere = useCallback(() => {
+        const p = pageHere(suite, env());
+        if (p)
+            dispatchRef.current({ type: "startPage", page: p.key });
+    }, [suite, env]);
+    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]);
+    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;
+    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] = useState(null);
+    const openListedPage = 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]);
+    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 ---------------- */
@@ -3797,30 +4679,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 = (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 = (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 = (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 = (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);
@@ -3855,8 +4759,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 .join(", ")
             : undefined,
     }));
-    const showChip = chipVisible(state, suite, ctxIdle);
-    return createPortal(jsxs(Fragment, { children: [jsx("style", { children: GUIDE_CSS }), jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, state.panelOpen && screen.name === "idle" ? (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 ? 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 createPortal(jsxs(Fragment, { children: [jsx("style", { children: GUIDE_CSS }), jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, panelShown ? (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 ? jsx(GuideToast, { text: toast }) : null] }), layer);
 }
 /** A stable key for the facts object, so effects re-run when they change. */
 function useFactsKey(facts) {
@@ -3870,5 +4781,5 @@ function useFactsKey(facts) {
     }, [facts]);
 }
 
-export { API_EVENT as A, GUIDE_EVENT_PREFIX as G, GUIDE_LAYER_ATTRIBUTE as a, GuideErrorBoundary as b, GuideProgressConflict as c, GuideRuntime as d, apiCallDetail as e, emitGuideEvent as f, fillRoute as g, guideAnchor as h, matchRoute as i, reportApiEvent as j, loadGuides as l, matchApiPath as m, openGuidePanel as o, reportApiCall as r, storeGuides as s, useGuideEntry as u };
-//# sourceMappingURL=guide-runtime-B-3myqxe.esm.js.map
+export { API_EVENT as A, GUIDE_EVENT_PREFIX as G, GUIDE_LAYER_ATTRIBUTE as a, GuideErrorBoundary as b, GuideProgressConflict as c, GuideRuntime as d, apiCallDetail as e, emitGuideEvent as f, fillRoute as g, guideAnchor as h, guideMenuItems as i, guideMenuShown as j, matchRoute as k, loadGuides as l, matchApiPath as m, openPageGuide as n, openGuidePanel as o, openPagesPanel as p, reportApiEvent as q, reportApiCall as r, storeGuides as s, usePageGuideEntry as t, useGuideEntry as u, usePageGuides as v };
+//# sourceMappingURL=guide-runtime-Dl8V1iy9.esm.js.map