@eifi1/ui-kit 0.51.6 → 0.52.0

package/dist/tour/tour.js

@@ -1,32 +1,43 @@
 "use client";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
+  Suspense,
   useCallback,
   useContext,
   useEffect,
-  useId,
   useLayoutEffect,
   useMemo,
   useRef,
-  useState,
-  useSyncExternalStore
+  useState
 } from "react";
-import { createPortal } from "react-dom";
-import { cn } from "../lib/cn.js";
 import { useKitLabels } from "../i18n/kit-labels.js";
-import { Button } from "../components/button.js";
-import { useFocusTrap } from "../hooks/use-focus-trap.js";
-import { useDismissLayer } from "../hooks/use-dismiss.js";
-import { sameRect } from "../hooks/use-anchored-rect.js";
-import { dirOf, horizontalStep } from "../lib/direction.js";
-import { isComposing } from "../lib/ime.js";
-import { focusQuietly } from "../lib/quiet-focus.js";
 import { DEFAULT_TOUR_LABELS } from "./tour-labels.js";
 import { completeStored, rememberAccount, rememberMigrate } from "./use-tour-progress.js";
-import { createGateRegistry, devWarnings, TourInternalContext } from "./tour-gates.js";
+import { createGateRegistry, devWarnings, isShown, stepContext, TourInternalContext } from "./tour-gates.js";
 import { liveEngine } from "./tour-engine.js";
-import { DOCK_MAX_WIDTH, dockEdge, dockStyle, readBand, scrollIntoFreeHalf } from "./tour-dock.js";
+import { lazyWithFallback } from "../lib/lazy-with-fallback.js";
+const LazyTourOverlay = lazyWithFallback(
+  () => import("./tour-overlay.js").then((module) => module.TourOverlay),
+  TourOverlayUnavailable
+);
+const TourUnavailableContext = createContext(() => {
+});
+function TourOverlayUnavailable() {
+  const unavailable = useContext(TourUnavailableContext);
+  useLayoutEffect(unavailable, [unavailable]);
+  return null;
+}
+function TourOverlayLoading({ onSkip }) {
+  useEffect(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onSkip();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onSkip]);
+  return null;
+}
 import { useTourGate, useTourGateRelease } from "./tour-gates.js";
 const ENGINE_KEYS = [
   "active",
@@ -137,7 +148,8 @@ function TourProvider({
       const last = Math.max(0, s.length - 1);
       floorRef.current = opts?.at === void 0 ? 0 : resolveAt(s, opts.at);
       const via = opts?.at === void 0 ? "start" : "at";
-      const wanted = Math.min(Math.max(floorRef.current, opts?.startIndex ?? floorRef.current), last);
+      const asked = opts?.startIndex === void 0 ? floorRef.current : Math.floor(opts.startIndex);
+      const wanted = Math.min(Math.max(floorRef.current, asked), last);
       let to = forward(s, wanted, via);
       if (to < 0) to = backward(s, wanted, via);
       if (to < 0) return;
@@ -199,7 +211,14 @@ function TourProvider({
     setActiveId(null);
   }, []);
   const skip = useCallback(() => {
-    optsRef.current.onSkip?.();
+    optsRef.current.onSkip?.("skipped");
+    setSteps(null);
+    setActiveId(null);
+  }, []);
+  const unavailable = useCallback(() => {
+    if (!stepsRef.current) return;
+    stepsRef.current = null;
+    optsRef.current.onSkip?.("unavailable");
     setSteps(null);
     setActiveId(null);
   }, []);
@@ -207,7 +226,7 @@ function TourProvider({
     (i) => {
       const s = stepsRef.current;
       if (!s || s.length === 0) return;
-      const wanted = Math.min(Math.max(floorRef.current, i), s.length - 1);
+      const wanted = Math.min(Math.max(floorRef.current, Math.floor(i)), s.length - 1);
       let to = forward(s, wanted, "goto");
       if (to < 0) to = backward(s, wanted, "goto");
       if (to >= 0) arrive(s, to, "goto");
@@ -263,33 +282,34 @@ function TourProvider({
   });
   return /* @__PURE__ */ jsx(TourInternalContext.Provider, { value: internals, children: /* @__PURE__ */ jsxs(TourContext.Provider, { value, children: [
     children,
-    active && /* @__PURE__ */ jsx(
-      TourOverlay,
-      {
-        steps,
-        index,
-        via: nav.via,
-        floor: nav.floor,
-        position: nav.position,
-        count: nav.count,
-        refusal: refusal?.step === steps[index] ? refusal : null,
-        onGoTo: goToStep,
-        labels: merged,
-        gates,
-        dockOnPhones,
-        onNext: next,
-        onPrev: prev,
-        onSkip: skip
-      }
-    )
+    active ? (
+      // Its own boundary, so the first start's chunk fetch suspends nothing of the
+      // app's; it shows nothing meanwhile, as the overlay itself does until it has
+      // located the step, and hears Escape as it does. A failed fetch ends the run
+      // (`TourOverlayUnavailable`).
+      /* @__PURE__ */ jsx(Suspense, { fallback: /* @__PURE__ */ jsx(TourOverlayLoading, { onSkip: skip }), children: /* @__PURE__ */ jsx(TourUnavailableContext.Provider, { value: unavailable, children: /* @__PURE__ */ jsx(
+        LazyTourOverlay,
+        {
+          steps,
+          index,
+          via: nav.via,
+          floor: nav.floor,
+          position: nav.position,
+          count: nav.count,
+          refusal: refusal?.step === steps[index] ? refusal : null,
+          onGoTo: goToStep,
+          labels: merged,
+          gates,
+          dockOnPhones,
+          onNext: next,
+          onPrev: prev,
+          onSkip: skip
+        }
+      ) }) })
+    ) : null
   ] }) });
 }
 const NO_NAV = { index: 0, floor: 0, via: "start", position: 0, count: 0 };
-const NOOP = () => {
-};
-function stepContext(gates, via) {
-  return { gate: (key) => gates.get(key), via };
-}
 function resolveAt(steps, at) {
   if (typeof at === "number") return Math.min(Math.max(0, Math.floor(at)), Math.max(0, steps.length - 1));
   const anchor = `data-tour="${at}"`;
@@ -299,742 +319,6 @@ function resolveAt(steps, at) {
     console.warn(`[ui-kit] A tour was started at "${at}", but no step targets [${anchor}]: it starts at 0.`);
   return 0;
 }
-function firstEmptied(steps, floor, index, gates) {
-  const ctx = stepContext(gates, "goto");
-  for (let j = floor; j < index; j++) {
-    const key = steps[j].gate;
-    if (key && gates.get(key) === false && isShown(steps[j], ctx)) return j;
-  }
-  return -1;
-}
-function isShown(step, ctx) {
-  if (!step.when) return true;
-  try {
-    return step.when(ctx) === true;
-  } catch (error) {
-    console.error(error);
-    return false;
-  }
-}
-function isVisible(el) {
-  const r = el.getBoundingClientRect();
-  if (r.width <= 0 || r.height <= 0) return false;
-  const style = getComputedStyle(el);
-  return style.visibility !== "hidden" && style.display !== "none";
-}
-function queryVisibleTarget(selector) {
-  const els = document.querySelectorAll(selector);
-  for (const el of els) {
-    if (isVisible(el)) return el;
-  }
-  return null;
-}
-function rectOf(el) {
-  const r = el.getBoundingClientRect();
-  return { top: r.top, left: r.left, width: r.width, height: r.height };
-}
-const RING_BAND = 6;
-function spotRectOf(el, step) {
-  const own = rectOf(el);
-  if (!isFieldStep(step)) return own;
-  const ids = /* @__PURE__ */ new Set();
-  const holders = [el, ...Array.from(el.querySelectorAll("[aria-describedby]"))];
-  for (const holder of holders) {
-    for (const id of (holder.getAttribute("aria-describedby") ?? "").split(/\s+/)) if (id) ids.add(id);
-  }
-  if (ids.size === 0) return own;
-  const lines = [];
-  for (const id of ids) {
-    const line = document.getElementById(id);
-    if (!line || el.contains(line) || line.closest('[role="tooltip"]') || !isVisible(line)) continue;
-    const r = line.getBoundingClientRect();
-    if (r.width > 1 && r.height > 1) lines.push(r);
-  }
-  let top = own.top;
-  let left = own.left;
-  let right = own.left + own.width;
-  let bottom = own.top + own.height;
-  const reach = (step.padding ?? 8) + RING_BAND;
-  for (let grew = true; grew; ) {
-    grew = false;
-    for (let i = lines.length - 1; i >= 0; i--) {
-      const r = lines[i];
-      const across = r.left < right && r.right > left;
-      const gap = Math.max(r.top - bottom, top - r.bottom);
-      if (!across || gap > reach) continue;
-      top = Math.min(top, r.top);
-      left = Math.min(left, r.left);
-      right = Math.max(right, r.right);
-      bottom = Math.max(bottom, r.bottom);
-      lines.splice(i, 1);
-      grew = true;
-    }
-  }
-  return { top, left, width: right - left, height: bottom - top };
-}
-function layerHost(el) {
-  return el.closest("[data-kit-layer]");
-}
-function coversViewport(host, el) {
-  let surface = host;
-  if (host.getAttribute("data-kit-layer") === "backdrop") {
-    for (const child of Array.from(host.children)) {
-      if (child.contains(el)) {
-        surface = child;
-        break;
-      }
-    }
-  }
-  const r = surface.getBoundingClientRect();
-  const vv = window.visualViewport;
-  const top = vv?.offsetTop ?? 0;
-  const bottom = top + (vv?.height ?? window.innerHeight);
-  const width = vv?.width ?? window.innerWidth;
-  return r.width > 0 && r.left <= 1 && r.top <= top + 1 && r.right >= width - 1 && r.bottom >= bottom - 1;
-}
-function docks(step, dockOnPhones) {
-  if (typeof window === "undefined" || window.innerWidth >= DOCK_MAX_WIDTH || !step.target) return false;
-  return step.placement === "dock" || step.placement === void 0 && dockOnPhones && isFieldStep(step);
-}
-function isFieldStep(step) {
-  return !!(step.interactive || step.awaitInput || step.gate || step.awaitGate);
-}
-function firstFocusable(el) {
-  if (el instanceof HTMLElement && el.matches(FOCUSABLE_CONTROL)) return el;
-  return el.querySelector(FOCUSABLE_CONTROL);
-}
-function tabStops(el) {
-  const all = el.matches(FOCUSABLE_CONTROL) ? [el] : [];
-  return all.concat(
-    Array.from(el.querySelectorAll(FOCUSABLE_CONTROL)).filter(
-      (x) => x.tabIndex >= 0 && !x.closest("[hidden],[inert]")
-    )
-  );
-}
-const FOCUSABLE_CONTROL = 'a[href],button:not([disabled]),textarea:not([disabled]),input:not([disabled]),select:not([disabled]),[tabindex]:not([tabindex="-1"])';
-function coarsePointer() {
-  return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(pointer: coarse)").matches : false;
-}
-function TourOverlay({
-  steps,
-  index,
-  via,
-  floor,
-  position,
-  count,
-  refusal,
-  onGoTo,
-  labels,
-  gates,
-  dockOnPhones,
-  onNext,
-  onPrev,
-  onSkip
-}) {
-  const step = steps[index];
-  const isFirst = position <= 1;
-  const isLast = position >= count;
-  const [located, setLocated] = useState(null);
-  const current = located !== null && located.index === index && located.step === step ? located : null;
-  const ready = current !== null;
-  const rect = current?.rect ?? null;
-  const dir = current?.dir ?? "ltr";
-  const rootRef = useRef(null);
-  const cardRef = useRef(null);
-  const bodyId = useId();
-  const hintId = useId();
-  const gateVersion = useSyncExternalStore(gates.subscribe, gates.version, gates.version);
-  const gateKey = step.gate;
-  const enforced = !!gateKey && gates.has(gateKey);
-  const locked = enforced && gates.get(gateKey) !== true;
-  const [polite, setPolite] = useState("");
-  const announce = useCallback((text) => {
-    setPolite((prev) => prev === text ? `${text}\u200B` : text);
-  }, []);
-  useEffect(() => {
-    let cancelled = false;
-    let raf = 0;
-    const settle = (el) => {
-      let layer2 = null;
-      let fullScreen = false;
-      if (el && isFieldStep(step)) {
-        const host = layerHost(el);
-        layer2 = document.createElement("div");
-        layer2.setAttribute("data-tour-layer", "");
-        if (host) host.after(layer2);
-        else document.body.appendChild(layer2);
-        fullScreen = !!host && coversViewport(host, el);
-      }
-      setLocated({ index, step, rect: el ? spotRectOf(el, step) : null, dir: dirOf(el), layer: layer2, fullScreen });
-    };
-    void (async () => {
-      await step.beforeStep?.(stepContext(gates, via));
-      if (cancelled) return;
-      if (!step.target) {
-        settle(null);
-        return;
-      }
-      let tries = 0;
-      const find = () => {
-        if (cancelled) return;
-        const el = queryVisibleTarget(step.target);
-        if (el) {
-          if (docks(step, dockOnPhones)) scrollIntoFreeHalf(el, null, null);
-          else el.scrollIntoView({ block: "center", behavior: "smooth" });
-          settle(el);
-          return;
-        }
-        if (tries++ < 45) raf = requestAnimationFrame(find);
-        else settle(null);
-      };
-      find();
-    })();
-    return () => {
-      cancelled = true;
-      cancelAnimationFrame(raf);
-    };
-  }, [index, step]);
-  useEffect(() => {
-    if (!step.target) return;
-    const update = () => {
-      const el = queryVisibleTarget(step.target);
-      if (el) {
-        const next = spotRectOf(el, step);
-        const host = layerHost(el);
-        const full = !!host && coversViewport(host, el);
-        setLocated((prev) => {
-          if (!prev || prev.index !== index || prev.step !== step) return prev;
-          const fullScreen = prev.layer ? full : prev.fullScreen;
-          if (sameRect(prev.rect, next) && fullScreen === prev.fullScreen) return prev;
-          return { ...prev, rect: next, fullScreen };
-        });
-      }
-    };
-    window.addEventListener("scroll", update, true);
-    window.addEventListener("resize", update);
-    const id = window.setInterval(update, 250);
-    return () => {
-      window.removeEventListener("scroll", update, true);
-      window.removeEventListener("resize", update);
-      clearInterval(id);
-    };
-  }, [index, step]);
-  const layer = located?.layer ?? null;
-  useEffect(() => {
-    if (!layer) return;
-    return () => layer.remove();
-  }, [layer]);
-  useDismissLayer(
-    ready,
-    (e) => {
-      if (fieldStepNow && step.target && e.target instanceof Node) {
-        const el = queryVisibleTarget(step.target);
-        if (el?.contains(e.target)) return;
-      }
-      onSkip();
-    },
-    // Not an overlay to `useOverlayOpen`: a floating launcher a tour spotlights stays.
-    { overlay: false }
-  );
-  const spotted = rect !== null;
-  useEffect(() => {
-    if (!ready || !spotted || !step.awaitClick || !step.target) return;
-    const el = queryVisibleTarget(step.target);
-    if (!el) return;
-    const onClick = () => window.setTimeout(() => onNext(), 0);
-    el.addEventListener("click", onClick, { once: true });
-    return () => el.removeEventListener("click", onClick);
-  }, [ready, spotted, index, step, onNext]);
-  const interactive = spotted && !!step.target && !!(step.interactive || step.awaitInput || step.gate || step.awaitGate);
-  const guided = interactive && !!(step.gate || step.awaitInput || step.awaitGate);
-  const fieldStepNow = interactive;
-  const awaitsRelease = spotted && !!step.target && !!step.awaitGate;
-  const warnedGateRef = useRef(null);
-  useEffect(() => {
-    if (!ready || !gateKey || gates.has(gateKey) || !devWarnings() || warnedGateRef.current === step) return;
-    warnedGateRef.current = step;
-    console.warn(
-      `[ui-kit] Tour step "${step.title}" waits for the gate "${gateKey}", which nothing publishes: its Next is open. Publish it with useTourGate beside the field, or the form has closed under the tour.`
-    );
-  }, [ready, gateKey, gates, step, gateVersion]);
-  useEffect(() => {
-    if (!ready || !step.optional || step.gate || !devWarnings()) return;
-    console.warn(
-      `[ui-kit] Tour step "${step.title}" is \`optional\` without a \`gate\`: it shows the Optional chip and a plain Next. "Leave empty" needs a gate to compare.`
-    );
-  }, [ready, step]);
-  const wasLockedRef = useRef(null);
-  useEffect(() => {
-    if (!ready || !gateKey) return;
-    const before = wasLockedRef.current;
-    if (before && before.step === step && before.locked && !locked && enforced) announce(labels.gateReady);
-    wasLockedRef.current = { step, locked };
-  }, [ready, gateKey, step, locked, enforced, announce, labels.gateReady]);
-  useEffect(() => {
-    if (!ready || !guided || !step.target) return;
-    const el = queryVisibleTarget(step.target);
-    const control = el ? firstFocusable(el) : null;
-    const previous = control ? control.getAttribute("aria-describedby") : null;
-    if (control) control.setAttribute("aria-describedby", previous ? `${previous} ${bodyId}` : bodyId);
-    if (coarsePointer() || !control) cardRef.current?.focus();
-    else if (!el.contains(document.activeElement)) focusQuietly(control);
-    if (!control) return;
-    return () => {
-      if (previous === null) control.removeAttribute("aria-describedby");
-      else control.setAttribute("aria-describedby", previous);
-    };
-  }, [ready, guided, index, step, bodyId]);
-  useEffect(() => {
-    if (!ready || !guided || !step.target) return;
-    const onTab = (e) => {
-      if (e.key !== "Tab") return;
-      const el = queryVisibleTarget(step.target);
-      const card = cardRef.current;
-      if (!el || !card) return;
-      const active = document.activeElement;
-      const fieldStops = tabStops(el);
-      const cardStops = tabStops(card);
-      if (fieldStops.length === 0 || cardStops.length === 0) return;
-      let to = null;
-      if (active instanceof Node && el.contains(active)) {
-        if (!e.shiftKey && active === fieldStops[fieldStops.length - 1]) to = cardStops[0];
-        else if (e.shiftKey && active === fieldStops[0]) to = cardStops[cardStops.length - 1];
-      } else if (active instanceof Node && card.contains(active)) {
-        if (!e.shiftKey && active === cardStops[cardStops.length - 1]) to = fieldStops[0];
-        else if (e.shiftKey && (active === cardStops[0] || active === card)) to = fieldStops[fieldStops.length - 1];
-      }
-      if (!to) return;
-      e.preventDefault();
-      e.stopPropagation();
-      to.focus();
-    };
-    document.addEventListener("keydown", onTab, true);
-    return () => document.removeEventListener("keydown", onTab, true);
-  }, [ready, guided, index, step]);
-  useEffect(() => {
-    if (!ready || !spotted || !gateKey || !step.target) return;
-    const el = queryVisibleTarget(step.target);
-    if (!el) return;
-    const satisfied = () => !gates.has(gateKey) || gates.get(gateKey) === true;
-    let timer = 0;
-    let armed = el.contains(document.activeElement);
-    const check = () => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        if (satisfied()) onNext();
-      }, 0);
-    };
-    const onFocusIn = () => {
-      armed = true;
-    };
-    const onFocusOut = (e) => {
-      const to = e.relatedTarget;
-      if (to instanceof Node && el.contains(to)) return;
-      const wasArmed = armed;
-      armed = false;
-      if (!wasArmed) return;
-      if (to === null || to instanceof Node && rootRef.current?.contains(to)) check();
-    };
-    const onKeyDown = (e) => {
-      if (e.key !== "Enter" || !(e.target instanceof Node) || !el.contains(e.target)) return;
-      if (e.defaultPrevented || isComposing(e)) return;
-      if (e.target instanceof HTMLTextAreaElement && !(e.ctrlKey || e.metaKey)) return;
-      check();
-    };
-    el.addEventListener("focusin", onFocusIn);
-    el.addEventListener("focusout", onFocusOut);
-    document.addEventListener("keydown", onKeyDown);
-    return () => {
-      window.clearTimeout(timer);
-      el.removeEventListener("focusin", onFocusIn);
-      el.removeEventListener("focusout", onFocusOut);
-      document.removeEventListener("keydown", onKeyDown);
-    };
-  }, [ready, spotted, gateKey, gates, index, step, onNext]);
-  useEffect(() => {
-    if (!ready || !spotted || !step.awaitInput || !step.target) return;
-    const el = queryVisibleTarget(step.target);
-    if (!el) return;
-    const read = () => fieldValues(el);
-    const before = read();
-    let timer = 0;
-    let done = false;
-    const check = () => {
-      window.clearTimeout(timer);
-      timer = window.setTimeout(() => {
-        if (done || read() === before) return;
-        done = true;
-        onNext();
-      }, 0);
-    };
-    const onFocusOut = (e) => {
-      if (e.relatedTarget instanceof Node && el.contains(e.relatedTarget)) return;
-      check();
-    };
-    const onKeyDown = (e) => {
-      if (e.key === "Enter") check();
-    };
-    el.addEventListener("focusout", onFocusOut);
-    el.addEventListener("keydown", onKeyDown);
-    el.addEventListener("change", check);
-    return () => {
-      window.clearTimeout(timer);
-      el.removeEventListener("focusout", onFocusOut);
-      el.removeEventListener("keydown", onKeyDown);
-      el.removeEventListener("change", check);
-    };
-  }, [ready, spotted, index, step, onNext]);
-  const gateHint = step.gateHint ?? labels.gateHint;
-  const lockedNext = useCallback(() => {
-    const el = step.target ? queryVisibleTarget(step.target) : null;
-    const control = el ? firstFocusable(el) : null;
-    if (control) focusQuietly(control);
-    announce(gateHint);
-  }, [step.target, announce, gateHint]);
-  const tryNext = awaitsRelease ? NOOP : locked ? lockedNext : onNext;
-  const backTo = refusal ? firstEmptied(steps, floor, index, gates) : -1;
-  useEffect(() => {
-    const onKey = (e) => {
-      if (interactive && e.target instanceof Node && e.target !== document.body && !rootRef.current?.contains(e.target)) {
-        return;
-      }
-      if (e.key === "Escape") {
-        if (!ready) onSkip();
-        return;
-      }
-      if (e.key === "Enter") {
-        if (step.awaitClick || step.awaitInput || ownsKey(e.target, "Enter")) return;
-        e.preventDefault();
-        tryNext();
-        return;
-      }
-      if (ownsKey(e.target, e.key)) return;
-      const delta = horizontalStep(e.key, rootRef.current);
-      if (delta === 1) {
-        e.preventDefault();
-        tryNext();
-      } else if (delta === -1) {
-        if (!isFirst) onPrev();
-      }
-    };
-    document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
-  }, [isFirst, step, interactive, tryNext, onPrev, onSkip, ready]);
-  if (!ready) return null;
-  const bare = interactive && !!current?.fullScreen;
-  const pad = step.padding ?? 8;
-  const spot = rect ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 } : null;
-  return createPortal(
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        ref: rootRef,
-        className: cn("pointer-events-none fixed inset-0", interactive ? "z-50" : "z-[60]"),
-        role: "dialog",
-        "aria-modal": interactive ? void 0 : "true",
-        "data-tour-overlay": "",
-        "data-tour-interactive": interactive ? "" : void 0,
-        "data-tour-bare": bare ? "" : void 0,
-        "aria-label": step.title,
-        dir,
-        children: [
-          spot && !bare && /* @__PURE__ */ jsx(SpotlightShields, { spot }),
-          spot ? /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "pointer-events-none fixed rounded-lg transition-all duration-200 ease-out",
-              style: {
-                top: spot.top,
-                left: spot.left,
-                width: spot.width,
-                height: spot.height,
-                // A two-tone frame, not a single translucent ring.
-                //
-                // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it
-                // "was barely visible" on the app's blue-tinted surfaces. Two reasons,
-                // and a single ring can't fix either: at 55% the surround stays bright
-                // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white
-                // ring sitting on the edge of a light card is white-on-near-white.
-                //
-                // So: an opaque white band immediately around the target, a dark keyline
-                // outside it, then the scrim. Whatever the target's own colour is, one of
-                // the two bands is always in contrast with it and the other is always in
-                // contrast with the dimmed surround — there is no background that can
-                // swallow both. The blurred layer between them softens the step so the
-                // frame reads as lighting rather than as a pasted-on rectangle.
-                boxShadow: [
-                  "0 0 0 3px rgba(255,255,255,0.98)",
-                  "0 0 0 5px rgba(15,23,42,0.92)",
-                  "0 0 18px 6px rgba(15,23,42,0.45)",
-                  ...bare ? [] : ["0 0 0 9999px rgba(15,23,42,0.70)"]
-                ].join(", ")
-              }
-            }
-          ) : /* @__PURE__ */ jsx("div", { className: "pointer-events-auto fixed inset-0 bg-black/70" }),
-          /* @__PURE__ */ jsx(
-            TourCard,
-            {
-              cardRef,
-              step,
-              index,
-              position,
-              total: count,
-              labels,
-              isFirst,
-              isLast,
-              rect: spot,
-              dir,
-              trap: !guided,
-              bodyId,
-              hintId,
-              locked,
-              gateHint,
-              onBack: onPrev,
-              onNext: tryNext,
-              onLeaveEmpty: onNext,
-              onSkip,
-              awaitsRelease,
-              docked: spot !== null && docks(step, dockOnPhones),
-              refusal,
-              backTo: backTo >= 0 ? { title: steps[backTo].title, go: () => onGoTo(backTo) } : null
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "sr-only", "aria-live": "polite", "aria-atomic": "true", children: polite })
-        ]
-      }
-    ),
-    interactive && current?.layer || document.body
-  );
-}
-function fieldValues(el) {
-  const fields = el.matches("input,textarea,select") ? [el] : Array.from(el.querySelectorAll("input,textarea,select"));
-  return fields.map(
-    (f) => f instanceof HTMLInputElement && (f.type === "checkbox" || f.type === "radio") ? String(f.checked) : f.value
-  ).join("\0");
-}
-function ownsKey(target, key) {
-  if (!(target instanceof HTMLElement)) return false;
-  if (target.isContentEditable) return true;
-  const tag = target.tagName;
-  if (tag === "TEXTAREA" || tag === "SELECT") return true;
-  if (tag === "INPUT") {
-    const type = target.type;
-    return key !== "Enter" || type !== "checkbox";
-  }
-  if (key !== "Enter") return false;
-  return tag === "BUTTON" || tag === "A" && target.hasAttribute("href") || target.getAttribute("role") === "button" || target.getAttribute("role") === "link";
-}
-function SpotlightShields({ spot }) {
-  const shield = "pointer-events-auto fixed";
-  const bottom = spot.top + spot.height;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-tour-shield": "",
-        className: shield,
-        style: { top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { "data-tour-shield": "", className: shield, style: { top: bottom, left: 0, right: 0, bottom: 0 } }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-tour-shield": "",
-        className: shield,
-        style: { top: spot.top, left: 0, width: Math.max(0, spot.left), height: spot.height }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "data-tour-shield": "",
-        className: shield,
-        style: { top: spot.top, left: spot.left + spot.width, right: 0, height: spot.height }
-      }
-    )
-  ] });
-}
-function placeCard(rect, cw, ch, vw, vh, m, placement, dir = "ltr") {
-  if (placement === "start") placement = dir === "rtl" ? "right" : "left";
-  else if (placement === "end") placement = dir === "rtl" ? "left" : "right";
-  if (!rect || placement === "center") {
-    return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };
-  }
-  const clampX = (x) => Math.min(Math.max(m, x), Math.max(m, vw - cw - m));
-  const clampY = (y) => Math.min(Math.max(m, y), Math.max(m, vh - ch - m));
-  const centerX = clampX(rect.left + rect.width / 2 - cw / 2);
-  const centerY = clampY(rect.top + rect.height / 2 - ch / 2);
-  const belowTop = rect.top + rect.height + m;
-  const aboveTop = rect.top - ch - m;
-  const rightLeft = rect.left + rect.width + m;
-  const leftLeft = rect.left - cw - m;
-  const fitsBelow = belowTop + ch <= vh;
-  const fitsAbove = aboveTop >= 0;
-  const fitsRight = rightLeft + cw <= vw;
-  const fitsLeft = leftLeft >= 0;
-  switch (placement) {
-    case "top":
-      return { top: fitsAbove ? aboveTop : fitsBelow ? belowTop : clampY(aboveTop), left: centerX };
-    case "bottom":
-      return { top: fitsBelow ? belowTop : fitsAbove ? aboveTop : clampY(belowTop), left: centerX };
-    case "right":
-      return { top: centerY, left: fitsRight ? rightLeft : fitsLeft ? leftLeft : clampX(rightLeft) };
-    case "left":
-      return { top: centerY, left: fitsLeft ? leftLeft : fitsRight ? rightLeft : clampX(leftLeft) };
-    default:
-      if (fitsBelow) return { top: belowTop, left: centerX };
-      if (fitsAbove) return { top: aboveTop, left: centerX };
-      return { top: Math.max(m, (vh - ch) / 2), left: centerX };
-  }
-}
-function TourCard({
-  cardRef: ref,
-  step,
-  index,
-  position,
-  total,
-  labels,
-  isFirst,
-  isLast,
-  rect,
-  dir,
-  trap,
-  bodyId,
-  hintId,
-  locked,
-  gateHint,
-  onBack,
-  onNext,
-  onLeaveEmpty,
-  onSkip,
-  awaitsRelease,
-  docked,
-  refusal,
-  backTo
-}) {
-  const [style, setStyle] = useState({ opacity: 0 });
-  useFocusTrap(ref, { active: trap });
-  const edgeRef = useRef(null);
-  const [bandTick, setBandTick] = useState(0);
-  const [edge, setEdge] = useState(null);
-  useEffect(() => {
-    if (!docked) return;
-    let last = "";
-    const look = () => {
-      const target = step.target ? queryVisibleTarget(step.target) : null;
-      const band = readBand(target, ref.current);
-      const key = `${band.top}:${band.bottom}`;
-      if (key === last) return;
-      last = key;
-      if (target) {
-        const r = target.getBoundingClientRect();
-        if (r.top < band.top || r.bottom > band.bottom) {
-          edgeRef.current = scrollIntoFreeHalf(target, ref.current, edgeRef.current);
-        }
-      }
-      setBandTick((t) => t + 1);
-    };
-    const vv = window.visualViewport;
-    vv?.addEventListener("resize", look);
-    vv?.addEventListener("scroll", look);
-    window.addEventListener("resize", look);
-    const id = window.setInterval(look, 250);
-    return () => {
-      vv?.removeEventListener("resize", look);
-      vv?.removeEventListener("scroll", look);
-      window.removeEventListener("resize", look);
-      clearInterval(id);
-    };
-  }, [docked, step.target, ref]);
-  useLayoutEffect(() => {
-    const card = ref.current;
-    if (!card) return;
-    if (docked) {
-      const target = step.target ? queryVisibleTarget(step.target) : null;
-      const band = readBand(target, card);
-      const next = rect ? dockEdge(rect, band, edgeRef.current, card.offsetHeight) : "bottom";
-      edgeRef.current = next;
-      setEdge(next);
-      setStyle(dockStyle(next, rect, band));
-      return;
-    }
-    setEdge(null);
-    setStyle(
-      placeCard(
-        rect,
-        card.offsetWidth,
-        card.offsetHeight,
-        window.innerWidth,
-        window.innerHeight,
-        12,
-        step.placement,
-        dir
-      )
-    );
-  }, [ref, rect, index, step.placement, step.target, dir, docked, bandTick]);
-  const awaitsTarget = (step.awaitClick || step.awaitInput) && step.target && rect || awaitsRelease;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      tabIndex: -1,
-      style,
-      "data-tour-card": "",
-      "data-tour-docked": edge ?? void 0,
-      className: cn(
-        "pointer-events-auto fixed z-[61] w-80 max-w-[calc(100vw-1.5rem)] rounded-lg border border-subtle bg-surface p-4 shadow-xl outline-none transition-all duration-200 ease-out",
-        // Docked, the height is capped: the body scrolls, the title and buttons stay.
-        docked && "flex flex-col"
-      ),
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm font-semibold text-primary", children: [
-          /* @__PURE__ */ jsx("span", { children: step.title }),
-          step.optional && /* @__PURE__ */ jsx("span", { className: "rounded-full border border-subtle px-1.5 py-px text-xs font-normal text-muted", children: labels.optional })
-        ] }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: bodyId,
-            className: cn("mt-1 text-sm leading-relaxed text-secondary", docked && "min-h-0 shrink overflow-y-auto"),
-            children: step.body
-          }
-        ),
-        step.action && /* @__PURE__ */ jsx("div", { className: "mt-3", children: step.action }),
-        /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: onSkip, className: "text-xs text-placeholder hover:text-secondary", children: labels.skip }),
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs tabular-nums text-placeholder", children: labels.step(position, total) }),
-              !isFirst && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onBack, className: "px-2.5 py-1 text-xs", children: labels.back }),
-              step.optional && locked && !awaitsTarget && /* @__PURE__ */ jsx(Button, { variant: "secondary", onClick: onLeaveEmpty, className: "px-2.5 py-1 text-xs", children: labels.leaveEmpty }),
-              !awaitsTarget && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  variant: "accent",
-                  onClick: onNext,
-                  "aria-disabled": locked || void 0,
-                  "aria-describedby": locked ? hintId : void 0,
-                  className: cn("px-2.5 py-1 text-xs", locked && "opacity-60"),
-                  children: isLast ? labels.done : labels.next
-                }
-              )
-            ] })
-          ] }),
-          awaitsTarget && /* @__PURE__ */ jsx("div", { className: "text-center text-xs italic text-placeholder", children: awaitsRelease ? step.awaitGateHint ?? labels.awaitGateHint : step.awaitInput && !step.awaitClick ? labels.awaitInputHint : labels.awaitClickHint }),
-          awaitsRelease && /* @__PURE__ */ jsxs("div", { "aria-live": "assertive", "aria-atomic": "true", className: "space-y-1", children: [
-            refusal && /* @__PURE__ */ jsxs("p", { "data-tour-refused": "", className: "text-xs text-danger", children: [
-              refusal.reason ?? labels.awaitGateRefused,
-              refusal.seq % 2 === 0 ? "\u200B" : ""
-            ] }),
-            refusal && backTo && /* @__PURE__ */ jsx(Button, { variant: "link", onClick: backTo.go, className: "text-xs", children: labels.backToStep(backTo.title) })
-          ] }),
-          locked && !awaitsTarget && /* @__PURE__ */ jsx("div", { id: hintId, className: "text-center text-xs italic text-placeholder", children: gateHint })
-        ] })
-      ]
-    }
-  );
-}
 export {
   DEFAULT_TOUR_LABELS,
   TourProvider,