@eintrek/erp-shell 0.1.77 → 0.1.79

package/README.md

@@ -176,6 +176,30 @@ progress API: `API.md` next to it.
   shell's adapters), `guide-ui.tsx`, `guide-styles.ts`. Tests:
   `src/guide/*.test.ts`.
 
+### 0.1.79
+
+- **The ภารกิจ chip no longer covers dialogs.** The guide layer sits above every
+  dialog, and the chip sat at the dialog's bottom right, over its buttons, in
+  every app. While an app dialog (Radix dialog or alert dialog) is open, the
+  chip is not drawn; it comes back when the dialog closes.
+
+### 0.1.78
+
+- **Every tab shows the "?" menu.** Each tab of an app reads guides/me and
+  publishes "ไกด์เริ่มต้น n/N", "คู่มือหน้านี้", "คู่มือทุกหน้า", "พาทำงาน",
+  "อธิบายส่วนนี้" and the SectionGuideButtons. Before, only the tab holding
+  the Web Lock did, so with two tabs open "?" went straight to ช่วยเหลือ in
+  the other (since 0.1.74 every guide item was lost there).
+- **One tab runs.** Steps, offers, the welcome, celebrations and saves stay
+  with the lock holder. Pressing a guide item in another tab makes that tab
+  the runner: it steals the lock, reads progress fresh and runs the item;
+  the old holder stops what it was running, silently and without writing,
+  and waits its turn again. Nothing resumes by itself in a tab taken over.
+- **Progress reaches every tab.** A tab that saves posts "saved" on a
+  BroadcastChannel (`erp-guide:<orgId>:<app>`); the others read guides/me
+  again (bypassing the 5-minute cache), as does any tab coming back into
+  view, so n/N and ดูแล้ว stay right.
+
 ### 0.1.77
 
 Fixes from the apps' first week on 0.1.76.

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

@@ -2807,6 +2807,37 @@ function reduceGuide(state, action, suite, env) {
             d.state = { ...d.state, pages: { ...d.state.pages, [action.key]: action.row } };
             break;
         }
+        case "yield": {
+            const run = d.state.pageRun;
+            if (run?.kind === "flow" && run.context)
+                withProgress(d, { context: run.context });
+            d.state = { ...d.state, pageRun: null, replayPage: null, panelOpen: false, justDone: null, pendingCelebrate: [] };
+            setScreen(d, { name: "idle" });
+            break;
+        }
+        case "refresh": {
+            const p = action.progress;
+            const local = d.state.progress;
+            // The server's row when it is this version and not behind this tab's.
+            if (p.guide_version === local.guide_version && p.rev >= local.rev)
+                d.state = { ...d.state, progress: p };
+            const newer = (server, mine) => {
+                const out = { ...(mine ?? {}) };
+                for (const [k, r] of Object.entries(server ?? {})) {
+                    const m = out[k];
+                    if (!m || r.version > m.version || (r.version === m.version && r.rev >= m.rev))
+                        out[k] = r;
+                }
+                return out;
+            };
+            d.state = {
+                ...d.state,
+                pages: newer(action.pages, d.state.pages),
+                sections: newer(action.sections, d.state.sections),
+                flows: newer(action.flows, d.state.flows),
+            };
+            break;
+        }
         case "startSection": {
             // Never offered: only on request. Never over a mission step, a
             // welcome, a gate or a celebration; only on screen, only theirs.
@@ -3176,9 +3207,9 @@ function conflictOf(err) {
     return null;
 }
 /** The GET, parsed for this suite; null (show nothing) on any failure or odd answer. */
-async function loadGuides(adapter, suite, signal) {
+async function loadGuides(adapter, suite, signal, fresh = false) {
     try {
-        const raw = await adapter.fetchProgress({ app: suite.app, guideKey: suite.key, signal });
+        const raw = await adapter.fetchProgress({ app: suite.app, guideKey: suite.key, signal, ...(fresh ? { fresh: true } : {}) });
         return parseGuidesAnswer(raw, suite);
     }
     catch {
@@ -4377,36 +4408,81 @@ const flowMirrorKey = (orgId, suite) => `erp-guide-flow-run:${orgId}:${suite.app
 /* One tab at a time                                                    */
 /* ------------------------------------------------------------------ */
 /**
- * Whether this tab runs the tour. With two tabs open, the first holds a Web
- * Lock and the second shows nothing until the first goes away.
+ * Whether this tab runs the tour: one tab at a time holds a Web Lock and
+ * runs steps, offers, the welcome and saves. Every other tab still reads
+ * progress and shows the "?" menu (shell ≥ 0.1.78); pressing one of its
+ * guide items calls `takeover`, which steals the lock. The tab it was
+ * stolen from goes back to waiting its turn (and yields what it was running).
+ * Without Web Locks every tab runs, as before.
  */
 function usePrimaryTab(name) {
     const [primary, setPrimary] = useState(false);
+    const primaryRef = useRef(false);
+    const takeoverRef = useRef(() => Promise.resolve());
     useEffect(() => {
         const locks = (typeof navigator !== "undefined" ? navigator.locks : undefined);
+        const set = (v) => {
+            primaryRef.current = v;
+            setPrimary(v);
+        };
         if (!locks?.request) {
-            setPrimary(true);
+            set(true);
+            takeoverRef.current = () => Promise.resolve();
             return;
         }
-        const abort = new AbortController();
+        let alive = true;
+        let gen = 0;
+        let pending = null;
         let release = null;
-        locks
-            .request(name, { signal: abort.signal }, () => {
-            setPrimary(true);
-            return new Promise(resolve => {
-                release = resolve;
+        let waiters = [];
+        const queue = (steal) => {
+            const my = ++gen;
+            const ac = new AbortController();
+            pending = steal ? null : ac;
+            locks
+                .request(name, steal ? { steal: true } : { signal: ac.signal }, () => {
+                if (!alive || my !== gen)
+                    return undefined;
+                pending = null;
+                set(true);
+                const w = waiters;
+                waiters = [];
+                w.forEach(f => f());
+                return new Promise(resolve => {
+                    release = resolve;
+                });
+            })
+                .catch(() => {
+                // Stolen by another tab (or this request aborted): not the runner;
+                // wait for the lock again.
+                if (!alive || my !== gen)
+                    return;
+                release = null;
+                set(false);
+                queue(false);
             });
-        })
-            .catch(() => {
-            /* aborted on unmount */
+        };
+        queue(false);
+        takeoverRef.current = () => new Promise(resolve => {
+            if (primaryRef.current) {
+                resolve();
+                return;
+            }
+            waiters.push(resolve);
+            pending?.abort();
+            queue(true);
         });
         return () => {
-            abort.abort();
+            alive = false;
+            pending?.abort();
             release?.();
-            setPrimary(false);
+            waiters.forEach(f => f());
+            waiters = [];
+            set(false);
         };
     }, [name]);
-    return primary;
+    const takeover = useCallback(() => takeoverRef.current(), []);
+    return { primary, takeover };
 }
 /* ------------------------------------------------------------------ */
 /* Putting the page back after a replay                                 */
@@ -4515,7 +4591,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     busyRef.current = busy;
     // No menu: never a menu step (the machine sees it as always open).
     const sidebarOpen = menu ? !!menu.open : true;
-    const primary = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
+    const { primary, takeover } = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
+    const primaryRef = useRef(primary);
+    primaryRef.current = primary;
     // Progress: read once this tab runs the tour and the app is ready (for
     // the missions, or for the page guides alone: config.pagesReady).
     const [answer, setAnswer] = useState(null);
@@ -4524,7 +4602,8 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const hasPages = useMemo(() => validPages(suite).length > 0 || validSections(suite).length > 0 || validFlows(suite).length > 0, [suite]);
     const hasFlows = useMemo(() => validFlows(suite).length > 0, [suite]);
     const hasSections = useMemo(() => validSections(suite).length > 0, [suite]);
-    const enabled = primary && (missionsReady || (hasPages && pagesReady));
+    // Every tab reads progress (0.1.78): the "?" menu is shown in all of them.
+    const enabled = missionsReady || (hasPages && pagesReady);
     const loaded = useRef(false);
     useEffect(() => {
         if (!enabled || loaded.current)
@@ -4548,8 +4627,12 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     }, [enabled, suite]);
     // The missions run for their audience; the page guides for theirs (every
     // member while pages are on), each with its own ready.
-    const missionsLive = !!answer && answer.audience !== "none" && !answer.newerOnServer && primary && missionsReady && !hidden;
-    const pagesLive = !!answer && hasPages && answer.pageAudience !== "none" && primary && pagesReady && !hidden;
+    // On: this person has them here (every tab, for the "?" menu). Live: this
+    // tab runs them (the primary tab only): steps, offers, the welcome, saves.
+    const missionsOn = !!answer && answer.audience !== "none" && !answer.newerOnServer && missionsReady && !hidden;
+    const pagesOn = !!answer && hasPages && answer.pageAudience !== "none" && pagesReady && !hidden;
+    const missionsLive = missionsOn && primary;
+    const pagesLive = pagesOn && primary;
     const live = missionsLive || pagesLive;
     /* ---------------- machine ---------------- */
     const [state, setState] = useState(null);
@@ -4642,6 +4725,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 const row = await storeGuides(adapterRef.current, suite, cur.progress);
                 if (row)
                     savedKey.current = payloadKey(row, suite.app);
+                // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                if (row)
+                    announceSaved();
                 if (row && stateRef.current) {
                     // eslint-disable-next-line @typescript-eslint/no-use-before-define
                     dispatchRef.current({ type: "serverRow", progress: row });
@@ -4698,6 +4784,9 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                         // eslint-disable-next-line @typescript-eslint/no-use-before-define
                         if (row)
                             dispatchRef.current({ type: "pageRow", key: e.key, row, kind });
+                        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                        if (row)
+                            announceSaved();
                     });
                 }
             }
@@ -4744,6 +4833,95 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 clearTimeout(toastTimer.current);
         };
     }, [flushSave]);
+    /* ---------------- other tabs (0.1.78) ---------------- */
+    // Progress saved in one tab reaches the others: a message on a channel
+    // per organisation and app, and a fresh read when a tab comes back into
+    // view. Only the server's rows are read, never another tab's state.
+    const channelRef = useRef(null);
+    const refreshNow = useCallback(async () => {
+        const a = await loadGuides(adapterRef.current, suite, undefined, true);
+        const cur = stateRef.current;
+        if (!a || !cur)
+            return;
+        // The runner's own state wins while it is running something.
+        if (primaryRef.current && (cur.screen.name !== "idle" || saving.current))
+            return;
+        if (a.progress.guide_version === cur.progress.guide_version && a.progress.rev >= cur.progress.rev) {
+            savedKey.current = a.progress.rev > 0 ? payloadKey(a.progress, suite.app) : null;
+        }
+        dispatchRef.current({ type: "refresh", progress: a.progress, pages: a.pages, sections: a.sections, flows: a.flows });
+    }, [suite]);
+    const refreshRef = useRef(refreshNow);
+    refreshRef.current = refreshNow;
+    useEffect(() => {
+        if (typeof BroadcastChannel === "undefined")
+            return;
+        let ch;
+        try {
+            ch = new BroadcastChannel(`erp-guide:${organizationId}:${suite.app}`);
+        }
+        catch {
+            return;
+        }
+        channelRef.current = ch;
+        ch.onmessage = (e) => {
+            if (e.data?.type === "saved")
+                void refreshRef.current();
+        };
+        return () => {
+            channelRef.current = null;
+            ch.close();
+        };
+    }, [organizationId, suite.app]);
+    useEffect(() => {
+        const onVisible = () => {
+            if (document.visibilityState === "visible" && stateRef.current)
+                void refreshRef.current();
+        };
+        document.addEventListener("visibilitychange", onVisible);
+        return () => document.removeEventListener("visibilitychange", onVisible);
+    }, []);
+    function announceSaved() {
+        try {
+            channelRef.current?.postMessage({ type: "saved" });
+        }
+        catch {
+            /* a closed channel: the next visibility change reads again */
+        }
+    }
+    // The tab that lost the lock stops cleanly: whatever it was running ends
+    // silently, without writing.
+    useEffect(() => {
+        if (primary || !stateRef.current)
+            return;
+        const cur = stateRef.current;
+        if (saveTimer.current) {
+            clearTimeout(saveTimer.current);
+            saveTimer.current = null;
+        }
+        if (cur.screen.name !== "idle" || cur.panelOpen)
+            dispatchRef.current({ type: "yield" });
+    }, [primary]);
+    /**
+     * A guide item pressed in this tab: run it here. In a tab that is not the
+     * runner, take the lock first (the other tab stops), read progress fresh,
+     * then do it. Nothing resumes by itself in a tab taken over this way.
+     */
+    const viaRunner = useCallback((fn) => {
+        if (primaryRef.current) {
+            fn();
+            return;
+        }
+        resumed.current = true;
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        flowResumed.current = true;
+        void takeover()
+            .then(() => refreshRef.current().catch(() => undefined))
+            .then(() => {
+            if (primaryRef.current)
+                fn();
+        });
+    }, [takeover]);
     /* ---------------- boot: resume, welcome ---------------- */
     const screen = state?.screen ?? { name: "idle" };
     const resumed = useRef(false);
@@ -5392,12 +5570,13 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         !due;
     useAfterIdle(passiveDue, PASSIVE_IDLE_MS, busy, () => dispatchRef.current({ type: "idleCelebrate" }), [state?.pendingCelebrate?.join(",")]);
     useEffect(() => {
-        if (!missionsLive || !state) {
+        // Every tab shows "ไกด์เริ่มต้น n/N"; pressing it runs it in this tab.
+        if (!missionsOn || !state) {
             publishGuideEntry(null, null);
             return;
         }
-        publishGuideEntry({ done, total }, () => dispatchRef.current({ type: "openPanel" }));
-    }, [missionsLive, state, done, total]);
+        publishGuideEntry({ done, total }, () => viaRunner(() => dispatchRef.current({ type: "openPanel" })));
+    }, [missionsOn, state, done, total, viaRunner]);
     useEffect(() => () => publishGuideEntry(null, null), []);
     /* ---------------- page guides: this page's, the offer, the list ---------------- */
     // `when` anchors (LIFF's sub-screens) come and go without a route change:
@@ -5405,7 +5584,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const hasWhen = useMemo(() => validPages(suite).some(p => !!p.when) || validSections(suite).length > 0, [suite]);
     const [domTick, setDomTick] = useState(0);
     useEffect(() => {
-        if (!pagesLive || !hasWhen || typeof MutationObserver === "undefined")
+        if (!pagesOn || !hasWhen || typeof MutationObserver === "undefined")
             return;
         let t = null;
         const obs = new MutationObserver(records => {
@@ -5429,18 +5608,18 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (t)
                 clearTimeout(t);
         };
-    }, [pagesLive, hasWhen]);
+    }, [pagesOn, hasWhen]);
     const hasState = !!state;
-    const pageNow = useMemo(() => (pagesLive && hasState ? pageHere(suite, env()) : null), 
+    const pageNow = useMemo(() => (pagesOn && hasState ? pageHere(suite, env()) : null), 
     // pathname/search/factsKey/domTick make it current.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pagesLive, hasState, suite, env, pathname, search, factsKey, domTick]);
-    const listed = useMemo(() => (pagesLive && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesLive, suite, ctxIdle]);
-    const sectionsNow = useMemo(() => pagesLive && hasState && hasSections
+    [pagesOn, hasState, suite, env, pathname, search, factsKey, domTick]);
+    const listed = useMemo(() => (pagesOn && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesOn, suite, ctxIdle]);
+    const sectionsNow = useMemo(() => pagesOn && hasState && hasSections
         ? sectionsAvailable(suite, env()).map(k => ({ key: k, title: findSection(suite, k)?.title ?? "" }))
         : [], 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [pagesLive, hasState, hasSections, suite, env, pathname, search, factsKey, domTick]);
+    [pagesOn, hasState, hasSections, suite, env, pathname, search, factsKey, domTick]);
     const sectionsSig = sectionsNow.map(x => x.key).join(",");
     const openSection = useCallback((key) => {
         openingSection.current = key;
@@ -5451,14 +5630,14 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             openingSection.current = null;
         }
     }, []);
-    const flowsNow = useMemo(() => pagesLive && hasState && hasFlows
+    const flowsNow = useMemo(() => pagesOn && 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]);
+    [pagesOn, hasState, hasFlows, suite, env, pathname, search, factsKey]);
     const flowsSig = flowsNow.map(x => x.key).join(",");
     /** The flows the panel lists: this person's, startable here or with somewhere to go. */
-    const flowsListed = useMemo(() => (pagesLive && hasFlows && ctxIdle ? shownFlows(suite, ctxIdle).filter(f => onFlowStart(f, { code, pathname, search: new URLSearchParams(search) }) || !!flowHref(f, ctxIdle)) : []), [pagesLive, hasFlows, suite, ctxIdle, code, pathname, search]);
+    const flowsListed = useMemo(() => (pagesOn && hasFlows && ctxIdle ? shownFlows(suite, ctxIdle).filter(f => onFlowStart(f, { code, pathname, search: new URLSearchParams(search) }) || !!flowHref(f, ctxIdle)) : []), [pagesOn, hasFlows, suite, ctxIdle, code, pathname, search]);
     const openFlowHere = useCallback((key) => dispatchRef.current({ type: "startFlow", flow: key }), []);
     const openPageHere = useCallback(() => {
         const p = pageHere(suite, env());
@@ -5466,7 +5645,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             dispatchRef.current({ type: "startPage", page: p.key });
     }, [suite, env]);
     useEffect(() => {
-        if (!pagesLive || !hasState) {
+        if (!pagesOn || !hasState) {
             publishPageGuides(null, null, null);
             return;
         }
@@ -5476,10 +5655,10 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             sections: sectionsNow,
             flows: flowsNow,
             flowsListed: flowsListed.length,
-        }, openPageHere, () => dispatchRef.current({ type: "openPanel", section: "pages" }), openSection, openFlowHere, () => dispatchRef.current({ type: "openPanel", section: "flows" }));
+        }, () => viaRunner(openPageHere), () => viaRunner(() => dispatchRef.current({ type: "openPanel", section: "pages" })), (key) => viaRunner(() => openSection(key)), (key) => viaRunner(() => openFlowHere(key)), () => viaRunner(() => dispatchRef.current({ type: "openPanel", section: "flows" })));
         // sectionsSig / flowsSig stand for sectionsNow / flowsNow.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [pagesLive, hasState, pageNow, listed.length, openPageHere, sectionsSig, openSection, flowsSig, flowsListed.length, openFlowHere]);
+    }, [pagesOn, hasState, pageNow, listed.length, openPageHere, sectionsSig, openSection, flowsSig, flowsListed.length, openFlowHere, viaRunner]);
     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.
@@ -5676,6 +5855,32 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         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]);
+    // The layer sits above every dialog, and a dialog's buttons sit at its
+    // bottom right, where the chip is: the chip covered them in every app.
+    // While an app dialog is open, the chip is not drawn.
+    const [appDialogShown, setAppDialogShown] = useState(false);
+    useEffect(() => {
+        if (!missionsLive || typeof MutationObserver === "undefined" || typeof document === "undefined" || !document.body)
+            return;
+        let raf = 0;
+        const check = () => {
+            raf = 0;
+            setAppDialogShown(appDialogOpen());
+        };
+        check();
+        const obs = new MutationObserver(records => {
+            if (records.every(r => inGuideLayer(r.target)))
+                return;
+            if (!raf)
+                raf = requestAnimationFrame(check);
+        });
+        obs.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-state", "role"] });
+        return () => {
+            obs.disconnect();
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    }, [missionsLive]);
     if (!live || !state || !layer || !ctxIdle)
         return null;
     /* ---------------- render ---------------- */
@@ -5783,7 +5988,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
                 .join(", ")
             : undefined,
     }));
-    const showChip = missionsLive && chipVisible(state, suite, ctxIdle);
+    const showChip = missionsLive && !appDialogShown && 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 === "all";
@@ -5903,4 +6108,4 @@ function thaiMonthYear(m, opts = {}) {
 }
 
 export { API_EVENT as A, useGuideEntry as B, usePageGuideEntry as C, usePageGuides as D, useSectionGuideValues as E, GUIDE_EVENT_PREFIX as G, SectionGuideButton as S, THAI_MONTHS_SHORT as T, GUIDE_LAYER_ATTRIBUTE as a, GuideErrorBoundary as b, GuideProgressConflict as c, GuideRuntime as d, apiCallDetail as e, emitGuideEvent as f, fillRoute as g, formatBaht as h, guideAnchor as i, guideMenuItems as j, guideMenuShown as k, loadGuides as l, matchApiPath as m, matchRoute as n, openFlow as o, openFlowsPanel as p, openGuidePanel as q, openPageGuide as r, openPagesPanel as s, openSectionGuide as t, reportApiCall as u, reportApiEvent as v, setSectionGuideValues as w, storeGuides as x, thaiMonth as y, thaiMonthYear as z };
-//# sourceMappingURL=format-ILrTMV4G.esm.js.map
+//# sourceMappingURL=format-BqUpxbzD.esm.js.map