@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/components/dropdown.js

@@ -1,30 +1,43 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Search } from "lucide-react";
-import { useAnchoredPanel } from "../hooks/use-anchored-panel.js";
-import { useEscapeKey, useOutsideClick } from "../hooks/use-dismiss.js";
+import { anchoredInline, useAnchoredPanel } from "../hooks/use-anchored-panel.js";
+import { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss.js";
 import { useOverlayHistory } from "../hooks/use-overlay-history.js";
 import { cn } from "../lib/cn.js";
-import { FIELD_TOUCH_TEXT } from "./ui.js";
+import { FIELD_TOUCH_TEXT } from "./field-base.js";
+import { mergeRefs } from "./field-parts.js";
 import { FOCUS_RING } from "./focus-ring.js";
 import { useAnchorDir } from "./use-anchor-dir.js";
+const listLayers = /* @__PURE__ */ new WeakMap();
 function useDropdown({
   backCloses = true,
-  panelIsSheet = !backCloses
+  panelIsSheet = !backCloses,
+  escapeLayer = true
 } = {}) {
   const [open, setOpen] = useState(false);
   const wrapperRef = useRef(null);
   const triggerRef = useRef(null);
   const panelRef = useRef(null);
+  const openerRef = useRef(null);
+  useEffect(() => {
+    if (!open) return;
+    const el = document.activeElement;
+    openerRef.current = el instanceof HTMLElement && el !== document.body ? el : null;
+  }, [open]);
   const close = useCallback(() => setOpen(false), []);
   const closeToTrigger = useCallback(() => {
     setOpen(false);
-    triggerRef.current?.focus();
+    const back = triggerRef.current ?? openerRef.current;
+    if (back?.isConnected) back.focus();
   }, []);
   useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);
-  useEscapeKey(closeToTrigger, open);
+  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);
+  useEffect(() => {
+    listLayers.set(panelRef, layer);
+  }, [panelRef, layer]);
   useOverlayHistory(open && backCloses, close);
   return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };
 }
@@ -32,6 +45,10 @@ function useDropdownSearch() {
   const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } = useDropdown();
   const [query, setQuery] = useState("");
   const inputRef = useRef(null);
+  useEffect(() => {
+    const layer = listLayers.get(panelRef);
+    if (layer) listLayers.set(inputRef, layer);
+  }, [panelRef]);
   useEffect(() => {
     if (open) {
       setQuery("");
@@ -72,11 +89,11 @@ function DropdownSearchHeader({
       {
         ...rest,
         className: cn(
-          "flex items-center gap-2 border-b border-[var(--border)] px-2 py-1.5",
+          "flex items-center gap-2 border-b border-subtle px-2 py-1.5",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx(Search, { className: "size-4 text-[var(--text-placeholder)]" }),
+          /* @__PURE__ */ jsx(Search, { className: "size-4 text-placeholder" }),
           /* @__PURE__ */ jsx(
             "input",
             {
@@ -84,14 +101,17 @@ function DropdownSearchHeader({
               type: "text",
               value: query,
               onChange: (e) => onQueryChange(e.target.value),
-              onKeyDown,
+              onKeyDown: (e) => {
+                runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));
+                takeEscape(e);
+              },
               placeholder,
               "aria-label": ariaLabel,
               "aria-controls": listboxId,
               "aria-activedescendant": activeId,
               "aria-autocomplete": listboxId ? "list" : void 0,
               className: cn(
-                "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]",
+                "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary",
                 FOCUS_RING,
                 FIELD_TOUCH_TEXT
               )
@@ -113,45 +133,56 @@ function DropdownPanel({
   align = "end",
   children,
   style,
+  onKeyDown,
+  ref,
   ...rest
 }) {
+  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);
   const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
   const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
+  const handleKeyDown = (e) => {
+    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));
+    takeEscape(e);
+  };
   const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     header,
     /* @__PURE__ */ jsxs("ul", { ...listProps, className: cn("overflow-y-auto py-1", listProps?.className), children: [
       children,
-      empty && /* @__PURE__ */ jsx("li", { role: "presentation", className: "px-3 py-2 text-sm text-[var(--text-muted)]", children: "\u2014" })
+      empty && /* @__PURE__ */ jsx("li", { role: "presentation", className: "px-3 py-2 text-sm text-muted", children: "\u2014" })
     ] })
   ] });
   if (!anchorRef) {
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ...rest,
-        style,
-        ref: panelRef,
-        className: cn(
-          "absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
-          "[&>ul]:max-h-64",
-          className
-        ),
-        children: body
-      }
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          style,
+          ref: setPanel,
+          onKeyDown: handleKeyDown,
+          className: cn(
+            "absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg",
+            "[&>ul]:max-h-64",
+            className
+          ),
+          children: body
+        }
+      )
     );
   }
   const rect = anchored.rect;
   if (!rect) return null;
-  const physical = align === "start" ? dir === "rtl" ? "right" : "left" : align === "end" ? dir === "rtl" ? "left" : "right" : align;
-  const wanted = physical === "right" ? rect.right - width : rect.left;
-  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);
+  const { left } = anchoredInline(rect, width, { dir, align });
   return createPortal(
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.
     /* @__PURE__ */ jsx(
       "div",
       {
         ...rest,
-        ref: panelRef,
+        ref: setPanel,
         dir,
+        onKeyDown: handleKeyDown,
         style: {
           ...style,
           position: "fixed",
@@ -162,7 +193,7 @@ function DropdownPanel({
           maxHeight: anchored.maxHeight
         },
         className: cn(
-          "z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+          "z-50 flex flex-col overflow-hidden rounded-md border border-subtle bg-surface shadow-lg",
           // The list, not the panel, is what scrolls: the search header has to stay put
           // while the options move under it.
           "[&>ul]:min-h-0 [&>ul]:flex-1",

package/dist/components/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { useEscapeKey, useOutsideClick } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./ui\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/**\n * Open state + close-on-outside-click for the custom dropdowns (MultiSelect,\n * CurrencySelect, AmountInput's currency picker, Combobox). Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. {@link useEscapeKey} is the listener\n * `Modal`, `Popover` and `useComboboxCore` already dismiss through, so the package\n * keeps one answer to \"what does Escape do\" rather than growing a fifth.\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they simply close,\n * which is what the callers written before this get.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n}: { backCloses?: boolean; panelIsSheet?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document. Whoever closed the list with a key gets\n  // it handed back to the trigger they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    triggerRef.current?.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  useEscapeKey(closeToTrigger, open);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-[var(--border)] px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-[var(--text-placeholder)]\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={onKeyDown}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-[var(--text-placeholder)] text-[var(--text-primary)]\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting.\n   *  `start`/`end` follow the trigger's reading direction — `end` is the right edge\n   *  in a left-to-right form and the left one in a right-to-left form — and are what\n   *  the kit's own pickers pass; `left`/`right` stay physical. Default `end`, which\n   *  is the old `right` in a left-to-right page. */\n  align?: \"left\" | \"right\" | \"start\" | \"end\";\n  children: ReactNode;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  ...rest\n}: DropdownPanelProps) {\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-[var(--text-muted)]\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      <div\n        {...rest}\n        style={style}\n        ref={panelRef}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped exactly as `Popover` clamps: the panel may leave the trigger's edge to\n  // stay on screen, because a list half off the viewport is the bug this exists for.\n  // The portal leaves the subtree the trigger's `dir` came from, so it is read off\n  // the trigger — for the alignment here, and for the panel's own `dir` below,\n  // without which a right-to-left form got a left-to-right list.\n  const physical =\n    align === \"start\" ? (dir === \"rtl\" ? \"right\" : \"left\") : align === \"end\" ? (dir === \"rtl\" ? \"left\" : \"right\") : align;\n  const wanted = physical === \"right\" ? rect.right - width : rect.left;\n  const left = Math.min(Math.max(8, wanted), window.innerWidth - width - 8);\n  return createPortal(\n    <div\n      {...rest}\n      ref={panelRef}\n      dir={dir}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so these values are the panel's own. Flipped above, it hangs from its\n      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose\n      // K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: anchored.above ? undefined : anchored.top,\n        bottom: anchored.above ? anchored.bottom : undefined,\n        left,\n        width,\n        maxHeight: anchored.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":";AA+LI,SAkGA,UA3FE,KAPF;AA/LJ,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AAOzD,SAAS,oBAAoB;AAC7B,SAAS,cAAc;AACvB,SAAS,wBAAwB;AACjC,SAAS,cAAc,uBAAuB;AAC9C,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,wBAAwB;AACjC,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AA4DtB,SAAS,YAAoD;AAAA,EAClE,aAAa;AAAA,EACb,eAAe,CAAC;AAClB,IAAsD,CAAC,GAAG;AACxD,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,aAAa,OAAU,IAAI;AAGjC,QAAM,aAAa,OAA0B,IAAI;AAKjD,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,QAAQ,YAAY,MAAM,QAAQ,KAAK,GAAG,CAAC,CAAC;AAKlD,QAAM,iBAAiB,YAAY,MAAM;AACvC,YAAQ,KAAK;AACb,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,CAAC;AACL,kBAAgB,CAAC,YAAY,QAAQ,GAAG,OAAO,QAAQ,CAAC,YAAY;AACpE,eAAa,gBAAgB,IAAI;AAGjC,oBAAkB,QAAQ,YAAY,KAAK;AAC3C,SAAO,EAAE,MAAM,SAAS,YAAY,UAAU,YAAY,eAAe;AAC3E;AAMO,SAAS,oBAA4D;AAC1E,QAAM,EAAE,MAAM,SAAS,YAAY,UAAU,YAAY,eAAe,IACtE,YAAe;AACjB,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,EAAE;AACrC,QAAM,WAAW,OAAyB,IAAI;AAC9C,YAAU,MAAM;AACd,QAAI,MAAM;AAER,eAAS,EAAE;AACX,4BAAsB,MAAM,SAAS,SAAS,MAAM,CAAC;AAAA,IACvD;AAAA,EACF,GAAG,CAAC,IAAI,CAAC;AACT,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;AAyCO,SAAS,qBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,GAAG;AACL,GAA8B;AAC5B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QACF;AAAA,QAEA;AAAA,8BAAC,UAAO,WAAU,yCAAwC;AAAA,UAC1D;AAAA,YAAC;AAAA;AAAA,cACC,KAAK;AAAA,cACL,MAAK;AAAA,cACL,OAAO;AAAA,cACP,UAAU,CAAC,MAAM,cAAc,EAAE,OAAO,KAAK;AAAA,cAC7C;AAAA,cACA;AAAA,cACA,cAAY;AAAA,cACZ,iBAAe;AAAA,cACf,yBAAuB;AAAA,cACvB,qBAAmB,YAAY,SAAS;AAAA,cAGxC,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,cACF;AAAA;AAAA,UACF;AAAA;AAAA;AAAA,IACF;AAAA;AAEJ;AAqDO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAuB;AACrB,QAAM,WAAW,iBAAiB,aAAa,WAAW,QAAQ,SAAS,CAAC;AAC5E,QAAM,MAAM,aAAa,aAAa,WAAW,QAAQ,SAAS,CAAC;AACnE,QAAM,OACJ,iCACG;AAAA;AAAA,IAID,qBAAC,QAAI,GAAG,WAAW,WAAW,GAAG,wBAAwB,WAAW,SAAS,GAC1E;AAAA;AAAA,MAIA,SACC,oBAAC,QAAG,MAAK,gBAAe,WAAU,8CAA6C,oBAE/E;AAAA,OAEJ;AAAA,KACF;AAGF,MAAI,CAAC,WAAW;AACd,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ;AAAA,QACA,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,EAEJ;AAEA,QAAM,OAAO,SAAS;AACtB,MAAI,CAAC,KAAM,QAAO;AAMlB,QAAM,WACJ,UAAU,UAAW,QAAQ,QAAQ,UAAU,SAAU,UAAU,QAAS,QAAQ,QAAQ,SAAS,UAAW;AAClH,QAAM,SAAS,aAAa,UAAU,KAAK,QAAQ,QAAQ,KAAK;AAChE,QAAM,OAAO,KAAK,IAAI,KAAK,IAAI,GAAG,MAAM,GAAG,OAAO,aAAa,QAAQ,CAAC;AACxE,SAAO;AAAA,IACL;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL;AAAA,QAMA,OAAO;AAAA,UACL,GAAG;AAAA,UACH,UAAU;AAAA,UACV,KAAK,SAAS,QAAQ,SAAY,SAAS;AAAA,UAC3C,QAAQ,SAAS,QAAQ,SAAS,SAAS;AAAA,UAC3C;AAAA,UACA;AAAA,UACA,WAAW,SAAS;AAAA,QACtB;AAAA,QACA,WAAW;AAAA,UACT;AAAA;AAAA;AAAA,UAGA;AAAA,UACA;AAAA,QACF;AAAA,QAEC;AAAA;AAAA,IACH;AAAA,IACA,SAAS;AAAA,EACX;AACF;AAGA,MAAM,YAA2C,EAAE,SAAS,KAAK;","names":[]}
+{"version":3,"sources":["../../src/components/dropdown.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport type {\n  ComponentPropsWithoutRef,\n  ComponentPropsWithRef,\n  KeyboardEvent as ReactKeyboardEvent,\n  ReactNode,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { Search } from \"lucide-react\";\nimport { anchoredInline, useAnchoredPanel } from \"../hooks/use-anchored-panel\";\nimport { runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from \"../hooks/use-dismiss\";\nimport type { DismissLayer } from \"../hooks/use-dismiss\";\nimport { useOverlayHistory } from \"../hooks/use-overlay-history\";\nimport { cn } from \"../lib/cn\";\nimport { FIELD_TOUCH_TEXT } from \"./field-base\";\nimport { mergeRefs } from \"./field-parts\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useAnchorDir } from \"./use-anchor-dir\";\n\n/** Each list's Escape layer, filed under the refs {@link useDropdown} and\n *  {@link useDropdownSearch} hand out (`panelRef`, `inputRef`), for the panel and the\n *  search box those refs are passed to — see \"The caller's own handler\" on\n *  {@link useDropdown} (round 0.35 R2). Weak: a list's refs go with its component. */\nconst listLayers = new WeakMap<object, DismissLayer>();\n\n/**\n * Open state + close-on-outside-click for a custom dropdown — the two input-shaped\n * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and\n * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round\n * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`\n * to the relatively-positioned container; the popover lives inside it so a click\n * anywhere else closes it.\n *\n * ## Back closes the list, not the page behind it\n *\n * Keksdose live #309 rework: *\"It shall only close it if it is prior open, and not\n * when I am seeing the dialog.\"* Round one wired {@link PickerSheet} — the shape\n * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer\n * shape out. So on a desktop one Back press over an open list still went past it to\n * the dialog underneath: measured on his own budget, the transfer form's account list\n * was showing and Back took the entire add card, amount and all. That is the same\n * loss round one called *\"discarding an edit in progress in order to dismiss a\n * list\"*, in the other shell.\n *\n * Every dropdown built on this hook is dismissible and is the topmost thing on screen\n * while it is up, so the rule is the hook's rather than each caller's. `backCloses`\n * is for the ONE case where a second entry would be wrong: a caller whose panel is\n * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at\n * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.\n *\n * ## One outside-click rule for the whole package\n *\n * This hand-rolled a second document listener, on `mousedown`, months after\n * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to\n * `pointerdown` for a reason that applies here word for word: on a touch platform\n * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged\n * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker\n * and both comboboxes all dismiss through this. Two copies of one rule is one copy\n * too many; this now delegates, so the package has a single answer to \"what is an\n * outside press\".\n *\n * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and\n * fills the screen, so it has no outside — and being portalled to `<body>`, it is\n * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read\n * every tap in it as a press outside and close it at finger-down. The sheet's own\n * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot\n * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same\n * question — \"is this caller's panel a sheet?\" — and the one caller that answers yes\n * already says so; they are separate props so a future caller can answer them apart.\n *\n * ## Escape, and where focus lands after it\n *\n * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an\n * outside press closed them, and the one key every other dismissible surface in the\n * package answers to did nothing — so a keyboard user who opened a list had no way\n * out of it that did not also choose something. An open list is a layer on the kit's\n * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and\n * `useComboboxCore` are, so the package keeps one answer to \"what does Escape do\".\n *\n * Escape RESTORES FOCUS; an outside press does not. A press has already put focus\n * where the user pointed, and dragging it back from there would be the bug. Attach\n * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,\n * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to\n * whatever held focus when the list opened, which is the control that was pressed.\n *\n * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)\n *\n * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the\n * DIALOG, form and all, and leave the list open: the dialog took Escape in its own\n * `onKeyDown` before a document listener could. On the stack the list is above the\n * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and\n * {@link DropdownSearchHeader} take the key on their own elements, where focus is,\n * and stop it there — so a caller passes nothing new, AmountInput's currency chip\n * included.\n *\n * ## The caller's own handler (round 0.35 R2)\n *\n * A caller's `onKeyDown` on {@link DropdownPanel} or {@link DropdownSearchHeader} hears\n * Escape only while this list is the layer on top — the rule the dialogs got first. A\n * tooltip over a row takes that press first, and the next one is the handler's, whose\n * `preventDefault()` still keeps the list. The two find the list's layer through the\n * refs this hook hands out — the panel through `panelRef`, the search box through\n * {@link useDropdownSearch}'s `inputRef` — so a caller passes nothing new. One handed\n * neither (an un-anchored panel may leave `panelRef` off) hears every key, as before.\n *\n * `escapeLayer: false` is for a caller that registers its own layer: the editable\n * comboboxes, whose list can be \"open\" with nothing in it to show — an Escape there\n * belongs to the dialog.\n */\nexport function useDropdown<T extends HTMLElement = HTMLDivElement>({\n  backCloses = true,\n  panelIsSheet = !backCloses,\n  escapeLayer = true,\n}: { backCloses?: boolean; panelIsSheet?: boolean; escapeLayer?: boolean } = {}) {\n  const [open, setOpen] = useState(false);\n  const wrapperRef = useRef<T>(null);\n  // The control that opens the panel — see the note above on why only the keyboard\n  // paths read it, and why attaching it is the caller's choice.\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is\n  // then a child of <body> rather than of the wrapper, so \"did the click land inside\n  // the wrapper\" answers no for every click on the list itself and the first option a\n  // user picked closed the dropdown without picking anything.\n  const panelRef = useRef<HTMLDivElement>(null);\n  // Where focus was as the list opened — the trigger focus goes back to when the\n  // caller attached none. Read in an effect, before `useDropdownSearch`'s frame moves\n  // focus into the search box.\n  const openerRef = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    if (!open) return;\n    const el = document.activeElement;\n    openerRef.current = el instanceof HTMLElement && el !== document.body ? el : null;\n  }, [open]);\n  const close = useCallback(() => setOpen(false), []);\n  // Closing unmounts whatever held focus — the search box, the row the keyboard was\n  // on — and the browser then drops focus on <body>: the caret vanishes and the next\n  // Tab restarts at the top of the document, and inside a dialog the next Escape goes\n  // nowhere. Whoever closed the list with a key gets focus handed back to the trigger\n  // they opened it from.\n  const closeToTrigger = useCallback(() => {\n    setOpen(false);\n    const back = triggerRef.current ?? openerRef.current;\n    if (back?.isConnected) back.focus();\n  }, []);\n  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);\n  // See \"Escape inside a dialog\" above.\n  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);\n  // Filed under `panelRef` for the panel's own handler — \"The caller's own handler\" above.\n  useEffect(() => {\n    listLayers.set(panelRef, layer);\n  }, [panelRef, layer]);\n  // Same close path Escape and an outside click take, so a list dismissed by Back\n  // cannot end up in a different state from one dismissed any other way.\n  useOverlayHistory(open && backCloses, close);\n  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };\n}\n\n/**\n * {@link useDropdown} plus a search box: clears the query and focuses the search\n * input each time the panel opens, so typing filters immediately.\n */\nexport function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {\n  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } =\n    useDropdown<T>();\n  const [query, setQuery] = useState(\"\");\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The list's layer again, under `inputRef` for the search box's handler (round 0.35\n  // R2). `useDropdown`'s effect, which runs first, has filed it under `panelRef`.\n  useEffect(() => {\n    const layer = listLayers.get(panelRef);\n    if (layer) listLayers.set(inputRef, layer);\n  }, [panelRef]);\n  useEffect(() => {\n    if (open) {\n      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open\n      setQuery(\"\");\n      requestAnimationFrame(() => inputRef.current?.focus());\n    }\n  }, [open]);\n  return {\n    open,\n    setOpen,\n    wrapperRef,\n    panelRef,\n    triggerRef,\n    closeToTrigger,\n    query,\n    setQuery,\n    inputRef,\n  };\n}\n\n/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled\n *  where the focus is (see the note above), so the div's own handler signature is\n *  omitted in favour of it. */\nexport interface DropdownSearchHeaderProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"onKeyDown\"> {\n  query: string;\n  onQueryChange: (v: string) => void;\n  inputRef: RefObject<HTMLInputElement | null>;\n  placeholder?: string;\n  /** The `<ul role=\"listbox\">` this box filters. */\n  listboxId?: string;\n  /** The id of the option the arrow keys are currently on, if any. */\n  activeId?: string;\n  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.\n   *  Escape closes the list (the topmost layer on the kit's Escape stack); call\n   *  `preventDefault()` on it here to keep it. */\n  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;\n}\n\n/** The search row (magnifier + text input) shared by the searchable dropdowns.\n *\n *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same\n *  finding as the numpad's keys). That mattered more here than the bare class suggests:\n *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is\n *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field\n *  showing a placeholder is a single blinking pixel column. The ring is what says \"this\n *  list is being typed into\"; it appears whenever the field holds focus, which for a\n *  text input is exactly when it is true.\n *\n *  ## Why this box is a plain textbox and the TRIGGER is the combobox\n *\n *  The panels this header sits in are opened by a field-shaped trigger, and that\n *  trigger is what carries `role=\"combobox\"` (see {@link MultiSelect},\n *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a\n *  reader tabbing back to the field would meet a second one describing the same\n *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and\n *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so\n *  this is what has to say which option the arrow keys are on.\n *\n *  Pass `listboxId` and the wiring appears; omit it and the box is what it always\n *  was, for the callers that have no listbox to point at. */\nexport function DropdownSearchHeader({\n  query,\n  onQueryChange,\n  inputRef,\n  placeholder,\n  listboxId,\n  activeId,\n  onKeyDown,\n  \"aria-label\": ariaLabel,\n  className,\n  ...rest\n}: DropdownSearchHeaderProps) {\n  return (\n    // `rest` dresses the header row; the NAME goes on the box below it. A search\n    // input whose only name is its placeholder has none the moment a character is\n    // typed into it — the placeholder disappears — which is why this is worth a prop\n    // at all rather than something a caller could add from outside.\n    <div\n      {...rest}\n      className={cn(\n        \"flex items-center gap-2 border-b border-subtle px-2 py-1.5\",\n        className,\n      )}\n    >\n      <Search className=\"size-4 text-placeholder\" />\n      <input\n        ref={inputRef}\n        type=\"text\"\n        value={query}\n        onChange={(e) => onQueryChange(e.target.value)}\n        onKeyDown={(e) => {\n          // The caller's handler hears Escape only while the list is on top (round 0.35\n          // R2) — the layer filed under `inputRef`, when {@link useDropdownSearch} made it.\n          runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));\n          // Focus is in this box while the list is up, so this is where Escape lands\n          // first — see \"Escape inside a dialog\" on {@link useDropdown}.\n          takeEscape(e);\n        }}\n        placeholder={placeholder}\n        aria-label={ariaLabel}\n        aria-controls={listboxId}\n        aria-activedescendant={activeId}\n        aria-autocomplete={listboxId ? \"list\" : undefined}\n        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms\n        // the page the moment a picker opens and focuses it (§10.1).\n        className={cn(\n          \"w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary\",\n          FOCUS_RING,\n          FIELD_TOUCH_TEXT,\n        )}\n      />\n    </div>\n  );\n}\n\nexport interface DropdownPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  header?: ReactNode;\n  empty?: boolean;\n  /** Attributes for the `<ul>` itself — how a caller whose children are options\n   *  gives the list its `role=\"listbox\"`, its id and `aria-multiselectable`. The\n   *  panel owns the scrolling and the padding, so `className` here is merged rather\n   *  than replaced. */\n  listProps?: ComponentPropsWithoutRef<\"ul\">;\n  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape\n   *  anywhere in the panel, on a row as in the search box, closes the list rather than\n   *  a dialog around it. It is also how the panel finds the list's Escape layer, for\n   *  its `onKeyDown` (round 0.35 R2: see \"The caller's own handler\" there). */\n  panelRef?: RefObject<HTMLDivElement | null>;\n  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */\n  width?: number;\n  /** Which of the panel's edges lines up with the trigger's, room permitting, by the\n   *  trigger's reading direction — `end` is the right edge in a left-to-right form and\n   *  the left one in a right-to-left form. Default `end`. The physical `left` / `right`\n   *  went in 0.35 (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a\n   *  left-to-right page, `left` is `start`. */\n  align?: \"start\" | \"end\";\n  children: ReactNode;\n  /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —\n   *  merged with `panelRef`, so the outside-click still sees it. */\n  ref?: Ref<HTMLDivElement>;\n}\n\n/**\n * The floating popover surface for the searchable dropdowns: bordered/shadowed\n * panel, an optional `header` slot (search box, plus any actions), and a\n * scrollable `<ul>` of `children` with an \"empty\" row when nothing matches.\n *\n * ## Anchored, or merely absolute\n *\n * Without `anchorRef` the panel is `position: absolute` inside whatever relative box\n * the caller put it in, and the caller places it with `className` (`w-64`,\n * `end-0 top-full`). That is fine in a page that does not scroll around it, and\n * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that\n * ancestor's box, with no error and no scrollbar, just a list with its side sliced\n * off. Keksdose dev#548 is what that looks like in practice: the app's own content\n * scroller starts 280px from the left, the amount field's currency picker opens\n * right-aligned and 256px wide, and in the transaction row editor its left third —\n * the search box's first letter, and every row's currency symbol — was cut away.\n *\n * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against\n * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}\n * already gives the calculator, and the same reason. It re-aligns on scroll and\n * resize, flips above the trigger when the room is there instead (a phone keyboard\n * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger\n * near either side cannot push it off-screen.\n *\n * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is\n * no longer inside the wrapper, so the outside-click handler has to be told about it\n * or the first click on an option closes the list instead of choosing from it.\n */\nexport function DropdownPanel({\n  header,\n  empty,\n  className,\n  listProps,\n  anchorRef,\n  panelRef,\n  width = 256,\n  align = \"end\",\n  children,\n  style,\n  onKeyDown,\n  ref,\n  ...rest\n}: DropdownPanelProps) {\n  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);\n  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));\n  // A row the keyboard reached by Tab holds focus too, and its Escape has to close the\n  // list as the search box's does (BUG-1). The caller's handler first, as everywhere.\n  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {\n    // It hears Escape only while the list is on top, a tooltip over a row taking the\n    // press first (round 0.35 R2) — the layer filed under `panelRef`, when handed one.\n    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));\n    takeEscape(e);\n  };\n  const body = (\n    <>\n      {header}\n      {/* The anchored form caps its own height against the VISIBLE viewport and lets\n          this list have the rest; the absolute form keeps the fixed `max-h-64` it has\n          always had, applied by the wrapper below. */}\n      <ul {...listProps} className={cn(\"overflow-y-auto py-1\", listProps?.className)}>\n        {children}\n        {/* `presentation`, so that a caller who made this list a `listbox` does not\n            end up with one child that is not an option. The em dash still reads — it\n            is the row's semantics that are dropped, not its text. */}\n        {empty && (\n          <li role=\"presentation\" className=\"px-3 py-2 text-sm text-muted\">\n            —\n          </li>\n        )}\n      </ul>\n    </>\n  );\n\n  if (!anchorRef) {\n    return (\n      // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n      <div\n        {...rest}\n        style={style}\n        ref={setPanel}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          \"absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg\",\n          \"[&>ul]:max-h-64\",\n          className,\n        )}\n      >\n        {body}\n      </div>\n    );\n  }\n\n  const rect = anchored.rect;\n  if (!rect) return null;\n  // Clamped to the glass as `Popover` is (Wave 2, DUP-7): the panel may leave the\n  // trigger's edge to stay on screen, because a list half off the viewport is the bug\n  // this exists for. The portal leaves the subtree the trigger's `dir` came from, so it\n  // is read off the trigger — for the alignment here, and for the panel's own `dir`\n  // below, without which a right-to-left form got a left-to-right list.\n  const { left } = anchoredInline(rect, width, { dir, align });\n  return createPortal(\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- never focused itself: it catches Escape bubbling from the search box or a row inside it.\n    <div\n      {...rest}\n      ref={setPanel}\n      dir={dir}\n      onKeyDown={handleKeyDown}\n      // The caller's `style` is kept underneath, but the placement is measured rather\n      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel\n      // away), so these values are the panel's own. Flipped above, it hangs from its\n      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose\n      // K1); the edge not in use is cleared, a caller's included.\n      style={{\n        ...style,\n        position: \"fixed\",\n        top: anchored.above ? undefined : anchored.top,\n        bottom: anchored.above ? anchored.bottom : undefined,\n        left,\n        width,\n        maxHeight: anchored.maxHeight,\n      }}\n      className={cn(\n        \"z-50 flex flex-col overflow-hidden rounded-md border border-subtle bg-surface shadow-lg\",\n        // The list, not the panel, is what scrolls: the search header has to stay put\n        // while the options move under it.\n        \"[&>ul]:min-h-0 [&>ul]:flex-1\",\n        className,\n      )}\n    >\n      {body}\n    </div>,\n    document.body,\n  );\n}\n\n/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */\nconst EMPTY_REF: RefObject<HTMLElement | null> = { current: null };\n"],"mappings":"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","names":[]}

package/dist/components/empty-state.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+export interface EmptyStateProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
+    /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes
+     *  every empty state in three apps look like the same thing — so there is no
+     *  `children` slot to put arbitrary content in. The two slots below are the only
+     *  other things an empty state has turned out to need, and each has a fixed place. */
+    /** Nodes rather than strings, so a title can carry a code, a link or an emphasised
+     *  word — keksdose's error boundary shows the error's name in `<code>` — while the
+     *  box still sets the type. */
+    title: ReactNode;
+    hint?: ReactNode;
+    /**
+     * Render the title as a heading of this level. Left out it is a `<div>`, as before:
+     * most empty states are a message inside a section that already has its heading.
+     * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing
+     * when it moved onto EmptyState — so the page's heading outline lost the one line
+     * that says what happened. Only the element changes; the look is the box's.
+     */
+    headingAs?: "h2" | "h3" | "h4" | "h5" | "h6";
+    /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's
+     *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and
+     *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,
+     *  because the title already says what it shows. */
+    icon?: ReactNode;
+    /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its
+     *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they
+     *  wrap and centre as one row), kastlan's "Create a rule". Buttons or links the
+     *  caller renders; the box only places them. */
+    action?: ReactNode;
+    /**
+     * `box` (default): the dashed, padded card that stands in for a whole section.
+     * `inline`: one quiet line with no box — for the empty state INSIDE something that
+     * already has its own frame, where a dashed card would be a box in a box. keksdose
+     * writes that line by hand five times as a muted `<p className="py-6 text-center">`:
+     * the notification inbox (notification-inbox:140), a support thread
+     * (support-thread:144), the assistant (assistant-page:321), the admin support panel
+     * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks
+     * to the text's size and sits before the title, the hint follows on the same line,
+     * and the row wraps only when it must. Centred like the box; `className="justify-start"`
+     * for a list that reads from the start edge (funding-dialog).
+     */
+    variant?: "box" | "inline";
+    /**
+     * Colour the icon and the title: `danger` for an error standing where the content
+     * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and
+     * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a
+     * message — and `success` for an empty state that is GOOD news, kastlan's "No defects
+     * recorded for this room" (handover defects-step.tsx:142, a green check). Left out,
+     * both stay muted. The hint stays muted either way: it is the explanation, not the
+     * verdict.
+     */
+    tone?: "danger" | "success";
+    /**
+     * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty
+     * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where
+     * the default's 14px centred line with `py-4` read as a section of its own.
+     * keksdose's holdings panel (holdings-panel:563), asset-loan panel
+     * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote
+     * `className="justify-start py-1"` over it and still got body-size text. Default `md`,
+     * the look it had. Ignored by the box.
+     */
+    size?: "sm" | "md";
+}
+export declare function EmptyState({ title, hint, icon, action, headingAs, variant, tone, size, className, ...rest }: EmptyStateProps): import("react").JSX.Element;

package/dist/components/empty-state.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+const EMPTY_STATE_TONE = {
+  danger: "text-danger",
+  success: "text-success"
+};
+function EmptyState({
+  title,
+  hint,
+  icon,
+  action,
+  headingAs,
+  variant = "box",
+  tone,
+  size = "md",
+  className,
+  ...rest
+}) {
+  const Title = headingAs ?? "div";
+  const toneClass = tone ? EMPTY_STATE_TONE[tone] : void 0;
+  const hasHint = hint != null && hint !== false && hint !== "";
+  if (variant === "inline") {
+    const sm = size === "sm";
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...rest,
+        className: cn(
+          "flex flex-wrap items-center text-muted",
+          sm ? "justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs" : "justify-center gap-x-2 gap-y-1 py-4 text-center text-sm",
+          className
+        ),
+        children: [
+          icon != null && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: cn("flex text-placeholder", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", toneClass),
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx(Title, { className: cn(sm ? "text-xs" : "text-sm", toneClass), children: title }),
+          hasHint && /* @__PURE__ */ jsx("span", { className: "text-xs", children: hint }),
+          action != null && /* @__PURE__ */ jsx("span", { className: "flex flex-wrap items-center gap-2", children: action })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...rest,
+      className: cn(
+        "flex flex-col items-center justify-center rounded-lg border border-dashed border-strong bg-surface-2 px-4 py-10 text-center text-sm text-muted",
+        className
+      ),
+      children: [
+        icon != null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: cn("mb-3 text-placeholder [&_svg]:size-8", toneClass), children: icon }),
+        /* @__PURE__ */ jsx(Title, { className: cn("text-sm font-medium text-secondary", toneClass), children: title }),
+        hasHint && /* @__PURE__ */ jsx("div", { className: "mt-1 text-xs", children: hint }),
+        action != null && /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap items-center justify-center gap-2", children: action })
+      ]
+    }
+  );
+}
+export {
+  EmptyState
+};
+//# sourceMappingURL=empty-state.js.map

package/dist/components/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport interface EmptyStateProps extends Omit<ComponentPropsWithRef<\"div\">, \"children\" | \"title\"> {\n  /** The box renders `title` and `hint` in its own two-line rhythm, which is what makes\n   *  every empty state in three apps look like the same thing — so there is no\n   *  `children` slot to put arbitrary content in. The two slots below are the only\n   *  other things an empty state has turned out to need, and each has a fixed place. */\n  /** Nodes rather than strings, so a title can carry a code, a link or an emphasised\n   *  word — keksdose's error boundary shows the error's name in `<code>` — while the\n   *  box still sets the type. */\n  title: ReactNode;\n  hint?: ReactNode;\n  /**\n   * Render the title as a heading of this level. Left out it is a `<div>`, as before:\n   * most empty states are a message inside a section that already has its heading.\n   * keksdose's error boundary IS the page when it trips, and its `<h2>` went missing\n   * when it moved onto EmptyState — so the page's heading outline lost the one line\n   * that says what happened. Only the element changes; the look is the box's.\n   */\n  headingAs?: \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  /** A glyph ABOVE the title — kastlan's InboxEmptyState (an inbox), keksdose's\n   *  offline card (a cloud with a slash). Sized by the box (`[&_svg]:size-8`) and\n   *  muted, so five call sites cannot pick five sizes; hidden from assistive tech,\n   *  because the title already says what it shows. */\n  icon?: ReactNode;\n  /** What to do about it, BELOW the hint: keksdose's query-state cards (Retry), its\n   *  error boundary (Retry / Reload / Go home — pass all three in a fragment, they\n   *  wrap and centre as one row), kastlan's \"Create a rule\". Buttons or links the\n   *  caller renders; the box only places them. */\n  action?: ReactNode;\n  /**\n   * `box` (default): the dashed, padded card that stands in for a whole section.\n   * `inline`: one quiet line with no box — for the empty state INSIDE something that\n   * already has its own frame, where a dashed card would be a box in a box. keksdose\n   * writes that line by hand five times as a muted `<p className=\"py-6 text-center\">`:\n   * the notification inbox (notification-inbox:140), a support thread\n   * (support-thread:144), the assistant (assistant-page:321), the admin support panel\n   * (support-panel:265) and the funding dialog (funding-dialog:89). The icon shrinks\n   * to the text's size and sits before the title, the hint follows on the same line,\n   * and the row wraps only when it must. Centred like the box; `className=\"justify-start\"`\n   * for a list that reads from the start edge (funding-dialog).\n   */\n  variant?: \"box\" | \"inline\";\n  /**\n   * Colour the icon and the title: `danger` for an error standing where the content\n   * should be — kastlan's ErrorState (shared/components/feedback/error-state.tsx) and\n   * its error boundary's fallback (error-boundary.tsx:16), both a red triangle over a\n   * message — and `success` for an empty state that is GOOD news, kastlan's \"No defects\n   * recorded for this room\" (handover defects-step.tsx:142, a green check). Left out,\n   * both stay muted. The hint stays muted either way: it is the explanation, not the\n   * verdict.\n   */\n  tone?: \"danger\" | \"success\";\n  /**\n   * `inline` only (0.11.0). `sm`: 12px, start-aligned and tight (`py-1`) — the empty\n   * line INSIDE a detail panel, under a panel heading and among `text-xs` rows, where\n   * the default's 14px centred line with `py-4` read as a section of its own.\n   * keksdose's holdings panel (holdings-panel:563), asset-loan panel\n   * (asset-loan-panel:108) and loan-payment panel (loan-payment-panel:191) each wrote\n   * `className=\"justify-start py-1\"` over it and still got body-size text. Default `md`,\n   * the look it had. Ignored by the box.\n   */\n  size?: \"sm\" | \"md\";\n}\n\nconst EMPTY_STATE_TONE: Record<\"danger\" | \"success\", string> = {\n  danger: \"text-danger\",\n  success: \"text-success\",\n};\n\nexport function EmptyState({\n  title,\n  hint,\n  icon,\n  action,\n  headingAs,\n  variant = \"box\",\n  tone,\n  size = \"md\",\n  className,\n  ...rest\n}: EmptyStateProps) {\n  const Title = headingAs ?? \"div\";\n  const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;\n  const hasHint = hint != null && hint !== false && hint !== \"\";\n  if (variant === \"inline\") {\n    const sm = size === \"sm\";\n    return (\n      <div\n        {...rest}\n        className={cn(\n          \"flex flex-wrap items-center text-muted\",\n          sm\n            ? \"justify-start gap-x-1.5 gap-y-0.5 py-1 text-start text-xs\"\n            : \"justify-center gap-x-2 gap-y-1 py-4 text-center text-sm\",\n          className,\n        )}\n      >\n        {icon != null && (\n          <span\n            aria-hidden\n            className={cn(\"flex text-placeholder\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", toneClass)}\n          >\n            {icon}\n          </span>\n        )}\n        {/* No weight of its own: one muted line is what these sites were, and a\n            bold title would turn a quiet \"nothing here\" into a heading. */}\n        <Title className={cn(sm ? \"text-xs\" : \"text-sm\", toneClass)}>{title}</Title>\n        {hasHint && <span className=\"text-xs\">{hint}</span>}\n        {action != null && <span className=\"flex flex-wrap items-center gap-2\">{action}</span>}\n      </div>\n    );\n  }\n  return (\n    <div\n      {...rest}\n      className={cn(\n        \"flex flex-col items-center justify-center rounded-lg border border-dashed border-strong bg-surface-2 px-4 py-10 text-center text-sm text-muted\",\n        className,\n      )}\n    >\n      {icon != null && (\n        <div aria-hidden className={cn(\"mb-3 text-placeholder [&_svg]:size-8\", toneClass)}>\n          {icon}\n        </div>\n      )}\n      {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}\n      <Title className={cn(\"text-sm font-medium text-secondary\", toneClass)}>{title}</Title>\n      {hasHint && <div className=\"mt-1 text-xs\">{hint}</div>}\n      {action != null && (\n        <div className=\"mt-4 flex flex-wrap items-center justify-center gap-2\">{action}</div>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAyFM,SAWI,KAXJ;AAxFN,SAAS,UAAU;AAiEnB,MAAM,mBAAyD;AAAA,EAC7D,QAAQ;AAAA,EACR,SAAS;AACX;AAEO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP;AAAA,EACA,GAAG;AACL,GAAoB;AAClB,QAAM,QAAQ,aAAa;AAC3B,QAAM,YAAY,OAAO,iBAAiB,IAAI,IAAI;AAClD,QAAM,UAAU,QAAQ,QAAQ,SAAS,SAAS,SAAS;AAC3D,MAAI,YAAY,UAAU;AACxB,UAAM,KAAK,SAAS;AACpB,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA,KACI,8DACA;AAAA,UACJ;AAAA,QACF;AAAA,QAEC;AAAA,kBAAQ,QACP;AAAA,YAAC;AAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAW,GAAG,yBAAyB,KAAK,qBAAqB,kBAAkB,SAAS;AAAA,cAE3F;AAAA;AAAA,UACH;AAAA,UAIF,oBAAC,SAAM,WAAW,GAAG,KAAK,YAAY,WAAW,SAAS,GAAI,iBAAM;AAAA,UACnE,WAAW,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAAA,UAC3C,UAAU,QAAQ,oBAAC,UAAK,WAAU,qCAAqC,kBAAO;AAAA;AAAA;AAAA,IACjF;AAAA,EAEJ;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEC;AAAA,gBAAQ,QACP,oBAAC,SAAI,eAAW,MAAC,WAAW,GAAG,wCAAwC,SAAS,GAC7E,gBACH;AAAA,QAGF,oBAAC,SAAM,WAAW,GAAG,sCAAsC,SAAS,GAAI,iBAAM;AAAA,QAC7E,WAAW,oBAAC,SAAI,WAAU,gBAAgB,gBAAK;AAAA,QAC/C,UAAU,QACT,oBAAC,SAAI,WAAU,yDAAyD,kBAAO;AAAA;AAAA;AAAA,EAEnF;AAEJ;","names":[]}

package/dist/components/entity-combobox.d.ts

@@ -1,13 +1,11 @@
-import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
-import { ComboClearValue, ComboOption } from './combobox-core.js';
-import { CommitScope } from './write-lock.js';
-import '../hooks/use-anchored-rect.js';
-import '../hooks/use-anchored-panel.js';
-
+import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
+import { type ComboClearValue, type ComboOption } from "./combobox-core.js";
+import { type DisabledReasonDisplay } from "./field-parts.js";
+import { type CommitScope } from "./write-lock.js";
+export type { ComboClearValue, ComboOption } from "./combobox-core.js";
 /** `onChange` is the kit's — "a selection was made", carrying values — rather
  *  than the div's form event, so the DOM's spelling of it is omitted. */
-interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
+export interface EntityComboboxProps<V extends string | number, C extends ComboClearValue = null> extends Omit<ComponentPropsWithoutRef<"div">, "onChange"> {
     /** Selected id; `null`, `undefined` or `clearValue` when nothing is selected. */
     value: V | C | null | undefined;
     /** Selecting an option emits its value; the clear button emits `clearValue`. */
@@ -47,7 +45,7 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
      *  so it is the one control here that MUST be in the reader's language. */
     closeLabel?: string;
     /** The phone sheet's heading (and, as a string, its accessible name) for a picker
-     *  whose label is drawn by someone else — a form's `FormLabel`; `RhfCombobox`
+     *  whose label is drawn by someone else — a bound field's label; `RhfCombobox`
      *  hands its label over here (0.24). Default: `label`, then `placeholder`. */
     sheetTitle?: ReactNode;
     disabled?: boolean;
@@ -67,6 +65,9 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
      * off there and put `commit` on the Save. No provider, or an unlocked one: no effect.
      */
     commit?: CommitScope;
+    /** Where the reason shows — {@link Button}'s `disabledReasonDisplay`: a line under the
+     *  field at Large and on a touch screen by default, the tooltip otherwise (DUP-3). */
+    disabledReasonDisplay?: DisabledReasonDisplay;
     /** When set, a "create" row appears for a non-empty query with no exact match. */
     onCreate?: (query: string) => void;
     createLabel?: (query: string) => string;
@@ -122,6 +123,4 @@ interface EntityComboboxProps<V extends string | number, C extends ComboClearVal
  * the shared field/anchor/dismiss/search primitives (no cmdk/Radix). For picking
  * several entities use {@link MultiEntityCombobox}.
  */
-declare function EntityCombobox<V extends string | number, C extends ComboClearValue = null>(props: EntityComboboxProps<V, C>): react.JSX.Element;
-
-export { ComboClearValue, ComboOption, EntityCombobox, type EntityComboboxProps };
+export declare function EntityCombobox<V extends string | number, C extends ComboClearValue = null>(props: EntityComboboxProps<V, C>): import("react").JSX.Element;

package/dist/components/entity-combobox.js

@@ -3,25 +3,27 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useId } from "react";
 import { X } from "lucide-react";
 import { cn } from "../lib/cn.js";
-import { FieldChevron, FieldLabel, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./ui.js";
+import { FieldChevron, FIELD_TRIGGER, FIELD_FLOATING_PAD, FIELD_INVALID } from "./field-base.js";
+import { FieldLabel } from "./field-parts.js";
 import {
   ComboboxPanel,
   endHintRowProps,
   offersCreate,
-  useComboboxCore,
-  useComboboxFieldError
+  useComboboxCore
 } from "./combobox-core.js";
 import { DEFAULT_COMBOBOX_LABELS, DEFAULT_COMMON_LABELS, useKitLabels } from "../i18n/kit-labels.js";
 import {
+  assignRef,
   EndHintRow,
   FieldCaption,
   LABEL_IN_ROW,
   LockedReason,
+  mergeDescribedBy,
   StaticLabelRow,
+  useFieldError,
   useFieldHint,
   useLockReason
 } from "./field-parts.js";
-import { assignRef, mergeDescribedBy } from "./choice-parts.js";
 import { useCommitReason } from "./write-lock.js";
 function EntityCombobox(props) {
   const {
@@ -41,6 +43,7 @@ function EntityCombobox(props) {
     sheetTitle,
     disabled,
     disabledReason,
+    disabledReasonDisplay,
     commit,
     onCreate,
     createLabel,
@@ -75,11 +78,7 @@ function EntityCombobox(props) {
     debounceMs
   });
   const hintParts = useFieldHint(hint, ariaDescribedBy);
-  const field = useComboboxFieldError(
-    error,
-    invalid || ariaInvalid === true || ariaInvalid === "true",
-    hintParts.describedBy
-  );
+  const field = useFieldError(error, invalid, hintParts.describedBy, ariaInvalid);
   const labels = useKitLabels("combobox", DEFAULT_COMBOBOX_LABELS, {
     search: searchPlaceholder,
     noResults: emptyLabel,
@@ -111,7 +110,7 @@ function EntityCombobox(props) {
   );
   const showClear = Boolean(clearable && chosen != null && !inert);
   const triggerText = selectedOption?.label ?? placeholder ?? "";
-  const withLock = (trigger) => lock.locked ? /* @__PURE__ */ jsx(LockedReason, { lock, className: "block", children: trigger }) : trigger;
+  const withLock = (trigger) => lock.locked ? /* @__PURE__ */ jsx(LockedReason, { lock, display: disabledReasonDisplay, className: "block", children: trigger }) : trigger;
   const choose = (o) => {
     if (lock.locked) return;
     rememberOption(o);
@@ -167,7 +166,9 @@ function EntityCombobox(props) {
                   "span",
                   {
                     className: cn(
-                      "truncate",
+                      // One line at Normal; from Large up the value wraps and the trigger
+                      // grows, as DatePicker's does (text size §10.17, round 0.34 T1).
+                      "truncate-until-large",
                       // A chosen value is the field's VALUE, so it is set in the same ink an
                       // <input>'s value is — FIELD_BASE's own text colour, inherited rather
                       // than restated (Keksdose dev#477). It used to be one notch lighter
@@ -175,7 +176,7 @@ function EntityCombobox(props) {
                       // and a text field share a form row. Nothing selected keeps the
                       // placeholder tone (`--text-placeholder`), which every field here
                       // agrees on.
-                      !selectedOption && "text-[var(--text-placeholder)]"
+                      !selectedOption && "text-placeholder"
                     ),
                     children: selectedOption?.label ?? placeholder ?? ""
                   }
@@ -195,7 +196,7 @@ function EntityCombobox(props) {
                       e.stopPropagation();
                       onChange(clearValue);
                     },
-                    className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]",
+                    className: "absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-placeholder hover:text-secondary",
                     children: /* @__PURE__ */ jsx(X, { className: "size-4" })
                   }
                 )