@eintrek/erp-shell 0.1.75 → 0.1.77

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

@@ -337,26 +337,34 @@ function publishGuideEntry(next, openPanel) {
         emit();
     }
 }
-const NO_PAGES = { page: null, listed: 0, sections: [] };
+const NO_PAGES = { page: null, listed: 0, sections: [], flows: [], flowsListed: 0 };
 let pages = NO_PAGES;
 let openPageImpl = null;
 let openPagesImpl = null;
 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) {
+function publishPageGuides(next, openPage, openPages, openSection = null, openFlow = null, openFlows = null) {
     const n = next ?? NO_PAGES;
     openPageImpl = openPage;
     openPagesImpl = openPages;
     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.sections) === sectionsKey(pages.sections) &&
+        sectionsKey(n.flows) === sectionsKey(pages.flows);
     if (!same) {
         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
-                ? { page: n.page ? { title: n.page.title } : null, listed: n.listed, sections }
+            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();
     }
@@ -367,10 +375,14 @@ function guideMenuItems(e, p = NO_PAGES) {
         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;
@@ -424,6 +436,14 @@ function usePageGuideEntry() {
 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;
@@ -801,6 +821,144 @@ function sectionShown(section, ctx) {
 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                                                                 */
@@ -816,6 +974,7 @@ const COPY = {
     aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
     pageDone: "จบคู่มือหน้านี้",
     sectionDone: "จบคำอธิบายส่วนนี้",
+    flowDone: "พาทำงานเสร็จแล้ว",
     bridgeTitle: "กดปุ่มเมนู",
     bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
 };
@@ -829,9 +988,11 @@ function initialGuideState(audience, progress, pages) {
         pagesMode: pages?.pagesMode ?? "off",
         pages: pages?.pages ?? {},
         sections: pages?.sections ?? {},
+        flows: pages?.flows ?? {},
         pageRun: null,
         panelSection: "all",
         autoPassed: null,
+        counter: null,
         audience,
         progress,
         screen: { name: "idle" },
@@ -855,6 +1016,10 @@ function findMission(suite, 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);
 }
 /**
@@ -1206,7 +1371,7 @@ function announceStep(d, suite, env) {
     const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
     const title = s.bridge ? COPY.bridgeTitle : plainTitle(resolveText(step.title, ctx));
     const why = s.bridge ? COPY.bridgeWhy(suite.appName) : plainTitle(resolveText(step.why, ctx));
-    const pos = stepPosition(mission, s.index, env, d.state.progress.context, autoPassedOf(d.state, mission.key));
+    const pos = s.pos ?? stepPosition(mission, s.index, env, d.state.progress.context, autoPassedOf(d.state, mission.key));
     d.effects.push({
         type: "announce",
         text: `ขั้นที่ ${pos.no} จาก ${pos.total}. ${title}${why ? `. ${why}` : ""}`,
@@ -1240,6 +1405,54 @@ function stepPosition(mission, index, env, context, autoPassed = []) {
     });
     return { no: Math.max(no, 1), total: Math.max(total, 1) };
 }
+/**
+ * The steps after `index` this person will see, as far as can be known from
+ * here: on this page, everything is read (requires, skipIf, a click whose
+ * outcome already holds); on another page, a step whose showing depends on
+ * what is on that page (`skipIf`, `onMissing: "skip"`) is not counted until
+ * its page is reached.
+ */
+function stepsAhead(mission, index, env, context) {
+    let n = 0;
+    for (let j = index + 1; j < mission.steps.length; j++) {
+        const step = mission.steps[j];
+        if (step.requires && !safe(() => env.can(step.requires), true))
+            continue;
+        const home = stepHomeRoute(mission.steps, j);
+        const here = !home || !!matchRoute(home, env.pathname, env.search, env.code);
+        if (here) {
+            const ctx = guideContext(env, context, routeParamsFor(step, env));
+            if (step.skipIf && safe(() => step.skipIf(ctx), false))
+                continue;
+            if (wouldAutoPass(step, env))
+                continue;
+        }
+        else if (step.skipIf || step.onMissing === "skip") {
+            continue;
+        }
+        n++;
+    }
+    return n;
+}
+/**
+ * The counter as shown when entering step `index` (shell ≥ 0.1.77). `no`
+ * counts the steps actually shown in this run up to this one. The total is
+ * worked out on entering a step on a new page — the shown steps so far plus
+ * stepsAhead — and kept while the run stays on that page; it never goes
+ * down (the larger of the old and the new), and is never below `no`.
+ */
+function countStep(d, env, mission, index) {
+    const prev = d.state.counter?.mission === mission.key ? d.state.counter : null;
+    const shown = prev ? (prev.shown.includes(index) ? prev.shown : [...prev.shown, index]) : [index];
+    const no = Math.max(1, shown.filter(i => i <= index).length);
+    let total;
+    if (prev && prev.path === env.pathname)
+        total = Math.max(prev.total, no);
+    else
+        total = Math.max(prev?.total ?? 0, no + stepsAhead(mission, index, env, d.state.progress.context), no);
+    d.state = { ...d.state, counter: { mission: mission.key, shown, total, path: env.pathname } };
+    return { no, total };
+}
 /** A step entered now would pass at once: a click or select step whose route or visible outcome holds. */
 function wouldAutoPass(step, env) {
     const kind = stepKind(step);
@@ -1303,11 +1516,13 @@ function enterStep(d, suite, env, mission, index, opts) {
     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 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);
+    const pos = countStep(d, env, mission, i);
     setScreen(d, {
         name: "step",
         mission: mission.key,
@@ -1324,6 +1539,8 @@ function enterStep(d, suite, env, mission, index, opts) {
         replayNext: !away && !bridge && opts.replay && replayCanGoOn(mission, i, env, d.state.progress.context, nts),
         ...(page ? { page } : {}),
         ...(section ? { section } : {}),
+        ...(flow ? { flow } : {}),
+        pos,
     });
     if (!opts.replay) {
         const cp = checkpointAtOrBefore(steps, i);
@@ -1488,9 +1705,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) || isSectionMissionKey(mission.key)) {
+    if (isPageMissionKey(mission.key) || isSectionMissionKey(mission.key) || isFlowMissionKey(mission.key)) {
         endPage(d, suite, "completed");
-        d.effects.push({ type: "toast", text: isSectionMissionKey(mission.key) ? COPY.sectionDone : COPY.pageDone });
+        d.effects.push({
+            type: "toast",
+            text: isSectionMissionKey(mission.key) ? COPY.sectionDone : isFlowMissionKey(mission.key) ? COPY.flowDone : COPY.pageDone,
+        });
         return;
     }
     if (replay) {
@@ -1595,7 +1815,7 @@ function startMission(d, suite, env, key, replay) {
     const isReplay = replay || entry?.status === "done";
     const before = d.state.progress;
     // A new run: what passed by itself is counted afresh.
-    d.state = { ...d.state, panelOpen: false, justDone: null, autoPassed: null };
+    d.state = { ...d.state, panelOpen: false, justDone: null, autoPassed: null, counter: null };
     if (d.state.progress.welcome === "not_seen")
         withProgress(d, { welcome: "started" });
     if (!isReplay && d.state.progress.mission_key !== key)
@@ -1745,24 +1965,33 @@ function pageStillHere(suite, key, env) {
     const page = findPage(suite, key);
     return !!page && pageMatchScore(page, whereOf(env)) !== null;
 }
-/** Write a page guide's row (once per page and version): recorded here at once, saved by the host. */
+/**
+ * Whether a row may be written now: none of this version yet, or — once —
+ * a skipped one that the person has now finished (skipped → completed,
+ * shell ≥ 0.1.77). A completed row is final; skipped again changes nothing.
+ */
+function rowWritable(row, version, status) {
+    if (!row || row.version < version)
+        return true;
+    return row.version === version && row.status === "skipped" && status === "completed";
+}
+/** Whether a run should keep its row to write at its end: no row yet, or only a skipped one. */
+function rowStillDue(row, version) {
+    return rowWritable(row, version, "completed");
+}
+/** Write a page guide's row (once per page and version; skipped → completed once): recorded here at once, saved by the host. */
 function recordPage(d, suite, key, status) {
     const page = findPage(suite, key);
-    if (!page || pageRecorded(d.state, page))
+    if (!page || !rowWritable(d.state.pages[key], page.version, status))
         return;
     const prev = d.state.pages[key];
     d.state = { ...d.state, pages: { ...d.state.pages, [key]: { version: page.version, status, rev: prev?.rev ?? 0 } } };
     d.effects.push({ type: "savePage", key, version: page.version, status });
 }
-/** The section guide's row says this person has ended this version of it. */
-function sectionRecorded(state, section) {
-    const row = state.sections?.[section.key];
-    return !!row && row.version >= section.version;
-}
 /** Write a section guide's row (once per section and version). */
 function recordSection(d, suite, key, status) {
     const section = findSection(suite, key);
-    if (!section || sectionRecorded(d.state, section))
+    if (!section || !rowWritable(d.state.sections?.[key], section.version, status))
         return;
     const prev = d.state.sections?.[key];
     d.state = { ...d.state, sections: { ...d.state.sections, [key]: { version: section.version, status, rev: prev?.rev ?? 0 } } };
@@ -1785,18 +2014,115 @@ function readStillHere(suite, r, 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. */
+/** 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 || !rowWritable(d.state.flows?.[key], flow.version, status))
+        return;
+    const prev = d.state.flows?.[key];
+    d.state = { ...d.state, flows: { ...d.state.flows, [key]: { version: flow.version, status, rev: prev?.rev ?? 0 } } };
+    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) {
         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,
+        counter: 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);
@@ -1812,6 +2138,7 @@ function startSection(d, suite, env, key, write) {
         justDone: null,
         pageRun: { key, write, kind: "section" },
         autoPassed: null,
+        counter: null,
         replayPage: {
             mission: mission.key,
             anchors: abortAnchorsOf(mission).filter(a => safe(() => env.isVisible(a), false)),
@@ -1831,6 +2158,7 @@ function startPage(d, suite, env, key, write) {
         justDone: null,
         pageRun: { key, write, kind: "page" },
         autoPassed: null,
+        counter: null,
         // What is open now is the person's: ending the guide leaves it alone.
         replayPage: {
             mission: mission.key,
@@ -1874,6 +2202,28 @@ function backTarget(mission, index, env, context) {
     }
     return prev >= 0 ? { index: prev, close: false } : null;
 }
+/**
+ * A flow's next step (the next one this person sees) when the person is on
+ * its page and no longer on the current step's: they moved on by
+ * themselves. -1 otherwise (still on this step's page, or elsewhere).
+ */
+function flowStepArrivedAt(mission, index, env, context) {
+    const here = (route) => !!route && !!matchRoute(route, env.pathname, env.search, env.code);
+    const curHome = stepHomeRoute(mission.steps, index);
+    if (!curHome || here(curHome))
+        return -1;
+    for (let j = index + 1; j < mission.steps.length; j++) {
+        const st = mission.steps[j];
+        const ctx = guideContext(env, context, routeParamsFor(st, env));
+        if (st.requires && !safe(() => env.can(st.requires), true))
+            continue;
+        if (st.skipIf && safe(() => st.skipIf(ctx), false))
+            continue;
+        const where = st.route ?? stepHomeRoute(mission.steps, j);
+        return here(where) ? j : -1;
+    }
+    return -1;
+}
 function reduceGuide(state, action, suite, env) {
     const d = { state, effects: [] };
     const s = state.screen;
@@ -1930,7 +2280,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 (readOf(s))
+            if (readOf(s) || flowOf(s))
                 endPage(d, suite, "skipped");
             else if (s.name === "pageOffer")
                 setScreen(d, { name: "idle" });
@@ -1951,13 +2301,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 };
+            d.state = { ...d.state, autoPassed: null, counter: 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" });
@@ -1966,6 +2324,15 @@ function reduceGuide(state, action, suite, env) {
             }
             if (s.name !== "step")
                 break;
+            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.
@@ -1977,6 +2344,15 @@ function reduceGuide(state, action, suite, env) {
                 break;
             const step = mission.steps[s.index];
             const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            if (s.flow && !s.confirmExit) {
+                // Within the chain, the person went on to the next step's page by
+                // themselves: carry on there, no "ทำต่อ" (shell ≥ 0.1.77).
+                const next = flowStepArrivedAt(mission, s.index, env, d.state.progress.context);
+                if (next >= 0) {
+                    enterStep(d, suite, env, mission, next, { replay: s.replay });
+                    break;
+                }
+            }
             if (s.phase === "away") {
                 const where = placeRoute(mission.steps, s.index);
                 if (!where || matchRoute(where, env.pathname, env.search, env.code)) {
@@ -2155,7 +2531,7 @@ function reduceGuide(state, action, suite, env) {
                 advance(d, suite, env);
             }
             else if (policy === "abort") {
-                if (readOf(s))
+                if (readOf(s) || flowOf(s))
                     endPage(d, suite, "skipped");
                 else
                     exitMission(d);
@@ -2197,7 +2573,7 @@ function reduceGuide(state, action, suite, env) {
         case "exit":
             if (s.name !== "step")
                 break;
-            if (readOf(s)) {
+            if (readOf(s) || flowOf(s)) {
                 // ✕, Escape or ปิดคู่มือ: ends silently.
                 pushAbort(d, suite, s);
                 endPage(d, suite, "skipped");
@@ -2225,6 +2601,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 });
@@ -2273,7 +2654,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.
@@ -2326,6 +2707,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 });
@@ -2335,14 +2723,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, rowStillDue(state.flows?.[flow.key], flow.version));
+            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 && rowStillDue(state.flows?.[flow.key], flow.version), { 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")
@@ -2352,7 +2768,7 @@ function reduceGuide(state, action, suite, env) {
             const page = pageHere(suite, env);
             if (!page || page.key !== action.page)
                 break;
-            startPage(d, suite, env, page.key, !pageRecorded(state, page));
+            startPage(d, suite, env, page.key, rowStillDue(state.pages[page.key], page.version));
             break;
         }
         case "back": {
@@ -2371,6 +2787,13 @@ 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)
@@ -2394,7 +2817,7 @@ function reduceGuide(state, action, suite, env) {
             if (!sectionsAvailable(suite, env).includes(action.section))
                 break;
             const section = findSection(suite, action.section);
-            startSection(d, suite, env, section.key, !sectionRecorded(state, section));
+            startSection(d, suite, env, section.key, rowStillDue(state.sections?.[section.key], section.version));
             break;
         }
         case "idleCelebrate": {
@@ -2526,6 +2949,7 @@ function parseGuidesAnswer(payload, suite) {
         : "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) {
@@ -2546,9 +2970,9 @@ function parseGuidesAnswer(payload, suite) {
         progress = row;
         newerOnServer = row.guide_version > suite.version;
     }
-    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer, pagesMode, pageAudience, pages, sections };
+    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer, pagesMode, pageAudience, pages, sections, flows };
 }
-/** The row key of a page guide, `<app>.page.<key>`, or a section guide, `<app>.section.<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}`;
 }
@@ -2839,7 +3263,10 @@ async function storePageRow(adapter, app, key, version, status, rev, kind = "pag
         }
         if (current.version > version)
             return null;
-        if (current.version === version && current.status !== "in_progress")
+        // This version already recorded: kept, except a skipped row this run
+        // finished (skipped → completed, once, shell ≥ 0.1.77).
+        const finishing = status === "completed" && current.status === "skipped";
+        if (current.version === version && current.status !== "in_progress" && !finishing)
             return current;
         at = current.rev;
     }
@@ -3506,6 +3933,9 @@ function useNudge(nudge, ref) {
 }
 function StepLayer(p) {
     const { spot, phone, viewport } = p;
+    // Where the bubble may sit: the content column when the app has one.
+    const col = p.bounds && p.bounds.width > 0 ? p.bounds : { x: 0, width: viewport.width || (typeof window !== "undefined" ? window.innerWidth : 0)};
+    const colKey = `${col.x}|${col.width}`;
     const bubbleRef = useRef(null);
     const arrowRef = useRef(null);
     const ringRef = useRef(null);
@@ -3546,8 +3976,8 @@ function StepLayer(p) {
             const bw = el.offsetWidth;
             const bh = el.offsetHeight;
             setPos(phone
-                ? { left: m, top: viewport.offsetTop + viewport.height - bh - m, side: "dock" }
-                : { left: (window.innerWidth - bw) / 2, top: viewport.offsetTop + (viewport.height - bh) / 2, side: "dock" });
+                ? { left: col.x + m, top: viewport.offsetTop + viewport.height - bh - m, side: "dock" }
+                : { left: col.x + (col.width - bw) / 2, top: viewport.offsetTop + (viewport.height - bh) / 2, side: "dock" });
             return;
         }
         if (phone) {
@@ -3568,7 +3998,7 @@ function StepLayer(p) {
                 : overlapBot <= overlapTop
                     ? botT
                     : topT;
-            setPos({ left: m, top, side: "dock" });
+            setPos({ left: col.x + m, top, side: "dock" });
             return;
         }
         let cancelled = false;
@@ -3590,7 +4020,7 @@ function StepLayer(p) {
             placement,
             middleware: [
                 offset(placement.startsWith("bottom") ? gap : 14),
-                shift({ padding: m }),
+                shift({ padding: m, rootBoundary: { x: col.x, y: 0, width: col.width, height: window.innerHeight } }),
                 ...(arrowRef.current ? [arrow({ element: arrowRef.current, padding: 14 })] : []),
             ],
         });
@@ -3600,11 +4030,11 @@ function StepLayer(p) {
                 return;
             const bw = el.offsetWidth;
             const bh = el.offsetHeight;
-            const bounds = { x: m, y: viewport.offsetTop + m, width: window.innerWidth - 2 * m, height: viewport.height - 2 * m };
+            const bounds = { x: col.x + m, y: viewport.offsetTop + m, width: col.width - 2 * m, height: viewport.height - 2 * m };
             const i = pickPlacement(results, bw, bh, a, clear, bounds);
             if (i < 0) {
                 // Nowhere beside it: the bottom-right corner.
-                setPos({ left: window.innerWidth - bw - m, top: viewport.height + viewport.offsetTop - bh - m, side: "dock" });
+                setPos({ left: col.x + col.width - bw - m, top: viewport.height + viewport.offsetTop - bh - m, side: "dock" });
                 return;
             }
             const { x, y, placement, middlewareData } = results[i];
@@ -3620,7 +4050,7 @@ function StepLayer(p) {
         };
         // The keys stand for spot, the lists, the holes and the bubble's size.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [spotKey, anchorKey, clearKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop]);
+    }, [spotKey, anchorKey, clearKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop, colKey]);
     const popovers = p.popovers ?? [];
     const covered = !!p.covered;
     const holes = [...(spot && !covered ? [spot] : []), ...popovers, ...p.holes];
@@ -3641,7 +4071,7 @@ function StepLayer(p) {
     return (jsxs(Fragment, { children: [jsx(Scrim, { holes: p.phase === "ready" ? holes : [], open: p.phase === "ready" ? openHoles : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && ringShown ? (jsx("div", { ref: ringRef, className: "eg-ring" + (p.moving ? " eg-move" : ""), style: { left: spot.x, top: spot.y, width: spot.width, height: spot.height }, "aria-hidden": "true" })) : null, hand ? (jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxs("div", { ref: bubbleRef, className: "eg-bubble" + (p.bubble.error ? " eg-err" : ""), role: "dialog", "aria-modal": "false", "aria-labelledby": BUBBLE_TITLE_ID, "aria-describedby": BUBBLE_WHY_ID, tabIndex: -1, "data-eg-bubble": "", style: {
                     left: pos?.left ?? 0,
                     top: pos?.top ?? 0,
-                    width: phone ? viewport.width - 32 : undefined,
+                    width: phone ? col.width - 32 : col.width < 352 ? col.width - 32 : undefined,
                     visibility: pos ? "visible" : "hidden",
                 }, children: [jsx(BubbleBody, { ...p }), jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxs("div", { className: "eg-loading", children: [jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsx("div", { className: "eg-row", children: jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }) })] })) : null, p.phase === "missing" ? (jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [jsx("p", { className: "eg-b-t", id: "eg-missing-t", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32" }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onRetry, children: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" })] })] })) : null, p.phase === "away" ? (jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxs("div", { className: "eg-b-top", children: [jsx("span", { className: "eg-mis", children: headingOf(p.bubble) }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsx(GuideTitle, { text: p.bubble.title }) }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (jsx(ConfirmModal, { title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49?", line: p.reopenHint || REOPEN_HINT, leaveLabel: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C", stayLabel: "\u0E17\u0E33\u0E15\u0E48\u0E2D", onLeave: p.onExitConfirm, onStay: p.onExitCancel })) : null] }));
 }
@@ -3730,7 +4160,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))) }));
@@ -3757,12 +4190,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;
@@ -3900,8 +4337,7 @@ 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}`;
+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, kind));
@@ -3935,6 +4371,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                                                    */
 /* ------------------------------------------------------------------ */
@@ -4001,6 +4439,42 @@ function runAbort(actions) {
         }, ABORT_DELAY_MS + i * ABORT_GAP_MS);
     });
 }
+/** The app's content column (GuideConfig.contentRoot), cut to the viewport; null when none is declared or found. */
+function contentColumn(selector, vw) {
+    if (!selector || typeof document === "undefined")
+        return null;
+    let el = null;
+    try {
+        el = document.querySelector(selector);
+    }
+    catch {
+        return null;
+    }
+    if (!el)
+        return null;
+    const r = el.getBoundingClientRect();
+    const x = Math.max(0, r.left);
+    const right = Math.min(vw || window.innerWidth, r.right);
+    if (right - x <= 0)
+        return null;
+    return { x, y: 0, width: right - x, height: 0 };
+}
+/** The control a form's implicit submit (Enter in a field) presses: its first submit button. */
+function defaultSubmitControl(form) {
+    for (const el of Array.from(form.elements)) {
+        if (el instanceof HTMLButtonElement && (el.type === "submit" || !el.getAttribute("type")))
+            return el;
+        if (el instanceof HTMLInputElement && (el.type === "submit" || el.type === "image"))
+            return el;
+    }
+    return null;
+}
+/** A field where Enter submits its form (not a textarea, a button or a select). */
+function submitsOnEnter(el) {
+    if (!(el instanceof HTMLInputElement))
+        return false;
+    return !["button", "submit", "reset", "image", "file", "hidden"].includes(el.type);
+}
 /** A step's own target takes presses: not on a "view" step, unless the step allows it. */
 function targetPressable(step, bridge) {
     if (!step || bridge)
@@ -4047,7 +4521,8 @@ 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 || validSections(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);
@@ -4105,6 +4580,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             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);
@@ -4213,7 +4689,8 @@ 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.
                     const kind = e.kind ?? "page";
-                    const rows = stateRef.current ? (kind === "section" ? stateRef.current.sections : stateRef.current.pages) : undefined;
+                    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;
@@ -4310,7 +4787,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 || screen.section ? 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(() => {
@@ -4376,6 +4853,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const stepId = screen.name === "step" ? `${screen.mission}:${screen.index}:${screen.bridge ? "b" : ""}${screen.nothingToSave ? "n" : ""}` : "";
     /* Measure every frame while a step is shown: the spotlight follows
        scrolling, dialogs animating in, the drawer sliding, the keyboard. */
+    const contentRoot = config.contentRoot;
     const [layout, setLayout] = useState({
         spot: null,
         covered: false,
@@ -4384,6 +4862,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         vw: 0,
         vh: 0,
         oy: 0,
+        col: null,
     });
     useEffect(() => {
         if (!inStep) {
@@ -4392,7 +4871,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         }
         let raf = 0;
         let lostSince = null;
-        let last = { spot: null, covered: false, holes: [], popovers: [], vw: 0, vh: 0, oy: 0 };
+        let last = { spot: null, covered: false, holes: [], popovers: [], vw: 0, vh: 0, oy: 0, col: null };
         targetElRef.current = target ? findAnchor(target.anchor, target.id) : null;
         const allow = stepInfo?.step.allow ?? [];
         // The spotlight is the part of the target a person can see: cut by the
@@ -4452,13 +4931,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                     holes.push(padRect(rectOf(ael), TARGET_PAD));
             }
             const covered = !!spot && coveredByDialog(targetElRef.current);
-            const next = { spot, covered, holes, popovers, vw, vh, oy };
+            const col = contentColumn(contentRoot, vw);
+            const next = { spot, covered, holes, popovers, vw, vh, oy, col };
             const sameList = (a, b) => a.length === b.length && a.every((h, i) => sameRect(h, b[i]));
             if (!sameRect(next.spot, last.spot) ||
                 next.covered !== last.covered ||
                 next.vw !== last.vw ||
                 next.vh !== last.vh ||
                 next.oy !== last.oy ||
+                !sameRect(next.col, last.col) ||
                 !sameList(next.holes, last.holes) ||
                 !sameList(next.popovers, last.popovers)) {
                 last = next;
@@ -4613,6 +5094,43 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             }
             return false;
         };
+        /**
+         * Whether a form may be submitted during this step (shell ≥ 0.1.77): only
+         * when its submit control — the button pressed, or the one Enter in a
+         * field would press — is the step's pressable target or in its `allow`.
+         * Otherwise Enter in an allowed field would save a draft (and take a
+         * document number) behind the guide's back.
+         */
+        const submitAllowed = (form, submitter) => {
+            const btn = submitter ?? defaultSubmitControl(form);
+            if (!btn)
+                return false;
+            const el = targetElRef.current;
+            const sc = stateRef.current?.screen;
+            const pressable = targetPressable(stepInfoRef.current?.step, sc?.name === "step" && sc.bridge);
+            if (el && pressable && el.contains(btn))
+                return true;
+            for (const a of stepInfoRef.current?.step.allow ?? []) {
+                const ael = findAnchor(a);
+                if (ael && ael.contains(btn))
+                    return true;
+            }
+            return false;
+        };
+        const onSubmit = (e) => {
+            const sc = stateRef.current?.screen;
+            if (!guardingRef.current || sc?.name !== "step")
+                return;
+            const form = e.target;
+            if (!(form instanceof HTMLFormElement) || inGuideLayer(form))
+                return;
+            const submitter = e.submitter ?? null;
+            if (submitAllowed(form, submitter))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            dispatchRef.current({ type: "blocked" });
+        };
         const onPointer = (e) => {
             const t = e.target;
             if (inGuideLayer(t)) {
@@ -4732,8 +5250,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                         return;
                     }
                 }
-                if (modalRef.current || !allowedTarget(active))
+                if (modalRef.current || !allowedTarget(active)) {
                     stop();
+                    return;
+                }
+                // Enter in a field the step lets the person type in: no implicit
+                // submit unless the form's submit control is allowed now.
+                if (e.key === "Enter" && sc.name === "step" && submitsOnEnter(active) && active.form && !submitAllowed(active.form, null)) {
+                    e.preventDefault();
+                }
             }
         };
         window.addEventListener("pointerdown", onPointer, true);
@@ -4743,7 +5268,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         window.addEventListener("focusin", onFocusIn, true);
         window.addEventListener("focusout", onFocusOut, true);
         window.addEventListener("keydown", onKey, true);
+        window.addEventListener("submit", onSubmit, true);
         return () => {
+            window.removeEventListener("submit", onSubmit, true);
             window.removeEventListener("pointerdown", onPointer, true);
             window.removeEventListener("mousedown", onPointer, true);
             window.removeEventListener("touchstart", onPointer, true);
@@ -4924,6 +5451,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             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)
@@ -4934,10 +5470,16 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             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.
+        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]);
+    }, [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.
@@ -4965,14 +5507,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]);
@@ -5024,6 +5573,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;
@@ -5032,6 +5589,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 ---------------- */
@@ -5054,18 +5698,29 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         const missionNo = missionNumber(suite, mission.key, ctxIdle);
         const kind = stepKind(step);
         const bridge = screen.bridge;
-        const pos = stepPosition(mission, screen.index, env(), state.progress.context, autoPassedOf(state, mission.key));
+        // What is ahead now decides เสร็จ; the number shown is the run's counter,
+        // which never goes down (0.1.77).
+        const raw = stepPosition(mission, screen.index, env(), state.progress.context, autoPassedOf(state, mission.key));
+        const last = raw.no >= raw.total;
+        const pos = screen.pos ?? raw;
         const page = screen.page ? findPage(suite, screen.page) : undefined;
         const section = screen.section ? findSection(suite, screen.section) : undefined;
+        const flow = screen.flow ? findFlow(suite, screen.flow) : undefined;
         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,
+                nextLabel: last ? "เสร็จ" : undefined,
             }
-            : {};
-        content = (jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
+            : flow
+                ? {
+                    heading: `พาทำ · ${flow.title}`,
+                    exitLabel: "ออกจากการพาทำ",
+                    nextLabel: kind === "view" && last ? "เสร็จ" : undefined,
+                }
+                : {};
+        content = (jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, bounds: layout.col, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
                 missionNo,
                 missionTitle: mission.title,
                 replay: screen.replay,
@@ -5081,6 +5736,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) {
@@ -5124,12 +5786,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) {
@@ -5239,5 +5902,5 @@ function thaiMonthYear(m, opts = {}) {
     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
+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-ILrTMV4G.esm.js.map