@eifi1/ui-kit 0.33.1 → 0.34.0

package/dist/components/help-popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/help-popover.tsx"],"sourcesContent":["import { useId } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { HelpCircle } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport type { RemLength } from \"../hooks/use-breakpoint\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { Popover } from \"./popover\";\n\n/** {@link HelpPopover}'s props. */\nexport interface HelpPopoverProps {\n  /**\n   * Names the \"?\" and the panel — a short question (\"What do the statuses mean?\") or\n   * \"About <field>\" (\"About the settlement date\"), in the reader's language. Required:\n   * a \"?\" named \"?\" tells a screen reader nothing about what it opens. Not the help\n   * itself, which is `children`.\n   */\n  label: string;\n  /** The help: a paragraph, or a few. Rendered in the panel at body size. */\n  children: ReactNode;\n  /** The panel's width — {@link Popover}'s `width`. Default `\"20rem\"`, a paragraph's\n   *  measure; it follows the text size and never exceeds the viewport. */\n  width?: number | RemLength;\n  /** Classes for the \"?\" button. */\n  className?: string;\n}\n\n/** A paragraph's measure: 320 px at Normal, in rem so it grows with the text size. */\nconst HELP_WIDTH: RemLength = \"20rem\";\n\n/**\n * A \"?\" whose HELP opens on a tap, a click or Enter — for a paragraph too long to print\n * under a field (0.34, keksdose K3, live #400: *\"Remove the long text and move it behind\n * a clickable notice like a circle\"*).\n *\n * **Help, not a fact** (docs/text-size-harmonization.md §10.23). {@link FieldHint} is\n * the \"?\" for a FACT — a format, a limit, a consequence — and since 0.32 it turns into\n * its own words under the field at Large and on a touch screen (`useInlineHint`, §4 \"No\n * fact only in a tooltip\"), because a fact a reader cannot reach is a fact they do not\n * have. That rule stays. This part is for HELP: why the field exists, how to choose,\n * what the options mean — text the field is usable without. Printed inline it was the\n * longest thing in keksdose's transaction form (four statuses, ~500 characters, on every\n * new row on a phone). `useInlineHint` turns only a FieldHint into a caption, so this\n * one stays on the label line at every size.\n *\n * **On a field.** Pass it as `hint`, as a FieldHint is passed: every kit field that\n * puts a FieldHint on its label line puts this there too, as it does any `hint` that is\n * not text (Input, Select, Textarea, NumberInput, AmountInput, the comboboxes and\n * pickers, ToggleGroup, {@link FieldStrip}) — and an unlabelled one at its end edge,\n * outside the box. The `@eifi1/ui-kit/rhf` bindings draw every `hint` under the field,\n * this one included. It also stands on its own, beside a heading or a column title.\n *\n * **A popover, not a tooltip**: a tooltip bubble is for a line, and opens on hover a\n * finger never makes. This is the kit {@link Popover}: it opens and closes on a tap or a\n * click (and on Enter or Space, as any button does), closes on Escape and on a press\n * outside, and takes the focus into its panel and gives it back to the \"?\" on close. The\n * panel is a `dialog` named by `label` and described by the help, so a screen reader\n * reads both on opening. The \"?\" says `aria-expanded` and `aria-haspopup=\"dialog\"`.\n *\n * **\"?\" rather than \"!\"**: it answers a question (\"what is the difference between\n * accepted and cleared?\", keksdose live #247); \"!\" is a warning.\n *\n * ```tsx\n * <Select label=\"Status\" hint={\n *   <HelpPopover label=\"What do the statuses mean?\">\n *     Pending: … Accepted: … Cleared: … Reconciled: …\n *   </HelpPopover>\n * } … />\n * ```\n */\nexport function HelpPopover({ label, children, width = HELP_WIDTH, className }: HelpPopoverProps) {\n  const panelId = useId();\n  const bodyId = useId();\n  return (\n    <Popover\n      width={width}\n      panelId={panelId}\n      // The panel is named by the question and described by the answer, so focus moving\n      // into it reads both.\n      aria-label={label}\n      aria-describedby={bodyId}\n      trigger={({ open, toggle, ref }) => (\n        <button\n          ref={ref}\n          // Never `submit`: the \"?\" sits on a field's label line, inside a form.\n          type=\"button\"\n          aria-label={label}\n          aria-expanded={open}\n          aria-haspopup=\"dialog\"\n          aria-controls={open ? panelId : undefined}\n          onClick={(e) => {\n            // The \"?\" sits in a label strip: the press is the \"?\"'s, not the field's.\n            e.preventDefault();\n            toggle();\n          }}\n          // FieldHint's look, so the two marks read as one family on a label line; the\n          // open one holds its hover colour while its panel shows.\n          className={cn(\n            \"flex rounded-full text-placeholder transition-colors hover:text-secondary\",\n            open && \"text-secondary\",\n            FOCUS_RING,\n            className,\n          )}\n        >\n          <HelpCircle aria-hidden className=\"size-3.5\" />\n        </button>\n      )}\n    >\n      {() => (\n        <div id={bodyId} className=\"space-y-2 text-sm leading-snug text-primary\">\n          {children}\n        </div>\n      )}\n    </Popover>\n  );\n}\n"],"mappings":";AAuGU;AAvGV,SAAS,aAAa;AAEtB,SAAS,kBAAkB;AAC3B,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAqBxB,MAAM,aAAwB;AA0CvB,SAAS,YAAY,EAAE,OAAO,UAAU,QAAQ,YAAY,UAAU,GAAqB;AAChG,QAAM,UAAU,MAAM;AACtB,QAAM,SAAS,MAAM;AACrB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MAGA,cAAY;AAAA,MACZ,oBAAkB;AAAA,MAClB,SAAS,CAAC,EAAE,MAAM,QAAQ,IAAI,MAC5B;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UAEA,MAAK;AAAA,UACL,cAAY;AAAA,UACZ,iBAAe;AAAA,UACf,iBAAc;AAAA,UACd,iBAAe,OAAO,UAAU;AAAA,UAChC,SAAS,CAAC,MAAM;AAEd,cAAE,eAAe;AACjB,mBAAO;AAAA,UACT;AAAA,UAGA,WAAW;AAAA,YACT;AAAA,YACA,QAAQ;AAAA,YACR;AAAA,YACA;AAAA,UACF;AAAA,UAEA,8BAAC,cAAW,eAAW,MAAC,WAAU,YAAW;AAAA;AAAA,MAC/C;AAAA,MAGD,gBACC,oBAAC,SAAI,IAAI,QAAQ,WAAU,+CACxB,UACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/components/hover-menu.d.ts

@@ -1,6 +1,4 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode } from 'react';
-
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 /**
  * Exported and `<div>`-shaped: the top bar composes several of these side by side, and
  * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an
@@ -9,7 +7,7 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
  * `children` is omitted from the div attributes because here it is a render prop taking
  * the panel's `close`, not a `ReactNode`.
  */
-interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
+export interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<"div">, "children"> {
     /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —
      *  following it should shut a panel hover opened (TopBarActionMenu `href`). */
     trigger: (state: {
@@ -21,20 +19,23 @@ interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<"div">, "children
     /**
      * Which edge of the trigger the panel lines up with. `start`/`end` follow the
      * reading direction (`end` is the right edge in LTR, the left in RTL); `left`/`right`
-     * are physical and kept for existing callers. Default `end` — the same right-aligned
-     * panel as before in LTR, mirrored in RTL.
+     * are physical and deprecated ({@link PhysicalAlign}). Default `end` — the same
+     * right-aligned panel as before in LTR, mirrored in RTL.
      */
-    align?: "start" | "end" | "left" | "right";
+    align?: "start" | "end" | PhysicalAlign;
     panelClassName?: string;
     /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */
     className?: string;
-    /**
-     * @deprecated Use the DOM spelling `aria-label`, which names the `role="menu"` panel. Kept working because keksdose, kastlan and lenkbank all pass
-     * this today and a rename to save one line of resolution is not a patch release; it
-     * loses to `aria-label` wherever both are given. Removal is a later minor.
-     */
-    ariaLabel?: string;
+    /** The WRAPPER, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
+     *  merged with its own ref, which the outside click and the hover are measured on. */
+    ref?: Ref<HTMLDivElement>;
 }
-declare function HoverMenu({ trigger, children, align, panelClassName, className, ariaLabel, "aria-label": ariaLabelAttr, ...rest }: HoverMenuProps): react.JSX.Element;
-
-export { HoverMenu, type HoverMenuProps };
+/**
+ * @deprecated 0.34 — `"start"` / `"end"`, which follow the reading direction: `"right"`
+ * is `"end"` in a left-to-right page, the default; removed in 0.35 (refactor audit
+ * 2026-10, API-6e). The physical edges HoverMenu's `align` — and TopBarActionMenu's and
+ * FeedbackMenu's, which hand it on — still take.
+ */
+type PhysicalAlign = "left" | "right";
+export declare function HoverMenu({ trigger, children, align, panelClassName, className, "aria-label": ariaLabel, ref, ...rest }: HoverMenuProps): import("react").JSX.Element;
+export {};

package/dist/components/hover-menu.js

@@ -1,8 +1,11 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
-import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
+import { mergeRefs } from "./field-parts.js";
+import { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss.js";
+import { anchoredInline } from "../hooks/use-anchored-panel.js";
+import { dirOf } from "../lib/direction.js";
 const OPEN_DELAY_MS = 120;
 const CLOSE_DELAY_MS = 120;
 const ALIGN_CLASS = { start: "start-0", end: "end-0", left: "left-0", right: "right-0" };
@@ -30,11 +33,12 @@ function HoverMenu({
   align = "end",
   panelClassName,
   className,
-  ariaLabel,
-  "aria-label": ariaLabelAttr,
+  "aria-label": ariaLabel,
+  ref,
   ...rest
 }) {
   const wrapperRef = useRef(null);
+  const setWrapper = useMemo(() => mergeRefs(wrapperRef, ref), [ref]);
   const [phase, setPhase] = useState("closed");
   const open = phase === "open" || phase === "closing";
   const [openedByHover, setOpenedByHover] = useState(false);
@@ -86,11 +90,11 @@ function HoverMenu({
     (el) => !menuRef.current?.contains(el)
   ) ?? null;
   const items = () => menuRef.current ? applyMenuSemantics(menuRef.current) : [];
-  useEscapeKey(() => {
+  useDismissLayer(open, () => {
     const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;
     close();
     if (hadFocus) triggerEl()?.focus();
-  }, open);
+  });
   useLayoutEffect(() => {
     if (!open) return;
     const list = items();
@@ -154,13 +158,9 @@ function HoverMenu({
     if (!el) return;
     const rect = el.getBoundingClientRect();
     if (rect.width === 0) return;
-    const margin = 8;
-    const naturalLeft = rect.left - shiftX;
-    const naturalRight = rect.right - shiftX;
-    let next = 0;
-    if (naturalRight > window.innerWidth - margin) next = window.innerWidth - margin - naturalRight;
-    if (naturalLeft + next < margin) next = margin - naturalLeft;
-    setShiftX(next);
+    const natural = { left: rect.left - shiftX, right: rect.right - shiftX };
+    const { left } = anchoredInline(natural, rect.width, { dir: dirOf(el), align: "left" });
+    setShiftX(left - natural.left);
   }, [open]);
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused
@@ -171,12 +171,13 @@ function HoverMenu({
       "div",
       {
         ...rest,
-        ref: wrapperRef,
+        ref: setWrapper,
         className: cn("relative", className),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         onKeyDown: (e) => {
-          rest.onKeyDown?.(e);
+          runOwnKeyDown(e, rest.onKeyDown);
+          if (open) takeEscape(e);
           onKeyDown(e);
         },
         children: [
@@ -195,9 +196,9 @@ function HoverMenu({
                 {
                   ref: menuRef,
                   role: "menu",
-                  "aria-label": ariaLabelAttr ?? ariaLabel,
+                  "aria-label": ariaLabel,
                   className: cn(
-                    "min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+                    "min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-subtle bg-surface shadow-lg",
                     panelClassName
                   ),
                   children: children(close)

package/dist/components/hover-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —\n   *  following it should shut a panel hover opened (TopBarActionMenu `href`). */\n  trigger: (state: { open: boolean; toggle: () => void; close: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * Which edge of the trigger the panel lines up with. `start`/`end` follow the\n   * reading direction (`end` is the right edge in LTR, the left in RTL); `left`/`right`\n   * are physical and kept for existing callers. Default `end` — the same right-aligned\n   * panel as before in LTR, mirrored in RTL.\n   */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /**\n   * @deprecated Use the DOM spelling `aria-label`, which names the `role=\"menu\"` panel. Kept working because keksdose, kastlan and lenkbank all pass\n   * this today and a rename to save one line of resolution is not a patch release; it\n   * loses to `aria-label` wherever both are given. Removal is a later minor.\n   */\n  ariaLabel?: string;\n}\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\nconst ALIGN_CLASS = { start: \"start-0\", end: \"end-0\", left: \"left-0\", right: \"right-0\" } as const;\n\n/** Explicit menu-item roles a caller may already have written. */\nconst ITEM_ROLES = '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]';\n/** What the panel promotes to `menuitem` when the caller wrote plain controls. */\nconst PLAIN_ITEMS = \"button:not([role]),a[href]:not([role])\";\n/** The trigger: the first focusable in the wrapper that is not inside the panel. */\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Give the caller's markup menu semantics.\n *\n * `children` is arbitrary — every caller in the kit renders a `<ul>` of `<li>`s holding\n * `<button>`s and router `<Link>`s — so the panel was a `role=\"menu\"` whose children\n * were a list, list items and plain buttons: no `menuitem` anywhere, which is a menu\n * with nothing in it as far as a screen reader is concerned. Rather than make every\n * caller rewrite its rows, the panel upgrades them after render: controls become\n * `menuitem`s out of the Tab order (the arrow keys move between them), and the list\n * markup in between becomes `role=\"none\"` so the menu owns its items directly. An\n * element that already carries a role is the caller's decision and is left alone.\n */\nfunction applyMenuSemantics(menu: HTMLElement): HTMLElement[] {\n  for (const el of menu.querySelectorAll<HTMLElement>(PLAIN_ITEMS)) el.setAttribute(\"role\", \"menuitem\");\n  const items = Array.from(menu.querySelectorAll<HTMLElement>(ITEM_ROLES));\n  for (const item of items) {\n    item.setAttribute(\"tabindex\", \"-1\");\n    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {\n      if (!el.hasAttribute(\"role\")) el.setAttribute(\"role\", \"none\");\n    }\n  }\n  for (const el of menu.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role]),li:not([role])\")) {\n    el.setAttribute(\"role\", \"none\");\n  }\n  return items.filter((el) => !el.hasAttribute(\"disabled\") && el.getAttribute(\"aria-disabled\") !== \"true\");\n}\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"end\",\n  panelClassName,\n  className,\n  ariaLabel,\n  \"aria-label\": ariaLabelAttr,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  //\n  // State rather than a ref: `close` is handed to the caller's render prop, and a\n  // function that writes a ref must not be reachable from render.\n  const [openedByHover, setOpenedByHover] = useState(false);\n\n  const close = useCallback(() => {\n    setOpenedByHover(false);\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      if (!openedByHover) setPhase(\"closed\");\n      return;\n    }\n    setOpenedByHover(false);\n    setPhase(\"open\");\n  }, [open, openedByHover]);\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        setOpenedByHover(true);\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  useOutsideClick(wrapperRef, close, open);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n  /** Set by a keyboard press on the trigger, so the open that follows moves focus into\n   *  the menu. A hover or a mouse click opens it without taking focus off the page. */\n  const focusOnOpenRef = useRef<\"first\" | \"last\" | null>(null);\n\n  const triggerEl = () =>\n    Array.from(wrapperRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []).find(\n      (el) => !menuRef.current?.contains(el),\n    ) ?? null;\n  const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);\n\n  // Escape closes, from anywhere — it did nothing at all before. Focus goes back to the\n  // trigger only when it was inside the menu: a panel opened by hover while the user is\n  // typing elsewhere must not yank the caret over here on the way out.\n  useEscapeKey(() => {\n    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;\n    close();\n    if (hadFocus) triggerEl()?.focus();\n  }, open);\n\n  // Upgrade the markup every render while open (the caller's rows can change), then\n  // honour a pending keyboard open.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const list = items();\n    const want = focusOnOpenRef.current;\n    focusOnOpenRef.current = null;\n    if (want) (want === \"last\" ? list[list.length - 1] : list[0])?.focus();\n  });\n\n  // Trigger state for assistive technology, on whatever element the caller rendered.\n  // Only where the caller has not said something of its own.\n  useLayoutEffect(() => {\n    const el = triggerEl();\n    if (!el) return;\n    if (!el.hasAttribute(\"aria-haspopup\")) el.setAttribute(\"aria-haspopup\", \"menu\");\n    if (el.getAttribute(\"aria-haspopup\") === \"menu\") el.setAttribute(\"aria-expanded\", String(open));\n  });\n\n  /** ↑/↓ roving focus with wrap, Home/End, Tab leaves (and closes); on the trigger,\n   *  Enter/Space/↓ open onto the first item and ↑ onto the last. */\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    const inMenu = menuRef.current?.contains(target) ?? false;\n    if (!inMenu) {\n      if (target !== triggerEl()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        // The trigger's own click handler does the toggling; this only records that\n        // the press came from a keyboard. Not for a link trigger: Enter follows it, and\n        // a mark left here would pull focus into the panel the next time hover opens it.\n        if (!open && !target.matches(\"a[href]\")) focusOnOpenRef.current = \"first\";\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const edge = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n        if (open) {\n          const list = items();\n          (edge === \"last\" ? list[list.length - 1] : list[0])?.focus();\n        } else {\n          focusOnOpenRef.current = edge;\n          setOpenedByHover(false);\n          setPhase(\"open\");\n        }\n      }\n      return;\n    }\n    if (e.key === \"Tab\") {\n      close();\n      return;\n    }\n    const list = items();\n    if (list.length === 0) return;\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    let next: number | null = null;\n    if (e.key === \"ArrowDown\") next = at < 0 ? 0 : (at + 1) % list.length;\n    else if (e.key === \"ArrowUp\") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === null) return;\n    e.preventDefault();\n    list[next].focus();\n  };\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin. Recomputed on each open; `shiftX` is\n  // subtracted first so the measurement is against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  // Back to 0 on close, adjusted while rendering against the previous `open`.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (!open) setShiftX(0);\n  }\n  useLayoutEffect(() => {\n    if (!open) return;\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const margin = 8;\n    const naturalLeft = rect.left - shiftX;\n    const naturalRight = rect.right - shiftX;\n    let next = 0;\n    if (naturalRight > window.innerWidth - margin) next = window.innerWidth - margin - naturalRight;\n    if (naturalLeft + next < margin) next = margin - naturalLeft;\n    setShiftX(next);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: the mouse handlers are the hover-to-open convenience, and `onKeyDown`\n       catches keys bubbling from the caller's trigger button and the menuitems, which\n       are the keyboard path (Enter/Space/arrows open, arrows move, Escape closes). */\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={wrapperRef}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onKeyDown={(e) => {\n        rest.onKeyDown?.(e);\n        onKeyDown(e);\n      }}\n    >\n      {trigger({ open, toggle, close })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            ALIGN_CLASS[align],\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            // On the element with the role. It used to sit on the role-less wrapper,\n            // where no screen reader reads a name. The DOM spelling wins;\n            // {@link HoverMenuProps.ariaLabel} is the deprecated alias three apps still\n            // pass, so it stays as the fallback rather than as the answer.\n            aria-label={ariaLabelAttr ?? ariaLabel}\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAyRI,SAuBM,KAvBN;AAzRJ,SAAS,aAAa,WAAW,iBAAiB,QAAQ,gBAAgB;AAE1E,SAAS,UAAU;AACnB,SAAS,cAAc,uBAAuB;AAoC9C,MAAM,gBAAgB;AACtB,MAAM,iBAAiB;AAIvB,MAAM,cAAc,EAAE,OAAO,WAAW,KAAK,SAAS,MAAM,UAAU,OAAO,UAAU;AAGvF,MAAM,aAAa;AAEnB,MAAM,cAAc;AAEpB,MAAM,YAAY;AAclB,SAAS,mBAAmB,MAAkC;AAC5D,aAAW,MAAM,KAAK,iBAA8B,WAAW,EAAG,IAAG,aAAa,QAAQ,UAAU;AACpG,QAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,UAAU,CAAC;AACvE,aAAW,QAAQ,OAAO;AACxB,SAAK,aAAa,YAAY,IAAI;AAClC,aAAS,KAAK,KAAK,eAAe,MAAM,OAAO,MAAM,KAAK,GAAG,eAAe;AAC1E,UAAI,CAAC,GAAG,aAAa,MAAM,EAAG,IAAG,aAAa,QAAQ,MAAM;AAAA,IAC9D;AAAA,EACF;AACA,aAAW,MAAM,KAAK,iBAA8B,8CAA8C,GAAG;AACnG,OAAG,aAAa,QAAQ,MAAM;AAAA,EAChC;AACA,SAAO,MAAM,OAAO,CAAC,OAAO,CAAC,GAAG,aAAa,UAAU,KAAK,GAAG,aAAa,eAAe,MAAM,MAAM;AACzG;AAKA,IAAI,cAAmC;AAEhC,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,GAAG;AACL,GAAmB;AACjB,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAgB,QAAQ;AAClD,QAAM,OAAO,UAAU,UAAU,UAAU;AAa3C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,KAAK;AAExD,QAAM,QAAQ,YAAY,MAAM;AAC9B,qBAAiB,KAAK;AACtB,aAAS,QAAQ;AAAA,EACnB,GAAG,CAAC,CAAC;AAEL,QAAM,SAAS,YAAY,MAAM;AAC/B,QAAI,MAAM;AACR,UAAI,CAAC,cAAe,UAAS,QAAQ;AACrC;AAAA,IACF;AACA,qBAAiB,KAAK;AACtB,aAAS,MAAM;AAAA,EACjB,GAAG,CAAC,MAAM,aAAa,CAAC;AAExB,QAAM,mBAAmB;AAAA,IACvB,MAAM,SAAS,CAAC,MAAO,MAAM,YAAY,SAAS,MAAM,WAAW,YAAY,CAAE;AAAA,IACjF,CAAC;AAAA,EACH;AAEA,QAAM,mBAAmB;AAAA,IACvB,MAAM,SAAS,CAAC,MAAO,MAAM,YAAY,WAAW,MAAM,SAAS,YAAY,CAAE;AAAA,IACjF,CAAC;AAAA,EACH;AAGA,YAAU,MAAM;AACd,QAAI,UAAU,WAAW;AACvB,YAAM,KAAK,WAAW,MAAM;AAC1B,yBAAiB,IAAI;AACrB,iBAAS,MAAM;AAAA,MACjB,GAAG,aAAa;AAChB,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B;AACA,QAAI,UAAU,WAAW;AACvB,YAAM,KAAK,WAAW,MAAM,SAAS,QAAQ,GAAG,cAAc;AAC9D,aAAO,MAAM,aAAa,EAAE;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,KAAK,CAAC;AAKV,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,QAAI,gBAAgB,MAAO,eAAc;AACzC,kBAAc;AACd,WAAO,MAAM;AACX,UAAI,gBAAgB,MAAO,eAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,MAAM,KAAK,CAAC;AAEhB,kBAAgB,YAAY,OAAO,IAAI;AAEvC,QAAM,UAAU,OAAuB,IAAI;AAG3C,QAAM,iBAAiB,OAAgC,IAAI;AAE3D,QAAM,YAAY,MAChB,MAAM,KAAK,WAAW,SAAS,iBAA8B,SAAS,KAAK,CAAC,CAAC,EAAE;AAAA,IAC7E,CAAC,OAAO,CAAC,QAAQ,SAAS,SAAS,EAAE;AAAA,EACvC,KAAK;AACP,QAAM,QAAQ,MAAO,QAAQ,UAAU,mBAAmB,QAAQ,OAAO,IAAI,CAAC;AAK9E,eAAa,MAAM;AACjB,UAAM,WAAW,WAAW,SAAS,SAAS,SAAS,aAAa,KAAK;AACzE,UAAM;AACN,QAAI,SAAU,WAAU,GAAG,MAAM;AAAA,EACnC,GAAG,IAAI;AAIP,kBAAgB,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,OAAO,MAAM;AACnB,UAAM,OAAO,eAAe;AAC5B,mBAAe,UAAU;AACzB,QAAI,KAAM,EAAC,SAAS,SAAS,KAAK,KAAK,SAAS,CAAC,IAAI,KAAK,CAAC,IAAI,MAAM;AAAA,EACvE,CAAC;AAID,kBAAgB,MAAM;AACpB,UAAM,KAAK,UAAU;AACrB,QAAI,CAAC,GAAI;AACT,QAAI,CAAC,GAAG,aAAa,eAAe,EAAG,IAAG,aAAa,iBAAiB,MAAM;AAC9E,QAAI,GAAG,aAAa,eAAe,MAAM,OAAQ,IAAG,aAAa,iBAAiB,OAAO,IAAI,CAAC;AAAA,EAChG,CAAC;AAID,QAAM,YAAY,CAAC,MAA0C;AAC3D,UAAM,SAAS,EAAE;AACjB,UAAM,SAAS,QAAQ,SAAS,SAAS,MAAM,KAAK;AACpD,QAAI,CAAC,QAAQ;AACX,UAAI,WAAW,UAAU,EAAG;AAC5B,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AAItC,YAAI,CAAC,QAAQ,CAAC,OAAO,QAAQ,SAAS,EAAG,gBAAe,UAAU;AAAA,MACpE,WAAW,EAAE,QAAQ,eAAe,EAAE,QAAQ,WAAW;AACvD,UAAE,eAAe;AACjB,cAAM,OAAO,EAAE,QAAQ,cAAc,UAAU;AAC/C,YAAI,MAAM;AACR,gBAAMA,QAAO,MAAM;AACnB,WAAC,SAAS,SAASA,MAAKA,MAAK,SAAS,CAAC,IAAIA,MAAK,CAAC,IAAI,MAAM;AAAA,QAC7D,OAAO;AACL,yBAAe,UAAU;AACzB,2BAAiB,KAAK;AACtB,mBAAS,MAAM;AAAA,QACjB;AAAA,MACF;AACA;AAAA,IACF;AACA,QAAI,EAAE,QAAQ,OAAO;AACnB,YAAM;AACN;AAAA,IACF;AACA,UAAM,OAAO,MAAM;AACnB,QAAI,KAAK,WAAW,EAAG;AACvB,UAAM,KAAK,KAAK,QAAQ,SAAS,aAA4B;AAC7D,QAAI,OAAsB;AAC1B,QAAI,EAAE,QAAQ,YAAa,QAAO,KAAK,IAAI,KAAK,KAAK,KAAK,KAAK;AAAA,aACtD,EAAE,QAAQ,UAAW,QAAO,KAAK,IAAI,KAAK,SAAS,KAAK,KAAK,IAAI,KAAK,UAAU,KAAK;AAAA,aACrF,EAAE,QAAQ,OAAQ,QAAO;AAAA,aACzB,EAAE,QAAQ,MAAO,QAAO,KAAK,SAAS;AAC/C,QAAI,SAAS,KAAM;AACnB,MAAE,eAAe;AACjB,SAAK,IAAI,EAAE,MAAM;AAAA,EACnB;AAOA,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,IAAI;AAC3C,MAAI,SAAS,SAAS;AACpB,eAAW,IAAI;AACf,QAAI,CAAC,KAAM,WAAU,CAAC;AAAA,EACxB;AACA,kBAAgB,MAAM;AACpB,QAAI,CAAC,KAAM;AACX,UAAM,KAAK,SAAS;AACpB,QAAI,CAAC,GAAI;AACT,UAAM,OAAO,GAAG,sBAAsB;AACtC,QAAI,KAAK,UAAU,EAAG;AACtB,UAAM,SAAS;AACf,UAAM,cAAc,KAAK,OAAO;AAChC,UAAM,eAAe,KAAK,QAAQ;AAClC,QAAI,OAAO;AACX,QAAI,eAAe,OAAO,aAAa,OAAQ,QAAO,OAAO,aAAa,SAAS;AACnF,QAAI,cAAc,OAAO,OAAQ,QAAO,SAAS;AACjD,cAAU,IAAI;AAAA,EAEhB,GAAG,CAAC,IAAI,CAAC;AAET;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAAC;AAAA;AAAA,QAGE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,cAAc;AAAA,QACd,cAAc;AAAA,QACd,WAAW,CAAC,MAAM;AAChB,eAAK,YAAY,CAAC;AAClB,oBAAU,CAAC;AAAA,QACb;AAAA,QAEC;AAAA,kBAAQ,EAAE,MAAM,QAAQ,MAAM,CAAC;AAAA,UAC/B,QACC;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAW;AAAA,gBACT;AAAA,gBACA,YAAY,KAAK;AAAA,cACnB;AAAA,cACA,OAAO,SAAS,EAAE,WAAW,cAAc,MAAM,MAAM,IAAI;AAAA,cAE3D;AAAA,gBAAC;AAAA;AAAA,kBACC,KAAK;AAAA,kBACL,MAAK;AAAA,kBAKL,cAAY,iBAAiB;AAAA,kBAC7B,WAAW;AAAA,oBACT;AAAA,oBACA;AAAA,kBACF;AAAA,kBAEC,mBAAS,KAAK;AAAA;AAAA,cACjB;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IAEJ;AAAA;AAEJ;","names":["list"]}
+{"version":3,"sources":["../../src/components/hover-menu.tsx"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent as ReactKeyboardEvent, ReactNode, Ref } from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { mergeRefs } from \"./field-parts\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { anchoredInline } from \"../hooks/use-anchored-panel\";\nimport { dirOf } from \"../lib/direction\";\n\n/**\n * Exported and `<div>`-shaped: the top bar composes several of these side by side, and\n * telling them apart — in a test, in a guided tour, in an accessibility tree — needs an\n * attribute the kit does not know about. A closed prop list dropped every one of them.\n *\n * `children` is omitted from the div attributes because here it is a render prop taking\n * the panel's `close`, not a `ReactNode`.\n */\nexport interface HoverMenuProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** The trigger. `toggle` for a button's click; `close` for a trigger that is a LINK —\n   *  following it should shut a panel hover opened (TopBarActionMenu `href`). */\n  trigger: (state: { open: boolean; toggle: () => void; close: () => void }) => ReactNode;\n  children: (close: () => void) => ReactNode;\n  /**\n   * Which edge of the trigger the panel lines up with. `start`/`end` follow the\n   * reading direction (`end` is the right edge in LTR, the left in RTL); `left`/`right`\n   * are physical and deprecated ({@link PhysicalAlign}). Default `end` — the same\n   * right-aligned panel as before in LTR, mirrored in RTL.\n   */\n  align?: \"start\" | \"end\" | PhysicalAlign;\n  panelClassName?: string;\n  /** Extra classes for the WRAPPER (the panel has {@link panelClassName}). */\n  className?: string;\n  /** The WRAPPER, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with its own ref, which the outside click and the hover are measured on. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * @deprecated 0.34 — `\"start\"` / `\"end\"`, which follow the reading direction: `\"right\"`\n * is `\"end\"` in a left-to-right page, the default; removed in 0.35 (refactor audit\n * 2026-10, API-6e). The physical edges HoverMenu's `align` — and TopBarActionMenu's and\n * FeedbackMenu's, which hand it on — still take.\n */\ntype PhysicalAlign = \"left\" | \"right\";\n\n// Hovering waits briefly before opening so sweeping the cursor across a row of\n// triggers doesn't flash menus; closing waits so the cursor can travel from\n// trigger to panel. Click/keyboard toggling is instant (no \"opening\" phase).\nconst OPEN_DELAY_MS = 120;\nconst CLOSE_DELAY_MS = 120;\n\ntype Phase = \"closed\" | \"opening\" | \"open\" | \"closing\";\n\nconst ALIGN_CLASS = { start: \"start-0\", end: \"end-0\", left: \"left-0\", right: \"right-0\" } as const;\n\n/** Explicit menu-item roles a caller may already have written. */\nconst ITEM_ROLES = '[role=\"menuitem\"],[role=\"menuitemcheckbox\"],[role=\"menuitemradio\"]';\n/** What the panel promotes to `menuitem` when the caller wrote plain controls. */\nconst PLAIN_ITEMS = \"button:not([role]),a[href]:not([role])\";\n/** The trigger: the first focusable in the wrapper that is not inside the panel. */\nconst FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),[tabindex]:not([tabindex=\"-1\"])';\n\n/**\n * Give the caller's markup menu semantics.\n *\n * `children` is arbitrary — every caller in the kit renders a `<ul>` of `<li>`s holding\n * `<button>`s and router `<Link>`s — so the panel was a `role=\"menu\"` whose children\n * were a list, list items and plain buttons: no `menuitem` anywhere, which is a menu\n * with nothing in it as far as a screen reader is concerned. Rather than make every\n * caller rewrite its rows, the panel upgrades them after render: controls become\n * `menuitem`s out of the Tab order (the arrow keys move between them), and the list\n * markup in between becomes `role=\"none\"` so the menu owns its items directly. An\n * element that already carries a role is the caller's decision and is left alone.\n */\nfunction applyMenuSemantics(menu: HTMLElement): HTMLElement[] {\n  for (const el of menu.querySelectorAll<HTMLElement>(PLAIN_ITEMS)) el.setAttribute(\"role\", \"menuitem\");\n  const items = Array.from(menu.querySelectorAll<HTMLElement>(ITEM_ROLES));\n  for (const item of items) {\n    item.setAttribute(\"tabindex\", \"-1\");\n    for (let el = item.parentElement; el && el !== menu; el = el.parentElement) {\n      if (!el.hasAttribute(\"role\")) el.setAttribute(\"role\", \"none\");\n    }\n  }\n  for (const el of menu.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role]),li:not([role])\")) {\n    el.setAttribute(\"role\", \"none\");\n  }\n  return items.filter((el) => !el.hasAttribute(\"disabled\") && el.getAttribute(\"aria-disabled\") !== \"true\");\n}\n\n// Only one hover menu may show its panel at a time across the app — opening\n// one closes whichever was open, so adjacent top-bar menus can't overlap\n// (feedback #251). Module-level is fine: there is one cursor per document.\nlet activeClose: (() => void) | null = null;\n\nexport function HoverMenu({\n  trigger,\n  children,\n  align = \"end\",\n  panelClassName,\n  className,\n  \"aria-label\": ariaLabel,\n  ref,\n  ...rest\n}: HoverMenuProps) {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const setWrapper = useMemo(() => mergeRefs(wrapperRef, ref), [ref]);\n  const [phase, setPhase] = useState<Phase>(\"closed\");\n  const open = phase === \"open\" || phase === \"closing\";\n\n  // Whether the panel is open *because hover opened it*, vs. an explicit\n  // click/keyboard toggle. A real mouse click on the trigger is always\n  // preceded by a real mouseenter — the cursor has to land on the button\n  // before it can be clicked — so once hover has opened the panel, the click\n  // that inevitably follows is the same physical gesture, not a request to\n  // close what was just opened (feedback #19). Toggling closed on click stays\n  // for keyboard/touch activation, which reaches \"open\" without going through\n  // the hover path.\n  //\n  // State rather than a ref: `close` is handed to the caller's render prop, and a\n  // function that writes a ref must not be reachable from render.\n  const [openedByHover, setOpenedByHover] = useState(false);\n\n  const close = useCallback(() => {\n    setOpenedByHover(false);\n    setPhase(\"closed\");\n  }, []);\n\n  const toggle = useCallback(() => {\n    if (open) {\n      if (!openedByHover) setPhase(\"closed\");\n      return;\n    }\n    setOpenedByHover(false);\n    setPhase(\"open\");\n  }, [open, openedByHover]);\n\n  const handleMouseEnter = useCallback(\n    () => setPhase((p) => (p === \"closing\" ? \"open\" : p === \"closed\" ? \"opening\" : p)),\n    [],\n  );\n\n  const handleMouseLeave = useCallback(\n    () => setPhase((p) => (p === \"opening\" ? \"closed\" : p === \"open\" ? \"closing\" : p)),\n    [],\n  );\n\n  // Drive the delayed transitions; unmount/phase changes cancel the timer.\n  useEffect(() => {\n    if (phase === \"opening\") {\n      const id = setTimeout(() => {\n        setOpenedByHover(true);\n        setPhase(\"open\");\n      }, OPEN_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n    if (phase === \"closing\") {\n      const id = setTimeout(() => setPhase(\"closed\"), CLOSE_DELAY_MS);\n      return () => clearTimeout(id);\n    }\n  }, [phase]);\n\n  // Claim the \"active menu\" slot while our panel is visible, closing the\n  // previous holder. Cleanup releases the slot only if we still hold it\n  // (a successor that displaced us has already overwritten it).\n  useEffect(() => {\n    if (!open) return;\n    if (activeClose !== close) activeClose?.();\n    activeClose = close;\n    return () => {\n      if (activeClose === close) activeClose = null;\n    };\n  }, [open, close]);\n\n  useOutsideClick(wrapperRef, close, open);\n\n  const menuRef = useRef<HTMLDivElement>(null);\n  /** Set by a keyboard press on the trigger, so the open that follows moves focus into\n   *  the menu. A hover or a mouse click opens it without taking focus off the page. */\n  const focusOnOpenRef = useRef<\"first\" | \"last\" | null>(null);\n\n  const triggerEl = () =>\n    Array.from(wrapperRef.current?.querySelectorAll<HTMLElement>(FOCUSABLE) ?? []).find(\n      (el) => !menuRef.current?.contains(el),\n    ) ?? null;\n  const items = () => (menuRef.current ? applyMenuSemantics(menuRef.current) : []);\n\n  // Escape closes, from anywhere — it did nothing at all before — as a layer on the kit's\n  // Escape stack, so inside a dialog it closes the menu and not the dialog (Wave 2,\n  // DUP-1). Focus goes back to the trigger only when it was inside the menu: a panel\n  // opened by hover while the user is typing elsewhere must not yank the caret over\n  // here on the way out.\n  useDismissLayer(open, () => {\n    const hadFocus = wrapperRef.current?.contains(document.activeElement) ?? false;\n    close();\n    if (hadFocus) triggerEl()?.focus();\n  });\n\n  // Upgrade the markup every render while open (the caller's rows can change), then\n  // honour a pending keyboard open.\n  useLayoutEffect(() => {\n    if (!open) return;\n    const list = items();\n    const want = focusOnOpenRef.current;\n    focusOnOpenRef.current = null;\n    if (want) (want === \"last\" ? list[list.length - 1] : list[0])?.focus();\n  });\n\n  // Trigger state for assistive technology, on whatever element the caller rendered.\n  // Only where the caller has not said something of its own.\n  useLayoutEffect(() => {\n    const el = triggerEl();\n    if (!el) return;\n    if (!el.hasAttribute(\"aria-haspopup\")) el.setAttribute(\"aria-haspopup\", \"menu\");\n    if (el.getAttribute(\"aria-haspopup\") === \"menu\") el.setAttribute(\"aria-expanded\", String(open));\n  });\n\n  /** ↑/↓ roving focus with wrap, Home/End, Tab leaves (and closes); on the trigger,\n   *  Enter/Space/↓ open onto the first item and ↑ onto the last. */\n  const onKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    const target = e.target as HTMLElement;\n    const inMenu = menuRef.current?.contains(target) ?? false;\n    if (!inMenu) {\n      if (target !== triggerEl()) return;\n      if (e.key === \"Enter\" || e.key === \" \") {\n        // The trigger's own click handler does the toggling; this only records that\n        // the press came from a keyboard. Not for a link trigger: Enter follows it, and\n        // a mark left here would pull focus into the panel the next time hover opens it.\n        if (!open && !target.matches(\"a[href]\")) focusOnOpenRef.current = \"first\";\n      } else if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n        e.preventDefault();\n        const edge = e.key === \"ArrowDown\" ? \"first\" : \"last\";\n        if (open) {\n          const list = items();\n          (edge === \"last\" ? list[list.length - 1] : list[0])?.focus();\n        } else {\n          focusOnOpenRef.current = edge;\n          setOpenedByHover(false);\n          setPhase(\"open\");\n        }\n      }\n      return;\n    }\n    if (e.key === \"Tab\") {\n      close();\n      return;\n    }\n    const list = items();\n    if (list.length === 0) return;\n    const at = list.indexOf(document.activeElement as HTMLElement);\n    let next: number | null = null;\n    if (e.key === \"ArrowDown\") next = at < 0 ? 0 : (at + 1) % list.length;\n    else if (e.key === \"ArrowUp\") next = at < 0 ? list.length - 1 : (at - 1 + list.length) % list.length;\n    else if (e.key === \"Home\") next = 0;\n    else if (e.key === \"End\") next = list.length - 1;\n    if (next === null) return;\n    e.preventDefault();\n    list[next].focus();\n  };\n\n  // Keep the panel inside the viewport (feedback #85): a wide panel anchored to a\n  // trigger near a screen edge would otherwise spill off it (on mobile the guided-\n  // tours menu ran off the left). Once open, measure and translate it horizontally\n  // just enough to sit within an 8px margin of the GLASS — `anchoredInline` against\n  // the panel's own natural box, as every anchored panel clamps (Wave 2, DUP-7; it\n  // measured against `innerWidth`, which on a phone is the grown layout viewport).\n  // Recomputed on each open; `shiftX` is subtracted first so the measurement is\n  // against the natural position.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const [shiftX, setShiftX] = useState(0);\n  // Back to 0 on close, adjusted while rendering against the previous `open`.\n  const [wasOpen, setWasOpen] = useState(open);\n  if (open !== wasOpen) {\n    setWasOpen(open);\n    if (!open) setShiftX(0);\n  }\n  useLayoutEffect(() => {\n    if (!open) return;\n    const el = panelRef.current;\n    if (!el) return;\n    const rect = el.getBoundingClientRect();\n    if (rect.width === 0) return; // unmeasured (e.g. jsdom) — leave as-is\n    const natural = { left: rect.left - shiftX, right: rect.right - shiftX };\n    const { left } = anchoredInline(natural, rect.width, { dir: dirOf(el), align: \"left\" });\n    setShiftX(left - natural.left);\n    // eslint-disable-next-line react-hooks/exhaustive-deps -- recompute only on open/close\n  }, [open]);\n\n  return (\n    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused\n       itself: the mouse handlers are the hover-to-open convenience, and `onKeyDown`\n       catches keys bubbling from the caller's trigger button and the menuitems, which\n       are the keyboard path (Enter/Space/arrows open, arrows move, Escape closes). */\n    <div\n      // `...rest` first: the hover handlers below are the whole component, and a caller\n      // passing one of its own must not silently replace them.\n      {...rest}\n      ref={setWrapper}\n      className={cn(\"relative\", className)}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      onKeyDown={(e) => {\n        runOwnKeyDown(e, rest.onKeyDown);\n        // Focus on the trigger or in the menu: the key stops here, so a panel around\n        // the menu does not close with it.\n        if (open) takeEscape(e);\n        onKeyDown(e);\n      }}\n    >\n      {trigger({ open, toggle, close })}\n      {open && (\n        <div\n          ref={panelRef}\n          className={cn(\n            \"absolute top-full z-40 pt-2\",\n            ALIGN_CLASS[align],\n          )}\n          style={shiftX ? { transform: `translateX(${shiftX}px)` } : undefined}\n        >\n          <div\n            ref={menuRef}\n            role=\"menu\"\n            // On the element with the role. It used to sit on the role-less wrapper,\n            // where no screen reader reads a name.\n            aria-label={ariaLabel}\n            className={cn(\n              \"min-w-44 max-w-[calc(100vw-1rem)] rounded-md border border-subtle bg-surface shadow-lg\",\n              panelClassName,\n            )}\n          >\n            {children(close)}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":["list"]}

package/dist/components/iban-input-labels.d.ts

@@ -0,0 +1,2 @@
+import type { IbanInputLabels } from "./iban-input.js";
+export declare const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels;

package/dist/components/iban-input-labels.js

@@ -0,0 +1,13 @@
+"use client";
+const DEFAULT_IBAN_INPUT_LABELS = {
+  format: "An IBAN starts with a two-letter country code and two check digits.",
+  country: (code) => `\u201C${code}\u201D is not the country code of an IBAN.`,
+  length: (actual, expected) => `An IBAN from this country has ${expected} characters \u2014 this one has ${actual}.`,
+  checksum: "The check digits don\u2019t match \u2014 a character is probably mistyped.",
+  qrRequired: "This is a regular IBAN. A QR-bill needs the account\u2019s QR-IBAN.",
+  qrNotAllowed: "This is a QR-IBAN, which only receives QR-bill payments. Enter the account\u2019s regular IBAN."
+};
+export {
+  DEFAULT_IBAN_INPUT_LABELS
+};
+//# sourceMappingURL=iban-input-labels.js.map

package/dist/components/iban-input-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/iban-input-labels.ts"],"sourcesContent":["// The English words of ./iban-input, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./iban-input re-exports them.\n\nimport type { IbanInputLabels } from \"./iban-input\";\n\nexport const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels = {\n  format: \"An IBAN starts with a two-letter country code and two check digits.\",\n  country: (code) => `“${code}” is not the country code of an IBAN.`,\n  length: (actual, expected) =>\n    `An IBAN from this country has ${expected} characters — this one has ${actual}.`,\n  checksum: \"The check digits don’t match — a character is probably mistyped.\",\n  qrRequired: \"This is a regular IBAN. A QR-bill needs the account’s QR-IBAN.\",\n  qrNotAllowed: \"This is a QR-IBAN, which only receives QR-bill payments. Enter the account’s regular IBAN.\",\n};\n"],"mappings":";AAMO,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,SAAS,CAAC,SAAS,SAAI,IAAI;AAAA,EAC3B,QAAQ,CAAC,QAAQ,aACf,iCAAiC,QAAQ,mCAA8B,MAAM;AAAA,EAC/E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAChB;","names":[]}

package/dist/components/iban-input.d.ts

@@ -1,101 +1,73 @@
-import 'react';
-import '../lib/iban.js';
-export { cD as DEFAULT_IBAN_INPUT_LABELS, dD as IbanInput, dE as IbanInputLabels, dF as IbanInputProps } from '../delete-account-setting-DAgGBrbn.js';
-import './tooltip.js';
-import '../hooks/use-anchored-rect.js';
-import '../lib/clipping.js';
-import '../data-table-labels-BJ5JE_X2.js';
-import './data-table-sort.js';
-import './swipeable-row.js';
-import './status-dot.js';
-import './progress-bar.js';
-import './signed-amount.js';
-import './stat-tile.js';
-import './chip.js';
-import 'lucide-react';
-import './field-parts.js';
-import './write-lock.js';
-import './mini-calendar.js';
-import './calendar-heatmap.js';
-import './popover.js';
-import '../hooks/use-breakpoint.js';
-import './field-sync.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 './month-picker.js';
-import './page-contents.js';
-import './series-chart-labels.js';
-import './pie-chart-labels.js';
-import './sparkline.js';
-import './signature-pad.js';
-import './password-strength.js';
-import './swatch-picker.js';
-import './tile-radio.js';
-import './icon-picker.js';
-import './dialog-frame.js';
-import './modal.js';
-import '../hooks/use-search-param-state.js';
-import './measured-grid.js';
-import './user-avatar.js';
-import '../lib/person-name.js';
-import '../shell/topbar-action-menu.js';
-import './menu-item.js';
-import './floating-panel.js';
-import '../hooks/use-authed-src.js';
-import './account-settings-labels.js';
-import './bulk-action-bar.js';
-import './list.js';
-import './breadcrumbs.js';
-import './toast.js';
-import './description-list.js';
-import './line-items.js';
-import './error-boundary.js';
-import './authed-image.js';
-import './image-grid.js';
-import './lightbox.js';
-import '../auth/sign-in-form.js';
-import '../landing/access.js';
-import '../landing/landing-labels.js';
-import '../shell/topbar-controls.js';
-import '../theme/palette-presets.js';
-import '../theme/chart-palette.js';
-import '../theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import '../auth/complete-name-dialog.js';
-import '../auth/forgot-password-form.js';
-import '../auth/status-parts.js';
-import '../auth/reset-password-form.js';
-import '../auth/verify-email.js';
-import '../auth/not-found-page.js';
-import '../auth/accept-invitation.js';
-import '../shell/company-switcher.js';
-import '../account/email-change-setting.js';
-import '../account/sessions-setting.js';
-import '../lib/format.js';
-import '../account/data-export-setting.js';
-import './account-chips.js';
-import '../admin/admin-parts.js';
-import '../admin/admin-action-log.js';
-import '../settings/settings-labels.js';
-import '../demo/demo-labels.js';
-import '../i18n/plurals.js';
-import './appearance-labels.js';
-import '../theme/contrast.js';
-import '../theme/text-size.js';
-import './reauth-dialog.js';
-import './server-wake.js';
-import '../lib/server-wake.js';
-import './translation-review-labels.js';
-import '../lib/translation-review.js';
-import './country-select.js';
-import './inline-edit-field.js';
-import '../lib/phone.js';
-import './sign-chip.js';
-import './column-mapper.js';
-import '../lib/column-mapping.js';
-import '../lib/table-text.js';
-import './focus-ring.js';
+import type { ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import type { IbanKind } from "../lib/iban.js";
+import { type InputProps } from "./input.js";
+import { DEFAULT_IBAN_INPUT_LABELS } from "./iban-input-labels.js";
+/** The messages {@link IbanInput} shows under itself, one per {@link IbanProblem}. */
+export interface IbanInputLabels {
+    /** The value does not start with a two-letter country code and two check digits. */
+    format: string;
+    /** The first two letters are no country in the IBAN registry. `code` is those two
+     *  letters, as typed (upper case). */
+    country: (code: string) => string;
+    /** The wrong length for the country: `actual` characters typed, `expected` for that
+     *  country (spaces not counted in either). */
+    length: (actual: number, expected: number) => string;
+    /** The mod-97 check digits do not match — a mistyped or swapped character. */
+    checksum: string;
+    /** `kind="qr"`: a valid IBAN, but not a QR-IBAN. */
+    qrRequired: string;
+    /** `kind="plain"`: a QR-IBAN, which cannot receive an ordinary transfer. */
+    qrNotAllowed: string;
+}
+export { DEFAULT_IBAN_INPUT_LABELS };
+export interface IbanInputProps extends Omit<InputProps, "type" | "value" | "defaultValue"> {
+    /** The IBAN, compact or not — it is shown in groups of four either way. `""` is
+     *  "no IBAN". */
+    value: string;
+    /** The compact, upper-case IBAN (the electronic format, what to store) on every
+     *  change — valid or not: a half-typed IBAN is still the field's value. Plain
+     *  `onChange` still fires alongside it with the raw event, whose text is the GROUPED
+     *  one, so bind this rather than `onChange` to a form. */
+    onValueChange?: (value: string) => void;
+    /** Which IBANs the field accepts. Default `"any"`. `"qr"` / `"plain"`: see
+     *  {@link IbanKind} — and why the difference matters, {@link isQrIban}. */
+    kind?: IbanKind;
+    /** The messages, per field. See {@link IbanInputLabels}. */
+    labels?: LabelOverride<IbanInputLabels>;
+    /** The caller's own message, shown INSTEAD of the built-in one while it is set (a
+     *  server's "this account is already on file"). `null`, `false` and `""` are no
+     *  message, so `touched && errors.iban` can be passed as it is. */
+    error?: ReactNode;
+}
+/**
+ * An IBAN field (kastlan, keksdose): typed in any shape, shown in groups of four,
+ * reported compact.
+ *
+ * Both apps had a text field and a regex. What that left out is everything between
+ * the keyboard and the stored value: a pasted "ch09 0000-0000…" stayed lower case
+ * with its hyphens, the grouping that makes 21 characters checkable by eye was
+ * missing, and a wrong IBAN was found out by the bank. Here:
+ *
+ *  - **Grouped as you type.** The field shows the paper format ({@link formatIban});
+ *    spaces, hyphens and lower case in what is typed or pasted are folded away, and
+ *    the caret stays between the same two characters while the groups move around it.
+ *  - **Compact out.** `onValueChange` gets the electronic format — upper case, no
+ *    spaces — which is the one to store and to compare.
+ *  - **Checked, never blocked.** A wrong country, length or checksum shows a message
+ *    under the field, through the kit's `error` (so it is the field's
+ *    `aria-describedby` and paints it), but every keystroke still lands: a field that
+ *    refuses characters cannot be corrected one character at a time. While the field
+ *    has focus only what more typing cannot fix is shown; the rest waits for the full
+ *    length or for blur. Whether the field is REQUIRED stays the form's rule — an empty
+ *    field says nothing.
+ *  - **QR-IBAN or not** (kastlan): `kind="qr"` refuses a regular IBAN and
+ *    `kind="plain"` refuses a QR-IBAN — a QR-bill can only be paid to a QR-IBAN, and a
+ *    QR-IBAN can receive nothing else. See {@link isQrIban}.
+ *
+ * It is {@link Input} underneath, so `label`, `hint`, `error`, `invalid` and the rest
+ * are Input's own and the field reads like every other. A form that must not submit
+ * an invalid IBAN checks {@link isValidIban} / {@link ibanProblem} itself — the field
+ * shows the problem but does not own the submit.
+ */
+export declare function IbanInput({ ref, value, onValueChange, onChange, onFocus, onBlur, kind, labels, error, inputClassName, ...rest }: IbanInputProps): import("react").JSX.Element;

package/dist/components/iban-input.js

@@ -1,19 +1,13 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { useKitLabels } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
 import { IBAN_LENGTHS, compactIban, formatIban, ibanProblem } from "../lib/iban.js";
-import { assignRef, hasMessage } from "./choice-parts.js";
-import { Input } from "./ui.js";
-const DEFAULT_IBAN_INPUT_LABELS = {
-  format: "An IBAN starts with a two-letter country code and two check digits.",
-  country: (code) => `\u201C${code}\u201D is not the country code of an IBAN.`,
-  length: (actual, expected) => `An IBAN from this country has ${expected} characters \u2014 this one has ${actual}.`,
-  checksum: "The check digits don\u2019t match \u2014 a character is probably mistyped.",
-  qrRequired: "This is a regular IBAN. A QR-bill needs the account\u2019s QR-IBAN.",
-  qrNotAllowed: "This is a QR-IBAN, which only receives QR-bill payments. Enter the account\u2019s regular IBAN."
-};
+import { hasContent } from "../lib/presence.js";
+import { assignRef } from "./field-parts.js";
+import { Input } from "./input.js";
+import { DEFAULT_IBAN_INPUT_LABELS } from "./iban-input-labels.js";
 function useIbanInputLabels(prop) {
   const labels = useKitLabels("ibanInput", DEFAULT_IBAN_INPUT_LABELS, prop);
   return labels;
@@ -52,7 +46,21 @@ function messageFor(problem, compact, labels) {
       return labels.qrNotAllowed;
   }
 }
-const IbanInput = forwardRef(function IbanInput2({ value, onValueChange, onChange, onFocus, onBlur, kind = "any", labels, error, inputClassName, ...rest }, ref) {
+function IbanInput({
+  // The `<input>` (InputProps'): a React 19 ref prop since 0.34 (MOD-4, refactor audit
+  // 2026-10), where this was `forwardRef`.
+  ref,
+  value,
+  onValueChange,
+  onChange,
+  onFocus,
+  onBlur,
+  kind = "any",
+  labels,
+  error,
+  inputClassName,
+  ...rest
+}) {
   const text = useIbanInputLabels(labels);
   const compact = compactIban(value);
   const shown = formatIban(compact);
@@ -112,12 +120,11 @@ const IbanInput = forwardRef(function IbanInput2({ value, onValueChange, onChang
       autoCapitalize: rest.autoCapitalize ?? "characters",
       autoCorrect: rest.autoCorrect ?? "off",
       spellCheck: rest.spellCheck ?? false,
-      error: hasMessage(error) ? error : problem ? messageFor(problem, compact, text) : void 0,
+      error: hasContent(error) ? error : problem ? messageFor(problem, compact, text) : void 0,
       inputClassName: cn("tabular-nums", inputClassName)
     }
   );
-});
-IbanInput.displayName = "IbanInput";
+}
 export {
   DEFAULT_IBAN_INPUT_LABELS,
   IbanInput

package/dist/components/iban-input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/iban-input.tsx"],"sourcesContent":["import { forwardRef, useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ChangeEvent, FocusEvent, ReactNode } from \"react\";\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { IBAN_LENGTHS, compactIban, formatIban, ibanProblem } from \"../lib/iban\";\nimport type { IbanKind, IbanProblem } from \"../lib/iban\";\nimport { assignRef, hasMessage } from \"./choice-parts\";\nimport { Input, type InputProps } from \"./ui\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The messages {@link IbanInput} shows under itself, one per {@link IbanProblem}. */\nexport interface IbanInputLabels {\n  /** The value does not start with a two-letter country code and two check digits. */\n  format: string;\n  /** The first two letters are no country in the IBAN registry. `code` is those two\n   *  letters, as typed (upper case). */\n  country: (code: string) => string;\n  /** The wrong length for the country: `actual` characters typed, `expected` for that\n   *  country (spaces not counted in either). */\n  length: (actual: number, expected: number) => string;\n  /** The mod-97 check digits do not match — a mistyped or swapped character. */\n  checksum: string;\n  /** `kind=\"qr\"`: a valid IBAN, but not a QR-IBAN. */\n  qrRequired: string;\n  /** `kind=\"plain\"`: a QR-IBAN, which cannot receive an ordinary transfer. */\n  qrNotAllowed: string;\n}\n\nexport const DEFAULT_IBAN_INPUT_LABELS: IbanInputLabels = {\n  format: \"An IBAN starts with a two-letter country code and two check digits.\",\n  country: (code) => `“${code}” is not the country code of an IBAN.`,\n  length: (actual, expected) =>\n    `An IBAN from this country has ${expected} characters — this one has ${actual}.`,\n  checksum: \"The check digits don’t match — a character is probably mistyped.\",\n  qrRequired: \"This is a regular IBAN. A QR-bill needs the account’s QR-IBAN.\",\n  qrNotAllowed: \"This is a QR-IBAN, which only receives QR-bill payments. Enter the account’s regular IBAN.\",\n};\n\n/**\n * The `ibanInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction useIbanInputLabels(prop: Partial<IbanInputLabels> | undefined): IbanInputLabels {\n  const labels: IbanInputLabels = useKitLabels(\"ibanInput\", DEFAULT_IBAN_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nconst alnumCount = (text: string) => text.replace(/[^0-9A-Za-z]/g, \"\").length;\n\n/** The index just after the `count`-th letter or digit of `text` — where the caret\n *  goes once the grouping has moved the characters it was between. */\nfunction indexAfter(text: string, count: number): number {\n  if (count <= 0) return 0;\n  let seen = 0;\n  for (let i = 0; i < text.length; i++) {\n    if (/[0-9A-Za-z]/.test(text[i])) seen += 1;\n    if (seen === count) return i + 1;\n  }\n  return text.length;\n}\n\n/**\n * The problem worth SHOWING right now. Settled (not focused): whatever is wrong. While\n * typing: only what more typing cannot fix — a broken start or an unknown country from\n * the fourth character, and the rest once the country's full length is there. A\n * half-typed IBAN is not wrong, and a field that says \"wrong length\" from the first\n * keystroke is a field people learn to ignore.\n */\nfunction visibleProblem(compact: string, kind: IbanKind, focused: boolean): IbanProblem | null {\n  if (compact === \"\") return null;\n  const problem = ibanProblem(compact, kind);\n  if (problem === null || !focused) return problem;\n  if (compact.length < 4) return null;\n  if (problem === \"format\" || problem === \"country\") return problem;\n  return compact.length >= IBAN_LENGTHS[compact.slice(0, 2)]! ? problem : null;\n}\n\nfunction messageFor(problem: IbanProblem, compact: string, labels: IbanInputLabels): string {\n  switch (problem) {\n    case \"format\":\n      return labels.format;\n    case \"country\":\n      return labels.country(compact.slice(0, 2));\n    case \"length\":\n      return labels.length(compact.length, IBAN_LENGTHS[compact.slice(0, 2)]!);\n    case \"checksum\":\n      return labels.checksum;\n    case \"qrRequired\":\n      return labels.qrRequired;\n    case \"qrNotAllowed\":\n      return labels.qrNotAllowed;\n  }\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface IbanInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The IBAN, compact or not — it is shown in groups of four either way. `\"\"` is\n   *  \"no IBAN\". */\n  value: string;\n  /** The compact, upper-case IBAN (the electronic format, what to store) on every\n   *  change — valid or not: a half-typed IBAN is still the field's value. Plain\n   *  `onChange` still fires alongside it with the raw event, whose text is the GROUPED\n   *  one, so bind this rather than `onChange` to a form. */\n  onValueChange?: (value: string) => void;\n  /** Which IBANs the field accepts. Default `\"any\"`. `\"qr\"` / `\"plain\"`: see\n   *  {@link IbanKind} — and why the difference matters, {@link isQrIban}. */\n  kind?: IbanKind;\n  /** The messages, per field. See {@link IbanInputLabels}. */\n  labels?: Partial<IbanInputLabels>;\n  /** The caller's own message, shown INSTEAD of the built-in one while it is set (a\n   *  server's \"this account is already on file\"). `null`, `false` and `\"\"` are no\n   *  message, so `touched && errors.iban` can be passed as it is. */\n  error?: ReactNode;\n}\n\n/**\n * An IBAN field (kastlan, keksdose): typed in any shape, shown in groups of four,\n * reported compact.\n *\n * Both apps had a text field and a regex. What that left out is everything between\n * the keyboard and the stored value: a pasted \"ch09 0000-0000…\" stayed lower case\n * with its hyphens, the grouping that makes 21 characters checkable by eye was\n * missing, and a wrong IBAN was found out by the bank. Here:\n *\n *  - **Grouped as you type.** The field shows the paper format ({@link formatIban});\n *    spaces, hyphens and lower case in what is typed or pasted are folded away, and\n *    the caret stays between the same two characters while the groups move around it.\n *  - **Compact out.** `onValueChange` gets the electronic format — upper case, no\n *    spaces — which is the one to store and to compare.\n *  - **Checked, never blocked.** A wrong country, length or checksum shows a message\n *    under the field, through the kit's `error` (so it is the field's\n *    `aria-describedby` and paints it), but every keystroke still lands: a field that\n *    refuses characters cannot be corrected one character at a time. While the field\n *    has focus only what more typing cannot fix is shown; the rest waits for the full\n *    length or for blur. Whether the field is REQUIRED stays the form's rule — an empty\n *    field says nothing.\n *  - **QR-IBAN or not** (kastlan): `kind=\"qr\"` refuses a regular IBAN and\n *    `kind=\"plain\"` refuses a QR-IBAN — a QR-bill can only be paid to a QR-IBAN, and a\n *    QR-IBAN can receive nothing else. See {@link isQrIban}.\n *\n * It is {@link Input} underneath, so `label`, `hint`, `error`, `invalid` and the rest\n * are Input's own and the field reads like every other. A form that must not submit\n * an invalid IBAN checks {@link isValidIban} / {@link ibanProblem} itself — the field\n * shows the problem but does not own the submit.\n */\nexport const IbanInput = forwardRef<HTMLInputElement, IbanInputProps>(function IbanInput(\n  { value, onValueChange, onChange, onFocus, onBlur, kind = \"any\", labels, error, inputClassName, ...rest },\n  ref,\n) {\n  const text = useIbanInputLabels(labels);\n  const compact = compactIban(value);\n  const shown = formatIban(compact);\n  const [focused, setFocused] = useState(false);\n  const innerRef = useRef<HTMLInputElement | null>(null);\n  // Letters and digits before the caret, kept across the re-render that regroups.\n  const caretRef = useRef<number | null>(null);\n  const setRefs = useCallback(\n    (el: HTMLInputElement | null) => {\n      innerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref],\n  );\n\n  // Every render: when a change moved the groups, put the caret back after the same\n  // character it followed. Only while focused — a value set from outside moves nothing.\n  useLayoutEffect(() => {\n    const el = innerRef.current;\n    const count = caretRef.current;\n    if (el === null || count === null) return;\n    caretRef.current = null;\n    if (el.ownerDocument.activeElement !== el) return;\n    const at = indexAfter(el.value, count);\n    el.setSelectionRange(at, at);\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const el = e.target;\n    const raw = el.value;\n    const next = compactIban(raw);\n    // Characters compactIban dropped from the front (a pasted \"IBAN \" label) are not\n    // in the value, so they are not counted before the caret either.\n    const dropped = alnumCount(raw) - next.length;\n    const count = Math.max(0, alnumCount(raw.slice(0, el.selectionStart ?? raw.length)) - dropped);\n    if (next === compact) {\n      // Nothing the value holds changed — a space typed, a group's space deleted — so\n      // no re-render will come to regroup it. Regroup now, and keep the caret: after\n      // a Backspace on a group's space, that is just before it.\n      el.value = shown;\n      const at = indexAfter(shown, count);\n      el.setSelectionRange(at, at);\n    } else {\n      caretRef.current = count;\n    }\n    onValueChange?.(next);\n  };\n\n  const problem = visibleProblem(compact, kind, focused);\n  return (\n    <Input\n      ref={setRefs}\n      {...rest}\n      type=\"text\"\n      value={shown}\n      onChange={handleChange}\n      onFocus={(e: FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e: FocusEvent<HTMLInputElement>) => {\n        setFocused(false);\n        onBlur?.(e);\n      }}\n      autoComplete={rest.autoComplete ?? \"off\"}\n      autoCapitalize={rest.autoCapitalize ?? \"characters\"}\n      autoCorrect={rest.autoCorrect ?? \"off\"}\n      spellCheck={rest.spellCheck ?? false}\n      // ALWAYS passed, even while there is no message: a field that takes `error`\n      // keeps its box, so the message coming and going under the caret never remounts\n      // the input (see Input's FieldGroup) — this one comes and goes as you type.\n      error={hasMessage(error) ? error : problem ? messageFor(problem, compact, text) : undefined}\n      // Groups of four line up only when every digit is the same width.\n      inputClassName={cn(\"tabular-nums\", inputClassName)}\n    />\n  );\n});\nIbanInput.displayName = \"IbanInput\";\n"],"mappings":";AA2MI;AA3MJ,SAAS,YAAY,aAAa,iBAAiB,QAAQ,gBAAgB;AAE3E,SAAS,oBAAoB;AAC7B,SAAS,UAAU;AACnB,SAAS,cAAc,aAAa,YAAY,mBAAmB;AAEnE,SAAS,WAAW,kBAAkB;AACtC,SAAS,aAA8B;AAsBhC,MAAM,4BAA6C;AAAA,EACxD,QAAQ;AAAA,EACR,SAAS,CAAC,SAAS,SAAI,IAAI;AAAA,EAC3B,QAAQ,CAAC,QAAQ,aACf,iCAAiC,QAAQ,mCAA8B,MAAM;AAAA,EAC/E,UAAU;AAAA,EACV,YAAY;AAAA,EACZ,cAAc;AAChB;AAKA,SAAS,mBAAmB,MAA6D;AACvF,QAAM,SAA0B,aAAa,aAAa,2BAA2B,IAAI;AACzF,SAAO;AACT;AAIA,MAAM,aAAa,CAAC,SAAiB,KAAK,QAAQ,iBAAiB,EAAE,EAAE;AAIvE,SAAS,WAAW,MAAc,OAAuB;AACvD,MAAI,SAAS,EAAG,QAAO;AACvB,MAAI,OAAO;AACX,WAAS,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;AACpC,QAAI,cAAc,KAAK,KAAK,CAAC,CAAC,EAAG,SAAQ;AACzC,QAAI,SAAS,MAAO,QAAO,IAAI;AAAA,EACjC;AACA,SAAO,KAAK;AACd;AASA,SAAS,eAAe,SAAiB,MAAgB,SAAsC;AAC7F,MAAI,YAAY,GAAI,QAAO;AAC3B,QAAM,UAAU,YAAY,SAAS,IAAI;AACzC,MAAI,YAAY,QAAQ,CAAC,QAAS,QAAO;AACzC,MAAI,QAAQ,SAAS,EAAG,QAAO;AAC/B,MAAI,YAAY,YAAY,YAAY,UAAW,QAAO;AAC1D,SAAO,QAAQ,UAAU,aAAa,QAAQ,MAAM,GAAG,CAAC,CAAC,IAAK,UAAU;AAC1E;AAEA,SAAS,WAAW,SAAsB,SAAiB,QAAiC;AAC1F,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO,QAAQ,QAAQ,MAAM,GAAG,CAAC,CAAC;AAAA,IAC3C,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ,QAAQ,aAAa,QAAQ,MAAM,GAAG,CAAC,CAAC,CAAE;AAAA,IACzE,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK;AACH,aAAO,OAAO;AAAA,EAClB;AACF;AAsDO,MAAM,YAAY,WAA6C,SAASA,WAC7E,EAAE,OAAO,eAAe,UAAU,SAAS,QAAQ,OAAO,OAAO,QAAQ,OAAO,gBAAgB,GAAG,KAAK,GACxG,KACA;AACA,QAAM,OAAO,mBAAmB,MAAM;AACtC,QAAM,UAAU,YAAY,KAAK;AACjC,QAAM,QAAQ,WAAW,OAAO;AAChC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,WAAW,OAAgC,IAAI;AAErD,QAAM,WAAW,OAAsB,IAAI;AAC3C,QAAM,UAAU;AAAA,IACd,CAAC,OAAgC;AAC/B,eAAS,UAAU;AACnB,gBAAU,KAAK,EAAE;AAAA,IACnB;AAAA,IACA,CAAC,GAAG;AAAA,EACN;AAIA,kBAAgB,MAAM;AACpB,UAAM,KAAK,SAAS;AACpB,UAAM,QAAQ,SAAS;AACvB,QAAI,OAAO,QAAQ,UAAU,KAAM;AACnC,aAAS,UAAU;AACnB,QAAI,GAAG,cAAc,kBAAkB,GAAI;AAC3C,UAAM,KAAK,WAAW,GAAG,OAAO,KAAK;AACrC,OAAG,kBAAkB,IAAI,EAAE;AAAA,EAC7B,CAAC;AAED,QAAM,eAAe,CAAC,MAAqC;AACzD,eAAW,CAAC;AACZ,UAAM,KAAK,EAAE;AACb,UAAM,MAAM,GAAG;AACf,UAAM,OAAO,YAAY,GAAG;AAG5B,UAAM,UAAU,WAAW,GAAG,IAAI,KAAK;AACvC,UAAM,QAAQ,KAAK,IAAI,GAAG,WAAW,IAAI,MAAM,GAAG,GAAG,kBAAkB,IAAI,MAAM,CAAC,IAAI,OAAO;AAC7F,QAAI,SAAS,SAAS;AAIpB,SAAG,QAAQ;AACX,YAAM,KAAK,WAAW,OAAO,KAAK;AAClC,SAAG,kBAAkB,IAAI,EAAE;AAAA,IAC7B,OAAO;AACL,eAAS,UAAU;AAAA,IACrB;AACA,oBAAgB,IAAI;AAAA,EACtB;AAEA,QAAM,UAAU,eAAe,SAAS,MAAM,OAAO;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACJ,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,OAAO;AAAA,MACP,UAAU;AAAA,MACV,SAAS,CAAC,MAAoC;AAC5C,mBAAW,IAAI;AACf,kBAAU,CAAC;AAAA,MACb;AAAA,MACA,QAAQ,CAAC,MAAoC;AAC3C,mBAAW,KAAK;AAChB,iBAAS,CAAC;AAAA,MACZ;AAAA,MACA,cAAc,KAAK,gBAAgB;AAAA,MACnC,gBAAgB,KAAK,kBAAkB;AAAA,MACvC,aAAa,KAAK,eAAe;AAAA,MACjC,YAAY,KAAK,cAAc;AAAA,MAI/B,OAAO,WAAW,KAAK,IAAI,QAAQ,UAAU,WAAW,SAAS,SAAS,IAAI,IAAI;AAAA,MAElF,gBAAgB,GAAG,gBAAgB,cAAc;AAAA;AAAA,EACnD;AAEJ,CAAC;AACD,UAAU,cAAc;","names":["IbanInput"]}
+{"version":3,"sources":["../../src/components/iban-input.tsx"],"sourcesContent":["import { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ChangeEvent, FocusEvent, ReactNode } from \"react\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { cn } from \"../lib/cn\";\nimport { IBAN_LENGTHS, compactIban, formatIban, ibanProblem } from \"../lib/iban\";\nimport type { IbanKind, IbanProblem } from \"../lib/iban\";\nimport { hasContent } from \"../lib/presence\";\nimport { assignRef } from \"./field-parts\";\nimport { Input, type InputProps } from \"./input\";\nimport { DEFAULT_IBAN_INPUT_LABELS } from \"./iban-input-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The messages {@link IbanInput} shows under itself, one per {@link IbanProblem}. */\nexport interface IbanInputLabels {\n  /** The value does not start with a two-letter country code and two check digits. */\n  format: string;\n  /** The first two letters are no country in the IBAN registry. `code` is those two\n   *  letters, as typed (upper case). */\n  country: (code: string) => string;\n  /** The wrong length for the country: `actual` characters typed, `expected` for that\n   *  country (spaces not counted in either). */\n  length: (actual: number, expected: number) => string;\n  /** The mod-97 check digits do not match — a mistyped or swapped character. */\n  checksum: string;\n  /** `kind=\"qr\"`: a valid IBAN, but not a QR-IBAN. */\n  qrRequired: string;\n  /** `kind=\"plain\"`: a QR-IBAN, which cannot receive an ordinary transfer. */\n  qrNotAllowed: string;\n}\n\n// Defined in ./iban-input-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_IBAN_INPUT_LABELS };\n\n/**\n * The `ibanInput` namespace: prop > `<UiKitProvider labels>` > English (0.22.0).\n */\nfunction useIbanInputLabels(prop: Partial<IbanInputLabels> | undefined): IbanInputLabels {\n  const labels: IbanInputLabels = useKitLabels(\"ibanInput\", DEFAULT_IBAN_INPUT_LABELS, prop);\n  return labels;\n}\n\n// ── Helpers ───────────────────────────────────────────────────────────────────\n\nconst alnumCount = (text: string) => text.replace(/[^0-9A-Za-z]/g, \"\").length;\n\n/** The index just after the `count`-th letter or digit of `text` — where the caret\n *  goes once the grouping has moved the characters it was between. */\nfunction indexAfter(text: string, count: number): number {\n  if (count <= 0) return 0;\n  let seen = 0;\n  for (let i = 0; i < text.length; i++) {\n    if (/[0-9A-Za-z]/.test(text[i])) seen += 1;\n    if (seen === count) return i + 1;\n  }\n  return text.length;\n}\n\n/**\n * The problem worth SHOWING right now. Settled (not focused): whatever is wrong. While\n * typing: only what more typing cannot fix — a broken start or an unknown country from\n * the fourth character, and the rest once the country's full length is there. A\n * half-typed IBAN is not wrong, and a field that says \"wrong length\" from the first\n * keystroke is a field people learn to ignore.\n */\nfunction visibleProblem(compact: string, kind: IbanKind, focused: boolean): IbanProblem | null {\n  if (compact === \"\") return null;\n  const problem = ibanProblem(compact, kind);\n  if (problem === null || !focused) return problem;\n  if (compact.length < 4) return null;\n  if (problem === \"format\" || problem === \"country\") return problem;\n  return compact.length >= IBAN_LENGTHS[compact.slice(0, 2)]! ? problem : null;\n}\n\nfunction messageFor(problem: IbanProblem, compact: string, labels: IbanInputLabels): string {\n  switch (problem) {\n    case \"format\":\n      return labels.format;\n    case \"country\":\n      return labels.country(compact.slice(0, 2));\n    case \"length\":\n      return labels.length(compact.length, IBAN_LENGTHS[compact.slice(0, 2)]!);\n    case \"checksum\":\n      return labels.checksum;\n    case \"qrRequired\":\n      return labels.qrRequired;\n    case \"qrNotAllowed\":\n      return labels.qrNotAllowed;\n  }\n}\n\n// ── Component ─────────────────────────────────────────────────────────────────\n\nexport interface IbanInputProps extends Omit<InputProps, \"type\" | \"value\" | \"defaultValue\"> {\n  /** The IBAN, compact or not — it is shown in groups of four either way. `\"\"` is\n   *  \"no IBAN\". */\n  value: string;\n  /** The compact, upper-case IBAN (the electronic format, what to store) on every\n   *  change — valid or not: a half-typed IBAN is still the field's value. Plain\n   *  `onChange` still fires alongside it with the raw event, whose text is the GROUPED\n   *  one, so bind this rather than `onChange` to a form. */\n  onValueChange?: (value: string) => void;\n  /** Which IBANs the field accepts. Default `\"any\"`. `\"qr\"` / `\"plain\"`: see\n   *  {@link IbanKind} — and why the difference matters, {@link isQrIban}. */\n  kind?: IbanKind;\n  /** The messages, per field. See {@link IbanInputLabels}. */\n  labels?: LabelOverride<IbanInputLabels>;\n  /** The caller's own message, shown INSTEAD of the built-in one while it is set (a\n   *  server's \"this account is already on file\"). `null`, `false` and `\"\"` are no\n   *  message, so `touched && errors.iban` can be passed as it is. */\n  error?: ReactNode;\n}\n\n/**\n * An IBAN field (kastlan, keksdose): typed in any shape, shown in groups of four,\n * reported compact.\n *\n * Both apps had a text field and a regex. What that left out is everything between\n * the keyboard and the stored value: a pasted \"ch09 0000-0000…\" stayed lower case\n * with its hyphens, the grouping that makes 21 characters checkable by eye was\n * missing, and a wrong IBAN was found out by the bank. Here:\n *\n *  - **Grouped as you type.** The field shows the paper format ({@link formatIban});\n *    spaces, hyphens and lower case in what is typed or pasted are folded away, and\n *    the caret stays between the same two characters while the groups move around it.\n *  - **Compact out.** `onValueChange` gets the electronic format — upper case, no\n *    spaces — which is the one to store and to compare.\n *  - **Checked, never blocked.** A wrong country, length or checksum shows a message\n *    under the field, through the kit's `error` (so it is the field's\n *    `aria-describedby` and paints it), but every keystroke still lands: a field that\n *    refuses characters cannot be corrected one character at a time. While the field\n *    has focus only what more typing cannot fix is shown; the rest waits for the full\n *    length or for blur. Whether the field is REQUIRED stays the form's rule — an empty\n *    field says nothing.\n *  - **QR-IBAN or not** (kastlan): `kind=\"qr\"` refuses a regular IBAN and\n *    `kind=\"plain\"` refuses a QR-IBAN — a QR-bill can only be paid to a QR-IBAN, and a\n *    QR-IBAN can receive nothing else. See {@link isQrIban}.\n *\n * It is {@link Input} underneath, so `label`, `hint`, `error`, `invalid` and the rest\n * are Input's own and the field reads like every other. A form that must not submit\n * an invalid IBAN checks {@link isValidIban} / {@link ibanProblem} itself — the field\n * shows the problem but does not own the submit.\n */\nexport function IbanInput({\n  // The `<input>` (InputProps'): a React 19 ref prop since 0.34 (MOD-4, refactor audit\n  // 2026-10), where this was `forwardRef`.\n  ref,\n  value,\n  onValueChange,\n  onChange,\n  onFocus,\n  onBlur,\n  kind = \"any\",\n  labels,\n  error,\n  inputClassName,\n  ...rest\n}: IbanInputProps) {\n  const text = useIbanInputLabels(labels);\n  const compact = compactIban(value);\n  const shown = formatIban(compact);\n  const [focused, setFocused] = useState(false);\n  const innerRef = useRef<HTMLInputElement | null>(null);\n  // Letters and digits before the caret, kept across the re-render that regroups.\n  const caretRef = useRef<number | null>(null);\n  const setRefs = useCallback(\n    (el: HTMLInputElement | null) => {\n      innerRef.current = el;\n      assignRef(ref, el);\n    },\n    [ref],\n  );\n\n  // Every render: when a change moved the groups, put the caret back after the same\n  // character it followed. Only while focused — a value set from outside moves nothing.\n  useLayoutEffect(() => {\n    const el = innerRef.current;\n    const count = caretRef.current;\n    if (el === null || count === null) return;\n    caretRef.current = null;\n    if (el.ownerDocument.activeElement !== el) return;\n    const at = indexAfter(el.value, count);\n    el.setSelectionRange(at, at);\n  });\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    const el = e.target;\n    const raw = el.value;\n    const next = compactIban(raw);\n    // Characters compactIban dropped from the front (a pasted \"IBAN \" label) are not\n    // in the value, so they are not counted before the caret either.\n    const dropped = alnumCount(raw) - next.length;\n    const count = Math.max(0, alnumCount(raw.slice(0, el.selectionStart ?? raw.length)) - dropped);\n    if (next === compact) {\n      // Nothing the value holds changed — a space typed, a group's space deleted — so\n      // no re-render will come to regroup it. Regroup now, and keep the caret: after\n      // a Backspace on a group's space, that is just before it.\n      el.value = shown;\n      const at = indexAfter(shown, count);\n      el.setSelectionRange(at, at);\n    } else {\n      caretRef.current = count;\n    }\n    onValueChange?.(next);\n  };\n\n  const problem = visibleProblem(compact, kind, focused);\n  return (\n    <Input\n      ref={setRefs}\n      {...rest}\n      type=\"text\"\n      value={shown}\n      onChange={handleChange}\n      onFocus={(e: FocusEvent<HTMLInputElement>) => {\n        setFocused(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e: FocusEvent<HTMLInputElement>) => {\n        setFocused(false);\n        onBlur?.(e);\n      }}\n      autoComplete={rest.autoComplete ?? \"off\"}\n      autoCapitalize={rest.autoCapitalize ?? \"characters\"}\n      autoCorrect={rest.autoCorrect ?? \"off\"}\n      spellCheck={rest.spellCheck ?? false}\n      // ALWAYS passed, even while there is no message: a field that takes `error`\n      // keeps its box, so the message coming and going under the caret never remounts\n      // the input (see Input's FieldGroup) — this one comes and goes as you type.\n      error={hasContent(error) ? error : problem ? messageFor(problem, compact, text) : undefined}\n      // Groups of four line up only when every digit is the same width.\n      inputClassName={cn(\"tabular-nums\", inputClassName)}\n    />\n  );\n}\n"],"mappings":"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","names":[]}