@eintrek/erp-shell 0.1.74 → 0.1.76

package/dist/chunks/{guide-runtime-Dl8V1iy9.esm.js → format-BWUKNKxg.esm.js}

@@ -1,7 +1,7 @@
 'use client';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
-import { useSyncExternalStore, useMemo, useRef, useState, useEffect, useLayoutEffect, useCallback } 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,18 +337,35 @@ function publishGuideEntry(next, openPanel) {
         emit();
     }
 }
-const NO_PAGES = { page: null, listed: 0 };
+const NO_PAGES = { page: null, listed: 0, sections: [], flows: [], flowsListed: 0 };
 let pages = NO_PAGES;
 let openPageImpl = null;
 let openPagesImpl = null;
-/** Called by the host: this page's guide and the listed count, and how to open them. */
-function publishPageGuides(next, openPage, openPages) {
+let openSectionImpl = null;
+let openFlowImpl = null;
+let openFlowsImpl = 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, openFlow = null, openFlows = null) {
     const n = next ?? NO_PAGES;
     openPageImpl = openPage;
     openPagesImpl = openPages;
-    const same = n.listed === pages.listed && (n.page?.title ?? null) === (pages.page?.title ?? null);
+    openSectionImpl = openSection;
+    openFlowImpl = openFlow;
+    openFlowsImpl = openFlows;
+    const same = n.listed === pages.listed &&
+        (n.flowsListed ?? 0) === (pages.flowsListed ?? 0) &&
+        (n.page?.title ?? null) === (pages.page?.title ?? null) &&
+        sectionsKey(n.sections) === sectionsKey(pages.sections) &&
+        sectionsKey(n.flows) === sectionsKey(pages.flows);
     if (!same) {
-        pages = n.page || n.listed ? { page: n.page ? { title: n.page.title } : null, listed: n.listed } : NO_PAGES;
+        const sections = (n.sections ?? []).map(x => ({ key: x.key, title: x.title }));
+        const flows = (n.flows ?? []).map(x => ({ key: x.key, title: x.title }));
+        const flowsListed = n.flowsListed ?? 0;
+        pages =
+            n.page || n.listed || sections.length || flows.length || flowsListed
+                ? { page: n.page ? { title: n.page.title } : null, listed: n.listed, sections, flows, flowsListed }
+                : NO_PAGES;
         emit();
     }
 }
@@ -356,10 +373,16 @@ function guideMenuItems(e, p = NO_PAGES) {
     const items = [];
     if (p.page)
         items.push("page");
+    if ((p.sections ?? []).length > 0)
+        items.push("sections");
+    if ((p.flows ?? []).length > 0)
+        items.push("flowsHere");
     if (e && e.total > 0)
         items.push("missions");
     if (p.listed > 0)
         items.push("pages");
+    if ((p.flowsListed ?? 0) > 0)
+        items.push("flows");
     if (items.length)
         items.push("help");
     return items;
@@ -405,6 +428,87 @@ function usePageGuideEntry() {
     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);
+}
+/** Starts a flow that starts on this page ("พาทำ · <title>"). */
+function openFlow(key) {
+    openFlowImpl?.(key);
+}
+/** Opens the panel on the flows alone ("พาทำงาน"). */
+function openFlowsPanel() {
+    openFlowsImpl?.();
+}
+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:";
@@ -583,6 +687,278 @@ function currentPage(suite, where, ctx) {
 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));
+}
+/* ------------------------------------------------------------------ */
+/* Workflow guides ("พาทำงาน", shell 0.1.76)                             */
+/* ------------------------------------------------------------------ */
+/** The synthetic mission key of a flow: `flow:<key>`. */
+const FLOW_PREFIX = "flow:";
+function isFlowMissionKey(key) {
+    return !!key && key.startsWith(FLOW_PREFIX);
+}
+function flowKeyOf(missionKey) {
+    return isFlowMissionKey(missionKey) ? missionKey.slice(FLOW_PREFIX.length) : undefined;
+}
+const asList = (r) => (r === undefined ? [] : Array.isArray(r) ? r : [r]);
+/** Why a flow cannot run, or null when it can. */
+function flowProblem(app, flow) {
+    if (!flow || typeof flow.key !== "string" || !PAGE_KEY_RE.test(flow.key))
+        return "its key is not [a-z0-9-]";
+    if (`${app}.flow.${flow.key}`.length > ROW_KEY_MAX)
+        return `its row key is over ${ROW_KEY_MAX} characters`;
+    if (!Number.isInteger(flow.version) || flow.version < 1)
+        return "its version is not a whole number ≥ 1";
+    const starts = asList(flow.startRoute);
+    if (!starts.length || starts.some(r => typeof r !== "string" || !r.startsWith("/")))
+        return "it has no start route";
+    if (!Array.isArray(flow.steps) || flow.steps.length === 0)
+        return "it has no steps";
+    for (const st of flow.steps) {
+        const kind = st.kind ?? "click";
+        if (kind === "view" || kind === "click")
+            continue;
+        if (!flow.allowCommit)
+            return `step "${st.key}" is a ${kind} step and the flow does not set allowCommit`;
+        if (kind === "commit" && !st.abort)
+            return `commit step "${st.key}" has no abort`;
+    }
+    return null;
+}
+const validFlowCache = new WeakMap();
+/** The suite's flows that can run (as validPages: the rest dropped, with a warning in development). */
+function validFlows(suite) {
+    const hit = validFlowCache.get(suite);
+    if (hit)
+        return hit;
+    const out = [];
+    const seen = new Set();
+    for (const flow of suite.flows ?? []) {
+        let problem = flowProblem(suite.app, flow);
+        if (!problem && seen.has(flow.key))
+            problem = "another flow has the same key";
+        if (problem) {
+            const id = `${suite.key}:flow:${flow?.key}:${problem}`;
+            if (!warned.has(id)) {
+                warned.add(id);
+                devWarn(`flow "${flow?.key}" dropped: ${problem}`);
+            }
+            continue;
+        }
+        seen.add(flow.key);
+        out.push(flow);
+    }
+    validFlowCache.set(suite, out);
+    return out;
+}
+function findFlow(suite, key) {
+    return key ? validFlows(suite).find(f => f.key === key) : undefined;
+}
+const flowMissionCache = new WeakMap();
+/** The flow as a mission the machine plays (in replay mode): `flow:<key>`, its steps as authored. */
+function flowMission(flow) {
+    const hit = flowMissionCache.get(flow);
+    if (hit)
+        return hit;
+    const m = { key: FLOW_PREFIX + flow.key, title: flow.title, minutes: flow.minutes ?? 1, steps: flow.steps };
+    flowMissionCache.set(flow, m);
+    return m;
+}
+/**
+ * The flow's chain: its start routes, every step's `route` and route
+ * trigger, and its `transit` routes. Leaving all of them ends the flow.
+ */
+function flowChain(flow) {
+    const out = new Set(asList(flow.startRoute));
+    for (const st of flow.steps) {
+        if (st.route)
+            out.add(st.route);
+        const triggers = st.advanceOn ? (Array.isArray(st.advanceOn) ? st.advanceOn : [st.advanceOn]) : [];
+        for (const t of triggers)
+            if ("route" in t && t.route)
+                out.add(t.route);
+    }
+    for (const t of flow.transit ?? [])
+        out.add(t);
+    return Array.from(out);
+}
+/** Path patterns only (`?k=v` dropped): the chain is about pages, not their tabs. */
+const pathOf = (pattern) => (pattern.includes("?") ? pattern.slice(0, pattern.indexOf("?")) : pattern);
+/** Whether the person is on one of the flow's pages. */
+function inFlowChain(flow, where) {
+    return flowChain(flow).some(r => !!matchRoute(pathOf(r), where.pathname, null, where.code));
+}
+/** Whether the person is on the flow's start page. */
+function onFlowStart(flow, where) {
+    return asList(flow.startRoute).some(r => !!matchRoute(r, where.pathname, where.search, where.code));
+}
+/** Whether this person has the flow: `visible` (only true) and `requires`. */
+function flowShown(flow, ctx) {
+    try {
+        if (flow.visible && flow.visible(ctx) !== true)
+            return false;
+        if (flow.requires && !ctx.can(flow.requires))
+            return false;
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+/** The flows this person has (the panel's "พาทำงาน" list), in the suite's order. */
+function shownFlows(suite, ctx) {
+    return validFlows(suite).filter(f => flowShown(f, ctx));
+}
+/** Where the panel sends the person to start a flow, or null when it needs an id it does not have. */
+function flowHref(flow, ctx) {
+    let raw;
+    try {
+        raw = flow.href === undefined ? undefined : typeof flow.href === "function" ? flow.href(ctx) : flow.href;
+    }
+    catch {
+        raw = undefined;
+    }
+    if (raw)
+        return /^https?:\/\//i.test(raw) ? raw : (fillRoute(raw, { code: ctx.code }) ?? null);
+    for (const r of asList(flow.startRoute)) {
+        const filled = fillRoute(r, { code: ctx.code });
+        if (filled)
+            return filled;
+    }
+    return null;
+}
 
 /* ------------------------------------------------------------------ */
 /* Copy                                                                 */
@@ -597,6 +973,8 @@ const COPY = {
     hiddenToast: "ซ่อนแล้ว",
     aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
     pageDone: "จบคู่มือหน้านี้",
+    sectionDone: "จบคำอธิบายส่วนนี้",
+    flowDone: "พาทำงานเสร็จแล้ว",
     bridgeTitle: "กดปุ่มเมนู",
     bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
 };
@@ -609,8 +987,11 @@ function initialGuideState(audience, progress, pages) {
         pageAudience: pages?.pageAudience ?? "none",
         pagesMode: pages?.pagesMode ?? "off",
         pages: pages?.pages ?? {},
+        sections: pages?.sections ?? {},
+        flows: pages?.flows ?? {},
         pageRun: null,
         panelSection: "all",
+        autoPassed: null,
         audience,
         progress,
         screen: { name: "idle" },
@@ -630,6 +1011,14 @@ function findMission(suite, 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;
+    }
+    if (isFlowMissionKey(key)) {
+        const flow = findFlow(suite, flowKeyOf(key));
+        return flow ? flowMission(flow) : undefined;
+    }
     return suite.missions.find(m => m.key === key);
 }
 /**
@@ -667,6 +1056,7 @@ function guideContext(env, data, params = {}) {
         facts: env.facts,
         can: env.can,
         visible: (anchor) => env.isVisible(anchor),
+        values: env.values ?? {},
     };
 }
 function resolveText(t, ctx) {
@@ -980,7 +1370,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}` : ""}`,
@@ -991,7 +1381,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) => {
@@ -1001,6 +1391,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)
@@ -1008,6 +1404,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");
@@ -1020,6 +1427,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);
@@ -1041,6 +1450,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;
             }
@@ -1054,9 +1466,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 flow = flowKeyOf(mission.key);
     const where = placeRoute(steps, i);
-    // A page guide is on its page: leaving it ends the guide (never "ทำต่อ").
-    const away = !page && !!where && !matchRoute(where, env.pathname, env.search, env.code);
+    // 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, {
@@ -1074,6 +1488,8 @@ function enterStep(d, suite, env, mission, index, opts) {
         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 } : {}),
+        ...(flow ? { flow } : {}),
     });
     if (!opts.replay) {
         const cp = checkpointAtOrBefore(steps, i);
@@ -1238,9 +1654,12 @@ 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)) {
+    if (isPageMissionKey(mission.key) || isSectionMissionKey(mission.key) || isFlowMissionKey(mission.key)) {
         endPage(d, suite, "completed");
-        d.effects.push({ type: "toast", text: COPY.pageDone });
+        d.effects.push({
+            type: "toast",
+            text: isSectionMissionKey(mission.key) ? COPY.sectionDone : isFlowMissionKey(mission.key) ? COPY.flowDone : COPY.pageDone,
+        });
         return;
     }
     if (replay) {
@@ -1344,7 +1763,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)
@@ -1503,14 +1923,168 @@ function recordPage(d, suite, key, status) {
     d.state = { ...d.state, pages: { ...d.state.pages, [key]: { version: page.version, status, rev: prev?.rev ?? 0 } } };
     d.effects.push({ type: "savePage", key, version: page.version, status });
 }
-/** The page guide ends: its row written when it is due one; back to idle. */
+/** 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 flow's row says this person has ended this version of it. */
+function flowRecorded(state, flow) {
+    const row = state.flows?.[flow.key];
+    return !!row && row.version >= flow.version;
+}
+/** Write a flow's row (once per flow and version). */
+function recordFlow(d, suite, key, status) {
+    const flow = findFlow(suite, key);
+    if (!flow || flowRecorded(d.state, flow))
+        return;
+    const prev = d.state.flows?.[key];
+    d.state = { ...d.state, flows: { ...d.state.flows, [key]: { version: flow.version, status, rev: prev?.rev ?? 0 } } };
+    d.effects.push({ type: "savePage", key, version: flow.version, status, kind: "flow" });
+}
+/** The page guide, section guide or flow ends: its row written when it is due one; back to idle. */
 function endPage(d, suite, how) {
     const run = d.state.pageRun;
-    if (run?.write)
-        recordPage(d, suite, run.key, how);
+    if (run?.write) {
+        if (run.kind === "section")
+            recordSection(d, suite, run.key, how);
+        else if (run.kind === "flow")
+            recordFlow(d, suite, run.key, how);
+        else
+            recordPage(d, suite, run.key, how);
+    }
+    // A flow's captured ids were its own: the tour's come back.
+    if (run?.kind === "flow" && run.context)
+        withProgress(d, { context: run.context });
     d.state = { ...d.state, pageRun: null, replayPage: null };
     setScreen(d, { name: "idle" });
 }
+/** The flow on screen, or null. */
+function flowOf(s) {
+    return s.name === "step" && s.flow ? s.flow : null;
+}
+/** The flows this person has that start on this page ("พาทำ · <title>"). */
+function flowsAvailable(suite, env) {
+    if (!suite.flows?.length)
+        return [];
+    const ctx = guideContext(env, {});
+    const where = whereOf(env);
+    return (suite.flows ?? [])
+        .map(f => findFlow(suite, f?.key))
+        .filter((f) => !!f && onFlowStart(f, where) && flowShown(f, ctx))
+        .map(f => f.key);
+}
+/**
+ * The flow to offer now, or null: only in "offer" mode, only a flow that
+ * says `offer: true`, on its start page, with no row of this version, when
+ * nothing else is up and this page's own guide is not due (it comes first:
+ * no guide here, offer: false, or already recorded), its first step's
+ * target on screen, no app dialog open. The host adds the welcome and the
+ * idle wait, as for the page guide's offer.
+ */
+function flowOfferDue(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 (safe(() => env.dialogOpen?.() === true, false))
+        return null;
+    for (const key of flowsAvailable(suite, env)) {
+        const flow = findFlow(suite, key);
+        if (flow.offer !== true || flowRecorded(state, flow))
+            continue;
+        const mission = flowMission(flow);
+        const first = mission.steps.find(st => {
+            const ctx = guideContext(env, {});
+            if (st.requires && !safe(() => env.can(st.requires), true))
+                return false;
+            return !(st.skipIf && safe(() => st.skipIf(ctx), false));
+        });
+        if (first && !stepTargetVisible(first, env, guideContext(env, {}), false))
+            continue;
+        return key;
+    }
+    return null;
+}
+function startFlow(d, suite, env, key, write, at) {
+    const flow = findFlow(suite, key);
+    if (!flow)
+        return;
+    const mission = flowMission(flow);
+    const saved = d.state.progress.context;
+    d.state = {
+        ...d.state,
+        panelOpen: false,
+        justDone: null,
+        pageRun: { key, write, kind: "flow", context: saved },
+        autoPassed: null,
+        replayPage: {
+            mission: mission.key,
+            anchors: abortAnchorsOf(mission).filter(a => safe(() => env.isVisible(a), false)),
+            dialog: safe(() => env.dialogOpen?.() === true, false),
+        },
+    };
+    withProgress(d, { context: at?.context ?? {} });
+    let index = 0;
+    if (at) {
+        const stepAt = mission.steps.findIndex(st => st.key === at.step);
+        if (stepAt > 0)
+            index = checkpointAtOrBefore(mission.steps, stepAt);
+    }
+    enterStep(d, suite, env, mission, index, { replay: true });
+}
+/** 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)
@@ -1520,7 +2094,8 @@ function startPage(d, suite, env, key, write) {
         ...d.state,
         panelOpen: false,
         justDone: null,
-        pageRun: { key, write },
+        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,
@@ -1620,7 +2195,7 @@ function reduceGuide(state, action, suite, env) {
                 break;
             // A mission always wins over a page guide: a running one ends (its row
             // written if due), an offer goes unrecorded.
-            if (s.name === "step" && s.page)
+            if (readOf(s) || flowOf(s))
                 endPage(d, suite, "skipped");
             else if (s.name === "pageOffer")
                 setScreen(d, { name: "idle" });
@@ -1641,12 +2216,21 @@ 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 (s.flow) {
+                    const flow = findFlow(suite, s.page);
+                    if (!flow || !onFlowStart(flow, whereOf(env))) {
+                        recordFlow(d, suite, s.page, "skipped");
+                        setScreen(d, { name: "idle" });
+                    }
+                    break;
+                }
                 if (!pageStillHere(suite, s.page, env)) {
                     recordPage(d, suite, s.page, "skipped");
                     setScreen(d, { name: "idle" });
@@ -1655,8 +2239,18 @@ function reduceGuide(state, action, suite, env) {
             }
             if (s.name !== "step")
                 break;
-            if (s.page && !pageStillHere(suite, s.page, env)) {
-                // Leaving the page ends its guide, silently.
+            if (s.flow) {
+                // Off the flow's pages: it ends, silently. Between them it goes on
+                // (a step on another of its pages shows "ทำต่อ").
+                const flow = findFlow(suite, s.flow);
+                if (!flow || !inFlowChain(flow, env)) {
+                    endPage(d, suite, "skipped");
+                    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;
             }
@@ -1689,7 +2283,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, s.page)) {
+            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;
@@ -1805,7 +2399,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, cur.page)) {
+            if (!cur.bridge && offRoute(mission.steps, cur.index, env, cur.page ?? cur.section)) {
                 recoverOffRoute(d, suite, env, false);
                 break;
             }
@@ -1826,7 +2420,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, s.page)) {
+            if (!s.bridge && offRoute(mission.steps, s.index, env, s.page ?? s.section)) {
                 recoverOffRoute(d, suite, env, false);
                 break;
             }
@@ -1843,7 +2437,7 @@ function reduceGuide(state, action, suite, env) {
                 advance(d, suite, env);
             }
             else if (policy === "abort") {
-                if (s.page)
+                if (readOf(s) || flowOf(s))
                     endPage(d, suite, "skipped");
                 else
                     exitMission(d);
@@ -1869,7 +2463,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, s.page)) {
+            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;
@@ -1885,7 +2479,7 @@ function reduceGuide(state, action, suite, env) {
         case "exit":
             if (s.name !== "step")
                 break;
-            if (s.page) {
+            if (readOf(s) || flowOf(s)) {
                 // ✕, Escape or ปิดคู่มือ: ends silently.
                 pushAbort(d, suite, s);
                 endPage(d, suite, "skipped");
@@ -1913,6 +2507,11 @@ function reduceGuide(state, action, suite, env) {
         case "endWithoutSave":
             if (s.name !== "step" || !s.replay)
                 break;
+            if (flowOf(s)) {
+                pushAbort(d, suite, s);
+                endPage(d, suite, "skipped");
+                break;
+            }
             pushAbort(d, suite, s);
             setScreen(d, { name: "idle" });
             d.effects.push({ type: "toast", text: COPY.replayEnded });
@@ -1961,7 +2560,7 @@ function reduceGuide(state, action, suite, env) {
             break;
         case "openPanel": {
             const section = action.section ?? "all";
-            const allowed = section === "pages" ? state.pageAudience !== "none" : state.audience !== "none" || state.pageAudience !== "none";
+            const allowed = section !== "all" ? 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.
@@ -2014,6 +2613,13 @@ function reduceGuide(state, action, suite, env) {
             break;
         }
         case "pageOffer": {
+            if (action.flow) {
+                if (flowOfferDue(state, suite, env) !== action.page)
+                    break;
+                setScreen(d, { name: "pageOffer", page: action.page, flow: true });
+                d.effects.push({ type: "announce", text: `พาทำงาน ${findFlow(suite, action.page)?.title ?? ""}` });
+                break;
+            }
             if (pageOfferDue(state, suite, env) !== action.page)
                 break;
             setScreen(d, { name: "pageOffer", page: action.page });
@@ -2023,14 +2629,42 @@ function reduceGuide(state, action, suite, env) {
         case "pageOfferStart":
             if (s.name !== "pageOffer" || state.pageAudience === "none")
                 break;
-            startPage(d, suite, env, s.page, true);
+            if (s.flow)
+                startFlow(d, suite, env, s.page, true);
+            else
+                startPage(d, suite, env, s.page, true);
             break;
         case "pageOfferLater":
             if (s.name !== "pageOffer")
                 break;
-            recordPage(d, suite, s.page, "skipped");
+            if (s.flow)
+                recordFlow(d, suite, s.page, "skipped");
+            else
+                recordPage(d, suite, s.page, "skipped");
             setScreen(d, { name: "idle" });
             break;
+        case "startFlow": {
+            // Only on its start page; 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;
+            if (!flowsAvailable(suite, env).includes(action.flow))
+                break;
+            const flow = findFlow(suite, action.flow);
+            startFlow(d, suite, env, flow.key, !flowRecorded(state, flow));
+            break;
+        }
+        case "resumeFlow": {
+            if (state.pageAudience === "none" || state.pagesMode === "off" || s.name !== "idle")
+                break;
+            const flow = findFlow(suite, action.flow);
+            if (!flow || !flowShown(flow, guideContext(env, {})) || !inFlowChain(flow, whereOf(env)))
+                break;
+            startFlow(d, suite, env, flow.key, action.write && !flowRecorded(state, flow), { step: action.step, context: action.context });
+            break;
+        }
         case "startPage": {
             // Never over a mission step, a welcome, a gate or a celebration.
             if (state.pageAudience === "none" || state.pagesMode === "off")
@@ -2044,7 +2678,7 @@ function reduceGuide(state, action, suite, env) {
             break;
         }
         case "back": {
-            if (s.name !== "step" || !s.page || s.phase !== "ready" || s.confirmExit)
+            if (s.name !== "step" || !readOf(s) || s.phase !== "ready" || s.confirmExit)
                 break;
             const mission = findMission(suite, s.mission);
             if (!mission)
@@ -2059,12 +2693,39 @@ function reduceGuide(state, action, suite, env) {
             break;
         }
         case "pageRow": {
+            if (action.kind === "flow") {
+                const cur = d.state.flows?.[action.key];
+                if (cur && cur.version > action.row.version)
+                    break;
+                d.state = { ...d.state, flows: { ...d.state.flows, [action.key]: action.row } };
+                break;
+            }
+            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;
@@ -2193,6 +2854,8 @@ function parseGuidesAnswer(payload, suite) {
         ? data.page_audience
         : "none";
     const pages = parsePageRows(rows, suite.app);
+    const sections = parsePageRows(rows, suite.app, "section");
+    const flows = parsePageRows(rows, suite.app, "flow");
     let row = null;
     for (const r of rows) {
         if (isRecord(r) && r.guide_key === suite.key) {
@@ -2213,15 +2876,15 @@ function parseGuidesAnswer(payload, suite) {
         progress = row;
         newerOnServer = row.guide_version > suite.version;
     }
-    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer, pagesMode, pageAudience, pages };
+    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer, pagesMode, pageAudience, pages, sections, flows };
 }
-/** The row key of a page guide: `<app>.page.<key>`. */
-function pageRowKey(app, key) {
-    return `${app}.page.${key}`;
+/** The row key of a page guide `<app>.page.<key>`, a section guide `<app>.section.<key>`, or a flow `<app>.flow.<key>`. */
+function pageRowKey(app, key, kind = "page") {
+    return `${app}.${kind}.${key}`;
 }
-/** Page rows among the list's rows, by page key. Off-shape rows are left out. */
-function parsePageRows(rows, app) {
-    const prefix = pageRowKey(app, "");
+/** 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))
@@ -2471,14 +3134,15 @@ async function storeGuides(adapter, suite, progress) {
     return null;
 }
 /**
- * Writes a page guide's row (`<app>.page.<key>`) once: the minimal body,
+ * 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) {
-    const guideKey = pageRowKey(app, key);
+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;
@@ -3396,7 +4060,10 @@ function CompleteModal(p) {
  * 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" })] })] }));
+    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: p.eyebrow ?? "คู่มือหน้านี้" }), 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 FlowList({ 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", { children: it.done ? "ทำแล้ว" : it.minutes ? `ประมาณ ${it.minutes} นาที` : "ใหม่" })] }), jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onOpen(it.key), children: it.done ? "ทำอีกครั้ง" : "เริ่ม" })] }, it.key))) }));
 }
 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))) }));
@@ -3423,12 +4090,16 @@ function QuestChip({ done, total, pulse, onOpen }) {
 }
 function QuestPanel(p) {
     const ref = useAutoFocus();
-    const pages = p.pages ?? [];
+    const pages = p.only === "flows" ? [] : (p.pages ?? []);
+    const flows = p.only === "pages" ? [] : (p.flows ?? []);
     const openPage = p.onOpenPage ?? (() => { });
+    const openFlow = p.onOpenFlow ?? (() => { });
+    const flowSection = flows.length ? (jsxs(Fragment, { children: [jsx("h3", { className: "eg-q-sub", id: "eg-q-flows", children: "\u0E1E\u0E32\u0E17\u0E33\u0E07\u0E32\u0E19" }), jsx(FlowList, { items: flows, onOpen: openFlow })] })) : null;
     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 })] })] }));
+        const heading = pages.length ? "คู่มือแต่ละหน้า" : "พาทำงาน";
+        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: heading }), jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsx(IconX, {}) })] }), pages.length ? jsx(PageList, { items: pages, onOpen: openPage }) : null, pages.length ? flowSection : flows.length ? jsx(FlowList, { items: flows, onOpen: openFlow }) : null] })] }));
     }
-    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] })] }));
+    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, flowSection, 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;
@@ -3566,11 +4237,10 @@ function writeMirror(orgId, suite, p) {
         /* private mode: the server copy is enough */
     }
 }
-/** Page rows written in this tab, kept for a remount within the GET's cache time. */
-const pagesMirrorKey = (orgId, suite) => `erp-guide-pages:${orgId}:${suite.app}`;
-function readPagesMirror(orgId, suite) {
+const pagesMirrorKey = (orgId, suite, kind = "page") => `erp-guide-${kind}s:${orgId}:${suite.app}`;
+function readPagesMirror(orgId, suite, kind = "page") {
     try {
-        const raw = sessionStorage.getItem(pagesMirrorKey(orgId, suite));
+        const raw = sessionStorage.getItem(pagesMirrorKey(orgId, suite, kind));
         const parsed = raw ? JSON.parse(raw) : {};
         const out = {};
         for (const [k, v] of Object.entries(parsed ?? {})) {
@@ -3583,9 +4253,9 @@ function readPagesMirror(orgId, suite) {
         return {};
     }
 }
-function writePagesMirror(orgId, suite, pages) {
+function writePagesMirror(orgId, suite, pages, kind = "page") {
     try {
-        sessionStorage.setItem(pagesMirrorKey(orgId, suite), JSON.stringify(pages));
+        sessionStorage.setItem(pagesMirrorKey(orgId, suite, kind), JSON.stringify(pages));
     }
     catch {
         /* private mode */
@@ -3601,6 +4271,8 @@ function mergePageRows(server, local) {
     }
     return out;
 }
+/** A flow in progress in this tab (resumed after a refresh, never across sessions). */
+const flowMirrorKey = (orgId, suite) => `erp-guide-flow-run:${orgId}:${suite.app}`;
 /* ------------------------------------------------------------------ */
 /* One tab at a time                                                    */
 /* ------------------------------------------------------------------ */
@@ -3713,7 +4385,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const [answer, setAnswer] = useState(null);
     const missionsReady = config.ready !== false;
     const pagesReady = config.pagesReady ?? missionsReady;
-    const hasPages = useMemo(() => validPages(suite).length > 0, [suite]);
+    const hasPages = useMemo(() => validPages(suite).length > 0 || validSections(suite).length > 0 || validFlows(suite).length > 0, [suite]);
+    const hasFlows = useMemo(() => validFlows(suite).length > 0, [suite]);
+    const hasSections = useMemo(() => validSections(suite).length > 0, [suite]);
     const enabled = primary && (missionsReady || (hasPages && pagesReady));
     const loaded = useRef(false);
     useEffect(() => {
@@ -3769,6 +4443,8 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             pageAudience: pagesOn ? answer.pageAudience : "none",
             pagesMode: answer.pagesMode,
             pages: mergePageRows(answer.pages, readPagesMirror(organizationId, suite)),
+            sections: mergePageRows(answer.sections ?? {}, readPagesMirror(organizationId, suite, "section")),
+            flows: mergePageRows(answer.flows ?? {}, readPagesMirror(organizationId, suite, "flow")),
         });
         stateRef.current = s;
         setState(s);
@@ -3777,8 +4453,12 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     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,
@@ -3796,6 +4476,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 ---------------- */
@@ -3871,13 +4552,16 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 }
                 else if (e.type === "savePage") {
                     // Once per page and version; the machine already holds it as written.
-                    if (stateRef.current)
-                        writePagesMirror(organizationId, suite, stateRef.current.pages);
-                    const rev = stateRef.current?.pages[e.key]?.rev ?? 0;
-                    void storePageRow(adapterRef.current, suite.app, e.key, e.version, e.status, rev).then(row => {
+                    const kind = e.kind ?? "page";
+                    const cur = stateRef.current;
+                    const rows = cur ? (kind === "section" ? cur.sections : kind === "flow" ? cur.flows : cur.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 });
+                            dispatchRef.current({ type: "pageRow", key: e.key, row, kind });
                     });
                 }
             }
@@ -3967,7 +4651,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     /* ---------------- sync on route, sidebar, facts, DOM ---------------- */
     // A page guide's step runs while page guides are live; a mission's while
     // the missions are. The offer card is watched the same way (left: ignored).
-    const inStep = screen.name === "step" && (screen.page ? pagesLive : missionsLive);
+    const inStep = screen.name === "step" && (screen.page || screen.section || screen.flow ? pagesLive : missionsLive);
     const offerUp = pagesLive && screen.name === "pageOffer";
     const watching = inStep || offerUp;
     useEffect(() => {
@@ -4015,6 +4699,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;
@@ -4023,7 +4708,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;
@@ -4531,7 +5216,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     /* ---------------- page guides: this page's, the offer, the list ---------------- */
     // `when` anchors (LIFF's sub-screens) come and go without a route change:
     // look again when the page changes.
-    const hasWhen = useMemo(() => validPages(suite).some(p => !!p.when), [suite]);
+    const 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")
@@ -4565,6 +5250,30 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     // 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 flowsNow = useMemo(() => pagesLive && hasState && hasFlows
+        ? flowsAvailable(suite, env()).map(k => ({ key: k, title: findFlow(suite, k)?.title ?? "" }))
+        : [], 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [pagesLive, hasState, hasFlows, suite, env, pathname, search, factsKey]);
+    const flowsSig = flowsNow.map(x => x.key).join(",");
+    /** The flows the panel lists: this person's, startable here or with somewhere to go. */
+    const flowsListed = useMemo(() => (pagesLive && hasFlows && ctxIdle ? shownFlows(suite, ctxIdle).filter(f => onFlowStart(f, { code, pathname, search: new URLSearchParams(search) }) || !!flowHref(f, ctxIdle)) : []), [pagesLive, hasFlows, suite, ctxIdle, code, pathname, search]);
+    const openFlowHere = useCallback((key) => dispatchRef.current({ type: "startFlow", flow: key }), []);
     const openPageHere = useCallback(() => {
         const p = pageHere(suite, env());
         if (p)
@@ -4575,8 +5284,16 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             publishPageGuides(null, null, null);
             return;
         }
-        publishPageGuides({ page: pageNow ? { title: pageNow.title } : null, listed: listed.length }, openPageHere, () => dispatchRef.current({ type: "openPanel", section: "pages" }));
-    }, [pagesLive, hasState, pageNow, listed.length, openPageHere]);
+        publishPageGuides({
+            page: pageNow ? { title: pageNow.title } : null,
+            listed: listed.length,
+            sections: sectionsNow,
+            flows: flowsNow,
+            flowsListed: flowsListed.length,
+        }, openPageHere, () => dispatchRef.current({ type: "openPanel", section: "pages" }), openSection, openFlowHere, () => dispatchRef.current({ type: "openPanel", section: "flows" }));
+        // sectionsSig / flowsSig stand for sectionsNow / flowsNow.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pagesLive, hasState, pageNow, listed.length, openPageHere, sectionsSig, openSection, flowsSig, flowsListed.length, openFlowHere]);
     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.
@@ -4604,14 +5321,21 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (Date.now() - idleSince < PAGE_OFFER_IDLE_MS)
                 return;
             let key = null;
+            let flow = null;
             try {
                 key = pageOfferDue(cur, suite, env());
+                // A flow's offer comes after the page guide's (and only for `offer: true` flows).
+                if (!key)
+                    flow = flowOfferDue(cur, suite, env());
             }
             catch {
                 key = null;
+                flow = null;
             }
             if (key)
                 dispatchRef.current({ type: "pageOffer", page: key });
+            else if (flow)
+                dispatchRef.current({ type: "pageOffer", page: flow, flow: true });
         }, PAGE_POLL_MS);
         return () => clearInterval(iv);
     }, [offerWatch, suite, env, pathname, search]);
@@ -4663,6 +5387,14 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (b)
                 return;
             const e = env();
+            if (pending.flow) {
+                const flow = findFlow(suite, pending.key);
+                if (!flow || !onFlowStart(flow, e))
+                    return;
+                setPending(null);
+                dispatchRef.current({ type: "startFlow", flow: pending.key });
+                return;
+            }
             const page = findPage(suite, pending.key);
             if (!page || !pageMatchScore(page, { code, pathname: e.pathname, search: e.search, isVisible: a => e.isVisible(a) }))
                 return;
@@ -4671,6 +5403,93 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         }, PAGE_POLL_MS);
         return () => clearInterval(iv);
     }, [pending, pagesLive, suite, env, code]);
+    // A flow in the panel's list: start it here, or go to its start page and start it there.
+    const openListedFlow = useCallback((key) => {
+        const flow = findFlow(suite, key);
+        if (!flow)
+            return;
+        const e = env();
+        if (onFlowStart(flow, e)) {
+            dispatchRef.current({ type: "startFlow", flow: key });
+            return;
+        }
+        dispatchRef.current({ type: "closePanel" });
+        const href = flowHref(flow, guideContext(e, {}));
+        if (!href)
+            return;
+        setPending({ key, until: Date.now() + PAGE_ARRIVE_MS, flow: true });
+        try {
+            if (/^https?:\/\//i.test(href))
+                window.location.assign(href);
+            else
+                navigateRef.current(href);
+        }
+        catch {
+            /* never breaks the app */
+        }
+    }, [suite, env]);
+    // A flow in progress is kept in this tab's session (sessionStorage), so a
+    // refresh or a full page load on one of its pages picks it up again at
+    // its checkpoint ("ทำต่อ" when its step is on another page). Never across
+    // sessions; a flow that ends is forgotten.
+    const flowRun = state?.pageRun?.kind === "flow" ? state.pageRun : null;
+    const flowStepKey = screen.name === "step" && screen.flow ? (findMission(suite, screen.mission)?.steps[screen.index]?.key ?? null) : null;
+    useEffect(() => {
+        if (!hasFlows)
+            return;
+        const k = flowMirrorKey(organizationId, suite);
+        try {
+            if (!flowRun) {
+                if (state)
+                    sessionStorage.removeItem(k);
+                return;
+            }
+            if (!flowStepKey)
+                return;
+            const flow = findFlow(suite, flowRun.key);
+            sessionStorage.setItem(k, JSON.stringify({ flow: flowRun.key, version: flow?.version, step: flowStepKey, write: flowRun.write, context: state?.progress.context ?? {} }));
+        }
+        catch {
+            /* private mode: no resume after a refresh */
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [hasFlows, flowRun?.key, flowRun?.write, flowStepKey, organizationId, suite]);
+    const flowResumed = useRef(false);
+    useEffect(() => {
+        if (flowResumed.current || !pagesLive || !state || !hasFlows)
+            return;
+        // The missions resume first.
+        if (missionsLive && !resumed.current)
+            return;
+        flowResumed.current = true;
+        const k = flowMirrorKey(organizationId, suite);
+        let saved = null;
+        try {
+            saved = JSON.parse(sessionStorage.getItem(k) ?? "null");
+        }
+        catch {
+            saved = null;
+        }
+        if (!saved?.flow || !saved.step)
+            return;
+        const flow = findFlow(suite, saved.flow);
+        const ok = !!flow && flow.version === saved.version && stateRef.current?.screen.name === "idle" && inFlowChain(flow, { code, pathname });
+        if (!ok) {
+            try {
+                sessionStorage.removeItem(k);
+            }
+            catch {
+                /* ignore */
+            }
+            return;
+        }
+        const context = {};
+        for (const [ck, cv] of Object.entries(saved.context ?? {}))
+            if (typeof cv === "string")
+                context[ck] = cv;
+        dispatchRef.current({ type: "resumeFlow", flow: saved.flow, step: saved.step, context, write: saved.write === true });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pagesLive, !!state, hasFlows, missionsLive]);
     if (!live || !state || !layer || !ctxIdle)
         return null;
     /* ---------------- render ---------------- */
@@ -4693,16 +5512,24 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         const missionNo = missionNumber(suite, mission.key, ctxIdle);
         const kind = stepKind(step);
         const bridge = screen.bridge;
-        const pos = stepPosition(mission, screen.index, env(), state.progress.context);
+        const pos = stepPosition(mission, screen.index, env(), state.progress.context, autoPassedOf(state, mission.key));
         const page = screen.page ? findPage(suite, screen.page) : undefined;
-        const pageBits = page
+        const section = screen.section ? findSection(suite, screen.section) : undefined;
+        const flow = screen.flow ? findFlow(suite, screen.flow) : undefined;
+        const read = page ? { heading: `คู่มือหน้านี้ · ${page.title}`, exitLabel: "ปิดคู่มือ" } : section ? { heading: `อธิบายส่วนนี้ · ${section.title}`, exitLabel: "ปิดคำอธิบาย" } : null;
+        const pageBits = read
             ? {
-                heading: `คู่มือหน้านี้ · ${page.title}`,
-                exitLabel: "ปิดคู่มือ",
+                ...read,
                 showBack: kind === "view" && !!backTarget(mission, screen.index, env(), state.progress.context),
                 nextLabel: pos.no >= pos.total ? "เสร็จ" : undefined,
             }
-            : {};
+            : flow
+                ? {
+                    heading: `พาทำ · ${flow.title}`,
+                    exitLabel: "ออกจากการพาทำ",
+                    nextLabel: kind === "view" && 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,
@@ -4719,6 +5546,13 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 ...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 && screen.flow) {
+        const flow = findFlow(suite, screen.page);
+        const mission = flow ? findMission(suite, FLOW_PREFIX + flow.key) : undefined;
+        if (flow && mission) {
+            content = (jsx(PageOfferCard, { eyebrow: "\u0E1E\u0E32\u0E17\u0E33\u0E07\u0E32\u0E19", title: flow.title, steps: stepPosition(mission, 0, env(), {}).total, onStart: () => dispatch({ type: "pageOfferStart" }), onLater: () => dispatch({ type: "pageOfferLater" }) }));
+        }
+    }
     else if (screen.name === "pageOffer" && pagesLive) {
         const page = findPage(suite, screen.page);
         if (page) {
@@ -4762,12 +5596,13 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     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 panelMissions = missionsLive && total > 0 && state.panelSection === "all";
+    const pageItems = pagesLive && state.panelSection !== "flows" ? listed.map(p => ({ key: p.key, title: p.title, seen: pageRecorded(state, p) })) : [];
+    const flowItems = pagesLive && state.panelSection !== "pages"
+        ? flowsListed.map(f => ({ key: f.key, title: f.title, minutes: f.minutes, done: flowRecorded(state, f) && state.flows[f.key]?.status === "completed" }))
         : [];
-    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);
+    const panelShown = state.panelOpen && screen.name === "idle" && (panelMissions || pageItems.length > 0 || flowItems.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, flows: flowItems, onOpenFlow: openListedFlow })) : 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) {
@@ -4781,5 +5616,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, guideMenuItems as i, guideMenuShown as j, matchRoute as k, loadGuides as l, matchApiPath as m, openPageGuide as n, openGuidePanel as o, openPagesPanel as p, reportApiEvent as q, reportApiCall as r, storeGuides as s, usePageGuideEntry as t, useGuideEntry as u, usePageGuides as v };
-//# sourceMappingURL=guide-runtime-Dl8V1iy9.esm.js.map
+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, useGuideEntry as B, usePageGuideEntry as C, usePageGuides as D, useSectionGuideValues as E, GUIDE_EVENT_PREFIX as G, SectionGuideButton as S, THAI_MONTHS_SHORT as T, GUIDE_LAYER_ATTRIBUTE as a, GuideErrorBoundary as b, GuideProgressConflict as c, GuideRuntime as d, apiCallDetail as e, emitGuideEvent as f, fillRoute as g, formatBaht as h, guideAnchor as i, guideMenuItems as j, guideMenuShown as k, loadGuides as l, matchApiPath as m, matchRoute as n, openFlow as o, openFlowsPanel as p, openGuidePanel as q, openPageGuide as r, openPagesPanel as s, openSectionGuide as t, reportApiCall as u, reportApiEvent as v, setSectionGuideValues as w, storeGuides as x, thaiMonth as y, thaiMonthYear as z };
+//# sourceMappingURL=format-BWUKNKxg.esm.js.map