@eintrek/erp-shell 0.1.64 → 0.1.66

package/dist/index.js

@@ -1975,7 +1975,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.66";
 
 const HELP_APP_LABEL = {
     platform: "แพลตฟอร์ม",
@@ -3911,6 +3911,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 {};
@@ -4075,7 +4121,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;
         }
@@ -4101,7 +4149,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",
@@ -4147,6 +4196,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;
@@ -4284,6 +4362,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;
@@ -4364,7 +4453,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 });
                 }
@@ -4381,6 +4471,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;
@@ -4435,7 +4530,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;
         }
@@ -4480,6 +4576,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.
@@ -4497,9 +4597,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);
@@ -4526,12 +4633,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 };
@@ -4540,6 +4654,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 });
             }
@@ -4560,8 +4675,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")
@@ -4569,10 +4685,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;
@@ -5182,14 +5295,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();
@@ -5465,10 +5621,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__namespace.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 (jsxRuntime.jsxs("svg", { className: "eg-scrim-svg", width: width, height: height, "aria-hidden": "true", children: [holes.length ? (jsxRuntime.jsx("defs", { children: jsxRuntime.jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: -10, y: -10, width: width + 20, height: height + 20, children: [jsxRuntime.jsx("rect", { x: -10, y: -10, width: width + 20, height: height + 20, fill: "#fff" }), holes.map((h, i) => (jsxRuntime.jsx("path", { d: roundRect(h, 12), fill: "#000" }, i)))] }) })) : null, jsxRuntime.jsx("rect", { className: "eg-scrim-fill", x: -10, y: -10, width: width + 20, height: height + 20, mask: holes.length ? `url(#${maskId})` : undefined }), jsxRuntime.jsx("path", { className: "eg-scrim-hit", d: block, "data-eg-block": "" })] }));
 }
 /** Whether two rectangles overlap. */
@@ -5634,6 +5792,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;
@@ -5647,7 +5806,7 @@ function StepLayer(p) {
         else
             arrowStyle = { bottom: -7, left: pos.ax };
     }
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Scrim, { holes: p.phase === "ready" ? holes : [], width: viewport.width, height: Math.max(viewport.height + viewport.offsetTop, 0) }), spot && ringShown ? (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxRuntime.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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.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 ? (jsxRuntime.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 ? (jsxRuntime.jsx("div", { className: "eg-hand" + (hand.flip ? " eg-flip" : ""), style: { left: hand.left, top: hand.top }, "aria-hidden": "true", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: HAND_PATH }) }) })) : null, showBubble ? (jsxRuntime.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,
@@ -5929,6 +6088,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;
@@ -6087,13 +6285,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 {
@@ -6436,7 +6630,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)
@@ -6535,7 +6732,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())
@@ -6613,16 +6810,32 @@ function GuideHostInner({ config, organizationId, code }) {
         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");
+        // A Radix modal (dialog, select, menu) hides everything outside it from
+        // screen readers with aria-hidden's hideOthers. It keeps [aria-live]
+        // elements but walks into their ancestors and hides the other children:
+        // with the status line live, the bubble and its buttons were hidden.
+        // Take off what it adds, at once. 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. (aria-live="off" on the layer would make hideOthers skip it, but
+        // it changed what test tools match by text.)
+        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();
@@ -6700,7 +6913,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);