@eintrek/erp-shell 0.1.77 → 0.1.79

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

@@ -2827,6 +2827,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.
@@ -3196,9 +3227,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 {
@@ -4397,36 +4428,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] = React.useState(false);
+    const primaryRef = React.useRef(false);
+    const takeoverRef = React.useRef(() => Promise.resolve());
     React.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 = React.useCallback(() => takeoverRef.current(), []);
+    return { primary, takeover };
 }
 /* ------------------------------------------------------------------ */
 /* Putting the page back after a replay                                 */
@@ -4535,7 +4611,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 = React.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] = React.useState(null);
@@ -4544,7 +4622,8 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     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));
+    // Every tab reads progress (0.1.78): the "?" menu is shown in all of them.
+    const enabled = missionsReady || (hasPages && pagesReady);
     const loaded = React.useRef(false);
     React.useEffect(() => {
         if (!enabled || loaded.current)
@@ -4568,8 +4647,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] = React.useState(null);
@@ -4662,6 +4745,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 });
@@ -4718,6 +4804,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();
                     });
                 }
             }
@@ -4764,6 +4853,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 = React.useRef(null);
+    const refreshNow = React.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 = React.useRef(refreshNow);
+    refreshRef.current = refreshNow;
+    React.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]);
+    React.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.
+    React.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 = React.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 = React.useRef(false);
@@ -5412,12 +5590,13 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
         !due;
     useAfterIdle(passiveDue, PASSIVE_IDLE_MS, busy, () => dispatchRef.current({ type: "idleCelebrate" }), [state?.pendingCelebrate?.join(",")]);
     React.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]);
     React.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:
@@ -5425,7 +5604,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
     const hasWhen = React.useMemo(() => validPages(suite).some(p => !!p.when) || validSections(suite).length > 0, [suite]);
     const [domTick, setDomTick] = React.useState(0);
     React.useEffect(() => {
-        if (!pagesLive || !hasWhen || typeof MutationObserver === "undefined")
+        if (!pagesOn || !hasWhen || typeof MutationObserver === "undefined")
             return;
         let t = null;
         const obs = new MutationObserver(records => {
@@ -5449,18 +5628,18 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             if (t)
                 clearTimeout(t);
         };
-    }, [pagesLive, hasWhen]);
+    }, [pagesOn, hasWhen]);
     const hasState = !!state;
-    const pageNow = React.useMemo(() => (pagesLive && hasState ? pageHere(suite, env()) : null), 
+    const pageNow = React.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 = React.useMemo(() => (pagesLive && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesLive, suite, ctxIdle]);
-    const sectionsNow = React.useMemo(() => pagesLive && hasState && hasSections
+    [pagesOn, hasState, suite, env, pathname, search, factsKey, domTick]);
+    const listed = React.useMemo(() => (pagesOn && ctxIdle ? listedPages(suite, ctxIdle) : []), [pagesOn, suite, ctxIdle]);
+    const sectionsNow = React.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 = React.useCallback((key) => {
         openingSection.current = key;
@@ -5471,14 +5650,14 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             openingSection.current = null;
         }
     }, []);
-    const flowsNow = React.useMemo(() => pagesLive && hasState && hasFlows
+    const flowsNow = React.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 = 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 flowsListed = React.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 = React.useCallback((key) => dispatchRef.current({ type: "startFlow", flow: key }), []);
     const openPageHere = React.useCallback(() => {
         const p = pageHere(suite, env());
@@ -5486,7 +5665,7 @@ function GuideRuntimeInner({ config, organizationId, code, routing, progress: pr
             dispatchRef.current({ type: "startPage", page: p.key });
     }, [suite, env]);
     React.useEffect(() => {
-        if (!pagesLive || !hasState) {
+        if (!pagesOn || !hasState) {
             publishPageGuides(null, null, null);
             return;
         }
@@ -5496,10 +5675,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]);
     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.
@@ -5696,6 +5875,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] = React.useState(false);
+    React.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 ---------------- */
@@ -5803,7 +6008,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";
@@ -5956,4 +6161,4 @@ exports.useGuideEntry = useGuideEntry;
 exports.usePageGuideEntry = usePageGuideEntry;
 exports.usePageGuides = usePageGuides;
 exports.useSectionGuideValues = useSectionGuideValues;
-//# sourceMappingURL=format-DQLPHq7h.cjs.map
+//# sourceMappingURL=format-CFXhGhta.cjs.map