@eifi1/ui-kit 0.11.0 → 0.13.0

package/dist/shell/topbar-action-menu.d.ts

@@ -1,7 +1,11 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
 import { MenuItemTone } from '../components/menu-item.js';
+import { UserAvatarBadge } from '../components/user-avatar.js';
 import 'lucide-react';
+import '../components/status-dot.js';
+import '../components/progress-bar.js';
+import '../components/chip.js';
 
 /**
  * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a
@@ -51,9 +55,15 @@ interface TopBarMenuHeader {
     title: ReactNode;
     /** The muted second line — an email, a role. */
     subtitle?: ReactNode;
-    /** Anything below — a role chip. A link or button here stays out of the arrow keys
-     *  and in the Tab order, like the footer's. */
-    extra?: ReactNode;
+    /**
+     * Anything below — a role chip. A link or button here stays out of the arrow keys
+     * and in the Tab order, like the footer's.
+     *
+     * Pass a function to get `close`, as `footer` does — keksdose F7: its admin role
+     * chip links to the admin area, and a router link does not unmount the menu, so
+     * without `close` the panel stayed open over the page it had just navigated to.
+     */
+    extra?: ReactNode | ((close: () => void) => ReactNode);
 }
 /**
  * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,
@@ -67,9 +77,16 @@ interface TopBarMenuHeader {
  * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a
  * free-content `footer` (the legal links).
  */
-declare function TopBarActionMenu({ icon, trigger, triggerClassName, ariaLabel, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
+declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, ariaLabel, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
     /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */
     icon?: ReactNode;
+    /**
+     * A status dot in the top-end corner of `icon` — keksdose's unread-support dot on the
+     * feedback trigger. Like `UserAvatar`'s `badge`, its `label` joins the trigger's name
+     * ("Send feedback 2 unread"), so the dot is not something only the eye is told about.
+     * Ignored with `trigger`: give the face its own badge there.
+     */
+    iconBadge?: UserAvatarBadge | null;
     /**
      * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn
      * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,

package/dist/shell/topbar-action-menu.js

@@ -5,6 +5,7 @@ import { Link } from "react-router";
 import { cn } from "../lib/cn.js";
 import { HoverMenu } from "../components/hover-menu.js";
 import { MenuItem } from "../components/menu-item.js";
+import { StatusDot } from "../components/status-dot.js";
 import { TOPBAR_TRIGGER_CLASS } from "./topbar-controls.js";
 const SECTION_CONTROLS = "a[href]:not([role]),button:not([role])";
 const TABBABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]";
@@ -32,6 +33,7 @@ function keepTabInsidePanel(e) {
 }
 function TopBarActionMenu({
   icon,
+  iconBadge,
   trigger,
   triggerClassName,
   ariaLabel,
@@ -53,7 +55,20 @@ function TopBarActionMenu({
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
         " ",
         trigger({ open })
-      ] }) : /* @__PURE__ */ jsx(
+      ] }) : iconBadge ? (
+        // Named by its content, like the custom-trigger branch, so the badge label is
+        // part of the name; an `aria-label` would have hidden it.
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: toggle, className: cn(TOPBAR_TRIGGER_CLASS, "relative", triggerClassName), children: [
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: ariaLabel }),
+          " ",
+          /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "relative inline-flex", children: [
+            icon,
+            /* @__PURE__ */ jsx(StatusDot, { ring: true, tone: iconBadge.tone ?? "danger", className: "absolute -end-0.5 -top-0.5" })
+          ] }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: iconBadge.label })
+        ] })
+      ) : /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -65,6 +80,7 @@ function TopBarActionMenu({
       ),
       children: (close) => {
         const footerBody = typeof footer === "function" ? footer(close) : footer;
+        const headerExtra = typeof header?.extra === "function" ? header.extra(close) : header?.extra;
         const footerClass = "flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-[var(--brand)]";
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
@@ -72,7 +88,7 @@ function TopBarActionMenu({
             header && /* @__PURE__ */ jsxs(MenuSection, { className: "mb-1 border-b border-[var(--border)] px-3 py-2", children: [
               /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-[var(--text-primary)]", children: header.title }),
               header.subtitle != null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-[var(--text-muted)]", children: header.subtitle }),
-              header.extra != null && /* @__PURE__ */ jsx("div", { className: "mt-1", children: header.extra })
+              headerExtra != null && headerExtra !== false && /* @__PURE__ */ jsx("div", { className: "mt-1", children: headerExtra })
             ] }),
             heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children: heading }),
             entries.map((entry) => {

package/dist/shell/topbar-action-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { MenuItem } from \"../components/menu-item\";\nimport type { MenuItemTone } from \"../components/menu-item\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n *\n * The rows are {@link MenuItem}s, so they take its options: `tone: \"danger\"` for the\n * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the\n * page already open, `disabled`.\n */\nexport type TopBarMenuEntry =\n  | {\n      kind?: \"action\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      onSelect: () => void;\n      tone?: MenuItemTone;\n      /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with\n       *  `checkable: \"checkbox\"`) and says whether it is chosen. */\n      checked?: boolean;\n      checkable?: \"radio\" | \"checkbox\";\n      disabled?: boolean;\n    }\n  | {\n      kind: \"link\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      to: string;\n      tone?: MenuItemTone;\n      /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n      current?: boolean;\n      disabled?: boolean;\n    }\n  | { kind: \"divider\"; key: string };\n\n/**\n * The non-interactive identity block at the top of an account menu — kastlan's name +\n * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the\n * arrow keys pass over it.\n */\nexport interface TopBarMenuHeader {\n  /** The first line — the user's name. */\n  title: ReactNode;\n  /** The muted second line — an email, a role. */\n  subtitle?: ReactNode;\n  /** Anything below — a role chip. A link or button here stays out of the arrow keys\n   *  and in the Tab order, like the footer's. */\n  extra?: ReactNode;\n}\n\n/** What a control is, as far as `HoverMenu` is concerned, when it lives in the header\n *  or the footer: not a menu row. */\nconst SECTION_CONTROLS = \"a[href]:not([role]),button:not([role])\";\nconst TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';\n\n/**\n * A header or footer inside the menu panel.\n *\n * `HoverMenu` promotes EVERY role-less button and link in its panel to a `menuitem` out\n * of the Tab order, and turns every list into `role=\"none\"` — right for the rows, wrong\n * for a footer of legal links, which would join the arrow-key cycle and drop out of Tab.\n * So before it looks (a child's layout effect runs before its parent's), the controls\n * in here get their own role spelled out, which `HoverMenu` leaves alone, and any list\n * keeps its list semantics.\n */\nfunction MenuSection({ className, children }: { className: string; children: ReactNode }) {\n  const ref = useRef<HTMLLIElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    for (const c of el.querySelectorAll<HTMLElement>(SECTION_CONTROLS)) {\n      c.setAttribute(\"role\", c.tagName === \"A\" ? \"link\" : \"button\");\n    }\n    for (const l of el.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role])\")) l.setAttribute(\"role\", \"list\");\n    for (const l of el.querySelectorAll<HTMLElement>(\"li:not([role])\")) l.setAttribute(\"role\", \"listitem\");\n  });\n  return (\n    <li ref={ref} role=\"none\" className={className}>\n      {children}\n    </li>\n  );\n}\n\n/**\n * `HoverMenu` closes on any Tab inside the panel — right when Tab leaves it, wrong when\n * Tab is on its way from a row to a footer link, or from one footer link to the next:\n * the panel would unmount under the focus. So a Tab whose next stop is still inside the\n * panel stops here and the browser moves focus; one that leaves reaches `HoverMenu`,\n * which closes.\n */\nfunction keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {\n  if (e.key !== \"Tab\") return;\n  const from = e.target as HTMLElement;\n  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => el.getAttribute(\"tabindex\") !== \"-1\",\n  );\n  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();\n}\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n *\n * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a\n * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a\n * free-content `footer` (the legal links).\n */\nexport function TopBarActionMenu({\n  icon,\n  trigger,\n  triggerClassName,\n  ariaLabel,\n  heading,\n  header,\n  entries,\n  children,\n  footer,\n  footerLabel,\n  align,\n  panelClassName,\n}: {\n  /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */\n  icon?: ReactNode;\n  /**\n   * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn\n   * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,\n   * the toggle, the keyboard. `open` is there for a chevron that turns.\n   *\n   * The button is named by `ariaLabel` followed by any readable text in the face — a\n   * `UserAvatar` `badge` label reaches a screen reader that way (\"Account menu 3\n   * unread\"), where an `aria-label` on the button would have hidden it. A\n   * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the\n   * name if `ariaLabel` carries it (\"Marcel Eifert, account menu\").\n   */\n  trigger?: (state: { open: boolean }) => ReactNode;\n  /** Extra classes for the trigger button — `rounded-full` round an avatar. */\n  triggerClassName?: string;\n  /** Names the trigger and the menu. */\n  ariaLabel: string;\n  heading?: string;\n  /** A non-interactive identity block above the rows. */\n  header?: TopBarMenuHeader;\n  entries: TopBarMenuEntry[];\n  /**\n   * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own\n   * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;\n   * `close` shuts the menu.\n   */\n  children?: (close: () => void) => ReactNode;\n  /**\n   * Free content below the rows, behind a rule — the legal links. Its links and\n   * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a\n   * function to get `close` for the links' `onClick`.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Wraps the footer in a `<nav>` with this name (\"Legal\"). Without it, a plain block. */\n  footerLabel?: string;\n  /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      align={align}\n      trigger={({ open, toggle }) =>\n        trigger ? (\n          <button type=\"button\" onClick={toggle} className={cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName)}>\n            <span className=\"sr-only\">{ariaLabel}</span>\n            {/* The space keeps the name from running into the face's text (\"Account\n                menu3 unread\"); as a flex item it takes no room. */}\n            {\" \"}\n            {trigger({ open })}\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={ariaLabel}\n            className={cn(TOPBAR_TRIGGER_CLASS, triggerClassName)}\n          >\n            {icon}\n          </button>\n        )\n      }\n    >\n      {(close) => {\n        const footerBody = typeof footer === \"function\" ? footer(close) : footer;\n        const footerClass =\n          \"flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-[var(--brand)]\";\n        return (\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel\n          <ul className={cn(\"py-1\", panelClassName)} onKeyDown={keepTabInsidePanel}>\n            {header && (\n              <MenuSection className=\"mb-1 border-b border-[var(--border)] px-3 py-2\">\n                <div className=\"truncate text-sm font-medium text-[var(--text-primary)]\">{header.title}</div>\n                {header.subtitle != null && (\n                  <div className=\"truncate text-xs text-[var(--text-muted)]\">{header.subtitle}</div>\n                )}\n                {header.extra != null && <div className=\"mt-1\">{header.extra}</div>}\n              </MenuSection>\n            )}\n            {heading && (\n              <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n                {heading}\n              </li>\n            )}\n            {entries.map((entry) => {\n              if (entry.kind === \"divider\") {\n                return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n              }\n              return (\n                <li key={entry.key}>\n                  {entry.kind === \"link\" ? (\n                    <MenuItem\n                      href={entry.to}\n                      renderLink={({ href, ...p }) => <Link to={href} {...p} />}\n                      onClick={close}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      current={entry.current}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  ) : (\n                    <MenuItem\n                      onClick={() => {\n                        entry.onSelect();\n                        close();\n                      }}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      checked={entry.checked}\n                      checkable={entry.checkable}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  )}\n                </li>\n              );\n            })}\n            {children?.(close)}\n            {footerBody != null && footerBody !== false && (\n              <MenuSection className=\"mt-1 border-t border-[var(--border)] px-3 py-2\">\n                {footerLabel ? (\n                  <nav aria-label={footerLabel} className={footerClass}>\n                    {footerBody}\n                  </nav>\n                ) : (\n                  <div className={footerClass}>{footerBody}</div>\n                )}\n              </MenuSection>\n            )}\n          </ul>\n        );\n      }}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useLayoutEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { MenuItem } from \"../components/menu-item\";\nimport type { MenuItemTone } from \"../components/menu-item\";\nimport { StatusDot } from \"../components/status-dot\";\nimport type { UserAvatarBadge } from \"../components/user-avatar\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, and a `divider` draws a rule. Non-divider\n * rows close the menu automatically when chosen. `kind` may be omitted for\n * actions, keeping the common case terse.\n *\n * The rows are {@link MenuItem}s, so they take its options: `tone: \"danger\"` for the\n * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the\n * page already open, `disabled`.\n */\nexport type TopBarMenuEntry =\n  | {\n      kind?: \"action\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      onSelect: () => void;\n      tone?: MenuItemTone;\n      /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with\n       *  `checkable: \"checkbox\"`) and says whether it is chosen. */\n      checked?: boolean;\n      checkable?: \"radio\" | \"checkbox\";\n      disabled?: boolean;\n    }\n  | {\n      kind: \"link\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      to: string;\n      tone?: MenuItemTone;\n      /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n      current?: boolean;\n      disabled?: boolean;\n    }\n  | { kind: \"divider\"; key: string };\n\n/**\n * The non-interactive identity block at the top of an account menu — kastlan's name +\n * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the\n * arrow keys pass over it.\n */\nexport interface TopBarMenuHeader {\n  /** The first line — the user's name. */\n  title: ReactNode;\n  /** The muted second line — an email, a role. */\n  subtitle?: ReactNode;\n  /**\n   * Anything below — a role chip. A link or button here stays out of the arrow keys\n   * and in the Tab order, like the footer's.\n   *\n   * Pass a function to get `close`, as `footer` does — keksdose F7: its admin role\n   * chip links to the admin area, and a router link does not unmount the menu, so\n   * without `close` the panel stayed open over the page it had just navigated to.\n   */\n  extra?: ReactNode | ((close: () => void) => ReactNode);\n}\n\n/** What a control is, as far as `HoverMenu` is concerned, when it lives in the header\n *  or the footer: not a menu row. */\nconst SECTION_CONTROLS = \"a[href]:not([role]),button:not([role])\";\nconst TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';\n\n/**\n * A header or footer inside the menu panel.\n *\n * `HoverMenu` promotes EVERY role-less button and link in its panel to a `menuitem` out\n * of the Tab order, and turns every list into `role=\"none\"` — right for the rows, wrong\n * for a footer of legal links, which would join the arrow-key cycle and drop out of Tab.\n * So before it looks (a child's layout effect runs before its parent's), the controls\n * in here get their own role spelled out, which `HoverMenu` leaves alone, and any list\n * keeps its list semantics.\n */\nfunction MenuSection({ className, children }: { className: string; children: ReactNode }) {\n  const ref = useRef<HTMLLIElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    for (const c of el.querySelectorAll<HTMLElement>(SECTION_CONTROLS)) {\n      c.setAttribute(\"role\", c.tagName === \"A\" ? \"link\" : \"button\");\n    }\n    for (const l of el.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role])\")) l.setAttribute(\"role\", \"list\");\n    for (const l of el.querySelectorAll<HTMLElement>(\"li:not([role])\")) l.setAttribute(\"role\", \"listitem\");\n  });\n  return (\n    <li ref={ref} role=\"none\" className={className}>\n      {children}\n    </li>\n  );\n}\n\n/**\n * `HoverMenu` closes on any Tab inside the panel — right when Tab leaves it, wrong when\n * Tab is on its way from a row to a footer link, or from one footer link to the next:\n * the panel would unmount under the focus. So a Tab whose next stop is still inside the\n * panel stops here and the browser moves focus; one that leaves reaches `HoverMenu`,\n * which closes.\n */\nfunction keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {\n  if (e.key !== \"Tab\") return;\n  const from = e.target as HTMLElement;\n  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => el.getAttribute(\"tabindex\") !== \"-1\",\n  );\n  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();\n}\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n *\n * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a\n * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a\n * free-content `footer` (the legal links).\n */\nexport function TopBarActionMenu({\n  icon,\n  iconBadge,\n  trigger,\n  triggerClassName,\n  ariaLabel,\n  heading,\n  header,\n  entries,\n  children,\n  footer,\n  footerLabel,\n  align,\n  panelClassName,\n}: {\n  /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */\n  icon?: ReactNode;\n  /**\n   * A status dot in the top-end corner of `icon` — keksdose's unread-support dot on the\n   * feedback trigger. Like `UserAvatar`'s `badge`, its `label` joins the trigger's name\n   * (\"Send feedback 2 unread\"), so the dot is not something only the eye is told about.\n   * Ignored with `trigger`: give the face its own badge there.\n   */\n  iconBadge?: UserAvatarBadge | null;\n  /**\n   * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn\n   * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,\n   * the toggle, the keyboard. `open` is there for a chevron that turns.\n   *\n   * The button is named by `ariaLabel` followed by any readable text in the face — a\n   * `UserAvatar` `badge` label reaches a screen reader that way (\"Account menu 3\n   * unread\"), where an `aria-label` on the button would have hidden it. A\n   * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the\n   * name if `ariaLabel` carries it (\"Marcel Eifert, account menu\").\n   */\n  trigger?: (state: { open: boolean }) => ReactNode;\n  /** Extra classes for the trigger button — `rounded-full` round an avatar. */\n  triggerClassName?: string;\n  /** Names the trigger and the menu. */\n  ariaLabel: string;\n  heading?: string;\n  /** A non-interactive identity block above the rows. */\n  header?: TopBarMenuHeader;\n  entries: TopBarMenuEntry[];\n  /**\n   * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own\n   * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;\n   * `close` shuts the menu.\n   */\n  children?: (close: () => void) => ReactNode;\n  /**\n   * Free content below the rows, behind a rule — the legal links. Its links and\n   * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a\n   * function to get `close` for the links' `onClick`.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Wraps the footer in a `<nav>` with this name (\"Legal\"). Without it, a plain block. */\n  footerLabel?: string;\n  /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n}) {\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      align={align}\n      trigger={({ open, toggle }) =>\n        trigger ? (\n          <button type=\"button\" onClick={toggle} className={cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName)}>\n            <span className=\"sr-only\">{ariaLabel}</span>\n            {/* The space keeps the name from running into the face's text (\"Account\n                menu3 unread\"); as a flex item it takes no room. */}\n            {\" \"}\n            {trigger({ open })}\n          </button>\n        ) : iconBadge ? (\n          // Named by its content, like the custom-trigger branch, so the badge label is\n          // part of the name; an `aria-label` would have hidden it.\n          <button type=\"button\" onClick={toggle} className={cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName)}>\n            <span className=\"sr-only\">{ariaLabel}</span>{\" \"}\n            <span aria-hidden className=\"relative inline-flex\">\n              {icon}\n              <StatusDot ring tone={iconBadge.tone ?? \"danger\"} className=\"absolute -end-0.5 -top-0.5\" />\n            </span>{\" \"}\n            <span className=\"sr-only\">{iconBadge.label}</span>\n          </button>\n        ) : (\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={ariaLabel}\n            className={cn(TOPBAR_TRIGGER_CLASS, triggerClassName)}\n          >\n            {icon}\n          </button>\n        )\n      }\n    >\n      {(close) => {\n        const footerBody = typeof footer === \"function\" ? footer(close) : footer;\n        const headerExtra = typeof header?.extra === \"function\" ? header.extra(close) : header?.extra;\n        const footerClass =\n          \"flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-2 [&_a:focus-visible]:ring-[var(--brand)]\";\n        return (\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel\n          <ul className={cn(\"py-1\", panelClassName)} onKeyDown={keepTabInsidePanel}>\n            {header && (\n              <MenuSection className=\"mb-1 border-b border-[var(--border)] px-3 py-2\">\n                <div className=\"truncate text-sm font-medium text-[var(--text-primary)]\">{header.title}</div>\n                {header.subtitle != null && (\n                  <div className=\"truncate text-xs text-[var(--text-muted)]\">{header.subtitle}</div>\n                )}\n                {headerExtra != null && headerExtra !== false && <div className=\"mt-1\">{headerExtra}</div>}\n              </MenuSection>\n            )}\n            {heading && (\n              <li className=\"px-3 py-1 text-[10px] font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n                {heading}\n              </li>\n            )}\n            {entries.map((entry) => {\n              if (entry.kind === \"divider\") {\n                return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n              }\n              return (\n                <li key={entry.key}>\n                  {entry.kind === \"link\" ? (\n                    <MenuItem\n                      href={entry.to}\n                      renderLink={({ href, ...p }) => <Link to={href} {...p} />}\n                      onClick={close}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      current={entry.current}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  ) : (\n                    <MenuItem\n                      onClick={() => {\n                        entry.onSelect();\n                        close();\n                      }}\n                      leading={entry.icon}\n                      trailing={entry.trailing}\n                      tone={entry.tone}\n                      checked={entry.checked}\n                      checkable={entry.checkable}\n                      disabled={entry.disabled}\n                    >\n                      {entry.label}\n                    </MenuItem>\n                  )}\n                </li>\n              );\n            })}\n            {children?.(close)}\n            {footerBody != null && footerBody !== false && (\n              <MenuSection className=\"mt-1 border-t border-[var(--border)] px-3 py-2\">\n                {footerLabel ? (\n                  <nav aria-label={footerLabel} className={footerClass}>\n                    {footerBody}\n                  </nav>\n                ) : (\n                  <div className={footerClass}>{footerBody}</div>\n                )}\n              </MenuSection>\n            )}\n          </ul>\n        );\n      }}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell.d.ts

@@ -1,9 +1,11 @@
 export { LanguageMenu, LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle } from './shell/topbar-controls.js';
 export { TopBar, TopBarProps } from './shell/top-bar.js';
-export { AppShell, AppShellNavItem, AppShellProps, AppShellSubItem } from './shell/app-shell.js';
+export { AppShell, AppShellNavItem, AppShellProps, AppShellSidebarFooterItem, AppShellSubItem } from './shell/app-shell.js';
 export { OptionSwitcherMenu, OptionSwitcherOption } from './shell/option-switcher-menu.js';
 export { RoleSwitcher, RoleSwitcherProps } from './shell/role-switcher.js';
 export { TopBarActionMenu, TopBarMenuEntry, TopBarMenuHeader } from './shell/topbar-action-menu.js';
+export { TopBarBrand, TopBarBrandProps } from './shell/top-bar-brand.js';
+export { AuthLayout, AuthLayoutProps } from './shell/auth-layout.js';
 import 'react';
 import './theme/palette-presets.js';
 import './theme/chart-palette.js';
@@ -11,4 +13,57 @@ import './theme/theme-store.js';
 import 'zustand/middleware';
 import 'zustand';
 import 'lucide-react';
+import './kit-labels-Mz8zZHIF.js';
+import './components/data-table-labels.js';
+import './components/mini-calendar.js';
+import './components/calendar-heatmap.js';
+import './components/popover.js';
+import './components/chip.js';
+import './components/field-sync.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
+import './wizard/types.js';
+import './tour/tour.js';
+import './search/command-palette.js';
+import './search/global-search.js';
+import './search/search-index.js';
+import './components/month-picker.js';
+import './components/page-contents.js';
+import './components/series-chart-labels.js';
+import './components/pie-chart-labels.js';
+import './components/sparkline.js';
+import './components/stat-tile.js';
+import './components/signature-pad.js';
+import './components/password-strength.js';
+import './components/danger-confirm.js';
+import './components/swatch-picker.js';
+import './components/tile-radio.js';
+import './components/icon-picker.js';
+import './components/dialog-frame.js';
+import './components/modal.js';
+import './hooks/use-search-param-state.js';
+import './components/measured-grid.js';
+import './feedback/feedback-attachment.js';
+import './feedback/feedback-dialog.js';
+import './feedback/feedback-thread.js';
+import './feedback/feedback-inbox.js';
+import './components/account-settings-labels.js';
+import './components/confirm-dialog.js';
+import './components/floating-panel.js';
+import './components/bulk-action-bar.js';
+import './components/list.js';
+import './components/breadcrumbs.js';
+import './components/toast.js';
+import './components/description-list.js';
+import './components/line-items.js';
+import './components/progress-bar.js';
+import './components/signed-amount.js';
+import './components/error-boundary.js';
+import './components/authed-image.js';
+import './hooks/use-authed-src.js';
+import './components/image-grid.js';
+import './components/lightbox.js';
 import './components/menu-item.js';
+import './components/user-avatar.js';
+import './components/status-dot.js';

package/dist/shell.js

@@ -5,4 +5,6 @@ export * from "./shell/app-shell.js";
 export * from "./shell/option-switcher-menu.js";
 export * from "./shell/role-switcher.js";
 export * from "./shell/topbar-action-menu.js";
+export * from "./shell/top-bar-brand.js";
+export * from "./shell/auth-layout.js";
 //# sourceMappingURL=shell.js.map

package/dist/shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}
+{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\nexport * from \"./shell/top-bar-brand\";\nexport * from \"./shell/auth-layout\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;","names":[]}

package/dist/tour/tour.js

@@ -42,9 +42,11 @@ function TourProvider({
   const [activeId, setActiveId] = useState(null);
   const optsRef = useRef({});
   const stepsRef = useRef(null);
-  stepsRef.current = steps;
   const indexRef = useRef(0);
-  indexRef.current = index;
+  useLayoutEffect(() => {
+    stepsRef.current = steps;
+    indexRef.current = index;
+  }, [steps, index]);
   const active = !!steps && steps.length > 0;
   const total = steps?.length ?? 0;
   const start = useCallback((s, opts) => {
@@ -128,13 +130,17 @@ function TourOverlay({
   const isLast = index === steps.length - 1;
   const [rect, setRect] = useState(null);
   const [ready, setReady] = useState(false);
+  const [locating, setLocating] = useState({ index, step });
+  if (locating.index !== index || locating.step !== step) {
+    setLocating({ index, step });
+    setReady(false);
+    setRect(null);
+  }
   const [dir, setDir] = useState(() => dirOf(null));
   const rootRef = useRef(null);
   useEffect(() => {
     let cancelled = false;
     let raf = 0;
-    setReady(false);
-    setRect(null);
     void (async () => {
       await step.beforeStep?.();
       if (cancelled) return;

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 } from \"../i18n/kit-labels\";\nimport { Button } from \"../components/ui\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\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  /** 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  /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n  step: (current: number, total: number) => string;\n}\n\nexport const DEFAULT_TOUR_LABELS: TourLabels = {\n  next: \"Next\",\n  back: \"Back\",\n  skip: \"Skip\",\n  done: \"Done\",\n  awaitClickHint: \"Click the highlighted element to continue\",\n  step: (c, t) => `${c} / ${t}`,\n};\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. */\n  id?: string;\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  onFinish?: () => void;\n  onSkip?: () => void;\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/**\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 */\nexport function TourProvider({\n  children,\n  labels,\n}: {\n  children: ReactNode;\n  labels?: Partial<TourLabels>;\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  // Live mirrors so the step-control callbacks can stay stable (identity-safe for\n  // consumers) while still reading the current steps/index.\n  const stepsRef = useRef<TourStep[] | null>(null);\n  stepsRef.current = steps;\n  const indexRef = useRef(0);\n  indexRef.current = 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 ?? null);\n    setSteps(s);\n  }, []);\n  const stop = useCallback(() => {\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const finish = useCallback(() => {\n    optsRef.current.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 sameRect(a: Rect | null, b: Rect | null): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\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  const [rect, setRect] = useState<Rect | null>(null);\n  const [ready, setReady] = useState(false);\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, setDir] = useState<Direction>(() => dirOf(null));\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    setReady(false);\n    setRect(null);\n    void (async () => {\n      await step.beforeStep?.();\n      if (cancelled) return;\n      if (!step.target) {\n        setDir(dirOf(null));\n        setReady(true);\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          const r = el.getBoundingClientRect();\n          setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n          setDir(dirOf(el));\n          setReady(true);\n          return;\n        }\n        if (tries++ < 45) raf = requestAnimationFrame(find);\n        else {\n          setDir(dirOf(null));\n          setReady(true); // give up → render centered\n        }\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.\n  useEffect(() => {\n    if (!step.target) return;\n    const update = () => {\n      const el = queryVisibleTarget(step.target!);\n      if (el) {\n        const r = el.getBoundingClientRect();\n        const next = { top: r.top, left: r.left, width: r.width, height: r.height };\n        setRect((prev) => (sameRect(prev, next) ? prev : next));\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  useEffect(() => {\n    if (!ready || !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, 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      if (e.key === \"Escape\") {\n        onSkip();\n        return;\n      }\n      if (e.key === \"Enter\") {\n        if (step.awaitClick || 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, 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      className=\"pointer-events-none fixed inset-0 z-[60]\"\n      role=\"dialog\"\n      aria-modal=\"true\"\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/** 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-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-xl outline-none transition-all duration-200 ease-out\"\n    >\n      <div className=\"text-sm font-semibold text-[var(--text-primary)]\">{step.title}</div>\n      <div className=\"mt-1 text-sm leading-relaxed text-[var(--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-[var(--text-placeholder)] hover:text-[var(--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-[var(--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.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.target && rect && (\n          <div className=\"text-center text-xs italic text-[var(--text-placeholder)]\">\n            {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 } from \"../i18n/kit-labels\";\nimport { Button } from \"../components/ui\";\nimport { useFocusTrap } from \"../hooks/use-focus-trap\";\nimport { dirOf, horizontalStep } from \"../lib/direction\";\nimport type { Direction } from \"../lib/direction\";\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  /** 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  /** Step counter, e.g. (2, 7) => \"2 / 7\". */\n  step: (current: number, total: number) => string;\n}\n\nexport const DEFAULT_TOUR_LABELS: TourLabels = {\n  next: \"Next\",\n  back: \"Back\",\n  skip: \"Skip\",\n  done: \"Done\",\n  awaitClickHint: \"Click the highlighted element to continue\",\n  step: (c, t) => `${c} / ${t}`,\n};\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. */\n  id?: string;\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  onFinish?: () => void;\n  onSkip?: () => void;\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/**\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 */\nexport function TourProvider({\n  children,\n  labels,\n}: {\n  children: ReactNode;\n  labels?: Partial<TourLabels>;\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  // 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 ?? null);\n    setSteps(s);\n  }, []);\n  const stop = useCallback(() => {\n    setSteps(null);\n    setActiveId(null);\n  }, []);\n  const finish = useCallback(() => {\n    optsRef.current.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 sameRect(a: Rect | null, b: Rect | null): boolean {\n  if (a === b) return true;\n  if (!a || !b) return false;\n  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;\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  const [rect, setRect] = useState<Rect | null>(null);\n  const [ready, setReady] = useState(false);\n  // A new step starts unlocated: reset during render when the step changes, so the\n  // previous step's spotlight never paints over the new one. The effect below then\n  // locates it.\n  const [locating, setLocating] = useState({ index, step });\n  if (locating.index !== index || locating.step !== step) {\n    setLocating({ index, step });\n    setReady(false);\n    setRect(null);\n  }\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, setDir] = useState<Direction>(() => dirOf(null));\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    void (async () => {\n      await step.beforeStep?.();\n      if (cancelled) return;\n      if (!step.target) {\n        setDir(dirOf(null));\n        setReady(true);\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          const r = el.getBoundingClientRect();\n          setRect({ top: r.top, left: r.left, width: r.width, height: r.height });\n          setDir(dirOf(el));\n          setReady(true);\n          return;\n        }\n        if (tries++ < 45) raf = requestAnimationFrame(find);\n        else {\n          setDir(dirOf(null));\n          setReady(true); // give up → render centered\n        }\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.\n  useEffect(() => {\n    if (!step.target) return;\n    const update = () => {\n      const el = queryVisibleTarget(step.target!);\n      if (el) {\n        const r = el.getBoundingClientRect();\n        const next = { top: r.top, left: r.left, width: r.width, height: r.height };\n        setRect((prev) => (sameRect(prev, next) ? prev : next));\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  useEffect(() => {\n    if (!ready || !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, 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      if (e.key === \"Escape\") {\n        onSkip();\n        return;\n      }\n      if (e.key === \"Enter\") {\n        if (step.awaitClick || 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, 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      className=\"pointer-events-none fixed inset-0 z-[60]\"\n      role=\"dialog\"\n      aria-modal=\"true\"\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/** 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-[var(--border)] bg-[var(--bg-surface)] p-4 shadow-xl outline-none transition-all duration-200 ease-out\"\n    >\n      <div className=\"text-sm font-semibold text-[var(--text-primary)]\">{step.title}</div>\n      <div className=\"mt-1 text-sm leading-relaxed text-[var(--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-[var(--text-placeholder)] hover:text-[var(--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-[var(--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.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.target && rect && (\n          <div className=\"text-center text-xs italic text-[var(--text-placeholder)]\">\n            {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

@@ -1,10 +1,57 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { ButtonVariant } from '../components/ui.js';
+import { f as ButtonVariant } from '../kit-labels-Mz8zZHIF.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
+import '../components/data-table-labels.js';
+import '../components/mini-calendar.js';
+import '../components/calendar-heatmap.js';
+import '../components/popover.js';
+import '../components/chip.js';
+import 'lucide-react';
+import '../components/field-sync.js';
 import '../components/tooltip.js';
 import '../hooks/use-anchored-rect.js';
 import '../lib/clipping.js';
+import '../tour/tour.js';
+import '../search/command-palette.js';
+import '../search/global-search.js';
+import '../search/search-index.js';
+import '../components/month-picker.js';
+import '../components/page-contents.js';
+import '../components/series-chart-labels.js';
+import '../components/pie-chart-labels.js';
+import '../components/sparkline.js';
+import '../components/stat-tile.js';
+import '../components/signature-pad.js';
+import '../components/password-strength.js';
+import '../components/danger-confirm.js';
+import '../components/swatch-picker.js';
+import '../components/tile-radio.js';
+import '../components/icon-picker.js';
+import '../components/dialog-frame.js';
+import '../components/modal.js';
+import '../hooks/use-search-param-state.js';
+import '../components/measured-grid.js';
+import '../feedback/feedback-attachment.js';
+import '../feedback/feedback-dialog.js';
+import '../feedback/feedback-thread.js';
+import '../feedback/feedback-inbox.js';
+import '../components/account-settings-labels.js';
+import '../components/confirm-dialog.js';
+import '../components/floating-panel.js';
+import '../components/bulk-action-bar.js';
+import '../components/list.js';
+import '../components/breadcrumbs.js';
+import '../components/toast.js';
+import '../components/description-list.js';
+import '../components/line-items.js';
+import '../components/progress-bar.js';
+import '../components/signed-amount.js';
+import '../components/error-boundary.js';
+import '../components/authed-image.js';
+import '../hooks/use-authed-src.js';
+import '../components/image-grid.js';
+import '../components/lightbox.js';
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the

package/dist/wizard/use-wizard.js

@@ -1,5 +1,5 @@
 "use client";
-import { useCallback, useEffect, useReducer, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useReducer, useRef, useState } from "react";
 import { useSearchParams } from "react-router";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { DEFAULT_WIZARD_LABELS } from "./types.js";
@@ -91,7 +91,9 @@ function useWizard(options) {
     onValidationFailed
   } = options;
   const stepsRef = useRef(steps);
-  stepsRef.current = steps;
+  useLayoutEffect(() => {
+    stepsRef.current = steps;
+  }, [steps]);
   const wizardLabels = useKitLabels("wizard", DEFAULT_WIZARD_LABELS, {
     missingRequired: missingRequiredMessage
   });