@eintrek/erp-shell 0.1.75 → 0.1.77

package/dist/chunks/{format-CVazK0hP.cjs → format-DQLPHq7h.cjs}

@@ -357,26 +357,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();
     }
@@ -387,10 +395,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;
@@ -444,6 +456,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;
@@ -821,6 +841,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                                                                 */
@@ -836,6 +994,7 @@ const COPY = {
     aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
     pageDone: "จบคู่มือหน้านี้",
     sectionDone: "จบคำอธิบายส่วนนี้",
+    flowDone: "พาทำงานเสร็จแล้ว",
     bridgeTitle: "กดปุ่มเมนู",
     bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
 };
@@ -849,9 +1008,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" },
@@ -875,6 +1036,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);
 }
 /**
@@ -1226,7 +1391,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}` : ""}`,
@@ -1260,6 +1425,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);
@@ -1323,11 +1536,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,
@@ -1344,6 +1559,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);
@@ -1508,9 +1725,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) {
@@ -1615,7 +1835,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)
@@ -1765,24 +1985,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 } } };
@@ -1805,18 +2034,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);
@@ -1832,6 +2158,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)),
@@ -1851,6 +2178,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,
@@ -1894,6 +2222,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;
@@ -1950,7 +2300,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" });
@@ -1971,13 +2321,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" });
@@ -1986,6 +2344,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.
@@ -1997,6 +2364,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)) {
@@ -2175,7 +2551,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);
@@ -2217,7 +2593,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");
@@ -2245,6 +2621,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 });
@@ -2293,7 +2674,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.
@@ -2346,6 +2727,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 });
@@ -2355,14 +2743,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")
@@ -2372,7 +2788,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": {
@@ -2391,6 +2807,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)
@@ -2414,7 +2837,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": {
@@ -2546,6 +2969,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) {
@@ -2566,9 +2990,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}`;
 }
@@ -2859,7 +3283,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;
     }
@@ -3526,6 +3953,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 = React.useRef(null);
     const arrowRef = React.useRef(null);
     const ringRef = React.useRef(null);
@@ -3566,8 +3996,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) {
@@ -3588,7 +4018,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;
@@ -3610,7 +4040,7 @@ function StepLayer(p) {
             placement,
             middleware: [
                 dom.offset(placement.startsWith("bottom") ? gap : 14),
-                dom.shift({ padding: m }),
+                dom.shift({ padding: m, rootBoundary: { x: col.x, y: 0, width: col.width, height: window.innerHeight } }),
                 ...(arrowRef.current ? [dom.arrow({ element: arrowRef.current, padding: 14 })] : []),
             ],
         });
@@ -3620,11 +4050,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];
@@ -3640,7 +4070,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];
@@ -3661,7 +4091,7 @@ function StepLayer(p) {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 ? (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxRuntime.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: [jsxRuntime.jsx(BubbleBody, { ...p }), jsxRuntime.jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxRuntime.jsxs("div", { className: "eg-loading", children: [jsxRuntime.jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsxRuntime.jsx("div", { className: "eg-row", children: jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }) })] })) : null, p.phase === "missing" ? (jsxRuntime.jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-missing-t", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onRetry, children: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" })] })] })) : null, p.phase === "away" ? (jsxRuntime.jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxRuntime.jsxs("div", { className: "eg-b-top", children: [jsxRuntime.jsx("span", { className: "eg-mis", children: headingOf(p.bubble) }), jsxRuntime.jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsxRuntime.jsx(GuideTitle, { text: p.bubble.title }) }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: exitLabelOf(p.bubble) }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (jsxRuntime.jsx(ConfirmModal, { title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49?", line: p.reopenHint || REOPEN_HINT, leaveLabel: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C", stayLabel: "\u0E17\u0E33\u0E15\u0E48\u0E2D", onLeave: p.onExitConfirm, onStay: p.onExitCancel })) : null] }));
 }
@@ -3750,7 +4180,10 @@ function CompleteModal(p) {
  * corner, not modal (the page stays usable; focus is not taken). Shell ≥ 0.1.74.
  */
 function PageOfferCard(p) {
-    return (jsxRuntime.jsxs("section", { className: "eg-card eg-offer", role: "region", "aria-labelledby": "eg-po-t", "data-eg-offer": "", children: [jsxRuntime.jsx("p", { className: "eg-po-e", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49" }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-po-t", children: p.title }), jsxRuntime.jsxs("p", { className: "eg-b-w", children: [p.steps, " \u0E02\u0E31\u0E49\u0E19"] }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onLater, children: "\u0E44\u0E21\u0E48\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onStart, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" })] })] }));
+    return (jsxRuntime.jsxs("section", { className: "eg-card eg-offer", role: "region", "aria-labelledby": "eg-po-t", "data-eg-offer": "", children: [jsxRuntime.jsx("p", { className: "eg-po-e", children: p.eyebrow ?? "คู่มือหน้านี้" }), jsxRuntime.jsx("p", { className: "eg-b-t", id: "eg-po-t", children: p.title }), jsxRuntime.jsxs("p", { className: "eg-b-w", children: [p.steps, " \u0E02\u0E31\u0E49\u0E19"] }), jsxRuntime.jsxs("div", { className: "eg-row", children: [jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onLater, children: "\u0E44\u0E21\u0E48\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49" }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onStart, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" })] })] }));
+}
+function FlowList({ items, onOpen }) {
+    return (jsxRuntime.jsx("ul", { className: "eg-q-list eg-pg-list", children: items.map(it => (jsxRuntime.jsxs("li", { className: "eg-q-item eg-pg-item", children: [jsxRuntime.jsxs("div", { className: "eg-t", children: [jsxRuntime.jsx("b", { children: it.title }), jsxRuntime.jsx("small", { children: it.done ? "ทำแล้ว" : it.minutes ? `ประมาณ ${it.minutes} นาที` : "ใหม่" })] }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onOpen(it.key), children: it.done ? "ทำอีกครั้ง" : "เริ่ม" })] }, it.key))) }));
 }
 function PageList({ items, onOpen }) {
     return (jsxRuntime.jsx("ul", { className: "eg-q-list eg-pg-list", children: items.map(it => (jsxRuntime.jsxs("li", { className: "eg-q-item eg-pg-item", children: [jsxRuntime.jsxs("div", { className: "eg-t", children: [jsxRuntime.jsx("b", { children: it.title }), jsxRuntime.jsx("small", { className: it.seen ? undefined : "eg-new", children: it.seen ? "ดูแล้ว" : "ใหม่" })] }), jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onOpen(it.key), children: "\u0E40\u0E1B\u0E34\u0E14" })] }, it.key))) }));
@@ -3777,12 +4210,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 ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h3", { className: "eg-q-sub", id: "eg-q-flows", children: "\u0E1E\u0E32\u0E17\u0E33\u0E07\u0E32\u0E19" }), jsxRuntime.jsx(FlowList, { items: flows, onOpen: openFlow })] })) : null;
     if (p.showMissions === false) {
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E41\u0E15\u0E48\u0E25\u0E30\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx(PageList, { items: pages, onOpen: openPage })] })] }));
+        const heading = pages.length ? "คู่มือแต่ละหน้า" : "พาทำงาน";
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: heading }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), pages.length ? jsxRuntime.jsx(PageList, { items: pages, onOpen: openPage }) : null, pages.length ? flowSection : flows.length ? jsxRuntime.jsx(FlowList, { items: flows, onOpen: openFlow }) : null] })] }));
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx("div", { className: "eg-prog", children: jsxRuntime.jsx("div", { className: "eg-bar", children: jsxRuntime.jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsxRuntime.jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (jsxRuntime.jsx(QuestRow, { item: it, n: i + 1, just: p.justDone === it.key, gate: p.gate, onStart: p.onStart, onDismiss: p.onDismiss }, it.key))) }), pages.length ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h3", { className: "eg-q-sub", id: "eg-q-pages", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E41\u0E15\u0E48\u0E25\u0E30\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsx(PageList, { items: pages, onOpen: openPage })] })) : null, p.canHideChip ? (jsxRuntime.jsx("div", { className: "eg-q-f", children: jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onHideChip, children: "\u0E0B\u0E48\u0E2D\u0E19\u0E1B\u0E38\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08" }) })) : null] })] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxRuntime.jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxRuntime.jsxs("div", { className: "eg-q-h", children: [jsxRuntime.jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxRuntime.jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsxRuntime.jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsxRuntime.jsx(IconX, {}) })] }), jsxRuntime.jsx("div", { className: "eg-prog", children: jsxRuntime.jsx("div", { className: "eg-bar", children: jsxRuntime.jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsxRuntime.jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (jsxRuntime.jsx(QuestRow, { item: it, n: i + 1, just: p.justDone === it.key, gate: p.gate, onStart: p.onStart, onDismiss: p.onDismiss }, it.key))) }), pages.length ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("h3", { className: "eg-q-sub", id: "eg-q-pages", children: "\u0E04\u0E39\u0E48\u0E21\u0E37\u0E2D\u0E41\u0E15\u0E48\u0E25\u0E30\u0E2B\u0E19\u0E49\u0E32" }), jsxRuntime.jsx(PageList, { items: pages, onOpen: openPage })] })) : null, flowSection, p.canHideChip ? (jsxRuntime.jsx("div", { className: "eg-q-f", children: jsxRuntime.jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onHideChip, children: "\u0E0B\u0E48\u0E2D\u0E19\u0E1B\u0E38\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08" }) })) : null] })] }));
 }
 function QuestRow({ item, n, just, gate, onStart, onDismiss, }) {
     const v = item.view;
@@ -3920,8 +4357,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));
@@ -3955,6 +4391,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                                                    */
 /* ------------------------------------------------------------------ */
@@ -4021,6 +4459,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)
@@ -4067,7 +4541,8 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const [answer, setAnswer] = React.useState(null);
     const missionsReady = config.ready !== false;
     const pagesReady = config.pagesReady ?? missionsReady;
-    const hasPages = React.useMemo(() => validPages(suite).length > 0 || validSections(suite).length > 0, [suite]);
+    const hasPages = React.useMemo(() => validPages(suite).length > 0 || validSections(suite).length > 0 || validFlows(suite).length > 0, [suite]);
+    const hasFlows = React.useMemo(() => validFlows(suite).length > 0, [suite]);
     const hasSections = React.useMemo(() => validSections(suite).length > 0, [suite]);
     const enabled = primary && (missionsReady || (hasPages && pagesReady));
     const loaded = React.useRef(false);
@@ -4125,6 +4600,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);
@@ -4233,7 +4709,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;
@@ -4330,7 +4807,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;
     React.useEffect(() => {
@@ -4396,6 +4873,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] = React.useState({
         spot: null,
         covered: false,
@@ -4404,6 +4882,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         vw: 0,
         vh: 0,
         oy: 0,
+        col: null,
     });
     React.useEffect(() => {
         if (!inStep) {
@@ -4412,7 +4891,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
@@ -4472,13 +4951,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;
@@ -4633,6 +5114,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)) {
@@ -4752,8 +5270,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);
@@ -4763,7 +5288,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);
@@ -4944,6 +5471,15 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             openingSection.current = null;
         }
     }, []);
+    const flowsNow = React.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 = React.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 = React.useCallback((key) => dispatchRef.current({ type: "startFlow", flow: key }), []);
     const openPageHere = React.useCallback(() => {
         const p = pageHere(suite, env());
         if (p)
@@ -4954,10 +5490,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]);
     React.useEffect(() => () => publishPageGuides(null, null, null), []);
     // The first-visit offer: in "offer" mode, nothing else up, the welcome
     // not due here, and a moment of nothing loading on this page.
@@ -4985,14 +5527,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]);
@@ -5044,6 +5593,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;
@@ -5052,6 +5609,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 = React.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;
+    React.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 = React.useRef(false);
+    React.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 ---------------- */
@@ -5074,18 +5718,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 = (jsxRuntime.jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
+            : flow
+                ? {
+                    heading: `พาทำ · ${flow.title}`,
+                    exitLabel: "ออกจากการพาทำ",
+                    nextLabel: kind === "view" && last ? "เสร็จ" : undefined,
+                }
+                : {};
+        content = (jsxRuntime.jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, bounds: layout.col, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
                 missionNo,
                 missionTitle: mission.title,
                 replay: screen.replay,
@@ -5101,6 +5756,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 = (jsxRuntime.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) {
@@ -5144,12 +5806,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 reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: GUIDE_CSS }), jsxRuntime.jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsxRuntime.jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, panelShown ? (jsxRuntime.jsx(QuestPanel, { items: items, done: done, total: total, justDone: state.justDone, gate: gate && gateFailing ? { label: gate.action.label, pending: gate.pending, href: gateHref } : null, canHideChip: !state.progress.chip_hidden && state.progress.status !== "completed", onClose: () => dispatch({ type: "closePanel" }), onStart: (key, replayIt) => dispatch({ type: "start", mission: key, replay: replayIt }), onDismiss: key => dispatch({ type: "dismissMission", mission: key }), onHideChip: () => dispatch({ type: "hideChip" }), pages: pageItems, showMissions: panelMissions, onOpenPage: openListedPage })) : null, toast ? jsxRuntime.jsx(GuideToast, { text: toast }) : null] }), layer);
+    const panelShown = state.panelOpen && screen.name === "idle" && (panelMissions || pageItems.length > 0 || flowItems.length > 0);
+    return reactDom.createPortal(jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("style", { children: GUIDE_CSS }), jsxRuntime.jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsxRuntime.jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, panelShown ? (jsxRuntime.jsx(QuestPanel, { items: items, done: done, total: total, justDone: state.justDone, gate: gate && gateFailing ? { label: gate.action.label, pending: gate.pending, href: gateHref } : null, canHideChip: !state.progress.chip_hidden && state.progress.status !== "completed", onClose: () => dispatch({ type: "closePanel" }), onStart: (key, replayIt) => dispatch({ type: "start", mission: key, replay: replayIt }), onDismiss: key => dispatch({ type: "dismissMission", mission: key }), onHideChip: () => dispatch({ type: "hideChip" }), pages: pageItems, showMissions: panelMissions, onOpenPage: openListedPage, flows: flowItems, onOpenFlow: openListedFlow })) : null, toast ? jsxRuntime.jsx(GuideToast, { text: toast }) : null] }), layer);
 }
 /** A stable key for the facts object, so effects re-run when they change. */
 function useFactsKey(facts) {
@@ -5277,6 +5940,8 @@ exports.guideMenuShown = guideMenuShown;
 exports.loadGuides = loadGuides;
 exports.matchApiPath = matchApiPath;
 exports.matchRoute = matchRoute;
+exports.openFlow = openFlow;
+exports.openFlowsPanel = openFlowsPanel;
 exports.openGuidePanel = openGuidePanel;
 exports.openPageGuide = openPageGuide;
 exports.openPagesPanel = openPagesPanel;
@@ -5291,4 +5956,4 @@ exports.useGuideEntry = useGuideEntry;
 exports.usePageGuideEntry = usePageGuideEntry;
 exports.usePageGuides = usePageGuides;
 exports.useSectionGuideValues = useSectionGuideValues;
-//# sourceMappingURL=format-CVazK0hP.cjs.map
+//# sourceMappingURL=format-DQLPHq7h.cjs.map