@eintrek/erp-shell 0.1.62 → 0.1.64

package/dist/index.esm.js

@@ -1,19 +1,20 @@
 'use client';
 import * as React from 'react';
-import React__default, { useRef, useEffect, useMemo, useState, useCallback, createContext, useContext, Fragment, useSyncExternalStore, useTransition, Suspense } from 'react';
+import React__default, { useRef, useEffect, useMemo, useState, useCallback, createContext, useContext, Fragment, useSyncExternalStore, useTransition, useLayoutEffect, Suspense } from 'react';
 import { useSession, signOut } from 'next-auth/react';
-import { useQueryClient, useQuery, QueryClientContext, QueryClient, hashKey, MutationCache, QueryCache, QueryClientProvider } from '@tanstack/react-query';
+import { useQueryClient, useQuery, QueryClientContext, QueryClient, useIsFetching, hashKey, MutationCache, QueryCache, QueryClientProvider } from '@tanstack/react-query';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { cn, Button, Tooltip, TooltipTrigger, TooltipContent, Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator, BreadcrumbPage, Avatar, AvatarImage, AvatarFallback, Collapsible, CollapsibleTrigger, CollapsibleContent, Badge, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuItem, DropdownMenuSeparator, Skeleton, Dialog, DialogContent, DialogHeader, DialogTitle, Label, Textarea, DialogFooter, Card, CardHeader, CardContent } from '@eintrek/erp-theme';
-import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, UserCog, LayoutGrid, ExternalLink, CircleHelp, Loader2, LogOut, Calculator, Warehouse, FolderKanban, Users, Store, Headset, ChevronDown, Plus, ChevronsUpDown, ImagePlus, X, CircleCheck, ArrowLeft, Ban, Home, ArrowRight, Compass, ArrowUpRight, ContactRound, UserPlus } from 'lucide-react';
+import { PanelLeftClose, Menu, ChevronRight, Building2, Palette, ChevronUp, Sun, Moon, Monitor, Globe, UserCog, LayoutGrid, ExternalLink, CircleHelp, Loader2, LogOut, Calculator, Warehouse, FolderKanban, Users, Store, Headset, ChevronDown, Plus, ChevronsUpDown, Flag, MessageCircle, ImagePlus, X, CircleCheck, ArrowLeft, Ban, Home, ContactRound, UserPlus, ArrowRight, Compass, ArrowUpRight } from 'lucide-react';
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
-import { useRouter, usePathname, useParams } from 'next/navigation';
+import { useRouter, usePathname, useParams, useSearchParams } from 'next/navigation';
 import Link from 'next/link';
 import { createPortal } from 'react-dom';
 import { useTheme, ThemeProvider as ThemeProvider$1 } from 'next-themes';
 import axios, { isAxiosError, AxiosHeaders } from 'axios';
 export { isAxiosError } from 'axios';
+import { computePosition, offset, shift, arrow } from '@floating-ui/dom';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 /**
@@ -733,7 +734,7 @@ function SidebarFooter({ children, className }) {
  */
 function SidebarTrigger({ className }) {
     const { open, toggle } = useSidebar();
-    return (jsx("button", { onClick: toggle, className: cn("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 w-8 md:h-9 md:w-9 -ml-1", className), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", children: open ? (jsx(PanelLeftClose, { className: "h-4 w-4 text-primary-foreground" })) : (jsx(Menu, { className: "h-4 w-4 text-primary-foreground" })) }));
+    return (jsx("button", { onClick: toggle, className: cn("inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-8 w-8 md:h-9 md:w-9 -ml-1", className), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", "data-guide": "shell.menu-toggle", children: open ? (jsx(PanelLeftClose, { className: "h-4 w-4 text-primary-foreground" })) : (jsx(Menu, { className: "h-4 w-4 text-primary-foreground" })) }));
 }
 
 /**
@@ -1258,35 +1259,35 @@ let declaredApp = null;
 // The message the dialog should open on (the ตอบกลับ link's ?help=H1004),
 // until it is closed or left.
 let pendingRef = null;
-const listeners = new Set();
-function emit() {
-    listeners.forEach(l => l());
+const listeners$1 = new Set();
+function emit$1() {
+    listeners$1.forEach(l => l());
 }
-function subscribe(l) {
-    listeners.add(l);
+function subscribe$1(l) {
+    listeners$1.add(l);
     return () => {
-        listeners.delete(l);
+        listeners$1.delete(l);
     };
 }
 /** Opens the dialog — a no-op when no layout has mounted one. */
 function openHelp() {
     if (!open) {
         open = true;
-        emit();
+        emit$1();
     }
 }
 function closeHelp() {
     pendingRef = null;
     if (open) {
         open = false;
-        emit();
+        emit$1();
     }
 }
 /** Opens the dialog on one of the person's messages, by id or "H1004". */
 function openHelpOn(ref) {
     pendingRef = ref;
     open = true;
-    emit();
+    emit$1();
 }
 /** The message the dialog was asked to open on, if it has not been left. */
 function pendingHelpRef() {
@@ -1305,22 +1306,22 @@ function registerHelpHost() {
     hosts += 1;
     if (pendingRef)
         open = true;
-    emit();
+    emit$1();
     return () => {
         hosts -= 1;
         if (hosts <= 0) {
             hosts = 0;
             open = false;
         }
-        emit();
+        emit$1();
     };
 }
 function useHelpOpen() {
-    return useSyncExternalStore(subscribe, () => open, () => false);
+    return useSyncExternalStore(subscribe$1, () => open, () => false);
 }
 /** True while a dialog host is mounted, i.e. the ช่วยเหลือ entry works. */
 function useHelpAvailable() {
-    return useSyncExternalStore(subscribe, () => hosts > 0, () => false);
+    return useSyncExternalStore(subscribe$1, () => hosts > 0, () => false);
 }
 /**
  * Every app names itself when it builds its app-switcher links
@@ -1344,17 +1345,17 @@ function declaredHelpApp() {
 const OWNER_CHIP = "เจ้าของ";
 /** How many role names the card spells out before counting the rest. */
 const CARD_ROLE_LIMIT = 2;
-const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+const isRecord$2 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
 /**
  * The answer, checked. Anything that is not the shape the card needs — an
  * older API, a proxy's error page, another organisation's answer — is null,
  * and the card shows no role line.
  */
 function parseMyRoles(payload, organizationId) {
-    if (!isRecord(payload))
+    if (!isRecord$2(payload))
         return null;
     // Envelope { success, data } or the bare data.
-    const data = isRecord(payload.data) ? payload.data : payload;
+    const data = isRecord$2(payload.data) ? payload.data : payload;
     if (!Array.isArray(data.roles))
         return null;
     if (typeof data.organization_id === "string" && data.organization_id !== organizationId) {
@@ -1363,7 +1364,7 @@ function parseMyRoles(payload, organizationId) {
     const roles = [];
     const seen = new Set();
     for (const r of data.roles) {
-        if (!isRecord(r))
+        if (!isRecord$2(r))
             continue;
         const name = typeof r.name_th === "string" ? r.name_th.trim() : "";
         const key = typeof r.key === "string" ? r.key : "";
@@ -1584,6 +1585,242 @@ async function retryWithStoredOrganizations(config, status, send) {
     return undefined;
 }
 
+/**
+ * Route and API-path patterns for tour steps.
+ *
+ * No runtime imports: the tests run this file in Node as it is.
+ */
+const trimSlash = (p) => (p.length > 1 ? p.replace(/\/+$/, "") : p);
+function splitPattern(pattern) {
+    const q = pattern.indexOf("?");
+    if (q < 0)
+        return { path: pattern, query: new URLSearchParams() };
+    return { path: pattern.slice(0, q), query: new URLSearchParams(pattern.slice(q + 1)) };
+}
+function paramName(segment) {
+    const bracket = /^\[([A-Za-z0-9_]+)\]$/.exec(segment);
+    if (bracket)
+        return bracket[1];
+    const colon = /^:([A-Za-z0-9_]+)$/.exec(segment);
+    return colon ? colon[1] : null;
+}
+function safeDecode(s) {
+    try {
+        return decodeURIComponent(s);
+    }
+    catch {
+        return s;
+    }
+}
+/**
+ * Matches a Next-style page pattern ("/[code]/employee/[id]", optionally
+ * "?tab=job") against a path and query. `[code]`, when given, must be the
+ * organisation code. Returns the params, or null.
+ */
+function matchRoute(pattern, pathname, search, code) {
+    const { path, query } = splitPattern(pattern);
+    const want = trimSlash(path).split("/");
+    const have = trimSlash(pathname || "/").split("/");
+    if (want.length !== have.length)
+        return null;
+    const params = {};
+    for (let i = 0; i < want.length; i++) {
+        const name = paramName(want[i]);
+        if (name) {
+            if (!have[i])
+                return null;
+            params[name] = safeDecode(have[i]);
+            continue;
+        }
+        if (want[i] !== have[i])
+            return null;
+    }
+    if (code !== undefined && params.code !== undefined && params.code !== code) {
+        return null;
+    }
+    if ([...query.keys()].length > 0) {
+        const s = search instanceof URLSearchParams ? search : new URLSearchParams(search ?? "");
+        for (const [k, v] of query.entries()) {
+            if (s.get(k) !== v)
+                return null;
+        }
+    }
+    return params;
+}
+/** Fills a page pattern's params ("/[code]/x/[id]" → "/O1/x/42"); null if one is missing. */
+function fillRoute(pattern, params) {
+    const { path, query } = splitPattern(pattern);
+    const out = [];
+    for (const seg of path.split("/")) {
+        const name = paramName(seg);
+        if (!name) {
+            out.push(seg);
+            continue;
+        }
+        const v = params[name];
+        if (!v)
+            return null;
+        out.push(encodeURIComponent(v));
+    }
+    const qs = query.toString();
+    return out.join("/") + (qs ? `?${qs}` : "");
+}
+/**
+ * The path of a request, without origin, base URL query or hash:
+ * ("/shifts/4", "https://hr-api/api/v1") → "/api/v1/shifts/4".
+ */
+function requestPath(url, baseURL) {
+    const raw = url ?? "";
+    let full = raw;
+    if (!/^[a-z][a-z0-9+.-]*:\/\//i.test(raw) && baseURL) {
+        full = baseURL.replace(/\/+$/, "") + "/" + raw.replace(/^\/+/, "");
+    }
+    try {
+        return trimSlash(new URL(full, "http://local.invalid").pathname);
+    }
+    catch {
+        return trimSlash(full.split(/[?#]/)[0] || "/");
+    }
+}
+/**
+ * Whether a request path matches a step's API path: the pattern's segments
+ * must be the END of the path ("/shifts/[id]" matches "/api/v1/shifts/42");
+ * `[x]`/`:x` is one segment, `*` any number (including none). A RegExp is
+ * tested against the whole path.
+ */
+function matchApiPath(pattern, path) {
+    if (pattern instanceof RegExp)
+        return pattern.test(path);
+    const want = trimSlash(pattern).split("/").filter(Boolean);
+    const have = trimSlash(path).split("/").filter(Boolean);
+    // Try every suffix of the path as the place the pattern starts.
+    for (let start = 0; start <= have.length; start++) {
+        if (matchSegments(want, 0, have, start))
+            return true;
+    }
+    return false;
+}
+function matchSegments(want, wi, have, hi) {
+    if (wi === want.length)
+        return hi === have.length;
+    const seg = want[wi];
+    if (seg === "*") {
+        for (let k = hi; k <= have.length; k++) {
+            if (matchSegments(want, wi + 1, have, k))
+                return true;
+        }
+        return false;
+    }
+    if (hi >= have.length)
+        return false;
+    if (paramName(seg) || seg === have[hi])
+        return matchSegments(want, wi + 1, have, hi + 1);
+    return false;
+}
+/** "2xx" or an exact status. */
+function matchStatus(want, status) {
+    if (want === undefined || want === "2xx")
+        return status >= 200 && status < 300;
+    return status === want;
+}
+
+/**
+ * The tour's event bus and anchor helper — the parts an app calls.
+ *
+ * - `guideAnchor(key, id?)` → `{ "data-guide": key, "data-guide-id"?: id }`
+ * - `emitGuideEvent(name, detail?)` → window CustomEvent `erp:guide:<name>`
+ * - `reportApiEvent(responseOrError)` → window CustomEvent `erp:api`, which
+ *   the shell's own axios instance already sends for every answer. An app
+ *   with a second axios instance calls it from that instance's interceptor.
+ *
+ * Only method, path, status, the saved record's id and (on a refusal) the
+ * server's message go on the bus — never a request or response body.
+ *
+ * No runtime imports beyond sibling pure modules.
+ */
+const GUIDE_ATTRIBUTE = "data-guide";
+const GUIDE_ID_ATTRIBUTE = "data-guide-id";
+const GUIDE_LAYER_ATTRIBUTE = "data-erp-guide-layer";
+const API_EVENT = "erp:api";
+const GUIDE_EVENT_PREFIX = "erp:guide:";
+/** Spread onto the element a tour step points at. */
+function guideAnchor(key, id) {
+    return id === undefined || id === null || id === ""
+        ? { [GUIDE_ATTRIBUTE]: key }
+        : { [GUIDE_ATTRIBUTE]: key, [GUIDE_ID_ATTRIBUTE]: String(id) };
+}
+/** Announces an app event a step can wait for (`advanceOn: { event: name }`). */
+function emitGuideEvent(name, detail) {
+    if (typeof window === "undefined" || !name)
+        return;
+    const clean = {};
+    for (const [k, v] of Object.entries(detail ?? {})) {
+        if (typeof v === "string" || typeof v === "number")
+            clean[k] = String(v);
+    }
+    try {
+        window.dispatchEvent(new CustomEvent(GUIDE_EVENT_PREFIX + name, { detail: clean }));
+    }
+    catch {
+        /* never let the tour break the app */
+    }
+}
+const isRecord$1 = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+function idOf(data) {
+    const pick = (v) => typeof v === "string" && v ? v : typeof v === "number" ? String(v) : undefined;
+    if (!isRecord$1(data))
+        return undefined;
+    return pick(data.id) ?? (isRecord$1(data.data) ? pick(data.data.id) : undefined);
+}
+function messageOf(data) {
+    if (!isRecord$1(data))
+        return undefined;
+    const m = data.message ?? (isRecord$1(data.error) ? data.error.message : data.error);
+    return typeof m === "string" && m.trim() ? m.trim().slice(0, 200) : undefined;
+}
+/** The bus detail for an axios answer or error; null when it is neither. */
+function apiEventDetail(responseOrError) {
+    if (!isRecord$1(responseOrError))
+        return null;
+    const err = responseOrError;
+    // An AxiosError has .response (or none: network failure) and .config.
+    const isError = "isAxiosError" in responseOrError || ("response" in responseOrError && !("data" in responseOrError));
+    const res = isError ? err.response : responseOrError;
+    const config = (res?.config ?? err.config);
+    if (!config)
+        return null;
+    const status = typeof res?.status === "number" ? res.status : 0;
+    const detail = {
+        method: (config.method ?? "get").toUpperCase(),
+        path: requestPath(config.url, config.baseURL),
+        status,
+    };
+    if (status >= 200 && status < 300) {
+        const id = idOf(res?.data);
+        if (id)
+            detail.id = id;
+    }
+    else {
+        const msg = messageOf(res?.data);
+        if (msg)
+            detail.message = msg;
+    }
+    return detail;
+}
+/** Puts an axios answer (or error) on the bus. Safe to call with anything. */
+function reportApiEvent(responseOrError) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const detail = apiEventDetail(responseOrError);
+        if (detail)
+            window.dispatchEvent(new CustomEvent(API_EVENT, { detail }));
+    }
+    catch {
+        /* never let the tour break the app */
+    }
+}
+
 const isBrowser = () => typeof window !== "undefined";
 const isAuthEndpoint = (url) => !!url && url.includes("/api/auth/");
 const isAuthPage = () => isBrowser() && window.location.pathname.startsWith("/auth/");
@@ -1657,6 +1894,9 @@ instance.interceptors.response.use(response => {
     if (typeof window !== "undefined") {
         window.dispatchEvent(new CustomEvent("erp:employee-record-ok"));
     }
+    // The guided tour advances on saves that succeeded (method, path, status
+    // and the record's id only; never the body).
+    reportApiEvent(response);
     return response;
 }, async (error) => {
     const originalRequest = error.config;
@@ -1673,6 +1913,7 @@ instance.interceptors.response.use(response => {
             return instance(originalRequest);
         }
         await redirectToLogout();
+        reportApiEvent(error);
         return Promise.reject(toApiError(error));
     }
     // The server refuses every organisation-scoped call when the account has
@@ -1687,6 +1928,8 @@ instance.interceptors.response.use(response => {
     const listed = await retryWithStoredOrganizations(originalRequest, error.response?.status, config => instance(config));
     if (listed !== undefined)
         return listed;
+    // A refused save keeps the tour's step and shows the server's message.
+    reportApiEvent(error);
     return Promise.reject(toApiError(error));
 });
 
@@ -1713,7 +1956,7 @@ function platformApiBase(app) {
  * This package's version, attached to help messages so the back office can
  * tell which shell a report came from. Keep in step with package.json.
  */
-const SHELL_VERSION = "0.1.62";
+const SHELL_VERSION = "0.1.64";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -1906,13 +2149,13 @@ function describeAttached(app, ctx, email) {
 const myRolesQueryKey = (organizationId) => ["erp-shell", "my-roles", organizationId];
 // Only for a host that renders NavUser outside a QueryClientProvider: the
 // card still works there instead of throwing.
-let fallbackClient = null;
-function useShellQueryClient() {
+let fallbackClient$1 = null;
+function useShellQueryClient$1() {
     const provided = useContext(QueryClientContext);
     if (provided)
         return provided;
-    fallbackClient ?? (fallbackClient = new QueryClient());
-    return fallbackClient;
+    fallbackClient$1 ?? (fallbackClient$1 = new QueryClient());
+    return fallbackClient$1;
 }
 function subscribeStorage(onChange) {
     window.addEventListener("storage", onChange);
@@ -1938,7 +2181,7 @@ function useMyRoles(organizationId, enabled = true) {
         String(organizationId).trim() !== ""
         ? String(organizationId).trim()
         : null;
-    const client = useShellQueryClient();
+    const client = useShellQueryClient$1();
     return useQuery({
         queryKey: myRolesQueryKey(orgId),
         queryFn: async ({ signal }) => {
@@ -2385,11 +2628,11 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                     // A one-line row: a link, lit on its own page only. No open
                     // state, no title tooltip.
                     return (jsxs(React.Fragment, { children: [groupHeading, jsx(SidebarMenuItem, { children: jsx(SidebarMenuButton, { asChild: true, isActive: isItemActive, className: workspaceButton, children: jsxs(Link, { href: itemUrl, prefetch: false, className: "flex items-center w-full min-w-0 flex-1 " +
-                                            (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate", children: item.titleTh }), badge] }) }) })] }, item.id));
+                                            (workspace ? "gap-3" : "gap-2"), onClick: handleNavLinkClick, "aria-current": isItemActive ? "page" : undefined, ...guideAnchor(`nav.${item.id}`), children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate", children: item.titleTh }), badge] }) }) })] }, item.id));
                 }
                 // A group: its header opens and shuts it (the chevron says which).
                 // An open group is not the current page — only a row in it is.
-                return (jsxs(React.Fragment, { children: [groupHeading, jsx(Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: isOpen => setItemOpen(item.id, isOpen), className: "group/collapsible", children: jsxs(SidebarMenuItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuButton, { isActive: isItemActive, className: workspaceButton, children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate text-left", children: item.titleTh }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), item.subModules && (jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: workspace
+                return (jsxs(React.Fragment, { children: [groupHeading, jsx(Collapsible, { asChild: true, open: openIds.has(item.id), onOpenChange: isOpen => setItemOpen(item.id, isOpen), className: "group/collapsible", children: jsxs(SidebarMenuItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuButton, { isActive: isItemActive, className: workspaceButton, ...guideAnchor(`nav.${item.id}`), children: [icon, jsx("span", { id: item.id, className: "flex-1 truncate text-left", children: item.titleTh }), jsx(ChevronRight, { className: "ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" })] }) }), item.subModules && (jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: workspace
                                                 ? "mx-0 mt-1 mb-3 ml-[21px] gap-0.5 border-l border-sidebar-border pl-2.5 [&_a]:h-auto [&_a]:gap-[11px] [&_a]:px-3 [&_a]:py-2 [&_a]:text-xs [&_svg]:!size-[17px]"
                                                 : undefined, children: item.subModules.map((subItem, subIndex) => {
                                                 const subItemUrl = buildUrlWithCode(code, subItem.url);
@@ -2402,7 +2645,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                     subItem.subPages &&
                                                     subItem.subPages.length > 0) {
                                                     return (jsx(Collapsible, { asChild: true, defaultOpen: isSubItemActive || openSub === subIndex, className: "group/sub-collapsible", children: jsxs(SidebarMenuSubItem, { children: [jsx(CollapsibleTrigger, { asChild: true, children: jsxs(SidebarMenuSubButton, { className: "w-full", isActive: isSubItemActive &&
-                                                                            activeSubPage === null, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subItem.titleTh }), jsx(ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map((subPage, subPageIndex) => {
+                                                                            activeSubPage === null, ...guideAnchor(`nav.${subItem.id}`), children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subItem.titleTh }), jsx(ChevronDown, { className: "ml-auto size-4 transition-transform duration-200 group-data-[state=open]/sub-collapsible:rotate-180" })] }) }), jsx(CollapsibleContent, { children: jsx(SidebarMenuSub, { className: "ml-4", children: subItem.subPages.map((subPage, subPageIndex) => {
                                                                             const subPageUrl = buildUrlWithCode(code, subPage.url);
                                                                             const isSubPageActive = isSubItemActive &&
                                                                                 activeSubPage === subPageIndex;
@@ -2410,7 +2653,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                                             return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: "font-thai w-full text-sm" +
                                                                                         (isSubPageActive
                                                                                             ? " font-medium"
-                                                                                            : ""), isActive: isSubPageActive, children: jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, "aria-current": isSubPageActive
+                                                                                            : ""), isActive: isSubPageActive, children: jsxs(Link, { href: subPageUrl, prefetch: false, className: "w-full flex items-center", ...guideAnchor(`nav.${subPage.id}`), onClick: handleNavLinkClick, "aria-current": isSubPageActive
                                                                                             ? "page"
                                                                                             : undefined, children: [SubPageIcon && (jsx(SubPageIcon, { className: "sidebar-subpage-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subPage.titleTh })] }) }) }, subPage.id));
                                                                         }) }) })] }) }, subItem.id));
@@ -2418,7 +2661,7 @@ function NavMain({ items, orgCode, closeOnNavigation = false, approvalCounts, ch
                                                 return (jsx(SidebarMenuSubItem, { children: jsx(SidebarMenuSubButton, { asChild: true, className: "w-full" +
                                                             (workspace && isSubItemActive
                                                                 ? " font-semibold"
-                                                                : ""), isActive: isSubItemActive, children: jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", onClick: handleNavLinkClick, "aria-current": isSubItemActive ? "page" : undefined, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subItem.titleTh }), approvalCount > 0 && (jsx(Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
+                                                                : ""), isActive: isSubItemActive, children: jsxs(Link, { href: subItemUrl, prefetch: false, className: "w-full flex items-center", ...guideAnchor(`nav.${subItem.id}`), onClick: handleNavLinkClick, "aria-current": isSubItemActive ? "page" : undefined, children: [SubIcon && (jsx(SubIcon, { className: "sidebar-submodule-icon flex-shrink-0" })), jsx("span", { className: "flex-1 truncate", children: subItem.titleTh }), approvalCount > 0 && (jsx(Badge, { variant: "destructive", className: "ml-auto h-5 min-w-5 px-1.5 text-xs font-medium tabular-nums", children: approvalCount > 99
                                                                         ? "99+"
                                                                         : approvalCount }))] }) }) }, subItem.id));
                                             }) }) }))] }) })] }, item.id));
@@ -2540,13 +2783,63 @@ const WORKSPACE_LIGHT_HEADER_VARS = {
     "--header-title-py": "0px",
 };
 
+let entry = null;
+let openPanelImpl = null;
+const listeners = new Set();
+function emit() {
+    listeners.forEach(l => l());
+}
+function subscribe(l) {
+    listeners.add(l);
+    return () => {
+        listeners.delete(l);
+    };
+}
+/** Called by the host: the entry to show (null: none), and how to open the panel. */
+function publishGuideEntry(next, openPanel) {
+    const same = (next === null && entry === null) ||
+        (next !== null && entry !== null && next.done === entry.done && next.total === entry.total);
+    openPanelImpl = openPanel;
+    if (!same) {
+        entry = next;
+        emit();
+    }
+}
+/** Opens the tour's quest panel, when this user has a tour here. */
+function openGuidePanel() {
+    openPanelImpl?.();
+}
+/** The "?" menu's entry, or null when there is no tour for this user. */
+function useGuideEntry() {
+    return useSyncExternalStore(subscribe, () => entry, () => null);
+}
+
+const BUTTON_CLASS = "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted,#ffffffc7)] transition-colors hover:bg-[var(--header-hover,#ffffff1f)] hover:text-[var(--header-fg,#ffffff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted,#ffffffc7)]";
 /**
  * The ช่วยเหลือ button in the top bar. Drawn in the header's ink (the
  * --header-* variables of the workspace chrome, white on the brand chrome).
+ *
+ * When this user has a guided tour in this app, it opens a small menu:
+ * "ไกด์เริ่มต้น n/N" (the quest panel) and "ติดต่อทีมช่วยเหลือ" (the help
+ * dialog). Otherwise one press opens the help dialog, as before.
  */
 function HelpButton({ className }) {
-    return (jsx("button", { type: "button", onClick: openHelp, "aria-label": "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", title: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted,#ffffffc7)] transition-colors hover:bg-[var(--header-hover,#ffffff1f)] hover:text-[var(--header-fg,#ffffff)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted,#ffffffc7)]" +
-            (className ? ` ${className}` : ""), children: jsx(CircleHelp, { className: "size-5", strokeWidth: 1.65 }) }));
+    const guide = useGuideEntry();
+    const toGuide = useRef(false);
+    const cls = BUTTON_CLASS + (className ? ` ${className}` : "");
+    if (!guide) {
+        return (jsx("button", { type: "button", onClick: openHelp, "aria-label": "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", title: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", className: cls, "data-guide": "shell.help", children: jsx(CircleHelp, { className: "size-5", strokeWidth: 1.65 }) }));
+    }
+    return (jsxs(DropdownMenu, { children: [jsx(DropdownMenuTrigger, { asChild: true, children: jsx("button", { type: "button", "aria-label": "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", title: "\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D", className: cls, "data-guide": "shell.help", children: jsx(CircleHelp, { className: "size-5", strokeWidth: 1.65 }) }) }), jsxs(DropdownMenuContent, { align: "end", sideOffset: 8, className: "w-64", onCloseAutoFocus: e => {
+                    // The quest panel takes focus; the button must not take it back.
+                    if (toGuide.current) {
+                        e.preventDefault();
+                        toGuide.current = false;
+                    }
+                }, children: [jsxs(DropdownMenuItem, { onSelect: () => {
+                            toGuide.current = true;
+                            setTimeout(openGuidePanel, 0);
+                        }, className: "gap-2.5", children: [jsx(Flag, { className: "size-4" }), jsx("span", { className: "flex-1", children: "\u0E44\u0E01\u0E14\u0E4C\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxs("span", { className: "text-xs font-semibold text-primary tabular-nums", children: [guide.done, "/", guide.total] })] }), jsxs(DropdownMenuItem, { onSelect: () => setTimeout(openHelp, 0), className: "gap-2.5", children: [jsx(MessageCircle, { className: "size-4" }), jsx("span", { className: "flex-1", children: "\u0E15\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E17\u0E35\u0E21\u0E0A\u0E48\u0E27\u0E22\u0E40\u0E2B\u0E25\u0E37\u0E2D" })] })] })] }));
 }
 
 const hasPaginationShape = (payload) => {
@@ -3491,86 +3784,3032 @@ function resolveStaleOrganization({ code, organizations, organizationsStatus, or
     return { action: "forget" };
 }
 
+/* ------------------------------------------------------------------ */
+/* Copy                                                                 */
+/* ------------------------------------------------------------------ */
+const COPY = {
+    fieldFix: "แก้ในช่องที่ไฮไลต์ แล้วกด ถัดไป",
+    saveFailed: "บันทึกไม่สำเร็จ",
+    blank: "ยังไม่ได้พิมพ์",
+    exitToast: "ออกจากไกด์แล้ว",
+    replayDone: "ทบทวนภารกิจเสร็จแล้ว",
+    replayEnded: "จบการทบทวนแล้ว",
+    hiddenToast: "ซ่อนแล้ว",
+    aborted: "ไกด์ไปต่อไม่ได้ ลองอีกครั้งภายหลัง",
+    bridgeTitle: "กดปุ่มเมนู",
+    bridgeWhy: (app) => `เมนูทั้งหมดของ ${app} อยู่ในนี้`,
+};
+/* ------------------------------------------------------------------ */
+/* Helpers                                                              */
+/* ------------------------------------------------------------------ */
+const BRIDGE_TARGET = "shell.menu-toggle";
+function initialGuideState(audience, progress) {
+    return {
+        audience,
+        progress,
+        screen: { name: "idle" },
+        panelOpen: false,
+        justDone: null,
+        chipPulse: 0,
+        nudge: 0,
+        gateDismissed: false,
+    };
+}
+function findMission(suite, key) {
+    return key ? suite.missions.find(m => m.key === key) : undefined;
+}
+function guideContext(env, data, params = {}) {
+    return {
+        code: env.code,
+        pathname: env.pathname,
+        search: env.search,
+        params: { code: env.code, ...params },
+        data,
+        facts: env.facts,
+        can: env.can,
+        visible: (anchor) => env.isVisible(anchor),
+    };
+}
+function resolveText(t, ctx) {
+    if (t === undefined)
+        return "";
+    try {
+        return typeof t === "function" ? t(ctx) : t;
+    }
+    catch {
+        return "";
+    }
+}
+/** Runs an app predicate; a throw counts as `fallback`. */
+function safe(fn, fallback) {
+    try {
+        return fn();
+    }
+    catch {
+        return fallback;
+    }
+}
+function triggersOf(step) {
+    if (!step.advanceOn)
+        return [];
+    return Array.isArray(step.advanceOn) ? step.advanceOn : [step.advanceOn];
+}
+function stepKind(step) {
+    return step.kind ?? "click";
+}
+/** The last checkpoint at or before `index` (a mission's first step always is one). */
+function checkpointAtOrBefore(steps, index) {
+    for (let i = Math.min(index, steps.length - 1); i > 0; i--) {
+        if (steps[i].checkpoint)
+            return i;
+    }
+    return 0;
+}
+function targetIdOf(step, ctx) {
+    if (typeof step.targetId === "function")
+        return safe(() => step.targetId(ctx), undefined);
+    return step.targetId;
+}
+/** Whether the step's target (or the bridge's) is on screen. */
+function stepTargetVisible(step, env, ctx, bridge) {
+    if (bridge)
+        return env.isVisible(BRIDGE_TARGET);
+    if (!step.target)
+        return true;
+    return env.isVisible(step.target, targetIdOf(step, ctx));
+}
+/** The anchor the spotlight is on for the current step. */
+function spotlightTarget(step, ctx, bridge) {
+    if (bridge)
+        return { anchor: BRIDGE_TARGET };
+    if (!step.target)
+        return null;
+    return { anchor: step.target, id: targetIdOf(step, ctx) };
+}
+function needsBridge(step, env, ctx) {
+    return (!!step.target &&
+        step.target.startsWith("nav.") &&
+        !env.sidebarOpen &&
+        !env.isVisible(step.target, targetIdOf(step, ctx)));
+}
+function routeParamsFor(step, env) {
+    if (!step.route)
+        return {};
+    return matchRoute(step.route, env.pathname, env.search, env.code) ?? {};
+}
+/** A state trigger (route, visible) that holds now; the capture event for it. */
+function stateTriggerHolds(step, env) {
+    for (const t of triggersOf(step)) {
+        if ("route" in t) {
+            const params = matchRoute(t.route, env.pathname, env.search, env.code);
+            if (params)
+                return { route: { pathname: env.pathname, params } };
+        }
+        else if ("visible" in t) {
+            if (env.isVisible(t.visible))
+                return {};
+        }
+    }
+    return null;
+}
+/** Any trigger that holds on a sync (route, visible, and — once armed — hidden). */
+function syncTriggerHolds(step, env, armed) {
+    const held = stateTriggerHolds(step, env);
+    if (held)
+        return held;
+    if (!armed)
+        return null;
+    for (const t of triggersOf(step)) {
+        if ("hidden" in t && !env.isVisible(t.hidden))
+            return {};
+    }
+    return null;
+}
+/** Whether any of the step's `hidden` anchors is on screen now. */
+function hiddenAnchorShown(step, env) {
+    return triggersOf(step).some(t => "hidden" in t && env.isVisible(t.hidden));
+}
+function missionCount(suite) {
+    return suite.missions.length;
+}
+function missionSettled(m, entry, ctx) {
+    if (entry?.status === "done")
+        return true;
+    if (m.optional && entry?.status === "skipped")
+        return true;
+    return safe(() => m.alreadyDone?.(ctx) === true, false);
+}
+function settledCount(suite, progress, ctx) {
+    return suite.missions.filter(m => missionSettled(m, progress.missions[m.key], ctx)).length;
+}
+function gateState(suite, ctx) {
+    if (!suite.gate)
+        return true;
+    return safe(() => suite.gate.ready(ctx), undefined);
+}
+function missionViews(suite, progress, ctx) {
+    const gate = gateState(suite, ctx);
+    const settled = (key) => {
+        const m = findMission(suite, key);
+        return !!m && missionSettled(m, progress.missions[key], ctx);
+    };
+    let nextMarked = false;
+    return suite.missions.map(mission => {
+        const entry = progress.missions[mission.key];
+        let view;
+        if (entry?.status === "done")
+            view = "done";
+        else if (safe(() => mission.alreadyDone?.(ctx) === true, false))
+            view = "already";
+        else if (entry?.status === "skipped")
+            view = "skipped";
+        else if (entry?.status === "active")
+            view = "active";
+        else if (gate === false)
+            view = "waiting";
+        else if ((mission.after ?? []).some(k => !settled(k)))
+            view = "locked";
+        else
+            view = "todo";
+        if (!nextMarked && (view === "todo" || view === "active" || view === "skipped")) {
+            nextMarked = true;
+            if (view === "todo")
+                view = "next";
+        }
+        return { mission, view, entry };
+    });
+}
+/** The mission the celebration offers next: the first one not settled and not locked. */
+function nextMissionKey(suite, progress, ctx) {
+    for (const v of missionViews(suite, progress, ctx)) {
+        if (v.view === "next" || v.view === "todo" || v.view === "active" || v.view === "skipped") {
+            return v.mission.key;
+        }
+    }
+    return null;
+}
+/** Whether the welcome should open by itself. */
+function welcomeDue(state, suite) {
+    return (state.audience === "forced" &&
+        state.progress.welcome === "not_seen" &&
+        state.progress.status === "in_progress" &&
+        !state.progress.mission_key &&
+        state.screen.name === "idle" &&
+        suite.missions.length > 0);
+}
+/** Whether the floating "ภารกิจ n/N" chip shows. */
+function chipVisible(state, suite, ctx) {
+    return (state.audience !== "none" &&
+        state.progress.welcome !== "not_seen" &&
+        state.progress.status !== "completed" &&
+        !state.progress.chip_hidden &&
+        state.screen.name === "idle" &&
+        !state.panelOpen &&
+        settledCount(suite, state.progress, ctx) < missionCount(suite));
+}
+function withProgress(d, patch) {
+    d.state = { ...d.state, progress: { ...d.state.progress, ...patch } };
+}
+function setMission(d, key, entry) {
+    withProgress(d, { missions: { ...d.state.progress.missions, [key]: entry } });
+}
+function setScreen(d, screen) {
+    d.state = { ...d.state, screen };
+}
+function save(d, immediate = false) {
+    const existing = d.effects.find(e => e.type === "save");
+    if (existing)
+        existing.immediate = existing.immediate || immediate;
+    else
+        d.effects.push({ type: "save", immediate });
+}
+function announceStep(d, suite, env) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = mission.steps[s.index];
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    const title = s.bridge ? COPY.bridgeTitle : plainTitle(resolveText(step.title, ctx));
+    const why = s.bridge ? COPY.bridgeWhy(suite.appName) : plainTitle(resolveText(step.why, ctx));
+    d.effects.push({
+        type: "announce",
+        text: `ขั้นที่ ${s.index + 1} จาก ${mission.steps.length}. ${title}${why ? `. ${why}` : ""}`,
+    });
+}
+/** "กด [บันทึก]" → "กด บันทึก" (for screen readers). */
+function plainTitle(t) {
+    return t.replace(/\[([^\]]+)\]/g, "$1");
+}
 /**
- * Top-level app chrome: sticky header, sidebar slot, content gutter and the
- * session/org-context plumbing that both Accounting and HR need. Apps wrap
- * it inside their `SidebarProvider` (server-rendered with the cookie-backed
- * `defaultOpen`) and their `ERPProvider`, then pass app-specific bits as
- * props.
- *
- * The padding contract is deliberately owned here so future style tweaks
- * (e.g. the recent left/right/bottom gutter pass) propagate to both apps via
- * an erp-shell bump — domain components must NOT add their own root padding
- * or content gets indented twice.
+ * Enter step `index` of the mission (or the first one after it that is not
+ * skipped, forbidden or already passed). Past the end, the mission is over.
  */
-function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, organizationsStatus, notMemberComponent, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, showHelp = true, helpApp, }) {
-    const { data: session, status } = useSession();
-    const { open, setOpen } = useSidebar();
-    const router = useRouter();
-    const params = useParams();
-    const code = params?.code;
-    const extendedSession = session;
-    // Track once-authenticated so a transient accessToken drop during the
-    // periodic session refresh (SessionRefreshTrigger every 4 min) doesn't
-    // blank the whole page. The initial-load gate below still handles cold
-    // start; once we've seen a real token we render children optimistically
-    // and let the API layer surface a real 401 if the token actually died.
-    const hasSeenAccessTokenRef = useRef(false);
-    useEffect(() => {
-        if (extendedSession?.accessToken)
-            hasSeenAccessTokenRef.current = true;
-    }, [extendedSession?.accessToken]);
-    // The URL's `[code]` is authoritative: the page mounts only once the active
-    // organisation is the one it names (see url-org-gate.ts).
-    //
-    // The gate used to start only when the code had resolved AND an active id
-    // existed, which left two holes. While the organisation list loaded, the
-    // page mounted at once and its first requests carried the previous
-    // organisation — /O26000021/procurement/purchase-requisition/<id> fetched
-    // the document from O26000019 before the switch. And a code naming none of
-    // the user's organisations never resolved, so the page rendered the
-    // previous organisation's data under it.
-    const urlOrgGate = resolveUrlOrgGate({
-        code,
-        organizations,
-        organizationsStatus,
-        organizationId,
-    });
-    const switchTargetId = urlOrgGate.state === "switching" ? urlOrgGate.targetId : null;
-    // Switch the active organisation to the URL's. Once per target: the setter
-    // writes the cookie through a server action, and re-firing it on every
-    // render while that round trip is in flight only queues duplicates.
-    const requestedSwitchRef = useRef(null);
-    useEffect(() => {
-        if (!switchTargetId) {
-            requestedSwitchRef.current = null;
-            return;
+function enterStep(d, suite, env, mission, index, opts) {
+    const steps = mission.steps;
+    let i = Math.max(0, index);
+    let firstPass = true;
+    while (i < steps.length) {
+        const step = steps[i];
+        const params = routeParamsFor(step, env);
+        const ctx = guideContext(env, d.state.progress.context, params);
+        if (step.requires && !safe(() => env.can(step.requires), true)) {
+            withProgress(d, { last_error: `forbidden:${step.requires}`.slice(0, 128) });
+            i++;
+            continue;
         }
-        if (requestedSwitchRef.current === switchTargetId)
-            return;
-        requestedSwitchRef.current = switchTargetId;
-        void setOrganizationId(switchTargetId);
-    }, [switchTargetId, setOrganizationId]);
-    // Once the user's organisations are known, requests prefer a stored
-    // organisation that is one of them (getRequestOrganizationId).
-    const organizationsLoaded = (organizationsStatus ??
-        (organizations.length > 0 ? "success" : undefined)) === "success";
-    useEffect(() => {
-        if (organizationsLoaded) {
-            setKnownOrganizationIds(organizations.map(org => org.id));
+        if (step.skipIf && safe(() => step.skipIf(ctx), false)) {
+            i++;
+            continue;
         }
-    }, [organizationsLoaded, organizations]);
-    // An active organisation that is not one of the user's — deleted, or left —
-    // is replaced, so it stops being sent with every request. The URL's
-    // organisation, when the user is a member, is the gate's switch above;
-    // otherwise the user's only organisation, or none (they pick one: the
-    // refusal below offers it, and a path without a code goes to the picker).
-    // Once per stale id and target, so a setter that does not take cannot loop.
-    const staleRecovery = resolveStaleOrganization({
-        code,
-        organizations,
-        organizationsStatus,
-        organizationId,
+        const autoPass = step.autoPass !== false && !(firstPass && opts.noAutoPass);
+        firstPass = false;
+        if (autoPass && stepKind(step) !== "input" && stepKind(step) !== "view") {
+            const held = stateTriggerHolds(step, env);
+            if (held) {
+                captureInto(d, step, held, ctx);
+                i++;
+                continue;
+            }
+        }
+        break;
+    }
+    if (i >= steps.length) {
+        finishMission(d, suite, env, mission, opts.replay);
+        return;
+    }
+    const step = steps[i];
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    const away = !!step.route && !matchRoute(step.route, env.pathname, env.search, env.code);
+    const bridge = !away && needsBridge(step, env, ctx);
+    setScreen(d, {
+        name: "step",
+        mission: mission.key,
+        index: i,
+        replay: opts.replay,
+        bridge,
+        phase: away ? "away" : "waiting",
+        error: opts.error ?? null,
+        confirmExit: false,
+        misses: 0,
+        armed: hiddenAnchorShown(step, env),
+    });
+    if (!opts.replay) {
+        const cp = checkpointAtOrBefore(steps, i);
+        setMission(d, mission.key, { status: "active", step_key: step.key });
+        withProgress(d, {
+            mission_key: mission.key,
+            step_key: step.key,
+            step_index: i,
+            checkpoint_key: steps[cp].key,
+        });
+        save(d);
+    }
+    if (!away) {
+        // The target may already be there.
+        markReadyIfVisible(d, suite, env);
+    }
+}
+function markReadyIfVisible(d, suite, env) {
+    const s = d.state.screen;
+    if (s.name !== "step" || s.phase !== "waiting")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = mission.steps[s.index];
+    const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+    if (stepTargetVisible(step, env, ctx, s.bridge)) {
+        setScreen(d, { ...s, phase: "ready" });
+        announceStep(d, suite, env);
+        if (s.error)
+            d.effects.push({ type: "announce", text: s.error.title });
+    }
+}
+function captureInto(d, step, e, ctx) {
+    if (!step.capture)
+        return;
+    const got = safe(() => step.capture(e, ctx), undefined);
+    if (!got)
+        return;
+    const clean = {};
+    for (const [k, v] of Object.entries(got)) {
+        if (typeof v === "string" && v)
+            clean[k] = v;
+    }
+    if (Object.keys(clean).length) {
+        withProgress(d, { context: { ...d.state.progress.context, ...clean } });
+    }
+}
+function advance(d, suite, env, capture) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const step = mission.steps[s.index];
+    if (capture) {
+        captureInto(d, step, capture, guideContext(env, d.state.progress.context, routeParamsFor(step, env)));
+    }
+    enterStep(d, suite, env, mission, s.index + 1, { replay: s.replay });
+}
+function finishMission(d, suite, env, mission, replay) {
+    if (replay) {
+        setScreen(d, { name: "idle" });
+        d.effects.push({ type: "toast", text: COPY.replayDone });
+        return;
+    }
+    setMission(d, mission.key, { status: "done", step_key: null, skipped_step: null });
+    withProgress(d, {
+        mission_key: null,
+        step_key: null,
+        step_index: 0,
+        checkpoint_key: null,
+        context: {},
+        last_error: null,
+    });
+    const ctx = guideContext(env, {});
+    const all = settledCount(suite, d.state.progress, ctx) >= missionCount(suite);
+    if (all)
+        withProgress(d, { status: "completed" });
+    setScreen(d, all ? { name: "complete" } : { name: "celebrate", mission: mission.key });
+    d.state = { ...d.state, justDone: mission.key };
+    save(d, true);
+    const n = settledCount(suite, d.state.progress, ctx);
+    const N = missionCount(suite);
+    const title = resolveText(mission.done?.title, ctx) || `${mission.title}แล้ว`;
+    d.effects.push({
+        type: "announce",
+        text: all
+            ? `ครบ ${N} ภารกิจ ${resolveText(suite.complete.title, ctx) || "บริษัทพร้อมใช้งานแล้ว"}`
+            : `ภารกิจสำเร็จ ${title} เสร็จ ${n} จาก ${N} ภารกิจ`,
+    });
+}
+function startMission(d, suite, env, key, replay) {
+    const mission = findMission(suite, key);
+    if (!mission || mission.steps.length === 0)
+        return;
+    const entry = d.state.progress.missions[key];
+    // A mission already done is only ever replayed; its done status stays.
+    const isReplay = replay || entry?.status === "done";
+    const before = d.state.progress;
+    d.state = { ...d.state, panelOpen: false, justDone: null };
+    if (d.state.progress.welcome === "not_seen")
+        withProgress(d, { welcome: "started" });
+    if (!isReplay && d.state.progress.mission_key !== key)
+        withProgress(d, { context: {} });
+    if (!isReplay && d.state.progress.status !== "in_progress") {
+        // Picking up an optional mission after the tour completed.
+        withProgress(d, { status: "in_progress" });
+    }
+    // Resume where it was left: back to the checkpoint at or before it.
+    let index = 0;
+    if (!isReplay && entry && (entry.status === "active" || entry.status === "skipped")) {
+        const at = mission.steps.findIndex(s => s.key === (entry.step_key ?? entry.skipped_step));
+        if (at > 0)
+            index = checkpointAtOrBefore(mission.steps, at);
+    }
+    enterStep(d, suite, env, mission, index, { replay: isReplay });
+    // A replay never writes progress; only what starting it changed (the
+    // welcome, first seen through a replay) is saved.
+    if (isReplay && d.state.progress !== before)
+        save(d);
+}
+function exitMission(d) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    if (!s.replay) {
+        const prev = d.state.progress.missions[s.mission];
+        if (prev?.status !== "done") {
+            setMission(d, s.mission, {
+                status: "skipped",
+                step_key: d.state.progress.step_key,
+                skipped_step: d.state.progress.step_key,
+            });
+        }
+        withProgress(d, { mission_key: null });
+        save(d, true);
+    }
+    d.state = { ...d.state, chipPulse: d.state.chipPulse + 1 };
+    setScreen(d, { name: "idle" });
+}
+function triggerMatchesSignal(t, sig, env, ctx) {
+    if ("api" in t && sig.kind === "api") {
+        if (t.api.method && t.api.method.toUpperCase() !== sig.method.toUpperCase())
+            return null;
+        if (!matchApiPath(t.api.path, sig.path))
+            return null;
+        if (!matchStatus(t.api.status, sig.status))
+            return null;
+        return { api: { method: sig.method.toUpperCase(), path: sig.path, status: sig.status, id: sig.id } };
+    }
+    if ("event" in t && sig.kind === "event") {
+        return t.event === sig.name ? { event: { name: sig.name, detail: sig.detail } } : null;
+    }
+    if ("activate" in t && sig.kind === "activate")
+        return {};
+    if ("value" in t && sig.kind === "value") {
+        return safe(() => t.value(sig.value, ctx), false) ? {} : null;
+    }
+    return null;
+}
+/** A refused save that a commit step listens for. */
+function apiFailureFor(step, sig) {
+    if (sig.kind !== "api" || sig.status < 400)
+        return false;
+    return triggersOf(step).some(t => "api" in t &&
+        (!t.api.method || t.api.method.toUpperCase() === sig.method.toUpperCase()) &&
+        matchApiPath(t.api.path, sig.path));
+}
+function reduceGuide(state, action, suite, env) {
+    const d = { state, effects: [] };
+    const s = state.screen;
+    const ctxNow = () => guideContext(env, d.state.progress.context);
+    switch (action.type) {
+        case "welcome": {
+            if (!welcomeDue(state, suite))
+                break;
+            const gate = gateState(suite, ctxNow());
+            if (gate === undefined)
+                break;
+            if (gate === false) {
+                if (!state.gateDismissed)
+                    setScreen(d, { name: "gate" });
+                break;
+            }
+            setScreen(d, { name: "welcome", confirm: false });
+            break;
+        }
+        case "welcomeSkip":
+            if (s.name === "welcome")
+                setScreen(d, { name: "welcome", confirm: true });
+            break;
+        case "welcomeStart":
+        case "welcomeSkipCancel": {
+            if (s.name !== "welcome")
+                break;
+            const first = nextMissionKey(suite, d.state.progress, ctxNow());
+            if (first)
+                startMission(d, suite, env, first, false);
+            else
+                setScreen(d, { name: "idle" });
+            break;
+        }
+        case "welcomeSkipConfirm":
+            if (s.name !== "welcome")
+                break;
+            withProgress(d, { welcome: "skipped" });
+            d.state = { ...d.state, chipPulse: d.state.chipPulse + 1 };
+            setScreen(d, { name: "idle" });
+            save(d, true);
+            break;
+        case "gateLater":
+            if (s.name === "gate") {
+                d.state = { ...d.state, gateDismissed: true };
+                setScreen(d, { name: "idle" });
+            }
+            break;
+        case "start":
+            if (state.audience === "none")
+                break;
+            if (s.name === "step" && !s.replay && s.mission !== action.mission) {
+                // Leaving one mission for another: the first is set aside.
+                exitMission(d);
+            }
+            startMission(d, suite, env, action.mission, !!action.replay);
+            break;
+        case "resume": {
+            if (state.audience === "none" || s.name !== "idle")
+                break;
+            const mission = findMission(suite, d.state.progress.mission_key);
+            if (!mission || d.state.progress.missions[mission.key]?.status !== "active")
+                break;
+            // Back to the last checkpoint at or before the step reached; the saved
+            // checkpoint when the step is no longer in the tour.
+            const stepAt = mission.steps.findIndex(st => st.key === d.state.progress.step_key);
+            const cpAt = mission.steps.findIndex(st => st.key === d.state.progress.checkpoint_key);
+            const index = stepAt >= 0 ? checkpointAtOrBefore(mission.steps, stepAt) : Math.max(cpAt, 0);
+            enterStep(d, suite, env, mission, index, { replay: false });
+            break;
+        }
+        case "sync": {
+            if (s.name !== "step")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            if (s.phase === "away") {
+                if (!step.route || matchRoute(step.route, env.pathname, env.search, env.code)) {
+                    // Arrived: run the step again from here (it may already be passed).
+                    enterStep(d, suite, env, mission, s.index, { replay: s.replay, error: s.error });
+                }
+                break;
+            }
+            if (s.confirmExit)
+                break;
+            const kind = stepKind(step);
+            const armed = s.armed || hiddenAnchorShown(step, env);
+            if (kind !== "input" && kind !== "view") {
+                const held = syncTriggerHolds(step, env, armed);
+                if (held) {
+                    advance(d, suite, env, held);
+                    break;
+                }
+            }
+            if (armed !== s.armed)
+                setScreen(d, { ...s, armed });
+            const cur = d.state.screen;
+            // The menu step: done once the sidebar is open; needed again if shut.
+            if (cur.bridge && (env.sidebarOpen || stepTargetVisible(step, env, ctx, false))) {
+                setScreen(d, { ...cur, bridge: false, phase: "waiting" });
+            }
+            else if (!cur.bridge && needsBridge(step, env, ctx)) {
+                setScreen(d, { ...cur, bridge: true, phase: "waiting" });
+            }
+            markReadyIfVisible(d, suite, env);
+            break;
+        }
+        case "signal": {
+            if (s.name !== "step" || s.phase === "away" || s.confirmExit)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            const sig = action.signal;
+            if (sig.kind === "typing") {
+                if (s.error)
+                    setScreen(d, { ...s, error: null });
+                break;
+            }
+            if (s.bridge)
+                break;
+            for (const t of triggersOf(step)) {
+                const hit = triggerMatchesSignal(t, sig, env, ctx);
+                if (hit) {
+                    advance(d, suite, env, hit);
+                    return { state: d.state, effects: d.effects };
+                }
+            }
+            if (sig.kind === "api" && stepKind(step) === "commit" && apiFailureFor(step, sig)) {
+                const mapped = safe(() => step.onApiError?.({ status: sig.status, message: sig.message }, ctx), undefined);
+                if (mapped && mapped.step) {
+                    const to = mission.steps.findIndex(st => st.key === mapped.step);
+                    if (to >= 0) {
+                        enterStep(d, suite, env, mission, to, {
+                            replay: s.replay,
+                            noAutoPass: true,
+                            error: { title: mapped.message ?? sig.message ?? COPY.saveFailed, detail: COPY.fieldFix },
+                        });
+                        break;
+                    }
+                }
+                const error = mapped?.message
+                    ? { title: mapped.message, detail: undefined }
+                    : { title: COPY.saveFailed, detail: sig.message };
+                setScreen(d, { ...s, error });
+                d.effects.push({ type: "announce", text: [error.title, error.detail].filter(Boolean).join(". ") });
+                withProgress(d, { last_error: `api_${sig.status}:${step.key}`.slice(0, 128) });
+            }
+            break;
+        }
+        case "next": {
+            if (s.name !== "step" || s.phase !== "ready" || s.confirmExit || s.bridge)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const kind = stepKind(step);
+            if (kind === "view") {
+                advance(d, suite, env);
+                break;
+            }
+            if (kind !== "input")
+                break;
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            const value = safe(() => env.targetValue(), "");
+            const problem = step.validate
+                ? safe(() => step.validate(value, ctx), null)
+                : value.trim()
+                    ? null
+                    : COPY.blank;
+            if (problem) {
+                setScreen(d, { ...s, error: { title: problem, detail: COPY.fieldFix } });
+                d.state = { ...d.state, nudge: d.state.nudge + 1 };
+                d.effects.push({ type: "announce", text: problem });
+            }
+            else {
+                advance(d, suite, env);
+            }
+            break;
+        }
+        case "targetLost": {
+            if (s.name !== "step" || s.phase !== "ready" || s.confirmExit)
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
+            if (stepTargetVisible(step, env, ctx, s.bridge))
+                break;
+            const cp = checkpointAtOrBefore(mission.steps, s.index);
+            if (cp < s.index && !s.bridge) {
+                // A dialog or a menu closed under the step: back to what opens it.
+                enterStep(d, suite, env, mission, cp, { replay: s.replay, noAutoPass: false });
+            }
+            else {
+                setScreen(d, { ...s, phase: "waiting" });
+            }
+            break;
+        }
+        case "timeout": {
+            if (s.name !== "step" || s.phase !== "waiting")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const anchor = s.bridge ? BRIDGE_TARGET : (step.target ?? step.key);
+            withProgress(d, { last_error: `target_missing:${anchor}`.slice(0, 128) });
+            save(d);
+            const misses = s.misses + 1;
+            const policy = step.onMissing ?? "retry";
+            const cp = checkpointAtOrBefore(mission.steps, s.index);
+            if (policy === "skip") {
+                advance(d, suite, env);
+            }
+            else if (policy === "abort") {
+                exitMission(d);
+                d.effects.push({ type: "toast", text: COPY.aborted });
+            }
+            else if ((policy === "rewind" || (policy === "retry" && misses >= 2)) && cp < s.index) {
+                enterStep(d, suite, env, mission, cp, { replay: s.replay });
+                const now = d.state.screen;
+                if (now.name === "step" && now.index === s.index) {
+                    // The checkpoint passed straight back to this step (its dialog is
+                    // still open): going back cannot help, so say so.
+                    setScreen(d, { ...now, phase: "missing", misses });
+                    d.effects.push({ type: "announce", text: "ไม่พบส่วนนี้บนหน้า" });
+                }
+            }
+            else {
+                setScreen(d, { ...s, phase: "missing", misses });
+                d.effects.push({ type: "announce", text: "ไม่พบส่วนนี้บนหน้า" });
+            }
+            break;
+        }
+        case "retry":
+            if (s.name === "step" && s.phase === "missing") {
+                setScreen(d, { ...s, phase: "waiting" });
+                markReadyIfVisible(d, suite, env);
+            }
+            break;
+        case "blocked":
+            if (s.name === "step")
+                d.state = { ...d.state, nudge: d.state.nudge + 1 };
+            break;
+        case "exit":
+            if (s.name !== "step")
+                break;
+            if (s.replay) {
+                setScreen(d, { name: "idle" });
+                d.effects.push({ type: "toast", text: COPY.replayEnded });
+            }
+            else {
+                setScreen(d, { ...s, confirmExit: true });
+            }
+            break;
+        case "exitCancel":
+            if (s.name === "step" && s.confirmExit)
+                setScreen(d, { ...s, confirmExit: false });
+            break;
+        case "exitConfirm":
+            if (s.name !== "step")
+                break;
+            exitMission(d);
+            d.effects.push({ type: "toast", text: COPY.exitToast });
+            break;
+        case "endWithoutSave":
+            if (s.name !== "step" || !s.replay)
+                break;
+            setScreen(d, { name: "idle" });
+            d.effects.push({ type: "closeAppDialog" }, { type: "toast", text: COPY.replayEnded });
+            break;
+        case "goResume": {
+            if (s.name !== "step" || s.phase !== "away")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (!mission)
+                break;
+            const step = mission.steps[s.index];
+            const ctx = guideContext(env, d.state.progress.context);
+            const href = safe(() => step.resumeUrl?.(ctx), undefined) ??
+                (step.route ? fillRoute(step.route, { ...d.state.progress.context, code: env.code }) : null);
+            if (href)
+                d.effects.push({ type: "navigate", href });
+            break;
+        }
+        case "celebrateNext": {
+            if (s.name !== "celebrate")
+                break;
+            const next = nextMissionKey(suite, d.state.progress, ctxNow());
+            if (next)
+                startMission(d, suite, env, next, false);
+            else
+                setScreen(d, { name: "idle" });
+            break;
+        }
+        case "rest":
+            if (s.name !== "celebrate")
+                break;
+            setScreen(d, { name: "idle" });
+            d.state = { ...d.state, panelOpen: true, justDone: s.mission };
+            break;
+        case "finish": {
+            if (s.name !== "complete")
+                break;
+            setScreen(d, { name: "idle" });
+            const href = resolveText(suite.complete.action.href, ctxNow());
+            const filled = href ? (fillRoute(href, { code: env.code }) ?? href) : "";
+            if (filled)
+                d.effects.push({ type: "navigate", href: filled });
+            break;
+        }
+        case "openPanel":
+            if (state.audience !== "none" && s.name === "idle") {
+                d.state = { ...d.state, panelOpen: true };
+            }
+            break;
+        case "closePanel":
+            d.state = { ...d.state, panelOpen: false, justDone: null };
+            break;
+        case "hideChip":
+            withProgress(d, { chip_hidden: true });
+            d.state = { ...d.state, panelOpen: false };
+            d.effects.push({ type: "toast", text: COPY.hiddenToast });
+            save(d, true);
+            break;
+        case "dismissMission": {
+            const m = findMission(suite, action.mission);
+            if (!m?.optional)
+                break;
+            setMission(d, m.key, { status: "skipped", step_key: null, skipped_step: null });
+            const all = settledCount(suite, d.state.progress, ctxNow()) >= missionCount(suite);
+            if (all) {
+                withProgress(d, { status: "completed" });
+                d.state = { ...d.state, panelOpen: false };
+                setScreen(d, { name: "complete" });
+            }
+            save(d, true);
+            break;
+        }
+        case "serverRow": {
+            // A saved row came back: its rev, the server's status, and the dates
+            // the server stamps on missions ("เสร็จ 26 ต.ค. 2569 13:04").
+            const missions = { ...d.state.progress.missions };
+            for (const [k, m] of Object.entries(missions)) {
+                const r = action.progress.missions[k];
+                if (r && r.status === m.status) {
+                    missions[k] = { ...m, completed_at: r.completed_at ?? m.completed_at, skipped_at: r.skipped_at ?? m.skipped_at };
+                }
+            }
+            withProgress(d, { rev: action.progress.rev, server_status: action.progress.server_status, missions });
+            break;
+        }
+    }
+    return { state: d.state, effects: d.effects };
+}
+
+/**
+ * A tour's progress as platform-api stores it (one row per user, org and
+ * suite: GET/PUT /organizations/:id/guides/me), and the rules for reading,
+ * writing and merging it. See _claude-work/peoplx-guide/API.md.
+ *
+ * No runtime imports: the tests run this file in Node as it is.
+ */
+const KEY_RE = /^[a-z0-9][a-z0-9._-]{0,63}$/;
+const isRecord = (v) => typeof v === "object" && v !== null && !Array.isArray(v);
+const str = (v) => (typeof v === "string" && v !== "" ? v : null);
+function freshProgress(version, rev = 0) {
+    return {
+        guide_version: version,
+        rev,
+        status: "in_progress",
+        mission_key: null,
+        step_key: null,
+        step_index: 0,
+        checkpoint_key: null,
+        missions: {},
+        context: {},
+        welcome: "not_seen",
+        chip_hidden: false,
+        last_error: null,
+        skipped_step: null,
+        server_status: null,
+    };
+}
+const ROW_STATUSES = ["in_progress", "completed", "skipped", "aborted"];
+const MISSION_STATUSES = ["todo", "active", "done", "skipped"];
+const WELCOMES = ["not_seen", "started", "skipped"];
+/** One row (a GET `guides[]` entry, a PUT answer, a 409's `current`). Null when off-shape. */
+function parseRow(raw) {
+    if (!isRecord(raw))
+        return null;
+    const version = Number(raw.guide_version);
+    const rev = Number(raw.rev);
+    if (!Number.isInteger(version) || version < 1 || !Number.isInteger(rev) || rev < 0)
+        return null;
+    const status = ROW_STATUSES.includes(raw.status)
+        ? raw.status
+        : "in_progress";
+    const missions = {};
+    if (isRecord(raw.missions)) {
+        for (const [k, v] of Object.entries(raw.missions)) {
+            if (!isRecord(v) || !MISSION_STATUSES.includes(v.status))
+                continue;
+            missions[k] = {
+                status: v.status,
+                step_key: str(v.step_key),
+                skipped_step: str(v.skipped_step),
+                completed_at: str(v.completed_at),
+                skipped_at: str(v.skipped_at),
+            };
+        }
+    }
+    const context = {};
+    if (isRecord(raw.context)) {
+        for (const [k, v] of Object.entries(raw.context)) {
+            if (typeof v === "string")
+                context[k] = v;
+            else if (typeof v === "number")
+                context[k] = String(v);
+        }
+    }
+    return {
+        guide_version: version,
+        rev,
+        status,
+        mission_key: str(raw.mission_key),
+        step_key: str(raw.step_key),
+        step_index: Number.isInteger(raw.step_index) ? raw.step_index : 0,
+        checkpoint_key: str(raw.checkpoint_key),
+        missions,
+        context,
+        welcome: WELCOMES.includes(raw.welcome) ? raw.welcome : "not_seen",
+        chip_hidden: raw.chip_hidden === true,
+        last_error: str(raw.last_error),
+        skipped_step: str(raw.skipped_step),
+        server_status: status,
+    };
+}
+/**
+ * The GET answer for one suite. Null — show nothing — for anything that is
+ * not the expected shape (an older API, a proxy's page, another app's answer).
+ */
+function parseGuidesAnswer(payload, suite) {
+    if (!isRecord(payload))
+        return null;
+    const data = isRecord(payload.data) ? payload.data : payload;
+    const mode = data.mode;
+    const audience = data.audience;
+    if (mode !== "off" && mode !== "invite" && mode !== "forced")
+        return null;
+    if (audience !== "forced" && audience !== "optional" && audience !== "none")
+        return null;
+    if (typeof data.app === "string" && data.app !== suite.app)
+        return null;
+    const rows = Array.isArray(data.guides) ? data.guides : [];
+    let row = null;
+    for (const r of rows) {
+        if (isRecord(r) && r.guide_key === suite.key) {
+            row = parseRow(r);
+            break;
+        }
+    }
+    let progress;
+    let newerOnServer = false;
+    if (!row)
+        progress = freshProgress(suite.version);
+    else if (row.guide_version < suite.version) {
+        // A new version of the tour: start over (the server resets the row on the
+        // PUT); keep the rev the server will check.
+        progress = { ...freshProgress(suite.version, row.rev), server_status: row.server_status };
+    }
+    else {
+        progress = row;
+        newerOnServer = row.guide_version > suite.version;
+    }
+    return { mode, audience: mode === "off" ? "none" : audience, progress, newerOnServer };
+}
+const TERMINAL = ["completed", "skipped", "aborted"];
+/** The PUT body for the client's state. Drops keys the server would refuse. */
+function putBody(p, app) {
+    const key = (k) => (k && KEY_RE.test(k) ? k : null);
+    const missions = {};
+    for (const [k, m] of Object.entries(p.missions)) {
+        if (!KEY_RE.test(k))
+            continue;
+        missions[k] = {
+            status: m.status,
+            step_key: key(m.step_key ?? null),
+            skipped_step: key(m.skipped_step ?? null),
+        };
+    }
+    const context = {};
+    for (const [k, v] of Object.entries(p.context)) {
+        if (typeof v === "string" && v.length <= 200)
+            context[k] = v;
+    }
+    return {
+        app,
+        guide_version: p.guide_version,
+        rev: p.rev,
+        status: p.status,
+        mission_key: key(p.mission_key),
+        step_key: key(p.step_key),
+        step_index: Math.max(0, Math.min(1000, Math.floor(p.step_index || 0))),
+        checkpoint_key: key(p.checkpoint_key),
+        missions,
+        context,
+        welcome: p.welcome,
+        chip_hidden: p.chip_hidden,
+        last_error: p.last_error ? p.last_error.slice(0, 128) : null,
+        skipped_step: key(p.skipped_step),
+        restart: p.status === "in_progress" &&
+            p.server_status !== null &&
+            TERMINAL.includes(p.server_status),
+    };
+}
+function stable(v) {
+    if (Array.isArray(v))
+        return `[${v.map(stable).join(",")}]`;
+    if (isRecord(v)) {
+        return `{${Object.keys(v)
+            .sort()
+            .map(k => `${JSON.stringify(k)}:${stable(v[k])}`)
+            .join(",")}}`;
+    }
+    return JSON.stringify(v) ?? "null";
+}
+/**
+ * What a PUT would store, without the rev it is checked against: two equal
+ * keys mean the save would change nothing, and it is not sent (a replay
+ * starting, a step entered again, never bump the row's rev). Key order does
+ * not matter.
+ */
+function payloadKey(p, app) {
+    const { rev: _rev, restart: _restart, ...rest } = putBody(p, app);
+    return stable(rest);
+}
+const MISSION_RANK = { todo: 0, skipped: 1, active: 1, done: 3 };
+const WELCOME_RANK = { not_seen: 0, skipped: 1, started: 1 };
+/**
+ * After a 409: this tab's state laid over the server's, keeping whatever is
+ * further along — a mission done anywhere stays done, the welcome once seen
+ * stays seen, a hidden chip stays hidden. Otherwise this tab's own choice
+ * wins. The rev is the server's.
+ */
+function mergeProgress(local, remote) {
+    const missions = { ...remote.missions };
+    for (const [k, m] of Object.entries(local.missions)) {
+        const r = remote.missions[k];
+        missions[k] = !r || MISSION_RANK[m.status] >= MISSION_RANK[r.status] ? { ...r, ...m } : r;
+    }
+    const welcome = WELCOME_RANK[local.welcome] >= WELCOME_RANK[remote.welcome] ? local.welcome : remote.welcome;
+    const completed = local.status === "completed" || remote.status === "completed";
+    const mission_key = local.mission_key && missions[local.mission_key]?.status === "active"
+        ? local.mission_key
+        : remote.mission_key && missions[remote.mission_key]?.status === "active"
+            ? remote.mission_key
+            : null;
+    const fromLocal = mission_key !== null && mission_key === local.mission_key;
+    return {
+        ...local,
+        rev: remote.rev,
+        server_status: remote.server_status,
+        status: completed ? "completed" : local.status,
+        missions,
+        welcome,
+        chip_hidden: local.chip_hidden || remote.chip_hidden,
+        mission_key,
+        step_key: fromLocal ? local.step_key : mission_key ? remote.step_key : null,
+        step_index: fromLocal ? local.step_index : mission_key ? remote.step_index : 0,
+        checkpoint_key: fromLocal ? local.checkpoint_key : mission_key ? remote.checkpoint_key : null,
+        context: fromLocal ? local.context : mission_key ? remote.context : {},
+    };
+}
+/**
+ * Which of two copies (sessionStorage after F5, the server) to resume from:
+ * the one further along for the same version; the server's on a tie.
+ */
+function furtherProgress(a, b) {
+    const score = (p) => Object.values(p.missions).reduce((s, m) => s + MISSION_RANK[m.status] * 1000, 0) +
+        (p.mission_key ? 100 + p.step_index : 0) +
+        WELCOME_RANK[p.welcome];
+    return score(a) > score(b) ? a : b;
+}
+
+/**
+ * Talking to platform-api about tour progress (API.md): the GET that says
+ * who sees what, and the PUT that saves, with its rev check.
+ */
+function base(app) {
+    return platformApiBase(app);
+}
+/** GET …/guides/me?app=…; null (show nothing) on any failure or odd answer. */
+async function fetchGuides(organizationId, suite, signal) {
+    try {
+        const res = await instance.get(`${base(suite.app)}/organizations/${encodeURIComponent(organizationId)}/guides/me`, { params: { app: suite.app }, signal, erpOrganizationId: organizationId });
+        return parseGuidesAnswer(res.data, suite);
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * PUT the whole state. On 409 the server's row comes back: merge (keeping
+ * whatever is further along) and try once more with its rev. Returns the
+ * stored row, or null when it could not be saved (the tour goes on; the
+ * session copy keeps the place).
+ */
+async function saveGuides(organizationId, suite, progress) {
+    const url = `${base(suite.app)}/organizations/${encodeURIComponent(organizationId)}/guides/me/${encodeURIComponent(suite.key)}`;
+    let body = progress;
+    for (let attempt = 0; attempt < 2; attempt++) {
+        let res;
+        try {
+            res = await instance.put(url, putBody(body, suite.app), {
+                validateStatus: s => (s >= 200 && s < 300) || s === 409,
+                erpOrganizationId: organizationId,
+            });
+        }
+        catch {
+            return null;
+        }
+        const payload = res.data;
+        if (res.status !== 409) {
+            return parseRow(payload?.data ?? payload);
+        }
+        const current = parseRow(payload?.current);
+        if (current && current.guide_version > body.guide_version) {
+            // Another app build is ahead of this one: stop writing.
+            return null;
+        }
+        if (!current)
+            body = { ...body, rev: 0, server_status: null };
+        else if (current.guide_version < body.guide_version) {
+            // The server's row is the previous version: this one replaces it.
+            body = { ...body, rev: current.rev, server_status: current.server_status };
+        }
+        else
+            body = mergeProgress(body, current);
+    }
+    return null;
+}
+
+/**
+ * The tour's DOM side: finding anchors, deciding whether one is really on
+ * screen, and the rectangles the spotlight cuts out. Browser only; every
+ * function tolerates a missing document.
+ */
+const hasDocument = () => typeof document !== "undefined";
+function cssString(value) {
+    return `"${value.replace(/["\\]/g, "\\$&")}"`;
+}
+function anchorSelector(anchor, id) {
+    return (`[${GUIDE_ATTRIBUTE}=${cssString(anchor)}]` +
+        (id ? `[${GUIDE_ID_ATTRIBUTE}=${cssString(id)}]` : ""));
+}
+/**
+ * On screen: connected, with a size, not hidden by style, not inside
+ * aria-hidden or inert (other than the guide's own), not a closed Radix part.
+ *
+ * aria-hidden that Radix put there (data-aria-hidden: everything outside an
+ * open dialog, select or menu is hidden from screen readers) does not count:
+ * a dialog's field is still on screen while its select's list is open.
+ */
+function isPresent(el) {
+    if (!el || !el.isConnected)
+        return false;
+    const r = el.getBoundingClientRect();
+    if (r.width <= 0 || r.height <= 0)
+        return false;
+    // Slid off the side (a closed drawer); off the top or bottom is only
+    // scrolled away, and the tour scrolls it back. So is a tab scrolled out of
+    // a row of tabs that scrolls sideways, as long as the row is on screen.
+    if ((r.right <= 0 || r.left >= window.innerWidth) && !inSidewaysScroller(el))
+        return false;
+    if (el.getAttribute("data-state") === "closed")
+        return false;
+    const style = getComputedStyle(el);
+    if (style.visibility === "hidden" || style.display === "none")
+        return false;
+    for (let n = el; n; n = n.parentElement) {
+        if (n.hasAttribute(GUIDE_LAYER_ATTRIBUTE))
+            break;
+        if (n.hasAttribute("inert"))
+            return false;
+        if (n.getAttribute("aria-hidden") === "true" && !n.hasAttribute("data-aria-hidden"))
+            return false;
+    }
+    return true;
+}
+/** The first matching anchor that is on screen. */
+function findAnchor(anchor, id) {
+    if (!hasDocument() || !anchor)
+        return null;
+    let list;
+    try {
+        list = document.querySelectorAll(anchorSelector(anchor, id));
+    }
+    catch {
+        return null;
+    }
+    for (const el of Array.from(list)) {
+        if (isPresent(el))
+            return el;
+    }
+    return null;
+}
+function anchorVisible(anchor, id) {
+    return findAnchor(anchor, id) !== null;
+}
+const FIELD = "input:not([type=hidden]),textarea,select,[contenteditable=''],[contenteditable=true]";
+/** The field to type into: the anchor itself, or the first field inside it. */
+function fieldOf(el) {
+    if (!el)
+        return null;
+    if (el.matches(FIELD))
+        return el;
+    return el.querySelector(FIELD);
+}
+function fieldValue(el) {
+    const f = fieldOf(el);
+    if (!f)
+        return "";
+    if ("value" in f && typeof f.value === "string")
+        return f.value;
+    return f.textContent ?? "";
+}
+const FOCUSABLE = "a[href],button:not([disabled]),input:not([disabled]):not([type=hidden]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1']),[contenteditable=''],[contenteditable=true]";
+function focusablesIn(root) {
+    if (!root)
+        return [];
+    const own = root.matches(FOCUSABLE) ? [root] : [];
+    return own.concat(Array.from(root.querySelectorAll(FOCUSABLE)).filter(isPresent));
+}
+function rectOf(el) {
+    const r = el.getBoundingClientRect();
+    return { x: r.left, y: r.top, width: r.width, height: r.height };
+}
+function padRect(r, pad) {
+    return { x: r.x - pad, y: r.y - pad, width: r.width + pad * 2, height: r.height + pad * 2 };
+}
+function sameRect(a, b) {
+    if (!a || !b)
+        return a === b;
+    return (Math.abs(a.x - b.x) < 0.5 &&
+        Math.abs(a.y - b.y) < 0.5 &&
+        Math.abs(a.width - b.width) < 0.5 &&
+        Math.abs(a.height - b.height) < 0.5);
+}
+/** Open Radix poppers (a select's list, a menu): usable while a step runs. */
+const POPPER_SELECTOR = "[data-radix-popper-content-wrapper]";
+/** Toasts stay usable above the tour. */
+const TOASTER_SELECTOR = "[data-sonner-toaster]";
+/** Open dialogs (Radix dialog, alert dialog, sheet, popover content). */
+const OPEN_DIALOG_SELECTOR = '[role="dialog"][data-state="open"],[role="alertdialog"][data-state="open"]';
+/**
+ * Whether an open dialog of the app's covers the target: the target is
+ * neither in it nor around it (a confirm opened by the step's own button).
+ * The ring and the hand would be drawn over the dialog, pointing at a button
+ * behind it.
+ */
+function coveredByDialog(el) {
+    if (!hasDocument() || !el)
+        return false;
+    for (const d of Array.from(document.querySelectorAll(OPEN_DIALOG_SELECTOR))) {
+        if (inGuideLayer(d) || !isPresent(d))
+            continue;
+        if (d.contains(el) || el.contains(d))
+            continue;
+        return true;
+    }
+    return false;
+}
+function openPoppers() {
+    if (!hasDocument())
+        return [];
+    return Array.from(document.querySelectorAll(POPPER_SELECTOR)).filter(isPresent);
+}
+function inGuideLayer(node) {
+    if (!node || typeof Node === "undefined" || !(node instanceof Node))
+        return false;
+    const el = node instanceof Element ? node : node.parentElement;
+    return !!el?.closest(`[${GUIDE_LAYER_ATTRIBUTE}]`);
+}
+function prefersReducedMotion() {
+    return typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function isPhoneWidth() {
+    return typeof window !== "undefined" && window.innerWidth < 768;
+}
+/* ---------------- what is really on screen ---------------- */
+const INFINITE = 1e7;
+/** The overlap of two rectangles, or null when they do not meet. */
+function intersectRect(a, b) {
+    const x = Math.max(a.x, b.x);
+    const y = Math.max(a.y, b.y);
+    const right = Math.min(a.x + a.width, b.x + b.width);
+    const bottom = Math.min(a.y + a.height, b.y + b.height);
+    if (right - x <= 0 || bottom - y <= 0)
+        return null;
+    return { x, y, width: right - x, height: bottom - y };
+}
+/** The part of `rect` inside every clip (scroll boxes, the viewport); null when none is. */
+function visibleRect(rect, clips) {
+    let r = rect;
+    for (const c of clips) {
+        if (!r)
+            return null;
+        r = intersectRect(r, c);
+    }
+    return r;
+}
+const clipsX = (v) => v !== "visible";
+const scrollsX = (v) => v === "auto" || v === "scroll";
+/**
+ * The ancestors that cut the element off: anything with overflow other than
+ * visible on an axis. The body and the root scroll the page and are covered by
+ * the viewport. Read once per target; their rectangles are read every frame.
+ */
+function clipAncestors(el) {
+    const out = [];
+    if (typeof getComputedStyle !== "function")
+        return out;
+    for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        if (n.hasAttribute(GUIDE_LAYER_ATTRIBUTE))
+            break;
+        const s = getComputedStyle(n);
+        const x = clipsX(s.overflowX);
+        const y = clipsX(s.overflowY);
+        if (x || y)
+            out.push({ el: n, x, y });
+        if (s.position === "fixed")
+            break;
+    }
+    return out;
+}
+/** An ancestor's clip as a rectangle: unbounded on an axis it does not clip. */
+function clipRectOf(c) {
+    const r = c.el.getBoundingClientRect();
+    return {
+        x: c.x ? r.left : -INFINITE,
+        y: c.y ? r.top : -INFINITE,
+        width: c.x ? r.width : INFINITE * 2,
+        height: c.y ? r.height : INFINITE * 2,
+    };
+}
+function viewportRect() {
+    const vv = typeof window !== "undefined" ? window.visualViewport : undefined;
+    return {
+        x: 0,
+        y: vv ? vv.offsetTop : 0,
+        width: window.innerWidth,
+        height: vv ? vv.height : window.innerHeight,
+    };
+}
+/**
+ * The part of the element a person can see: its box cut by every scroll box
+ * around it and by the viewport. The spotlight, its hole, the ring and the
+ * hand use this, so a tab half out of a sideways-scrolling row of tabs is not
+ * spotlit where it cannot be pressed. Null when none of it is on screen.
+ */
+function visibleRectOf(el, ancestors = clipAncestors(el)) {
+    return visibleRect(rectOf(el), [...ancestors.map(clipRectOf), viewportRect()]);
+}
+/** Inside a box that scrolls sideways (with somewhere to scroll) that is itself on screen. */
+function inSidewaysScroller(el) {
+    if (typeof getComputedStyle !== "function")
+        return false;
+    for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        const s = getComputedStyle(n);
+        if (scrollsX(s.overflowX) && n.scrollWidth > n.clientWidth + 1) {
+            const r = n.getBoundingClientRect();
+            return r.width > 0 && r.right > 0 && r.left < window.innerWidth;
+        }
+    }
+    return false;
+}
+/**
+ * How to bring a target into view, or null when it already is: to the middle
+ * when it is above or below the comfortable band (under the header, at the
+ * bottom edge), the nearest edge when only a side is cut off (a tab out of a
+ * sideways-scrolling row, on a phone).
+ */
+function revealPlan(rect, visible, viewportHeight) {
+    const offVertically = rect.y < 70 || rect.y + rect.height > viewportHeight - 20;
+    const cutSideways = !visible || visible.width < rect.width - 1;
+    if (!offVertically && !cutSideways)
+        return null;
+    return { block: offVertically ? "center" : "nearest", inline: "nearest" };
+}
+/** Scrolls the target into view (instant under reduced motion). */
+function revealTarget(el) {
+    const vh = window.visualViewport?.height ?? window.innerHeight;
+    const plan = revealPlan(rectOf(el), visibleRectOf(el), vh);
+    if (!plan)
+        return;
+    try {
+        el.scrollIntoView({ ...plan, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    }
+    catch {
+        el.scrollIntoView();
+    }
+}
+/* ---------------- the scrim's holes, as one union ---------------- */
+/**
+ * The scrim's blocking area: the screen (with a 10 px margin) minus the union
+ * of the holes, as rectangles that do not overlap. Cutting each hole out with
+ * an even-odd fill made the place where two holes overlap (a field and the
+ * select list open over it) solid again, and the option there could not be
+ * pressed.
+ *
+ * Every hole edge splits the screen into a grid; a cell is blocked when no
+ * hole covers it. Cells in a row are joined, and identical rows stacked.
+ */
+function blockedRects(holes, width, height) {
+    const x0 = -10;
+    const y0 = -10;
+    const x1 = width + 10;
+    const y1 = height + 10;
+    const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+    const hs = holes
+        .filter(h => h.width > 0 && h.height > 0)
+        .map(h => ({
+        l: clamp(h.x, x0, x1),
+        t: clamp(h.y, y0, y1),
+        r: clamp(h.x + h.width, x0, x1),
+        b: clamp(h.y + h.height, y0, y1),
+    }))
+        .filter(h => h.r > h.l && h.b > h.t);
+    if (!hs.length)
+        return [{ x: x0, y: y0, width: x1 - x0, height: y1 - y0 }];
+    const uniq = (v) => Array.from(new Set(v)).sort((a, b) => a - b);
+    const xs = uniq([x0, x1, ...hs.flatMap(h => [h.l, h.r])]);
+    const ys = uniq([y0, y1, ...hs.flatMap(h => [h.t, h.b])]);
+    const out = [];
+    let prev = null;
+    for (let j = 0; j < ys.length - 1; j++) {
+        const top = ys[j];
+        const bottom = ys[j + 1];
+        const cy = (top + bottom) / 2;
+        const row = [];
+        for (let i = 0; i < xs.length - 1; i++) {
+            const left = xs[i];
+            const right = xs[i + 1];
+            const cx = (left + right) / 2;
+            const covered = hs.some(h => cx > h.l && cx < h.r && cy > h.t && cy < h.b);
+            if (covered)
+                continue;
+            const last = row[row.length - 1];
+            if (last && last.x + last.width === left)
+                last.width = right - last.x;
+            else
+                row.push({ x: left, y: top, width: right - left, height: bottom - top });
+        }
+        const key = row.map(r => `${r.x},${r.width}`).join("|");
+        if (prev && prev.key === key) {
+            for (const r of prev.rects)
+                r.height += bottom - top;
+        }
+        else {
+            out.push(...row);
+            prev = { key, rects: row };
+        }
+    }
+    return out;
+}
+
+/**
+ * The tour's stylesheet. The shell has no CSS pipeline and the apps only scan
+ * its dist for Tailwind classes, which cannot carry keyframes; so the layer
+ * brings its own sheet, namespaced `eg-`, drawn from the theme's tokens
+ * (--primary carries each app's brand accent; light and dark follow).
+ */
+const GUIDE_CSS = `
+[data-erp-guide-layer]{position:fixed;inset:0;z-index:1000;pointer-events:none;font-family:inherit;color:var(--popover-foreground,#1c2634);
+  --eg-scrim:rgba(12,20,34,.64);--eg-card:var(--popover,#fff);--eg-fg:var(--popover-foreground,#1c2634);
+  --eg-muted:var(--muted-foreground,#6d7886);--eg-soft:var(--muted,#eef3f9);--eg-line:var(--border,#e8ecf1);
+  --eg-primary:var(--primary,#3280dd);--eg-on-primary:var(--primary-foreground,#fff);
+  --eg-tint:color-mix(in oklab,var(--eg-primary) 13%,var(--eg-card));--eg-strong:color-mix(in oklab,var(--eg-primary) 82%,#000);
+  --eg-danger:var(--destructive,#d23b4b);--eg-ok:#1d9a5f;--eg-gold:#e6a417;
+  --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}
+[data-erp-guide-layer] *{box-sizing:border-box}
+[data-erp-guide-layer] button{font:inherit;color:inherit;cursor:pointer}
+.eg-i{pointer-events:auto}
+.eg-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.eg-scrim-svg{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
+.eg-scrim-svg .eg-scrim-fill{fill:var(--eg-scrim);pointer-events:none}
+.eg-scrim-svg .eg-scrim-hit{fill:transparent;pointer-events:all}
+.eg-scrim{position:fixed;inset:0;background:var(--eg-scrim);pointer-events:auto}
+.eg-scrim.eg-light{background:rgba(12,20,34,.45)}
+.eg-scrim.eg-faint{background:rgba(12,20,34,.35)}
+.eg-ring{position:fixed;border-radius:12px;pointer-events:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--eg-primary)}
+.eg-ring.eg-move{transition:left .26s ease,top .26s ease,width .26s ease,height .26s ease}
+.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}
+.eg-ring.eg-flash::after{animation:eg-flash .5s ease 1}
+@keyframes eg-pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}
+@keyframes eg-flash{0%,100%{opacity:1;transform:none}50%{opacity:.2}}
+.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}
+.eg-hand svg{width:46px;height:46px;fill:#fff;stroke:#1c2634;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
+.eg-hand.eg-flip svg{transform:scaleY(-1)}
+@keyframes eg-tap{0%,100%{transform:translate(6px,8px)}50%{transform:translate(0,0)}}
+.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}
+.eg-bubble.eg-err{border-top-color:var(--eg-danger)}
+.eg-bubble.eg-nudge{animation:eg-nudge .38s ease}
+@keyframes eg-nudge{0%,100%{translate:0}20%{translate:-7px}40%{translate:6px}60%{translate:-4px}80%{translate:2px}}
+.eg-b-top{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;color:var(--eg-muted)}
+.eg-b-top .eg-mis{font-weight:600;color:var(--eg-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.eg-b-top .eg-cnt{white-space:nowrap;font-weight:600}
+.eg-pips{display:flex;gap:4px;margin:8px 0 10px}
+.eg-pips i{flex:1;height:4px;border-radius:2px;background:var(--eg-soft)}
+.eg-pips i.eg-d{background:var(--eg-primary)}
+.eg-pips i.eg-c{background:color-mix(in oklab,var(--eg-primary) 45%,var(--eg-card))}
+.eg-b-t{margin:0;font-size:16px;font-weight:600;line-height:1.45}
+.eg-b-w{margin:2px 0 0;font-size:13.5px;color:var(--eg-muted)}
+.eg-bubble.eg-err .eg-b-t{color:var(--eg-danger)}
+.eg-k{display:inline-block;background:var(--eg-tint);color:var(--eg-strong);border-radius:7px;padding:0 7px;font-weight:600}
+.eg-b-f{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:8px}
+.eg-b-f .eg-btn{height:34px;padding:0 14px;font-size:13.5px}
+.eg-exit{border:0;background:none;color:var(--eg-muted);font-size:12.5px;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
+.eg-exit:hover{color:var(--eg-fg)}
+.eg-arrow{position:absolute;width:14px;height:14px;background:var(--eg-card);transform:rotate(45deg);border-radius:2px}
+.eg-arrow.eg-top{background:var(--eg-primary)}
+.eg-bubble.eg-err .eg-arrow.eg-top{background:var(--eg-danger)}
+.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}
+.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}
+.eg-primary{background:var(--eg-primary);color:var(--eg-on-primary)!important}
+.eg-primary:hover{background:var(--eg-strong)}
+.eg-primary[disabled]{opacity:.55;cursor:default}
+.eg-ghost{background:var(--eg-card);border-color:var(--eg-line)}
+.eg-ghost:hover{background:var(--eg-soft)}
+.eg-ghost[disabled]{opacity:.55;cursor:default}
+.eg-link{background:none;border:0;color:var(--eg-muted);font-weight:500;padding:0 6px;height:32px}
+.eg-link:hover{color:var(--eg-fg);text-decoration:underline}
+.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}
+.eg-modal.eg-pop{animation:eg-pop .32s cubic-bezier(.2,.9,.3,1.3)}
+@keyframes eg-pop{from{opacity:0;transform:translate(-50%,-46%) scale(.94)}}
+.eg-modal h2{margin:6px 0 4px;font-size:22px;font-weight:700;letter-spacing:-.2px;line-height:1.3}
+.eg-modal .eg-sub{margin:0;color:var(--eg-muted);font-size:14.5px}
+.eg-eyebrow{margin:0;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--eg-strong)}
+.eg-actions{display:grid;gap:6px;margin-top:20px}
+.eg-actions .eg-btn{height:44px}
+.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)}
+.eg-badge svg.eg-ic{width:30px;height:30px}
+.eg-quests{list-style:none;padding:0;margin:18px 0 0;text-align:left;display:grid;gap:6px}
+.eg-quests li{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:11px;background:var(--eg-soft);font-size:14px}
+.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}
+.eg-quests li.eg-first{background:var(--eg-tint)}
+.eg-quests li.eg-first .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}
+.eg-quests li.eg-ok .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}
+.eg-quests li .eg-n svg.eg-ic{width:15px;height:15px;stroke-width:3}
+.eg-quests li .eg-t{flex:1}
+.eg-quests li small{color:var(--eg-muted);font-size:12px;white-space:nowrap}
+.eg-modal.eg-confirm{text-align:left;width:min(380px,calc(100vw - 32px));padding:22px}
+.eg-modal.eg-confirm h2{font-size:18px;margin-top:0}
+.eg-modal.eg-confirm .eg-actions{grid-template-columns:1fr 1fr}
+.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}
+.eg-medal svg.eg-ic{width:42px;height:42px;stroke-width:2.6}
+@keyframes eg-stamp{from{transform:scale(.3) rotate(-25deg);opacity:0}}
+.eg-prog{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:13px;color:var(--eg-muted);font-weight:600}
+.eg-prog .eg-bar{flex:1;height:8px;border-radius:4px;background:var(--eg-soft);overflow:hidden}
+.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}
+.eg-burst{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}
+.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}
+@keyframes eg-conf{0%{opacity:1;transform:translate(0,0) rotate(0)}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r))}}
+.eg-card{position:fixed;left:50%;bottom:28px;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}
+.eg-card .eg-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
+.eg-loading{display:flex;align-items:center;gap:10px;font-weight:600}
+.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}
+@keyframes eg-spin{to{transform:rotate(360deg)}}
+.eg-chip{position:fixed;right:22px;bottom: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}
+.eg-chip svg{width:34px;height:34px}
+.eg-chip.eg-hi{animation:eg-hi 1.2s ease 2}
+@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)}}
+.eg-panel{position:fixed;right:22px;bottom:82px;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}
+.eg-panel-bd{display:none}
+.eg-q-h{display:flex;align-items:center;gap:10px;padding:16px 12px 4px 18px}
+.eg-q-h h2{margin:0;font-size:16px;font-weight:700;flex:1}
+.eg-q-h .eg-n{font-size:13px;color:var(--eg-muted);font-weight:600}
+.eg-x{width:34px;height:34px;border-radius:10px;border:0;background:none;display:grid;place-items:center;color:var(--eg-muted)}
+.eg-x:hover{background:var(--eg-soft)}
+.eg-x svg.eg-ic{width:18px;height:18px}
+.eg-panel .eg-prog{margin:6px 18px 8px}
+.eg-q-list{list-style:none;margin:0;padding:4px 10px 6px;display:grid;gap:2px}
+.eg-q-item{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:11px}
+.eg-q-item.eg-next{background:var(--eg-tint)}
+.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)}
+.eg-q-item.eg-next .eg-n{border-color:var(--eg-primary);color:var(--eg-strong)}
+.eg-q-item.eg-done .eg-n{background:var(--eg-ok);border-color:var(--eg-ok);color:#fff}
+.eg-q-item.eg-done .eg-n svg.eg-ic{width:16px;height:16px;stroke-width:3}
+.eg-q-item.eg-dim .eg-n{opacity:.55}
+.eg-q-item.eg-just .eg-n{animation:eg-stamp .55s cubic-bezier(.2,.9,.3,1.4) .2s both}
+.eg-q-item .eg-t{flex:1;min-width:0}
+.eg-q-item .eg-t b{display:block;font-size:14px;font-weight:600}
+.eg-q-item.eg-done .eg-t b{color:var(--eg-muted)}
+.eg-q-item .eg-t small{display:block;font-size:12px;color:var(--eg-muted)}
+.eg-q-item .eg-t small.eg-sk{color:#b06a00}
+.eg-q-item .eg-t small.eg-lock{color:var(--eg-fg);font-weight:500}
+.eg-q-item .eg-btn{height:32px;padding:0 12px;font-size:13px}
+.eg-q-acts{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
+.eg-q-acts .eg-link{height:22px;font-size:12px;padding:0 2px}
+.eg-q-f{border-top:1px solid var(--eg-line);padding:8px 12px;display:flex;justify-content:flex-end}
+.eg-toast{position:fixed;left:50%;bottom:84px;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}
+svg.eg-ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
+@media (max-width:767px){
+  .eg-bubble{width:auto}
+  .eg-arrow{display:none}
+  .eg-modal{top:auto;bottom:12px;transform:translateX(-50%);width:calc(100vw - 24px);padding:24px 20px 18px}
+  .eg-modal.eg-pop{animation:eg-up .3s cubic-bezier(.2,.9,.3,1.1)}
+  .eg-modal .eg-actions .eg-btn{height:46px}
+  .eg-chip{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
+  .eg-panel-bd{display:block;position:fixed;inset:0;background:rgba(15,23,42,.38);pointer-events:auto}
+  .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)}
+  .eg-q-item{padding:12px 8px}
+  .eg-card{bottom:calc(12px + env(safe-area-inset-bottom))}
+  .eg-toast{bottom:calc(76px + env(safe-area-inset-bottom))}
+}
+@keyframes eg-up{from{opacity:0;transform:translate(-50%,30px)}}
+@media (prefers-reduced-motion:reduce){
+  [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}
+  .eg-ring::after{animation:none!important;opacity:1;transform:none}
+  .eg-ring.eg-flash::after{animation:eg-flash .5s ease 1!important;animation-duration:.5s!important}
+  .eg-hand{animation:none!important;transform:translate(4px,6px)}
+  .eg-burst{display:none}
+  .eg-bubble.eg-nudge{animation:none!important;border-top-color:var(--eg-danger)}
+}
+`;
+
+/* ------------------------------------------------------------------ */
+/* Bits                                                                 */
+/* ------------------------------------------------------------------ */
+const TH_MONTHS = ["ม.ค.", "ก.พ.", "มี.ค.", "เม.ย.", "พ.ค.", "มิ.ย.", "ก.ค.", "ส.ค.", "ก.ย.", "ต.ค.", "พ.ย.", "ธ.ค."];
+const pad2 = (n) => String(n).padStart(2, "0");
+/** "26 ต.ค. 2569 13:04" — day, month, Buddhist year, 24 h. */
+function formatThaiDateTime(iso) {
+    if (!iso)
+        return "";
+    const d = new Date(iso);
+    if (Number.isNaN(d.getTime()))
+        return "";
+    return `${d.getDate()} ${TH_MONTHS[d.getMonth()]} ${d.getFullYear() + 543} ${pad2(d.getHours())}:${pad2(d.getMinutes())}`;
+}
+/** "กด [บันทึก]": the bracketed word is a chip in the brand colour. */
+function GuideTitle({ text }) {
+    const parts = text.split(/(\[[^\]]+\])/g).filter(Boolean);
+    return (jsx(Fragment$1, { children: parts.map((p, i) => p.startsWith("[") && p.endsWith("]") ? (jsx("span", { className: "eg-k", children: p.slice(1, -1) }, i)) : (jsx(React.Fragment, { children: p }, i))) }));
+}
+const Svg = ({ children, className = "eg-ic" }) => (jsx("svg", { className: className, viewBox: "0 0 24 24", "aria-hidden": "true", children: children }));
+const IconCheck = () => (jsx(Svg, { children: jsx("path", { d: "M20 6 9 17l-5-5" }) }));
+const IconX = () => (jsx(Svg, { children: jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }));
+const IconFlag = () => (jsxs(Svg, { children: [jsx("path", { d: "M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z" }), jsx("path", { d: "M4 22v-7" })] }));
+const IconTrophy = () => (jsx(Svg, { children: jsx("path", { d: "M6 9H4.5a2.5 2.5 0 0 1 0-5H6M18 9h1.5a2.5 2.5 0 0 0 0-5H18M4 22h16M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22M18 2H6v7a6 6 0 0 0 12 0V2Z" }) }));
+const HAND_PATH = "M18 11V9.5a2 2 0 0 0-4 0V9a2 2 0 0 0-4 0v.5V4a2 2 0 0 0-4 0v10l-1.6-1.6a2 2 0 0 0-2.83 2.83l3.6 3.6C6.66 20.3 8.6 22 11.5 22H14a8 8 0 0 0 8-8v-3a2 2 0 0 0-4 0z";
+/** Rounded-rectangle subpath for the scrim's holes. */
+function roundRect(r, radius) {
+    const rad = Math.max(0, Math.min(radius, r.width / 2, r.height / 2));
+    const { x, y, width: w, height: h } = r;
+    return (`M${x + rad} ${y}H${x + w - rad}A${rad} ${rad} 0 0 1 ${x + w} ${y + rad}` +
+        `V${y + h - rad}A${rad} ${rad} 0 0 1 ${x + w - rad} ${y + h}` +
+        `H${x + rad}A${rad} ${rad} 0 0 1 ${x} ${y + h - rad}` +
+        `V${y + rad}A${rad} ${rad} 0 0 1 ${x + rad} ${y}Z`);
+}
+const rectPath = (r) => `M${r.x} ${r.y}H${r.x + r.width}V${r.y + r.height}H${r.x}Z`;
+/**
+ * The dim layer that eats every press outside the holes. The holes are a
+ * union: where two overlap (a field and the select list open over it) the
+ * page stays open.
+ *
+ * - The look: one rectangle masked by the rounded holes (a mask adds holes
+ *   up, so an overlap is not filled back in).
+ * - The presses: a transparent path made of the screen minus the holes, as
+ *   rectangles that do not overlap (blockedRects). A press inside a hole
+ *   reaches the page underneath; any other lands on the path (marked
+ *   data-eg-block) and is cancelled.
+ */
+function Scrim({ holes, width, height }) {
+    const maskId = "eg-scrim-mask-" + React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const block = blockedRects(holes, width, height).map(rectPath).join("");
+    return (jsxs("svg", { className: "eg-scrim-svg", width: width, height: height, "aria-hidden": "true", children: [holes.length ? (jsx("defs", { children: jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: -10, y: -10, width: width + 20, height: height + 20, children: [jsx("rect", { x: -10, y: -10, width: width + 20, height: height + 20, fill: "#fff" }), holes.map((h, i) => (jsx("path", { d: roundRect(h, 12), fill: "#000" }, i)))] }) })) : null, jsx("rect", { className: "eg-scrim-fill", x: -10, y: -10, width: width + 20, height: height + 20, mask: holes.length ? `url(#${maskId})` : undefined }), jsx("path", { className: "eg-scrim-hit", d: block, "data-eg-block": "" })] }));
+}
+/** Whether two rectangles overlap. */
+const meets = (a, b) => !!intersectRect(a, b);
+/** The smallest rectangle around all of them. */
+function boundingRect(rs) {
+    const x = Math.min(...rs.map(r => r.x));
+    const y = Math.min(...rs.map(r => r.y));
+    const right = Math.max(...rs.map(r => r.x + r.width));
+    const bottom = Math.max(...rs.map(r => r.y + r.height));
+    return { x, y, width: right - x, height: bottom - y };
+}
+/** Where the bubble may go, in order of preference. */
+const BUBBLE_PLACEMENTS = ["right", "bottom", "top", "left"];
+/**
+ * The first placement (in BUBBLE_PLACEMENTS order) whose bubble is on screen,
+ * off the target (with its open list), and off everything to keep clear;
+ * failing that, the first that is only on screen and off the target; -1 when
+ * none is.
+ */
+function pickPlacement(results, bw, bh, anchor, clear, bounds) {
+    const box = (r) => ({ x: r.x, y: r.y, width: bw, height: bh });
+    const fits = (b) => b.x >= bounds.x - 1 && b.y >= bounds.y - 1 && b.x + b.width <= bounds.x + bounds.width + 1 && b.y + b.height <= bounds.y + bounds.height + 1;
+    const ok = results.map(r => {
+        const b = box(r);
+        return fits(b) && !meets(b, anchor);
+    });
+    const best = results.findIndex((r, i) => ok[i] && !clear.some(c => meets(box(r), c)));
+    return best >= 0 ? best : ok.indexOf(true);
+}
+const BUBBLE_TITLE_ID = "eg-bubble-title";
+const BUBBLE_WHY_ID = "eg-bubble-why";
+function useNudge(nudge, ref) {
+    const first = useRef(nudge);
+    useEffect(() => {
+        if (nudge === first.current)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        el.classList.remove("eg-nudge");
+        void el.offsetWidth;
+        el.classList.add("eg-nudge");
+    }, [nudge, ref]);
+}
+function StepLayer(p) {
+    const { spot, phone, viewport } = p;
+    const bubbleRef = useRef(null);
+    const arrowRef = useRef(null);
+    const ringRef = useRef(null);
+    const [pos, setPos] = useState(null);
+    useNudge(p.nudge, bubbleRef);
+    // Flash the ring with each nudge too (a press outside the hole).
+    const firstNudge = useRef(p.nudge);
+    useEffect(() => {
+        if (p.nudge === firstNudge.current)
+            return;
+        const el = ringRef.current;
+        if (!el)
+            return;
+        el.classList.remove("eg-flash");
+        void el.offsetWidth;
+        el.classList.add("eg-flash");
+    }, [p.nudge]);
+    const showBubble = p.phase === "ready" && (!!spot || !p.hasTarget);
+    const gap = p.showHand ? 34 : 14;
+    const spotKey = spot ? `${spot.x}|${spot.y}|${spot.width}|${spot.height}` : "";
+    const contentKey = `${p.bubble.title}|${p.bubble.why}|${p.bubble.error?.title ?? ""}|${p.bubble.showNext}`;
+    // What the bubble sits beside: the target, with an open list over it (the
+    // list is what the person is choosing from now). What it must not cover:
+    // open lists, and the other anchors the step allows (a map step's
+    // coordinate fields).
+    const popoverList = p.popovers ?? [];
+    const anchor = spot ? boundingRect([spot, ...popoverList.filter(o => meets(o, spot))]) : null;
+    const clear = [...popoverList, ...p.holes];
+    const anchorKey = anchor ? `${anchor.x}|${anchor.y}|${anchor.width}|${anchor.height}` : "";
+    const clearKey = clear.map(r => `${r.x},${r.y},${r.width},${r.height}`).join(";");
+    useLayoutEffect(() => {
+        const el = bubbleRef.current;
+        if (!el || !showBubble)
+            return;
+        const m = 16;
+        if (!spot || !anchor) {
+            // Nothing to point at: the middle of the screen (the bottom on a phone).
+            const bw = el.offsetWidth;
+            const bh = el.offsetHeight;
+            setPos(phone
+                ? { left: m, top: viewport.offsetTop + viewport.height - bh - m, side: "dock" }
+                : { left: (window.innerWidth - bw) / 2, top: viewport.offsetTop + (viewport.height - bh) / 2, side: "dock" });
+            return;
+        }
+        if (phone) {
+            // Docked to the top or the bottom of the screen, whichever covers less
+            // of the target and its open list (target in the lower half: top).
+            const vh = viewport.height;
+            const oy = viewport.offsetTop;
+            const bh = el.offsetHeight;
+            const topT = oy + m + 4;
+            const botT = oy + vh - bh - m;
+            const { y, height: h } = anchor;
+            const overlapTop = Math.max(0, topT + bh + 8 - y);
+            const overlapBot = Math.max(0, y + h + gap - botT);
+            const top = y + h / 2 > vh / 2
+                ? overlapTop <= overlapBot
+                    ? topT
+                    : botT
+                : overlapBot <= overlapTop
+                    ? botT
+                    : topT;
+            setPos({ left: m, top, side: "dock" });
+            return;
+        }
+        let cancelled = false;
+        const a = anchor;
+        const ref = {
+            getBoundingClientRect: () => ({
+                x: a.x,
+                y: a.y,
+                left: a.x,
+                top: a.y,
+                width: a.width,
+                height: a.height,
+                right: a.x + a.width,
+                bottom: a.y + a.height,
+            }),
+        };
+        const at = (placement) => computePosition(ref, el, {
+            strategy: "fixed",
+            placement,
+            middleware: [
+                offset(placement.startsWith("bottom") ? gap : 14),
+                shift({ padding: m }),
+                ...(arrowRef.current ? [arrow({ element: arrowRef.current, padding: 14 })] : []),
+            ],
+        });
+        Promise.all(BUBBLE_PLACEMENTS.map(at))
+            .then(results => {
+            if (cancelled)
+                return;
+            const bw = el.offsetWidth;
+            const bh = el.offsetHeight;
+            const bounds = { x: m, y: viewport.offsetTop + m, width: window.innerWidth - 2 * m, height: viewport.height - 2 * m };
+            const i = pickPlacement(results, bw, bh, a, clear, bounds);
+            if (i < 0) {
+                // Nowhere beside it: the bottom-right corner.
+                setPos({ left: window.innerWidth - bw - m, top: viewport.height + viewport.offsetTop - bh - m, side: "dock" });
+                return;
+            }
+            const { x, y, placement, middlewareData } = results[i];
+            const side = placement.split("-")[0];
+            setPos({ left: x, top: y, side, ax: middlewareData.arrow?.x, ay: middlewareData.arrow?.y });
+        })
+            .catch(() => {
+            if (!cancelled)
+                setPos({ left: m, top: m, side: "dock" });
+        });
+        return () => {
+            cancelled = true;
+        };
+        // The keys stand for spot, the lists, the holes and the bubble's size.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [spotKey, anchorKey, clearKey, contentKey, phone, showBubble, gap, viewport.height, viewport.offsetTop]);
+    const popovers = p.popovers ?? [];
+    const covered = !!p.covered;
+    const holes = [...(spot && !covered ? [spot] : []), ...popovers, ...p.holes];
+    const ringShown = !!spot && p.phase === "ready" && !covered && !popovers.some(o => meets(o, spot));
+    const hand = spot && p.showHand && p.phase === "ready" && !covered && !popovers.length ? handPosition(spot, viewport.height) : null;
+    let arrowStyle;
+    if (pos && pos.side !== "dock") {
+        if (pos.side === "right")
+            arrowStyle = { left: -7, top: pos.ay };
+        else if (pos.side === "left")
+            arrowStyle = { right: -7, top: pos.ay };
+        else if (pos.side === "bottom")
+            arrowStyle = { top: -9, left: pos.ax };
+        else
+            arrowStyle = { bottom: -7, left: pos.ax };
+    }
+    return (jsxs(Fragment$1, { children: [jsx(Scrim, { holes: p.phase === "ready" ? holes : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && ringShown ? (jsx("div", { ref: ringRef, className: "eg-ring" + (p.moving ? " eg-move" : ""), style: { left: spot.x, top: spot.y, width: spot.width, height: spot.height }, "aria-hidden": "true" })) : null, hand ? (jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxs("div", { ref: bubbleRef, className: "eg-bubble" + (p.bubble.error ? " eg-err" : ""), role: "dialog", "aria-modal": "false", "aria-labelledby": BUBBLE_TITLE_ID, "aria-describedby": BUBBLE_WHY_ID, tabIndex: -1, "data-eg-bubble": "", style: {
+                    left: pos?.left ?? 0,
+                    top: pos?.top ?? 0,
+                    width: phone ? viewport.width - 32 : undefined,
+                    visibility: pos ? "visible" : "hidden",
+                }, children: [jsx(BubbleBody, { ...p }), jsx("span", { ref: arrowRef, className: "eg-arrow" + (pos?.side === "bottom" ? " eg-top" : ""), style: arrowStyle ?? { display: "none" }, "aria-hidden": "true" })] })) : null, p.phase === "waiting" ? (jsxs("div", { className: "eg-card", role: "status", "data-eg-card": "", children: [jsxs("div", { className: "eg-loading", children: [jsx("span", { className: "eg-spin", "aria-hidden": "true" }), "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14\u2026"] }), jsx("div", { className: "eg-row", children: jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }) })] })) : null, p.phase === "missing" ? (jsxs("div", { className: "eg-card eg-err", role: "alertdialog", "aria-labelledby": "eg-missing-t", "data-eg-card": "", tabIndex: -1, children: [jsx("p", { className: "eg-b-t", id: "eg-missing-t", children: "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E2A\u0E48\u0E27\u0E19\u0E19\u0E35\u0E49\u0E1A\u0E19\u0E2B\u0E19\u0E49\u0E32" }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onRetry, children: "\u0E25\u0E2D\u0E07\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07" })] })] })) : null, p.phase === "away" ? (jsxs("div", { className: "eg-card", role: "dialog", "aria-modal": "false", "aria-labelledby": "eg-away-t", "data-eg-card": "", tabIndex: -1, children: [jsxs("div", { className: "eg-b-top", children: [jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", p.bubble.missionNo, " \u00B7 ", p.bubble.missionTitle, p.bubble.replay ? " (ทบทวน)" : ""] }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", p.bubble.index + 1, "/", p.bubble.total] })] }), jsx("p", { className: "eg-b-t", id: "eg-away-t", style: { marginTop: 8 }, children: jsx(GuideTitle, { text: p.bubble.title }) }), jsxs("div", { className: "eg-row", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: p.bubble.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onGoResume, children: "\u0E17\u0E33\u0E15\u0E48\u0E2D" })] })] })) : null, p.confirmExit ? (jsx(ConfirmModal, { title: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C\u0E15\u0E2D\u0E19\u0E19\u0E35\u0E49?", line: "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E44\u0E14\u0E49\u0E17\u0E35\u0E48\u0E1B\u0E38\u0E48\u0E21 ? \u0E21\u0E38\u0E21\u0E02\u0E27\u0E32\u0E1A\u0E19", leaveLabel: "\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E44\u0E01\u0E14\u0E4C", stayLabel: "\u0E17\u0E33\u0E15\u0E48\u0E2D", onLeave: p.onExitConfirm, onStay: p.onExitCancel })) : null] }));
+}
+function BubbleBody(p) {
+    const b = p.bubble;
+    const title = b.error ? b.error.title : b.title;
+    const why = b.error ? (b.error.detail ?? "") : b.why;
+    return (jsxs(Fragment$1, { children: [jsxs("div", { className: "eg-b-top", children: [jsxs("span", { className: "eg-mis", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", b.missionNo, " \u00B7 ", b.missionTitle, b.replay ? " (ทบทวน)" : ""] }), jsxs("span", { className: "eg-cnt", children: ["\u0E02\u0E31\u0E49\u0E19\u0E17\u0E35\u0E48 ", b.index + 1, "/", b.total] })] }), jsx("div", { className: "eg-pips", "aria-hidden": "true", children: Array.from({ length: b.total }, (_, i) => (jsx("i", { className: i < b.index ? "eg-d" : i === b.index ? "eg-c" : undefined }, i))) }), jsx("p", { className: "eg-b-t", id: BUBBLE_TITLE_ID, children: jsx(GuideTitle, { text: title }) }), jsx("p", { className: "eg-b-w", id: BUBBLE_WHY_ID, hidden: !why, children: jsx(GuideTitle, { text: why }) }), jsxs("div", { className: "eg-b-f", children: [jsx("button", { type: "button", className: "eg-exit", onClick: p.onExit, children: b.replay ? "จบการทบทวน" : "ออกจากไกด์" }), jsxs("span", { style: { display: "flex", gap: 6 }, children: [b.showEndWithoutSave ? (jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onEndWithoutSave, children: "\u0E08\u0E1A\u0E42\u0E14\u0E22\u0E44\u0E21\u0E48\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" })) : null, b.showNext ? (jsx("button", { type: "button", className: "eg-btn eg-primary", onClick: p.onNext, children: "\u0E16\u0E31\u0E14\u0E44\u0E1B" })) : null] })] })] }));
+}
+/** The fingertip at ≈62% across and down the target; upside down near the bottom. */
+function handPosition(spot, viewportHeight) {
+    const { x, y, width: w, height: h } = spot;
+    const px = x + Math.min(w * 0.62, w - 14);
+    const py = y + h * 0.62;
+    const flip = py + 50 > viewportHeight;
+    return { left: px - 11.5, top: flip ? py - h * 0.3 - 42 : py - 4, flip };
+}
+/* ------------------------------------------------------------------ */
+/* Modals                                                               */
+/* ------------------------------------------------------------------ */
+function useAutoFocus() {
+    const ref = useRef(null);
+    useEffect(() => {
+        ref.current?.focus({ preventScroll: true });
+    }, []);
+    return ref;
+}
+function ConfirmModal(p) {
+    const stay = useAutoFocus();
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "eg-scrim eg-faint", "data-eg-block": "", onClick: p.onStay }), jsxs("div", { className: "eg-modal eg-confirm eg-pop", role: "alertdialog", "aria-modal": "true", "aria-labelledby": "eg-c-t", "aria-describedby": "eg-c-d", "data-eg-modal": "", children: [jsx("h2", { id: "eg-c-t", children: p.title }), jsx("p", { className: "eg-sub", id: "eg-c-d", style: { fontSize: 14 }, children: p.line }), jsxs("div", { className: "eg-actions", children: [jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: p.onLeave, children: p.leaveLabel }), jsx("button", { type: "button", ref: stay, className: "eg-btn eg-primary", onClick: p.onStay, children: p.stayLabel })] })] })] }));
+}
+function WelcomeModal(p) {
+    const start = useAutoFocus();
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-w-t", "data-eg-modal": "", tabIndex: -1, children: [jsx("div", { className: "eg-badge", children: jsx(IconFlag, {}) }), jsx("p", { className: "eg-eyebrow", children: "\u0E44\u0E01\u0E14\u0E4C\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsx("h2", { id: "eg-w-t", children: p.title }), p.subtitle ? jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsx("ol", { className: "eg-quests", children: p.missions.map((m, i) => (jsxs("li", { className: i === 0 ? "eg-first" : undefined, children: [jsx("span", { className: "eg-n", children: i + 1 }), jsx("span", { className: "eg-t", children: m.title }), jsxs("small", { children: [m.minutes, " \u0E19\u0E32\u0E17\u0E35"] })] }, i))) }), jsxs("div", { className: "eg-actions", children: [jsx("button", { type: "button", ref: start, className: "eg-btn eg-primary", onClick: p.onStart, children: "\u0E40\u0E23\u0E34\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E41\u0E23\u0E01" }), jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onSkip, children: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E1B\u0E01\u0E48\u0E2D\u0E19" })] })] }), p.confirm ? (jsx(ConfirmModal, { title: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E01\u0E14\u0E4C\u0E44\u0E1B\u0E01\u0E48\u0E2D\u0E19?", line: "\u0E40\u0E1B\u0E34\u0E14\u0E15\u0E48\u0E2D\u0E44\u0E14\u0E49\u0E17\u0E35\u0E48\u0E1B\u0E38\u0E48\u0E21 ? \u0E21\u0E38\u0E21\u0E02\u0E27\u0E32\u0E1A\u0E19", leaveLabel: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E1B\u0E01\u0E48\u0E2D\u0E19", stayLabel: "\u0E40\u0E23\u0E34\u0E48\u0E21\u0E40\u0E25\u0E22", onLeave: p.onSkipConfirm, onStay: p.onSkipCancel })) : null] }));
+}
+function GateModal(p) {
+    const go = useAutoFocus();
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-g-t", "data-eg-modal": "", tabIndex: -1, children: [jsx("div", { className: "eg-badge", children: jsx(IconFlag, {}) }), jsx("p", { className: "eg-eyebrow", children: "\u0E44\u0E01\u0E14\u0E4C\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsx("h2", { id: "eg-g-t", children: p.title }), p.subtitle ? jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsxs("div", { className: "eg-actions", children: [jsx("a", { ref: go, className: "eg-btn eg-primary", href: p.href, style: { textDecoration: "none" }, children: p.actionLabel }), jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onLater, children: "\u0E44\u0E27\u0E49\u0E17\u0E35\u0E2B\u0E25\u0E31\u0E07" })] })] })] }));
+}
+const CONFETTI_COLOURS = ["#3b82f6", "#7db7ff", "#e6a417", "#ff7a6b", "#1d9a5f", "#b0d2ff"];
+function Confetti({ reduced }) {
+    // Fixed per mount, so a re-render does not throw new pieces.
+    const [pieces] = useState(() => Array.from({ length: 26 }, (_, i) => {
+        const a = (Math.PI * 2 * i) / 26 + Math.random() * 0.3;
+        const dist = 90 + Math.random() * 90;
+        return {
+            background: CONFETTI_COLOURS[i % CONFETTI_COLOURS.length],
+            "--x": `${Math.cos(a) * dist}px`,
+            "--y": `${Math.sin(a) * dist + 40}px`,
+            "--r": `${Math.random() * 540 - 270}deg`,
+            animationDelay: `${Math.random() * 0.12}s`,
+        };
+    }));
+    if (reduced)
+        return null;
+    return (jsx("div", { className: "eg-burst", "aria-hidden": "true", children: pieces.map((s, i) => (jsx("span", { style: s }, i))) }));
+}
+function ProgressBar({ from, to, total, label }) {
+    const [width, setWidth] = useState(total ? (from / total) * 100 : 0);
+    useEffect(() => {
+        // Two frames so the bar is drawn at `from` before it runs to `to`.
+        let raf2 = 0;
+        const raf1 = requestAnimationFrame(() => {
+            raf2 = requestAnimationFrame(() => setWidth(total ? (to / total) * 100 : 0));
+        });
+        return () => {
+            cancelAnimationFrame(raf1);
+            cancelAnimationFrame(raf2);
+        };
+    }, [to, total]);
+    return (jsxs("div", { className: "eg-prog", children: [jsx("div", { className: "eg-bar", children: jsx("i", { style: { width: `${width}%` } }) }), jsx("span", { children: label })] }));
+}
+function CelebrateModal(p) {
+    const primary = useAutoFocus();
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "eg-scrim eg-light", "data-eg-block": "" }), jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-cel-t", "data-eg-modal": "", tabIndex: -1, children: [jsx(Confetti, { reduced: p.reduced }), jsx("div", { className: "eg-medal", children: jsx(IconCheck, {}) }), jsxs("p", { className: "eg-eyebrow", children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", p.missionNo, " \u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08"] }), jsx("h2", { id: "eg-cel-t", children: p.title }), p.subtitle ? jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsx(ProgressBar, { from: p.reduced ? p.done : Math.max(0, p.done - 1), to: p.done, total: p.total, label: `${p.done}/${p.total} ภารกิจ` }), jsxs("div", { className: "eg-actions", children: [p.nextTitle ? (jsxs("button", { type: "button", ref: primary, className: "eg-btn eg-primary", onClick: p.onNext, children: ["\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E16\u0E31\u0E14\u0E44\u0E1B: ", p.nextTitle] })) : null, jsx("button", { type: "button", ref: p.nextTitle ? undefined : primary, className: "eg-btn eg-link", onClick: p.onRest, children: "\u0E1E\u0E31\u0E01\u0E01\u0E48\u0E2D\u0E19" })] })] })] }));
+}
+function CompleteModal(p) {
+    const primary = useAutoFocus();
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "eg-scrim", "data-eg-block": "" }), jsxs("div", { className: "eg-modal eg-pop", role: "dialog", "aria-modal": "true", "aria-labelledby": "eg-f-t", "data-eg-modal": "", tabIndex: -1, children: [jsx(Confetti, { reduced: p.reduced }), jsx("div", { className: "eg-medal", children: jsx(IconTrophy, {}) }), jsxs("p", { className: "eg-eyebrow", children: ["\u0E04\u0E23\u0E1A ", p.total, " \u0E20\u0E32\u0E23\u0E01\u0E34\u0E08"] }), jsx("h2", { id: "eg-f-t", children: p.title }), p.subtitle ? jsx("p", { className: "eg-sub", children: p.subtitle }) : null, jsx("ol", { className: "eg-quests", children: p.missions.map((m, i) => (jsxs("li", { className: "eg-ok", children: [jsx("span", { className: "eg-n", children: jsx(IconCheck, {}) }), jsx("span", { className: "eg-t", children: m })] }, i))) }), jsxs("div", { className: "eg-actions", children: [jsx("button", { type: "button", ref: primary, className: "eg-btn eg-primary", onClick: p.onFinish, children: p.actionLabel }), p.secondary ? (jsx("a", { className: "eg-btn eg-ghost", href: p.secondary.href, style: { textDecoration: "none" }, children: p.secondary.label })) : null] })] })] }));
+}
+/* ------------------------------------------------------------------ */
+/* Quest chip and panel                                                 */
+/* ------------------------------------------------------------------ */
+function QuestChip({ done, total, pulse, onOpen }) {
+    const ref = useRef(null);
+    const first = useRef(pulse);
+    useEffect(() => {
+        if (pulse === first.current)
+            return;
+        const el = ref.current;
+        if (!el)
+            return;
+        el.classList.remove("eg-hi");
+        void el.offsetWidth;
+        el.classList.add("eg-hi");
+    }, [pulse]);
+    const C = 2 * Math.PI * 14;
+    const pct = total ? done / total : 0;
+    return (jsxs("button", { ref: ref, type: "button", className: "eg-chip", onClick: onOpen, "aria-label": `ภารกิจเริ่มต้น เสร็จ ${done} จาก ${total}`, children: [jsxs("svg", { viewBox: "0 0 34 34", "aria-hidden": "true", children: [jsx("circle", { cx: "17", cy: "17", r: "14", fill: "none", stroke: "var(--eg-soft)", strokeWidth: "4" }), done ? (jsx("circle", { cx: "17", cy: "17", r: "14", fill: "none", stroke: "var(--eg-primary)", strokeWidth: "4", strokeLinecap: "round", strokeDasharray: `${C * pct} ${C}`, transform: "rotate(-90 17 17)" })) : null] }), "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08 ", done, "/", total] }));
+}
+function QuestPanel(p) {
+    const ref = useAutoFocus();
+    return (jsxs(Fragment$1, { children: [jsx("div", { className: "eg-panel-bd", onClick: p.onClose }), jsxs("section", { ref: ref, className: "eg-panel", role: "dialog", "aria-labelledby": "eg-q-t", tabIndex: -1, "data-eg-panel": "", children: [jsxs("div", { className: "eg-q-h", children: [jsx("h2", { id: "eg-q-t", children: "\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19" }), jsxs("span", { className: "eg-n", children: [p.done, "/", p.total] }), jsx("button", { type: "button", className: "eg-x", onClick: p.onClose, "aria-label": "\u0E1B\u0E34\u0E14", children: jsx(IconX, {}) })] }), jsx("div", { className: "eg-prog", children: jsx("div", { className: "eg-bar", children: jsx("i", { style: { width: `${p.total ? (p.done / p.total) * 100 : 0}%` } }) }) }), jsx("ol", { className: "eg-q-list", children: p.items.map((it, i) => (jsx(QuestRow, { item: it, n: i + 1, just: p.justDone === it.key, gate: p.gate, onStart: p.onStart, onDismiss: p.onDismiss }, it.key))) }), p.canHideChip ? (jsx("div", { className: "eg-q-f", children: jsx("button", { type: "button", className: "eg-btn eg-link", onClick: p.onHideChip, children: "\u0E0B\u0E48\u0E2D\u0E19\u0E1B\u0E38\u0E48\u0E21\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08" }) })) : null] })] }));
+}
+function QuestRow({ item, n, just, gate, onStart, onDismiss, }) {
+    const v = item.view;
+    const ticked = v === "done" || v === "already";
+    const cls = "eg-q-item" +
+        (ticked ? " eg-done" : v === "next" ? " eg-next" : "") +
+        (v === "locked" || v === "waiting" ? " eg-dim" : "") +
+        (just ? " eg-just" : "");
+    let meta = `ประมาณ ${item.minutes} นาที`;
+    if (v === "done")
+        meta = item.completedAt ? `เสร็จ ${formatThaiDateTime(item.completedAt)}` : "เสร็จแล้ว";
+    else if (v === "already")
+        meta = "ทำไว้แล้ว";
+    else if (v === "skipped")
+        meta = jsx("span", { children: "\u0E02\u0E49\u0E32\u0E21\u0E44\u0E27\u0E49" });
+    else if (v === "waiting" && gate)
+        meta = gate.pending;
+    // Locked: what to do first gets its own line under the title, so the title
+    // keeps the row's width and the button stays short.
+    const lockHint = v === "locked" && item.lockedBy ? `ทำ ${item.lockedBy} ก่อน` : null;
+    let button;
+    if (v === "done")
+        button = jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onStart(item.key, true), children: "\u0E17\u0E33\u0E0B\u0E49\u0E33" });
+    else if (v === "already")
+        button = jsx("button", { type: "button", className: "eg-btn eg-ghost", onClick: () => onStart(item.key, true), children: "\u0E14\u0E39\u0E27\u0E34\u0E18\u0E35\u0E17\u0E33" });
+    else if (v === "waiting" && gate)
+        button = (jsx("a", { className: "eg-btn eg-ghost", href: gate.href, style: { textDecoration: "none" }, children: gate.label }));
+    else if (v === "locked")
+        button = (jsx("button", { type: "button", className: "eg-btn eg-ghost", disabled: true, "aria-label": lockHint ? `เริ่ม (${lockHint})` : undefined, children: "\u0E40\u0E23\u0E34\u0E48\u0E21" }));
+    else
+        button = (jsx("button", { type: "button", className: "eg-btn " + (v === "next" ? "eg-primary" : "eg-ghost"), onClick: () => onStart(item.key, false), children: v === "skipped" || v === "active" ? "ทำต่อ" : "เริ่ม" }));
+    const dismissable = item.optional && (v === "todo" || v === "next");
+    return (jsxs("li", { className: cls, children: [jsx("span", { className: "eg-n", children: ticked ? jsx(IconCheck, {}) : n }), jsxs("div", { className: "eg-t", children: [jsx("b", { children: item.title }), lockHint ? jsx("small", { className: "eg-lock", children: lockHint }) : null, jsx("small", { className: v === "skipped" ? "eg-sk" : undefined, children: meta })] }), dismissable ? (jsxs("span", { className: "eg-q-acts", children: [button, jsx("button", { type: "button", className: "eg-btn eg-link", onClick: () => onDismiss(item.key), children: "\u0E44\u0E21\u0E48\u0E43\u0E0A\u0E49\u0E20\u0E32\u0E23\u0E01\u0E34\u0E08\u0E19\u0E35\u0E49" })] })) : (button)] }));
+}
+function GuideToast({ text }) {
+    return (jsx("div", { className: "eg-toast", role: "status", children: text }));
+}
+
+const EMPLOYEE_RECORD_REQUIRED = "EMPLOYEE_RECORD_REQUIRED";
+const EMPLOYEE_RECORD_REQUIRED_EVENT = "erp:employee-record-required";
+const EMPLOYEE_RECORD_OK_EVENT = "erp:employee-record-ok";
+/**
+ * Shown when the API refuses every request because the signed-in account has
+ * no employee record in this organisation.
+ *
+ * A gate rather than a banner. Leave, attendance, approvals and payslips all
+ * identify a person by that record, so once the server started enforcing it
+ * every call fails — and without something that says so, the app becomes a
+ * screen of error toasts with no explanation and no way forward.
+ */
+function EmployeeRequiredGate({ platformBaseUrl, }) {
+    const [blocked, setBlocked] = useState(false);
+    const params = useParams();
+    const code = params?.code ?? "";
+    useEffect(() => {
+        const onBlocked = () => setBlocked(true);
+        const onOk = () => setBlocked(false);
+        window.addEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
+        window.addEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
+        return () => {
+            window.removeEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
+            window.removeEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
+        };
+    }, []);
+    if (!blocked)
+        return null;
+    const base = platformBaseUrl?.replace(/\/$/, "") ?? "";
+    const createHref = code ? `${base}/${code}/employee/create` : `${base}/`;
+    return (jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-background/95 p-6 backdrop-blur-sm", children: jsxs("div", { className: "w-full max-w-md space-y-5 text-center", children: [jsx(ContactRound, { className: "mx-auto h-12 w-12 text-muted-foreground" }), jsxs("div", { className: "space-y-2", children: [jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E19\u0E35\u0E49\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E1C\u0E39\u0E01\u0E01\u0E31\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E25\u0E32 \u0E25\u0E07\u0E40\u0E27\u0E25\u0E32 \u0E40\u0E1A\u0E34\u0E01\u0E40\u0E07\u0E34\u0E19 \u0E41\u0E25\u0E30\u0E01\u0E32\u0E23\u0E2D\u0E19\u0E38\u0E21\u0E31\u0E15\u0E34 \u0E23\u0E30\u0E1A\u0E38\u0E15\u0E31\u0E27\u0E04\u0E19\u0E08\u0E32\u0E01\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19 \u0E08\u0E36\u0E07\u0E22\u0E31\u0E07\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E43\u0E19\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49" })] }), jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [jsx(Button, { onClick: () => window.location.reload(), children: "\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48" }), jsx(Button, { variant: "outline", asChild: true, children: jsxs("a", { href: createHref, children: [jsx(UserPlus, { className: "mr-1 h-4 w-4" }), "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19"] }) })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E16\u0E49\u0E32\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E41\u0E01\u0E49\u0E44\u0E02 \u0E43\u0E2B\u0E49\u0E41\u0E08\u0E49\u0E07\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] }) }));
+}
+
+/* ------------------------------------------------------------------ */
+/* Fail-open wrappers                                                   */
+/* ------------------------------------------------------------------ */
+class GuideErrorBoundary extends React.Component {
+    constructor() {
+        super(...arguments);
+        Object.defineProperty(this, "state", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: { failed: false }
+        });
+    }
+    static getDerivedStateFromError() {
+        return { failed: true };
+    }
+    componentDidCatch(error) {
+        if (typeof console !== "undefined")
+            console.warn("[erp-shell guide] hidden after an error", error);
+        try {
+            publishGuideEntry(null, null);
+        }
+        catch {
+            /* ignore */
+        }
+    }
+    render() {
+        return this.state.failed ? null : this.props.children;
+    }
+}
+function GuideHost(props) {
+    return (jsx(GuideErrorBoundary, { children: jsx(Suspense, { fallback: null, children: jsx(GuideHostInner, { ...props }) }) }));
+}
+let fallbackClient = null;
+function useShellQueryClient() {
+    const provided = useContext(QueryClientContext);
+    if (provided)
+        return provided;
+    fallbackClient ?? (fallbackClient = new QueryClient());
+    return fallbackClient;
+}
+/* ------------------------------------------------------------------ */
+/* Session mirror (instant resume after F5)                             */
+/* ------------------------------------------------------------------ */
+const mirrorKey = (orgId, suite) => `erp-guide:${orgId}:${suite.key}`;
+function readMirror(orgId, suite) {
+    try {
+        const raw = sessionStorage.getItem(mirrorKey(orgId, suite));
+        if (!raw)
+            return null;
+        const parsed = JSON.parse(raw);
+        const row = parseRow(parsed);
+        if (!row || row.guide_version !== suite.version)
+            return null;
+        return { ...row, server_status: parsed.server_status ?? null };
+    }
+    catch {
+        return null;
+    }
+}
+function writeMirror(orgId, suite, p) {
+    try {
+        sessionStorage.setItem(mirrorKey(orgId, suite), JSON.stringify(p));
+    }
+    catch {
+        /* private mode: the server copy is enough */
+    }
+}
+/* ------------------------------------------------------------------ */
+/* 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.
+ */
+function usePrimaryTab(name) {
+    const [primary, setPrimary] = useState(false);
+    useEffect(() => {
+        const locks = (typeof navigator !== "undefined" ? navigator.locks : undefined);
+        if (!locks?.request) {
+            setPrimary(true);
+            return;
+        }
+        const abort = new AbortController();
+        let release = null;
+        locks
+            .request(name, { signal: abort.signal }, () => {
+            setPrimary(true);
+            return new Promise(resolve => {
+                release = resolve;
+            });
+        })
+            .catch(() => {
+            /* aborted on unmount */
+        });
+        return () => {
+            abort.abort();
+            release?.();
+            setPrimary(false);
+        };
+    }, [name]);
+    return primary;
+}
+/* ------------------------------------------------------------------ */
+/* Host                                                                 */
+/* ------------------------------------------------------------------ */
+const TARGET_PAD = 6;
+const LOST_GRACE_MS = 350;
+const WAIT_MS = 8000;
+const WAIT_CAP_MS = 30000;
+const WELCOME_DELAY_MS = 500;
+const CELEBRATE_DELAY_MS = 450;
+const SAVE_DEBOUNCE_MS = 600;
+function GuideHostInner({ config, organizationId, code }) {
+    const suite = config.suite;
+    const client = useShellQueryClient();
+    const pathname = usePathname() ?? "/";
+    const searchParams = useSearchParams();
+    const search = searchParams?.toString() ?? "";
+    const router = useRouter();
+    const { open: sidebarOpen } = useSidebar();
+    const fetching = useIsFetching({ predicate: q => q.queryKey[0] !== "erp-shell" }, client);
+    const primary = usePrimaryTab(`erp-guide:${organizationId}:${suite.key}`);
+    // The shell's EmployeeRequiredGate is up: no tour over it.
+    const [employeeBlocked, setEmployeeBlocked] = useState(false);
+    useEffect(() => {
+        const on = () => setEmployeeBlocked(true);
+        const off = () => setEmployeeBlocked(false);
+        window.addEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, on);
+        window.addEventListener(EMPLOYEE_RECORD_OK_EVENT, off);
+        return () => {
+            window.removeEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, on);
+            window.removeEventListener(EMPLOYEE_RECORD_OK_EVENT, off);
+        };
+    }, []);
+    const query = useQuery({
+        queryKey: ["erp-shell", "guides", organizationId, suite.app, suite.key, suite.version],
+        queryFn: ({ signal }) => fetchGuides(organizationId, suite, signal),
+        enabled: primary && config.ready !== false,
+        staleTime: 5 * 60000,
+        gcTime: 30 * 60000,
+        retry: false,
+        refetchOnWindowFocus: false,
+    }, client);
+    const answer = query.data ?? null;
+    const live = !!answer && answer.audience !== "none" && !answer.newerOnServer && primary && config.ready !== false && !employeeBlocked;
+    /* ---------------- machine ---------------- */
+    const [state, setState] = useState(null);
+    const stateRef = useRef(null);
+    // What the server holds (payloadKey), so a save that would change nothing
+    // is not sent and does not bump its rev.
+    const savedKey = useRef(null);
+    useEffect(() => {
+        if (!answer || answer.audience === "none" || answer.newerOnServer) {
+            stateRef.current = null;
+            setState(null);
+            return;
+        }
+        if (stateRef.current)
+            return;
+        savedKey.current = answer.progress && answer.progress.rev > 0 ? payloadKey(answer.progress, suite.app) : null;
+        // Resume from whichever copy is further along: the server's, or this
+        // tab's session copy from before a refresh (its rev is the server's).
+        const mirror = readMirror(organizationId, suite);
+        let progress = answer.progress;
+        if (mirror && furtherProgress(mirror, progress) === mirror)
+            progress = mergeProgress(mirror, progress);
+        const s = initialGuideState(answer.audience, progress);
+        stateRef.current = s;
+        setState(s);
+    }, [answer, organizationId, suite]);
+    // The latest page facts, read by the machine through env.
+    const pageRef = useRef({ pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can });
+    pageRef.current = { pathname, search, sidebarOpen, facts: config.facts ?? {}, can: config.can };
+    const targetElRef = useRef(null);
+    const env = useCallback(() => {
+        const pg = pageRef.current;
+        return {
+            code,
+            pathname: pg.pathname,
+            search: new URLSearchParams(pg.search),
+            facts: pg.facts,
+            can: (key) => {
+                try {
+                    return pg.can ? pg.can(key) : true;
+                }
+                catch {
+                    return true;
+                }
+            },
+            isVisible: (anchor, id) => anchorVisible(anchor, id),
+            sidebarOpen: pg.sidebarOpen,
+            targetValue: () => fieldValue(targetElRef.current),
+        };
+    }, [code]);
+    /* ---------------- effects: save, announce, toast, navigate ---------------- */
+    const [liveText, setLiveText] = useState("");
+    const [toast, setToast] = useState(null);
+    const toastTimer = useRef(null);
+    const saveTimer = useRef(null);
+    const saving = useRef(null);
+    const savePending = useRef(false);
+    const flushSave = useCallback(async () => {
+        if (saveTimer.current) {
+            clearTimeout(saveTimer.current);
+            saveTimer.current = null;
+        }
+        if (saving.current) {
+            savePending.current = true;
+            return;
+        }
+        const run = async () => {
+            do {
+                savePending.current = false;
+                const cur = stateRef.current;
+                if (!cur)
+                    return;
+                if (payloadKey(cur.progress, suite.app) === savedKey.current)
+                    continue;
+                const row = await saveGuides(organizationId, suite, cur.progress);
+                if (row)
+                    savedKey.current = payloadKey(row, suite.app);
+                if (row && stateRef.current) {
+                    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+                    dispatchRef.current({ type: "serverRow", progress: row });
+                }
+            } while (savePending.current);
+        };
+        saving.current = run().finally(() => {
+            saving.current = null;
+        });
+    }, [organizationId, suite]);
+    const runEffects = useCallback((effects) => {
+        for (const e of effects) {
+            try {
+                if (e.type === "save") {
+                    if (stateRef.current)
+                        writeMirror(organizationId, suite, stateRef.current.progress);
+                    if (e.immediate)
+                        void flushSave();
+                    else {
+                        if (saveTimer.current)
+                            clearTimeout(saveTimer.current);
+                        saveTimer.current = setTimeout(() => void flushSave(), SAVE_DEBOUNCE_MS);
+                    }
+                }
+                else if (e.type === "announce") {
+                    setLiveText("");
+                    setTimeout(() => setLiveText(e.text), 60);
+                }
+                else if (e.type === "toast") {
+                    setToast(e.text);
+                    if (toastTimer.current)
+                        clearTimeout(toastTimer.current);
+                    toastTimer.current = setTimeout(() => setToast(null), 3200);
+                }
+                else if (e.type === "navigate") {
+                    if (/^https?:\/\//i.test(e.href))
+                        window.location.assign(e.href);
+                    else
+                        router.push(e.href);
+                }
+                else if (e.type === "closeAppDialog") {
+                    // After this render takes the guard away, Escape to the app's
+                    // dialog (Radix listens on the document).
+                    setTimeout(() => {
+                        const t = document.activeElement ?? document.body;
+                        t.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true, cancelable: true }));
+                    }, 60);
+                }
+            }
+            catch {
+                /* an effect never breaks the app */
+            }
+        }
+    }, [flushSave, organizationId, router, suite]);
+    const dispatch = useCallback((action) => {
+        const cur = stateRef.current;
+        if (!cur)
+            return;
+        let r;
+        try {
+            r = reduceGuide(cur, action, suite, env());
+        }
+        catch (err) {
+            if (typeof console !== "undefined")
+                console.warn("[erp-shell guide] stopped", err);
+            stateRef.current = null;
+            setState(null);
+            return;
+        }
+        if (r.state !== cur) {
+            stateRef.current = r.state;
+            setState(r.state);
+        }
+        if (r.effects.length)
+            runEffects(r.effects);
+    }, [env, runEffects, suite]);
+    const dispatchRef = useRef(dispatch);
+    dispatchRef.current = dispatch;
+    // Save what is pending when the page goes away.
+    useEffect(() => {
+        const flush = () => {
+            if (saveTimer.current)
+                void flushSave();
+        };
+        window.addEventListener("pagehide", flush);
+        return () => {
+            window.removeEventListener("pagehide", flush);
+            flush();
+            if (toastTimer.current)
+                clearTimeout(toastTimer.current);
+        };
+    }, [flushSave]);
+    /* ---------------- boot: resume, welcome ---------------- */
+    const screen = state?.screen ?? { name: "idle" };
+    const resumed = useRef(false);
+    useEffect(() => {
+        if (!live || !state || resumed.current)
+            return;
+        resumed.current = true;
+        dispatch({ type: "resume" });
+    }, [live, state, dispatch]);
+    const welcomeRoutes = suite.welcomeRoutes ?? ["/[code]"];
+    const onWelcomeRoute = welcomeRoutes.some(r => !!matchRoute(r, pathname, search, code));
+    const due = !!state && live && welcomeDue(state, suite) && onWelcomeRoute && fetching === 0;
+    const factsKey = useFactsKey(config.facts);
+    useEffect(() => {
+        if (!due)
+            return;
+        const t = setTimeout(() => dispatchRef.current({ type: "welcome" }), WELCOME_DELAY_MS);
+        return () => clearTimeout(t);
+    }, [due, factsKey]);
+    /* ---------------- sync on route, sidebar, facts, DOM ---------------- */
+    const inStep = live && screen.name === "step";
+    useEffect(() => {
+        if (inStep)
+            dispatch({ type: "sync" });
+    }, [inStep, pathname, search, sidebarOpen, factsKey, dispatch]);
+    useEffect(() => {
+        if (!inStep || typeof MutationObserver === "undefined")
+            return;
+        let raf = 0;
+        const obs = new MutationObserver(records => {
+            // Our own layer's changes are not the page's.
+            if (records.every(r => inGuideLayer(r.target)))
+                return;
+            if (raf)
+                return;
+            raf = requestAnimationFrame(() => {
+                raf = 0;
+                dispatchRef.current({ type: "sync" });
+            });
+        });
+        obs.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ["data-state", "hidden", "aria-hidden", "class", "style", "open"],
+        });
+        return () => {
+            obs.disconnect();
+            if (raf)
+                cancelAnimationFrame(raf);
+        };
+    }, [inStep]);
+    /* ---------------- the current step ---------------- */
+    const stepInfo = useMemo(() => {
+        if (!state || screen.name !== "step")
+            return null;
+        const mission = findMission(suite, screen.mission);
+        if (!mission)
+            return null;
+        const step = mission.steps[screen.index];
+        if (!step)
+            return null;
+        const missionNo = suite.missions.indexOf(mission) + 1;
+        return { mission, step, missionNo };
+    }, [state, screen, suite]);
+    const stepCtx = useMemo(() => {
+        if (!state)
+            return null;
+        const e = env();
+        const params = stepInfo?.step.route ? (matchRoute(stepInfo.step.route, e.pathname, e.search, code) ?? {}) : {};
+        return guideContext(e, state.progress.context, params);
+        // pathname/search/factsKey make it current.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [state, stepInfo, env, code, pathname, search, factsKey]);
+    const target = stepInfo && stepCtx && screen.name === "step"
+        ? spotlightTarget(stepInfo.step, stepCtx, screen.bridge)
+        : null;
+    const targetKey = target ? `${target.anchor}|${target.id ?? ""}` : "";
+    const phase = screen.name === "step" ? screen.phase : null;
+    const stepId = screen.name === "step" ? `${screen.mission}:${screen.index}:${screen.bridge ? "b" : ""}` : "";
+    /* Measure every frame while a step is shown: the spotlight follows
+       scrolling, dialogs animating in, the drawer sliding, the keyboard. */
+    const [layout, setLayout] = useState({
+        spot: null,
+        covered: false,
+        holes: [],
+        popovers: [],
+        vw: 0,
+        vh: 0,
+        oy: 0,
+    });
+    useEffect(() => {
+        if (!inStep) {
+            targetElRef.current = null;
+            return;
+        }
+        let raf = 0;
+        let lostSince = null;
+        let last = { spot: null, covered: false, holes: [], popovers: [], vw: 0, vh: 0, oy: 0 };
+        targetElRef.current = target ? findAnchor(target.anchor, target.id) : null;
+        const allow = stepInfo?.step.allow ?? [];
+        // The spotlight is the part of the target a person can see: cut by the
+        // scroll boxes around it (a row of tabs that scrolls sideways) and the
+        // viewport. Wholly out of view (scrolled away up or down), its own box,
+        // and the tour scrolls it back.
+        let clipFor = null;
+        let clips = [];
+        const spotOf = (el) => {
+            if (el !== clipFor) {
+                clipFor = el;
+                clips = clipAncestors(el);
+            }
+            return padRect(visibleRectOf(el, clips) ?? rectOf(el), TARGET_PAD);
+        };
+        const tick = () => {
+            raf = requestAnimationFrame(tick);
+            const vv = window.visualViewport;
+            const vw = window.innerWidth;
+            const vh = vv ? vv.height : window.innerHeight;
+            const oy = vv ? vv.offsetTop : 0;
+            let el = targetElRef.current;
+            if (target && (!el || !el.isConnected)) {
+                el = findAnchor(target.anchor, target.id);
+                targetElRef.current = el;
+            }
+            let spot = null;
+            if (target && el && isPresent(el)) {
+                lostSince = null;
+                spot = spotOf(el);
+            }
+            else if (target) {
+                // Maybe re-rendered under another node.
+                const again = findAnchor(target.anchor, target.id);
+                if (again) {
+                    targetElRef.current = again;
+                    spot = spotOf(again);
+                    lostSince = null;
+                }
+                else if (phase === "ready") {
+                    lostSince ?? (lostSince = performance.now());
+                    if (performance.now() - lostSince > LOST_GRACE_MS) {
+                        lostSince = null;
+                        dispatchRef.current({ type: "targetLost" });
+                    }
+                }
+            }
+            if (phase === "waiting" && spot)
+                dispatchRef.current({ type: "sync" });
+            const popovers = [];
+            for (const p of openPoppers())
+                popovers.push(padRect(rectOf(p), 2));
+            const holes = [];
+            for (const a of allow) {
+                const ael = findAnchor(a);
+                if (ael)
+                    holes.push(padRect(rectOf(ael), TARGET_PAD));
+            }
+            const covered = !!spot && coveredByDialog(targetElRef.current);
+            const next = { spot, covered, holes, popovers, vw, vh, oy };
+            const sameList = (a, b) => a.length === b.length && a.every((h, i) => sameRect(h, b[i]));
+            if (!sameRect(next.spot, last.spot) ||
+                next.covered !== last.covered ||
+                next.vw !== last.vw ||
+                next.vh !== last.vh ||
+                next.oy !== last.oy ||
+                !sameList(next.holes, last.holes) ||
+                !sameList(next.popovers, last.popovers)) {
+                last = next;
+                setLayout(next);
+            }
+        };
+        raf = requestAnimationFrame(tick);
+        return () => cancelAnimationFrame(raf);
+        // stepId/targetKey/phase restart the loop for a new step.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inStep, stepId, targetKey, phase]);
+    /* Waiting for the target: 8 s of not-loading time (30 s at most). */
+    const fetchingRef = useRef(fetching);
+    fetchingRef.current = fetching;
+    useEffect(() => {
+        if (!inStep || phase !== "waiting")
+            return;
+        let idle = 0;
+        const started = Date.now();
+        const timeout = stepInfo?.step.timeoutMs ?? WAIT_MS;
+        const iv = setInterval(() => {
+            if (fetchingRef.current === 0 && document.visibilityState !== "hidden")
+                idle += 250;
+            if (idle >= timeout || Date.now() - started >= WAIT_CAP_MS) {
+                clearInterval(iv);
+                dispatchRef.current({ type: "timeout" });
+            }
+        }, 250);
+        return () => clearInterval(iv);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inStep, stepId, phase, screen.name === "step" ? screen.misses : 0]);
+    /* On a step becoming ready: bring the target into view, focus, describe. */
+    const readyKey = inStep && phase === "ready" ? stepId : "";
+    useEffect(() => {
+        if (!readyKey || !stepInfo || screen.name !== "step")
+            return;
+        const el = targetElRef.current ?? (target ? findAnchor(target.anchor, target.id) : null);
+        if (el)
+            revealTarget(el);
+        const isInput = !screen.bridge && stepKind(stepInfo.step) === "input";
+        const t = setTimeout(() => {
+            if (isInput && el) {
+                const f = fieldOf(el);
+                f?.focus({ preventScroll: true });
+            }
+            else {
+                const b = document.querySelector(`[${GUIDE_LAYER_ATTRIBUTE}] [data-eg-bubble]`);
+                b?.focus({ preventScroll: true });
+            }
+        }, 30);
+        // The target is described by the bubble while the step lasts.
+        const described = el ? (isInput ? fieldOf(el) : el) : null;
+        const prev = described?.getAttribute("aria-describedby") ?? null;
+        if (described)
+            described.setAttribute("aria-describedby", [BUBBLE_TITLE_ID, BUBBLE_WHY_ID, prev].filter(Boolean).join(" "));
+        return () => {
+            clearTimeout(t);
+            if (!described)
+                return;
+            if (prev)
+                described.setAttribute("aria-describedby", prev);
+            else
+                described.removeAttribute("aria-describedby");
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [readyKey]);
+    /* Signals from the page: API answers, app events, presses, typing. */
+    useEffect(() => {
+        if (!inStep || !stepInfo)
+            return;
+        const onApi = (e) => {
+            const d = e.detail;
+            if (!d || typeof d.status !== "number")
+                return;
+            dispatchRef.current({ type: "signal", signal: { kind: "api", method: d.method, path: d.path, status: d.status, id: d.id, message: d.message } });
+        };
+        window.addEventListener(API_EVENT, onApi);
+        const names = triggersOf(stepInfo.step).flatMap(t => ("event" in t ? [t.event] : []));
+        const onApp = (name) => (e) => dispatchRef.current({ type: "signal", signal: { kind: "event", name, detail: e.detail ?? undefined } });
+        const appHandlers = names.map(n => [GUIDE_EVENT_PREFIX + n, onApp(n)]);
+        appHandlers.forEach(([n, h]) => window.addEventListener(n, h));
+        const inTarget = (node) => {
+            const el = targetElRef.current;
+            return !!el && node instanceof Node && el.contains(node);
+        };
+        // After the app has handled it, so what it does comes first.
+        const later = (a) => setTimeout(() => dispatchRef.current(a), 0);
+        const onPress = (e) => {
+            if (inTarget(e.target))
+                later({ type: "signal", signal: { kind: "activate" } });
+        };
+        const onKey = (e) => {
+            if ((e.key === "Enter" || e.key === " ") && inTarget(e.target) && stepKind(stepInfo.step) !== "input") {
+                later({ type: "signal", signal: { kind: "activate" } });
+            }
+        };
+        const onInput = (e) => {
+            if (!inTarget(e.target))
+                return;
+            dispatchRef.current({ type: "signal", signal: { kind: "typing" } });
+            later({ type: "signal", signal: { kind: "value", value: fieldValue(targetElRef.current) } });
+        };
+        document.addEventListener("pointerup", onPress, true);
+        document.addEventListener("keydown", onKey, true);
+        document.addEventListener("input", onInput, true);
+        document.addEventListener("change", onInput, true);
+        return () => {
+            window.removeEventListener(API_EVENT, onApi);
+            appHandlers.forEach(([n, h]) => window.removeEventListener(n, h));
+            document.removeEventListener("pointerup", onPress, true);
+            document.removeEventListener("keydown", onKey, true);
+            document.removeEventListener("input", onInput, true);
+            document.removeEventListener("change", onInput, true);
+        };
+    }, [inStep, stepInfo]);
+    /* ---------------- the guard ---------------- */
+    const modalScreen = live && (screen.name === "welcome" || screen.name === "gate" || screen.name === "celebrate" || screen.name === "complete");
+    const panelOpen = live && !!state?.panelOpen;
+    const guarding = inStep || modalScreen;
+    const guardingRef = useRef(guarding);
+    guardingRef.current = guarding;
+    const modalRef = useRef(false);
+    modalRef.current = modalScreen || (screen.name === "step" && (screen.confirmExit || screen.phase !== "ready"));
+    const stepInfoRef = useRef(stepInfo);
+    stepInfoRef.current = stepInfo;
+    useEffect(() => {
+        if (!live)
+            return;
+        const allowedTarget = (node) => {
+            if (!(node instanceof Node))
+                return false;
+            const el = targetElRef.current;
+            if (el && el.contains(node))
+                return true;
+            const elNode = node instanceof Element ? node : node.parentElement;
+            if (!elNode)
+                return false;
+            if (elNode.closest(POPPER_SELECTOR) || elNode.closest(TOASTER_SELECTOR))
+                return true;
+            for (const a of stepInfoRef.current?.step.allow ?? []) {
+                const ael = findAnchor(a);
+                if (ael && ael.contains(node))
+                    return true;
+            }
+            return false;
+        };
+        const onPointer = (e) => {
+            const t = e.target;
+            if (inGuideLayer(t)) {
+                // Our dim layer eats the press (and keeps focus where it is).
+                if (t instanceof Element && t.closest("[data-eg-block]")) {
+                    e.preventDefault();
+                    if (e.type === "pointerdown")
+                        dispatchRef.current({ type: "blocked" });
+                }
+                // The app's open dialog or menu never hears the press (the click
+                // itself goes on to our buttons).
+                if (e.type !== "click")
+                    e.stopPropagation();
+                return;
+            }
+            if (!guardingRef.current)
+                return;
+            if (modalRef.current || !allowedTarget(t)) {
+                e.preventDefault();
+                e.stopPropagation();
+                if (e.type === "pointerdown")
+                    dispatchRef.current({ type: "blocked" });
+            }
+        };
+        // Radix FocusScope pulls focus back into an open dialog; DismissableLayer
+        // closes on focus outside. Neither may see focus moving to the tour.
+        const onFocusIn = (e) => {
+            if (inGuideLayer(e.target))
+                e.stopPropagation();
+        };
+        const onFocusOut = (e) => {
+            if (inGuideLayer(e.relatedTarget))
+                e.stopPropagation();
+        };
+        const onKey = (e) => {
+            const s = stateRef.current;
+            if (!s)
+                return;
+            const sc = s.screen;
+            const stop = () => {
+                e.preventDefault();
+                e.stopImmediatePropagation();
+            };
+            if (e.key === "Escape") {
+                if (sc.name === "step") {
+                    stop();
+                    if (sc.confirmExit)
+                        dispatchRef.current({ type: "exitCancel" });
+                    else
+                        dispatchRef.current({ type: "exit" });
+                }
+                else if (sc.name === "welcome") {
+                    stop();
+                    dispatchRef.current({ type: sc.confirm ? "welcomeSkipCancel" : "welcomeSkip" });
+                }
+                else if (sc.name === "gate") {
+                    stop();
+                    dispatchRef.current({ type: "gateLater" });
+                }
+                else if (sc.name === "celebrate") {
+                    stop();
+                    dispatchRef.current({ type: "rest" });
+                }
+                else if (sc.name === "complete") {
+                    stop();
+                    dispatchRef.current({ type: "finish" });
+                }
+                else if (s.panelOpen) {
+                    stop();
+                    dispatchRef.current({ type: "closePanel" });
+                }
+                return;
+            }
+            if (!guardingRef.current)
+                return;
+            const layer = layerRef.current;
+            if (e.key === "Tab") {
+                // Tab stays on what the step is about: the target and the bubble, or
+                // the open card.
+                const modals = layer ? Array.from(layer.querySelectorAll("[data-eg-modal],[data-eg-card]")) : [];
+                let list;
+                if (sc.name === "step" && !sc.confirmExit && sc.phase === "ready") {
+                    const el = targetElRef.current;
+                    const step = stepInfoRef.current?.step;
+                    const isInput = !!step && !sc.bridge && stepKind(step) === "input";
+                    const inTargetList = el ? focusablesIn(isInput ? (fieldOf(el) ?? el) : el) : [];
+                    const bubble = layer?.querySelector("[data-eg-bubble]") ?? null;
+                    list = [...inTargetList, ...(bubble ? Array.from(bubble.querySelectorAll(FOCUSABLE)) : [])];
+                    for (const p of openPoppers())
+                        list.push(...focusablesIn(p));
+                }
+                else {
+                    const last = modals[modals.length - 1] ?? null;
+                    list = last ? Array.from(last.querySelectorAll(FOCUSABLE)) : [];
+                }
+                if (!list.length)
+                    return;
+                stop();
+                const i = list.indexOf(document.activeElement);
+                const n = e.shiftKey ? (i <= 0 ? list.length - 1 : i - 1) : i === -1 || i === list.length - 1 ? 0 : i + 1;
+                list[n].focus();
+                return;
+            }
+            if (e.key === "Enter" || e.key === " ") {
+                const active = document.activeElement;
+                if (inGuideLayer(active))
+                    return;
+                if (sc.name === "step" && sc.phase === "ready" && !sc.confirmExit && e.key === "Enter") {
+                    const step = stepInfoRef.current?.step;
+                    const el = targetElRef.current;
+                    if (step && stepKind(step) === "input" && el && active instanceof Node && el.contains(active) && !(active instanceof HTMLTextAreaElement)) {
+                        // During the tour Enter is ถัดไป, not "submit the form".
+                        stop();
+                        dispatchRef.current({ type: "next" });
+                        return;
+                    }
+                }
+                if (modalRef.current || !allowedTarget(active))
+                    stop();
+            }
+        };
+        window.addEventListener("pointerdown", onPointer, true);
+        window.addEventListener("mousedown", onPointer, true);
+        window.addEventListener("touchstart", onPointer, { capture: true, passive: false });
+        window.addEventListener("click", onPointer, true);
+        window.addEventListener("focusin", onFocusIn, true);
+        window.addEventListener("focusout", onFocusOut, true);
+        window.addEventListener("keydown", onKey, true);
+        return () => {
+            window.removeEventListener("pointerdown", onPointer, true);
+            window.removeEventListener("mousedown", onPointer, true);
+            window.removeEventListener("touchstart", onPointer, true);
+            window.removeEventListener("click", onPointer, true);
+            window.removeEventListener("focusin", onFocusIn, true);
+            window.removeEventListener("focusout", onFocusOut, true);
+            window.removeEventListener("keydown", onKey, true);
+        };
+    }, [live]);
+    /* Focus comes back to where it was when the tour lets go. */
+    const lastFocus = useRef(null);
+    const engaged = guarding || panelOpen;
+    useLayoutEffect(() => {
+        if (engaged) {
+            if (!lastFocus.current) {
+                const a = document.activeElement;
+                lastFocus.current = a instanceof HTMLElement && !inGuideLayer(a) ? a : null;
+            }
+            return;
+        }
+        const back = lastFocus.current;
+        lastFocus.current = null;
+        if (back && back.isConnected)
+            back.focus({ preventScroll: true });
+    }, [engaged]);
+    /* ---------------- the layer ---------------- */
+    const [layer, setLayer] = useState(null);
+    const layerRef = useRef(null);
+    useEffect(() => {
+        const el = document.createElement("div");
+        el.setAttribute(GUIDE_LAYER_ATTRIBUTE, "");
+        document.body.appendChild(el);
+        layerRef.current = el;
+        setLayer(el);
+        // A Radix modal hides everything else from screen readers; not us.
+        const obs = new MutationObserver(() => {
+            if (el.getAttribute("aria-hidden") === "true")
+                el.removeAttribute("aria-hidden");
+            if (el.hasAttribute("data-aria-hidden"))
+                el.removeAttribute("data-aria-hidden");
+            if (el.hasAttribute("inert"))
+                el.removeAttribute("inert");
+        });
+        obs.observe(el, { attributes: true, attributeFilter: ["aria-hidden", "data-aria-hidden", "inert"] });
+        return () => {
+            obs.disconnect();
+            el.remove();
+            layerRef.current = null;
+        };
+    }, []);
+    const [phone, setPhone] = useState(false);
+    const [reduced, setReduced] = useState(false);
+    useEffect(() => {
+        const sync = () => {
+            setPhone(isPhoneWidth());
+            setReduced(prefersReducedMotion());
+        };
+        sync();
+        window.addEventListener("resize", sync);
+        return () => window.removeEventListener("resize", sync);
+    }, []);
+    // The celebration waits a beat, so the new row can be seen first.
+    const [celebrateShown, setCelebrateShown] = useState(false);
+    const celebrateKey = screen.name === "celebrate" || screen.name === "complete" ? screen.name + (screen.name === "celebrate" ? screen.mission : "") : "";
+    useEffect(() => {
+        setCelebrateShown(false);
+        if (!celebrateKey)
+            return;
+        const t = setTimeout(() => setCelebrateShown(true), CELEBRATE_DELAY_MS);
+        return () => clearTimeout(t);
+    }, [celebrateKey]);
+    // Ring moves smoothly only right after a step change.
+    const [moving, setMoving] = useState(false);
+    useEffect(() => {
+        if (!stepId)
+            return;
+        setMoving(true);
+        const t = setTimeout(() => setMoving(false), 320);
+        return () => clearTimeout(t);
+    }, [stepId]);
+    /* ---------------- the "?" menu entry ---------------- */
+    const ctxIdle = useMemo(() => (state ? guideContext(env(), state.progress.context) : null), [state, env, factsKey, pathname]); // eslint-disable-line react-hooks/exhaustive-deps
+    const done = state && ctxIdle ? settledCount(suite, state.progress, ctxIdle) : 0;
+    const total = suite.missions.length;
+    useEffect(() => {
+        if (!live || !state) {
+            publishGuideEntry(null, null);
+            return;
+        }
+        publishGuideEntry({ done, total }, () => dispatchRef.current({ type: "openPanel" }));
+    }, [live, state, done, total]);
+    useEffect(() => () => publishGuideEntry(null, null), []);
+    if (!live || !state || !layer || !ctxIdle)
+        return null;
+    /* ---------------- render ---------------- */
+    const views = missionViews(suite, state.progress, ctxIdle);
+    const gate = suite.gate;
+    const gateHref = gate ? resolveText(gate.action.href, ctxIdle) : "";
+    const gateFailing = gate ? gateState(suite, ctxIdle) === false : false;
+    let content = null;
+    if (screen.name === "welcome") {
+        content = (jsx(WelcomeModal, { title: resolveText(suite.welcome.title, ctxIdle), subtitle: resolveText(suite.welcome.subtitle, ctxIdle) || `มาตั้งค่าบริษัทให้พร้อมใน ${total} ภารกิจ`, missions: suite.missions.map(m => ({ title: m.title, minutes: m.minutes })), confirm: screen.confirm, onStart: () => dispatch({ type: "welcomeStart" }), onSkip: () => dispatch({ type: "welcomeSkip" }), onSkipConfirm: () => dispatch({ type: "welcomeSkipConfirm" }), onSkipCancel: () => dispatch({ type: "welcomeSkipCancel" }) }));
+    }
+    else if (screen.name === "gate" && gate) {
+        content = (jsx(GateModal, { title: gate.title, subtitle: gate.subtitle, actionLabel: gate.action.label, href: gateHref, onLater: () => dispatch({ type: "gateLater" }) }));
+    }
+    else if (screen.name === "step" && stepInfo && stepCtx) {
+        const { mission, step, missionNo } = stepInfo;
+        const kind = stepKind(step);
+        const bridge = screen.bridge;
+        content = (jsx(StepLayer, { spot: layout.spot, holes: layout.holes, popovers: layout.popovers, covered: layout.covered, viewport: { width: layout.vw || window.innerWidth, height: layout.vh || window.innerHeight, offsetTop: layout.oy }, phone: phone, showHand: bridge || (kind !== "input" && kind !== "view"), bubble: {
+                missionNo,
+                missionTitle: mission.title,
+                replay: screen.replay,
+                index: screen.index,
+                total: mission.steps.length,
+                title: bridge ? "กดปุ่มเมนู" : resolveText(step.title, stepCtx),
+                why: bridge ? `เมนูทั้งหมดของ ${suite.appName} อยู่ในนี้` : resolveText(step.why, stepCtx),
+                error: screen.error,
+                showNext: !bridge && (kind === "input" || kind === "view"),
+                showEndWithoutSave: !bridge && screen.replay && kind === "commit",
+            }, hasTarget: bridge || !!step.target, phase: screen.phase, confirmExit: screen.confirmExit, nudge: state.nudge, moving: moving, onExit: () => dispatch({ type: "exit" }), onNext: () => dispatch({ type: "next" }), onEndWithoutSave: () => dispatch({ type: "endWithoutSave" }), onRetry: () => dispatch({ type: "retry" }), onGoResume: () => dispatch({ type: "goResume" }), onExitConfirm: () => dispatch({ type: "exitConfirm" }), onExitCancel: () => dispatch({ type: "exitCancel" }) }));
+    }
+    else if (screen.name === "celebrate" && celebrateShown) {
+        const mission = findMission(suite, screen.mission);
+        const next = findMission(suite, nextMissionKey(suite, state.progress, ctxIdle));
+        if (mission) {
+            content = (jsx(CelebrateModal, { missionNo: suite.missions.indexOf(mission) + 1, title: resolveText(mission.done?.title, ctxIdle) || `${mission.title}แล้ว`, subtitle: resolveText(mission.done?.subtitle, ctxIdle), done: done, total: total, nextTitle: next?.title ?? null, reduced: reduced, onNext: () => dispatch({ type: "celebrateNext" }), onRest: () => dispatch({ type: "rest" }) }));
+        }
+    }
+    else if (screen.name === "complete" && celebrateShown) {
+        const secondary = suite.complete.secondary;
+        let secondaryHref;
+        try {
+            secondaryHref = secondary ? (typeof secondary.href === "function" ? secondary.href(ctxIdle) : secondary.href) : undefined;
+        }
+        catch {
+            secondaryHref = undefined;
+        }
+        content = (jsx(CompleteModal, { total: total, title: resolveText(suite.complete.title, ctxIdle) || "บริษัทพร้อมใช้งานแล้ว", subtitle: resolveText(suite.complete.subtitle, ctxIdle), missions: suite.missions.map(m => m.title), actionLabel: suite.complete.action.label, secondary: secondary && secondaryHref ? { label: secondary.label, href: secondaryHref } : null, reduced: reduced, onFinish: () => dispatch({ type: "finish" }) }));
+    }
+    const items = views.map(v => ({
+        key: v.mission.key,
+        title: v.mission.title,
+        minutes: v.mission.minutes,
+        view: v.view,
+        optional: !!v.mission.optional,
+        completedAt: v.entry?.completed_at ?? null,
+        lockedBy: v.view === "locked"
+            ? (v.mission.after ?? [])
+                .map(k => findMission(suite, k)?.title)
+                .filter(Boolean)
+                .join(", ")
+            : undefined,
+    }));
+    const showChip = chipVisible(state, suite, ctxIdle);
+    return createPortal(jsxs(Fragment$1, { children: [jsx("style", { children: GUIDE_CSS }), jsx("div", { className: "eg-sr", "aria-live": "polite", role: "status", children: liveText }), content, showChip ? jsx(QuestChip, { done: done, total: total, pulse: state.chipPulse, onOpen: () => dispatch({ type: "openPanel" }) }) : null, state.panelOpen && screen.name === "idle" ? (jsx(QuestPanel, { items: items, done: done, total: total, justDone: state.justDone, gate: gate && gateFailing ? { label: gate.action.label, pending: gate.pending, href: gateHref } : null, canHideChip: !state.progress.chip_hidden && state.progress.status !== "completed", onClose: () => dispatch({ type: "closePanel" }), onStart: (key, replayIt) => dispatch({ type: "start", mission: key, replay: replayIt }), onDismiss: key => dispatch({ type: "dismissMission", mission: key }), onHideChip: () => dispatch({ type: "hideChip" }) })) : null, toast ? jsx(GuideToast, { text: toast }) : null] }), layer);
+}
+/** A stable key for the facts object, so effects re-run when they change. */
+function useFactsKey(facts) {
+    return useMemo(() => {
+        try {
+            return JSON.stringify(facts ?? {});
+        }
+        catch {
+            return String(Math.random());
+        }
+    }, [facts]);
+}
+
+/**
+ * Top-level app chrome: sticky header, sidebar slot, content gutter and the
+ * session/org-context plumbing that both Accounting and HR need. Apps wrap
+ * it inside their `SidebarProvider` (server-rendered with the cookie-backed
+ * `defaultOpen`) and their `ERPProvider`, then pass app-specific bits as
+ * props.
+ *
+ * The padding contract is deliberately owned here so future style tweaks
+ * (e.g. the recent left/right/bottom gutter pass) propagate to both apps via
+ * an erp-shell bump — domain components must NOT add their own root padding
+ * or content gets indented twice.
+ */
+function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permissionProvider, organizationId, setOrganizationId, organizations, organizationsStatus, notMemberComponent, signInUrl, selectOrganizationUrl, chrome = "brand", workspaceHeader = "brand", headerEnd, mobileBrand, showHelp = true, helpApp, guides, }) {
+    const { data: session, status } = useSession();
+    const { open, setOpen } = useSidebar();
+    const router = useRouter();
+    const params = useParams();
+    const code = params?.code;
+    const extendedSession = session;
+    // Track once-authenticated so a transient accessToken drop during the
+    // periodic session refresh (SessionRefreshTrigger every 4 min) doesn't
+    // blank the whole page. The initial-load gate below still handles cold
+    // start; once we've seen a real token we render children optimistically
+    // and let the API layer surface a real 401 if the token actually died.
+    const hasSeenAccessTokenRef = useRef(false);
+    useEffect(() => {
+        if (extendedSession?.accessToken)
+            hasSeenAccessTokenRef.current = true;
+    }, [extendedSession?.accessToken]);
+    // The URL's `[code]` is authoritative: the page mounts only once the active
+    // organisation is the one it names (see url-org-gate.ts).
+    //
+    // The gate used to start only when the code had resolved AND an active id
+    // existed, which left two holes. While the organisation list loaded, the
+    // page mounted at once and its first requests carried the previous
+    // organisation — /O26000021/procurement/purchase-requisition/<id> fetched
+    // the document from O26000019 before the switch. And a code naming none of
+    // the user's organisations never resolved, so the page rendered the
+    // previous organisation's data under it.
+    const urlOrgGate = resolveUrlOrgGate({
+        code,
+        organizations,
+        organizationsStatus,
+        organizationId,
+    });
+    const switchTargetId = urlOrgGate.state === "switching" ? urlOrgGate.targetId : null;
+    // Switch the active organisation to the URL's. Once per target: the setter
+    // writes the cookie through a server action, and re-firing it on every
+    // render while that round trip is in flight only queues duplicates.
+    const requestedSwitchRef = useRef(null);
+    useEffect(() => {
+        if (!switchTargetId) {
+            requestedSwitchRef.current = null;
+            return;
+        }
+        if (requestedSwitchRef.current === switchTargetId)
+            return;
+        requestedSwitchRef.current = switchTargetId;
+        void setOrganizationId(switchTargetId);
+    }, [switchTargetId, setOrganizationId]);
+    // Once the user's organisations are known, requests prefer a stored
+    // organisation that is one of them (getRequestOrganizationId).
+    const organizationsLoaded = (organizationsStatus ??
+        (organizations.length > 0 ? "success" : undefined)) === "success";
+    useEffect(() => {
+        if (organizationsLoaded) {
+            setKnownOrganizationIds(organizations.map(org => org.id));
+        }
+    }, [organizationsLoaded, organizations]);
+    // An active organisation that is not one of the user's — deleted, or left —
+    // is replaced, so it stops being sent with every request. The URL's
+    // organisation, when the user is a member, is the gate's switch above;
+    // otherwise the user's only organisation, or none (they pick one: the
+    // refusal below offers it, and a path without a code goes to the picker).
+    // Once per stale id and target, so a setter that does not take cannot loop.
+    const staleRecovery = resolveStaleOrganization({
+        code,
+        organizations,
+        organizationsStatus,
+        organizationId,
     });
     const staleRecoveryTarget = staleRecovery.action === "forget"
         ? null
@@ -3697,11 +6936,11 @@ function AppLayoutShell({ children, sidebar, loadingComponent, breadcrumb, permi
                                         // As in the design: the mark, then a menu button, and the
                                         // organisation on the right — no trail, no title, so the
                                         // organisation's name has the room it needs on a phone.
-                                        jsxs(Fragment$1, { children: [mobileBrand ? (jsx("div", { className: "shrink-0", children: mobileBrand })) : null, jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted)] transition-colors hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted)]", children: jsx(LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: "hidden min-w-0 sm:block", children: trail }), jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] })] })) : (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsx(HeaderBackground, {}), jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsx("div", { className: "flex-1 min-w-0", children: trail }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] }), jsx("div", { id: "header-title" })] })] })), jsx(Suspense, { fallback: jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "space-y-4 text-center", children: [jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsx("div", { className: workspace
+                                        jsxs(Fragment$1, { children: [mobileBrand ? (jsx("div", { className: "shrink-0", children: mobileBrand })) : null, jsx("button", { type: "button", onClick: () => setOpen(!open), "aria-label": open ? "ปิดเมนู" : "เปิดเมนู", ...guideAnchor("shell.menu-toggle"), className: "grid size-[34px] shrink-0 place-items-center rounded-lg text-[var(--header-fg-muted)] transition-colors hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--header-fg-muted)]", children: jsx(LayoutGrid, { className: "size-5", strokeWidth: 1.65 }) })] })) : (jsx(SidebarTrigger, { className: "shrink-0 text-[var(--header-fg-muted)] hover:bg-[var(--header-hover)] hover:text-[var(--header-fg)] [&_svg]:!text-current" })), jsxs("div", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [jsx("div", { className: "hidden min-w-0 sm:block", children: trail }), jsx("div", { id: "header-title", className: "min-w-0 max-sm:hidden" })] }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3 sm:gap-5", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] })] })) : (jsxs("div", { className: "sticky top-0 z-30 shrink-0 w-full", children: [jsx(HeaderBackground, {}), jsxs("header", { className: "relative shrink-0 gap-2 py-4 h-auto min-h-[123.5px] w-full z-10", children: [jsxs("div", { className: "flex w-full items-center gap-2 px-3 sm:px-4 lg:px-6", children: [jsx(SidebarTrigger, { className: "shrink-0 text-white hover:bg-white/10" }), jsx("div", { className: "flex-1 min-w-0", children: trail }), headerEnd || showHelp ? (jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [headerEnd, showHelp ? jsx(HelpButton, {}) : null] })) : null] }), jsx("div", { id: "header-title" })] })] })), jsx(Suspense, { fallback: jsx("div", { className: "relative z-10 min-h-[calc(100vh-8rem)]", children: jsx("div", { className: "flex h-full items-center justify-center", children: jsxs("div", { className: "space-y-4 text-center", children: [jsx("div", { className: "mx-auto h-8 w-8 animate-spin rounded-full border-b-2 border-primary" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E01\u0E33\u0E25\u0E31\u0E07\u0E42\u0E2B\u0E25\u0E14..." })] }) }) }), children: jsx("div", { className: workspace
                                     ? "relative z-10 px-[18px] pt-[26px] pb-4 sm:px-6 lg:px-10 lg:pt-[38px]"
                                     : cx("relative z-10 pr-6", needsLeftGutter && "pl-6"), children: refusePage
                                     ? (notMemberComponent ?? (jsx(AccessDenied, { title: "\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E40\u0E02\u0E49\u0E32\u0E16\u0E36\u0E07\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E19\u0E35\u0E49", message: `บัญชีนี้ไม่ได้เป็นสมาชิกขององค์กร ${code}`, homeHref: selectOrganizationUrl, homeLabel: "\u0E40\u0E25\u0E37\u0E2D\u0E01\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })))
-                                    : wrap(children) }, `org-${contentOrgKey}`) })] }) }), showHelp ? jsx(HelpDialogHost, { app: helpApp, orgCode: code }) : null] }));
+                                    : wrap(children) }, `org-${contentOrgKey}`) })] }) }), showHelp ? jsx(HelpDialogHost, { app: helpApp, orgCode: code }) : null, guides && !refusePage && urlOrgGate.state === "ready" && organizationId != null && String(organizationId).trim() !== "" ? (jsx(GuideHost, { config: guides, organizationId: String(organizationId), code: code }, `guide-${String(organizationId)}`)) : null] }));
 }
 /** Local tiny classnames helper — avoids pulling clsx/tailwind-merge into
  *  the shell just for the layout file. Falsy values are skipped. */
@@ -3740,39 +6979,6 @@ function SidebarHelpLink({ label, href, icon, className }) {
     return external ? (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", className: cls, children: body })) : (jsx(Link, { href: href, className: cls, children: body }));
 }
 
-const EMPLOYEE_RECORD_REQUIRED = "EMPLOYEE_RECORD_REQUIRED";
-const EMPLOYEE_RECORD_REQUIRED_EVENT = "erp:employee-record-required";
-const EMPLOYEE_RECORD_OK_EVENT = "erp:employee-record-ok";
-/**
- * Shown when the API refuses every request because the signed-in account has
- * no employee record in this organisation.
- *
- * A gate rather than a banner. Leave, attendance, approvals and payslips all
- * identify a person by that record, so once the server started enforcing it
- * every call fails — and without something that says so, the app becomes a
- * screen of error toasts with no explanation and no way forward.
- */
-function EmployeeRequiredGate({ platformBaseUrl, }) {
-    const [blocked, setBlocked] = useState(false);
-    const params = useParams();
-    const code = params?.code ?? "";
-    useEffect(() => {
-        const onBlocked = () => setBlocked(true);
-        const onOk = () => setBlocked(false);
-        window.addEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
-        window.addEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
-        return () => {
-            window.removeEventListener(EMPLOYEE_RECORD_REQUIRED_EVENT, onBlocked);
-            window.removeEventListener(EMPLOYEE_RECORD_OK_EVENT, onOk);
-        };
-    }, []);
-    if (!blocked)
-        return null;
-    const base = platformBaseUrl?.replace(/\/$/, "") ?? "";
-    const createHref = code ? `${base}/${code}/employee/create` : `${base}/`;
-    return (jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-background/95 p-6 backdrop-blur-sm", children: jsxs("div", { className: "w-full max-w-md space-y-5 text-center", children: [jsx(ContactRound, { className: "mx-auto h-12 w-12 text-muted-foreground" }), jsxs("div", { className: "space-y-2", children: [jsx("h1", { className: "text-lg font-semibold tracking-tight", children: "\u0E1A\u0E31\u0E0D\u0E0A\u0E35\u0E19\u0E35\u0E49\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E1C\u0E39\u0E01\u0E01\u0E31\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19" }), jsx("p", { className: "text-sm text-muted-foreground", children: "\u0E25\u0E32 \u0E25\u0E07\u0E40\u0E27\u0E25\u0E32 \u0E40\u0E1A\u0E34\u0E01\u0E40\u0E07\u0E34\u0E19 \u0E41\u0E25\u0E30\u0E01\u0E32\u0E23\u0E2D\u0E19\u0E38\u0E21\u0E31\u0E15\u0E34 \u0E23\u0E30\u0E1A\u0E38\u0E15\u0E31\u0E27\u0E04\u0E19\u0E08\u0E32\u0E01\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19 \u0E08\u0E36\u0E07\u0E22\u0E31\u0E07\u0E43\u0E0A\u0E49\u0E07\u0E32\u0E19\u0E43\u0E19\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23\u0E19\u0E35\u0E49\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49" })] }), jsxs("div", { className: "flex flex-wrap justify-center gap-2", children: [jsx(Button, { onClick: () => window.location.reload(), children: "\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48" }), jsx(Button, { variant: "outline", asChild: true, children: jsxs("a", { href: createHref, children: [jsx(UserPlus, { className: "mr-1 h-4 w-4" }), "\u0E2A\u0E23\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E1E\u0E19\u0E31\u0E01\u0E07\u0E32\u0E19"] }) })] }), jsx("p", { className: "text-xs text-muted-foreground", children: "\u0E16\u0E49\u0E32\u0E04\u0E38\u0E13\u0E44\u0E21\u0E48\u0E21\u0E35\u0E2A\u0E34\u0E17\u0E18\u0E34\u0E4C\u0E41\u0E01\u0E49\u0E44\u0E02 \u0E43\u0E2B\u0E49\u0E41\u0E08\u0E49\u0E07\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E2D\u0E07\u0E04\u0E4C\u0E01\u0E23" })] }) }));
-}
-
 const shellClassName = "flex min-w-0 flex-1 flex-col gap-6 overflow-x-hidden";
 /**
  * Shared layout for “กำลังตรวจสอบสิทธิ์” (skeleton) and “ไม่มีสิทธิ์” (message).
@@ -4299,5 +7505,5 @@ const getAxiosErrorMessage = (error) => {
     return String(error);
 };
 
-export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FOR_ORGANIZATION_FIELD, FeatureFlagsProvider, HeaderBackground, HelpButton, HelpDialogHost, NavMain, NavTools, NavUser, OWNER_CHIP, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SHELL_VERSION, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarHelpCard, SidebarHelpLink, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, WITHOUT_ORGANIZATION_FLAG, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, WorkspaceBrand, accountSettingsHref, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, clearStoredOrganization, closeHelp, decodeJWT, describeAttached, describeBrowser, detectHelpApp, filterNavigationModulesByPermission, filterNavigationToolsByPermission, findOrganizationForCode, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequestOrganizationId, getRequiredChildGroups, getStoredOrganizationIds, getTabOrganizationId, hasPlanFeature, isKnownStaleOrganizationId, isLikelyTransientNetworkError, isPathActive, myRolesQueryKey, normalizePathnameForPermissionRules, openHelp, organizationScopedQueryHash, parseMyRoles, platformBaseUrl, resolveActiveNav, resolveSidebarNav, resolveStaleOrganization, resolveUiRoutePermission, resolveUrlOrgGate, retryWithStoredOrganizations, roleSummary, runGlobalRequestPrecheck, runWithTransientRetry, setKnownOrganizationIds, setOrganizationId, setTabOrganizationId, shouldRetryQuery, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useMyRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle, withoutOrganization };
+export { AccessDenied, ApiError, AppBreadcrumb, AppLayoutShell, AppSidebar, EMPLOYEE_RECORD_OK_EVENT, EMPLOYEE_RECORD_REQUIRED, EMPLOYEE_RECORD_REQUIRED_EVENT, EmployeeRequiredGate, FOR_ORGANIZATION_FIELD, FeatureFlagsProvider, API_EVENT as GUIDE_API_EVENT, GUIDE_EVENT_PREFIX, GUIDE_LAYER_ATTRIBUTE, GuideHost, HeaderBackground, HelpButton, HelpDialogHost, NavMain, NavTools, NavUser, OWNER_CHIP, OrganizationSwitcher, PLAN_FEATURES, PermissionGateShell, PermissionProvider, PermissionRulesProvider, ReactQueryProvider, SHELL_VERSION, SessionBackedProfileCacheSeeder, SessionRefreshTrigger, SidebarContent, SidebarFooter, SidebarHeader, SidebarHelpCard, SidebarHelpLink, SidebarProvider, SidebarTrigger, TapMenu, ThemeProvider, WITHOUT_ORGANIZATION_FLAG, WORKSPACE_HEADER_VARS, WORKSPACE_LIGHT_HEADER_VARS, WorkspaceBrand, accountSettingsHref, instance as axiosInstance, buildSystemLinks, buildUrlWithCode, canAccessNavPermissionRoute, clearAccessTokenCache, clearOrganizationId, clearStoredOrganization, closeHelp, decodeJWT, describeAttached, describeBrowser, detectHelpApp, emitGuideEvent, filterNavigationModulesByPermission, filterNavigationToolsByPermission, findOrganizationForCode, getAccessToken, getActiveModule, getActiveSubModule, getAxiosErrorMessage, getOrganizationId, getQueryClientConfig, getRequestOrganizationId, getRequiredChildGroups, getStoredOrganizationIds, getTabOrganizationId, guideAnchor, hasPlanFeature, isKnownStaleOrganizationId, isLikelyTransientNetworkError, isPathActive, myRolesQueryKey, normalizePathnameForPermissionRules, openGuidePanel, openHelp, organizationScopedQueryHash, parseMyRoles, platformBaseUrl, reportApiEvent, resolveActiveNav, resolveSidebarNav, resolveStaleOrganization, resolveUiRoutePermission, resolveUrlOrgGate, retryWithStoredOrganizations, roleSummary, runGlobalRequestPrecheck, runWithTransientRetry, setKnownOrganizationIds, setOrganizationId, setTabOrganizationId, shouldRetryQuery, toApiError, unwrapApiResponse, updateOrganizationId, useClearOrgOnUserChange, useFeatureFlag, useFeatureFlags, useGuideEntry, useInvalidateQueriesOnOrgChange, useKeycloakRoles, useMyRoles, useOrganizationIdState, usePermissionRules, useSessionRefresh, useSidebar, useSidebarToggle, withoutOrganization };
 //# sourceMappingURL=index.esm.js.map