@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/description-list.tsx

@@ -1,386 +0,0 @@
-import { createContext, useContext } from "react";
-import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { useKitLabels } from "../i18n/kit-labels";
-import { FieldHint } from "./field-parts";
-import { useInlineHint } from "./field-parts";
-import { DEFAULT_DESCRIPTION_LIST_LABELS } from "./description-list-labels";
-
-/** The words a {@link DescriptionList} renders on its own behalf. */
-export interface DescriptionListLabels {
-  /** What an item with no value shows (see {@link DescriptionItemProps.placeholder}).
-   *  Default "—", an em dash. */
-  empty: string;
-}
-
-// Defined in ./description-list-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_DESCRIPTION_LIST_LABELS };
-
-export type DescriptionListLayout = "rows" | "cards" | "stacked";
-export type DescriptionListDensity = "comfortable" | "compact" | "tight";
-/** How many columns a `stacked` or `cards` list may use. */
-export type DescriptionListColumns = 1 | 2 | 3 | 4 | 5 | 6;
-
-interface ListContextValue {
-  layout: DescriptionListLayout;
-  numeric: boolean;
-  prose: boolean;
-  density: DescriptionListDensity;
-  columns: DescriptionListColumns;
-  placeholder?: ReactNode;
-}
-
-const ListContext = createContext<ListContextValue>({
-  layout: "rows",
-  numeric: false,
-  prose: false,
-  density: "comfortable",
-  columns: 2,
-});
-
-/**
- * `stacked` columns, by the width of the LIST (a container query on a wrapper — the
- * `<dl>` is the grid and cannot query itself). One column on a phone-narrow pane, two
- * from 20rem, then one more column each time every column would still get ~12rem.
- * The same shape as kastlan's DetailGrid (1 → 2 at `sm` → n at `md`), measured on the
- * pane rather than the viewport, so the four preview dialogs and a full-width detail
- * page can share one list. Literal strings, because Tailwind only emits what it reads.
- */
-const STACKED_COLS: Record<DescriptionListColumns, string> = {
-  1: "grid-cols-1",
-  2: "grid-cols-1 @xs:grid-cols-2",
-  3: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3",
-  4: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4",
-  5: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5",
-  6: "grid-cols-1 @xs:grid-cols-2 @xl:grid-cols-3 @3xl:grid-cols-4 @5xl:grid-cols-5 @6xl:grid-cols-6",
-};
-
-/** An item's span at each of those thresholds, never more columns than exist there —
- *  so a span can never open an implicit column and push the grid past its pane. */
-const STACKED_SPAN: Record<DescriptionListColumns, string> = {
-  1: "",
-  2: "@xs:col-span-2",
-  3: "@xs:col-span-2 @xl:col-span-3",
-  4: "@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4",
-  5: "@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4 @5xl:col-span-5",
-  6: "@xs:col-span-2 @xl:col-span-3 @3xl:col-span-4 @5xl:col-span-5 @6xl:col-span-6",
-};
-
-/** The cards grid's gap per density, as a class and as the length the column formula
- *  subtracts — one table so the two cannot disagree. */
-const CARD_GAP: Record<DescriptionListDensity, { cls: string; len: string }> = {
-  comfortable: { cls: "gap-3", len: "0.75rem" },
-  compact: { cls: "gap-2", len: "0.5rem" },
-  tight: { cls: "gap-1", len: "0.25rem" },
-};
-
-export interface DescriptionListProps extends ComponentPropsWithRef<"dl"> {
-  /**
-   * `rows` (default): term beside detail, a two-column list that stacks the pair
-   * when the LIST is narrower than 24rem — a container query, so a detail panel
-   * beside a sidebar stacks where it is actually cramped, not where the viewport is.
-   * `cards`: a grid of small bordered cards, term above body — keksdose's overview
-   * figures, lenkbank's account facts.
-   * `stacked` (0.10.0): a borderless grid, term ABOVE detail, {@link columns} wide —
-   * kastlan's DetailField/DetailGrid and the label-over-value grids of its lease,
-   * invoice, contact and unit preview dialogs. Items can {@link DescriptionItemProps.span}
-   * several columns (a notes field across the whole row).
-   */
-  layout?: DescriptionListLayout;
-  /** Every detail is a figure: tabular digits, end-aligned. A `numeric` list of
-   *  rows does not stack on a phone — a figure is short, and putting it under its
-   *  term would double the list's height to gain no width. Per item: see
-   *  {@link DescriptionItemProps.numeric}. */
-  numeric?: boolean;
-  /** `compact` tightens the rhythm for a dense side panel. `tight` (0.10.0) is 11px
-   *  type on a 2px rhythm with no rules between rows — keksdose's admin metrics
-   *  breakdowns (metrics-panel's label-left, count-right lists), which are read as a
-   *  block of small print, not scanned row by row. */
-  density?: DescriptionListDensity;
-  /** `cards` only: the narrowest a card may get before the grid drops a column. */
-  minCardWidth?: string;
-  /**
-   * `stacked`: how many columns the grid grows to on a wide pane (default 2), see
-   * {@link STACKED_COLS}. `cards` (0.10.0): the MOST cards per row; the grid still
-   * drops columns below {@link minCardWidth}. keksdose's category editor faked "two
-   * side by side" with `minCardWidth="calc(50% - 0.5rem)"`, which is `columns={2}
-   * minCardWidth="0"` now, without knowing the gap. Ignored by `rows`.
-   */
-  columns?: DescriptionListColumns;
-  /**
-   * The details are sentences, not values: regular weight in the secondary ink.
-   * lenkbank's control explainer cards each carry a paragraph, and at the card's
-   * `font-medium` primary ink a grid of paragraphs reads as a wall of headings — it
-   * spelled `font-normal text-slate-700` into every item. A flag rather than a new
-   * default because every other card list in the apps holds values (dates, figures,
-   * counts) that are not flagged `numeric` and ARE meant to stand out; lightening them
-   * all would not be an improvement. Per item: {@link DescriptionItemProps.prose}.
-   */
-  prose?: boolean;
-  /** What an item with no value shows, for every item that does not set its own —
-   *  see {@link DescriptionItemProps.placeholder}. */
-  placeholder?: ReactNode;
-}
-
-/**
- * A real `<dl>` — terms and their details, which is what keksdose's eight and
- * lenkbank's four hand-built "label: value" blocks were, and none of them said so.
- * As a `<dl>` a reader announces "list, 6 items" and pairs each term with its detail;
- * as a stack of `<div>`s it read one undifferentiated run of text.
- *
- * Composed from {@link DescriptionItem} children rather than taking an `items`
- * array. The call sites this replaces are mostly CONDITIONAL — "IBAN, if there is
- * one", "closing date, once closed" — and `{iban && <DescriptionItem …>}` reads as
- * what it means, where an array wants `.filter(Boolean)` and a cast. Children also
- * give each item its own props (a numeric figure in an otherwise textual list, a
- * `data-private` detail) with no parallel config object. A data-driven list loses
- * nothing: `items.map((i) => <DescriptionItem key={i.term} {...i} />)`.
- *
- * Each pair is wrapped in a `<div>`, which HTML permits inside a `<dl>` for exactly
- * this: styling a pair as a unit (a row, a card) without breaking the list.
- */
-export function DescriptionList({
-  layout = "rows",
-  numeric = false,
-  prose = false,
-  density = "comfortable",
-  minCardWidth = "10rem",
-  columns,
-  placeholder,
-  className,
-  style,
-  ...rest
-}: DescriptionListProps) {
-  const cards = layout === "cards";
-  const stacked = layout === "stacked";
-  const gap = CARD_GAP[density];
-  // Cards: auto-fill at `minCardWidth`, and with `columns` a floor on the track of one
-  // n-th of the row (less the gaps) — so auto-fill can never fit more than n. The
-  // outer `min(100%, …)` keeps a single card from overflowing a pane narrower than
-  // its minimum.
-  const track =
-    columns !== undefined ? `max(${minCardWidth}, (100% - ${columns - 1} * ${gap.len}) / ${columns})` : minCardWidth;
-  const grid: CSSProperties | undefined = cards
-    ? { gridTemplateColumns: `repeat(auto-fill, minmax(min(100%, ${track}), 1fr))` }
-    : undefined;
-  const ctx: ListContextValue = { layout, numeric, prose, density, columns: columns ?? 2, placeholder };
-  const text = density === "tight" ? "text-caption leading-4" : density === "compact" ? "text-xs" : "text-sm";
-
-  if (stacked) {
-    return (
-      <ListContext.Provider value={ctx}>
-        {/* The container the columns are measured on — see STACKED_COLS. */}
-        <div className="@container">
-          <dl
-            {...rest}
-            data-layout={layout}
-            style={style}
-            className={cn(
-              "grid",
-              STACKED_COLS[ctx.columns],
-              density === "tight" ? "gap-x-3 gap-y-1" : density === "compact" ? "gap-x-4 gap-y-2" : "gap-x-6 gap-y-4",
-              text,
-              className,
-            )}
-          />
-        </div>
-      </ListContext.Provider>
-    );
-  }
-
-  return (
-    <ListContext.Provider value={ctx}>
-      <dl
-        {...rest}
-        data-layout={layout}
-        style={grid ? { ...grid, ...style } : style}
-        className={cn(
-          cards
-            ? cn("grid", gap.cls)
-            : // Tight rows carry no rules: at a 2px rhythm a line under every row
-              // turns a block of small print into a ruled table.
-              cn("@container", density !== "tight" && "divide-y divide-subtle"),
-          text,
-          className,
-        )}
-      />
-    </ListContext.Provider>
-  );
-}
-
-export interface DescriptionItemProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
-  /** What is described: "Opened", "IBAN", "Net rent". */
-  term: ReactNode;
-  /** The description itself. */
-  children?: ReactNode;
-  /** The explanation behind a "?" beside the term (a {@link FieldHint}) — the same
-   *  meaning `hint` has on `StatTile` and the labelled fields. At Large and on a touch
-   *  screen it is the term's caption instead, in words (§4 "No fact only in a tooltip"). */
-  hint?: string;
-  /** This detail is a figure (see {@link DescriptionListProps.numeric}); overrides
-   *  the list's setting either way. */
-  numeric?: boolean;
-  /** Classes for the `<dd>`. */
-  detailClassName?: string;
-  /** This detail is prose (see {@link DescriptionListProps.prose}); overrides the
-   *  list's setting either way. */
-  prose?: boolean;
-  /**
-   * `stacked`: how many columns this item spans, clamped to the list's `columns` and
-   * to however many the pane has room for; `"full"` is the whole row. kastlan's
-   * DetailField `span={2}` for notes and descriptions. `cards`: only `"full"` applies,
-   * because a card grid's column count is not known to CSS ahead of layout.
-   */
-  span?: number | "full";
-  /**
-   * Shown in place of a value that is not there — `children` of `null`, `undefined`,
-   * `false` or `""` (a `0` is a value and is shown). Default: the list's own
-   * `placeholder`, else `descriptionList.empty` from the provider, else "—". `null`
-   * shows nothing, as an empty detail did before. kastlan's DetailField put its
-   * `EMPTY_VALUE` into every one of its call sites' values by hand.
-   *
-   * Drawn in the muted ink, so an absent value does not read as a value of "—".
-   */
-  placeholder?: ReactNode;
-}
-
-function isEmptyValue(node: ReactNode): boolean {
-  return node === undefined || node === null || node === false || node === "";
-}
-
-const ROW_PAD: Record<DescriptionListDensity, string> = {
-  comfortable: "py-2.5",
-  compact: "py-1.5",
-  tight: "py-px",
-};
-const CARD_PAD: Record<DescriptionListDensity, string> = {
-  comfortable: "px-3 py-2.5",
-  compact: "px-2.5 py-1.5",
-  tight: "px-2 py-1",
-};
-
-/** One term and its detail inside a {@link DescriptionList}. */
-export function DescriptionItem({
-  term,
-  children,
-  hint,
-  numeric: numericProp,
-  prose: proseProp,
-  span,
-  placeholder: placeholderProp,
-  detailClassName,
-  className,
-  ...rest
-}: DescriptionItemProps) {
-  const {
-    layout,
-    numeric: listNumeric,
-    prose: listProse,
-    density,
-    columns,
-    placeholder: listPlaceholder,
-  } = useContext(ListContext);
-  const labels = useKitLabels("descriptionList", DEFAULT_DESCRIPTION_LIST_LABELS);
-  const empty = isEmptyValue(children);
-  const placeholder =
-    placeholderProp !== undefined ? placeholderProp : listPlaceholder !== undefined ? listPlaceholder : labels.empty;
-  const numeric = numericProp ?? listNumeric;
-  const prose = proseProp ?? listProse;
-  const cards = layout === "cards";
-  const stacked = layout === "stacked";
-  // A hint is a fact: on a touch screen and at Large it is words under the term, not a
-  // 14 px "?" nobody can hover open — the fields' rule (DUP-2, refactor audit 2026-10),
-  // which this string hint had been left out of. Elsewhere the "?" as before.
-  const shownHint = useInlineHint(hint ? <FieldHint label={hint} side="top" className="shrink-0" /> : undefined);
-  const spanClass =
-    span === "full"
-      ? "col-span-full"
-      : stacked && span !== undefined && span > 1
-        ? STACKED_SPAN[Math.min(Math.floor(span), columns) as DescriptionListColumns]
-        : undefined;
-
-  const termNode = (
-    <dt
-      className={cn(
-        "flex min-w-0 flex-wrap items-center gap-x-1 text-muted",
-        cards && (density === "tight" ? "text-micro uppercase tracking-wide" : "text-xs uppercase tracking-wide"),
-        // Stacked terms are a step smaller than the detail, as kastlan's dialogs set
-        // them; in a list that is already small they stay the list's own size.
-        stacked && density === "comfortable" && "text-xs",
-      )}
-    >
-      <span className="min-w-0 break-words">{term}</span>
-      {typeof shownHint === "string" ? (
-        // Its own line under the term, in the reading case of a sentence rather than a
-        // card term's capitals — StatTile's inline hint.
-        <span
-          data-slot="description-hint"
-          className="basis-full text-caption leading-tight normal-case tracking-normal"
-        >
-          {shownHint}
-        </span>
-      ) : (
-        shownHint
-      )}
-    </dt>
-  );
-  const detail = (
-    <dd
-      className={cn(
-        "min-w-0 break-words text-primary",
-        // A stacked figure sits under its term, so it keeps the term's start edge.
-        numeric && (stacked ? "tabular-nums" : "tabular-nums text-end"),
-        (cards || stacked) && "mt-0.5 font-medium",
-        prose && "font-normal text-secondary",
-        detailClassName,
-      )}
-    >
-      {empty && !isEmptyValue(placeholder) ? (
-        <span data-slot="description-empty" className="font-normal text-muted">
-          {placeholder}
-        </span>
-      ) : (
-        children
-      )}
-    </dd>
-  );
-
-  if (cards) {
-    return (
-      <div
-        {...rest}
-        className={cn("min-w-0 rounded-md border border-subtle bg-surface", CARD_PAD[density], spanClass, className)}
-      >
-        {termNode}
-        {detail}
-      </div>
-    );
-  }
-
-  if (stacked) {
-    return (
-      <div {...rest} className={cn("min-w-0", spanClass, className)}>
-        {termNode}
-        {detail}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      {...rest}
-      className={cn(
-        "grid gap-x-4 gap-y-0.5",
-        numeric
-          ? // Never stacks: a figure is short (see DescriptionListProps.numeric).
-            "grid-cols-[minmax(0,1fr)_auto] items-baseline"
-          : "grid-cols-1 @sm:grid-cols-[minmax(0,1fr)_minmax(0,2fr)] @sm:items-baseline",
-        ROW_PAD[density],
-        className,
-      )}
-    >
-      {termNode}
-      {detail}
-    </div>
-  );
-}

package/src/components/dialog-frame-labels.ts

@@ -1,7 +0,0 @@
-// The English words of ./dialog-frame, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./dialog-frame re-exports them.
-
-import type { DialogFrameLabels } from "./dialog-frame";
-
-export const DEFAULT_DIALOG_FRAME_LABELS: DialogFrameLabels = { close: "Close" };

package/src/components/dialog-frame.tsx

@@ -1,276 +0,0 @@
-import { useContext, useId } from "react";
-import type { ReactNode } from "react";
-import { X } from "lucide-react";
-
-import { cn } from "../lib/cn";
-import { FOCUS_RING } from "./focus-ring";
-import { Modal, ModalCloseContext } from "./modal";
-import type { ModalProps } from "./modal";
-import { useKitLabels } from "../i18n/kit-labels";
-import { DEFAULT_DIALOG_FRAME_LABELS } from "./dialog-frame-labels";
-
-export interface DialogFrameLabels {
-  /** Accessible name of the header's X, when {@link DialogFrameProps.closeButton} shows it. */
-  close: string;
-}
-
-// Defined in ./dialog-frame-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_DIALOG_FRAME_LABELS };
-
-/**
- * `ModalProps` minus the three this component owns: the NAME (`labelledBy` — the
- * heading's id is generated inside and never reaches the caller), the content
- * (`children` is the body here, not the whole panel) and `title`, which is the dialog's
- * HEADING and a ReactNode rather than the browser's tooltip string — the collision
- * `PickerSheet` met first. Everything else, `size`, `draggable`, `fullBleed`,
- * `onKeyDown`, a `data-tour` anchor, still reaches the `Modal` — and since 0.35 `ref`
- * (round 0.35 R4): the panel, the `role="dialog"` element the frame's header, body and
- * actions sit in. `busy` too (DUP-3): it holds the frame's X and the `close` that
- * `actions` and `headerActions` receive, since both are the `Modal`'s own close.
- */
-export interface DialogFrameProps extends Omit<ModalProps, "labelledBy" | "children" | "title"> {
-  /** The heading, and therefore the dialog's accessible name (`aria-labelledby`). */
-  title: ReactNode;
-  /** The smaller line under the heading; wired to `aria-describedby`. */
-  description?: ReactNode;
-  /**
-   * The heading's level. `h2` by default, which is what every dialog in both apps
-   * writes; a prop for a page that nests its demos under a real heading.
-   */
-  headingAs?: "h1" | "h2" | "h3" | "h4";
-  /**
-   * The row under the body — buttons, in the caller's own order and variants (the two
-   * apps disagree about the cancel button's variant, so the frame has no opinion on
-   * it). Stays put while the body scrolls.
-   *
-   * A FUNCTION receives the panel's animated close: `(close) => <Button
-   * onClick={close}>Cancel</Button>` lowers the panel the way Escape does, where
-   * calling `onClose` directly unmounts it at once.
-   */
-  actions?: ReactNode | ((close: () => void) => ReactNode);
-  /**
-   * Controls that belong to the HEADER rather than to the actions row — an "Edit"
-   * toggle, a status badge with a menu, a "Copy link" (kastlan). Rendered beside the
-   * title, before the optional X; on a phone, where title and controls do not fit on
-   * one line, they wrap under the title and the X keeps its corner.
-   *
-   * A function receives the animated close, as `actions` does.
-   */
-  headerActions?: ReactNode | ((close: () => void) => ReactNode);
-  /**
-   * Show an X in the header. Off by default: a centred dialog has a backdrop and
-   * Escape, and a form dialog has a Cancel. On for a dialog that commits as it goes
-   * and has no actions row, where the X is the only visible way out.
-   */
-  closeButton?: boolean;
-  /** Default: `dialogFrame.close` from the {@link UiKitProvider}, else "Close". */
-  closeLabel?: string;
-  /** Extra classes for the scrolling body (default spacing `space-y-3`). */
-  bodyClassName?: string;
-  /**
-   * Extra classes for the header row (default padding `px-4 pt-4 pb-3`), merged last —
-   * `px-3` for a phone sheet whose body runs at `px-3`, so heading and fields share
-   * one gutter.
-   */
-  headerClassName?: string;
-  /**
-   * A rule under the header, the twin of the one over the actions row — for a tall or
-   * full-screen body that scrolls under a header which stays. The body then starts a
-   * step below the rule instead of flush against it.
-   */
-  headerDivider?: boolean;
-  /**
-   * The body. Optional: a dialog whose title, description and actions are the whole
-   * of it (a "you have unsynced changes" question) leaves it out, and the frame then
-   * renders no body at all rather than an empty padded one.
-   */
-  children?: ReactNode;
-}
-
-/**
- * A {@link Modal} with the frame every caller was writing by hand: a heading, an
- * optional description, an optional X, a body that scrolls, and an actions row that
- * does not.
- *
- * 34 dialogs across the two apps framed themselves — a heading with an id invented per
- * file (and spelt three ways), four visible type sizes for one thing, ten spellings of
- * one right-aligned button row — and the package's own feedback dialog shipped with no
- * accessible name at all. This makes the name unforgettable: the heading's id comes
- * from `useId()` and goes straight to `Modal`'s `labelledBy`, so a framed dialog cannot
- * announce as just "dialog", and two open instances cannot share an id.
- *
- * ## It wraps, it does not change `Modal`
- *
- * `Modal` keeps `labelledBy` and every existing caller compiles untouched. What the
- * frame changes is inside the panel: the panel becomes a flex column with no padding
- * of its own, and only the BODY scrolls. The panel's `max-h-full` is still the outer
- * bound, so a tall form keeps its heading and its Save button on screen instead of
- * scrolling them away with the fields. A caller's own `className` still wins (it is
- * tailwind-merged last), which is how a full-screen phone sheet is spelt:
- * `fullBleed className="h-[100dvh] max-w-full rounded-none md:h-auto md:rounded-lg"`.
- *
- * ## Kept mounted
- *
- * `open` reaches the `Modal` like every other prop, so `<DialogFrame open={open} …>`
- * replaces the `{open && <DialogFrame …/>}` gate (kastlan's `FormModal` was only
- * that gate) and gains the exit a caller-driven close otherwise skips. See
- * {@link ModalProps.open}.
- *
- * ## What it is not
- *
- * Not `FullBleedDialog`: that is the phone's full-screen editor with its own `open`,
- * Back handling and a required X, and it already draws a frame of its own. And not a
- * form: submit handling, a pending label and close-on-success stay the caller's.
- * Focus lands on the panel, as `Modal` decides — not on the first field, so opening
- * does not pop a phone's keyboard; an `autoFocus` in the body overrides that from the
- * caller's side, and should be a decision rather than a habit.
- */
-export function DialogFrame({
-  title,
-  description,
-  headingAs: Heading = "h2",
-  actions,
-  headerActions,
-  closeButton = false,
-  closeLabel,
-  bodyClassName,
-  headerClassName,
-  headerDivider = false,
-  className,
-  children,
-  "aria-describedby": describedBy,
-  ...modal
-}: DialogFrameProps) {
-  const titleId = useId();
-  const descriptionId = useId();
-  const hasDescription = description !== undefined && description !== null;
-  // `false` too, so `{cond && <Body/>}` with a false `cond` means "no body".
-  const hasBody = children !== undefined && children !== null && children !== false;
-
-  return (
-    <Modal
-      {...modal}
-      labelledBy={titleId}
-      // The caller's own description (a warning inside the body, say) is ADDED to the
-      // frame's, not traded for it: both are the dialog's.
-      aria-describedby={
-        [hasDescription ? descriptionId : undefined, describedBy].filter(Boolean).join(" ") || undefined
-      }
-      // `overflow-hidden` replaces the panel's own `overflow-y-auto` (tailwind-merge
-      // treats them as one group), `p-0` its `p-4`: the scroller and the padding move
-      // to the body, which is the only part that should move.
-      className={cn("flex flex-col overflow-hidden p-0", className)}
-    >
-      <div
-        className={cn(
-          // `last:pb-4`: a frame with neither body nor actions closes on its header.
-          "flex shrink-0 items-start justify-between gap-2 px-4 pt-4 pb-3 last:pb-4",
-          headerDivider && "border-b border-subtle",
-          headerClassName,
-        )}
-      >
-        {/* Title and header actions share a wrapping row of their own, so it is THEY
-            that wrap on a phone — the actions drop under a title that needs its 12rem —
-            while the X stays outside it, pinned to the top-end corner. */}
-        <div className="flex min-w-0 flex-1 flex-wrap items-start justify-between gap-x-3 gap-y-2">
-          <div className="min-w-0 grow basis-48">
-            <Heading id={titleId} className="text-lg font-semibold leading-snug text-primary">
-              {title}
-            </Heading>
-            {hasDescription && (
-              <p id={descriptionId} className="mt-0.5 text-sm text-muted">
-                {description}
-              </p>
-            )}
-          </div>
-          {headerActions !== undefined && headerActions !== null && headerActions !== false && (
-            <FrameHeaderActions actions={headerActions} onClose={modal.onClose} />
-          )}
-        </div>
-        {closeButton && <FrameClose label={closeLabel} onClose={modal.onClose} />}
-      </div>
-      {hasBody && (
-        <div
-          className={cn(
-            // `min-h-0` is what lets a flex child shrink below its content and scroll;
-            // `last:pb-4` closes a frame that has no actions row under it.
-            "min-h-0 flex-1 space-y-3 overflow-y-auto overscroll-contain px-4 pb-3 last:pb-4",
-            headerDivider && "pt-3",
-            bodyClassName,
-          )}
-        >
-          {children}
-        </div>
-      )}
-      {actions !== undefined && actions !== null && (
-        <FrameActions actions={actions} onClose={modal.onClose} divider={hasBody} />
-      )}
-    </Modal>
-  );
-}
-
-/** The X. A component of its own so it can read the panel's animated close, which
- *  only exists INSIDE the `Modal` (the frame's own body runs outside it). */
-function FrameClose({ label, onClose }: { label?: string; onClose: () => void }) {
-  const close = useContext(ModalCloseContext) ?? onClose;
-  const labels = useKitLabels(
-    "dialogFrame",
-    DEFAULT_DIALOG_FRAME_LABELS,
-    label === undefined ? undefined : { close: label },
-  );
-  return (
-    <button
-      type="button"
-      onClick={close}
-      aria-label={labels.close}
-      className={cn(
-        "-me-1.5 -mt-1 shrink-0 rounded p-1.5 text-muted outline-none hover:bg-hover hover:text-secondary",
-        FOCUS_RING,
-      )}
-    >
-      <X aria-hidden className="size-5" />
-    </button>
-  );
-}
-
-/** The header's own controls; a component for the same reason as {@link FrameClose}. */
-function FrameHeaderActions({
-  actions,
-  onClose,
-}: {
-  actions: NonNullable<DialogFrameProps["headerActions"]>;
-  onClose: () => void;
-}) {
-  const close = useContext(ModalCloseContext) ?? onClose;
-  return (
-    <div data-dialog-header-actions="" className="flex shrink-0 flex-wrap items-center gap-2">
-      {typeof actions === "function" ? actions(close) : actions}
-    </div>
-  );
-}
-
-function FrameActions({
-  actions,
-  onClose,
-  divider,
-}: {
-  actions: NonNullable<DialogFrameProps["actions"]>;
-  onClose: () => void;
-  /** Off when there is no body: nothing scrolls, so there is no edge to mark, and a
-   *  rule straight under the description would cut the question from its answers. */
-  divider: boolean;
-}) {
-  const close = useContext(ModalCloseContext) ?? onClose;
-  return (
-    // The border marks where the scrolling stops; `flex-wrap` keeps three long
-    // translated labels on a phone from pushing the row wider than the sheet.
-    <div
-      className={cn(
-        "flex shrink-0 flex-wrap items-center justify-end gap-2 px-4 py-3",
-        divider && "border-t border-subtle",
-      )}
-    >
-      {typeof actions === "function" ? actions(close) : actions}
-    </div>
-  );
-}