@eintrek/erp-shell 0.1.73 → 0.1.75

package/dist/chunks/{guide-runtime-C7Z00QwM.esm.js → format-DCTuLpBU.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, useEffect, useRef, useState, useLayoutEffect, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { computePosition, offset, shift, arrow } from '@floating-ui/dom';
 
@@ -337,15 +337,54 @@ function publishGuideEntry(next, openPanel) {
         emit();
     }
 }
+const NO_PAGES = { page: null, listed: 0, sections: [] };
+let pages = NO_PAGES;
+let openPageImpl = null;
+let openPagesImpl = null;
+let openSectionImpl = null;
+const sectionsKey = (x) => (x ?? []).map(s => `${s.key}\u0000${s.title}`).join("\u0001");
+/** Called by the host: this page's guide, the listed count, the sections on screen, and how to open them. */
+function publishPageGuides(next, openPage, openPages, openSection = null) {
+    const n = next ?? NO_PAGES;
+    openPageImpl = openPage;
+    openPagesImpl = openPages;
+    openSectionImpl = openSection;
+    const same = n.listed === pages.listed &&
+        (n.page?.title ?? null) === (pages.page?.title ?? null) &&
+        sectionsKey(n.sections) === sectionsKey(pages.sections);
+    if (!same) {
+        const sections = (n.sections ?? []).map(x => ({ key: x.key, title: x.title }));
+        pages =
+            n.page || n.listed || sections.length
+                ? { page: n.page ? { title: n.page.title } : null, listed: n.listed, sections }
+                : NO_PAGES;
+        emit();
+    }
+}
+function guideMenuItems(e, p = NO_PAGES) {
+    const items = [];
+    if (p.page)
+        items.push("page");
+    if ((p.sections ?? []).length > 0)
+        items.push("sections");
+    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 "?" menu offers "ไกด์เริ่มต้น": 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.
+ * 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) {
-    return !!e && e.total > 0;
+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() {
@@ -355,6 +394,413 @@ 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]);
+}
+/**
+ * Opens a section guide ("อธิบายส่วนนี้"), when it is on screen here for this
+ * person. The values it shows are the ones the app last rendered
+ * (`useSectionGuideValues`).
+ */
+function openSectionGuide(key) {
+    openSectionImpl?.(key);
+}
+const sectionValues = new Map();
+const valueListeners = new Set();
+let valuesVersion = 0;
+function valuesSig(v) {
+    try {
+        return JSON.stringify(v);
+    }
+    catch {
+        return String(Math.random());
+    }
+}
+/**
+ * Sets (or with undefined, clears) a section guide's live values. The
+ * engine reads the latest whenever it draws a step, so a page that
+ * re-renders mid-guide never leaves an old number on screen.
+ */
+function setSectionGuideValues(key, values) {
+    const prev = sectionValues.get(key);
+    if (values === undefined) {
+        if (!prev)
+            return;
+        sectionValues.delete(key);
+    }
+    else {
+        const sig = valuesSig(values);
+        if (prev && prev.sig === sig)
+            return;
+        sectionValues.set(key, { values, sig });
+    }
+    valuesVersion++;
+    valueListeners.forEach(l => l());
+}
+/** A section guide's live values now (empty when the app has given none). */
+function getSectionGuideValues(key) {
+    return (key && sectionValues.get(key)?.values) || {};
+}
+/** Re-renders when any section guide's values change (the engine's own use). */
+function useSectionValuesVersion() {
+    return useSyncExternalStore(l => {
+        valueListeners.add(l);
+        return () => {
+            valueListeners.delete(l);
+        };
+    }, () => valuesVersion, () => 0);
+}
+/**
+ * Hands a section guide the numbers its copy uses, from the component that
+ * computes them: `useSectionGuideValues("cash-flow", { month: "ม.ค.", cashIn,
+ * … })`. Call it on every render (the latest wins); they go when the
+ * component unmounts. undefined values: nothing.
+ */
+function useSectionGuideValues(key, values) {
+    const sig = values === undefined ? "" : valuesSig(values);
+    useEffect(() => {
+        if (values !== undefined)
+            setSectionGuideValues(key, values);
+        // sig stands for the values.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [key, sig]);
+    useEffect(() => {
+        if (values === undefined)
+            return;
+        return () => setSectionGuideValues(key, undefined);
+    }, [key, values === undefined]); // eslint-disable-line react-hooks/exhaustive-deps
+}
+
+/** 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));
+}
+/* ------------------------------------------------------------------ */
+/* Section guides ("อธิบายส่วนนี้", shell 0.1.75)                        */
+/* ------------------------------------------------------------------ */
+/** The synthetic mission key of a section guide: `section:<key>`. */
+const SECTION_PREFIX = "section:";
+function isSectionMissionKey(key) {
+    return !!key && key.startsWith(SECTION_PREFIX);
+}
+function sectionKeyOf(missionKey) {
+    return isSectionMissionKey(missionKey) ? missionKey.slice(SECTION_PREFIX.length) : undefined;
+}
+/** Why a section guide cannot run, or null when it can. */
+function sectionProblem(app, section) {
+    if (!section || typeof section.key !== "string" || !PAGE_KEY_RE.test(section.key))
+        return "its key is not [a-z0-9-]";
+    if (`${app}.section.${section.key}`.length > ROW_KEY_MAX)
+        return `its row key is over ${ROW_KEY_MAX} characters`;
+    if (!Number.isInteger(section.version) || section.version < 1)
+        return "its version is not a whole number ≥ 1";
+    const routes = Array.isArray(section.route) ? section.route : [section.route];
+    if (!routes.length || routes.some(r => typeof r !== "string" || !r.startsWith("/")))
+        return "it has no route";
+    if (typeof section.anchor !== "string" || !section.anchor)
+        return "it has no anchor";
+    if (!Array.isArray(section.steps) || section.steps.length === 0)
+        return "it has no steps";
+    for (const st of section.steps) {
+        const kind = st.kind ?? "view";
+        if (kind !== "view")
+            return `step "${st.key}" is a ${kind} step (a section guide only reads)`;
+    }
+    return null;
+}
+const validSectionCache = new WeakMap();
+/** The suite's section guides that can run (as validPages: the rest dropped, with a warning in development). */
+function validSections(suite) {
+    const hit = validSectionCache.get(suite);
+    if (hit)
+        return hit;
+    const out = [];
+    const seen = new Set();
+    for (const section of suite.sections ?? []) {
+        let problem = sectionProblem(suite.app, section);
+        if (!problem && seen.has(section.key))
+            problem = "another section guide has the same key";
+        if (problem) {
+            const id = `${suite.key}:section:${section?.key}:${problem}`;
+            if (!warned.has(id)) {
+                warned.add(id);
+                devWarn(`section guide "${section?.key}" dropped: ${problem}`);
+            }
+            continue;
+        }
+        seen.add(section.key);
+        out.push(section);
+    }
+    validSectionCache.set(suite, out);
+    return out;
+}
+function findSection(suite, key) {
+    return key ? validSections(suite).find(s => s.key === key) : undefined;
+}
+/** A live value is missing: undefined, null, "" or a number that is not finite. */
+function valueMissing(v) {
+    return v === undefined || v === null || v === "" || (typeof v === "number" && !Number.isFinite(v));
+}
+function textOf(t, ctx) {
+    try {
+        return typeof t === "function" ? t(ctx) : t;
+    }
+    catch {
+        return "";
+    }
+}
+const sectionMissionCache = new WeakMap();
+/**
+ * The section guide as a mission the machine plays: `section:<key>`, read
+ * steps only, checkpoints unless they say otherwise. A step is skipped while
+ * a value it `needs` is missing, or when its title comes out empty.
+ */
+function sectionMission(section) {
+    const hit = sectionMissionCache.get(section);
+    if (hit)
+        return hit;
+    const steps = section.steps.map(st => {
+        const { route: _route, resumeUrl: _resume, ...rest } = st;
+        const own = st.skipIf;
+        return {
+            ...rest,
+            kind: "view",
+            checkpoint: st.checkpoint ?? true,
+            skipIf: (ctx) => {
+                const values = ctx.values ?? {};
+                if ((st.needs ?? []).some(k => valueMissing(values[k])))
+                    return true;
+                if (!textOf(st.title, ctx).trim())
+                    return true;
+                return own ? own(ctx) : false;
+            },
+        };
+    });
+    const m = { key: SECTION_PREFIX + section.key, title: section.title, minutes: 1, steps };
+    sectionMissionCache.set(section, m);
+    return m;
+}
+/** Whether the section guide applies here: one of its routes matches and its root is on screen. */
+function sectionApplies(section, where) {
+    const routes = Array.isArray(section.route) ? section.route : [section.route];
+    if (!routes.some(r => !!matchRoute(r, where.pathname, where.search, where.code)))
+        return false;
+    try {
+        return where.isVisible(section.anchor);
+    }
+    catch {
+        return false;
+    }
+}
+/** Whether this person has the section guide: `visible` (only true) and `requires`. */
+function sectionShown(section, ctx) {
+    try {
+        if (section.visible && section.visible(ctx) !== true)
+            return false;
+        if (section.requires && !ctx.can(section.requires))
+            return false;
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** The section guides on screen here that this person has, in the suite's order. */
+function sectionsHere(suite, where, ctx) {
+    return validSections(suite).filter(s => sectionApplies(s, where) && sectionShown(s, ctx));
+}
 
 /* ------------------------------------------------------------------ */
 /* Copy                                                                 */
@@ -368,6 +814,8 @@ const COPY = {
     replayEnded: "จบการทบทวนแล้ว",
     hiddenToast: "ซ่อนแล้ว",
     aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
+    pageDone: "จบคู่มือหน้านี้",
+    sectionDone: "จบคำอธิบายส่วนนี้",
     bridgeTitle: "กดปุ่มเมนู",
     bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
 };
@@ -375,8 +823,15 @@ 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 ?? {},
+        sections: pages?.sections ?? {},
+        pageRun: null,
+        panelSection: "all",
+        autoPassed: null,
         audience,
         progress,
         screen: { name: "idle" },
@@ -390,7 +845,17 @@ 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;
+    }
+    if (isSectionMissionKey(key)) {
+        const section = findSection(suite, sectionKeyOf(key));
+        return section ? sectionMission(section) : undefined;
+    }
+    return suite.missions.find(m => m.key === key);
 }
 /**
  * Whether the user has this mission (GuideMission.visible). Without the
@@ -427,6 +892,7 @@ function guideContext(env, data, params = {}) {
         facts: env.facts,
         can: env.can,
         visible: (anchor) => env.isVisible(anchor),
+        values: env.values ?? {},
     };
 }
 function resolveText(t, ctx) {
@@ -553,8 +1019,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);
 }
@@ -697,7 +1165,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. */
@@ -737,7 +1206,7 @@ function announceStep(d, suite, env) {
     const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
     const title = s.bridge ? COPY.bridgeTitle : plainTitle(resolveText(step.title, ctx));
     const why = s.bridge ? COPY.bridgeWhy(suite.appName) : plainTitle(resolveText(step.why, ctx));
-    const pos = stepPosition(mission, s.index, env, d.state.progress.context);
+    const pos = stepPosition(mission, s.index, env, d.state.progress.context, autoPassedOf(d.state, mission.key));
     d.effects.push({
         type: "announce",
         text: `ขั้นที่ ${pos.no} จาก ${pos.total}. ${title}${why ? `. ${why}` : ""}`,
@@ -748,7 +1217,7 @@ function announceStep(d, suite, env) {
  * whose `requires` they lack or whose `skipIf` holds is left out (the step on
  * screen always counts).
  */
-function stepPosition(mission, index, env, context) {
+function stepPosition(mission, index, env, context, autoPassed = []) {
     let no = 0;
     let total = 0;
     mission.steps.forEach((step, i) => {
@@ -758,6 +1227,12 @@ function stepPosition(mission, index, env, context) {
             const ctx = guideContext(env, context, routeParamsFor(step, env));
             if (step.skipIf && safe(() => step.skipIf(ctx), false))
                 return;
+            // A step that passed by itself (shell ≥ 0.1.75): before this one, as
+            // recorded; after it, one whose outcome already holds now.
+            if (i < index && autoPassed.includes(i))
+                return;
+            if (i > index && wouldAutoPass(step, env))
+                return;
         }
         total++;
         if (i <= index)
@@ -765,6 +1240,17 @@ function stepPosition(mission, index, env, context) {
     });
     return { no: Math.max(no, 1), total: Math.max(total, 1) };
 }
+/** A step entered now would pass at once: a click or select step whose route or visible outcome holds. */
+function wouldAutoPass(step, env) {
+    const kind = stepKind(step);
+    if (step.autoPass === false || kind === "input" || kind === "view")
+        return false;
+    return safe(() => stateTriggerHolds(step, env) !== null, false);
+}
+/** The steps of this mission that passed by themselves in this run. */
+function autoPassedOf(state, mission) {
+    return state.autoPassed?.mission === mission ? state.autoPassed.steps : [];
+}
 /** "กด [บันทึก]" → "กด บันทึก" (for screen readers). */
 function plainTitle(t) {
     return t.replace(/\[([^\]]+)\]/g, "$1");
@@ -777,6 +1263,8 @@ function enterStep(d, suite, env, mission, index, opts) {
     const steps = mission.steps;
     let i = Math.max(0, index);
     let firstPass = true;
+    if (d.state.autoPassed?.mission !== mission.key)
+        d.state = { ...d.state, autoPassed: { mission: mission.key, steps: [] } };
     while (i < steps.length) {
         const step = steps[i];
         const params = routeParamsFor(step, env);
@@ -798,6 +1286,9 @@ function enterStep(d, suite, env, mission, index, opts) {
             const held = stateTriggerHolds(step, env);
             if (held) {
                 captureInto(d, step, held, ctx);
+                const ap = d.state.autoPassed;
+                if (!ap.steps.includes(i))
+                    d.state = { ...d.state, autoPassed: { mission: ap.mission, steps: [...ap.steps, i] } };
                 i++;
                 continue;
             }
@@ -810,8 +1301,11 @@ 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 section = sectionKeyOf(mission.key);
     const where = placeRoute(steps, i);
-    const away = !!where && !matchRoute(where, env.pathname, env.search, env.code);
+    // A page or section guide is on its page: leaving it ends the guide (never "ทำต่อ").
+    const away = !page && !section && !!where && !matchRoute(where, env.pathname, env.search, env.code);
     const bridge = !away && needsBridge(step, env, ctx);
     const nts = !away && !bridge && nothingToSaveHolds(step, env, ctx);
     setScreen(d, {
@@ -828,6 +1322,8 @@ function enterStep(d, suite, env, mission, index, opts) {
         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 } : {}),
+        ...(section ? { section } : {}),
     });
     if (!opts.replay) {
         const cp = checkpointAtOrBefore(steps, i);
@@ -992,6 +1488,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) || isSectionMissionKey(mission.key)) {
+        endPage(d, suite, "completed");
+        d.effects.push({ type: "toast", text: isSectionMissionKey(mission.key) ? COPY.sectionDone : COPY.pageDone });
+        return;
+    }
     if (replay) {
         setScreen(d, { name: "idle" });
         d.effects.push({ type: "toast", text: COPY.replayDone });
@@ -1093,7 +1594,8 @@ function startMission(d, suite, env, key, replay) {
     // A mission already done is only ever replayed; its done status stays.
     const isReplay = replay || entry?.status === "done";
     const before = d.state.progress;
-    d.state = { ...d.state, panelOpen: false, justDone: null };
+    // A new run: what passed by itself is counted afresh.
+    d.state = { ...d.state, panelOpen: false, justDone: null, autoPassed: null };
     if (d.state.progress.welcome === "not_seen")
         withProgress(d, { welcome: "started" });
     if (!isReplay && d.state.progress.mission_key !== key)
@@ -1185,6 +1687,193 @@ 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 section guide's row says this person has ended this version of it. */
+function sectionRecorded(state, section) {
+    const row = state.sections?.[section.key];
+    return !!row && row.version >= section.version;
+}
+/** Write a section guide's row (once per section and version). */
+function recordSection(d, suite, key, status) {
+    const section = findSection(suite, key);
+    if (!section || sectionRecorded(d.state, section))
+        return;
+    const prev = d.state.sections?.[key];
+    d.state = { ...d.state, sections: { ...d.state.sections, [key]: { version: section.version, status, rev: prev?.rev ?? 0 } } };
+    d.effects.push({ type: "savePage", key, version: section.version, status, kind: "section" });
+}
+/** The page or section guide on screen, or null. */
+function readOf(s) {
+    if (s.name !== "step")
+        return null;
+    if (s.page)
+        return { kind: "page", key: s.page };
+    if (s.section)
+        return { kind: "section", key: s.section };
+    return null;
+}
+/** Whether a page or section guide still applies where the person is. */
+function readStillHere(suite, r, env) {
+    if (r.kind === "page")
+        return pageStillHere(suite, r.key, env);
+    const section = findSection(suite, r.key);
+    return !!section && sectionApplies(section, whereOf(env));
+}
+/** The page or section 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) {
+        if (run.kind === "section")
+            recordSection(d, suite, run.key, how);
+        else
+            recordPage(d, suite, run.key, how);
+    }
+    d.state = { ...d.state, pageRun: null, replayPage: null };
+    setScreen(d, { name: "idle" });
+}
+/** The section guides on screen here that this person has (the "?" entries, the buttons). */
+function sectionsAvailable(suite, env) {
+    return sectionsHere(suite, whereOf(env), guideContext(env, {})).map(x => x.key);
+}
+function startSection(d, suite, env, key, write) {
+    const section = findSection(suite, key);
+    if (!section)
+        return;
+    const mission = sectionMission(section);
+    d.state = {
+        ...d.state,
+        panelOpen: false,
+        justDone: null,
+        pageRun: { key, write, kind: "section" },
+        autoPassed: null,
+        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 });
+}
+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, kind: "page" },
+        autoPassed: null,
+        // 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;
@@ -1196,6 +1885,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" });
@@ -1236,6 +1928,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 (readOf(s))
+                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);
@@ -1253,12 +1951,27 @@ function reduceGuide(state, action, suite, env) {
             const stepAt = mission.steps.findIndex(st => st.key === d.state.progress.step_key);
             const cpAt = mission.steps.findIndex(st => st.key === d.state.progress.checkpoint_key);
             const index = stepAt >= 0 ? checkpointAtOrBefore(mission.steps, stepAt) : Math.max(cpAt, 0);
+            d.state = { ...d.state, autoPassed: null };
             enterStep(d, suite, env, mission, index, { replay: false });
             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;
+            const read = readOf(s);
+            if (read && !readStillHere(suite, read, env)) {
+                // Leaving the page (or the section's root going) ends its guide, silently.
+                endPage(d, suite, "skipped");
+                break;
+            }
             const mission = findMission(suite, s.mission);
             if (!mission)
                 break;
@@ -1288,7 +2001,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 ?? s.section)) {
                 // The target is missing because the page is another one.
                 recoverOffRoute(d, suite, env, false);
                 break;
@@ -1404,7 +2117,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 ?? cur.section)) {
                 recoverOffRoute(d, suite, env, false);
                 break;
             }
@@ -1425,7 +2138,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 ?? s.section)) {
                 recoverOffRoute(d, suite, env, false);
                 break;
             }
@@ -1442,7 +2155,10 @@ function reduceGuide(state, action, suite, env) {
                 advance(d, suite, env);
             }
             else if (policy === "abort") {
-                exitMission(d);
+                if (readOf(s))
+                    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) {
@@ -1465,7 +2181,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 ?? s.section)) {
                 // Polling again cannot help on another page: go back to the step's.
                 recoverOffRoute(d, suite, env, true);
                 break;
@@ -1481,6 +2197,12 @@ function reduceGuide(state, action, suite, env) {
         case "exit":
             if (s.name !== "step")
                 break;
+            if (readOf(s)) {
+                // ✕, Escape or ปิดคู่มือ: ends silently.
+                pushAbort(d, suite, s);
+                endPage(d, suite, "skipped");
+                break;
+            }
             if (s.replay) {
                 pushAbort(d, suite, s);
                 setScreen(d, { name: "idle" });
@@ -1549,11 +2271,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;
@@ -1597,6 +2325,78 @@ 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" || !readOf(s) || 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": {
+            if (action.kind === "section") {
+                const cur = d.state.sections?.[action.key];
+                if (cur && cur.version > action.row.version)
+                    break;
+                d.state = { ...d.state, sections: { ...d.state.sections, [action.key]: action.row } };
+                break;
+            }
+            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 "startSection": {
+            // Never offered: only on request. Never over a mission step, a
+            // welcome, a gate or a celebration; only on screen, only theirs.
+            if (state.pageAudience === "none" || state.pagesMode === "off")
+                break;
+            if (s.name !== "idle" && s.name !== "pageOffer")
+                break;
+            if (!sectionsAvailable(suite, env).includes(action.section))
+                break;
+            const section = findSection(suite, action.section);
+            startSection(d, suite, env, section.key, !sectionRecorded(state, section));
+            break;
+        }
         case "idleCelebrate": {
             if (s.name !== "idle" || state.panelOpen)
                 break;
@@ -1720,6 +2520,12 @@ 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);
+    const sections = parsePageRows(rows, suite.app, "section");
     let row = null;
     for (const r of rows) {
         if (isRecord(r) && r.guide_key === suite.key) {
@@ -1740,7 +2546,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, sections };
+}
+/** The row key of a page guide, `<app>.page.<key>`, or a section guide, `<app>.section.<key>`. */
+function pageRowKey(app, key, kind = "page") {
+    return `${app}.${kind}.${key}`;
+}
+/** Page (or section) rows among the list's rows, by key. Off-shape rows are left out. */
+function parsePageRows(rows, app, kind = "page") {
+    const prefix = pageRowKey(app, "", kind);
+    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. */
@@ -1946,6 +2803,48 @@ async function storeGuides(adapter, suite, progress) {
     }
     return null;
 }
+/**
+ * Writes a page guide's row (`<app>.page.<key>`), or a section guide's
+ * (`<app>.section.<key>`, kind "section"), 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, kind = "page") {
+    const guideKey = pageRowKey(app, key, kind);
+    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
@@ -2465,6 +3364,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){
@@ -2478,6 +3383,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)}}
@@ -2575,6 +3481,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) {
@@ -2612,7 +3526,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.status ?? ""}|${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
@@ -2729,13 +3643,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 }) }), 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: 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) {
@@ -2809,6 +3723,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 }) {
@@ -2830,7 +3757,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;
@@ -2891,6 +3823,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 */
@@ -2967,6 +3900,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, kind = "page") => `erp-guide-${kind === "section" ? "sections" : "pages"}:${orgId}:${suite.app}`;
+function readPagesMirror(orgId, suite, kind = "page") {
+    try {
+        const raw = sessionStorage.getItem(pagesMirrorKey(orgId, suite, kind));
+        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, kind = "page") {
+    try {
+        sessionStorage.setItem(pagesMirrorKey(orgId, suite, kind), 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                                                    */
 /* ------------------------------------------------------------------ */
@@ -3054,6 +4022,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 || "/";
@@ -3068,9 +4042,14 @@ 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 || validSections(suite).length > 0, [suite]);
+    const hasSections = useMemo(() => validSections(suite).length > 0, [suite]);
+    const enabled = primary && (missionsReady || (hasPages && pagesReady));
     const loaded = useRef(false);
     useEffect(() => {
         if (!enabled || loaded.current)
@@ -3092,7 +4071,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);
@@ -3100,7 +4083,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;
@@ -3114,16 +4099,26 @@ 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)),
+            sections: mergePageRows(answer.sections ?? {}, readPagesMirror(organizationId, suite, "section")),
+        });
         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 };
     const targetElRef = useRef(null);
+    // The section guide being opened (before its first step is on screen).
+    const openingSection = useRef(null);
     const env = useCallback(() => {
         const pg = pageRef.current;
+        const sc = stateRef.current?.screen;
+        const sectionKey = (sc?.name === "step" ? sc.section : undefined) ?? openingSection.current;
         return {
             code,
             pathname: pg.pathname,
@@ -3141,6 +4136,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             sidebarOpen: pg.sidebarOpen,
             targetValue: () => fieldValue(targetElRef.current),
             dialogOpen: () => appDialogOpen(),
+            values: getSectionGuideValues(sectionKey),
         };
     }, [code]);
     /* ---------------- effects: save, announce, toast, navigate ---------------- */
@@ -3214,6 +4210,19 @@ 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.
+                    const kind = e.kind ?? "page";
+                    const rows = stateRef.current ? (kind === "section" ? stateRef.current.sections : stateRef.current.pages) : undefined;
+                    if (rows)
+                        writePagesMirror(organizationId, suite, rows, kind);
+                    const rev = rows?.[e.key]?.rev ?? 0;
+                    void storePageRow(adapterRef.current, suite.app, e.key, e.version, e.status, rev, kind).then(row => {
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        if (row)
+                            dispatchRef.current({ type: "pageRow", key: e.key, row, kind });
+                    });
+                }
             }
             catch {
                 /* an effect never breaks the app */
@@ -3262,16 +4271,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]);
@@ -3279,7 +4288,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;
@@ -3297,15 +4306,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 || screen.section ? 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 => {
@@ -3330,7 +4343,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")
@@ -3345,6 +4358,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         const step = shownStep(raw, screen.nothingToSave);
         return { mission, step, raw };
     }, [state, screen, suite]);
+    const valuesVersion = useSectionValuesVersion();
     const stepCtx = useMemo(() => {
         if (!state)
             return null;
@@ -3353,7 +4367,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         return guideContext(e, state.progress.context, params);
         // pathname/search/factsKey make it current.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state, stepInfo, env, code, pathname, search, factsKey]);
+    }, [state, stepInfo, env, code, pathname, search, factsKey, valuesVersion]);
     const target = stepInfo && stepCtx && screen.name === "step"
         ? spotlightTarget(stepInfo.step, stepCtx, screen.bridge)
         : null;
@@ -3566,7 +4580,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);
@@ -3843,7 +4857,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" &&
@@ -3851,13 +4865,173 @@ 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) || validSections(suite).length > 0, [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 sectionsNow = useMemo(() => pagesLive && hasState && hasSections
+        ? sectionsAvailable(suite, env()).map(k => ({ key: k, title: findSection(suite, k)?.title ?? "" }))
+        : [], 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pagesLive, hasState, hasSections, suite, env, pathname, search, factsKey, domTick]);
+    const sectionsSig = sectionsNow.map(x => x.key).join(",");
+    const openSection = useCallback((key) => {
+        openingSection.current = key;
+        try {
+            dispatchRef.current({ type: "startSection", section: key });
+        }
+        finally {
+            openingSection.current = null;
+        }
+    }, []);
+    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, sections: sectionsNow }, openPageHere, () => dispatchRef.current({ type: "openPanel", section: "pages" }), openSection);
+        // sectionsSig stands for sectionsNow.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pagesLive, hasState, pageNow, listed.length, openPageHere, sectionsSig, openSection]);
+    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 ---------------- */
@@ -3866,31 +5040,53 @@ 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, autoPassedOf(state, mission.key));
+        const page = screen.page ? findPage(suite, screen.page) : undefined;
+        const section = screen.section ? findSection(suite, screen.section) : undefined;
+        const read = page ? { heading: `คู่มือหน้านี้ · ${page.title}`, exitLabel: "ปิดคู่มือ" } : section ? { heading: `อธิบายส่วนนี้ · ${section.title}`, exitLabel: "ปิดคำอธิบาย" } : null;
+        const pageBits = read
+            ? {
+                ...read,
+                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,
                 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);
@@ -3925,8 +5121,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) {
@@ -3940,5 +5143,101 @@ 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, guideMenuShown as i, matchRoute as j, reportApiEvent as k, loadGuides as l, matchApiPath as m, openGuidePanel as o, reportApiCall as r, storeGuides as s, useGuideEntry as u };
-//# sourceMappingURL=guide-runtime-C7Z00QwM.esm.js.map
+const DEFAULT_STYLE = {
+    display: "inline-grid",
+    placeItems: "center",
+    width: 22,
+    height: 22,
+    padding: 0,
+    border: 0,
+    borderRadius: 999,
+    background: "transparent",
+    color: "inherit",
+    opacity: 0.6,
+    cursor: "pointer",
+    flex: "none",
+};
+function SectionGuideButton({ guideKey, values, className }) {
+    useSectionGuideValues(guideKey, values);
+    const { sections } = usePageGuides();
+    const here = (sections ?? []).find(s => s.key === guideKey);
+    if (!here)
+        return null;
+    return (jsx("button", { type: "button", className: className, style: className ? undefined : DEFAULT_STYLE, "aria-label": `อธิบายส่วนนี้ ${here.title}`, title: "\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49", "data-guide-section-button": guideKey, onClick: e => {
+            // A header that opens or sorts on press must not hear it.
+            e.stopPropagation();
+            e.preventDefault();
+            openSectionGuide(guideKey);
+        }, children: jsxs("svg", { viewBox: "0 0 24 24", width: "16", height: "16", "aria-hidden": "true", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsx("circle", { cx: "12", cy: "12", r: "10" }), jsx("path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }), jsx("path", { d: "M12 17h.01" })] }) }));
+}
+
+/**
+ * Small formatters for section guides' copy (shell 0.1.75): the app passes
+ * its own computed numbers, and the copy says them the way the page does —
+ * "ม.ค. รับ 500,000 − จ่าย 320,000 = คงเหลือ 180,000".
+ *
+ * Pure: the tests run it in Node.
+ */
+const THAI_MONTHS_SHORT = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
+const grouped = new Map();
+function nf(decimals) {
+    let f = grouped.get(decimals);
+    if (!f) {
+        f = new Intl.NumberFormat("en-US", { minimumFractionDigits: decimals, maximumFractionDigits: decimals });
+        grouped.set(decimals, f);
+    }
+    return f;
+}
+/**
+ * A baht amount with thousands separators, no currency sign: 500000 →
+ * "500,000"; 1234.5 → "1,234.50"; -320000 → "-320,000". Whole amounts
+ * have no decimals unless `decimals` says so; others have two. Not a
+ * finite number → "" (a step whose value is missing is skipped anyway).
+ */
+function formatBaht(n, opts = {}) {
+    const v = typeof n === "string" && n.trim() !== "" ? Number(n) : n;
+    if (typeof v !== "number" || !Number.isFinite(v))
+        return "";
+    const rounded = Math.round(v * 100) / 100;
+    const decimals = opts.decimals ?? (Number.isInteger(rounded) ? 0 : 2);
+    const out = nf(decimals).format(rounded);
+    // No "-0".
+    return out === "-0" || /^-0(\.0+)?$/.test(out) ? out.slice(1) : out;
+}
+/** The month's number 1–12 from "2026-01", "2026-01-15", a Date, or 1–12; null when none. */
+function monthOf(m) {
+    if (m instanceof Date)
+        return Number.isNaN(m.getTime()) ? null : { month: m.getMonth() + 1, year: m.getFullYear() };
+    if (typeof m === "number")
+        return Number.isInteger(m) && m >= 1 && m <= 12 ? { month: m } : null;
+    if (typeof m === "string") {
+        const iso = /^(\d{4})-(\d{1,2})(?:-\d{1,2})?/.exec(m.trim());
+        if (iso) {
+            const month = Number(iso[2]);
+            return month >= 1 && month <= 12 ? { month, year: Number(iso[1]) } : null;
+        }
+    }
+    return null;
+}
+/** "2026-01" (or a Date, or 1) → "ม.ค."; "" when it is not a month. */
+function thaiMonth(m) {
+    const x = monthOf(m);
+    return x ? THAI_MONTHS_SHORT[x.month - 1] : "";
+}
+/**
+ * "2026-01" → "ม.ค. 69" (the Buddhist year's last two digits), or with
+ * `{ year: "full" }` "ม.ค. 2569"; just the month when no year is known.
+ */
+function thaiMonthYear(m, opts = {}) {
+    const x = monthOf(m);
+    if (!x)
+        return "";
+    const name = THAI_MONTHS_SHORT[x.month - 1];
+    if (x.year === undefined)
+        return name;
+    const be = x.year + 543;
+    return `${name} ${opts.year === "full" ? be : String(be).slice(-2)}`;
+}
+
+export { API_EVENT as A, usePageGuides as B, useSectionGuideValues as C, GUIDE_EVENT_PREFIX as G, SectionGuideButton as S, THAI_MONTHS_SHORT as T, GUIDE_LAYER_ATTRIBUTE as a, GuideErrorBoundary as b, GuideProgressConflict as c, GuideRuntime as d, apiCallDetail as e, emitGuideEvent as f, fillRoute as g, formatBaht as h, guideAnchor as i, guideMenuItems as j, guideMenuShown as k, loadGuides as l, matchApiPath as m, matchRoute as n, openGuidePanel as o, openPageGuide as p, openPagesPanel as q, openSectionGuide as r, reportApiCall as s, reportApiEvent as t, setSectionGuideValues as u, storeGuides as v, thaiMonth as w, thaiMonthYear as x, useGuideEntry as y, usePageGuideEntry as z };
+//# sourceMappingURL=format-DCTuLpBU.esm.js.map