@eifi1/ui-kit 0.48.2 → 0.49.0

package/dist/tour/tour.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tour/tour.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Button } from \"../components/button\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { sameRect } from \"../hooks/use-anchored-rect\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { DEFAULT_TOUR_LABELS } from \"./tour-labels\";\nimport type { TourInfo } from \"./tour-info\";\nimport { completeStored, rememberAccount, rememberMigrate, type UseTourProgressOptions } from \"./use-tour-progress\";\n\n/**\n * `start`/`end` follow the reading direction (`end` is the right side in LTR and the\n * left side in RTL) and are what a translated app wants. `left`/`right` stay physical\n * for the steps that genuinely mean a screen side.\n */\nexport type TourPlacement = \"top\" | \"right\" | \"bottom\" | \"left\" | \"start\" | \"end\" | \"center\";\n\nexport interface TourStep {\n  /** CSS selector for the element to spotlight. Omit for a centered step\n   *  (welcome/finish). If the target isn't found/visible, the step centers. */\n  target?: string;\n  title: string;\n  body: ReactNode;\n  /** Extra footer content, e.g. a \"load sample data\" shortcut. */\n  action?: ReactNode;\n  /** Spotlight padding around the target, px (default 8). */\n  padding?: number;\n  /** Where the card sits relative to the target. Omit for auto placement\n   *  (below → above → centered). \"center\" ignores the target and centers on\n   *  screen. \"start\"/\"end\" are the logical sides and flip in RTL; \"left\"/\"right\"\n   *  are physical. An explicit side flips to the opposite side if it would\n   *  overflow, then clamps into the viewport. */\n  placement?: TourPlacement;\n  /** Advance only when the user clicks the spotlighted target itself (not the\n   *  card's Next button). Requires `target`: the real control's own handler runs\n   *  first, then the tour steps forward on a microtask. The spotlight hole stays\n   *  click-through to the target; the rest of the page does not. */\n  awaitClick?: boolean;\n  /**\n   * The spotlighted control is for USING, not only for looking at (0.46, keksdose live\n   * #436): the layers it opens sit above the scrim and work. A plain step's overlay is\n   * `z-[60]`, over every kit layer, so a field whose number pad (`NumberPadSheet`), a\n   * select's menu or a popover opens at `z-50` opened UNDER the shields, where nothing\n   * could be tapped. Here the overlay drops to `z-[45]`: still over the top bar and the\n   * page (`z-40` and below, still dimmed and shielded), under every `z-50` layer the\n   * target opens — so an app's own layer wants `z-50` or more to clear it. Keys pressed\n   * in the target or in such a layer are theirs (Escape closes the pad, arrows walk a\n   * list); from the card the tour's keys work as on any step. The overlay is not\n   * `aria-modal` then, and carries `data-tour-interactive`.\n   *\n   * The card is in the same layer as the scrim, so an open pad or sheet may cover it\n   * until it closes. Requires `target`. A `HoverMenu` (`z-40`, the top bar's menus) stays\n   * under the scrim: point an `awaitClick` step at its trigger instead.\n   */\n  interactive?: boolean;\n  /**\n   * Advance once a value was ENTERED in the spotlighted control (0.46, keksdose live\n   * #436) — `awaitClick` for a field. Implies `interactive`. Counted when focus leaves\n   * the target (the number pad's Done, a Tab, a tap elsewhere), or Enter is pressed in\n   * it, and one of its fields (`input`, `textarea`, `select`: the target itself or\n   * inside it) then holds another value than when the step began; a native `change`\n   * (a select, a checkbox) counts at once. The card swaps Next for `awaitInputHint`,\n   * as for `awaitClick`. A picker whose value is not a field's (the kit's `Select`\n   * button) has nothing to compare: call `useTour().next()` from its `onChange`.\n   */\n  awaitInput?: boolean;\n  /** Runs before the step is shown — e.g. navigate to a route, open a panel.\n   *  May be async; the step waits for it, then locates the target. */\n  beforeStep?: () => void | Promise<void>;\n}\n\nexport interface TourLabels {\n  next: string;\n  back: string;\n  skip: string;\n  done: string;\n  /** Shown in place of the Next button on an `awaitClick` step. */\n  awaitClickHint: string;\n  /** Shown in place of the Next button on an `awaitInput` step (0.46). */\n  awaitInputHint: string;\n  /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n  step: (current: number, total: number) => string;\n}\n\n// Defined in ./tour-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_TOUR_LABELS };\n\ninterface StartOptions {\n  /** Stable id of the tour, surfaced as `activeId` so the app can mirror it to\n   *  the URL (deep-link / evaluation tracking) and record completion. Defaults to\n   *  `tour.id`. */\n  id?: string;\n  /** The tour being started, as the app lists it (docs/tours-harmonization.md §9.6.1).\n   *  When its last step is finished, the provider records the completion in its\n   *  `progress` and hands this to `onComplete`. */\n  tour?: TourInfo;\n  /** Start at this step index instead of 0 (clamped) — for URL/deep-link resume. */\n  startIndex?: number;\n  /** Fires synchronously when the tour starts (e.g. enable a mock interceptor). */\n  onStart?: () => void;\n  /** After the last step: runs after the provider's progress write and `onComplete`. */\n  onFinish?: () => void;\n  onSkip?: () => void;\n}\n\n/** What `TourProvider`'s `onComplete` learns besides the tour (§9.1, §9.6). */\nexport interface TourCompletion {\n  /**\n   * `true` when the completion counts anew (the first time, or the first time after the\n   * tour's update, §8): the moment for the app's points toast. `false` for a replay, and\n   * when the stored text is in an old shape no `migrate` reads: nothing is overwritten\n   * then, and the error goes to `console.error` (keksdose B-1). `undefined` when the provider has no `progress` or the start carried no `tour`, so\n   * nothing was recorded.\n   */\n  awarded: boolean | undefined;\n}\n\ninterface TourContextValue {\n  active: boolean;\n  /** Id of the running tour (from {@link StartOptions.id}), else null. */\n  activeId: string | null;\n  /** Start a tour with the given steps. */\n  start: (steps: TourStep[], opts?: StartOptions) => void;\n  /** End the current tour (no callbacks fire). */\n  stop: () => void;\n  /** Advance one step; past the last step it finishes the tour (fires onFinish). */\n  next: () => void;\n  /** Go back one step (no-op on the first). */\n  prev: () => void;\n  /** Jump to a step by index, clamped to range — e.g. for URL/deep-link resume. */\n  goToStep: (index: number) => void;\n  /** Current step (0-based; 0 while inactive). */\n  index: number;\n  /** Total steps (0 while inactive). */\n  total: number;\n}\n\nconst TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTour(): TourContextValue {\n  const ctx = useContext(TourContext);\n  if (!ctx) throw new Error(\"useTour must be used within <TourProvider>\");\n  return ctx;\n}\n\n/**\n * The tour engine if it is there, `null` if it is not — for a control that is a\n * DECORATION rather than a participant.\n *\n * {@link useTour}'s throw is correct and stays: a component that runs a tour cannot do\n * its job without the provider, and failing loudly is how that gets fixed. But the\n * throw's blast radius is whatever error boundary is above it, and for a launcher in\n * the app shell that is the whole app.\n *\n * Keksdose feedback dev#524 is what that costs: an `@hb/ui` module was edited while a\n * dev server was running, vite re-evaluated it, and the module's freshly created\n * context object was no longer the one the mounted provider was providing. React's\n * `useContext` then answers `null` for a provider that is, structurally, right there —\n * and the top bar's tour menu took the entire shell down with it. **Build-time module\n * graphs cannot produce that**, so it is a development-only failure; a menu that\n * disappears for a second is the proportionate response to it either way.\n *\n * Only for controls that can honestly render nothing. If a component would show a\n * broken half of itself without the tour, it wants {@link useTour}.\n */\nexport function useTourOptional(): TourContextValue | null {\n  return useContext(TourContext);\n}\n\n/** The kit's dev switch (as number-input's): a development build, never under vitest. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * Provides the guided-tour engine: a dimmed spotlight overlay + step card driven\n * by a list of {@link TourStep}s. Domain-free — the app supplies the steps (copy,\n * selectors, per-step navigation, placement) and the translated {@link TourLabels}.\n * Mount once inside the router; start a tour from anywhere via {@link useTour},\n * which also exposes step control (`next`/`prev`/`goToStep`) and the current\n * `index`/`total` for URL mirroring, `awaitClick` and deep-link resume.\n *\n * **Completion in one place** (docs/tours-harmonization.md §9.6): give the provider the\n * app's `progress` (the same `{storageKey, migrate}` as `useTourProgress`) and start each\n * tour with `start(steps, {tour})`. When the last step is finished the provider writes the\n * completion ONCE, through the store every `useTourProgress` reader of the key shares\n * (never a second copy), then calls `onComplete(tour, {awarded})`, then the start's own\n * `onFinish`. A skip or `stop()` records nothing and calls neither. The app removes its\n * own `complete()` from `onFinish`, or that second write answers `false`.\n *\n * Both props are optional: without `progress` or a `tour` on the start, `onComplete`\n * still fires, with `awarded: undefined` (and `tour` as given, possibly `undefined`). A\n * new `storageKey` (an account switch on a shared PC) is followed on the next\n * completion, without a remount.\n */\nexport function TourProvider({\n  children,\n  labels,\n  progress,\n  onComplete,\n}: {\n  children: ReactNode;\n  labels?: LabelOverride<TourLabels>;\n  /** The app's tour progress: the same options its `useTourProgress` readers use. */\n  progress?: UseTourProgressOptions;\n  /** A tour's last step was finished; see {@link TourCompletion}. */\n  onComplete?: (tour: TourInfo | undefined, completion: TourCompletion) => void;\n}) {\n  // `labels` over the provider's `tour` over English. Resolved once here and handed\n  // down: the step card is portalled, but context crosses portals anyway — this is\n  // simply the one place that already owned the merge.\n  const merged = useKitLabels(\"tour\", DEFAULT_TOUR_LABELS, labels);\n  const [steps, setSteps] = useState<TourStep[] | null>(null);\n  const [index, setIndex] = useState(0);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const optsRef = useRef<StartOptions>({});\n  // The latest props, read at the finish: a new `storageKey` or callback needs no remount.\n  const progressRef = useRef(progress);\n  const onCompleteRef = useRef(onComplete);\n  useLayoutEffect(() => {\n    progressRef.current = progress;\n    onCompleteRef.current = onComplete;\n  });\n  // The provider's migrate becomes the key's, for readers that pass none (keksdose B-2).\n  const storageKey = progress?.storageKey;\n  const migrate = progress?.migrate;\n  // 0.45: and its `account` (§10.3), so a finish on an account key is sent as readers' are.\n  const account = progress?.account;\n  useLayoutEffect(() => {\n    if (storageKey !== undefined) rememberMigrate(storageKey, migrate);\n    if (storageKey !== undefined) rememberAccount(storageKey, account);\n  }, [storageKey, migrate, account]);\n  const warnedNoTourRef = useRef(false);\n  // Live mirrors so the step-control callbacks can stay stable (identity-safe for\n  // consumers) while still reading the current steps/index. Synced in a layout\n  // effect — after the commit, before paint and before any passive effect or event\n  // can call them — rather than written during render.\n  const stepsRef = useRef<TourStep[] | null>(null);\n  const indexRef = useRef(0);\n  useLayoutEffect(() => {\n    stepsRef.current = steps;\n    indexRef.current = index;\n  }, [steps, index]);\n  const active = !!steps && steps.length > 0;\n  const total = steps?.length ?? 0;\n\n  const start = useCallback((s: TourStep[], opts?: StartOptions) => {\n    optsRef.current = opts ?? {};\n    optsRef.current.onStart?.();\n    setIndex(Math.min(Math.max(0, opts?.startIndex ?? 0), Math.max(0, s.length - 1)));\n    setActiveId(opts?.id ?? opts?.tour?.id ?? null);\n    setSteps(s);\n  }, []);\n  const stop = useCallback(() => {\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const finish = useCallback(() => {\n    // Once per tour: a second \"Done\" before the overlay unmounts records nothing more.\n    if (!stepsRef.current) return;\n    stepsRef.current = null;\n    const { tour, onFinish } = optsRef.current;\n    const store = progressRef.current;\n    // Exactly one write per completion (§9.6.2), so `awarded` is what `complete(tour)` answered.\n    let awarded: boolean | undefined;\n    if (store && tour) {\n      try {\n        awarded = completeStored(store.storageKey, store.migrate, tour);\n      } catch (error) {\n        // A stored text no migrate reads is left as it is (keksdose B-1); the tour still ends.\n        console.error(error);\n        awarded = false;\n      }\n    } else if (store && !tour && devWarnings() && !warnedNoTourRef.current) {\n      warnedNoTourRef.current = true;\n      console.warn(\n        \"[ui-kit] TourProvider has `progress`, but a finished tour's start carried no `tour`: \" +\n          \"nothing was recorded and `awarded` is undefined. Start it with `start(steps, { tour })`.\",\n      );\n    }\n    onCompleteRef.current?.(tour, { awarded });\n    onFinish?.();\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const skip = useCallback(() => {\n    optsRef.current.onSkip?.();\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n\n  const goToStep = useCallback((i: number) => {\n    const len = stepsRef.current?.length ?? 0;\n    if (len === 0) return;\n    setIndex(Math.min(Math.max(0, i), len - 1));\n  }, []);\n  const next = useCallback(() => {\n    const len = stepsRef.current?.length ?? 0;\n    if (len === 0) return;\n    if (indexRef.current >= len - 1) finish();\n    else setIndex(indexRef.current + 1);\n  }, [finish]);\n  const prev = useCallback(() => {\n    if (indexRef.current > 0) setIndex(indexRef.current - 1);\n  }, []);\n\n  return (\n    <TourContext.Provider value={{ active, activeId, start, stop, next, prev, goToStep, index, total }}>\n      {children}\n      {active && (\n        <TourOverlay\n          steps={steps!}\n          index={index}\n          labels={merged}\n          onNext={next}\n          onPrev={prev}\n          onSkip={skip}\n        />\n      )}\n    </TourContext.Provider>\n  );\n}\n\ninterface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nfunction isVisible(el: Element): boolean {\n  // A non-zero box already rules out display:none on the element or any ancestor\n  // (an unrendered element measures 0x0). We deliberately do NOT test\n  // offsetParent: it is null for position:fixed elements even when fully visible,\n  // which made the mobile bottom-nav bar (fixed) un-highlightable on mobile\n  // (feedback #313). visibility:hidden keeps a box, so check it explicitly.\n  const r = el.getBoundingClientRect();\n  if (r.width <= 0 || r.height <= 0) return false;\n  const style = getComputedStyle(el);\n  return style.visibility !== \"hidden\" && style.display !== \"none\";\n}\n\n// The first VISIBLE element matching the selector, not merely the first in DOM\n// order. This lets a step target the same control across layouts with one\n// combined selector — e.g. the desktop sidebar link AND the mobile bottom-bar\n// link — where the off-layout copy is present but `display:none` (feedback\n// #313). Returns null while none is visible so the finder keeps retrying.\nfunction queryVisibleTarget(selector: string): Element | null {\n  const els = document.querySelectorAll(selector);\n  for (const el of els) {\n    if (isVisible(el)) return el;\n  }\n  return null;\n}\n\nfunction rectOf(el: Element): Rect {\n  const r = el.getBoundingClientRect();\n  return { top: r.top, left: r.left, width: r.width, height: r.height };\n}\n\n/**\n * What the finder established for ONE step: where its target is (`null` = no target,\n * or not on the page), and the reading direction the card takes from it.\n *\n * It carries the step it was found for, and the overlay only believes it for that\n * step — which is the whole fix for keksdose's tours audit 2026-10-02, §1.0 A (\"stale\n * spotlight on the step after a spotlighted one\", 15 steps in 16 tours, desktop and\n * phone, mouse and keyboard). When step N spotlit a target and step N+1 had none (or\n * its anchor was missing), N+1 kept N's hole and parked its card beside it, so a\n * centred \"You're all set\" read as pointing at the Import & Export link; Back→Next kept\n * it for as long as anyone watched.\n *\n * The overlay used to hold `rect` and `ready` as separate states and reset them\n * DURING RENDER when the step changed. React 19 does not keep a render-phase update\n * while an earlier, lower-priority update to the same hook is still queued — it only\n * writes the result to the base state \"unless the queue is empty\" — and the follow\n * interval below queues exactly such an update every 250 ms (eagerly bailed out because\n * the rect had not moved, but left in the queue for rebasing). So the click's render\n * showed the reset, and the very next render (the finder saying \"ready\") re-based on\n * the old rect. A deep link was fine because nothing had queued anything yet.\n *\n * Keying the result to its step does not depend on any of that ordering: a rect found\n * for another step is not this step's rect, whatever the queue does with it, and a\n * missing anchor reads as \"no target\" instead of as the last thing that was lit.\n */\ninterface Located {\n  index: number;\n  step: TourStep;\n  rect: Rect | null;\n  dir: Direction;\n}\n\nfunction TourOverlay({\n  steps,\n  index,\n  labels,\n  onNext,\n  onPrev,\n  onSkip,\n}: {\n  steps: TourStep[];\n  index: number;\n  labels: TourLabels;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n}) {\n  const step = steps[index];\n  const isFirst = index === 0;\n  const isLast = index === steps.length - 1;\n  // A new step starts unlocated: whatever was found for another step (see `Located`)\n  // is ignored, so the overlay renders nothing until the effect below has located THIS\n  // step, and never the previous step's spotlight.\n  const [located, setLocated] = useState<Located | null>(null);\n  const current = located !== null && located.index === index && located.step === step ? located : null;\n  const ready = current !== null;\n  const rect = current?.rect ?? null;\n  // The overlay is portalled to <body>, out of whatever `dir` subtree the app set, so it\n  // takes the direction of the element it spotlights (the document's for a centered\n  // step). Arrow keys and start/end placement read it.\n  const dir: Direction = current?.dir ?? \"ltr\";\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  // Run beforeStep, then locate the target (retrying across route/render lag).\n  useEffect(() => {\n    let cancelled = false;\n    let raf = 0;\n    // `null` = untargeted, or the finder gave up → the card centres, with no hole.\n    const settle = (el: Element | null) =>\n      setLocated({ index, step, rect: el ? rectOf(el) : null, dir: dirOf(el) });\n    void (async () => {\n      await step.beforeStep?.();\n      if (cancelled) return;\n      if (!step.target) {\n        settle(null);\n        return;\n      }\n      let tries = 0;\n      const find = () => {\n        if (cancelled) return;\n        const el = queryVisibleTarget(step.target!);\n        if (el) {\n          el.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n          settle(el);\n          return;\n        }\n        if (tries++ < 45) raf = requestAnimationFrame(find);\n        else settle(null); // give up → render centered\n      };\n      find();\n    })();\n    return () => {\n      cancelled = true;\n      cancelAnimationFrame(raf);\n    };\n  }, [index, step]);\n\n  // Follow the target as the page scrolls / reflows — only once THIS step is located,\n  // and only into this step's result.\n  useEffect(() => {\n    if (!step.target) return;\n    const update = () => {\n      const el = queryVisibleTarget(step.target!);\n      if (el) {\n        const next = rectOf(el);\n        setLocated((prev) =>\n          prev && prev.index === index && prev.step === step && !sameRect(prev.rect, next)\n            ? { ...prev, rect: next }\n            : prev,\n        );\n      }\n    };\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    const id = window.setInterval(update, 250);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n      clearInterval(id);\n    };\n  }, [index, step]);\n\n  // awaitClick: advance when the *real* target is clicked. The spotlight hole is\n  // click-through (see the shields in the render below) so the element's own\n  // handler runs first; we step forward on the next macrotask.\n  //\n  // Re-armed when the target turns up after the finder gave up (the follow effect\n  // lights it late): the card swaps Next for the \"click the highlighted element\" hint\n  // as soon as there is a rect, so the click must work from that moment too.\n  const spotted = rect !== null;\n  useEffect(() => {\n    if (!ready || !spotted || !step.awaitClick || !step.target) return;\n    const el = queryVisibleTarget(step.target);\n    if (!el) return;\n    const onClick = () => window.setTimeout(() => onNext(), 0);\n    el.addEventListener(\"click\", onClick, { once: true });\n    return () => el.removeEventListener(\"click\", onClick);\n  }, [ready, spotted, index, step, onNext]);\n\n  // An interactive step (see `TourStep.interactive`): only while the target is lit — a\n  // step whose target is missing centres its card over a full scrim, modal as ever.\n  const interactive = spotted && !!step.target && !!(step.interactive || step.awaitInput);\n\n  // awaitInput: advance once the target's fields hold another value than when the step\n  // was armed, checked when focus leaves the target or Enter is pressed in it — on the\n  // next macrotask, after the field's own blur/Enter commit has rendered. A value the\n  // number pad typed fires no native `change`, so comparing is what catches it.\n  useEffect(() => {\n    if (!ready || !spotted || !step.awaitInput || !step.target) return;\n    const el = queryVisibleTarget(step.target) as HTMLElement | null;\n    if (!el) return;\n    const read = () => fieldValues(el);\n    const before = read();\n    let timer = 0;\n    let done = false;\n    const check = () => {\n      window.clearTimeout(timer);\n      timer = window.setTimeout(() => {\n        if (done || read() === before) return;\n        done = true;\n        onNext();\n      }, 0);\n    };\n    const onFocusOut = (e: FocusEvent) => {\n      if (e.relatedTarget instanceof Node && el.contains(e.relatedTarget)) return;\n      check();\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") check();\n    };\n    el.addEventListener(\"focusout\", onFocusOut);\n    el.addEventListener(\"keydown\", onKeyDown);\n    el.addEventListener(\"change\", check);\n    return () => {\n      window.clearTimeout(timer);\n      el.removeEventListener(\"focusout\", onFocusOut);\n      el.removeEventListener(\"keydown\", onKeyDown);\n      el.removeEventListener(\"change\", check);\n    };\n  }, [ready, spotted, index, step, onNext]);\n\n  // Keyboard: Esc skips, Enter and the reading-direction arrow advance (→ in LTR,\n  // ← in RTL), the other arrow goes back. On awaitClick steps Enter is ignored (it\n  // would fire the target's click AND advance) — the forward arrow stays as an escape\n  // hatch.\n  //\n  // Enter on a focused control belongs to that control. This used to advance from\n  // anywhere, so Enter on a focused Skip or Back ran the button's own click AND stepped\n  // forward: Back moved nowhere, Skip skipped and then called `next` on a dead tour.\n  // The same goes for arrows in a text field a step's `action` might contain.\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      // On an interactive step a key pressed in the target, or in a layer it opened (the\n      // number pad's Escape, a menu's arrows), is the page's. The card's and the bare\n      // page's (focus on <body>) stay the tour's.\n      if (interactive && e.target instanceof Node && e.target !== document.body && !rootRef.current?.contains(e.target)) {\n        return;\n      }\n      if (e.key === \"Escape\") {\n        onSkip();\n        return;\n      }\n      if (e.key === \"Enter\") {\n        if (step.awaitClick || step.awaitInput || ownsKey(e.target, \"Enter\")) return;\n        e.preventDefault();\n        onNext();\n        return;\n      }\n      if (ownsKey(e.target, e.key)) return;\n      // The overlay root carries `dir`; before it paints, the document's answers.\n      const delta = horizontalStep(e.key, rootRef.current);\n      if (delta === 1) {\n        e.preventDefault();\n        onNext();\n      } else if (delta === -1) {\n        if (!isFirst) onPrev();\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [isFirst, step, interactive, onNext, onPrev, onSkip]);\n\n  if (!ready) return null;\n\n  const pad = step.padding ?? 8;\n  const spot: Rect | null = rect\n    ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 }\n    : null;\n\n  // `aria-modal` promises the page behind is out of reach, and the card's focus trap\n  // keeps that promise for the keyboard. The pointer used to get no such treatment: the\n  // root is `pointer-events-none` so that the spotlight hole can stay live for\n  // `awaitClick`, and the scrim is a box-shadow, which takes no clicks — so every\n  // control on the dimmed page stayed clickable. Four shields now tile the viewport\n  // around the hole: the page is blocked, the card and the spotlighted target are not.\n  // Keeping `aria-modal` (rather than dropping it) is the coherent half: the tour\n  // really is modal — focus is trapped and Esc/Skip is the way out.\n  return createPortal(\n    <div\n      ref={rootRef}\n      // z-[45] on an interactive step: over the top bar (z-40), under the z-50 layers the\n      // target opens. See `TourStep.interactive`.\n      className={cn(\"pointer-events-none fixed inset-0\", interactive ? \"z-[45]\" : \"z-[60]\")}\n      role=\"dialog\"\n      aria-modal={interactive ? undefined : \"true\"}\n      // A stable marker for the overlay, on every step (0.48, keksdose dev#611–613): an\n      // app that hides its floating help launcher while a modal is open excepts the\n      // tour, which may spotlight that launcher — `[aria-modal=\"true\"]:not([data-tour-overlay])`.\n      // keksdose matched the `pointer-events-none` class until now, which is the kit's to change.\n      data-tour-overlay=\"\"\n      data-tour-interactive={interactive ? \"\" : undefined}\n      aria-label={step.title}\n      dir={dir}\n    >\n      {spot && <SpotlightShields spot={spot} />}\n      {spot ? (\n        <div\n          className=\"pointer-events-none fixed rounded-lg transition-all duration-200 ease-out\"\n          style={{\n            top: spot.top,\n            left: spot.left,\n            width: spot.width,\n            height: spot.height,\n            // A two-tone frame, not a single translucent ring.\n            //\n            // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it\n            // \"was barely visible\" on the app's blue-tinted surfaces. Two reasons,\n            // and a single ring can't fix either: at 55% the surround stays bright\n            // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white\n            // ring sitting on the edge of a light card is white-on-near-white.\n            //\n            // So: an opaque white band immediately around the target, a dark keyline\n            // outside it, then the scrim. Whatever the target's own colour is, one of\n            // the two bands is always in contrast with it and the other is always in\n            // contrast with the dimmed surround — there is no background that can\n            // swallow both. The blurred layer between them softens the step so the\n            // frame reads as lighting rather than as a pasted-on rectangle.\n            boxShadow: [\n              \"0 0 0 3px rgba(255,255,255,0.98)\",\n              \"0 0 0 5px rgba(15,23,42,0.92)\",\n              \"0 0 18px 6px rgba(15,23,42,0.45)\",\n              \"0 0 0 9999px rgba(15,23,42,0.70)\",\n            ].join(\", \"),\n          }}\n        />\n      ) : (\n        <div className=\"pointer-events-auto fixed inset-0 bg-black/70\" />\n      )}\n      <TourCard\n        step={step}\n        index={index}\n        total={steps.length}\n        labels={labels}\n        isFirst={isFirst}\n        isLast={isLast}\n        rect={spot}\n        dir={dir}\n        onBack={onPrev}\n        onNext={onNext}\n        onSkip={onSkip}\n      />\n    </div>,\n    document.body,\n  );\n}\n\n/** The values of the fields at or inside `el`, as one string to compare (`awaitInput`). */\nfunction fieldValues(el: Element): string {\n  const fields = el.matches(\"input,textarea,select\") ? [el] : Array.from(el.querySelectorAll(\"input,textarea,select\"));\n  return fields\n    .map((f) =>\n      f instanceof HTMLInputElement && (f.type === \"checkbox\" || f.type === \"radio\")\n        ? String(f.checked)\n        : (f as HTMLInputElement).value,\n    )\n    .join(\"\\u0000\");\n}\n\n/** Does the focused element handle `key` itself? Enter on a button or link, and any\n *  editing key in a text field or select, is the control's — not the tour's. */\nfunction ownsKey(target: EventTarget | null, key: string): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n  const tag = target.tagName;\n  if (tag === \"TEXTAREA\" || tag === \"SELECT\") return true;\n  if (tag === \"INPUT\") {\n    const type = (target as HTMLInputElement).type;\n    // Enter on a checkbox does nothing natively, but ←/→ on a radio moves it.\n    return key !== \"Enter\" || type !== \"checkbox\";\n  }\n  if (key !== \"Enter\") return false;\n  return (\n    tag === \"BUTTON\" ||\n    (tag === \"A\" && target.hasAttribute(\"href\")) ||\n    target.getAttribute(\"role\") === \"button\" ||\n    target.getAttribute(\"role\") === \"link\"\n  );\n}\n\n/**\n * Transparent pointer blockers tiling the viewport around the spotlight hole: one\n * full-width band above and below, one on each side at the hole's own height. The hole\n * itself stays uncovered, so the target keeps its clicks.\n */\nfunction SpotlightShields({ spot }: { spot: Rect }) {\n  const shield = \"pointer-events-auto fixed\";\n  const bottom = spot.top + spot.height;\n  return (\n    <>\n      <div data-tour-shield=\"\" className={shield} style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }} />\n      <div data-tour-shield=\"\" className={shield} style={{ top: bottom, left: 0, right: 0, bottom: 0 }} />\n      <div\n        data-tour-shield=\"\"\n        className={shield}\n        style={{ top: spot.top, left: 0, width: Math.max(0, spot.left), height: spot.height }}\n      />\n      <div\n        data-tour-shield=\"\"\n        className={shield}\n        style={{ top: spot.top, left: spot.left + spot.width, right: 0, height: spot.height }}\n      />\n    </>\n  );\n}\n\n/**\n * Card position (viewport px) for the given placement relative to the padded\n * spotlight `rect`. Omitted placement keeps the original auto behavior\n * (below → above → vertically centered); an explicit side flips to its opposite\n * if it would overflow, then clamps into the viewport. \"center\" (or no rect)\n * centers on screen.\n */\nfunction placeCard(\n  rect: Rect | null,\n  cw: number,\n  ch: number,\n  vw: number,\n  vh: number,\n  m: number,\n  placement?: TourPlacement,\n  dir: Direction = \"ltr\",\n): { top: number; left: number } {\n  // The logical sides resolve to a physical one here, and only here.\n  if (placement === \"start\") placement = dir === \"rtl\" ? \"right\" : \"left\";\n  else if (placement === \"end\") placement = dir === \"rtl\" ? \"left\" : \"right\";\n  if (!rect || placement === \"center\") {\n    return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };\n  }\n  const clampX = (x: number) => Math.min(Math.max(m, x), Math.max(m, vw - cw - m));\n  const clampY = (y: number) => Math.min(Math.max(m, y), Math.max(m, vh - ch - m));\n  const centerX = clampX(rect.left + rect.width / 2 - cw / 2);\n  const centerY = clampY(rect.top + rect.height / 2 - ch / 2);\n  const belowTop = rect.top + rect.height + m;\n  const aboveTop = rect.top - ch - m;\n  const rightLeft = rect.left + rect.width + m;\n  const leftLeft = rect.left - cw - m;\n  const fitsBelow = belowTop + ch <= vh;\n  const fitsAbove = aboveTop >= 0;\n  const fitsRight = rightLeft + cw <= vw;\n  const fitsLeft = leftLeft >= 0;\n\n  switch (placement) {\n    case \"top\":\n      return { top: fitsAbove ? aboveTop : fitsBelow ? belowTop : clampY(aboveTop), left: centerX };\n    case \"bottom\":\n      return { top: fitsBelow ? belowTop : fitsAbove ? aboveTop : clampY(belowTop), left: centerX };\n    case \"right\":\n      return { top: centerY, left: fitsRight ? rightLeft : fitsLeft ? leftLeft : clampX(rightLeft) };\n    case \"left\":\n      return { top: centerY, left: fitsLeft ? leftLeft : fitsRight ? rightLeft : clampX(leftLeft) };\n    default:\n      if (fitsBelow) return { top: belowTop, left: centerX };\n      if (fitsAbove) return { top: aboveTop, left: centerX };\n      return { top: Math.max(m, (vh - ch) / 2), left: centerX };\n  }\n}\n\nfunction TourCard({\n  step,\n  index,\n  total,\n  labels,\n  isFirst,\n  isLast,\n  rect,\n  dir,\n  onBack,\n  onNext,\n  onSkip,\n}: {\n  step: TourStep;\n  index: number;\n  total: number;\n  labels: TourLabels;\n  isFirst: boolean;\n  isLast: boolean;\n  rect: Rect | null;\n  dir: Direction;\n  onBack: () => void;\n  onNext: () => void;\n  onSkip: () => void;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [style, setStyle] = useState<CSSProperties>({ opacity: 0 });\n\n  /**\n   * The card holds the focus, because the card is what the tour IS.\n   *\n   * The overlay above declares `role=\"dialog\" aria-modal=\"true\"` — it always has — and\n   * then left focus wherever the page had put it. For a tour that is the most pointed\n   * version of the audit's *\"Only Modal manages focus\"*: the whole component exists to\n   * say \"look here\", and for a keyboard user \"here\" is the focus ring. They were told\n   * the page was hidden, given no way to reach the Next button without Tabbing through\n   * it, and left on a control the screen reader would no longer describe.\n   *\n   * It re-engages on every step, without any bookkeeping here, because `TourOverlay`\n   * returns null while it re-locates the next target: the card genuinely unmounts and\n   * remounts between steps. That is what keeps focus honest when the BUTTONS change —\n   * \"Back\" does not exist on the first step, so stepping back onto it destroys the\n   * control the press came from, and focus would otherwise fall to `<body>`, outside\n   * this trap's own listener, where Tab walks straight into the page the overlay claims\n   * to have hidden.\n   *\n   * **The cost, written down:** on an `awaitClick` step the user is asked to click the\n   * spotlighted element, and they can no longer Tab to it. ArrowRight still advances\n   * (the key handler in `TourOverlay` is on the document and does not care where focus\n   * is), which is the escape hatch that step already documents for the case where the\n   * target cannot be found. Containment is worth that: an `awaitClick` step is a\n   * minority of steps, while focus stranded behind `aria-modal` is every step.\n   */\n  useFocusTrap(ref, { active: true });\n\n  useLayoutEffect(() => {\n    const card = ref.current;\n    if (!card) return;\n    setStyle(\n      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement, dir),\n    );\n  }, [rect, index, step.placement, dir]);\n\n  return (\n    <div\n      ref={ref}\n      // Focusable but not tabbable: the trap above focuses the card itself rather than\n      // its first button, so a screen reader reads the step's title and body before it\n      // reads \"Next\" — and without this the container cannot take focus at all and the\n      // trap silently does nothing.\n      tabIndex={-1}\n      style={style}\n      className=\"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\"\n    >\n      <div className=\"text-sm font-semibold text-primary\">{step.title}</div>\n      <div className=\"mt-1 text-sm leading-relaxed text-secondary\">{step.body}</div>\n      {step.action && <div className=\"mt-3\">{step.action}</div>}\n      <div className=\"mt-4 space-y-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            onClick={onSkip}\n            className=\"text-xs text-placeholder hover:text-secondary\"\n          >\n            {labels.skip}\n          </button>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap text-xs tabular-nums text-placeholder\">\n              {labels.step(index + 1, total)}\n            </span>\n            {!isFirst && (\n              <Button variant=\"secondary\" onClick={onBack} className=\"px-2.5 py-1 text-xs\">\n                {labels.back}\n              </Button>\n            )}\n            {/* On an awaitClick step the Next button is replaced by a hint on its\n                own row below, so it doesn't cram the counter + buttons and wrap.\n                Only when the target was actually FOUND, though — `rect` is null\n                when the finder gave up, and the click listener early-returns on\n                the same absence. Keyed on `step.target` alone this hid the only\n                way forward on any step whose anchor happens not to be rendered\n                for this user (a guest sees no \"add account\" button), leaving the\n                undocumented ArrowRight key as the sole escape. */}\n            {!((step.awaitClick || step.awaitInput) && step.target && rect) && (\n              <Button variant=\"brand\" onClick={onNext} className={cn(\"px-2.5 py-1 text-xs\")}>\n                {isLast ? labels.done : labels.next}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(step.awaitClick || step.awaitInput) && step.target && rect && (\n          <div className=\"text-center text-xs italic text-placeholder\">\n            {step.awaitInput && !step.awaitClick ? labels.awaitInputHint : labels.awaitClickHint}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/tour/tour.tsx"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { Button } from \"../components/button\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { sameRect } from \"../hooks/use-anchored-rect\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\nimport { DEFAULT_TOUR_LABELS } from \"./tour-labels\";\nimport type { TourInfo } from \"./tour-info\";\nimport { completeStored, rememberAccount, rememberMigrate, type UseTourProgressOptions } from \"./use-tour-progress\";\n\n/**\n * `start`/`end` follow the reading direction (`end` is the right side in LTR and the\n * left side in RTL) and are what a translated app wants. `left`/`right` stay physical\n * for the steps that genuinely mean a screen side.\n */\nexport type TourPlacement = \"top\" | \"right\" | \"bottom\" | \"left\" | \"start\" | \"end\" | \"center\";\n\nexport interface TourStep {\n  /** CSS selector for the element to spotlight. Omit for a centered step\n   *  (welcome/finish). If the target isn't found/visible, the step centers. */\n  target?: string;\n  title: string;\n  body: ReactNode;\n  /** Extra footer content, e.g. a \"load sample data\" shortcut. */\n  action?: ReactNode;\n  /** Spotlight padding around the target, px (default 8). */\n  padding?: number;\n  /** Where the card sits relative to the target. Omit for auto placement\n   *  (below → above → centered). \"center\" ignores the target and centers on\n   *  screen. \"start\"/\"end\" are the logical sides and flip in RTL; \"left\"/\"right\"\n   *  are physical. An explicit side flips to the opposite side if it would\n   *  overflow, then clamps into the viewport. */\n  placement?: TourPlacement;\n  /** Advance only when the user clicks the spotlighted target itself (not the\n   *  card's Next button). Requires `target`: the real control's own handler runs\n   *  first, then the tour steps forward on a microtask. The spotlight hole stays\n   *  click-through to the target; the rest of the page does not. */\n  awaitClick?: boolean;\n  /**\n   * The spotlighted control is for USING, not only for looking at (0.46, keksdose live\n   * #436): the layers it opens sit above the scrim and work. A plain step's overlay is\n   * `z-[60]`, over every kit layer, so a field whose number pad (`NumberPadSheet`), a\n   * select's menu or a popover opens at `z-50` opened UNDER the shields, where nothing\n   * could be tapped. Here the overlay drops to `z-[45]`: still over the top bar and the\n   * page (`z-40` and below, still dimmed and shielded), under every `z-50` layer the\n   * target opens — so an app's own layer wants `z-50` or more to clear it. Keys pressed\n   * in the target or in such a layer are theirs (Escape closes the pad, arrows walk a\n   * list); from the card the tour's keys work as on any step. The overlay is not\n   * `aria-modal` then, and carries `data-tour-interactive`.\n   *\n   * The card is in the same layer as the scrim, so an open pad or sheet may cover it\n   * until it closes. Requires `target`. A `HoverMenu` (`z-40`, the top bar's menus) stays\n   * under the scrim: point an `awaitClick` step at its trigger instead.\n   */\n  interactive?: boolean;\n  /**\n   * Advance once a value was ENTERED in the spotlighted control (0.46, keksdose live\n   * #436) — `awaitClick` for a field. Implies `interactive`. Counted when focus leaves\n   * the target (the number pad's Done, a Tab, a tap elsewhere), or Enter is pressed in\n   * it, and one of its fields (`input`, `textarea`, `select`: the target itself or\n   * inside it) then holds another value than when the step began; a native `change`\n   * (a select, a checkbox) counts at once. The card swaps Next for `awaitInputHint`,\n   * as for `awaitClick`. A picker whose value is not a field's (the kit's `Select`\n   * button) has nothing to compare: call `useTour().next()` from its `onChange`.\n   */\n  awaitInput?: boolean;\n  /** Runs before the step is shown — e.g. navigate to a route, open a panel.\n   *  May be async; the step waits for it, then locates the target. */\n  beforeStep?: () => void | Promise<void>;\n}\n\nexport interface TourLabels {\n  next: string;\n  back: string;\n  skip: string;\n  done: string;\n  /** Shown in place of the Next button on an `awaitClick` step. */\n  awaitClickHint: string;\n  /** Shown in place of the Next button on an `awaitInput` step (0.46). */\n  awaitInputHint: string;\n  /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n  step: (current: number, total: number) => string;\n}\n\n// Defined in ./tour-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_TOUR_LABELS };\n\ninterface StartOptions {\n  /** Stable id of the tour, surfaced as `activeId` so the app can mirror it to\n   *  the URL (deep-link / evaluation tracking) and record completion. Defaults to\n   *  `tour.id`. */\n  id?: string;\n  /** The tour being started, as the app lists it (docs/tours-harmonization.md §9.6.1).\n   *  When its last step is finished, the provider records the completion in its\n   *  `progress` and hands this to `onComplete`. */\n  tour?: TourInfo;\n  /** Start at this step index instead of 0 (clamped) — for URL/deep-link resume. */\n  startIndex?: number;\n  /** Fires synchronously when the tour starts (e.g. enable a mock interceptor). */\n  onStart?: () => void;\n  /** After the last step: runs after the provider's progress write and `onComplete`. */\n  onFinish?: () => void;\n  onSkip?: () => void;\n}\n\n/** What `TourProvider`'s `onComplete` learns besides the tour (§9.1, §9.6). */\nexport interface TourCompletion {\n  /**\n   * `true` when the completion counts anew (the first time, or the first time after the\n   * tour's update, §8): the moment for the app's points toast. `false` for a replay, and\n   * when the stored text is in an old shape no `migrate` reads: nothing is overwritten\n   * then, and the error goes to `console.error` (keksdose B-1). `undefined` when the provider has no `progress` or the start carried no `tour`, so\n   * nothing was recorded.\n   */\n  awarded: boolean | undefined;\n}\n\ninterface TourContextValue {\n  active: boolean;\n  /** Id of the running tour (from {@link StartOptions.id}), else null. */\n  activeId: string | null;\n  /** Start a tour with the given steps. */\n  start: (steps: TourStep[], opts?: StartOptions) => void;\n  /** End the current tour (no callbacks fire). */\n  stop: () => void;\n  /** Advance one step; past the last step it finishes the tour (fires onFinish). */\n  next: () => void;\n  /** Go back one step (no-op on the first). */\n  prev: () => void;\n  /** Jump to a step by index, clamped to range — e.g. for URL/deep-link resume. */\n  goToStep: (index: number) => void;\n  /** Current step (0-based; 0 while inactive). */\n  index: number;\n  /** Total steps (0 while inactive). */\n  total: number;\n}\n\nconst TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTour(): TourContextValue {\n  const ctx = useContext(TourContext);\n  if (!ctx) throw new Error(\"useTour must be used within <TourProvider>\");\n  return ctx;\n}\n\n/**\n * The tour engine if it is there, `null` if it is not — for a control that is a\n * DECORATION rather than a participant.\n *\n * {@link useTour}'s throw is correct and stays: a component that runs a tour cannot do\n * its job without the provider, and failing loudly is how that gets fixed. But the\n * throw's blast radius is whatever error boundary is above it, and for a launcher in\n * the app shell that is the whole app.\n *\n * Keksdose feedback dev#524 is what that costs: an `@hb/ui` module was edited while a\n * dev server was running, vite re-evaluated it, and the module's freshly created\n * context object was no longer the one the mounted provider was providing. React's\n * `useContext` then answers `null` for a provider that is, structurally, right there —\n * and the top bar's tour menu took the entire shell down with it. **Build-time module\n * graphs cannot produce that**, so it is a development-only failure; a menu that\n * disappears for a second is the proportionate response to it either way.\n *\n * Only for controls that can honestly render nothing. If a component would show a\n * broken half of itself without the tour, it wants {@link useTour}.\n */\nexport function useTourOptional(): TourContextValue | null {\n  return useContext(TourContext);\n}\n\n/** The kit's dev switch (as number-input's): a development build, never under vitest. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\n/**\n * Provides the guided-tour engine: a dimmed spotlight overlay + step card driven\n * by a list of {@link TourStep}s. Domain-free — the app supplies the steps (copy,\n * selectors, per-step navigation, placement) and the translated {@link TourLabels}.\n * Mount once inside the router; start a tour from anywhere via {@link useTour},\n * which also exposes step control (`next`/`prev`/`goToStep`) and the current\n * `index`/`total` for URL mirroring, `awaitClick` and deep-link resume.\n *\n * **Completion in one place** (docs/tours-harmonization.md §9.6): give the provider the\n * app's `progress` (the same `{storageKey, migrate}` as `useTourProgress`) and start each\n * tour with `start(steps, {tour})`. When the last step is finished the provider writes the\n * completion ONCE, through the store every `useTourProgress` reader of the key shares\n * (never a second copy), then calls `onComplete(tour, {awarded})`, then the start's own\n * `onFinish`. A skip or `stop()` records nothing and calls neither. The app removes its\n * own `complete()` from `onFinish`, or that second write answers `false`.\n *\n * Both props are optional: without `progress` or a `tour` on the start, `onComplete`\n * still fires, with `awarded: undefined` (and `tour` as given, possibly `undefined`). A\n * new `storageKey` (an account switch on a shared PC) is followed on the next\n * completion, without a remount.\n */\nexport function TourProvider({\n  children,\n  labels,\n  progress,\n  onComplete,\n}: {\n  children: ReactNode;\n  labels?: LabelOverride<TourLabels>;\n  /** The app's tour progress: the same options its `useTourProgress` readers use. */\n  progress?: UseTourProgressOptions;\n  /** A tour's last step was finished; see {@link TourCompletion}. */\n  onComplete?: (tour: TourInfo | undefined, completion: TourCompletion) => void;\n}) {\n  // `labels` over the provider's `tour` over English. Resolved once here and handed\n  // down: the step card is portalled, but context crosses portals anyway — this is\n  // simply the one place that already owned the merge.\n  const merged = useKitLabels(\"tour\", DEFAULT_TOUR_LABELS, labels);\n  const [steps, setSteps] = useState<TourStep[] | null>(null);\n  const [index, setIndex] = useState(0);\n  const [activeId, setActiveId] = useState<string | null>(null);\n  const optsRef = useRef<StartOptions>({});\n  // The latest props, read at the finish: a new `storageKey` or callback needs no remount.\n  const progressRef = useRef(progress);\n  const onCompleteRef = useRef(onComplete);\n  useLayoutEffect(() => {\n    progressRef.current = progress;\n    onCompleteRef.current = onComplete;\n  });\n  // The provider's migrate becomes the key's, for readers that pass none (keksdose B-2).\n  const storageKey = progress?.storageKey;\n  const migrate = progress?.migrate;\n  // 0.45: and its `account` (§10.3), so a finish on an account key is sent as readers' are.\n  const account = progress?.account;\n  useLayoutEffect(() => {\n    if (storageKey !== undefined) rememberMigrate(storageKey, migrate);\n    if (storageKey !== undefined) rememberAccount(storageKey, account);\n  }, [storageKey, migrate, account]);\n  const warnedNoTourRef = useRef(false);\n  // Live mirrors so the step-control callbacks can stay stable (identity-safe for\n  // consumers) while still reading the current steps/index. Synced in a layout\n  // effect — after the commit, before paint and before any passive effect or event\n  // can call them — rather than written during render.\n  const stepsRef = useRef<TourStep[] | null>(null);\n  const indexRef = useRef(0);\n  useLayoutEffect(() => {\n    stepsRef.current = steps;\n    indexRef.current = index;\n  }, [steps, index]);\n  const active = !!steps && steps.length > 0;\n  const total = steps?.length ?? 0;\n\n  const start = useCallback((s: TourStep[], opts?: StartOptions) => {\n    optsRef.current = opts ?? {};\n    optsRef.current.onStart?.();\n    setIndex(Math.min(Math.max(0, opts?.startIndex ?? 0), Math.max(0, s.length - 1)));\n    setActiveId(opts?.id ?? opts?.tour?.id ?? null);\n    setSteps(s);\n  }, []);\n  const stop = useCallback(() => {\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const finish = useCallback(() => {\n    // Once per tour: a second \"Done\" before the overlay unmounts records nothing more.\n    if (!stepsRef.current) return;\n    stepsRef.current = null;\n    const { tour, onFinish } = optsRef.current;\n    const store = progressRef.current;\n    // Exactly one write per completion (§9.6.2), so `awarded` is what `complete(tour)` answered.\n    let awarded: boolean | undefined;\n    if (store && tour) {\n      try {\n        awarded = completeStored(store.storageKey, store.migrate, tour);\n      } catch (error) {\n        // A stored text no migrate reads is left as it is (keksdose B-1); the tour still ends.\n        console.error(error);\n        awarded = false;\n      }\n    } else if (store && !tour && devWarnings() && !warnedNoTourRef.current) {\n      warnedNoTourRef.current = true;\n      console.warn(\n        \"[ui-kit] TourProvider has `progress`, but a finished tour's start carried no `tour`: \" +\n          \"nothing was recorded and `awarded` is undefined. Start it with `start(steps, { tour })`.\",\n      );\n    }\n    onCompleteRef.current?.(tour, { awarded });\n    onFinish?.();\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const skip = useCallback(() => {\n    optsRef.current.onSkip?.();\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n\n  const goToStep = useCallback((i: number) => {\n    const len = stepsRef.current?.length ?? 0;\n    if (len === 0) return;\n    setIndex(Math.min(Math.max(0, i), len - 1));\n  }, []);\n  const next = useCallback(() => {\n    const len = stepsRef.current?.length ?? 0;\n    if (len === 0) return;\n    if (indexRef.current >= len - 1) finish();\n    else setIndex(indexRef.current + 1);\n  }, [finish]);\n  const prev = useCallback(() => {\n    if (indexRef.current > 0) setIndex(indexRef.current - 1);\n  }, []);\n\n  return (\n    <TourContext.Provider value={{ active, activeId, start, stop, next, prev, goToStep, index, total }}>\n      {children}\n      {active && (\n        <TourOverlay\n          steps={steps!}\n          index={index}\n          labels={merged}\n          onNext={next}\n          onPrev={prev}\n          onSkip={skip}\n        />\n      )}\n    </TourContext.Provider>\n  );\n}\n\ninterface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nfunction isVisible(el: Element): boolean {\n  // A non-zero box already rules out display:none on the element or any ancestor\n  // (an unrendered element measures 0x0). We deliberately do NOT test\n  // offsetParent: it is null for position:fixed elements even when fully visible,\n  // which made the mobile bottom-nav bar (fixed) un-highlightable on mobile\n  // (feedback #313). visibility:hidden keeps a box, so check it explicitly.\n  const r = el.getBoundingClientRect();\n  if (r.width <= 0 || r.height <= 0) return false;\n  const style = getComputedStyle(el);\n  return style.visibility !== \"hidden\" && style.display !== \"none\";\n}\n\n// The first VISIBLE element matching the selector, not merely the first in DOM\n// order. This lets a step target the same control across layouts with one\n// combined selector — e.g. the desktop sidebar link AND the mobile bottom-bar\n// link — where the off-layout copy is present but `display:none` (feedback\n// #313). Returns null while none is visible so the finder keeps retrying.\nfunction queryVisibleTarget(selector: string): Element | null {\n  const els = document.querySelectorAll(selector);\n  for (const el of els) {\n    if (isVisible(el)) return el;\n  }\n  return null;\n}\n\nfunction rectOf(el: Element): Rect {\n  const r = el.getBoundingClientRect();\n  return { top: r.top, left: r.left, width: r.width, height: r.height };\n}\n\n/**\n * What the finder established for ONE step: where its target is (`null` = no target,\n * or not on the page), and the reading direction the card takes from it.\n *\n * It carries the step it was found for, and the overlay only believes it for that\n * step — which is the whole fix for keksdose's tours audit 2026-10-02, §1.0 A (\"stale\n * spotlight on the step after a spotlighted one\", 15 steps in 16 tours, desktop and\n * phone, mouse and keyboard). When step N spotlit a target and step N+1 had none (or\n * its anchor was missing), N+1 kept N's hole and parked its card beside it, so a\n * centred \"You're all set\" read as pointing at the Import & Export link; Back→Next kept\n * it for as long as anyone watched.\n *\n * The overlay used to hold `rect` and `ready` as separate states and reset them\n * DURING RENDER when the step changed. React 19 does not keep a render-phase update\n * while an earlier, lower-priority update to the same hook is still queued — it only\n * writes the result to the base state \"unless the queue is empty\" — and the follow\n * interval below queues exactly such an update every 250 ms (eagerly bailed out because\n * the rect had not moved, but left in the queue for rebasing). So the click's render\n * showed the reset, and the very next render (the finder saying \"ready\") re-based on\n * the old rect. A deep link was fine because nothing had queued anything yet.\n *\n * Keying the result to its step does not depend on any of that ordering: a rect found\n * for another step is not this step's rect, whatever the queue does with it, and a\n * missing anchor reads as \"no target\" instead of as the last thing that was lit.\n */\ninterface Located {\n  index: number;\n  step: TourStep;\n  rect: Rect | null;\n  dir: Direction;\n}\n\nfunction TourOverlay({\n  steps,\n  index,\n  labels,\n  onNext,\n  onPrev,\n  onSkip,\n}: {\n  steps: TourStep[];\n  index: number;\n  labels: TourLabels;\n  onNext: () => void;\n  onPrev: () => void;\n  onSkip: () => void;\n}) {\n  const step = steps[index];\n  const isFirst = index === 0;\n  const isLast = index === steps.length - 1;\n  // A new step starts unlocated: whatever was found for another step (see `Located`)\n  // is ignored, so the overlay renders nothing until the effect below has located THIS\n  // step, and never the previous step's spotlight.\n  const [located, setLocated] = useState<Located | null>(null);\n  const current = located !== null && located.index === index && located.step === step ? located : null;\n  const ready = current !== null;\n  const rect = current?.rect ?? null;\n  // The overlay is portalled to <body>, out of whatever `dir` subtree the app set, so it\n  // takes the direction of the element it spotlights (the document's for a centered\n  // step). Arrow keys and start/end placement read it.\n  const dir: Direction = current?.dir ?? \"ltr\";\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  // Run beforeStep, then locate the target (retrying across route/render lag).\n  useEffect(() => {\n    let cancelled = false;\n    let raf = 0;\n    // `null` = untargeted, or the finder gave up → the card centres, with no hole.\n    const settle = (el: Element | null) =>\n      setLocated({ index, step, rect: el ? rectOf(el) : null, dir: dirOf(el) });\n    void (async () => {\n      await step.beforeStep?.();\n      if (cancelled) return;\n      if (!step.target) {\n        settle(null);\n        return;\n      }\n      let tries = 0;\n      const find = () => {\n        if (cancelled) return;\n        const el = queryVisibleTarget(step.target!);\n        if (el) {\n          el.scrollIntoView({ block: \"center\", behavior: \"smooth\" });\n          settle(el);\n          return;\n        }\n        if (tries++ < 45) raf = requestAnimationFrame(find);\n        else settle(null); // give up → render centered\n      };\n      find();\n    })();\n    return () => {\n      cancelled = true;\n      cancelAnimationFrame(raf);\n    };\n  }, [index, step]);\n\n  // Follow the target as the page scrolls / reflows — only once THIS step is located,\n  // and only into this step's result.\n  useEffect(() => {\n    if (!step.target) return;\n    const update = () => {\n      const el = queryVisibleTarget(step.target!);\n      if (el) {\n        const next = rectOf(el);\n        setLocated((prev) =>\n          prev && prev.index === index && prev.step === step && !sameRect(prev.rect, next)\n            ? { ...prev, rect: next }\n            : prev,\n        );\n      }\n    };\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n    const id = window.setInterval(update, 250);\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n      clearInterval(id);\n    };\n  }, [index, step]);\n\n  // awaitClick: advance when the *real* target is clicked. The spotlight hole is\n  // click-through (see the shields in the render below) so the element's own\n  // handler runs first; we step forward on the next macrotask.\n  //\n  // Re-armed when the target turns up after the finder gave up (the follow effect\n  // lights it late): the card swaps Next for the \"click the highlighted element\" hint\n  // as soon as there is a rect, so the click must work from that moment too.\n  const spotted = rect !== null;\n  useEffect(() => {\n    if (!ready || !spotted || !step.awaitClick || !step.target) return;\n    const el = queryVisibleTarget(step.target);\n    if (!el) return;\n    const onClick = () => window.setTimeout(() => onNext(), 0);\n    el.addEventListener(\"click\", onClick, { once: true });\n    return () => el.removeEventListener(\"click\", onClick);\n  }, [ready, spotted, index, step, onNext]);\n\n  // An interactive step (see `TourStep.interactive`): only while the target is lit — a\n  // step whose target is missing centres its card over a full scrim, modal as ever.\n  const interactive = spotted && !!step.target && !!(step.interactive || step.awaitInput);\n\n  // awaitInput: advance once the target's fields hold another value than when the step\n  // was armed, checked when focus leaves the target or Enter is pressed in it — on the\n  // next macrotask, after the field's own blur/Enter commit has rendered. A value the\n  // number pad typed fires no native `change`, so comparing is what catches it.\n  useEffect(() => {\n    if (!ready || !spotted || !step.awaitInput || !step.target) return;\n    const el = queryVisibleTarget(step.target) as HTMLElement | null;\n    if (!el) return;\n    const read = () => fieldValues(el);\n    const before = read();\n    let timer = 0;\n    let done = false;\n    const check = () => {\n      window.clearTimeout(timer);\n      timer = window.setTimeout(() => {\n        if (done || read() === before) return;\n        done = true;\n        onNext();\n      }, 0);\n    };\n    const onFocusOut = (e: FocusEvent) => {\n      if (e.relatedTarget instanceof Node && el.contains(e.relatedTarget)) return;\n      check();\n    };\n    const onKeyDown = (e: KeyboardEvent) => {\n      if (e.key === \"Enter\") check();\n    };\n    el.addEventListener(\"focusout\", onFocusOut);\n    el.addEventListener(\"keydown\", onKeyDown);\n    el.addEventListener(\"change\", check);\n    return () => {\n      window.clearTimeout(timer);\n      el.removeEventListener(\"focusout\", onFocusOut);\n      el.removeEventListener(\"keydown\", onKeyDown);\n      el.removeEventListener(\"change\", check);\n    };\n  }, [ready, spotted, index, step, onNext]);\n\n  // Keyboard: Esc skips, Enter and the reading-direction arrow advance (→ in LTR,\n  // ← in RTL), the other arrow goes back. On awaitClick steps Enter is ignored (it\n  // would fire the target's click AND advance) — the forward arrow stays as an escape\n  // hatch.\n  //\n  // Enter on a focused control belongs to that control. This used to advance from\n  // anywhere, so Enter on a focused Skip or Back ran the button's own click AND stepped\n  // forward: Back moved nowhere, Skip skipped and then called `next` on a dead tour.\n  // The same goes for arrows in a text field a step's `action` might contain.\n  useEffect(() => {\n    const onKey = (e: KeyboardEvent) => {\n      // On an interactive step a key pressed in the target, or in a layer it opened (the\n      // number pad's Escape, a menu's arrows), is the page's. The card's and the bare\n      // page's (focus on <body>) stay the tour's.\n      if (interactive && e.target instanceof Node && e.target !== document.body && !rootRef.current?.contains(e.target)) {\n        return;\n      }\n      if (e.key === \"Escape\") {\n        onSkip();\n        return;\n      }\n      if (e.key === \"Enter\") {\n        if (step.awaitClick || step.awaitInput || ownsKey(e.target, \"Enter\")) return;\n        e.preventDefault();\n        onNext();\n        return;\n      }\n      if (ownsKey(e.target, e.key)) return;\n      // The overlay root carries `dir`; before it paints, the document's answers.\n      const delta = horizontalStep(e.key, rootRef.current);\n      if (delta === 1) {\n        e.preventDefault();\n        onNext();\n      } else if (delta === -1) {\n        if (!isFirst) onPrev();\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [isFirst, step, interactive, onNext, onPrev, onSkip]);\n\n  if (!ready) return null;\n\n  const pad = step.padding ?? 8;\n  const spot: Rect | null = rect\n    ? { top: rect.top - pad, left: rect.left - pad, width: rect.width + pad * 2, height: rect.height + pad * 2 }\n    : null;\n\n  // `aria-modal` promises the page behind is out of reach, and the card's focus trap\n  // keeps that promise for the keyboard. The pointer used to get no such treatment: the\n  // root is `pointer-events-none` so that the spotlight hole can stay live for\n  // `awaitClick`, and the scrim is a box-shadow, which takes no clicks — so every\n  // control on the dimmed page stayed clickable. Four shields now tile the viewport\n  // around the hole: the page is blocked, the card and the spotlighted target are not.\n  // Keeping `aria-modal` (rather than dropping it) is the coherent half: the tour\n  // really is modal — focus is trapped and Esc/Skip is the way out.\n  return createPortal(\n    <div\n      ref={rootRef}\n      // z-[45] on an interactive step: over the top bar (z-40), under the z-50 layers the\n      // target opens. See `TourStep.interactive`.\n      className={cn(\"pointer-events-none fixed inset-0\", interactive ? \"z-[45]\" : \"z-[60]\")}\n      role=\"dialog\"\n      aria-modal={interactive ? undefined : \"true\"}\n      // A stable marker for the overlay, on every step (0.48, keksdose dev#611–613): an\n      // app that hides its floating help launcher while a modal is open excepts the\n      // tour, which may spotlight that launcher — `[aria-modal=\"true\"]:not([data-tour-overlay])`.\n      // keksdose matched the `pointer-events-none` class until now, which is the kit's to change.\n      data-tour-overlay=\"\"\n      data-tour-interactive={interactive ? \"\" : undefined}\n      aria-label={step.title}\n      dir={dir}\n    >\n      {spot && <SpotlightShields spot={spot} />}\n      {spot ? (\n        <div\n          className=\"pointer-events-none fixed rounded-lg transition-all duration-200 ease-out\"\n          style={{\n            top: spot.top,\n            left: spot.left,\n            width: spot.width,\n            height: spot.height,\n            // A two-tone frame, not a single translucent ring.\n            //\n            // The old treatment was `ring-2 ring-white/80` over a 55% scrim, and it\n            // \"was barely visible\" on the app's blue-tinted surfaces. Two reasons,\n            // and a single ring can't fix either: at 55% the surround stays bright\n            // enough that the un-dimmed hole barely reads AS a hole, and a 80%-white\n            // ring sitting on the edge of a light card is white-on-near-white.\n            //\n            // So: an opaque white band immediately around the target, a dark keyline\n            // outside it, then the scrim. Whatever the target's own colour is, one of\n            // the two bands is always in contrast with it and the other is always in\n            // contrast with the dimmed surround — there is no background that can\n            // swallow both. The blurred layer between them softens the step so the\n            // frame reads as lighting rather than as a pasted-on rectangle.\n            boxShadow: [\n              \"0 0 0 3px rgba(255,255,255,0.98)\",\n              \"0 0 0 5px rgba(15,23,42,0.92)\",\n              \"0 0 18px 6px rgba(15,23,42,0.45)\",\n              \"0 0 0 9999px rgba(15,23,42,0.70)\",\n            ].join(\", \"),\n          }}\n        />\n      ) : (\n        <div className=\"pointer-events-auto fixed inset-0 bg-black/70\" />\n      )}\n      <TourCard\n        step={step}\n        index={index}\n        total={steps.length}\n        labels={labels}\n        isFirst={isFirst}\n        isLast={isLast}\n        rect={spot}\n        dir={dir}\n        onBack={onPrev}\n        onNext={onNext}\n        onSkip={onSkip}\n      />\n    </div>,\n    document.body,\n  );\n}\n\n/** The values of the fields at or inside `el`, as one string to compare (`awaitInput`). */\nfunction fieldValues(el: Element): string {\n  const fields = el.matches(\"input,textarea,select\") ? [el] : Array.from(el.querySelectorAll(\"input,textarea,select\"));\n  return fields\n    .map((f) =>\n      f instanceof HTMLInputElement && (f.type === \"checkbox\" || f.type === \"radio\")\n        ? String(f.checked)\n        : (f as HTMLInputElement).value,\n    )\n    .join(\"\\u0000\");\n}\n\n/** Does the focused element handle `key` itself? Enter on a button or link, and any\n *  editing key in a text field or select, is the control's — not the tour's. */\nfunction ownsKey(target: EventTarget | null, key: string): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  if (target.isContentEditable) return true;\n  const tag = target.tagName;\n  if (tag === \"TEXTAREA\" || tag === \"SELECT\") return true;\n  if (tag === \"INPUT\") {\n    const type = (target as HTMLInputElement).type;\n    // Enter on a checkbox does nothing natively, but ←/→ on a radio moves it.\n    return key !== \"Enter\" || type !== \"checkbox\";\n  }\n  if (key !== \"Enter\") return false;\n  return (\n    tag === \"BUTTON\" ||\n    (tag === \"A\" && target.hasAttribute(\"href\")) ||\n    target.getAttribute(\"role\") === \"button\" ||\n    target.getAttribute(\"role\") === \"link\"\n  );\n}\n\n/**\n * Transparent pointer blockers tiling the viewport around the spotlight hole: one\n * full-width band above and below, one on each side at the hole's own height. The hole\n * itself stays uncovered, so the target keeps its clicks.\n */\nfunction SpotlightShields({ spot }: { spot: Rect }) {\n  const shield = \"pointer-events-auto fixed\";\n  const bottom = spot.top + spot.height;\n  return (\n    <>\n      <div data-tour-shield=\"\" className={shield} style={{ top: 0, left: 0, right: 0, height: Math.max(0, spot.top) }} />\n      <div data-tour-shield=\"\" className={shield} style={{ top: bottom, left: 0, right: 0, bottom: 0 }} />\n      <div\n        data-tour-shield=\"\"\n        className={shield}\n        style={{ top: spot.top, left: 0, width: Math.max(0, spot.left), height: spot.height }}\n      />\n      <div\n        data-tour-shield=\"\"\n        className={shield}\n        style={{ top: spot.top, left: spot.left + spot.width, right: 0, height: spot.height }}\n      />\n    </>\n  );\n}\n\n/**\n * Card position (viewport px) for the given placement relative to the padded\n * spotlight `rect`. Omitted placement keeps the original auto behavior\n * (below → above → vertically centered); an explicit side flips to its opposite\n * if it would overflow, then clamps into the viewport. \"center\" (or no rect)\n * centers on screen.\n */\nfunction placeCard(\n  rect: Rect | null,\n  cw: number,\n  ch: number,\n  vw: number,\n  vh: number,\n  m: number,\n  placement?: TourPlacement,\n  dir: Direction = \"ltr\",\n): { top: number; left: number } {\n  // The logical sides resolve to a physical one here, and only here.\n  if (placement === \"start\") placement = dir === \"rtl\" ? \"right\" : \"left\";\n  else if (placement === \"end\") placement = dir === \"rtl\" ? \"left\" : \"right\";\n  if (!rect || placement === \"center\") {\n    return { top: Math.max(m, (vh - ch) / 2), left: Math.max(m, (vw - cw) / 2) };\n  }\n  const clampX = (x: number) => Math.min(Math.max(m, x), Math.max(m, vw - cw - m));\n  const clampY = (y: number) => Math.min(Math.max(m, y), Math.max(m, vh - ch - m));\n  const centerX = clampX(rect.left + rect.width / 2 - cw / 2);\n  const centerY = clampY(rect.top + rect.height / 2 - ch / 2);\n  const belowTop = rect.top + rect.height + m;\n  const aboveTop = rect.top - ch - m;\n  const rightLeft = rect.left + rect.width + m;\n  const leftLeft = rect.left - cw - m;\n  const fitsBelow = belowTop + ch <= vh;\n  const fitsAbove = aboveTop >= 0;\n  const fitsRight = rightLeft + cw <= vw;\n  const fitsLeft = leftLeft >= 0;\n\n  switch (placement) {\n    case \"top\":\n      return { top: fitsAbove ? aboveTop : fitsBelow ? belowTop : clampY(aboveTop), left: centerX };\n    case \"bottom\":\n      return { top: fitsBelow ? belowTop : fitsAbove ? aboveTop : clampY(belowTop), left: centerX };\n    case \"right\":\n      return { top: centerY, left: fitsRight ? rightLeft : fitsLeft ? leftLeft : clampX(rightLeft) };\n    case \"left\":\n      return { top: centerY, left: fitsLeft ? leftLeft : fitsRight ? rightLeft : clampX(leftLeft) };\n    default:\n      if (fitsBelow) return { top: belowTop, left: centerX };\n      if (fitsAbove) return { top: aboveTop, left: centerX };\n      return { top: Math.max(m, (vh - ch) / 2), left: centerX };\n  }\n}\n\nfunction TourCard({\n  step,\n  index,\n  total,\n  labels,\n  isFirst,\n  isLast,\n  rect,\n  dir,\n  onBack,\n  onNext,\n  onSkip,\n}: {\n  step: TourStep;\n  index: number;\n  total: number;\n  labels: TourLabels;\n  isFirst: boolean;\n  isLast: boolean;\n  rect: Rect | null;\n  dir: Direction;\n  onBack: () => void;\n  onNext: () => void;\n  onSkip: () => void;\n}) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [style, setStyle] = useState<CSSProperties>({ opacity: 0 });\n\n  /**\n   * The card holds the focus, because the card is what the tour IS.\n   *\n   * The overlay above declares `role=\"dialog\" aria-modal=\"true\"` — it always has — and\n   * then left focus wherever the page had put it. For a tour that is the most pointed\n   * version of the audit's *\"Only Modal manages focus\"*: the whole component exists to\n   * say \"look here\", and for a keyboard user \"here\" is the focus ring. They were told\n   * the page was hidden, given no way to reach the Next button without Tabbing through\n   * it, and left on a control the screen reader would no longer describe.\n   *\n   * It re-engages on every step, without any bookkeeping here, because `TourOverlay`\n   * returns null while it re-locates the next target: the card genuinely unmounts and\n   * remounts between steps. That is what keeps focus honest when the BUTTONS change —\n   * \"Back\" does not exist on the first step, so stepping back onto it destroys the\n   * control the press came from, and focus would otherwise fall to `<body>`, outside\n   * this trap's own listener, where Tab walks straight into the page the overlay claims\n   * to have hidden.\n   *\n   * **The cost, written down:** on an `awaitClick` step the user is asked to click the\n   * spotlighted element, and they can no longer Tab to it. ArrowRight still advances\n   * (the key handler in `TourOverlay` is on the document and does not care where focus\n   * is), which is the escape hatch that step already documents for the case where the\n   * target cannot be found. Containment is worth that: an `awaitClick` step is a\n   * minority of steps, while focus stranded behind `aria-modal` is every step.\n   */\n  useFocusTrap(ref, { active: true });\n\n  useLayoutEffect(() => {\n    const card = ref.current;\n    if (!card) return;\n    setStyle(\n      placeCard(rect, card.offsetWidth, card.offsetHeight, window.innerWidth, window.innerHeight, 12, step.placement, dir),\n    );\n  }, [rect, index, step.placement, dir]);\n\n  return (\n    <div\n      ref={ref}\n      // Focusable but not tabbable: the trap above focuses the card itself rather than\n      // its first button, so a screen reader reads the step's title and body before it\n      // reads \"Next\" — and without this the container cannot take focus at all and the\n      // trap silently does nothing.\n      tabIndex={-1}\n      style={style}\n      className=\"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\"\n    >\n      <div className=\"text-sm font-semibold text-primary\">{step.title}</div>\n      <div className=\"mt-1 text-sm leading-relaxed text-secondary\">{step.body}</div>\n      {step.action && <div className=\"mt-3\">{step.action}</div>}\n      <div className=\"mt-4 space-y-2\">\n        <div className=\"flex items-center justify-between gap-2\">\n          <button\n            type=\"button\"\n            onClick={onSkip}\n            className=\"text-xs text-placeholder hover:text-secondary\"\n          >\n            {labels.skip}\n          </button>\n          <div className=\"flex items-center gap-2\">\n            <span className=\"whitespace-nowrap text-xs tabular-nums text-placeholder\">\n              {labels.step(index + 1, total)}\n            </span>\n            {!isFirst && (\n              <Button variant=\"secondary\" onClick={onBack} className=\"px-2.5 py-1 text-xs\">\n                {labels.back}\n              </Button>\n            )}\n            {/* On an awaitClick step the Next button is replaced by a hint on its\n                own row below, so it doesn't cram the counter + buttons and wrap.\n                Only when the target was actually FOUND, though — `rect` is null\n                when the finder gave up, and the click listener early-returns on\n                the same absence. Keyed on `step.target` alone this hid the only\n                way forward on any step whose anchor happens not to be rendered\n                for this user (a guest sees no \"add account\" button), leaving the\n                undocumented ArrowRight key as the sole escape. */}\n            {!((step.awaitClick || step.awaitInput) && step.target && rect) && (\n              <Button variant=\"accent\" onClick={onNext} className={cn(\"px-2.5 py-1 text-xs\")}>\n                {isLast ? labels.done : labels.next}\n              </Button>\n            )}\n          </div>\n        </div>\n        {(step.awaitClick || step.awaitInput) && step.target && rect && (\n          <div className=\"text-center text-xs italic text-placeholder\">\n            {step.awaitInput && !step.awaitClick ? labels.awaitInputHint : labels.awaitClickHint}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/wizard/stepper-nav.d.ts

@@ -33,7 +33,7 @@ export declare function StepperNav<TData extends Record<string, unknown>>({ wiza
     className?: string;
     labels?: LabelOverride<WizardLabels>;
     /** The Finish button's variant — `"danger"` for a destructive commit (an import
-     *  that replaces what is there). Default `"brand"`. Next keeps `"brand"`. */
+     *  that replaces what is there). Default `"accent"`. Next keeps `"accent"`. */
     finishVariant?: ButtonVariant;
     /** Disable Finish for a reason of the app's own, on top of the kit's gates
      *  (`canFinish`, submitting, validating). */

package/dist/wizard/stepper-nav.js

@@ -17,7 +17,7 @@ function StepperNav({
   description,
   className,
   labels,
-  finishVariant = "brand",
+  finishVariant = "accent",
   finishDisabled = false,
   finishCommit,
   finishDisabledReason,
@@ -68,12 +68,12 @@ function StepperNav({
     );
     forwardButton = renderFinish ? renderFinish(finishButton) : finishButton;
   } else if (wizard.isLastStep) {
-    forwardButton = wizard.canDone ? /* @__PURE__ */ jsx(Button, { variant: "brand", "data-tour": "wizard-done", onClick: wizard.done, disabled: doneDisabled, children: stepNextLabel ?? l.done ?? DEFAULT_WIZARD_LABELS.done }) : null;
+    forwardButton = wizard.canDone ? /* @__PURE__ */ jsx(Button, { variant: "accent", "data-tour": "wizard-done", onClick: wizard.done, disabled: doneDisabled, children: stepNextLabel ?? l.done ?? DEFAULT_WIZARD_LABELS.done }) : null;
   } else {
     forwardButton = /* @__PURE__ */ jsxs(
       Button,
       {
-        variant: "brand",
+        variant: "accent",
         "data-tour": "wizard-next",
         onClick: wizard.goNext,
         disabled: wizard.nextBlocked || pending,

package/dist/wizard/stepper-nav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/wizard/stepper-nav.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/button\";\nimport { Spinner } from \"../components/spinner\";\nimport type { ButtonVariant } from \"../components/button-look\";\nimport { Modal } from \"../components/modal\";\nimport { alertFrameClass } from \"../components/alert-banner\";\nimport { WizardContextProvider } from \"./wizard-context\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport type { UseWizardReturn, WizardLabels } from \"./types\";\nimport type { CommitScope } from \"../components/write-lock\";\n\n/**\n * The chrome around a wizard: the step indicator, the step content, and the\n * Cancel / Back / Skip / Next / Finish bar — plus the cancel-confirmation\n * dialog, because \"are you sure you want to lose this\" is part of the wizard's\n * contract rather than something each app should re-decide.\n *\n * It is a component and not a set of parts for one reason: which button shows,\n * and whether it is enabled, is a function of `wizard` state that was getting\n * re-derived (and re-derived slightly differently) at every call site. Finish is\n * gated on `canFinish`, Next and Skip on `nextBlocked`, and Skip only appears on\n * an `optional` step that is not the last — that policy lives here now.\n *\n * The `<StepperNav>` is also what publishes {@link WizardContextProvider}, which\n * is how a mounted step registers its own validator. A step's\n * `useRhfWizardStep` / `useWizardStepValidate` therefore only works inside one.\n *\n * Which buttons show is read off `wizard` (`canCancel`, `canGoBack`, `canDone`,\n * `isCommitStep`), so the policy options — `cancellable`, `onExit`, `commits`,\n * `onDone` — are all set on `useWizard`. What is set HERE is how the Finish button\n * looks and what wraps it, because that is presentation and usually depends on\n * state the app holds (a \"replace everything\" toggle, a write lock — `finishCommit`).\n */\nexport function StepperNav<TData extends Record<string, unknown>>({\n  wizard,\n  children,\n  title,\n  description,\n  className,\n  labels,\n  finishVariant = \"brand\",\n  finishDisabled = false,\n  finishCommit,\n  finishDisabledReason,\n  doneDisabled = false,\n  renderFinish,\n}: {\n  wizard: UseWizardReturn<TData>;\n  children: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  className?: string;\n  labels?: LabelOverride<WizardLabels>;\n  /** The Finish button's variant — `\"danger\"` for a destructive commit (an import\n   *  that replaces what is there). Default `\"brand\"`. Next keeps `\"brand\"`. */\n  finishVariant?: ButtonVariant;\n  /** Disable Finish for a reason of the app's own, on top of the kit's gates\n   *  (`canFinish`, submitting, validating). */\n  finishDisabled?: boolean;\n  /**\n   * Finish COMMITS — {@link Button}'s `commit`, handed to the Finish button. Under a\n   * locked {@link WriteLockProvider} it is `aria-disabled` but focusable, with the lock's\n   * reason in the kit Tooltip, and a click (or Enter) does not run `wizard.finish`.\n   * Every other button of the bar stays live: the steps before the commit write nothing,\n   * so the whole wizard can still be walked through on a read-only page.\n   *\n   * keksdose G1: its YNAB import runs the mapping wizard on the read-only demo (dev#497)\n   * and locks only the confirm step's Finish — by cloning `commit` into the element\n   * `renderFinish` hands it, because StepperNav took no `commit` of its own. That clone\n   * still works; this is the same thing without one. Named `finishCommit` beside\n   * `finishVariant` / `finishDisabled` rather than a bare `commit`, which on a component\n   * with five buttons would not say which one saves — and would read like `useWizard`'s\n   * `commits`, which is a step's policy, not a lock.\n   */\n  finishCommit?: CommitScope;\n  /**\n   * Why Finish is not available — {@link Button}'s `disabledReason` on the Finish button:\n   * `aria-disabled` and focusable, the reason in the kit Tooltip and on the button's\n   * `aria-describedby`, `wizard.finish` not run. The explained form of `finishDisabled`\n   * (a native `disabled` takes the button out of the tab order, so its reason never\n   * reaches a keyboard). Under a lock with `finishCommit`, the lock's reason wins.\n   */\n  finishDisabledReason?: ReactNode;\n  /**\n   * Disable Done — the button of the last step after a commit — while the step still\n   * has work of its own running. keksdose's YNAB import ends on a recurring step whose\n   * convert loop writes one rule at a time (ynab-import-panel.tsx): leaving mid-loop\n   * abandons the rest. Until now the panel dropped `onDone` for the duration, which\n   * takes the button away instead of saying \"not yet\": disabled, it stays where the\n   * eye left it and comes back to life when the loop ends.\n   */\n  doneDisabled?: boolean;\n  /**\n   * Wrap the Finish button: receives the kit's button element — already labelled,\n   * gated and wired to `wizard.finish` — and returns what to render in its place.\n   *\n   * ```tsx\n   * renderFinish={(button) => <SaveGuard lock={lock}>{button}</SaveGuard>}\n   * ```\n   *\n   * A wrapper and not a replacement (`finishButton: (props) => …`) or a hook\n   * (`onBeforeFinish`): the app's need is to put something AROUND the commit — a\n   * write-lock tooltip, which has to sit on a wrapping element because a disabled\n   * button receives no pointer events — while the kit keeps owning what the button\n   * says and when it is enabled. A replacement would hand every app the gating to\n   * re-derive (the problem this component exists to end); `onBeforeFinish` can veto\n   * a click but cannot explain a disabled button. The element is a plain `<Button>`,\n   * so a wrapper that clones it with `disabled` works as expected.\n   *\n   * For the write lock itself there is no need to wrap any more: `finishCommit` (and\n   * `finishDisabledReason`) put the kit Button's own Tooltip on Finish. An element\n   * cloned with `commit` here keeps working the same way.\n   */\n  renderFinish?: (button: ReactElement) => ReactNode;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n  const cancelTitleId = useId();\n\n  // The step area never shrinks below the tallest step shown so far, so the button\n  // bar does not jump up and down as Next and Back move between a long step and a\n  // short one. This replaces a fixed `min-h-[300px]` (carried over from Kastlan,\n  // whose steps are all long forms), which did the same for steps under 300px but\n  // left a short wizard — two fields a step — with a ~200px hole above its buttons.\n  // Measured rather than guessed: the floor is whatever the app's own steps need.\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [contentFloor, setContentFloor] = useState(0);\n  useLayoutEffect(() => {\n    const el = contentRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const h = el.offsetHeight;\n      setContentFloor((floor) => (h > floor ? h : floor));\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      registerStepValidate: wizard.registerStepValidate,\n      setNextBlocked: wizard.setNextBlocked,\n    }),\n    [wizard.registerStepValidate, wizard.setNextBlocked],\n  );\n\n  // Finish is only valid once every step before the last has been completed or\n  // skipped (derived once in useWizard). Prevents a restored last-step index\n  // (empty data after a reload) from firing an empty submit.\n  const canFinish = wizard.canFinish;\n\n  // Pending while the step's validators run (an async server check): a spinner and\n  // `aria-busy`, and disabled — the hook's own re-entry guard still refuses a second\n  // press, this just stops it looking like the first one did nothing.\n  const pending = wizard.isValidating;\n  const stepNextLabel = wizard.currentStep.nextLabel;\n\n  // Every branch below assigns it; no initial value to overwrite.\n  let forwardButton: ReactNode;\n  if (wizard.isCommitStep) {\n    const finishButton = (\n      <Button\n        variant={finishVariant}\n        data-tour=\"wizard-finish\"\n        onClick={wizard.finish}\n        // The kit Button's lock: a reason (its own or, with `commit`, the provider's)\n        // wins over `disabled` and keeps the button reachable, saying why.\n        commit={finishCommit}\n        disabledReason={finishDisabledReason}\n        disabled={wizard.isSubmitting || pending || !canFinish || finishDisabled}\n        aria-busy={wizard.isSubmitting || pending || undefined}\n      >\n        {/* Decorative: the button's text is what a reader hears. */}\n        {pending && <Spinner label={null} className=\"size-4\" />}\n        {wizard.isSubmitting ? l.submitting : (stepNextLabel ?? l.finish)}\n      </Button>\n    );\n    forwardButton = renderFinish ? renderFinish(finishButton) : finishButton;\n  } else if (wizard.isLastStep) {\n    // The last step after a commit. Nothing to finish; Done only when the app gave\n    // an `onDone` — otherwise the step carries its own way out.\n    forwardButton = wizard.canDone ? (\n      <Button variant=\"brand\" data-tour=\"wizard-done\" onClick={wizard.done} disabled={doneDisabled}>\n        {stepNextLabel ?? l.done ?? DEFAULT_WIZARD_LABELS.done}\n      </Button>\n    ) : null;\n  } else {\n    forwardButton = (\n      <Button\n        variant=\"brand\"\n        data-tour=\"wizard-next\"\n        onClick={wizard.goNext}\n        disabled={wizard.nextBlocked || pending}\n        aria-busy={pending || undefined}\n      >\n        {pending && <Spinner label={null} className=\"size-4\" />}\n        {stepNextLabel ?? l.next}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {(title || description) && (\n        <div>\n          {title && (\n            <h1 className=\"text-2xl font-bold tracking-tight text-primary\">\n              {title}\n            </h1>\n          )}\n          {description && (\n            <p className=\"mt-1 text-sm text-muted\">{description}</p>\n          )}\n        </div>\n      )}\n\n      {/* Step indicator */}\n      <nav aria-label={l.steps}>\n        <ol className=\"flex w-full items-center\">\n          {wizard.steps.map((step, index) => {\n            const status = wizard.stepStatus(index);\n            const isLast = index === wizard.steps.length - 1;\n\n            return (\n              <li key={step.id} className={cn(\"flex items-center\", !isLast && \"flex-1\")}>\n                <button\n                  type=\"button\"\n                  onClick={() => wizard.goToStep(index)}\n                  // `canGoToStep` adds the commit lock: once past a committing step,\n                  // the steps up to it are done with and cannot be reopened.\n                  disabled={status === \"upcoming\" || !wizard.canGoToStep(index)}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  className={cn(\n                    \"group flex flex-col items-center gap-1.5\",\n                    status === \"upcoming\" ? \"cursor-default\" : \"cursor-pointer\",\n                  )}\n                >\n                  {/* Circle */}\n                  <span\n                    className={cn(\n                      \"flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors\",\n                      status === \"completed\" &&\n                        \"border-brand bg-brand text-brand-contrast\",\n                      status === \"active\" &&\n                        \"border-brand bg-surface text-brand\",\n                      status === \"upcoming\" &&\n                        \"border-subtle bg-surface text-placeholder\",\n                      status === \"skipped\" &&\n                        \"border-subtle bg-surface-2 text-muted\",\n                    )}\n                  >\n                    {status === \"completed\" ? <Check className=\"size-4\" /> : index + 1}\n                  </span>\n                  {/* Label — hidden on mobile, where the line below carries it */}\n                  <span\n                    className={cn(\n                      \"hidden text-xs font-medium md:block\",\n                      status === \"active\" || status === \"completed\"\n                        ? \"text-primary\"\n                        : \"text-muted\",\n                    )}\n                  >\n                    {step.label}\n                  </span>\n                </button>\n\n                {/* Connector line */}\n                {!isLast && (\n                  <div\n                    className={cn(\n                      \"mx-2 h-0.5 flex-1\",\n                      status === \"completed\" ? \"bg-brand\" : \"bg-[var(--border)]\",\n                    )}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </ol>\n        {/* Mobile: the labels above are hidden, so name the current step here */}\n        <p className=\"mt-2 text-center text-sm font-medium text-primary md:hidden\">\n          {l.step(wizard.currentStepIndex + 1, wizard.steps.length)}\n          {\" — \"}\n          {wizard.currentStep.label}\n        </p>\n      </nav>\n\n      {/* Step content */}\n      <WizardContextProvider value={contextValue}>\n        <div style={contentFloor > 0 ? { minHeight: contentFloor } : undefined}>\n          <div ref={contentRef}>{children}</div>\n        </div>\n      </WizardContextProvider>\n\n      {/* Submit error */}\n      {wizard.error && (\n        <div\n          role=\"alert\"\n          className={cn(\n            \"text-sm text-danger\",\n            alertFrameClass(\"danger\"),\n          )}\n        >\n          {wizard.error}\n        </div>\n      )}\n\n      {/* Navigation bar */}\n      <div className=\"flex items-center justify-between border-t border-subtle pt-4\">\n        {/* The empty span keeps the right-hand group on the right when Cancel is off. */}\n        {wizard.canCancel ? (\n          <Button variant=\"secondary\" onClick={wizard.cancel}>\n            {l.cancel}\n          </Button>\n        ) : (\n          <span />\n        )}\n        <div className=\"flex items-center gap-2\">\n          {wizard.canGoBack && (\n            // Disabled, not hidden, while the commit runs: it comes back if the commit\n            // fails, and a button that vanishes mid-click is its own kind of surprise.\n            <Button variant=\"secondary\" onClick={wizard.goBack} disabled={wizard.isSubmitting}>\n              {l.back}\n            </Button>\n          )}\n          {wizard.currentStep.optional && !wizard.isLastStep && !wizard.isCommitStep && (\n            <Button\n              variant=\"ghost\"\n              onClick={wizard.skip}\n              disabled={wizard.nextBlocked || wizard.isValidating}\n            >\n              {l.skip}\n            </Button>\n          )}\n          {forwardButton}\n        </div>\n      </div>\n\n      {/* Cancel confirmation */}\n      {wizard.showCancelDialog && (\n        <Modal onClose={wizard.dismissCancel} labelledBy={cancelTitleId} className=\"space-y-4\">\n          <div className=\"space-y-1.5\">\n            <h2 id={cancelTitleId} className=\"text-lg font-semibold text-primary\">\n              {l.cancelTitle}\n            </h2>\n            <p className=\"text-sm text-muted\">{l.confirmCancel}</p>\n          </div>\n          <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n            <Button variant=\"secondary\" onClick={wizard.dismissCancel}>\n              {l.cancelDismissLabel}\n            </Button>\n            <Button variant=\"danger\" onClick={wizard.confirmCancel}>\n              {l.cancelConfirmLabel}\n            </Button>\n          </div>\n        </Modal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/wizard/stepper-nav.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { Button } from \"../components/button\";\nimport { Spinner } from \"../components/spinner\";\nimport type { ButtonVariant } from \"../components/button-look\";\nimport { Modal } from \"../components/modal\";\nimport { alertFrameClass } from \"../components/alert-banner\";\nimport { WizardContextProvider } from \"./wizard-context\";\nimport { DEFAULT_WIZARD_LABELS } from \"./types\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport type { UseWizardReturn, WizardLabels } from \"./types\";\nimport type { CommitScope } from \"../components/write-lock\";\n\n/**\n * The chrome around a wizard: the step indicator, the step content, and the\n * Cancel / Back / Skip / Next / Finish bar — plus the cancel-confirmation\n * dialog, because \"are you sure you want to lose this\" is part of the wizard's\n * contract rather than something each app should re-decide.\n *\n * It is a component and not a set of parts for one reason: which button shows,\n * and whether it is enabled, is a function of `wizard` state that was getting\n * re-derived (and re-derived slightly differently) at every call site. Finish is\n * gated on `canFinish`, Next and Skip on `nextBlocked`, and Skip only appears on\n * an `optional` step that is not the last — that policy lives here now.\n *\n * The `<StepperNav>` is also what publishes {@link WizardContextProvider}, which\n * is how a mounted step registers its own validator. A step's\n * `useRhfWizardStep` / `useWizardStepValidate` therefore only works inside one.\n *\n * Which buttons show is read off `wizard` (`canCancel`, `canGoBack`, `canDone`,\n * `isCommitStep`), so the policy options — `cancellable`, `onExit`, `commits`,\n * `onDone` — are all set on `useWizard`. What is set HERE is how the Finish button\n * looks and what wraps it, because that is presentation and usually depends on\n * state the app holds (a \"replace everything\" toggle, a write lock — `finishCommit`).\n */\nexport function StepperNav<TData extends Record<string, unknown>>({\n  wizard,\n  children,\n  title,\n  description,\n  className,\n  labels,\n  finishVariant = \"accent\",\n  finishDisabled = false,\n  finishCommit,\n  finishDisabledReason,\n  doneDisabled = false,\n  renderFinish,\n}: {\n  wizard: UseWizardReturn<TData>;\n  children: ReactNode;\n  title?: ReactNode;\n  description?: ReactNode;\n  className?: string;\n  labels?: LabelOverride<WizardLabels>;\n  /** The Finish button's variant — `\"danger\"` for a destructive commit (an import\n   *  that replaces what is there). Default `\"accent\"`. Next keeps `\"accent\"`. */\n  finishVariant?: ButtonVariant;\n  /** Disable Finish for a reason of the app's own, on top of the kit's gates\n   *  (`canFinish`, submitting, validating). */\n  finishDisabled?: boolean;\n  /**\n   * Finish COMMITS — {@link Button}'s `commit`, handed to the Finish button. Under a\n   * locked {@link WriteLockProvider} it is `aria-disabled` but focusable, with the lock's\n   * reason in the kit Tooltip, and a click (or Enter) does not run `wizard.finish`.\n   * Every other button of the bar stays live: the steps before the commit write nothing,\n   * so the whole wizard can still be walked through on a read-only page.\n   *\n   * keksdose G1: its YNAB import runs the mapping wizard on the read-only demo (dev#497)\n   * and locks only the confirm step's Finish — by cloning `commit` into the element\n   * `renderFinish` hands it, because StepperNav took no `commit` of its own. That clone\n   * still works; this is the same thing without one. Named `finishCommit` beside\n   * `finishVariant` / `finishDisabled` rather than a bare `commit`, which on a component\n   * with five buttons would not say which one saves — and would read like `useWizard`'s\n   * `commits`, which is a step's policy, not a lock.\n   */\n  finishCommit?: CommitScope;\n  /**\n   * Why Finish is not available — {@link Button}'s `disabledReason` on the Finish button:\n   * `aria-disabled` and focusable, the reason in the kit Tooltip and on the button's\n   * `aria-describedby`, `wizard.finish` not run. The explained form of `finishDisabled`\n   * (a native `disabled` takes the button out of the tab order, so its reason never\n   * reaches a keyboard). Under a lock with `finishCommit`, the lock's reason wins.\n   */\n  finishDisabledReason?: ReactNode;\n  /**\n   * Disable Done — the button of the last step after a commit — while the step still\n   * has work of its own running. keksdose's YNAB import ends on a recurring step whose\n   * convert loop writes one rule at a time (ynab-import-panel.tsx): leaving mid-loop\n   * abandons the rest. Until now the panel dropped `onDone` for the duration, which\n   * takes the button away instead of saying \"not yet\": disabled, it stays where the\n   * eye left it and comes back to life when the loop ends.\n   */\n  doneDisabled?: boolean;\n  /**\n   * Wrap the Finish button: receives the kit's button element — already labelled,\n   * gated and wired to `wizard.finish` — and returns what to render in its place.\n   *\n   * ```tsx\n   * renderFinish={(button) => <SaveGuard lock={lock}>{button}</SaveGuard>}\n   * ```\n   *\n   * A wrapper and not a replacement (`finishButton: (props) => …`) or a hook\n   * (`onBeforeFinish`): the app's need is to put something AROUND the commit — a\n   * write-lock tooltip, which has to sit on a wrapping element because a disabled\n   * button receives no pointer events — while the kit keeps owning what the button\n   * says and when it is enabled. A replacement would hand every app the gating to\n   * re-derive (the problem this component exists to end); `onBeforeFinish` can veto\n   * a click but cannot explain a disabled button. The element is a plain `<Button>`,\n   * so a wrapper that clones it with `disabled` works as expected.\n   *\n   * For the write lock itself there is no need to wrap any more: `finishCommit` (and\n   * `finishDisabledReason`) put the kit Button's own Tooltip on Finish. An element\n   * cloned with `commit` here keeps working the same way.\n   */\n  renderFinish?: (button: ReactElement) => ReactNode;\n}) {\n  const l = useKitLabels(\"wizard\", DEFAULT_WIZARD_LABELS, labels);\n  const cancelTitleId = useId();\n\n  // The step area never shrinks below the tallest step shown so far, so the button\n  // bar does not jump up and down as Next and Back move between a long step and a\n  // short one. This replaces a fixed `min-h-[300px]` (carried over from Kastlan,\n  // whose steps are all long forms), which did the same for steps under 300px but\n  // left a short wizard — two fields a step — with a ~200px hole above its buttons.\n  // Measured rather than guessed: the floor is whatever the app's own steps need.\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [contentFloor, setContentFloor] = useState(0);\n  useLayoutEffect(() => {\n    const el = contentRef.current;\n    if (!el || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      const h = el.offsetHeight;\n      setContentFloor((floor) => (h > floor ? h : floor));\n    });\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, []);\n\n  const contextValue = useMemo(\n    () => ({\n      registerStepValidate: wizard.registerStepValidate,\n      setNextBlocked: wizard.setNextBlocked,\n    }),\n    [wizard.registerStepValidate, wizard.setNextBlocked],\n  );\n\n  // Finish is only valid once every step before the last has been completed or\n  // skipped (derived once in useWizard). Prevents a restored last-step index\n  // (empty data after a reload) from firing an empty submit.\n  const canFinish = wizard.canFinish;\n\n  // Pending while the step's validators run (an async server check): a spinner and\n  // `aria-busy`, and disabled — the hook's own re-entry guard still refuses a second\n  // press, this just stops it looking like the first one did nothing.\n  const pending = wizard.isValidating;\n  const stepNextLabel = wizard.currentStep.nextLabel;\n\n  // Every branch below assigns it; no initial value to overwrite.\n  let forwardButton: ReactNode;\n  if (wizard.isCommitStep) {\n    const finishButton = (\n      <Button\n        variant={finishVariant}\n        data-tour=\"wizard-finish\"\n        onClick={wizard.finish}\n        // The kit Button's lock: a reason (its own or, with `commit`, the provider's)\n        // wins over `disabled` and keeps the button reachable, saying why.\n        commit={finishCommit}\n        disabledReason={finishDisabledReason}\n        disabled={wizard.isSubmitting || pending || !canFinish || finishDisabled}\n        aria-busy={wizard.isSubmitting || pending || undefined}\n      >\n        {/* Decorative: the button's text is what a reader hears. */}\n        {pending && <Spinner label={null} className=\"size-4\" />}\n        {wizard.isSubmitting ? l.submitting : (stepNextLabel ?? l.finish)}\n      </Button>\n    );\n    forwardButton = renderFinish ? renderFinish(finishButton) : finishButton;\n  } else if (wizard.isLastStep) {\n    // The last step after a commit. Nothing to finish; Done only when the app gave\n    // an `onDone` — otherwise the step carries its own way out.\n    forwardButton = wizard.canDone ? (\n      <Button variant=\"accent\" data-tour=\"wizard-done\" onClick={wizard.done} disabled={doneDisabled}>\n        {stepNextLabel ?? l.done ?? DEFAULT_WIZARD_LABELS.done}\n      </Button>\n    ) : null;\n  } else {\n    forwardButton = (\n      <Button\n        variant=\"accent\"\n        data-tour=\"wizard-next\"\n        onClick={wizard.goNext}\n        disabled={wizard.nextBlocked || pending}\n        aria-busy={pending || undefined}\n      >\n        {pending && <Spinner label={null} className=\"size-4\" />}\n        {stepNextLabel ?? l.next}\n      </Button>\n    );\n  }\n\n  return (\n    <div className={cn(\"flex flex-col gap-6\", className)}>\n      {(title || description) && (\n        <div>\n          {title && (\n            <h1 className=\"text-2xl font-bold tracking-tight text-primary\">\n              {title}\n            </h1>\n          )}\n          {description && (\n            <p className=\"mt-1 text-sm text-muted\">{description}</p>\n          )}\n        </div>\n      )}\n\n      {/* Step indicator */}\n      <nav aria-label={l.steps}>\n        <ol className=\"flex w-full items-center\">\n          {wizard.steps.map((step, index) => {\n            const status = wizard.stepStatus(index);\n            const isLast = index === wizard.steps.length - 1;\n\n            return (\n              <li key={step.id} className={cn(\"flex items-center\", !isLast && \"flex-1\")}>\n                <button\n                  type=\"button\"\n                  onClick={() => wizard.goToStep(index)}\n                  // `canGoToStep` adds the commit lock: once past a committing step,\n                  // the steps up to it are done with and cannot be reopened.\n                  disabled={status === \"upcoming\" || !wizard.canGoToStep(index)}\n                  aria-current={status === \"active\" ? \"step\" : undefined}\n                  className={cn(\n                    \"group flex flex-col items-center gap-1.5\",\n                    status === \"upcoming\" ? \"cursor-default\" : \"cursor-pointer\",\n                  )}\n                >\n                  {/* Circle */}\n                  <span\n                    className={cn(\n                      \"flex size-8 shrink-0 items-center justify-center rounded-full border-2 text-xs font-semibold transition-colors\",\n                      status === \"completed\" &&\n                        \"border-brand bg-brand text-brand-contrast\",\n                      status === \"active\" &&\n                        \"border-brand bg-surface text-brand\",\n                      status === \"upcoming\" &&\n                        \"border-subtle bg-surface text-placeholder\",\n                      status === \"skipped\" &&\n                        \"border-subtle bg-surface-2 text-muted\",\n                    )}\n                  >\n                    {status === \"completed\" ? <Check className=\"size-4\" /> : index + 1}\n                  </span>\n                  {/* Label — hidden on mobile, where the line below carries it */}\n                  <span\n                    className={cn(\n                      \"hidden text-xs font-medium md:block\",\n                      status === \"active\" || status === \"completed\"\n                        ? \"text-primary\"\n                        : \"text-muted\",\n                    )}\n                  >\n                    {step.label}\n                  </span>\n                </button>\n\n                {/* Connector line */}\n                {!isLast && (\n                  <div\n                    className={cn(\n                      \"mx-2 h-0.5 flex-1\",\n                      status === \"completed\" ? \"bg-brand\" : \"bg-[var(--border)]\",\n                    )}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </ol>\n        {/* Mobile: the labels above are hidden, so name the current step here */}\n        <p className=\"mt-2 text-center text-sm font-medium text-primary md:hidden\">\n          {l.step(wizard.currentStepIndex + 1, wizard.steps.length)}\n          {\" — \"}\n          {wizard.currentStep.label}\n        </p>\n      </nav>\n\n      {/* Step content */}\n      <WizardContextProvider value={contextValue}>\n        <div style={contentFloor > 0 ? { minHeight: contentFloor } : undefined}>\n          <div ref={contentRef}>{children}</div>\n        </div>\n      </WizardContextProvider>\n\n      {/* Submit error */}\n      {wizard.error && (\n        <div\n          role=\"alert\"\n          className={cn(\n            \"text-sm text-danger\",\n            alertFrameClass(\"danger\"),\n          )}\n        >\n          {wizard.error}\n        </div>\n      )}\n\n      {/* Navigation bar */}\n      <div className=\"flex items-center justify-between border-t border-subtle pt-4\">\n        {/* The empty span keeps the right-hand group on the right when Cancel is off. */}\n        {wizard.canCancel ? (\n          <Button variant=\"secondary\" onClick={wizard.cancel}>\n            {l.cancel}\n          </Button>\n        ) : (\n          <span />\n        )}\n        <div className=\"flex items-center gap-2\">\n          {wizard.canGoBack && (\n            // Disabled, not hidden, while the commit runs: it comes back if the commit\n            // fails, and a button that vanishes mid-click is its own kind of surprise.\n            <Button variant=\"secondary\" onClick={wizard.goBack} disabled={wizard.isSubmitting}>\n              {l.back}\n            </Button>\n          )}\n          {wizard.currentStep.optional && !wizard.isLastStep && !wizard.isCommitStep && (\n            <Button\n              variant=\"ghost\"\n              onClick={wizard.skip}\n              disabled={wizard.nextBlocked || wizard.isValidating}\n            >\n              {l.skip}\n            </Button>\n          )}\n          {forwardButton}\n        </div>\n      </div>\n\n      {/* Cancel confirmation */}\n      {wizard.showCancelDialog && (\n        <Modal onClose={wizard.dismissCancel} labelledBy={cancelTitleId} className=\"space-y-4\">\n          <div className=\"space-y-1.5\">\n            <h2 id={cancelTitleId} className=\"text-lg font-semibold text-primary\">\n              {l.cancelTitle}\n            </h2>\n            <p className=\"text-sm text-muted\">{l.confirmCancel}</p>\n          </div>\n          <div className=\"flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\">\n            <Button variant=\"secondary\" onClick={wizard.dismissCancel}>\n              {l.cancelDismissLabel}\n            </Button>\n            <Button variant=\"danger\" onClick={wizard.confirmCancel}>\n              {l.cancelConfirmLabel}\n            </Button>\n          </div>\n        </Modal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eifi1/ui-kit",
-  "version": "0.48.2",
+  "version": "0.49.0",
   "type": "module",
   "description": "App-agnostic shared design system: domain-free React components, theme and tokens.",
   "_sideEffects": "The barrel (src/index.ts) re-exports EVERY component, including components/chart, which statically imports recharts. Without this field a bundler must assume each of those modules has side effects, so it cannot drop the unused ones: importing a Button from '@eifi1/ui-kit' dragged all 433KB of recharts into the consumer's ENTRY chunk, and Keksdose was preloading it on every page load, login included. Nothing in src/ imports for side effects (no bare imports, no CSS imports from JS, no module-level global writes) — the token stylesheet is its own './tokens.css' export — so this is safe. CSS is still listed so any future stylesheet survives. Re-checked when `flag-icons` left `dependencies` and tsup started emitting a `\"use client\"` banner: neither touches this. The flag stylesheet was never imported from JS in the first place (that was the finding), and a directive prologue is a string literal every bundler lifts out before it decides whether a module is inert.",

package/src/admin/admin-action-confirm.tsx

@@ -439,7 +439,7 @@ export function AdminActionConfirm({
           <Button
             type="submit"
             form={formId}
-            variant={tone === "danger" ? "danger" : "primary"}
+            variant={tone === "danger" ? "danger" : "default"}
             pending={busy}
             commit={commit}
             disabledReason={busy ? undefined : guardReason}

package/src/admin/invitations-panel.tsx

@@ -380,7 +380,7 @@ export function InvitationsPanel<R extends string = string>({
           <div className="flex justify-end">
             <Button
               type="submit"
-              variant="brand"
+              variant="accent"
               commit
               pending={busy === "invite"}
               disabled={busy !== null || address === "" || (scopeRequired && scopes !== undefined && scope === "")}
@@ -472,8 +472,8 @@ export function InvitationsPanel<R extends string = string>({
                             pressed, which a menu entry that closes cannot. */}
                         {link && open && <CopyButton size="xs" tone="muted" text={link} label={labels.copyLink} />}
                         {/* Resend and revoke are the row's actions (docs/text-size-
-                            harmonization.md §10.8): two icons at Normal, one "⋯" menu at
-                            Large, where both names as text ("Send … a new link") would
+                            harmonization.md §10.8): resend an icon at Normal, revoke in
+                            the "⋯" menu (0.49 KIT-12); both in the menu at Large, where both names as text ("Send … a new link") would
                             not fit a phone's row beside the copy icon. */}
                         <RowActions
                           name={invitation.email}
@@ -496,6 +496,10 @@ export function InvitationsPanel<R extends string = string>({
                               label: labels.revoke(invitation.email),
                               icon: Trash2,
                               tone: "danger",
+                              // Level `none` (user admin §4.2): re-inviting undoes it, so
+                              // the kit's KIT-12 question stays out; an app may ask in
+                              // `onRevoke` (keksdose does).
+                              confirm: false,
                               // Removing access stays open under a lapsed plan (§12.36).
                               commit: COMMIT_EXCEPT_BILLING,
                               pending: busy === `revoke:${key}`,

package/src/admin/user-roster.tsx

@@ -38,8 +38,9 @@ import { DEFAULT_USER_ROSTER_LABELS } from "./user-roster-labels";
  *
  * The column keys ARE the server's sort keys (§3.1): `name`, `email`, `role`, `created`,
  * `last_login` — so {@link userRosterSort} turns the table's sort state into the query
- * as it is. Phone cards come from the same columns: the identity is the card's headline,
- * the role, states, last login and the actions are its fields, created is left off.
+ * as it is. Phone cards come from the same columns: the identity is the card's headline
+ * with the account's states as chips beside it, the role, last login and the actions are
+ * its three fields, created is left off.
  */
 
 /* ── Rows and states ────────────────────────────────────────────────────────── */
@@ -332,11 +333,16 @@ function StateChips({ states }: { states: readonly RosterState[] }) {
  * | `name` | {@link UserIdentityCell} | last, first | the card's headline |
  * | `email` | the address (`emailColumn` only) | address | hidden |
  * | `role` | `RoleChip`(s), or {@link RoleSelect} where `editableRole` | role | field |
- * | `state` | `AccountStateChip`s from `stateOf` | — | field |
+ * | `state` | `AccountStateChip`s from `stateOf` | — | chips beside the headline |
  * | `created` | `dateColumn` | instant | hidden |
  * | `last_login` | `dateColumn`, relative, "Never" | instant | field |
- * | …`extra` | the app's | the app's | the app's |
- * | `actions` | {@link UserRowActions} | — | field |
+ * | …`extra` | the app's | the app's | off the card unless marked `mobile: "secondary"` |
+ * | `actions` | {@link UserRowActions} | — | the card's actions row (`role: "actions"`) |
+ *
+ * The card holds three fields — `role`, `last_login` and one more: an `extra` column marked
+ * `mobile: "secondary"` takes that place. The actions are `role: "actions"` (0.49), drawn
+ * after the fields and never one of the three. Drop them from the card with
+ * `mobile: "hidden"`, or draw a `mobileCard`.
  *
  * Pure: hand it resolved words, or use {@link useUserRosterColumns}. The keys are stable,
  * so an app may drop or move a column (`columns.filter((c) => c.key !== "created")`).
@@ -437,11 +443,19 @@ export function userRosterColumns<T extends UserRosterRow, R extends string = st
         getValue: (row) => rolesOf(row, roleOf)[0] ?? "",
         options: (Object.keys(roles) as R[]).map((value) => ({ value, label: roles[value].label })),
       },
+      mobile: "secondary",
     },
     {
       key: "state",
       header: labels.state,
-      cell: (row) => <StateChips states={stateOf(row)} />,
+      // No states, no cell: the phone card then shows no chip beside the name.
+      cell: (row) => {
+        const states = stateOf(row);
+        return states.length === 0 ? null : <StateChips states={states} />;
+      },
+      // Beside the name on the phone card, so the role, last login and the actions keep
+      // the card's three fields.
+      role: "status",
     },
     dateColumn<T>({
       key: "created",
@@ -458,6 +472,7 @@ export function userRosterColumns<T extends UserRosterRow, R extends string = st
       value: (row) => row.last_login_at ?? null,
       display: "relative",
       empty: labels.never,
+      column: { mobile: "secondary" },
     }),
     ...extra,
   );
@@ -479,6 +494,8 @@ export function userRosterColumns<T extends UserRosterRow, R extends string = st
       headClassName: "w-px text-end",
       // The menu button keeps its own click: a row link must not wrap it.
       noRowLink: true,
+      // Always on the phone card, after the fields and never one of the three (0.49).
+      role: "actions",
     });
   }
   return columns;

package/src/auth/accept-invitation.tsx

@@ -147,7 +147,7 @@ export function AcceptInvitation({
           ? "accepting"
           : "signIn";
 
-  const continueButton = (variant: "brand" | "secondary") => (
+  const continueButton = (variant: "accent" | "secondary") => (
     <Button href={continueHref} replace variant={variant}>
       {labels.continue}
     </Button>
@@ -162,7 +162,7 @@ export function AcceptInvitation({
         tone="success"
         icon={<CheckCircle2 />}
         title={settled?.name ? labels.joined(settled.name) : labels.accepted}
-        action={continueButton("brand")}
+        action={continueButton("accent")}
         className={OUTCOME_CLASS}
       />
     );
@@ -174,7 +174,7 @@ export function AcceptInvitation({
         hint={labels.signInHint}
         action={
           <>
-            <Button href={signInHref} variant="brand">
+            <Button href={signInHref} variant="accent">
               {labels.signIn}
             </Button>
             {registerHref !== undefined && (

package/src/auth/not-found-page.tsx

@@ -81,7 +81,7 @@ export function NotFoundPage({
       <p className="max-w-prose text-sm text-secondary">{labels.body}</p>
       {children}
       <div className="mt-4 flex flex-wrap justify-center gap-3">
-        <Button href={homeHref} variant="brand">
+        <Button href={homeHref} variant="accent">
           {labels.home}
         </Button>
         {appHref !== undefined && (

package/src/auth/reset-password-form.tsx

@@ -232,7 +232,7 @@ export function ResetPasswordForm({
           title={token === "" ? labels.noToken : labels.invalid}
           hint={labels.invalidHint}
           action={
-            <Button href={forgotHref} variant="brand">
+            <Button href={forgotHref} variant="accent">
               {labels.requestNew}
             </Button>
           }
@@ -253,11 +253,11 @@ export function ResetPasswordForm({
         {notices}
         <p className="text-xs text-muted">{labels.sessionsEnded}</p>
         {onSignIn ? (
-          <Button type="button" variant="brand" className="w-full" onClick={() => onSignIn(email)}>
+          <Button type="button" variant="accent" className="w-full" onClick={() => onSignIn(email)}>
             {labels.signIn}
           </Button>
         ) : (
-          <Button href={email ? withQuery(signInHref, "email", email) : signInHref} variant="brand" className="w-full">
+          <Button href={email ? withQuery(signInHref, "email", email) : signInHref} variant="accent" className="w-full">
             {labels.signIn}
           </Button>
         )}