@eintrek/erp-shell 0.1.64 → 0.1.65

package/dist/guide/dom.d.ts

@@ -86,7 +86,21 @@ export declare function revealPlan(rect: Rect, visible: Rect | null, viewportHei
     block: "center" | "nearest";
     inline: "nearest";
 } | null;
-/** Scrolls the target into view (instant under reduced motion). */
+/** Room left beside a target scrolled into a sideways scroll box. */
+export declare const SIDEWAYS_MARGIN = 12;
+/**
+ * How far to scroll a sideways scroll box so the target sits inside its
+ * visible part (`box`: the box cut by the viewport) with `margin` to spare on
+ * both sides; 0 when it already does. Clamped to what the box can scroll.
+ * A target wider than the room is aligned to its start.
+ */
+export declare function sidewaysDelta(target: Rect, box: Rect, scrollLeft: number, maxScrollLeft: number, margin?: number): number;
+/**
+ * Scrolls the target into view (instant under reduced motion). In a box that
+ * scrolls sideways (a row of tabs on a phone) the box is scrolled first,
+ * leaving SIDEWAYS_MARGIN beside the target so its whole label shows; then
+ * the page, up or down only.
+ */
 export declare function revealTarget(el: Element): void;
 /**
  * The scrim's blocking area: the screen (with a 10 px margin) minus the union

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

@@ -22,9 +22,12 @@ export declare const IconTrophy: () => import("react/jsx-runtime").JSX.Element;
  *   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.
+ * - `open`: the holes a press may go through, when not all of them (a "view"
+ *   step's target is shown but not pressable). Default: every hole.
  */
-export declare function Scrim({ holes, width, height }: {
+export declare function Scrim({ holes, open, width, height }: {
     holes: Rect[];
+    open?: Rect[];
     width: number;
     height: number;
 }): import("react/jsx-runtime").JSX.Element;
@@ -72,6 +75,11 @@ export interface StepLayerProps {
     covered?: boolean;
     /** False for a "view" step with nothing to point at: the bubble is centred. */
     hasTarget: boolean;
+    /**
+     * Presses on the target reach the page. False on a "view" step: the target
+     * is shown, read-only; ถัดไป is the way on. Default true.
+     */
+    targetPressable?: boolean;
     viewport: {
         width: number;
         height: number;

package/dist/guide/machine.d.ts

@@ -6,7 +6,7 @@
  *
  * No React, no DOM: the tests run it in Node (through the test loader).
  */
-import type { GuideContext, GuideMission, GuideStep, GuideSuite, GuideText, GuideTrigger } from "./types";
+import type { GuideAbortAction, GuideContext, GuideMission, GuideStep, GuideSuite, GuideText, GuideTrigger } from "./types";
 import { type RouteParams } from "./patterns";
 import type { GuideAudience, GuideProgress, MissionEntry } from "./progress";
 export type StepPhase = 
@@ -180,9 +180,13 @@ export type GuideEffect = {
     type: "navigate";
     href: string;
 }
-/** Close the app dialog the replay was in (Escape to Radix). */
+/**
+ * Put the page back after a replay ended early: press the form's ยกเลิก,
+ * emit an app event, Escape to the open dialog (GuideAbortAction).
+ */
  | {
-    type: "closeAppDialog";
+    type: "abort";
+    actions: GuideAbortAction[];
 };
 export interface GuideResult {
     state: GuideState;
@@ -216,6 +220,14 @@ export declare function spotlightTarget(step: GuideStep, ctx: GuideContext, brid
     anchor: string;
     id?: string;
 } | null;
+/**
+ * The page a step happens on: its own `route`, or else where the steps before
+ * it left the user (an earlier step's route trigger or route). Undefined when
+ * nothing says (a mission's first steps, which work from any page).
+ */
+export declare function stepHomeRoute(steps: GuideStep[], index: number): string | undefined;
+/** What puts the page back when a replay ends at this step (see GuideStep.abort). */
+export declare function abortActionsFor(mission: GuideMission, index: number): GuideAbortAction[];
 /** Status of each mission as the panel shows it. */
 export type MissionView = "todo" | "next" | "active" | "skipped" | "done" | "already" | "locked" | "waiting";
 export declare function missionSettled(m: GuideMission, entry: MissionEntry | undefined, ctx: GuideContext): boolean;

package/dist/guide/types.d.ts

@@ -168,8 +168,18 @@ export interface GuideStep {
     onMissing?: GuideOnMissing;
     /** How long to wait for the target, while nothing is loading. 8000 ms. */
     timeoutMs?: number;
-    /** More anchors the user may use during this step. */
+    /**
+     * More anchors the user may use during this step. A "view" step's own
+     * target is read-only (presses on it are blocked, like the rest of the
+     * page; ถัดไป is the only way on) unless it is listed here too.
+     */
     allow?: GuideAnchorKey[];
+    /**
+     * How to put the page back when a replay ends at this step without saving
+     * (จบโดยไม่บันทึก, จบการทบทวน): press the form's ยกเลิก, emit an app event,
+     * or Escape to the open dialog. Overrides the mission's `abort`.
+     */
+    abort?: GuideAbortAction | GuideAbortAction[];
     /**
      * "commit" steps: what a refused save means. Return the key of the step to
      * go back to (a field) and/or the line to show. Default: stay, show the
@@ -180,6 +190,24 @@ export interface GuideStep {
         message?: string;
     } | void;
 }
+/**
+ * One thing the engine does to put the page back when a replay ends early.
+ * Run in order, after the tour has let go of the page; an anchor that is not
+ * on the page is passed over.
+ */
+export type GuideAbortAction = 
+/** Press this anchor (the form's ยกเลิก, a dialog's close). */
+{
+    click: GuideAnchorKey;
+}
+/** `emitGuideEvent(name)`: the page cancels its own editing. */
+ | {
+    event: string;
+}
+/** Escape to the open dialog (Radix closes on it). */
+ | {
+    escape: true;
+};
 /** What `capture` sees: the trigger that advanced the step. */
 export interface GuideCaptureEvent {
     route?: {
@@ -219,6 +247,12 @@ export interface GuideMission {
         title?: GuideText;
         subtitle?: GuideText;
     };
+    /**
+     * How to put the page back when a replay of this mission ends without
+     * saving (a step's own `abort` wins). Default: Escape, and only from a step
+     * that is not a checkpoint (inside the dialog or form the tour opened).
+     */
+    abort?: GuideAbortAction | GuideAbortAction[];
     steps: GuideStep[];
 }
 /** Shown in place of the welcome while the org is not ready for the tour. */

package/dist/index.d.ts

@@ -33,7 +33,7 @@ export { HelpDialogHost, type HelpDialogHostProps } from "./help/help-dialog";
 export { openHelp, closeHelp, type HelpAppId } from "./help/help-store";
 export { describeBrowser, describeAttached, detectHelpApp, type HelpContext, } from "./help/help-context";
 export { SHELL_VERSION } from "./version";
-export type { GuideAnchorKey, GuideApiFailure, GuideApiMatch, GuideAppId, GuideCaptureEvent, GuideConfig, GuideContext, GuideFacts, GuideGate, GuideMission, GuideOnMissing, GuideStep, GuideStepKind, GuideSuite, GuideText, GuideTrigger, } from "./guide/types";
+export type { GuideAbortAction, GuideAnchorKey, GuideApiFailure, GuideApiMatch, GuideAppId, GuideCaptureEvent, GuideConfig, GuideContext, GuideFacts, GuideGate, GuideMission, GuideOnMissing, GuideStep, GuideStepKind, GuideSuite, GuideText, GuideTrigger, } from "./guide/types";
 export { API_EVENT as GUIDE_API_EVENT, GUIDE_EVENT_PREFIX, GUIDE_LAYER_ATTRIBUTE, emitGuideEvent, guideAnchor, reportApiEvent, type ApiEventDetail, type GuideAnchorProps, } from "./guide/events";
 export { openGuidePanel, useGuideEntry, type GuideEntry } from "./guide/guide-store";
 export { GuideHost, type GuideHostProps } from "./guide/guide-host";

package/dist/index.esm.js

@@ -1956,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.64";
+const SHELL_VERSION = "0.1.65";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -3892,6 +3892,52 @@ function needsBridge(step, env, ctx) {
         !env.sidebarOpen &&
         !env.isVisible(step.target, targetIdOf(step, ctx)));
 }
+/**
+ * The page a step happens on: its own `route`, or else where the steps before
+ * it left the user (an earlier step's route trigger or route). Undefined when
+ * nothing says (a mission's first steps, which work from any page).
+ */
+function stepHomeRoute(steps, index) {
+    for (let j = Math.min(index, steps.length - 1); j >= 0; j--) {
+        const s = steps[j];
+        if (j < index) {
+            // What this earlier step moved the user to comes after where it happened.
+            const t = triggersOf(s).find((x) => "route" in x);
+            if (t)
+                return t.route;
+        }
+        if (s.route)
+            return s.route;
+    }
+    return undefined;
+}
+/**
+ * The page a step is shown on, or the "ทำต่อ" card when the user is elsewhere:
+ * its route; for a checkpoint without one, the page the steps before it lead
+ * to (so going back to it from another page cannot loop).
+ */
+function placeRoute(steps, index) {
+    const step = steps[index];
+    if (step.route)
+        return step.route;
+    return step.checkpoint ? stepHomeRoute(steps, index) : undefined;
+}
+/** The user is not on the page the step happens on. */
+function offRoute(steps, index, env) {
+    const home = stepHomeRoute(steps, index);
+    return !!home && !matchRoute(home, env.pathname, env.search, env.code);
+}
+/** What puts the page back when a replay ends at this step (see GuideStep.abort). */
+function abortActionsFor(mission, index) {
+    const step = mission.steps[index];
+    const own = step?.abort ?? mission.abort;
+    if (own)
+        return Array.isArray(own) ? own : [own];
+    // Default: Escape to the dialog the tour opened; nothing on a stable page.
+    if (!step || index === 0 || step.checkpoint)
+        return [];
+    return [{ escape: true }];
+}
 function routeParamsFor(step, env) {
     if (!step.route)
         return {};
@@ -4056,7 +4102,9 @@ function enterStep(d, suite, env, mission, index, opts) {
         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) });
+            // A replay writes nothing, not even what went wrong.
+            if (!opts.replay)
+                withProgress(d, { last_error: `forbidden:${step.requires}`.slice(0, 128) });
             i++;
             continue;
         }
@@ -4082,7 +4130,8 @@ function enterStep(d, suite, env, mission, index, opts) {
     }
     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 where = placeRoute(steps, i);
+    const away = !!where && !matchRoute(where, env.pathname, env.search, env.code);
     const bridge = !away && needsBridge(step, env, ctx);
     setScreen(d, {
         name: "step",
@@ -4128,6 +4177,35 @@ function markReadyIfVisible(d, suite, env) {
             d.effects.push({ type: "announce", text: s.error.title });
     }
 }
+/** Where to send the user to resume at a step: its resumeUrl, or its page filled in. */
+function resumeHref(mission, index, d, env) {
+    const step = mission.steps[index];
+    const ctx = guideContext(env, d.state.progress.context);
+    const where = placeRoute(mission.steps, index);
+    return (safe(() => step.resumeUrl?.(ctx), undefined) ??
+        (where ? fillRoute(where, { ...d.state.progress.context, code: env.code }) : null));
+}
+/**
+ * The user left the page the step happens on (a link, the browser's back):
+ * back to the last checkpoint. On another page that is the "ทำต่อ" card;
+ * `navigate` (ลองอีกครั้ง) goes there at once.
+ */
+function recoverOffRoute(d, suite, env, navigate) {
+    const s = d.state.screen;
+    if (s.name !== "step")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const cp = checkpointAtOrBefore(mission.steps, s.index);
+    enterStep(d, suite, env, mission, cp, { replay: s.replay });
+    const now = d.state.screen;
+    if (navigate && now.name === "step" && now.phase === "away") {
+        const href = resumeHref(mission, now.index, d, env);
+        if (href)
+            d.effects.push({ type: "navigate", href });
+    }
+}
 function captureInto(d, step, e, ctx) {
     if (!step.capture)
         return;
@@ -4265,6 +4343,17 @@ function apiFailureFor(step, sig) {
         (!t.api.method || t.api.method.toUpperCase() === sig.method.toUpperCase()) &&
         matchApiPath(t.api.path, sig.path));
 }
+/** A replay ends early: what puts the page back (nothing on another page). */
+function pushAbort(d, suite, s) {
+    if (s.phase === "away")
+        return;
+    const mission = findMission(suite, s.mission);
+    if (!mission)
+        return;
+    const actions = abortActionsFor(mission, s.index);
+    if (actions.length)
+        d.effects.push({ type: "abort", actions });
+}
 function reduceGuide(state, action, suite, env) {
     const d = { state, effects: [] };
     const s = state.screen;
@@ -4345,7 +4434,8 @@ function reduceGuide(state, action, suite, env) {
             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)) {
+                const where = placeRoute(mission.steps, s.index);
+                if (!where || matchRoute(where, 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 });
                 }
@@ -4362,6 +4452,11 @@ function reduceGuide(state, action, suite, env) {
                     break;
                 }
             }
+            if (!s.bridge && !stepTargetVisible(step, env, ctx, false) && offRoute(mission.steps, s.index, env)) {
+                // The target is missing because the page is another one.
+                recoverOffRoute(d, suite, env, false);
+                break;
+            }
             if (armed !== s.armed)
                 setScreen(d, { ...s, armed });
             const cur = d.state.screen;
@@ -4416,7 +4511,8 @@ function reduceGuide(state, action, suite, env) {
                     : { 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) });
+                if (!s.replay)
+                    withProgress(d, { last_error: `api_${sig.status}:${step.key}`.slice(0, 128) });
             }
             break;
         }
@@ -4461,6 +4557,10 @@ function reduceGuide(state, action, suite, env) {
             const ctx = guideContext(env, d.state.progress.context, routeParamsFor(step, env));
             if (stepTargetVisible(step, env, ctx, s.bridge))
                 break;
+            if (!s.bridge && offRoute(mission.steps, s.index, env)) {
+                recoverOffRoute(d, suite, env, false);
+                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.
@@ -4478,9 +4578,16 @@ function reduceGuide(state, action, suite, env) {
             if (!mission)
                 break;
             const step = mission.steps[s.index];
+            if (!s.bridge && offRoute(mission.steps, s.index, env)) {
+                recoverOffRoute(d, suite, env, false);
+                break;
+            }
             const anchor = s.bridge ? BRIDGE_TARGET : (step.target ?? step.key);
-            withProgress(d, { last_error: `target_missing:${anchor}`.slice(0, 128) });
-            save(d);
+            // Diagnostic only: kept with the progress, sent with its next save (a
+            // replay keeps nothing). The same error again changes nothing, so it
+            // never sends a PUT on its own.
+            if (!s.replay)
+                withProgress(d, { last_error: `target_missing:${anchor}`.slice(0, 128) });
             const misses = s.misses + 1;
             const policy = step.onMissing ?? "retry";
             const cp = checkpointAtOrBefore(mission.steps, s.index);
@@ -4507,12 +4614,19 @@ function reduceGuide(state, action, suite, env) {
             }
             break;
         }
-        case "retry":
-            if (s.name === "step" && s.phase === "missing") {
-                setScreen(d, { ...s, phase: "waiting" });
-                markReadyIfVisible(d, suite, env);
+        case "retry": {
+            if (s.name !== "step" || s.phase !== "missing")
+                break;
+            const mission = findMission(suite, s.mission);
+            if (mission && !s.bridge && offRoute(mission.steps, s.index, env)) {
+                // Polling again cannot help on another page: go back to the step's.
+                recoverOffRoute(d, suite, env, true);
+                break;
             }
+            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 };
@@ -4521,6 +4635,7 @@ function reduceGuide(state, action, suite, env) {
             if (s.name !== "step")
                 break;
             if (s.replay) {
+                pushAbort(d, suite, s);
                 setScreen(d, { name: "idle" });
                 d.effects.push({ type: "toast", text: COPY.replayEnded });
             }
@@ -4541,8 +4656,9 @@ function reduceGuide(state, action, suite, env) {
         case "endWithoutSave":
             if (s.name !== "step" || !s.replay)
                 break;
+            pushAbort(d, suite, s);
             setScreen(d, { name: "idle" });
-            d.effects.push({ type: "closeAppDialog" }, { type: "toast", text: COPY.replayEnded });
+            d.effects.push({ type: "toast", text: COPY.replayEnded });
             break;
         case "goResume": {
             if (s.name !== "step" || s.phase !== "away")
@@ -4550,10 +4666,7 @@ function reduceGuide(state, action, suite, env) {
             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);
+            const href = resumeHref(mission, s.index, d, env);
             if (href)
                 d.effects.push({ type: "navigate", href });
             break;
@@ -5163,14 +5276,57 @@ function revealPlan(rect, visible, viewportHeight) {
         return null;
     return { block: offVertically ? "center" : "nearest", inline: "nearest" };
 }
-/** Scrolls the target into view (instant under reduced motion). */
+/** Room left beside a target scrolled into a sideways scroll box. */
+const SIDEWAYS_MARGIN = 12;
+/**
+ * How far to scroll a sideways scroll box so the target sits inside its
+ * visible part (`box`: the box cut by the viewport) with `margin` to spare on
+ * both sides; 0 when it already does. Clamped to what the box can scroll.
+ * A target wider than the room is aligned to its start.
+ */
+function sidewaysDelta(target, box, scrollLeft, maxScrollLeft, margin = SIDEWAYS_MARGIN) {
+    const left = box.x + margin;
+    const right = box.x + box.width - margin;
+    let delta = 0;
+    if (target.x < left || target.width > right - left)
+        delta = target.x - left;
+    else if (target.x + target.width > right)
+        delta = target.x + target.width - right;
+    const next = Math.min(Math.max(scrollLeft + delta, 0), Math.max(maxScrollLeft, 0));
+    return next - scrollLeft;
+}
+/** The nearest ancestor that scrolls sideways and has somewhere to scroll. */
+function sidewaysScroller(el) {
+    if (typeof getComputedStyle !== "function")
+        return null;
+    for (let n = el.parentElement; n && n !== document.body && n !== document.documentElement; n = n.parentElement) {
+        if (scrollsX(getComputedStyle(n).overflowX) && n.scrollWidth > n.clientWidth + 1)
+            return n;
+    }
+    return null;
+}
+/**
+ * Scrolls the target into view (instant under reduced motion). In a box that
+ * scrolls sideways (a row of tabs on a phone) the box is scrolled first,
+ * leaving SIDEWAYS_MARGIN beside the target so its whole label shows; then
+ * the page, up or down only.
+ */
 function revealTarget(el) {
+    const behavior = prefersReducedMotion() ? "auto" : "smooth";
+    const scroller = sidewaysScroller(el);
+    if (scroller) {
+        const box = intersectRect(rectOf(scroller), viewportRect()) ?? rectOf(scroller);
+        const dx = sidewaysDelta(rectOf(el), box, scroller.scrollLeft, scroller.scrollWidth - scroller.clientWidth);
+        // Instant: the page's own scroll below must not cancel it.
+        if (Math.abs(dx) >= 1)
+            scroller.scrollLeft += dx;
+    }
     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" });
+        el.scrollIntoView({ ...plan, behavior });
     }
     catch {
         el.scrollIntoView();
@@ -5446,10 +5602,12 @@ const rectPath = (r) => `M${r.x} ${r.y}H${r.x + r.width}V${r.y + r.height}H${r.x
  *   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.
+ * - `open`: the holes a press may go through, when not all of them (a "view"
+ *   step's target is shown but not pressable). Default: every hole.
  */
-function Scrim({ holes, width, height }) {
+function Scrim({ holes, open, width, height }) {
     const maskId = "eg-scrim-mask-" + React.useId().replace(/[^a-zA-Z0-9_-]/g, "");
-    const block = blockedRects(holes, width, height).map(rectPath).join("");
+    const block = blockedRects(open ?? 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. */
@@ -5615,6 +5773,7 @@ function StepLayer(p) {
     const popovers = p.popovers ?? [];
     const covered = !!p.covered;
     const holes = [...(spot && !covered ? [spot] : []), ...popovers, ...p.holes];
+    const openHoles = p.targetPressable === false ? [...popovers, ...p.holes] : 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;
@@ -5628,7 +5787,7 @@ function StepLayer(p) {
         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: {
+    return (jsxs(Fragment$1, { children: [jsx(Scrim, { holes: p.phase === "ready" ? holes : [], open: p.phase === "ready" ? openHoles : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && ringShown ? (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,
@@ -5910,6 +6069,45 @@ function usePrimaryTab(name) {
     return primary;
 }
 /* ------------------------------------------------------------------ */
+/* Putting the page back after a replay                                 */
+/* ------------------------------------------------------------------ */
+const ABORT_DELAY_MS = 60;
+const ABORT_GAP_MS = 150;
+/**
+ * Runs a replay's abort actions in order, once the tour has let go of the
+ * page: press an anchor (passed over when it is not there), emit an app
+ * event, or Escape to the open dialog (Radix listens on the document).
+ */
+function runAbort(actions) {
+    actions.forEach((a, i) => {
+        setTimeout(() => {
+            try {
+                if ("click" in a) {
+                    findAnchor(a.click)?.click();
+                }
+                else if ("event" in a) {
+                    emitGuideEvent(a.event);
+                }
+                else if ("escape" in a) {
+                    const t = document.activeElement ?? document.body;
+                    t.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", code: "Escape", bubbles: true, cancelable: true }));
+                }
+            }
+            catch {
+                /* never breaks the app */
+            }
+        }, ABORT_DELAY_MS + i * ABORT_GAP_MS);
+    });
+}
+/** A step's own target takes presses: not on a "view" step, unless the step allows it. */
+function targetPressable(step, bridge) {
+    if (!step || bridge)
+        return true;
+    if (stepKind(step) !== "view")
+        return true;
+    return !!step.target && (step.allow ?? []).includes(step.target);
+}
+/* ------------------------------------------------------------------ */
 /* Host                                                                 */
 /* ------------------------------------------------------------------ */
 const TARGET_PAD = 6;
@@ -6068,13 +6266,9 @@ function GuideHostInner({ config, organizationId, code }) {
                     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);
+                else if (e.type === "abort") {
+                    // After this render takes the guard away, put the page back.
+                    runAbort(e.actions);
                 }
             }
             catch {
@@ -6417,7 +6611,10 @@ function GuideHostInner({ config, organizationId, code }) {
             if (!(node instanceof Node))
                 return false;
             const el = targetElRef.current;
-            if (el && el.contains(node))
+            // A "view" step's target is there to be read: ถัดไป is the way on.
+            const sc = stateRef.current?.screen;
+            const pressable = targetPressable(stepInfoRef.current?.step, sc?.name === "step" && sc.bridge);
+            if (el && pressable && el.contains(node))
                 return true;
             const elNode = node instanceof Element ? node : node.parentElement;
             if (!elNode)
@@ -6516,7 +6713,7 @@ function GuideHostInner({ config, organizationId, code }) {
                     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 inTargetList = el && targetPressable(step, sc.bridge) ? 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())
@@ -6591,19 +6788,38 @@ function GuideHostInner({ config, organizationId, code }) {
     useEffect(() => {
         const el = document.createElement("div");
         el.setAttribute(GUIDE_LAYER_ATTRIBUTE, "");
+        // A Radix modal (dialog, select, menu) hides everything outside it from
+        // screen readers with aria-hidden's hideOthers. It leaves [aria-live]
+        // elements and their insides alone, but walks into their ancestors and
+        // hides the siblings: with only the status line live, the bubble and its
+        // buttons were hidden. "off" announces nothing; it only makes the whole
+        // layer one of the kept elements.
+        el.setAttribute("aria-live", "off");
         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");
+        // And should anything still hide the layer or a part of it (another
+        // library, a later hideOthers), take it off again. hideOthers marks what
+        // it hides with data-aria-hidden (the layer never sets that, or inert);
+        // aria-hidden goes only where it was just added, so the layer's own
+        // decorative aria-hidden stays.
+        const obs = new MutationObserver(records => {
+            for (const r of records) {
+                const n = r.target;
+                if (!(n instanceof Element))
+                    continue;
+                if (r.attributeName === "inert" && n.hasAttribute("inert"))
+                    n.removeAttribute("inert");
+                else if (r.attributeName === "data-aria-hidden" && n.hasAttribute("data-aria-hidden"))
+                    n.removeAttribute("data-aria-hidden");
+                else if (r.attributeName === "aria-hidden" &&
+                    n.getAttribute("aria-hidden") === "true" &&
+                    (n === el || r.oldValue === null)) {
+                    n.removeAttribute("aria-hidden");
+                }
+            }
         });
-        obs.observe(el, { attributes: true, attributeFilter: ["aria-hidden", "data-aria-hidden", "inert"] });
+        obs.observe(el, { attributes: true, attributeOldValue: true, subtree: true, attributeFilter: ["aria-hidden", "data-aria-hidden", "inert"] });
         return () => {
             obs.disconnect();
             el.remove();
@@ -6681,7 +6897,7 @@ function GuideHostInner({ config, organizationId, code }) {
                 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" }) }));
+            }, hasTarget: bridge || !!step.target, targetPressable: targetPressable(step, bridge), 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);