@eintrek/erp-shell 0.1.73 → 0.1.75

package/dist/guide/core.d.ts

@@ -10,10 +10,12 @@
  * The main entry re-exports the same modules, so a tour defined against
  * either entry is the same data, and the bus and the "?" entry are shared.
  */
-export type { GuideAbortAction, GuideAnchorKey, GuideApiFailure, GuideApiMatch, GuideAppId, GuideCaptureEvent, GuideConfig, GuideContext, GuideFacts, GuideGate, GuideMission, GuideNothingToSave, GuideOnMissing, GuideStep, GuideStepKind, GuideSuite, GuideText, GuideTrigger, } from "./types";
+export type { GuideAbortAction, GuideAnchorKey, GuideApiFailure, GuideApiMatch, GuideAppId, GuideCaptureEvent, GuideConfig, GuideContext, GuideFacts, GuideGate, GuideMission, GuideNothingToSave, GuideOnMissing, GuidePage, GuideSection, GuideStep, GuideStepKind, GuideSuite, GuideText, GuideTrigger, } from "./types";
 export { API_EVENT as GUIDE_API_EVENT, GUIDE_EVENT_PREFIX, GUIDE_LAYER_ATTRIBUTE, apiCallDetail, emitGuideEvent, guideAnchor, reportApiCall, reportApiEvent, type ApiCallReport, type ApiEventDetail, type GuideAnchorProps, } from "./events";
-export { guideMenuShown, openGuidePanel, useGuideEntry, type GuideEntry } from "./guide-store";
+export { guideMenuItems, guideMenuShown, openGuidePanel, openPageGuide, openPagesPanel, openSectionGuide, setSectionGuideValues, useGuideEntry, usePageGuideEntry, usePageGuides, useSectionGuideValues, type GuideEntry, type GuideMenuItem, type PageGuidesEntry, } from "./guide-store";
+export { SectionGuideButton, type SectionGuideButtonProps } from "./section-button";
+export { THAI_MONTHS_SHORT, formatBaht, thaiMonth, thaiMonthYear } from "./format";
 export { GuideRuntime, type GuideMenu, type GuideRouting, type GuideRuntimeProps, } from "./guide-runtime";
 export { GuideProgressConflict, loadGuides, storeGuides, type GuideProgressAdapter, type GuideProgressRequest, type GuideProgressResponse, } from "./progress-sync";
-export type { GuideAudience, GuideMode } from "./progress";
+export type { GuideAudience, GuideMode, PagesMode } from "./progress";
 export { matchApiPath, matchRoute, fillRoute } from "./patterns";

package/dist/guide/format.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Small formatters for section guides' copy (shell 0.1.75): the app passes
+ * its own computed numbers, and the copy says them the way the page does —
+ * "ม.ค. รับ 500,000 − จ่าย 320,000 = คงเหลือ 180,000".
+ *
+ * Pure: the tests run it in Node.
+ */
+export declare const THAI_MONTHS_SHORT: readonly ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
+/**
+ * A baht amount with thousands separators, no currency sign: 500000 →
+ * "500,000"; 1234.5 → "1,234.50"; -320000 → "-320,000". Whole amounts
+ * have no decimals unless `decimals` says so; others have two. Not a
+ * finite number → "" (a step whose value is missing is skipped anyway).
+ */
+export declare function formatBaht(n: unknown, opts?: {
+    decimals?: number;
+}): string;
+/** "2026-01" (or a Date, or 1) → "ม.ค."; "" when it is not a month. */
+export declare function thaiMonth(m: unknown): string;
+/**
+ * "2026-01" → "ม.ค. 69" (the Buddhist year's last two digits), or with
+ * `{ year: "full" }` "ม.ค. 2569"; just the month when no year is known.
+ */
+export declare function thaiMonthYear(m: unknown, opts?: {
+    year?: "short" | "full";
+}): string;

package/dist/guide/guide-store.d.ts

@@ -11,14 +11,80 @@ export interface GuideEntry {
 /** Called by the host: the entry to show (null: none), and how to open the panel. */
 export declare function publishGuideEntry(next: GuideEntry | null, openPanel: (() => void) | null): void;
 /**
- * Whether the "?" menu offers "ไกด์เริ่มต้น": a tour whose missions are all
- * hidden for this user (`visible`, e.g. Plannex without an employee record)
- * has nothing to open, and "0/0" led to an empty panel. The entry itself
- * stays published: apps wait on it before they load the facts that make
- * missions visible.
+ * Page guides here, for the "?" menu: this page's guide (its title) and how
+ * many page guides the panel lists ("คู่มือทุกหน้า"). Shell ≥ 0.1.74.
  */
-export declare function guideMenuShown(e: GuideEntry | null): e is GuideEntry;
+export interface PageGuidesEntry {
+    /** This page's guide for this person, or null. */
+    page: {
+        title: string;
+    } | null;
+    /** Page guides with an `href` this person has (the panel's list). */
+    listed: number;
+    /**
+     * Section guides on screen here that this person has ("อธิบายส่วนนี้ ·
+     * <title>"), in the suite's order. Shell ≥ 0.1.75.
+     */
+    sections?: ReadonlyArray<{
+        key: string;
+        title: string;
+    }>;
+}
+/** Called by the host: this page's guide, the listed count, the sections on screen, and how to open them. */
+export declare function publishPageGuides(next: PageGuidesEntry | null, openPage: (() => void) | null, openPages: (() => void) | null, openSection?: ((key: string) => void) | null): void;
+/** The "?" menu's items, in order (pure: the menu and its tests share it). "sections": one entry per section guide. */
+export type GuideMenuItem = "page" | "sections" | "missions" | "pages" | "help";
+export declare function guideMenuItems(e: GuideEntry | null, p?: PageGuidesEntry): GuideMenuItem[];
+/**
+ * Whether the "?" press opens a menu rather than the help dialog: a tour
+ * with missions shown, a guide for this page, or page guides to list. A tour
+ * whose missions are all hidden for this user (`visible`, e.g. Plannex
+ * without an employee record) has nothing to open, and "0/0" led to an
+ * empty panel. The entry itself stays published: apps wait on it before
+ * they load the facts that make missions visible.
+ */
+export declare function guideMenuShown(e: GuideEntry | null, p?: PageGuidesEntry): boolean;
 /** Opens the tour's quest panel, when this user has a tour here. */
 export declare function openGuidePanel(): void;
 /** The "?" menu's entry, or null when there is no tour for this user. */
 export declare function useGuideEntry(): GuideEntry | null;
+/** Opens this page's guide ("คู่มือหน้านี้"), when there is one. */
+export declare function openPageGuide(): void;
+/** Opens the panel on the page guides alone ("คู่มือทุกหน้า"). */
+export declare function openPagesPanel(): void;
+/** Page guides here (this page's, and the listed count); stable until they change. */
+export declare function usePageGuides(): PageGuidesEntry;
+/**
+ * This page's guide: `{ title, open }`, or null when the page (or the
+ * sub-screen, `when`) has none for this person. For an app that draws its
+ * own "?" (LIFF's page head): draw it only when this is not null.
+ */
+export declare function usePageGuideEntry(): {
+    title: string;
+    open: () => void;
+} | null;
+/**
+ * Opens a section guide ("อธิบายส่วนนี้"), when it is on screen here for this
+ * person. The values it shows are the ones the app last rendered
+ * (`useSectionGuideValues`).
+ */
+export declare function openSectionGuide(key: string): void;
+type Values = Readonly<Record<string, unknown>>;
+/**
+ * Sets (or with undefined, clears) a section guide's live values. The
+ * engine reads the latest whenever it draws a step, so a page that
+ * re-renders mid-guide never leaves an old number on screen.
+ */
+export declare function setSectionGuideValues(key: string, values: Values | undefined): void;
+/** A section guide's live values now (empty when the app has given none). */
+export declare function getSectionGuideValues(key: string | null | undefined): Values;
+/** Re-renders when any section guide's values change (the engine's own use). */
+export declare function useSectionValuesVersion(): number;
+/**
+ * Hands a section guide the numbers its copy uses, from the component that
+ * computes them: `useSectionGuideValues("cash-flow", { month: "ม.ค.", cashIn,
+ * … })`. Call it on every render (the latest wins); they go when the
+ * component unmounts. undefined values: nothing.
+ */
+export declare function useSectionGuideValues(key: string, values: Values | undefined): void;
+export {};

package/dist/guide/guide-styles.d.ts

@@ -10,4 +10,4 @@
  * before 0.1.68: 16px from the bottom (+ the safe area) on a phone, 22px on
  * desktop.
  */
-export declare const GUIDE_CSS = "\n[data-erp-guide-layer]{position:fixed;inset:0;z-index:1000;pointer-events:none;font-family:inherit;color:var(--popover-foreground,#1c2634);\n  --eg-scrim:rgba(12,20,34,.64);--eg-card:var(--popover,#fff);--eg-fg:var(--popover-foreground,#1c2634);\n  --eg-muted:var(--muted-foreground,#6d7886);--eg-soft:var(--muted,#eef3f9);--eg-line:var(--border,#e8ecf1);\n  --eg-primary:var(--primary,#3280dd);--eg-on-primary:var(--primary-foreground,#fff);\n  --eg-tint:color-mix(in oklab,var(--eg-primary) 13%,var(--eg-card));--eg-strong:color-mix(in oklab,var(--eg-primary) 82%,#000);\n  --eg-danger:var(--destructive,#d23b4b);--eg-ok:#1d9a5f;--eg-gold:#e6a417;\n  --eg-shadow:0 18px 50px -12px rgba(16,32,64,.35),0 4px 12px rgba(16,32,64,.08);line-height:1.5;font-size:14px}\n[data-erp-guide-layer] *{box-sizing:border-box}\n[data-erp-guide-layer] button{font:inherit;color:inherit;cursor:pointer}\n.eg-i{pointer-events:auto}\n.eg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n.eg-scrim-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}\n.eg-scrim-svg .eg-scrim-fill{fill:var(--eg-scrim);pointer-events:none}\n.eg-scrim-svg .eg-scrim-hit{fill:transparent;pointer-events:all}\n.eg-scrim{position:fixed;inset:0;background:var(--eg-scrim);pointer-events:auto}\n.eg-scrim.eg-light{background:rgba(12,20,34,.45)}\n.eg-scrim.eg-faint{background:rgba(12,20,34,.35)}\n.eg-ring{position:fixed;border-radius:12px;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--eg-primary)}\n.eg-ring.eg-move{transition:left .26s ease,top .26s ease,width .26s ease,height .26s ease}\n.eg-ring::after{content:\"\";position:absolute;inset:-6px;border-radius:15px;border:3px solid var(--eg-primary);animation:eg-pulse 1.6s ease-out infinite}\n.eg-ring.eg-flash::after{animation:eg-flash .5s ease 1}\n@keyframes eg-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}\n@keyframes eg-flash{0%,100%{opacity:1;transform:none}50%{opacity:.2}}\n.eg-hand{position:fixed;width:46px;height:46px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:eg-tap 1.1s ease-in-out infinite}\n.eg-hand svg{width:46px;height:46px;fill:#fff;stroke:#1c2634;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}\n.eg-hand.eg-flip svg{transform:scaleY(-1)}\n@keyframes eg-tap{0%,100%{transform:translate(6px,8px)}50%{transform:translate(0,0)}}\n.eg-bubble{position:fixed;left:0;top:0;width:320px;background:var(--eg-card);color:var(--eg-fg);border-radius:14px;box-shadow:var(--eg-shadow);padding:14px 16px 12px;border-top:4px solid var(--eg-primary);outline:none;pointer-events:auto}\n.eg-bubble.eg-err{border-top-color:var(--eg-danger)}\n.eg-bubble.eg-nudge{animation:eg-nudge .38s ease}\n@keyframes eg-nudge{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:2px}}\n.eg-b-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--eg-muted)}\n.eg-b-top .eg-mis{font-weight:600;color:var(--eg-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.eg-b-top .eg-cnt{white-space:nowrap;font-weight:600}\n.eg-pips{display:flex;gap:4px;margin:8px 0 10px}\n.eg-pips i{flex:1;height:4px;border-radius:2px;background:var(--eg-soft)}\n.eg-pips i.eg-d{background:var(--eg-primary)}\n.eg-pips i.eg-c{background:color-mix(in oklab,var(--eg-primary) 45%,var(--eg-card))}\n.eg-b-t{margin:0;font-size:16px;font-weight:600;line-height:1.45}\n.eg-b-w{margin:2px 0 0;font-size:13.5px;color:var(--eg-muted)}\n.eg-bubble.eg-err .eg-b-t{color:var(--eg-danger)}\n.eg-b-s{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--eg-danger)}\n.eg-k{display:inline-block;background:var(--eg-tint);color:var(--eg-strong);border-radius:7px;padding:0 7px;font-weight:600}\n.eg-b-f{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}\n.eg-b-f .eg-btn{height:34px;padding:0 14px;font-size:13.5px}\n.eg-exit{border:0;background:none;color:var(--eg-muted);font-size:12.5px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}\n.eg-exit:hover{color:var(--eg-fg)}\n.eg-arrow{position:absolute;width:14px;height:14px;background:var(--eg-card);transform:rotate(45deg);border-radius:2px}\n.eg-arrow.eg-top{background:var(--eg-primary)}\n.eg-bubble.eg-err .eg-arrow.eg-top{background:var(--eg-danger)}\n.eg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:600;white-space:nowrap}\n.eg-btn:focus-visible,.eg-exit:focus-visible,.eg-chip:focus-visible,.eg-x:focus-visible{outline:2px solid var(--eg-primary);outline-offset:2px}\n.eg-primary{background:var(--eg-primary);color:var(--eg-on-primary)!important}\n.eg-primary:hover{background:var(--eg-strong)}\n.eg-primary[disabled]{opacity:.55;cursor:default}\n.eg-ghost{background:var(--eg-card);border-color:var(--eg-line)}\n.eg-ghost:hover{background:var(--eg-soft)}\n.eg-ghost[disabled]{opacity:.55;cursor:default}\n.eg-link{background:none;border:0;color:var(--eg-muted);font-weight:500;padding:0 6px;height:32px}\n.eg-link:hover{color:var(--eg-fg);text-decoration:underline}\n.eg-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--eg-card);color:var(--eg-fg);border-radius:20px;box-shadow:var(--eg-shadow);padding:28px 28px 22px;text-align:center;outline:none;pointer-events:auto}\n.eg-modal.eg-pop{animation:eg-pop .32s cubic-bezier(.2,.9,.3,1.3)}\n@keyframes eg-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}\n.eg-modal h2{margin:6px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.2px;line-height:1.3}\n.eg-modal .eg-sub{margin:0;color:var(--eg-muted);font-size:14.5px}\n.eg-eyebrow{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--eg-strong)}\n.eg-actions{display:grid;gap:6px;margin-top:20px}\n.eg-actions .eg-btn{height:44px}\n.eg-badge{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:var(--eg-tint);color:var(--eg-strong)}\n.eg-badge svg.eg-ic{width:30px;height:30px}\n.eg-quests{list-style:none;padding:0;margin:18px 0 0;text-align:left;display:grid;gap:6px}\n.eg-quests li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;background:var(--eg-soft);font-size:14px}\n.eg-quests li .eg-n{width:26px;height:26px;border-radius:50%;background:var(--eg-card);border:1.5px solid var(--eg-line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--eg-muted);flex:none}\n.eg-quests li.eg-first{background:var(--eg-tint)}\n.eg-quests li.eg-first .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}\n.eg-quests li.eg-ok .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}\n.eg-quests li .eg-n svg.eg-ic{width:15px;height:15px;stroke-width:3}\n.eg-quests li .eg-t{flex:1}\n.eg-quests li small{color:var(--eg-muted);font-size:12px;white-space:nowrap}\n.eg-modal.eg-confirm{text-align:left;width:min(380px,calc(100vw - 32px));padding:22px}\n.eg-modal.eg-confirm h2{font-size:18px;margin-top:0}\n.eg-modal.eg-confirm .eg-actions{grid-template-columns:1fr 1fr}\n.eg-medal{width:84px;height:84px;border-radius:50%;margin:4px auto 10px;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#ffd666,var(--eg-gold));box-shadow:0 0 0 8px #fff4d6;animation:eg-stamp .5s cubic-bezier(.2,.9,.3,1.4) .1s both}\n.eg-medal svg.eg-ic{width:42px;height:42px;stroke-width:2.6}\n@keyframes eg-stamp{from{transform:scale(.3) rotate(-25deg);opacity:0}}\n.eg-prog{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--eg-muted);font-weight:600}\n.eg-prog .eg-bar{flex:1;height:8px;border-radius:4px;background:var(--eg-soft);overflow:hidden}\n.eg-prog .eg-bar i{display:block;height:100%;background:var(--eg-primary);border-radius:4px;transition:width .9s cubic-bezier(.2,.8,.2,1) .35s}\n.eg-burst{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}\n.eg-burst span{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:eg-conf 1.1s cubic-bezier(.15,.7,.3,1) forwards}\n@keyframes eg-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}\n.eg-card{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,16px) + 12px);transform:translateX(-50%);width:min(360px,calc(100vw - 32px));background:var(--eg-card);color:var(--eg-fg);border-radius:14px;box-shadow:var(--eg-shadow);padding:14px 16px;border-top:4px solid var(--eg-primary);pointer-events:auto;outline:none}\n.eg-card .eg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}\n.eg-loading{display:flex;align-items:center;gap:10px;font-weight:600}\n.eg-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--eg-soft);border-top-color:var(--eg-primary);animation:eg-spin .8s linear infinite;flex:none}\n@keyframes eg-spin{to{transform:rotate(360deg)}}\n.eg-chip{position:fixed;right:22px;bottom:var(--erp-guide-bottom-offset,22px);display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:24px;border:1px solid var(--eg-line);background:var(--eg-card);color:var(--eg-fg);box-shadow:0 8px 24px -8px rgba(16,32,64,.3);font-weight:600;font-size:14px;pointer-events:auto}\n.eg-chip svg{width:34px;height:34px}\n.eg-chip.eg-hi{animation:eg-hi 1.2s ease 2}\n@keyframes eg-hi{50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--eg-primary) 35%,transparent),0 8px 24px -8px rgba(16,32,64,.3)}}\n.eg-panel{position:fixed;right:22px;bottom:calc(var(--erp-guide-bottom-offset,22px) + 60px);width:360px;max-height:calc(100vh - 110px);overflow:auto;background:var(--eg-card);color:var(--eg-fg);border:1px solid var(--eg-line);border-radius:16px;box-shadow:var(--eg-shadow);outline:none;pointer-events:auto}\n.eg-panel-bd{display:none}\n.eg-q-h{display:flex;align-items:center;gap:10px;padding:16px 12px 4px 18px}\n.eg-q-h h2{margin:0;font-size:16px;font-weight:700;flex:1}\n.eg-q-h .eg-n{font-size:13px;color:var(--eg-muted);font-weight:600}\n.eg-x{width:34px;height:34px;border-radius:10px;border:0;background:none;display:grid;place-items:center;color:var(--eg-muted)}\n.eg-x:hover{background:var(--eg-soft)}\n.eg-x svg.eg-ic{width:18px;height:18px}\n.eg-panel .eg-prog{margin:6px 18px 8px}\n.eg-q-list{list-style:none;margin:0;padding:4px 10px 6px;display:grid;gap:2px}\n.eg-q-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:11px}\n.eg-q-item.eg-next{background:var(--eg-tint)}\n.eg-q-item .eg-n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--eg-line);display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--eg-muted);flex:none;background:var(--eg-card)}\n.eg-q-item.eg-next .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}\n.eg-q-item.eg-done .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}\n.eg-q-item.eg-done .eg-n svg.eg-ic{width:16px;height:16px;stroke-width:3}\n.eg-q-item.eg-dim .eg-n{opacity:.55}\n.eg-q-item.eg-just .eg-n{animation:eg-stamp .55s cubic-bezier(.2,.9,.3,1.4) .2s both}\n.eg-q-item .eg-t{flex:1;min-width:0}\n.eg-q-item .eg-t b{display:block;font-size:14px;font-weight:600}\n.eg-q-item.eg-done .eg-t b{color:var(--eg-muted)}\n.eg-q-item .eg-t small{display:block;font-size:12px;color:var(--eg-muted)}\n.eg-q-item .eg-t small.eg-sk{color:#b06a00}\n.eg-q-item .eg-t small.eg-lock{color:var(--eg-fg);font-weight:500}\n.eg-q-item .eg-btn{height:32px;padding:0 12px;font-size:13px}\n.eg-q-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px}\n.eg-q-acts .eg-link{height:22px;font-size:12px;padding:0 2px}\n.eg-q-f{border-top:1px solid var(--eg-line);padding:8px 12px;display:flex;justify-content:flex-end}\n.eg-toast{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,22px) + 62px);transform:translateX(-50%);background:#1c2634;color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--eg-shadow);max-width:calc(100vw - 32px);pointer-events:none}\nsvg.eg-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}\n@media (max-width:767px){\n  .eg-bubble{width:auto}\n  .eg-arrow{display:none}\n  .eg-modal{top:auto;bottom:12px;transform:translateX(-50%);width:calc(100vw - 24px);padding:24px 20px 18px}\n  .eg-modal.eg-pop{animation:eg-up .3s cubic-bezier(.2,.9,.3,1.1)}\n  .eg-modal .eg-actions .eg-btn{height:46px}\n  .eg-chip{right:16px;bottom:var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom)))}\n  .eg-panel-bd{display:block;position:fixed;inset:0;background:rgba(15,23,42,.38);pointer-events:auto}\n  .eg-panel{left:0;right:0;bottom:0;width:100%;max-height:85vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}\n  .eg-q-item{padding:12px 8px}\n  .eg-card{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) - 4px)}\n  .eg-toast{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) + 60px)}\n}\n@keyframes eg-up{from{opacity:0;transform:translate(-50%,30px)}}\n@media (prefers-reduced-motion:reduce){\n  [data-erp-guide-layer] *,[data-erp-guide-layer] *::before,[data-erp-guide-layer] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}\n  .eg-ring::after{animation:none!important;opacity:1;transform:none}\n  .eg-ring.eg-flash::after{animation:eg-flash .5s ease 1!important;animation-duration:.5s!important}\n  .eg-hand{animation:none!important;transform:translate(4px,6px)}\n  .eg-burst{display:none}\n  .eg-bubble.eg-nudge{animation:none!important;border-top-color:var(--eg-danger)}\n}\n";
+export declare const GUIDE_CSS = "\n[data-erp-guide-layer]{position:fixed;inset:0;z-index:1000;pointer-events:none;font-family:inherit;color:var(--popover-foreground,#1c2634);\n  --eg-scrim:rgba(12,20,34,.64);--eg-card:var(--popover,#fff);--eg-fg:var(--popover-foreground,#1c2634);\n  --eg-muted:var(--muted-foreground,#6d7886);--eg-soft:var(--muted,#eef3f9);--eg-line:var(--border,#e8ecf1);\n  --eg-primary:var(--primary,#3280dd);--eg-on-primary:var(--primary-foreground,#fff);\n  --eg-tint:color-mix(in oklab,var(--eg-primary) 13%,var(--eg-card));--eg-strong:color-mix(in oklab,var(--eg-primary) 82%,#000);\n  --eg-danger:var(--destructive,#d23b4b);--eg-ok:#1d9a5f;--eg-gold:#e6a417;\n  --eg-shadow:0 18px 50px -12px rgba(16,32,64,.35),0 4px 12px rgba(16,32,64,.08);line-height:1.5;font-size:14px}\n[data-erp-guide-layer] *{box-sizing:border-box}\n[data-erp-guide-layer] button{font:inherit;color:inherit;cursor:pointer}\n.eg-i{pointer-events:auto}\n.eg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}\n.eg-scrim-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}\n.eg-scrim-svg .eg-scrim-fill{fill:var(--eg-scrim);pointer-events:none}\n.eg-scrim-svg .eg-scrim-hit{fill:transparent;pointer-events:all}\n.eg-scrim{position:fixed;inset:0;background:var(--eg-scrim);pointer-events:auto}\n.eg-scrim.eg-light{background:rgba(12,20,34,.45)}\n.eg-scrim.eg-faint{background:rgba(12,20,34,.35)}\n.eg-ring{position:fixed;border-radius:12px;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--eg-primary)}\n.eg-ring.eg-move{transition:left .26s ease,top .26s ease,width .26s ease,height .26s ease}\n.eg-ring::after{content:\"\";position:absolute;inset:-6px;border-radius:15px;border:3px solid var(--eg-primary);animation:eg-pulse 1.6s ease-out infinite}\n.eg-ring.eg-flash::after{animation:eg-flash .5s ease 1}\n@keyframes eg-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}\n@keyframes eg-flash{0%,100%{opacity:1;transform:none}50%{opacity:.2}}\n.eg-hand{position:fixed;width:46px;height:46px;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35));animation:eg-tap 1.1s ease-in-out infinite}\n.eg-hand svg{width:46px;height:46px;fill:#fff;stroke:#1c2634;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}\n.eg-hand.eg-flip svg{transform:scaleY(-1)}\n@keyframes eg-tap{0%,100%{transform:translate(6px,8px)}50%{transform:translate(0,0)}}\n.eg-bubble{position:fixed;left:0;top:0;width:320px;background:var(--eg-card);color:var(--eg-fg);border-radius:14px;box-shadow:var(--eg-shadow);padding:14px 16px 12px;border-top:4px solid var(--eg-primary);outline:none;pointer-events:auto}\n.eg-bubble.eg-err{border-top-color:var(--eg-danger)}\n.eg-bubble.eg-nudge{animation:eg-nudge .38s ease}\n@keyframes eg-nudge{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:2px}}\n.eg-b-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--eg-muted)}\n.eg-b-top .eg-mis{font-weight:600;color:var(--eg-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.eg-b-top .eg-cnt{white-space:nowrap;font-weight:600}\n.eg-pips{display:flex;gap:4px;margin:8px 0 10px}\n.eg-pips i{flex:1;height:4px;border-radius:2px;background:var(--eg-soft)}\n.eg-pips i.eg-d{background:var(--eg-primary)}\n.eg-pips i.eg-c{background:color-mix(in oklab,var(--eg-primary) 45%,var(--eg-card))}\n.eg-b-t{margin:0;font-size:16px;font-weight:600;line-height:1.45}\n.eg-b-w{margin:2px 0 0;font-size:13.5px;color:var(--eg-muted)}\n.eg-bubble.eg-err .eg-b-t{color:var(--eg-danger)}\n.eg-b-s{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--eg-danger)}\n.eg-k{display:inline-block;background:var(--eg-tint);color:var(--eg-strong);border-radius:7px;padding:0 7px;font-weight:600}\n.eg-b-f{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}\n.eg-b-f .eg-btn{height:34px;padding:0 14px;font-size:13.5px}\n.eg-exit{border:0;background:none;color:var(--eg-muted);font-size:12.5px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}\n.eg-exit:hover{color:var(--eg-fg)}\n.eg-arrow{position:absolute;width:14px;height:14px;background:var(--eg-card);transform:rotate(45deg);border-radius:2px}\n.eg-arrow.eg-top{background:var(--eg-primary)}\n.eg-bubble.eg-err .eg-arrow.eg-top{background:var(--eg-danger)}\n.eg-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:10px;border:1px solid transparent;font-size:14px;font-weight:600;white-space:nowrap}\n.eg-btn:focus-visible,.eg-exit:focus-visible,.eg-chip:focus-visible,.eg-x:focus-visible{outline:2px solid var(--eg-primary);outline-offset:2px}\n.eg-primary{background:var(--eg-primary);color:var(--eg-on-primary)!important}\n.eg-primary:hover{background:var(--eg-strong)}\n.eg-primary[disabled]{opacity:.55;cursor:default}\n.eg-ghost{background:var(--eg-card);border-color:var(--eg-line)}\n.eg-ghost:hover{background:var(--eg-soft)}\n.eg-ghost[disabled]{opacity:.55;cursor:default}\n.eg-link{background:none;border:0;color:var(--eg-muted);font-weight:500;padding:0 6px;height:32px}\n.eg-link:hover{color:var(--eg-fg);text-decoration:underline}\n.eg-modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);overflow:auto;background:var(--eg-card);color:var(--eg-fg);border-radius:20px;box-shadow:var(--eg-shadow);padding:28px 28px 22px;text-align:center;outline:none;pointer-events:auto}\n.eg-modal.eg-pop{animation:eg-pop .32s cubic-bezier(.2,.9,.3,1.3)}\n@keyframes eg-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}\n.eg-modal h2{margin:6px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.2px;line-height:1.3}\n.eg-modal .eg-sub{margin:0;color:var(--eg-muted);font-size:14.5px}\n.eg-eyebrow{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--eg-strong)}\n.eg-actions{display:grid;gap:6px;margin-top:20px}\n.eg-actions .eg-btn{height:44px}\n.eg-badge{width:64px;height:64px;border-radius:18px;margin:0 auto 12px;display:grid;place-items:center;background:var(--eg-tint);color:var(--eg-strong)}\n.eg-badge svg.eg-ic{width:30px;height:30px}\n.eg-quests{list-style:none;padding:0;margin:18px 0 0;text-align:left;display:grid;gap:6px}\n.eg-quests li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;background:var(--eg-soft);font-size:14px}\n.eg-quests li .eg-n{width:26px;height:26px;border-radius:50%;background:var(--eg-card);border:1.5px solid var(--eg-line);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--eg-muted);flex:none}\n.eg-quests li.eg-first{background:var(--eg-tint)}\n.eg-quests li.eg-first .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}\n.eg-quests li.eg-ok .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}\n.eg-quests li .eg-n svg.eg-ic{width:15px;height:15px;stroke-width:3}\n.eg-quests li .eg-t{flex:1}\n.eg-quests li small{color:var(--eg-muted);font-size:12px;white-space:nowrap}\n.eg-modal.eg-confirm{text-align:left;width:min(380px,calc(100vw - 32px));padding:22px}\n.eg-modal.eg-confirm h2{font-size:18px;margin-top:0}\n.eg-modal.eg-confirm .eg-actions{grid-template-columns:1fr 1fr}\n.eg-medal{width:84px;height:84px;border-radius:50%;margin:4px auto 10px;display:grid;place-items:center;color:#fff;background:radial-gradient(circle at 35% 30%,#ffd666,var(--eg-gold));box-shadow:0 0 0 8px #fff4d6;animation:eg-stamp .5s cubic-bezier(.2,.9,.3,1.4) .1s both}\n.eg-medal svg.eg-ic{width:42px;height:42px;stroke-width:2.6}\n@keyframes eg-stamp{from{transform:scale(.3) rotate(-25deg);opacity:0}}\n.eg-prog{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--eg-muted);font-weight:600}\n.eg-prog .eg-bar{flex:1;height:8px;border-radius:4px;background:var(--eg-soft);overflow:hidden}\n.eg-prog .eg-bar i{display:block;height:100%;background:var(--eg-primary);border-radius:4px;transition:width .9s cubic-bezier(.2,.8,.2,1) .35s}\n.eg-burst{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}\n.eg-burst span{position:absolute;width:8px;height:12px;border-radius:2px;opacity:0;animation:eg-conf 1.1s cubic-bezier(.15,.7,.3,1) forwards}\n@keyframes eg-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}\n.eg-card{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,16px) + 12px);transform:translateX(-50%);width:min(360px,calc(100vw - 32px));background:var(--eg-card);color:var(--eg-fg);border-radius:14px;box-shadow:var(--eg-shadow);padding:14px 16px;border-top:4px solid var(--eg-primary);pointer-events:auto;outline:none}\n.eg-card .eg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}\n.eg-loading{display:flex;align-items:center;gap:10px;font-weight:600}\n.eg-spin{width:18px;height:18px;border-radius:50%;border:2.5px solid var(--eg-soft);border-top-color:var(--eg-primary);animation:eg-spin .8s linear infinite;flex:none}\n@keyframes eg-spin{to{transform:rotate(360deg)}}\n.eg-chip{position:fixed;right:22px;bottom:var(--erp-guide-bottom-offset,22px);display:flex;align-items:center;gap:10px;height:48px;padding:0 18px 0 8px;border-radius:24px;border:1px solid var(--eg-line);background:var(--eg-card);color:var(--eg-fg);box-shadow:0 8px 24px -8px rgba(16,32,64,.3);font-weight:600;font-size:14px;pointer-events:auto}\n.eg-chip svg{width:34px;height:34px}\n.eg-chip.eg-hi{animation:eg-hi 1.2s ease 2}\n@keyframes eg-hi{50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--eg-primary) 35%,transparent),0 8px 24px -8px rgba(16,32,64,.3)}}\n.eg-panel{position:fixed;right:22px;bottom:calc(var(--erp-guide-bottom-offset,22px) + 60px);width:360px;max-height:calc(100vh - 110px);overflow:auto;background:var(--eg-card);color:var(--eg-fg);border:1px solid var(--eg-line);border-radius:16px;box-shadow:var(--eg-shadow);outline:none;pointer-events:auto}\n.eg-panel-bd{display:none}\n.eg-q-h{display:flex;align-items:center;gap:10px;padding:16px 12px 4px 18px}\n.eg-q-h h2{margin:0;font-size:16px;font-weight:700;flex:1}\n.eg-q-h .eg-n{font-size:13px;color:var(--eg-muted);font-weight:600}\n.eg-x{width:34px;height:34px;border-radius:10px;border:0;background:none;display:grid;place-items:center;color:var(--eg-muted)}\n.eg-x:hover{background:var(--eg-soft)}\n.eg-x svg.eg-ic{width:18px;height:18px}\n.eg-panel .eg-prog{margin:6px 18px 8px}\n.eg-q-list{list-style:none;margin:0;padding:4px 10px 6px;display:grid;gap:2px}\n.eg-q-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:11px}\n.eg-q-item.eg-next{background:var(--eg-tint)}\n.eg-q-item .eg-n{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--eg-line);display:grid;place-items:center;font-size:12.5px;font-weight:700;color:var(--eg-muted);flex:none;background:var(--eg-card)}\n.eg-q-item.eg-next .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}\n.eg-q-item.eg-done .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}\n.eg-q-item.eg-done .eg-n svg.eg-ic{width:16px;height:16px;stroke-width:3}\n.eg-q-item.eg-dim .eg-n{opacity:.55}\n.eg-q-item.eg-just .eg-n{animation:eg-stamp .55s cubic-bezier(.2,.9,.3,1.4) .2s both}\n.eg-q-item .eg-t{flex:1;min-width:0}\n.eg-q-item .eg-t b{display:block;font-size:14px;font-weight:600}\n.eg-q-item.eg-done .eg-t b{color:var(--eg-muted)}\n.eg-q-item .eg-t small{display:block;font-size:12px;color:var(--eg-muted)}\n.eg-q-item .eg-t small.eg-sk{color:#b06a00}\n.eg-q-item .eg-t small.eg-lock{color:var(--eg-fg);font-weight:500}\n.eg-q-item .eg-btn{height:32px;padding:0 12px;font-size:13px}\n.eg-q-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px}\n.eg-q-acts .eg-link{height:22px;font-size:12px;padding:0 2px}\n.eg-q-f{border-top:1px solid var(--eg-line);padding:8px 12px;display:flex;justify-content:flex-end}\n.eg-q-sub{margin:6px 0 0;padding:12px 18px 2px;border-top:1px solid var(--eg-line);font-size:13px;font-weight:700;color:var(--eg-muted)}\n.eg-pg-item{padding:8px}\n.eg-pg-item .eg-t small.eg-new{color:var(--eg-strong);font-weight:600}\n.eg-card.eg-offer{left:auto;right:22px;transform:none;bottom:var(--erp-guide-bottom-offset,22px);width:min(320px,calc(100vw - 32px))}\n.eg-offer .eg-po-e{margin:0 0 2px;font-size:12px;font-weight:600;color:var(--eg-strong)}\n.eg-offer .eg-row .eg-btn{height:34px;padding:0 14px;font-size:13.5px}\n.eg-toast{position:fixed;left:50%;bottom:calc(var(--erp-guide-bottom-offset,22px) + 62px);transform:translateX(-50%);background:#1c2634;color:#fff;padding:10px 16px;border-radius:10px;font-size:13.5px;box-shadow:var(--eg-shadow);max-width:calc(100vw - 32px);pointer-events:none}\nsvg.eg-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}\n@media (max-width:767px){\n  .eg-bubble{width:auto}\n  .eg-arrow{display:none}\n  .eg-modal{top:auto;bottom:12px;transform:translateX(-50%);width:calc(100vw - 24px);padding:24px 20px 18px}\n  .eg-modal.eg-pop{animation:eg-up .3s cubic-bezier(.2,.9,.3,1.1)}\n  .eg-modal .eg-actions .eg-btn{height:46px}\n  .eg-chip{right:16px;bottom:var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom)))}\n  .eg-panel-bd{display:block;position:fixed;inset:0;background:rgba(15,23,42,.38);pointer-events:auto}\n  .eg-panel{left:0;right:0;bottom:0;width:100%;max-height:85vh;border-radius:18px 18px 0 0;padding-bottom:env(safe-area-inset-bottom)}\n  .eg-q-item{padding:12px 8px}\n  .eg-card{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) - 4px)}\n  .eg-card.eg-offer{left:16px;right:16px;width:auto;bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) - 4px)}\n  .eg-toast{bottom:calc(var(--erp-guide-bottom-offset,calc(16px + env(safe-area-inset-bottom))) + 60px)}\n}\n@keyframes eg-up{from{opacity:0;transform:translate(-50%,30px)}}\n@media (prefers-reduced-motion:reduce){\n  [data-erp-guide-layer] *,[data-erp-guide-layer] *::before,[data-erp-guide-layer] *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}\n  .eg-ring::after{animation:none!important;opacity:1;transform:none}\n  .eg-ring.eg-flash::after{animation:eg-flash .5s ease 1!important;animation-duration:.5s!important}\n  .eg-hand{animation:none!important;transform:translate(4px,6px)}\n  .eg-burst{display:none}\n  .eg-bubble.eg-nudge{animation:none!important;border-top-color:var(--eg-danger)}\n}\n";

package/dist/guide/guide-ui.d.ts

@@ -60,6 +60,17 @@ export interface BubbleModel {
     status?: string | null;
     showNext: boolean;
     showEndWithoutSave: boolean;
+    /**
+     * The bubble's top line in place of "ภารกิจ n · title": a page guide's
+     * "คู่มือหน้านี้ · <title>". Shell ≥ 0.1.74.
+     */
+    heading?: string;
+    /** The way out, in place of "จบการทบทวน" / "ออกจากไกด์" (a page guide: "ปิดคู่มือ"). */
+    exitLabel?: string;
+    /** ย้อนกลับ: a page guide's read step with a step before it. */
+    showBack?: boolean;
+    /** ถัดไป's label in place of "ถัดไป" (a page guide's last step: "เสร็จ"). */
+    nextLabel?: string;
 }
 export interface StepLayerProps {
     /** The spotlight (padded target), or null while there is none to show. */
@@ -101,6 +112,8 @@ export interface StepLayerProps {
     moving: boolean;
     onExit: () => void;
     onNext: () => void;
+    /** ย้อนกลับ (BubbleModel.showBack). */
+    onBack?: () => void;
     onEndWithoutSave: () => void;
     onRetry: () => void;
     onGoResume: () => void;
@@ -170,6 +183,23 @@ export declare function CompleteModal(p: {
     reduced: boolean;
     onFinish: () => void;
 }): import("react/jsx-runtime").JSX.Element;
+/**
+ * The offer of this page's guide on a first visit: a small card in the
+ * corner, not modal (the page stays usable; focus is not taken). Shell ≥ 0.1.74.
+ */
+export declare function PageOfferCard(p: {
+    title: string;
+    steps: number;
+    onStart: () => void;
+    onLater: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/** One page guide in the panel's "คู่มือแต่ละหน้า" list. */
+export interface PageItem {
+    key: string;
+    title: string;
+    /** This person has ended this version (ดูแล้ว); otherwise ใหม่. */
+    seen: boolean;
+}
 export declare function QuestChip({ done, total, pulse, onOpen }: {
     done: number;
     total: number;
@@ -201,6 +231,14 @@ export declare function QuestPanel(p: {
     onStart: (key: string, replay: boolean) => void;
     onDismiss: (key: string) => void;
     onHideChip: () => void;
+    /**
+     * The second section, "คู่มือแต่ละหน้า": the page guides this person has
+     * (shell ≥ 0.1.74). Omitted or empty: no section.
+     */
+    pages?: PageItem[];
+    /** false: the page guides alone (no missions for this person, or "คู่มือทุกหน้า"). */
+    showMissions?: boolean;
+    onOpenPage?: (key: string) => void;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function GuideToast({ text }: {
     text: string;

package/dist/guide/machine.d.ts

@@ -8,7 +8,8 @@
  */
 import type { GuideAbortAction, GuideContext, GuideMission, GuideStep, GuideSuite, GuideText, GuideTrigger } from "./types";
 import { type RouteParams } from "./patterns";
-import type { GuideAudience, GuideProgress, MissionEntry } from "./progress";
+import type { GuideAudience, GuideProgress, MissionEntry, PageRow, PagesMode } from "./progress";
+import { currentPage } from "./pages";
 export type StepPhase = 
 /** Looking for the target (dim page, "กำลังโหลด…"). */
 "waiting"
@@ -55,6 +56,15 @@ export type GuideScreen = {
      * need not change a real record to go on. Shell ≥ 0.1.73.
      */
     replayNext: boolean;
+    /** A page guide's step: the page key (the mission is `page:<key>`). Shell ≥ 0.1.74. */
+    page?: string;
+    /** A section guide's step: the section key (the mission is `section:<key>`). Shell ≥ 0.1.75. */
+    section?: string;
+}
+/** The first-visit offer of this page's guide: a small card, not modal. */
+ | {
+    name: "pageOffer";
+    page: string;
 } | {
     name: "celebrate";
     mission: string;
@@ -84,7 +94,44 @@ export interface GuideState {
      * the next idle moment (never mid-step). Not saved: a reload drops it.
      */
     pendingCelebrate: string[];
+    /** Who gets page guides ("optional" for every member while they are on). */
+    pageAudience: GuideAudience;
+    /** How page guides are offered: off, from "?" only, or also on a first visit. */
+    pagesMode: PagesMode;
+    /** Page rows by page key, as the server holds them (or as just written). */
+    pages: Record<string, PageRow>;
+    /** Section rows by section key (`<app>.section.<key>`). Shell ≥ 0.1.75. */
+    sections: Record<string, PageRow>;
+    /**
+     * The page or section guide being played: `write` when its row is still
+     * to be written (the offer was taken, or this person has never ended this
+     * version); a replay of a recorded one writes nothing.
+     */
+    pageRun: {
+        key: string;
+        write: boolean;
+        kind?: ReadKind;
+    } | null;
+    /** What the panel shows: everything, or the page guides alone ("คู่มือทุกหน้า"). */
+    panelSection: "all" | "pages";
+    /**
+     * Steps of the mission being played that passed by themselves (a click
+     * whose outcome already held): not counted in "ขั้นที่ x/y". Shell ≥ 0.1.75.
+     */
+    autoPassed: {
+        mission: string;
+        steps: number[];
+    } | null;
 }
+/** The page-guide part of the state, from the progress answer. */
+export interface GuidePagesInit {
+    pageAudience: GuideAudience;
+    pagesMode: PagesMode;
+    pages: Record<string, PageRow>;
+    sections?: Record<string, PageRow>;
+}
+/** A read-only guide: a page guide or a section guide. */
+export type ReadKind = "page" | "section";
 export interface ReplayPage {
     mission: string;
     /** The mission's abort anchors that were on the page at the start. */
@@ -107,6 +154,8 @@ export interface GuideEnv {
     targetValue: () => string;
     /** An app dialog (not the tour's) is open. */
     dialogOpen?: () => boolean;
+    /** The running (or opening) section guide's live values (GuideContext.values). */
+    values?: Readonly<Record<string, unknown>>;
 }
 export type GuideSignal = {
     kind: "api";
@@ -190,6 +239,7 @@ export type GuideAction = {
     type: "dismissComplete";
 } | {
     type: "openPanel";
+    section?: "all" | "pages";
 } | {
     type: "closePanel";
 } | {
@@ -209,6 +259,40 @@ export type GuideAction = {
 /** The host is idle: show a waiting `completeOn` celebration. */
  | {
     type: "idleCelebrate";
+}
+/** The host found this page's guide due (pageOfferDue): show the offer card. */
+ | {
+    type: "pageOffer";
+    page: string;
+}
+/** The offer's [เริ่ม]. */
+ | {
+    type: "pageOfferStart";
+}
+/** The offer's [ไม่ตอนนี้]: recorded, never offered again (this version). */
+ | {
+    type: "pageOfferLater";
+}
+/** "คู่มือหน้านี้" from "?", or a page in the panel's list (once on its page). */
+ | {
+    type: "startPage";
+    page: string;
+}
+/** ย้อนกลับ on a page guide's read step. */
+ | {
+    type: "back";
+}
+/** A page row came back from the server. */
+ | {
+    type: "pageRow";
+    key: string;
+    row: PageRow;
+    kind?: ReadKind;
+}
+/** "อธิบายส่วนนี้": a section guide on screen here (its button, or "?"). */
+ | {
+    type: "startSection";
+    section: string;
 };
 export type GuideEffect = {
     type: "save";
@@ -230,6 +314,14 @@ export type GuideEffect = {
  | {
     type: "abort";
     actions: GuideAbortAction[];
+}
+/** Write a page (or section) guide's row, once: `<app>.page.<key>` / `<app>.section.<key>`. */
+ | {
+    type: "savePage";
+    key: string;
+    version: number;
+    status: "completed" | "skipped";
+    kind?: ReadKind;
 };
 export interface GuideResult {
     state: GuideState;
@@ -244,11 +336,13 @@ export declare const COPY: {
     readonly replayEnded: "จบการทบทวนแล้ว";
     readonly hiddenToast: "ซ่อนแล้ว";
     readonly aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง";
+    readonly pageDone: "จบคู่มือหน้านี้";
+    readonly sectionDone: "จบคำอธิบายส่วนนี้";
     readonly bridgeTitle: "กดปุ่มเมนู";
     readonly bridgeWhy: (app: string) => string;
 };
 export declare const BRIDGE_TARGET = "shell.menu-toggle";
-export declare function initialGuideState(audience: GuideAudience, progress: GuideProgress): GuideState;
+export declare function initialGuideState(audience: GuideAudience, progress: GuideProgress, pages?: GuidePagesInit): GuideState;
 export declare function findMission(suite: GuideSuite, key: string | null | undefined): GuideMission | undefined;
 /**
  * Whether the user has this mission (GuideMission.visible). Without the
@@ -321,10 +415,14 @@ export declare function chipVisible(state: GuideState, suite: GuideSuite, ctx: G
  * whose `requires` they lack or whose `skipIf` holds is left out (the step on
  * screen always counts).
  */
-export declare function stepPosition(mission: GuideMission, index: number, env: GuideEnv, context: Readonly<Record<string, string>>): {
+export declare function stepPosition(mission: GuideMission, index: number, env: GuideEnv, context: Readonly<Record<string, string>>, autoPassed?: readonly number[]): {
     no: number;
     total: number;
 };
+/** A step entered now would pass at once: a click or select step whose route or visible outcome holds. */
+export declare function wouldAutoPass(step: GuideStep, env: GuideEnv): boolean;
+/** The steps of this mission that passed by themselves in this run. */
+export declare function autoPassedOf(state: GuideState, mission: string): readonly number[];
 /** "กด [บันทึก]" → "กด บันทึก" (for screen readers). */
 export declare function plainTitle(t: string): string;
 /** The step's status line (GuideStep.status): trimmed text, or null. */
@@ -342,4 +440,42 @@ export declare function completeTriggersOf(mission: GuideMission): GuideTrigger[
 export declare function passiveEventNames(suite: GuideSuite): string[];
 /** Missions whose `completeOn` this signal meets ({ api } and { event } only). */
 export declare function passiveMatches(suite: GuideSuite, sig: GuideSignal): GuideMission[];
+/** This page's guide for this person (the most specific match, if theirs). */
+export declare function pageHere(suite: GuideSuite, env: GuideEnv): ReturnType<typeof currentPage>;
+/** The page guide's row says this person has ended this version of it. */
+export declare function pageRecorded(state: GuideState, page: {
+    key: string;
+    version: number;
+}): boolean;
+/** Whether the first step this person sees has its target on screen (or none). */
+export declare function firstStepReady(suite: GuideSuite, pageKey: string, env: GuideEnv): boolean;
+/**
+ * The page guide to offer now, or null. Due when: pages mode is "offer" and
+ * this person has page guides; nothing else is up (no step, card, panel or
+ * celebration waiting); this page's guide is theirs, may be offered, and has
+ * no row of this version; its first step's target is on screen; no app
+ * dialog is open. The host adds the rest: the welcome not due on this
+ * route, a moment of nothing loading, the primary tab, not hidden.
+ */
+export declare function pageOfferDue(state: GuideState, suite: GuideSuite, env: GuideEnv): string | null;
+/** The section guide's row says this person has ended this version of it. */
+export declare function sectionRecorded(state: GuideState, section: {
+    key: string;
+    version: number;
+}): boolean;
+/** The section guides on screen here that this person has (the "?" entries, the buttons). */
+export declare function sectionsAvailable(suite: GuideSuite, env: GuideEnv): string[];
+/** The step before this one that this person sees, or -1. */
+export declare function previousShownIndex(mission: GuideMission, index: number, env: GuideEnv, context: Readonly<Record<string, string>>): number;
+/**
+ * Where ย้อนกลับ goes from a page guide's step, or null. The step before it
+ * that this person sees; from inside what a click opened (not a
+ * checkpoint) back to that click, closing it first (the step's abort,
+ * Escape by default). A click step whose result is still on screen (a tab
+ * switched) is passed over: entering it again would pass it at once.
+ */
+export declare function backTarget(mission: GuideMission, index: number, env: GuideEnv, context: Readonly<Record<string, string>>): {
+    index: number;
+    close: boolean;
+} | null;
 export declare function reduceGuide(state: GuideState, action: GuideAction, suite: GuideSuite, env: GuideEnv): GuideResult;

package/dist/guide/pages.d.ts

@@ -0,0 +1,79 @@
+/**
+ * Page guides ("คู่มือหน้านี้", shell 0.1.74): which page guides a suite
+ * really has (validation), which one is this page's (the most specific
+ * match), and how one runs as a mission. Pure: the tests run it in Node.
+ *
+ * A page guide runs through the missions' machinery as a synthetic mission
+ * `page:<key>` in replay mode, so nothing it does writes tour progress.
+ */
+import type { GuideContext, GuideMission, GuidePage, GuideSection, GuideSuite } from "./types";
+/** The synthetic mission key of a page guide: `page:<key>`. */
+export declare const PAGE_PREFIX = "page:";
+export declare function isPageMissionKey(key: string | null | undefined): boolean;
+export declare function pageKeyOf(missionKey: string | null | undefined): string | undefined;
+/** Why a page guide cannot run, or null when it can. */
+export declare function pageProblem(app: string, page: GuidePage): string | null;
+/**
+ * The suite's page guides that can run. A page guide with a commit, input or
+ * select step (it would save), a bad key or no route is dropped, with a
+ * warning in development; so is a second one with the same key.
+ */
+export declare function validPages(suite: GuideSuite): GuidePage[];
+export declare function findPage(suite: GuideSuite, key: string | null | undefined): GuidePage | undefined;
+/**
+ * The page guide as a mission the machine plays: `page:<key>`. Steps lose
+ * any `route` (the guide is the page's, and ends when it is left) and are
+ * checkpoints unless they say otherwise.
+ */
+export declare function pageMission(page: GuidePage): GuideMission;
+/** What the page matching needs to know about where the person is. */
+export interface PageWhere {
+    code: string;
+    pathname: string;
+    search: URLSearchParams;
+    isVisible: (anchor: string) => boolean;
+}
+/** How specific a route pattern is: its `?k=v` constraints, then its static segments. */
+export declare function routeSpecificity(pattern: string): [number, number];
+/**
+ * Whether the page guide applies here: one of its routes matches and its
+ * `when` anchor (if any) is on screen. The score ranks matches: `when`
+ * first, then query constraints, then static segments. Null when it does
+ * not apply.
+ */
+export declare function pageMatchScore(page: GuidePage, where: PageWhere): [number, number, number] | null;
+/** The most specific page guide that applies here, whoever it is for (first in the list on a tie). */
+export declare function matchingPage(suite: GuideSuite, where: PageWhere): GuidePage | null;
+/** Whether this person has the page guide: `visible` (only true) and `requires`. */
+export declare function pageShown(page: GuidePage, ctx: GuideContext): boolean;
+/**
+ * This page's guide for this person: the most specific match, when it is
+ * theirs. A more specific guide they do not have is not replaced by a less
+ * specific one (it would describe what is not on screen).
+ */
+export declare function currentPage(suite: GuideSuite, where: PageWhere, ctx: GuideContext): GuidePage | null;
+/** The page guides this person has, for the panel's list (those with an `href`). */
+export declare function listedPages(suite: GuideSuite, ctx: GuideContext): GuidePage[];
+/** The synthetic mission key of a section guide: `section:<key>`. */
+export declare const SECTION_PREFIX = "section:";
+export declare function isSectionMissionKey(key: string | null | undefined): boolean;
+export declare function sectionKeyOf(missionKey: string | null | undefined): string | undefined;
+/** Why a section guide cannot run, or null when it can. */
+export declare function sectionProblem(app: string, section: GuideSection): string | null;
+/** The suite's section guides that can run (as validPages: the rest dropped, with a warning in development). */
+export declare function validSections(suite: GuideSuite): GuideSection[];
+export declare function findSection(suite: GuideSuite, key: string | null | undefined): GuideSection | undefined;
+/** A live value is missing: undefined, null, "" or a number that is not finite. */
+export declare function valueMissing(v: unknown): boolean;
+/**
+ * The section guide as a mission the machine plays: `section:<key>`, read
+ * steps only, checkpoints unless they say otherwise. A step is skipped while
+ * a value it `needs` is missing, or when its title comes out empty.
+ */
+export declare function sectionMission(section: GuideSection): GuideMission;
+/** Whether the section guide applies here: one of its routes matches and its root is on screen. */
+export declare function sectionApplies(section: GuideSection, where: PageWhere): boolean;
+/** Whether this person has the section guide: `visible` (only true) and `requires`. */
+export declare function sectionShown(section: GuideSection, ctx: GuideContext): boolean;
+/** The section guides on screen here that this person has, in the suite's order. */
+export declare function sectionsHere(suite: GuideSuite, where: PageWhere, ctx: GuideContext): GuideSection[];

package/dist/guide/progress-sync.d.ts

@@ -8,7 +8,7 @@
  * No runtime imports beyond sibling pure modules: the tests run it in Node.
  */
 import type { GuideSuite } from "./types";
-import { type GuideProgress, type GuidesAnswer } from "./progress";
+import { type GuideProgress, type GuidesAnswer, type PageRow } from "./progress";
 /** What a progress call is about. */
 export interface GuideProgressRequest {
     /** The suite's app ("peoplx", "liff"). */
@@ -66,3 +66,12 @@ export declare function loadGuides(adapter: GuideProgressAdapter, suite: GuideSu
  * stored row, or null when it could not be saved.
  */
 export declare function storeGuides(adapter: GuideProgressAdapter, suite: GuideSuite, progress: GuideProgress): Promise<GuideProgress | null>;
+/**
+ * Writes a page guide's row (`<app>.page.<key>`), or a section guide's
+ * (`<app>.section.<key>`, kind "section"), once: the minimal body,
+ * with the same 409 handling as the tour's row. Another tab that already
+ * recorded this version wins (its row is returned, nothing is sent again);
+ * an older version's row is replaced with its rev; a newer one stops. Returns
+ * the stored row, or null when it could not be saved.
+ */
+export declare function storePageRow(adapter: GuideProgressAdapter, app: string, key: string, version: number, status: "completed" | "skipped", rev: number, kind?: "page" | "section"): Promise<PageRow | null>;

package/dist/guide/progress.d.ts

@@ -6,6 +6,8 @@
  * No runtime imports: the tests run this file in Node as it is.
  */
 export type GuideMode = "off" | "invite" | "forced";
+/** How page guides are offered (`guides.<app>.pages`): off, from "?" only, or also on a first visit. */
+export type PagesMode = "off" | "menu" | "offer";
 export type GuideAudience = "forced" | "optional" | "none";
 export type GuideRowStatus = "in_progress" | "completed" | "skipped" | "aborted";
 export type MissionStatus = "todo" | "active" | "done" | "skipped";
@@ -38,9 +40,23 @@ export interface GuideProgress {
     /** The status the server holds (to know when a PUT needs restart: true). */
     server_status: GuideRowStatus | null;
 }
+/** A page guide's row (`<app>.page.<key>`), as the client keeps it. */
+export interface PageRow {
+    version: number;
+    status: GuideRowStatus;
+    rev: number;
+}
 export interface GuidesAnswer {
     mode: GuideMode;
     audience: GuideAudience;
+    /** The page guides' switch; "off" from an API without it. */
+    pagesMode: PagesMode;
+    /** Who gets page guides: "optional" for every member while pages are not off. */
+    pageAudience: GuideAudience;
+    /** Page rows by page key (the part after `<app>.page.`). */
+    pages: Record<string, PageRow>;
+    /** Section rows by section key (the part after `<app>.section.`). Shell ≥ 0.1.75. */
+    sections: Record<string, PageRow>;
     /** The suite's row; a fresh one when the user has none or an older version. */
     progress: GuideProgress;
     /** The server holds a newer version than this app's tour: do not run. */
@@ -58,6 +74,17 @@ export declare function parseGuidesAnswer(payload: unknown, suite: {
     version: number;
     app: string;
 }): GuidesAnswer | null;
+/** The row key of a page guide, `<app>.page.<key>`, or a section guide, `<app>.section.<key>`. */
+export declare function pageRowKey(app: string, key: string, kind?: "page" | "section"): string;
+/** Page (or section) rows among the list's rows, by key. Off-shape rows are left out. */
+export declare function parsePageRows(rows: unknown[], app: string, kind?: "page" | "section"): Record<string, PageRow>;
+/** One page row (a list entry, a PUT answer, a 409's `current`); null when off-shape. */
+export declare function parsePageRow(raw: unknown): PageRow | null;
+/**
+ * A page row's PUT body: the least the server takes. Written once per page
+ * and version (finished: completed; not now, exited or left: skipped).
+ */
+export declare function pageBody(app: string, version: number, rev: number, status: "completed" | "skipped"): Record<string, unknown>;
 /** The PUT body for the client's state. Drops keys the server would refuse. */
 export declare function putBody(p: GuideProgress, app: string): Record<string, unknown>;
 /**

package/dist/guide/section-button.d.ts

@@ -0,0 +1,12 @@
+export interface SectionGuideButtonProps {
+    /** The GuideSection's key. */
+    guideKey: string;
+    /**
+     * The numbers the guide's copy uses (`ctx.values`), from this render.
+     * Optional: the section may call `useSectionGuideValues` itself instead.
+     */
+    values?: Readonly<Record<string, unknown>>;
+    /** Replaces the default look (a 22px round icon button in the text colour). */
+    className?: string;
+}
+export declare function SectionGuideButton({ guideKey, values, className }: SectionGuideButtonProps): import("react/jsx-runtime").JSX.Element | null;