@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/dropdown.tsx

@@ -1,461 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type {
-  ComponentPropsWithoutRef,
-  ComponentPropsWithRef,
-  KeyboardEvent as ReactKeyboardEvent,
-  PointerEvent as ReactPointerEvent,
-  ReactNode,
-  Ref,
-  RefObject,
-} from "react";
-import { createPortal } from "react-dom";
-import { Search } from "lucide-react";
-import { anchoredInline, useAnchoredPanel } from "../hooks/use-anchored-panel";
-import { pressInside, runOwnKeyDown, takeEscape, useDismissLayer, useOutsideClick } from "../hooks/use-dismiss";
-import type { DismissLayer } from "../hooks/use-dismiss";
-import { useOverlayHistory } from "../hooks/use-overlay-history";
-import { cn } from "../lib/cn";
-import { FIELD_TOUCH_TEXT } from "./field-base";
-import { mergeRefs } from "./field-parts";
-import { FOCUS_RING } from "./focus-ring";
-import { useAnchorDir } from "./use-anchor-dir";
-
-/** Each list's Escape layer, filed under the refs {@link useDropdown} and
- *  {@link useDropdownSearch} hand out (`panelRef`, `inputRef`), for the panel and the
- *  search box those refs are passed to — see "The caller's own handler" on
- *  {@link useDropdown} (round 0.35 R2). Weak: a list's refs go with its component. */
-const listLayers = new WeakMap<object, DismissLayer>();
-
-/**
- * Open state + close-on-outside-click for a custom dropdown — the two input-shaped
- * comboboxes, and an app's own panel. (MultiSelect, CurrencySelect, GroupedPicker and
- * AmountInput's currency picker moved onto `useComboboxCore` + `ComboboxPanel` in round
- * 0.34, Wave 2 DUP-4, for the phone sheet and the portal.) Attach `wrapperRef`
- * to the relatively-positioned container; the popover lives inside it so a click
- * anywhere else closes it.
- *
- * ## Back closes the list, not the page behind it
- *
- * Keksdose live #309 rework: *"It shall only close it if it is prior open, and not
- * when I am seeing the dialog."* Round one wired {@link PickerSheet} — the shape
- * these lists take on a PHONE — into {@link useOverlayHistory}, and left the pointer
- * shape out. So on a desktop one Back press over an open list still went past it to
- * the dialog underneath: measured on his own budget, the transfer form's account list
- * was showing and Back took the entire add card, amount and all. That is the same
- * loss round one called *"discarding an edit in progress in order to dismiss a
- * list"*, in the other shell.
- *
- * Every dropdown built on this hook is dismissible and is the topmost thing on screen
- * while it is up, so the rule is the hook's rather than each caller's. `backCloses`
- * is for the ONE case where a second entry would be wrong: a caller whose panel is
- * itself a `PickerSheet`, which already registers one — both comboboxes swap shape at
- * the phone layout (`usePhoneLayout()`), and two entries would cost two Back presses to close one sheet.
- *
- * ## One outside-click rule for the whole package
- *
- * This hand-rolled a second document listener, on `mousedown`, months after
- * {@link useOutsideClick} — the hook the entity pickers dismiss through — was moved to
- * `pointerdown` for a reason that applies here word for word: on a touch platform
- * `mousedown` is SYNTHESISED, the browser emits it for most taps but is not obliged
- * to, and MultiSelect, CurrencySelect, GroupedPicker, AmountInput's currency picker
- * and both comboboxes all dismiss through this. Two copies of one rule is one copy
- * too many; this now delegates, so the package has a single answer to "what is an
- * outside press".
- *
- * `panelIsSheet` is what that delegation needs. A {@link PickerSheet} is modal and
- * fills the screen, so it has no outside — and being portalled to `<body>`, it is
- * inside neither `wrapperRef` nor `panelRef`, so a listener left running would read
- * every tap in it as a press outside and close it at finger-down. The sheet's own
- * `onMouseDown` stopPropagation guard used to hide that from this hook; it cannot
- * stop a `pointerdown`. It defaults to `!backCloses` because the two ask the same
- * question — "is this caller's panel a sheet?" — and the one caller that answers yes
- * already says so; they are separate props so a future caller can answer them apart.
- *
- * ## Escape, and where focus lands after it
- *
- * This hook had no Escape at all (the audit's §a11y): Back closed these lists, an
- * outside press closed them, and the one key every other dismissible surface in the
- * package answers to did nothing — so a keyboard user who opened a list had no way
- * out of it that did not also choose something. An open list is a layer on the kit's
- * one Escape stack ({@link useDismissLayer}), as `Modal`, `Popover` and
- * `useComboboxCore` are, so the package keeps one answer to "what does Escape do".
- *
- * Escape RESTORES FOCUS; an outside press does not. A press has already put focus
- * where the user pointed, and dragging it back from there would be the bug. Attach
- * `triggerRef` to the control that opens the panel and the keyboard paths — Escape,
- * Tab, a commit — hand focus back to it; leave it unattached and they hand it back to
- * whatever held focus when the list opened, which is the control that was pressed.
- *
- * ## Escape inside a dialog (round 0.34 BUG-1, Wave 2 DUP-1)
- *
- * One press in an open list inside a `Modal` or a `FullBleedDialog` used to close the
- * DIALOG, form and all, and leave the list open: the dialog took Escape in its own
- * `onKeyDown` before a document listener could. On the stack the list is above the
- * dialog, so the list closes and the dialog stays. {@link DropdownPanel} and
- * {@link DropdownSearchHeader} take the key on their own elements, where focus is,
- * and stop it there — so a caller passes nothing new, AmountInput's currency chip
- * included.
- *
- * ## The caller's own handler (round 0.35 R2)
- *
- * A caller's `onKeyDown` on {@link DropdownPanel} or {@link DropdownSearchHeader} hears
- * Escape only while this list is the layer on top — the rule the dialogs got first. A
- * tooltip over a row takes that press first, and the next one is the handler's, whose
- * `preventDefault()` still keeps the list. The two find the list's layer through the
- * refs this hook hands out — the panel through `panelRef`, the search box through
- * {@link useDropdownSearch}'s `inputRef` — so a caller passes nothing new. One handed
- * neither (an un-anchored panel may leave `panelRef` off) hears every key, as before.
- *
- * `escapeLayer: false` is for a caller that registers its own layer: the editable
- * comboboxes, whose list can be "open" with nothing in it to show — an Escape there
- * belongs to the dialog.
- */
-export function useDropdown<T extends HTMLElement = HTMLDivElement>({
-  backCloses = true,
-  panelIsSheet = !backCloses,
-  escapeLayer = true,
-}: { backCloses?: boolean; panelIsSheet?: boolean; escapeLayer?: boolean } = {}) {
-  const [open, setOpen] = useState(false);
-  const wrapperRef = useRef<T>(null);
-  // The control that opens the panel — see the note above on why only the keyboard
-  // paths read it, and why attaching it is the caller's choice.
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  // The panel, once it is PORTALLED (see {@link DropdownPanel}'s `anchorRef`): it is
-  // then a child of <body> rather than of the wrapper, so "did the click land inside
-  // the wrapper" answers no for every click on the list itself and the first option a
-  // user picked closed the dropdown without picking anything.
-  const panelRef = useRef<HTMLDivElement>(null);
-  // Where focus was as the list opened — the trigger focus goes back to when the
-  // caller attached none. Read in an effect, before `useDropdownSearch`'s frame moves
-  // focus into the search box.
-  const openerRef = useRef<HTMLElement | null>(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), []);
-  // Closing unmounts whatever held focus — the search box, the row the keyboard was
-  // on — and the browser then drops focus on <body>: the caret vanishes and the next
-  // Tab restarts at the top of the document, and inside a dialog the next Escape goes
-  // nowhere. Whoever closed the list with a key gets focus handed back to the trigger
-  // they opened it from.
-  const closeToTrigger = useCallback(() => {
-    setOpen(false);
-    const back = triggerRef.current ?? openerRef.current;
-    if (back?.isConnected) back.focus();
-  }, []);
-  useOutsideClick([wrapperRef, panelRef], close, open && !panelIsSheet);
-  // See "Escape inside a dialog" above.
-  const layer = useDismissLayer(open && escapeLayer, closeToTrigger);
-  // Filed under `panelRef` for the panel's own handler — "The caller's own handler" above.
-  useEffect(() => {
-    listLayers.set(panelRef, layer);
-  }, [panelRef, layer]);
-  // Same close path Escape and an outside click take, so a list dismissed by Back
-  // cannot end up in a different state from one dismissed any other way.
-  useOverlayHistory(open && backCloses, close);
-  return { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger };
-}
-
-/**
- * {@link useDropdown} plus a search box: clears the query and focuses the search
- * input each time the panel opens, so typing filters immediately.
- */
-export function useDropdownSearch<T extends HTMLElement = HTMLDivElement>() {
-  const { open, setOpen, wrapperRef, panelRef, triggerRef, closeToTrigger } = useDropdown<T>();
-  const [query, setQuery] = useState("");
-  const inputRef = useRef<HTMLInputElement>(null);
-  // The list's layer again, under `inputRef` for the search box's handler (round 0.35
-  // R2). `useDropdown`'s effect, which runs first, has filed it under `panelRef`.
-  useEffect(() => {
-    const layer = listLayers.get(panelRef);
-    if (layer) listLayers.set(inputRef, layer);
-  }, [panelRef]);
-  useEffect(() => {
-    if (open) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset the query on open
-      setQuery("");
-      requestAnimationFrame(() => inputRef.current?.focus());
-    }
-  }, [open]);
-  return {
-    open,
-    setOpen,
-    wrapperRef,
-    panelRef,
-    triggerRef,
-    closeToTrigger,
-    query,
-    setQuery,
-    inputRef,
-  };
-}
-
-/** `onKeyDown` is the INPUT's, not the wrapper's — the list's keyboard is handled
- *  where the focus is (see the note above), so the div's own handler signature is
- *  omitted in favour of it. */
-export interface DropdownSearchHeaderProps extends Omit<ComponentPropsWithRef<"div">, "onKeyDown"> {
-  query: string;
-  onQueryChange: (v: string) => void;
-  inputRef: RefObject<HTMLInputElement | null>;
-  placeholder?: string;
-  /** The `<ul role="listbox">` this box filters. */
-  listboxId?: string;
-  /** The id of the option the arrow keys are currently on, if any. */
-  activeId?: string;
-  /** Arrow/Home/End/Enter/Tab — the list's keyboard, handled where the focus is.
-   *  Escape closes the list (the topmost layer on the kit's Escape stack); call
-   *  `preventDefault()` on it here to keep it. */
-  onKeyDown?: (e: ReactKeyboardEvent<HTMLInputElement>) => void;
-}
-
-/** The search row (magnifier + text input) shared by the searchable dropdowns.
- *
- *  The input had `outline-none` and nothing in its place (the audit's §a11y, the same
- *  finding as the numpad's keys). That mattered more here than the bare class suggests:
- *  {@link useDropdownSearch} focuses this box the moment a panel opens, so the caret is
- *  the ONLY evidence of where the next keystroke goes — and a caret in an empty field
- *  showing a placeholder is a single blinking pixel column. The ring is what says "this
- *  list is being typed into"; it appears whenever the field holds focus, which for a
- *  text input is exactly when it is true.
- *
- *  ## Why this box is a plain textbox and the TRIGGER is the combobox
- *
- *  The panels this header sits in are opened by a field-shaped trigger, and that
- *  trigger is what carries `role="combobox"` (see {@link MultiSelect},
- *  {@link EntityCombobox}). Two comboboxes for one list would be one too many — a
- *  reader tabbing back to the field would meet a second one describing the same
- *  choice. So this stays a textbox, which ARIA lets own `aria-activedescendant` and
- *  `aria-controls` exactly as a combobox does: focus is HERE while the list is up, so
- *  this is what has to say which option the arrow keys are on.
- *
- *  Pass `listboxId` and the wiring appears; omit it and the box is what it always
- *  was, for the callers that have no listbox to point at. */
-export function DropdownSearchHeader({
-  query,
-  onQueryChange,
-  inputRef,
-  placeholder,
-  listboxId,
-  activeId,
-  onKeyDown,
-  "aria-label": ariaLabel,
-  className,
-  ...rest
-}: DropdownSearchHeaderProps) {
-  return (
-    // `rest` dresses the header row; the NAME goes on the box below it. A search
-    // input whose only name is its placeholder has none the moment a character is
-    // typed into it — the placeholder disappears — which is why this is worth a prop
-    // at all rather than something a caller could add from outside.
-    <div {...rest} className={cn("flex items-center gap-2 border-b border-subtle px-2 py-1.5", className)}>
-      <Search className="size-4 text-placeholder" />
-      <input
-        ref={inputRef}
-        type="text"
-        value={query}
-        onChange={(e) => onQueryChange(e.target.value)}
-        onKeyDown={(e) => {
-          // The caller's handler hears Escape only while the list is on top (round 0.35
-          // R2) — the layer filed under `inputRef`, when {@link useDropdownSearch} made it.
-          runOwnKeyDown(e, onKeyDown, listLayers.get(inputRef));
-          // Focus is in this box while the list is up, so this is where Escape lands
-          // first — see "Escape inside a dialog" on {@link useDropdown}.
-          takeEscape(e);
-        }}
-        placeholder={placeholder}
-        aria-label={ariaLabel}
-        aria-controls={listboxId}
-        aria-activedescendant={activeId}
-        aria-autocomplete={listboxId ? "list" : undefined}
-        // FIELD_TOUCH_TEXT: a search box is a field — at least 16 px on touch, or iOS zooms
-        // the page the moment a picker opens and focuses it (§10.1).
-        className={cn(
-          "w-full rounded-sm bg-transparent text-sm outline-none placeholder:text-placeholder text-primary",
-          FOCUS_RING,
-          FIELD_TOUCH_TEXT,
-        )}
-      />
-    </div>
-  );
-}
-
-export interface DropdownPanelProps extends ComponentPropsWithoutRef<"div"> {
-  header?: ReactNode;
-  empty?: boolean;
-  /** Attributes for the `<ul>` itself — how a caller whose children are options
-   *  gives the list its `role="listbox"`, its id and `aria-multiselectable`. The
-   *  panel owns the scrolling and the padding, so `className` here is merged rather
-   *  than replaced. */
-  listProps?: ComponentPropsWithoutRef<"ul">;
-  /** The trigger to hang off. Given, the panel portals and goes `fixed`. */
-  anchorRef?: RefObject<HTMLElement | null>;
-  /** {@link useDropdown}'s `panelRef`, so an outside-click sees this as inside. Escape
-   *  anywhere in the panel, on a row as in the search box, closes the list rather than
-   *  a dialog around it. It is also how the panel finds the list's Escape layer, for
-   *  its `onKeyDown` (round 0.35 R2: see "The caller's own handler" there). */
-  panelRef?: RefObject<HTMLDivElement | null>;
-  /** Panel width in px, for the anchored form (the CSS `w-*` cannot be measured). */
-  width?: number;
-  /** Which of the panel's edges lines up with the trigger's, room permitting, by the
-   *  trigger's reading direction — `end` is the right edge in a left-to-right form and
-   *  the left one in a right-to-left form. Default `end`. The physical `left` / `right`
-   *  went in 0.35 (round 0.35 R1, refactor audit 2026-10, API-6e): `right` is `end` in a
-   *  left-to-right page, `left` is `start`. */
-  align?: "start" | "end";
-  children: ReactNode;
-  /** The panel, where the rest of the props go (0.34, API-2, refactor audit 2026-10) —
-   *  merged with `panelRef`, so the outside-click still sees it. */
-  ref?: Ref<HTMLDivElement>;
-}
-
-/**
- * The floating popover surface for the searchable dropdowns: bordered/shadowed
- * panel, an optional `header` slot (search box, plus any actions), and a
- * scrollable `<ul>` of `children` with an "empty" row when nothing matches.
- *
- * ## Anchored, or merely absolute
- *
- * Without `anchorRef` the panel is `position: absolute` inside whatever relative box
- * the caller put it in, and the caller places it with `className` (`w-64`,
- * `end-0 top-full`). That is fine in a page that does not scroll around it, and
- * wrong the moment an ancestor has `overflow` — the panel is then CLIPPED by that
- * ancestor's box, with no error and no scrollbar, just a list with its side sliced
- * off. Keksdose dev#548 is what that looks like in practice: the app's own content
- * scroller starts 280px from the left, the amount field's currency picker opens
- * right-aligned and 256px wide, and in the transaction row editor its left third —
- * the search box's first letter, and every row's currency symbol — was cut away.
- *
- * With `anchorRef` the panel is PORTALLED to `<body>` and positioned `fixed` against
- * that trigger's rect, so no ancestor can clip it: the same treatment {@link Popover}
- * already gives the calculator, and the same reason. It re-aligns on scroll and
- * resize, flips above the trigger when the room is there instead (a phone keyboard
- * eats the bottom of the screen), and is clamped to the viewport's edges so a trigger
- * near either side cannot push it off-screen.
- *
- * Pass `panelRef` from {@link useDropdown} along with it: once portalled the panel is
- * no longer inside the wrapper, so the outside-click handler has to be told about it
- * or the first click on an option closes the list instead of choosing from it.
- */
-export function DropdownPanel({
-  header,
-  empty,
-  className,
-  listProps,
-  anchorRef,
-  panelRef,
-  width = 256,
-  align = "end",
-  children,
-  style,
-  onKeyDown,
-  ref,
-  ...rest
-}: DropdownPanelProps) {
-  const setPanel = useMemo(() => mergeRefs(panelRef, ref), [panelRef, ref]);
-  const anchored = useAnchoredPanel(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
-  const dir = useAnchorDir(anchorRef ?? EMPTY_REF, Boolean(anchorRef));
-  // A row the keyboard reached by Tab holds focus too, and its Escape has to close the
-  // list as the search box's does (BUG-1). The caller's handler first, as everywhere.
-  const handleKeyDown = (e: ReactKeyboardEvent<HTMLDivElement>) => {
-    // It hears Escape only while the list is on top, a tooltip over a row taking the
-    // press first (round 0.35 R2) — the layer filed under `panelRef`, when handed one.
-    runOwnKeyDown(e, onKeyDown, panelRef && listLayers.get(panelRef));
-    takeEscape(e);
-  };
-  // A press in a panel opened from a row (a popover, its lists) is inside the list for
-  // `useDropdown`'s outside press, though portalled elsewhere (dev#623).
-  const markInside = pressInside(panelRef);
-  const handlePointerDownCapture = (e: ReactPointerEvent<HTMLDivElement>) => {
-    rest.onPointerDownCapture?.(e);
-    markInside?.(e);
-  };
-  const body = (
-    <>
-      {header}
-      {/* The anchored form caps its own height against the VISIBLE viewport and lets
-          this list have the rest; the absolute form keeps the fixed `max-h-64` it has
-          always had, applied by the wrapper below. */}
-      <ul {...listProps} className={cn("overflow-y-auto py-1", listProps?.className)}>
-        {children}
-        {/* `presentation`, so that a caller who made this list a `listbox` does not
-            end up with one child that is not an option. The em dash still reads — it
-            is the row's semantics that are dropped, not its text. */}
-        {empty && (
-          <li role="presentation" className="px-3 py-2 text-sm text-muted">
-            —
-          </li>
-        )}
-      </ul>
-    </>
-  );
-
-  if (!anchorRef) {
-    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.
-      <div
-        {...rest}
-        style={style}
-        ref={setPanel}
-        onKeyDown={handleKeyDown}
-        onPointerDownCapture={handlePointerDownCapture}
-        className={cn(
-          "absolute z-30 mt-1 rounded-md border border-subtle bg-surface shadow-lg",
-          "[&>ul]:max-h-64",
-          className,
-        )}
-      >
-        {body}
-      </div>
-    );
-  }
-
-  const rect = anchored.rect;
-  if (!rect) return null;
-  // Clamped to the glass as `Popover` is (Wave 2, DUP-7): the panel may leave the
-  // trigger's edge to stay on screen, because a list half off the viewport is the bug
-  // this exists for. The portal leaves the subtree the trigger's `dir` came from, so it
-  // is read off the trigger — for the alignment here, and for the panel's own `dir`
-  // below, without which a right-to-left form got a left-to-right list.
-  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.
-    <div
-      {...rest}
-      ref={setPanel}
-      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).
-      data-kit-layer=""
-      dir={dir}
-      onKeyDown={handleKeyDown}
-      onPointerDownCapture={handlePointerDownCapture}
-      // The caller's `style` is kept underneath, but the placement is measured rather
-      // than chosen (dev#548: an `overflow` ancestor clipped a third of this panel
-      // away), so these values are the panel's own. Flipped above, it hangs from its
-      // bottom edge, so a list shorter than its cap still meets the trigger (keksdose
-      // K1); the edge not in use is cleared, a caller's included.
-      style={{
-        ...style,
-        position: "fixed",
-        top: anchored.above ? undefined : anchored.top,
-        bottom: anchored.above ? anchored.bottom : undefined,
-        left,
-        width,
-        maxHeight: anchored.maxHeight,
-      }}
-      className={cn(
-        "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",
-        className,
-      )}
-    >
-      {body}
-    </div>,
-    document.body,
-  );
-}
-
-/** A ref that is always null, for the un-anchored form — hooks may not be conditional. */
-const EMPTY_REF: RefObject<HTMLElement | null> = { current: null };

package/src/components/empty-state.tsx

@@ -1,136 +0,0 @@
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { cn } from "../lib/cn";
-
-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.
-   * `h1` (0.42.0) for an empty state that is the whole page — `AdminForbidden`.
-   */
-  headingAs?: "h1" | "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";
-}
-
-const EMPTY_STATE_TONE: Record<"danger" | "success", string> = {
-  danger: "text-danger",
-  success: "text-success",
-};
-
-export function EmptyState({
-  title,
-  hint,
-  icon,
-  action,
-  headingAs,
-  variant = "box",
-  tone,
-  size = "md",
-  className,
-  ...rest
-}: EmptyStateProps) {
-  const Title = headingAs ?? "div";
-  const toneClass = tone ? EMPTY_STATE_TONE[tone] : undefined;
-  const hasHint = hint != null && hint !== false && hint !== "";
-  if (variant === "inline") {
-    const sm = size === "sm";
-    return (
-      <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,
-        )}
-      >
-        {icon != null && (
-          <span
-            aria-hidden
-            className={cn("flex text-placeholder", sm ? "[&_svg]:size-3.5" : "[&_svg]:size-4", toneClass)}
-          >
-            {icon}
-          </span>
-        )}
-        {/* No weight of its own: one muted line is what these sites were, and a
-            bold title would turn a quiet "nothing here" into a heading. */}
-        <Title className={cn(sm ? "text-xs" : "text-sm", toneClass)}>{title}</Title>
-        {hasHint && <span className="text-xs">{hint}</span>}
-        {action != null && <span className="flex flex-wrap items-center gap-2">{action}</span>}
-      </div>
-    );
-  }
-  return (
-    <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,
-      )}
-    >
-      {icon != null && (
-        <div aria-hidden className={cn("mb-3 text-placeholder [&_svg]:size-8", toneClass)}>
-          {icon}
-        </div>
-      )}
-      {/* `text-sm`: a heading keeps the box's size, not whatever a stylesheet gives h2. */}
-      <Title className={cn("text-sm font-medium text-secondary", toneClass)}>{title}</Title>
-      {hasHint && <div className="mt-1 text-xs">{hint}</div>}
-      {action != null && <div className="mt-4 flex flex-wrap items-center justify-center gap-2">{action}</div>}
-    </div>
-  );
-}