@eifi1/ui-kit 0.22.0 → 0.23.0

package/dist/shell/top-bar-brand.d.ts

@@ -1,6 +1,12 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
-import { b3 as KitLinkProps, b2 as KitLinkComponent } from '../kit-labels-R8mIAc9N.js';
+import { bj as KitLinkProps, bi as KitLinkComponent } from '../feedback-BxeQVzwq.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-B7OdnM0S.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
@@ -8,11 +14,7 @@ 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 '../wizard/types.js';
 import '../tour/tour.js';
 import '../search/command-palette.js';
@@ -33,9 +35,6 @@ import '../components/dialog-frame.js';
 import '../components/modal.js';
 import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
-import '../feedback-attachment-NhUm7Zga.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import '../components/account-settings-labels.js';
 import '../components/floating-panel.js';
 import '../components/bulk-action-bar.js';
@@ -65,6 +64,10 @@ import '../components/inline-edit-field.js';
 import '../lib/iban.js';
 import '../lib/phone.js';
 import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';
 
 interface TopBarBrandProps extends Omit<KitLinkProps, "href" | "children"> {
     /** The brand mark — an SVG, sized by the caller or `h-6 w-auto` by default. */

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

@@ -11,9 +11,9 @@ import '../components/chip.js';
 
 /**
  * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a
- * `link` navigates via react-router, and a `divider` draws a rule. Non-divider
- * rows close the menu automatically when chosen. `kind` may be omitted for
- * actions, keeping the common case terse.
+ * `link` navigates via react-router, a `divider` draws a rule, and a `heading` names
+ * the rows after it. Action and link rows close the menu automatically when chosen.
+ * `kind` may be omitted for actions, keeping the common case terse.
  *
  * The rows are {@link MenuItem}s, so they take its options: `tone: "danger"` for the
  * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the
@@ -46,6 +46,34 @@ type TopBarMenuEntry = {
 } | {
     kind: "divider";
     key: string;
+} | {
+    /**
+     * A group heading (0.23, keksdose's guided-tours menu): the rows after it, up to
+     * the next heading, the next `divider` or the end of `entries`, are ONE group
+     * named by `label`. keksdose files its tours by topic and separated the blocks
+     * with bare dividers — "the kit's menu has no heading row to name them with"
+     * (tour-menu.tsx) — so a sighted reader had to guess what each block was and a
+     * screen reader was told nothing at all.
+     *
+     * Not a row: it takes no focus, the arrow keys (and Home/End) pass over it, and it
+     * never closes the menu. It is announced the way the kit's other grouped lists
+     * announce theirs (`CommandPalette`): the group's rows sit in a `role="group"`
+     * whose `aria-labelledby` is this heading, so a reader says "On this page, group"
+     * when the focus enters the first row, and nothing between rows.
+     *
+     * A divider ENDS the group, so a closing row such as "All tours…" behind a rule
+     * belongs to no topic. A heading with no rows under it is not drawn — an empty
+     * group names nothing; build the list from data and it may well be empty.
+     *
+     * The menu-wide `heading` prop is the panel's title, drawn once above everything;
+     * with group headings it is usually redundant (two stacked caps lines read as one),
+     * and the trigger's `ariaLabel` already names the menu.
+     */
+    kind: "heading";
+    key: string;
+    /** The group's name, shown above its rows and announced as the group's name. Keep
+     *  it short: it is set in small caps and wraps on a narrow panel. */
+    label: ReactNode;
 };
 /**
  * The non-interactive identity block at the top of an account menu — kastlan's name +
@@ -78,6 +106,11 @@ interface TopBarMenuHeader {
  * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a
  * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a
  * free-content `footer` (the legal links).
+ *
+ * A long menu is grouped by topic with `{ kind: "heading" }` entries (0.23) — see
+ * {@link TopBarMenuEntry}. There is no separate phone layout: the panel is the same
+ * hover panel at 390px, kept inside the viewport by `HoverMenu`, and a heading wraps
+ * rather than widening it.
  */
 declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, href, ariaLabel, heading, header, entries, children, footer, footerLabel, align, panelClassName, }: {
     /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */

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

@@ -1,12 +1,30 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useLayoutEffect, useRef } from "react";
+import { useId, useLayoutEffect, useRef } from "react";
 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";
+function toBlocks(entries) {
+  const blocks = [];
+  let group = null;
+  for (const entry of entries) {
+    if (entry.kind === "heading") {
+      group = { kind: "group", heading: entry, rows: [] };
+      blocks.push(group);
+    } else if (entry.kind === "divider") {
+      group = null;
+      blocks.push({ kind: "loose", entry });
+    } else if (group) {
+      group.rows.push(entry);
+    } else {
+      blocks.push({ kind: "loose", entry });
+    }
+  }
+  return blocks.filter((block) => block.kind === "loose" || block.rows.length > 0);
+}
 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]";
 function MenuSection({ className, children }) {
@@ -47,6 +65,7 @@ function TopBarActionMenu({
   align,
   panelClassName
 }) {
+  const uid = useId();
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
@@ -85,6 +104,35 @@ function TopBarActionMenu({
         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)]";
+        const row = (entry) => /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            href: entry.to,
+            renderLink: ({ href: href2, ...p }) => /* @__PURE__ */ jsx(Link, { to: href2, ...p }),
+            onClick: close,
+            leading: entry.icon,
+            trailing: entry.trailing,
+            tone: entry.tone,
+            current: entry.current,
+            disabled: entry.disabled,
+            children: entry.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            onClick: () => {
+              entry.onSelect();
+              close();
+            },
+            leading: entry.icon,
+            trailing: entry.trailing,
+            tone: entry.tone,
+            checked: entry.checked,
+            checkable: entry.checkable,
+            disabled: entry.disabled,
+            children: entry.label
+          }
+        ) }, entry.key);
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
           /* @__PURE__ */ jsxs("ul", { className: cn("py-1", panelClassName), onKeyDown: keepTabInsidePanel, children: [
@@ -94,39 +142,32 @@ function TopBarActionMenu({
               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) => {
-              if (entry.kind === "divider") {
-                return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-[var(--border)]" }, entry.key);
-              }
-              return /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  href: entry.to,
-                  renderLink: ({ href: href2, ...p }) => /* @__PURE__ */ jsx(Link, { to: href2, ...p }),
-                  onClick: close,
-                  leading: entry.icon,
-                  trailing: entry.trailing,
-                  tone: entry.tone,
-                  current: entry.current,
-                  disabled: entry.disabled,
-                  children: entry.label
+            toBlocks(entries).map((block, i, blocks) => {
+              if (block.kind === "loose") {
+                const entry = block.entry;
+                if (entry.kind === "divider") {
+                  return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-[var(--border)]" }, entry.key);
                 }
-              ) : /* @__PURE__ */ jsx(
-                MenuItem,
-                {
-                  onClick: () => {
-                    entry.onSelect();
-                    close();
-                  },
-                  leading: entry.icon,
-                  trailing: entry.trailing,
-                  tone: entry.tone,
-                  checked: entry.checked,
-                  checkable: entry.checkable,
-                  disabled: entry.disabled,
-                  children: entry.label
-                }
-              ) }, entry.key);
+                return row(entry);
+              }
+              const headingId = `${uid}-group-${i}`;
+              const before = blocks[i - 1];
+              const tight = !before || before.kind === "loose" && before.entry.kind === "divider";
+              return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    id: headingId,
+                    role: "presentation",
+                    className: cn(
+                      "px-3 pb-0.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] [overflow-wrap:anywhere]",
+                      tight ? "pt-1" : "pt-2.5"
+                    ),
+                    children: block.heading.label
+                  }
+                ),
+                /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": headingId, children: block.rows.map(row) })
+              ] }, block.heading.key);
             }),
             children?.(close),
             footerBody != null && footerBody !== false && /* @__PURE__ */ jsx(MenuSection, { className: "mt-1 border-t border-[var(--border)] px-3 py-2", children: footerLabel ? /* @__PURE__ */ jsx("nav", { "aria-label": footerLabel, className: footerClass, children: footerBody }) : /* @__PURE__ */ jsx("div", { className: footerClass, children: footerBody }) })

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 { 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  href,\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  /**\n   * Make the trigger a LINK to this route (keksdose dev #585, Marcel: \"clicking on the\n   * guided tours icon shall lead to the tours page like the all tours element does\").\n   * A click or Enter follows it and shuts the panel; hover still opens the panel after\n   * the usual delay, and ↓/↑ on the focused trigger still open it onto the first/last\n   * row, so the rows stay reachable by keyboard. A tap on a touch screen follows the\n   * link — so use it where the destination offers everything the menu does. Rendered as\n   * an `<a>` (the router's `Link`) with `aria-haspopup=\"menu\"` and `aria-expanded`,\n   * named by `ariaLabel`: a link inside the kit's button would be interactive content\n   * inside interactive content.\n   */\n  href?: 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, close }) => {\n        // One element for both kinds: the router's link when `href` is set, else the\n        // kit's button. Same classes and face either way.\n        const control = (className: string, children: ReactNode, label?: string) =>\n          href ? (\n            <Link to={href} onClick={close} aria-label={label} className={className}>\n              {children}\n            </Link>\n          ) : (\n            <button type=\"button\" onClick={toggle} aria-label={label} className={className}>\n              {children}\n            </button>\n          );\n        if (trigger) {\n          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\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            </>,\n          );\n        }\n        if (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          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\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            </>,\n          );\n        }\n        return control(cn(TOPBAR_TRIGGER_CLASS, triggerClassName), icon, ariaLabel);\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":["children","href"]}
+{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useId, 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, a `divider` draws a rule, and a `heading` names\n * the rows after it. Action and link rows close the menu automatically when chosen.\n * `kind` may be omitted for 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       * A group heading (0.23, keksdose's guided-tours menu): the rows after it, up to\n       * the next heading, the next `divider` or the end of `entries`, are ONE group\n       * named by `label`. keksdose files its tours by topic and separated the blocks\n       * with bare dividers — \"the kit's menu has no heading row to name them with\"\n       * (tour-menu.tsx) — so a sighted reader had to guess what each block was and a\n       * screen reader was told nothing at all.\n       *\n       * Not a row: it takes no focus, the arrow keys (and Home/End) pass over it, and it\n       * never closes the menu. It is announced the way the kit's other grouped lists\n       * announce theirs (`CommandPalette`): the group's rows sit in a `role=\"group\"`\n       * whose `aria-labelledby` is this heading, so a reader says \"On this page, group\"\n       * when the focus enters the first row, and nothing between rows.\n       *\n       * A divider ENDS the group, so a closing row such as \"All tours…\" behind a rule\n       * belongs to no topic. A heading with no rows under it is not drawn — an empty\n       * group names nothing; build the list from data and it may well be empty.\n       *\n       * The menu-wide `heading` prop is the panel's title, drawn once above everything;\n       * with group headings it is usually redundant (two stacked caps lines read as one),\n       * and the trigger's `ariaLabel` already names the menu.\n       */\n      kind: \"heading\";\n      key: string;\n      /** The group's name, shown above its rows and announced as the group's name. Keep\n       *  it short: it is set in small caps and wraps on a narrow panel. */\n      label: ReactNode;\n    };\n\ntype HeadingEntry = Extract<TopBarMenuEntry, { kind: \"heading\" }>;\ntype DividerEntry = Extract<TopBarMenuEntry, { kind: \"divider\" }>;\ntype RowEntry = Exclude<TopBarMenuEntry, HeadingEntry | DividerEntry>;\n\n/** What the panel draws from `entries`: loose rows and rules, and headed groups. */\ntype Block = { kind: \"loose\"; entry: RowEntry | DividerEntry } | { kind: \"group\"; heading: HeadingEntry; rows: RowEntry[] };\n\n/**\n * Cut `entries` into blocks: a heading opens a group that takes the rows after it until\n * the next heading or divider; everything else stands alone, as it always has.\n */\nfunction toBlocks(entries: readonly TopBarMenuEntry[]): Block[] {\n  const blocks: Block[] = [];\n  let group: Extract<Block, { kind: \"group\" }> | null = null;\n  for (const entry of entries) {\n    if (entry.kind === \"heading\") {\n      group = { kind: \"group\", heading: entry, rows: [] };\n      blocks.push(group);\n    } else if (entry.kind === \"divider\") {\n      group = null;\n      blocks.push({ kind: \"loose\", entry });\n    } else if (group) {\n      group.rows.push(entry);\n    } else {\n      blocks.push({ kind: \"loose\", entry });\n    }\n  }\n  // A heading with nothing under it names nothing: not drawn (see the `heading` kind).\n  return blocks.filter((block) => block.kind === \"loose\" || block.rows.length > 0);\n}\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 *\n * A long menu is grouped by topic with `{ kind: \"heading\" }` entries (0.23) — see\n * {@link TopBarMenuEntry}. There is no separate phone layout: the panel is the same\n * hover panel at 390px, kept inside the viewport by `HoverMenu`, and a heading wraps\n * rather than widening it.\n */\nexport function TopBarActionMenu({\n  icon,\n  iconBadge,\n  trigger,\n  triggerClassName,\n  href,\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  /**\n   * Make the trigger a LINK to this route (keksdose dev #585, Marcel: \"clicking on the\n   * guided tours icon shall lead to the tours page like the all tours element does\").\n   * A click or Enter follows it and shuts the panel; hover still opens the panel after\n   * the usual delay, and ↓/↑ on the focused trigger still open it onto the first/last\n   * row, so the rows stay reachable by keyboard. A tap on a touch screen follows the\n   * link — so use it where the destination offers everything the menu does. Rendered as\n   * an `<a>` (the router's `Link`) with `aria-haspopup=\"menu\"` and `aria-expanded`,\n   * named by `ariaLabel`: a link inside the kit's button would be interactive content\n   * inside interactive content.\n   */\n  href?: 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  // Names the groups' headings for `aria-labelledby`. Positional rather than from the\n  // entry's `key`, which is the caller's text and may hold a space — and a space in\n  // `aria-labelledby` is a list separator.\n  const uid = useId();\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      align={align}\n      trigger={({ open, toggle, close }) => {\n        // One element for both kinds: the router's link when `href` is set, else the\n        // kit's button. Same classes and face either way.\n        const control = (className: string, children: ReactNode, label?: string) =>\n          href ? (\n            <Link to={href} onClick={close} aria-label={label} className={className}>\n              {children}\n            </Link>\n          ) : (\n            <button type=\"button\" onClick={toggle} aria-label={label} className={className}>\n              {children}\n            </button>\n          );\n        if (trigger) {\n          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\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            </>,\n          );\n        }\n        if (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          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\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            </>,\n          );\n        }\n        return control(cn(TOPBAR_TRIGGER_CLASS, triggerClassName), icon, ariaLabel);\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        /** One action or link row — loose, or inside a heading's group. */\n        const row = (entry: RowEntry) => (\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        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            {toBlocks(entries).map((block, i, blocks) => {\n              if (block.kind === \"loose\") {\n                const entry = block.entry;\n                if (entry.kind === \"divider\") {\n                  return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n                }\n                return row(entry);\n              }\n              const headingId = `${uid}-group-${i}`;\n              const before = blocks[i - 1];\n              // Under a rule (or at the top of the rows) the rule's margin is the gap;\n              // straight under another group's last row the heading makes its own.\n              const tight = !before || (before.kind === \"loose\" && before.entry.kind === \"divider\");\n              return (\n                <li key={block.heading.key} role=\"none\">\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className={cn(\n                      \"px-3 pb-0.5 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)] [overflow-wrap:anywhere]\",\n                      tight ? \"pt-1\" : \"pt-2.5\",\n                    )}\n                  >\n                    {block.heading.label}\n                  </div>\n                  <ul role=\"group\" aria-labelledby={headingId}>\n                    {block.rows.map(row)}\n                  </ul>\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":["children","href"]}

package/dist/shell.d.ts

@@ -13,7 +13,12 @@ import './theme/theme-store.js';
 import 'zustand/middleware';
 import 'zustand';
 import 'lucide-react';
-import './kit-labels-R8mIAc9N.js';
+import './feedback-BxeQVzwq.js';
+import './feedback-attachment-fGAzZPf0.js';
+import './feedback/feedback-inbox.js';
+import './components/tooltip.js';
+import './hooks/use-anchored-rect.js';
+import './lib/clipping.js';
 import './data-table-labels-B7OdnM0S.js';
 import './components/data-table-sort.js';
 import './components/swipeable-row.js';
@@ -22,9 +27,6 @@ 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';
@@ -45,9 +47,6 @@ import './components/dialog-frame.js';
 import './components/modal.js';
 import './hooks/use-search-param-state.js';
 import './components/measured-grid.js';
-import './feedback-attachment-NhUm7Zga.js';
-import './feedback/feedback-thread.js';
-import './feedback/feedback-inbox.js';
 import './components/account-settings-labels.js';
 import './components/floating-panel.js';
 import './components/bulk-action-bar.js';
@@ -77,6 +76,10 @@ import './components/inline-edit-field.js';
 import './lib/iban.js';
 import './lib/phone.js';
 import './components/sign-chip.js';
+import './components/column-mapper.js';
+import './lib/column-mapping.js';
+import './lib/table-text.js';
+import './components/field-parts.js';
 import './components/menu-item.js';
 import './components/user-avatar.js';
 import './components/status-dot.js';

package/dist/table-text.d.ts

@@ -1 +1 @@
-export { DecimalRule, ParseTableOptions, ParsedTable, cellNumber, isCellNumber, parseRows, parseTable, splitRow } from './lib/table-text.js';
+export { DecimalRule, ParseTableOptions, ParseTextTableOptions, ParsedTable, TableLine, TableSeparator, TextTable, cellNumber, isCellNumber, parseRows, parseTable, parseTextTable, splitRow, tableNumber } from './lib/table-text.js';

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

@@ -1,7 +1,13 @@
 import * as react from 'react';
 import { ReactNode, ReactElement } from 'react';
-import { f as ButtonVariant } from '../kit-labels-R8mIAc9N.js';
+import { f as ButtonVariant } from '../feedback-BxeQVzwq.js';
 import { UseWizardReturn, WizardLabels } from './types.js';
+import '../feedback-attachment-fGAzZPf0.js';
+import '../feedback/feedback-inbox.js';
+import 'lucide-react';
+import '../components/tooltip.js';
+import '../hooks/use-anchored-rect.js';
+import '../lib/clipping.js';
 import '../data-table-labels-B7OdnM0S.js';
 import '../components/data-table-sort.js';
 import '../components/swipeable-row.js';
@@ -9,11 +15,7 @@ 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';
@@ -33,9 +35,6 @@ import '../components/dialog-frame.js';
 import '../components/modal.js';
 import '../hooks/use-search-param-state.js';
 import '../components/measured-grid.js';
-import '../feedback-attachment-NhUm7Zga.js';
-import '../feedback/feedback-thread.js';
-import '../feedback/feedback-inbox.js';
 import '../components/account-settings-labels.js';
 import '../components/floating-panel.js';
 import '../components/bulk-action-bar.js';
@@ -65,6 +64,10 @@ import '../components/inline-edit-field.js';
 import '../lib/iban.js';
 import '../lib/phone.js';
 import '../components/sign-chip.js';
+import '../components/column-mapper.js';
+import '../lib/column-mapping.js';
+import '../lib/table-text.js';
+import '../components/field-parts.js';
 
 /**
  * The chrome around a wizard: the step indicator, the step content, and the
@@ -86,9 +89,9 @@ import '../components/sign-chip.js';
  * `isCommitStep`), so the policy options — `cancellable`, `onExit`, `commits`,
  * `onDone` — are all set on `useWizard`. What is set HERE is how the Finish button
  * looks and what wraps it, because that is presentation and usually depends on
- * state the app holds (a "replace everything" toggle, a write lock).
+ * state the app holds (a "replace everything" toggle, a write lock — `finishCommit`).
  */
-declare function StepperNav<TData extends Record<string, unknown>>({ wizard, children, title, description, className, labels, finishVariant, finishDisabled, doneDisabled, renderFinish, }: {
+declare function StepperNav<TData extends Record<string, unknown>>({ wizard, children, title, description, className, labels, finishVariant, finishDisabled, finishCommit, finishDisabledReason, doneDisabled, renderFinish, }: {
     wizard: UseWizardReturn<TData>;
     children: ReactNode;
     title?: ReactNode;
@@ -101,6 +104,30 @@ declare function StepperNav<TData extends Record<string, unknown>>({ wizard, chi
     /** Disable Finish for a reason of the app's own, on top of the kit's gates
      *  (`canFinish`, submitting, validating). */
     finishDisabled?: boolean;
+    /**
+     * Finish COMMITS — {@link Button}'s `commit`, handed to the Finish button. Under a
+     * locked {@link WriteLockProvider} it is `aria-disabled` but focusable, with the lock's
+     * reason in the kit Tooltip, and a click (or Enter) does not run `wizard.finish`.
+     * Every other button of the bar stays live: the steps before the commit write nothing,
+     * so the whole wizard can still be walked through on a read-only page.
+     *
+     * keksdose G1: its YNAB import runs the mapping wizard on the read-only demo (dev#497)
+     * and locks only the confirm step's Finish — by cloning `commit` into the element
+     * `renderFinish` hands it, because StepperNav took no `commit` of its own. That clone
+     * still works; this is the same thing without one. Named `finishCommit` beside
+     * `finishVariant` / `finishDisabled` rather than a bare `commit`, which on a component
+     * with five buttons would not say which one saves — and would read like `useWizard`'s
+     * `commits`, which is a step's policy, not a lock.
+     */
+    finishCommit?: boolean;
+    /**
+     * Why Finish is not available — {@link Button}'s `disabledReason` on the Finish button:
+     * `aria-disabled` and focusable, the reason in the kit Tooltip and on the button's
+     * `aria-describedby`, `wizard.finish` not run. The explained form of `finishDisabled`
+     * (a native `disabled` takes the button out of the tab order, so its reason never
+     * reaches a keyboard). Under a lock with `finishCommit`, the lock's reason wins.
+     */
+    finishDisabledReason?: ReactNode;
     /**
      * Disable Done — the button of the last step after a commit — while the step still
      * has work of its own running. keksdose's YNAB import ends on a recurring step whose
@@ -126,6 +153,10 @@ declare function StepperNav<TData extends Record<string, unknown>>({ wizard, chi
      * re-derive (the problem this component exists to end); `onBeforeFinish` can veto
      * a click but cannot explain a disabled button. The element is a plain `<Button>`,
      * so a wrapper that clones it with `disabled` works as expected.
+     *
+     * For the write lock itself there is no need to wrap any more: `finishCommit` (and
+     * `finishDisabledReason`) put the kit Button's own Tooltip on Finish. An element
+     * cloned with `commit` here keeps working the same way.
      */
     renderFinish?: (button: ReactElement) => ReactNode;
 }): react.JSX.Element;

package/dist/wizard/stepper-nav.js

@@ -18,6 +18,8 @@ function StepperNav({
   labels,
   finishVariant = "brand",
   finishDisabled = false,
+  finishCommit,
+  finishDisabledReason,
   doneDisabled = false,
   renderFinish
 }) {
@@ -53,6 +55,8 @@ function StepperNav({
         variant: finishVariant,
         "data-tour": "wizard-finish",
         onClick: wizard.finish,
+        commit: finishCommit,
+        disabledReason: finishDisabledReason,
         disabled: wizard.isSubmitting || pending || !canFinish || finishDisabled,
         "aria-busy": wizard.isSubmitting || pending || void 0,
         children: [

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

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