@eifi1/ui-kit 0.50.1 → 0.51.0

package/dist/components/alert-banner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLSpanElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain span with the message in it, as without the prop.\n    <span\n      className={cn(\n        !inlineRow && grow,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <span\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </span>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </span>\n  ) : (\n    <span className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>\n      {children}\n    </span>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <span className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </span>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/components/alert-banner.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, MouseEvent, ReactNode, Ref } from \"react\";\nimport { AlertTriangle, CheckCircle2, ChevronRight, Info, X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { DEFAULT_COMMON_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** `info` (0.8.0) is the sky family, for news that is neither good nor bad: keksdose's\n *  preview and beta-performance banners, which borrowed `warning` for want of it and\n *  so told every user of the preview build that something was wrong. */\nexport type AlertTone = \"danger\" | \"warning\" | \"info\" | \"success\" | \"neutral\";\n\n/** `sm` (0.10.0): 12px type and a 14px glyph — the hint line under a field or a total\n *  that keksdose spells `text-xs text-amber-700 dark:text-amber-400` by hand\n *  (accounts-page's missing-rate note, import-map-step, guest-key-control's two\n *  key states, goal-form). At body size those read as a second heading. */\nexport type AlertSize = \"sm\" | \"md\";\n\n/** Border + surface per tone, WITHOUT a radius or padding, so a caller that owns\n * its own box (a Card, say) can take the tone alone. Single source for both\n * {@link alertFrameClass} and {@link toneFrameClass}.\n *\n * The colored tones are 2px, not 1px, and that is load-bearing rather than\n * decorative. A 1px border is 1.25 device pixels on a 125%-scaled display — the\n * usual Windows setting — so whether it renders as a solid line or as two\n * half-lit pixels depends on where the box happens to land in device-pixel space.\n * The same card then shows a heavy left edge and a right edge that fades out,\n * which is what feedback #264, #277, #491 and #498 all reported. A 2px border is\n * 2.5 device pixels: it always covers at least two pixels fully, on both edges,\n * at any offset. Callers compensate the extra pixel in their own padding so\n * switching tones never shifts the layout. */\nconst TONE_FRAME: Record<AlertTone, string> = {\n  danger: \"border-2 border-danger-strong bg-danger-soft\",\n  warning: \"border-2 border-warning bg-warning-soft\",\n  info: \"border-2 border-info bg-info-soft\",\n  success: \"border-2 border-success bg-success-soft\",\n  neutral: \"border border-subtle\",\n};\n\n/** `elevated`: the same frame on an OPAQUE surface. The dark tone washes are\n *  translucent (a 20–25 % tint), which is right on a page and wrong on anything that\n *  floats over one — keksdose's server-wake notice (#209) let the page's own text\n *  show through the one message whose job is to be read when nothing else makes\n *  sense. So the surface becomes `--bg-surface` and the tone's wash is layered on it\n *  as a background IMAGE (a flat gradient), which keeps the exact tint in both themes\n *  without a second, opaque copy of every `-bg` token. */\nconst TONE_ELEVATED: Record<AlertTone, string> = {\n  danger: \"bg-[image:linear-gradient(var(--danger-bg),var(--danger-bg))]\",\n  warning: \"bg-[image:linear-gradient(var(--warning-bg),var(--warning-bg))]\",\n  info: \"bg-[image:linear-gradient(var(--info-bg),var(--info-bg))]\",\n  success: \"bg-[image:linear-gradient(var(--success-bg),var(--success-bg))]\",\n  neutral: \"\",\n};\nconst ELEVATED = \"bg-surface shadow-lg\";\n\n/** The tone's border + surface on their own — for a caller that already has a box\n * with its own radius and padding (e.g. a Card). Remember to shave 1px off that\n * padding for the colored tones, whose border is 2px wide. */\nexport function toneFrameClass(tone: AlertTone): string {\n  return TONE_FRAME[tone];\n}\n\n/** Single source for the warning-callout frame (feedback #277): the tone's border\n * and surface plus this component's own radius and padding, the latter\n * compensating the 2px colored border so toggling tones never shifts layout.\n *\n * The compensation is `calc(<the neutral padding in rem> - 1px)`, not a px figure\n * (0.32, docs/text-size-harmonization.md §3.2): the padding grows with the text size,\n * the 1px it gives back to the border does not — an 11 px padding stopped matching `p-3`\n * at 125 %, and toggling the tone shifted the layout again. */\nexport function alertFrameClass(tone: AlertTone, size: AlertSize = \"md\"): string {\n  const box =\n    size === \"sm\"\n      ? tone === \"neutral\"\n        ? \"rounded-md px-2.5 py-1.5\"\n        : \"rounded-md px-[calc(0.625rem-1px)] py-[calc(0.375rem-1px)]\"\n      : tone === \"neutral\"\n        ? \"rounded-md p-3\"\n        : \"rounded-md p-[calc(0.75rem-1px)]\";\n  return `${box} ${TONE_FRAME[tone]}`;\n}\n\n/** The `strip` frame: the tone's surface edge to edge, no radius, and only the BOTTOM\n *  border, 1px — a strip is a band across the top of a page, and its one visible edge\n *  is the line it draws under itself. kastlan's trial, past-due and tour banners. */\nfunction stripFrameClass(tone: AlertTone, size: AlertSize): string {\n  return cn(\n    TONE_FRAME[tone],\n    \"rounded-none border-0 border-b\",\n    size === \"sm\" ? \"px-4 py-1.5\" : \"px-4 py-2\",\n  );\n}\n\nconst TONE_TEXT: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-secondary\",\n};\n\nconst TONE_ICON: Record<AlertTone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n  neutral: \"text-muted\",\n};\n\n/** Which glyph a tone draws when the caller names none. The triangle belongs to the\n *  two tones that mean \"something is wrong\"; `info` and `neutral` get the ⓘ. That is\n *  what makes `neutral` safe to offer at all: until 0.8.0 it was withheld because a\n *  triangle with no colour is a warning that looks like a note — and a neutral note\n *  that draws no triangle is simply a note (lenkbank's \"values are rounded\"). */\nconst TONE_GLYPH: Record<AlertTone, typeof AlertTriangle> = {\n  danger: AlertTriangle,\n  warning: AlertTriangle,\n  info: Info,\n  success: CheckCircle2,\n  neutral: Info,\n};\n\ninterface AlertBannerBaseProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"onClick\"> {\n  /** Default `danger`. `info` for news, `neutral` for a plain note — see\n   *  {@link TONE_GLYPH} for why a neutral banner is now allowed. */\n  tone?: AlertTone;\n  /**\n   * `box` (default): the framed callout. `inline`: the tone's colour, glyph and role\n   * and NOTHING else — no border, no surface, no padding — so it fits inside a\n   * toolbar row beside the controls it is about. Lenkbank's corner-motion toolbar\n   * shows \"Radius below the minimum\" and \"Solving…\" there; a box would have doubled\n   * the row's height every time either appeared.\n   *\n   * The inline variant is also a LIVE REGION by default — `role=\"alert\"` for\n   * `danger`, `role=\"status\"` for the rest — because a message that appears in a\n   * toolbar in answer to what the user just did is exactly the kind a screen reader\n   * otherwise never hears. The box stays role-less as it always was: it is usually\n   * page furniture present at load, and an alert that fires on every navigation is\n   * noise. Either way a `role` you pass wins.\n   *\n   * `strip` (0.10.0): a band across the top of a page or a panel — edge to edge, no\n   * radius, only a bottom border, content centred on one line, and usually an\n   * {@link action}. kastlan's billing trial-banner and past-due-banner and its tours\n   * tour-banner each built this by hand in amber or red Tailwind classes, with a\n   * separate dark: spelling apiece. Role-less like the box: it is page furniture.\n   */\n  variant?: \"box\" | \"inline\" | \"strip\";\n  /** See {@link AlertSize}. Default `md`. */\n  size?: AlertSize;\n  /**\n   * `inline` only (0.11.0): lay the message out as a BLOCK — a full-width `flex` row,\n   * the glyph on the text's FIRST line when it wraps — instead of the `inline-flex`,\n   * centred line it is by default. keksdose writes `className=\"flex\"` on nearly every\n   * inline banner it has (accounts-page:564, holdings-panel:631, import-map-step:66/314,\n   * guest-key-control:84) to get a line of its own under a total or a field, and a\n   * two-line hint there then centres its glyph between the lines.\n   *\n   * An option rather than the new default, because the inline-flex is load-bearing for\n   * the callers the variant was made for: lenkbank's corner-motion toolbar\n   * (corner-motion.tsx:178) sets it as a `shrink-0` item beside the controls, kastlan's\n   * import page and keksdose's rules page place it in a run of content — a block would\n   * take the whole row in the second kind, and top-align the first against a taller\n   * control. Ignored by `box` and `strip`, which are blocks already.\n   */\n  block?: boolean;\n  /**\n   * `false` opts an inline banner out of its live region (no `role=\"alert\"` /\n   * `role=\"status\"`), for a message that is static page content rather than the answer\n   * to something the user just did: keksdose's CAMT review step (camt-review-step:214)\n   * renders \"unresolved rows block the import\" as part of the step, and as\n   * `role=\"alert\"` a screen reader interrupted with it on every mount. A `role` you pass\n   * still wins. Default `true`; the box and the strip are role-less either way.\n   */\n  live?: boolean;\n  /**\n   * An opaque, raised surface (a shadow, and no translucency in dark mode) for a\n   * notice that floats over the page — see {@link TONE_ELEVATED}. `box` and `strip`\n   * only; an inline message has no surface to raise.\n   */\n  elevated?: boolean;\n  /**\n   * A trailing control — the \"Update payment method\" button on kastlan's trial and\n   * past-due strips, the \"Exit\" on its tour strip. Sits at the end of the row,\n   * vertically centred, and never shrinks. On a whole-row banner (`href`/`onClick`)\n   * it is rendered BESIDE the row's own link or button, as the × is, because\n   * interactive content may not nest.\n   */\n  action?: ReactNode;\n  /** Replaces the tone's glyph — a `<Spinner label={null} />` for \"Solving…\", say.\n   *  `null` draws none. Always decorative; the text carries the message. */\n  icon?: ReactNode;\n  /** Renders an × at the end that calls this. The banner does not hide itself — the\n   *  caller removes it (and remembers that it did), as with every other kit control\n   *  whose state is app state. */\n  onDismiss?: () => void;\n  /** Accessible name of the ×. Default: `common.dismiss` from the\n   *  {@link UiKitProvider}, else \"Dismiss\". */\n  dismissLabel?: string;\n  /**\n   * 0.48: on a phone (below the kit's text-size-aware `md`) hold the message to ONE line,\n   * with a \"More\" / \"Less\" toggle after it (`aria-expanded`, `aria-controls` the message;\n   * `common.showMore` / `common.showLess`). From `md` up nothing changes. The toggle only\n   * shows while the line actually cuts the message off.\n   *\n   * keksdose dev#611 (UX-1.2): its beta notice took three to four lines (~100px) above\n   * every phone screen, and the app built the clamp and the button around the banner's\n   * children by hand. Ignored on a whole-row banner (`href` / `onClick`): a toggle cannot\n   * sit inside the row's own link or button.\n   *\n   * 0.51 (kastlan K1): on a `strip` the clamped message claims 7rem instead of 12rem below\n   * `md`, so the {@link action} stays on its line rather than taking one of its own.\n   *\n   * For a one-line MESSAGE (a sentence or two). Not for a body with a list or a control in\n   * it: the clamp cuts the box to its first line, so a Disclosure's or a link's trigger\n   * past it is clipped out of sight and still takes the keyboard's focus, and \"More\" gives\n   * back the whole body at once. Shorten such a banner instead — one sentence, its action,\n   * and the rest behind a Disclosure of its own (keksdose's agree-again notice, 0.51).\n   */\n  clampMobile?: boolean;\n  /**\n   * Where a box's {@link action} goes on a phone (below `sm`). 0.48.\n   *\n   * `own-line` (default): a line of its own under the message, lined up with it\n   * (kastlan 53 — a long message beside a long button squeezed into a column).\n   *\n   * `flow`: on the message's line while the message (with its glyph) keeps 10rem, else at the END of the\n   * next line — for a short message and a short action, which a line of their own each\n   * would stack for nothing. keksdose dev #623: the budget card's \"5 underfunded\n   * categories\" + \"Assign\" built this with descendant overrides on the kit's classes.\n   * The basis is in rem, so it grows with the text size: at Large the action drops a\n   * line sooner, by itself. The × stays at the top end either way; `clampMobile` works\n   * alongside. From `sm` up nothing changes. Ignored by `strip` (which flows like this\n   * already) and `inline`.\n   */\n  actionPlacement?: \"own-line\" | \"flow\";\n  children: ReactNode;\n  /**\n   * The banner's frame — where the rest of the props go (0.34, API-2, refactor audit\n   * 2026-10). Which element that is depends on the mode: the `<div>`; with `href` or\n   * `onClick` the `<a>` or `<button>` that IS the row; with an × or an `action` beside\n   * that row, the `<div>` holding the two. Hence `HTMLElement`.\n   */\n  ref?: Ref<HTMLElement>;\n}\n\n/**\n * The whole-row modes. keksdose's budget-summary card is a banner you tap to open\n * the budget; built from a `<div onClick>` it was a mouse-only target, and built as a\n * banner with a link inside it was a small target inside a big one that looked like\n * one. So `onClick` makes the banner itself ONE `<button>`, and `href` makes it one\n * `<a>`, with a trailing chevron that says so. Mutually exclusive, as on `Chip`.\n *\n * With `onDismiss` as well, the × cannot go inside the button (interactive content\n * may not nest), so the frame becomes a wrapper holding two siblings: the row's\n * button, stretched over the whole frame, and the × on top of it. It still looks and\n * clicks like one banner with an × in its corner, and the two are separate tab stops.\n */\nexport type AlertBannerProps = AlertBannerBaseProps &\n  (\n    | {\n        /** Makes the whole banner one link. Mutually exclusive with `onClick`. */\n        href?: string;\n        onClick?: never;\n      }\n    | {\n        href?: never;\n        /** Makes the whole banner one button. Mutually exclusive with `href`. The\n         *  event's element is the `<button>`, not a `<div>`. */\n        onClick?: (event: MouseEvent<HTMLElement>) => void;\n      }\n  );\n\n/** Warning/danger/info callout box with the shared frame and an icon — or, with\n *  `variant=\"inline\"`, the same message as a frameless line of toned text. */\nexport function AlertBanner({\n  tone = \"danger\",\n  variant = \"box\",\n  size = \"md\",\n  block = false,\n  live = true,\n  elevated = false,\n  action,\n  icon,\n  onDismiss,\n  dismissLabel,\n  clampMobile = false,\n  actionPlacement = \"own-line\",\n  href,\n  onClick,\n  className,\n  children,\n  role,\n  ref,\n  ...rest\n}: AlertBannerProps) {\n  const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS, { dismiss: dismissLabel });\n  const inline = variant === \"inline\";\n  const strip = variant === \"strip\";\n  const sm = size === \"sm\";\n  const interactive = href !== undefined || onClick !== undefined;\n  // A block-laid inline banner behaves like a box for layout: a row that may wrap.\n  const inlineRow = inline && !block;\n  const resolvedRole = role ?? (inline && live ? (tone === \"danger\" ? \"alert\" : \"status\") : undefined);\n\n  // `clampMobile`: the message's one-line clamp below `md`, and whether that line holds\n  // it all (then there is nothing to show \"More\" of). Measured while collapsed — the\n  // clamp is what makes `scrollHeight` exceed the box — and again whenever its box\n  // changes size, which a rotation or crossing `md` does. With no layout (a test, the\n  // server) the box is 0 tall, which reads as \"may not fit\": the toggle stays.\n  const clamp = clampMobile && !interactive;\n  const bodyId = useId();\n  const bodyRef = useRef<HTMLDivElement>(null);\n  const [expanded, setExpanded] = useState(false);\n  const [fits, setFits] = useState(false);\n  useLayoutEffect(() => {\n    const el = bodyRef.current;\n    if (!clamp || expanded || !el) return;\n    const check = () => setFits(el.clientHeight > 0 && el.scrollHeight <= el.clientHeight + 1);\n    check();\n    const ro = typeof ResizeObserver === \"undefined\" ? null : new ResizeObserver(check);\n    ro?.observe(el);\n    return () => ro?.disconnect();\n  }, [clamp, expanded, children]);\n\n  const Glyph = TONE_GLYPH[tone];\n  // Onto the first line of a box's text: 2px at 14px/20px, 1px at 12px/16px.\n  const nudge = inlineRow || strip ? undefined : sm ? \"mt-px\" : \"mt-0.5\";\n  const glyph =\n    icon === null ? null : icon !== undefined ? (\n      <span\n        aria-hidden\n        className={cn(\"flex shrink-0\", sm ? \"[&_svg]:size-3.5\" : \"[&_svg]:size-4\", nudge, TONE_ICON[tone])}\n      >\n        {icon}\n      </span>\n    ) : (\n      <Glyph aria-hidden className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0\", nudge, TONE_ICON[tone])} />\n    );\n\n  // The row layout, shared by every shape below. A strip centres, and WRAPS: on a\n  // phone a long message plus an action would otherwise squeeze the text into a narrow\n  // column, so the action drops under it instead. A box may wrap its text, so it\n  // top-aligns and nudges the glyph onto the first line.\n  // A BOX with an action wraps too, below sm only (kastlan 53): the verify-email box\n  // squeezed \"Please confirm your email address…\" into a ~100px column beside a\n  // \"Resend verification email\" button. There the action takes a line of its own under\n  // the message, and the × stays at the top end; from sm up the box is one row as before.\n  const boxAction = !inline && !strip && action !== undefined && action !== null;\n  // `flow` (0.48): glyph + message and the action in a row of their own that wraps\n  // below sm; the × stays outside it, at the top end.\n  const flow = boxAction && actionPlacement === \"flow\";\n  const boxWraps = boxAction && !flow;\n  const flowRow = cn(\"flex min-w-0 flex-1 items-center max-sm:flex-wrap\", sm ? \"gap-1.5\" : \"gap-2\");\n  // The 10rem the message keeps beside the action before the action wraps.\n  const flowBasis = flow ? \"max-sm:basis-40\" : undefined;\n  const row = cn(\n    inlineRow\n      ? \"inline-flex items-center\"\n      : strip\n        ? \"flex flex-wrap items-center gap-y-1\"\n        : cn(\"flex items-start\", boxWraps && \"max-sm:flex-wrap max-sm:gap-y-2\"),\n    sm ? \"gap-1.5 text-xs\" : inline ? \"gap-1.5 text-sm\" : \"gap-2 text-sm\",\n  );\n  // The strip's message claims 12rem before anything shrinks. `flex-1` is a 0 basis,\n  // which never makes a wrapping row wrap — the action and the × squeezed the message\n  // into a three-word column on a phone instead. With a real basis the action drops to\n  // a second line once message + action no longer fit, and the message keeps the width.\n  const grow = strip ? \"flex-[1_1_12rem]\" : \"flex-1\";\n  // …except a CLAMPED strip on a phone (0.51, kastlan K1 / prod #22, KX-5). There the\n  // message is one line whatever its width (the rest is behind \"More\"), so the 12rem only\n  // pushed the action under it: \"Erneut senden\" took a line of its own on a 390px phone,\n  // and kastlan's banner stood 71px where one line is 43. The clamp needs its \"More\" and\n  // the first words beside it, so below `md` the basis is 7rem (~4rem of text). Measured\n  // in Chromium at 390 × 844, kastlan's `mx-4` strip (326px inside): one line, 43px, in\n  // all seven catalogues, with Roboto and with the wider DejaVu Sans; French, the longest\n  // \"Send again\", keeps 8px. At 360px French (and Spanish in DejaVu) still drop a line.\n  // A rem basis like the 12rem, so at Large the action drops a line sooner, by itself.\n  // From `md` up the clamp is off and the 12rem holds; without `clampMobile` nothing moves.\n  const clampBasis = strip && clamp ? \"max-md:basis-28\" : undefined;\n  // Inside a whole-row banner's button or link, which then carries `grow` itself.\n  const nested = interactive && (onDismiss !== undefined || (action !== undefined && action !== null));\n  const frame = inline\n    ? \"\"\n    : cn(\n        strip ? stripFrameClass(tone, size) : alertFrameClass(tone, size),\n        elevated && cn(ELEVATED, TONE_ELEVATED[tone]),\n      );\n  const focusRing = cn(FOCUS_RING, \"focus-visible:ring-offset-1 focus-visible:ring-offset-surface\");\n\n  // The message's box: a `<div>` (0.51), so a banner may hold block content — keksdose's\n  // agree-again notice has a list and a Disclosure in it, which inside the `<span>` this was\n  // were block elements in phrasing content. A `<span>` still in a whole-row banner, whose\n  // `<a>` / `<button>` takes phrasing content only.\n  const Body = interactive ? \"span\" : \"div\";\n  const contentBody = clamp ? (\n    // Below `md` a row: the message, clamped, then the toggle on its baseline. From\n    // `md` up a plain box with the message in it, as without the prop. (Never a whole-row\n    // banner, so always a `<div>`.)\n    <div\n      className={cn(\n        !inlineRow && grow,\n        clampBasis,\n        \"min-w-0 text-start max-md:flex max-md:items-baseline max-md:gap-2\",\n      )}\n    >\n      {/* The clamp is deliberate: the rest is one tap away behind More, so the size sweep's\n          truncation gate (scripts/screenshot-sizes.mjs) leaves it alone. */}\n      <div\n        id={bodyId}\n        ref={bodyRef}\n        data-truncate-ok=\"\"\n        className={cn(\"max-md:min-w-0\", !expanded && \"max-md:line-clamp-1\")}\n      >\n        {children}\n      </div>\n      {(expanded || !fits) && (\n        <button\n          type=\"button\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          onClick={() => setExpanded((v) => !v)}\n          className={cn(\n            \"relative z-10 shrink-0 rounded-sm font-medium underline underline-offset-2 md:hidden\",\n            focusRing,\n          )}\n        >\n          {expanded ? common.showLess : common.showMore}\n        </button>\n      )}\n    </div>\n  ) : (\n    <Body className={cn(!inlineRow && (nested ? \"flex-1\" : grow), \"min-w-0 text-start\")}>\n      {children}\n    </Body>\n  );\n  const content = (\n    <>\n      {glyph}\n      {contentBody}\n      {interactive && (\n        <ChevronRight\n          aria-hidden\n          className={cn(sm ? \"size-3.5\" : \"size-4\", \"shrink-0 opacity-70 rtl:-scale-x-100\", nudge)}\n        />\n      )}\n    </>\n  );\n\n  const dismiss = onDismiss ? (\n    <button\n      type=\"button\"\n      aria-label={common.dismiss}\n      onClick={(e) => {\n        // A dismiss inside a whole-row banner must not also follow the row.\n        e.preventDefault();\n        e.stopPropagation();\n        onDismiss();\n      }}\n      className={cn(\n        // Negative margins so the × does not make the box taller than its text; the\n        // hover wash takes the tone's own hue, so it works on every tone.\n        \"relative z-10 -my-0.5 -me-0.5 flex size-6 shrink-0 items-center justify-center rounded transition-colors hover:bg-current/10\",\n        focusRing,\n      )}\n    >\n      <X aria-hidden className=\"size-4\" />\n    </button>\n  ) : null;\n\n  // `relative z-10` so it stays clickable over a whole-row banner's stretched target.\n  // `max-w-full flex-wrap`: on a line of its own, two actions side by side ran 57 px\n  // past a 360 px phone at Extra large (the demo strip's \"Request access\" and \"Sign in\",\n  // 0.32.1); held to the line, they wrap there instead. Where they fit in one row,\n  // nothing changes.\n  const trailing =\n    action !== undefined && action !== null ? (\n      <div\n        className={cn(\n          \"relative z-10 flex max-w-full shrink-0 flex-wrap items-center gap-2\",\n          !strip && !inlineRow && \"self-center\",\n          (strip || flow) && \"ms-auto\",\n          // Last, on a line of its own, lined up with the message (past the glyph).\n          boxWraps && cn(\"max-sm:order-last max-sm:basis-full\", glyph && (sm ? \"max-sm:ps-5\" : \"max-sm:ps-6\")),\n        )}\n      >\n        {action}\n      </div>\n    ) : null;\n\n  if (!interactive) {\n    return (\n      <div\n        // The tone as data (0.34, refactor audit 2026-10, TST-9): a stable hook for a\n        // test or a caller's selector, where the frame classes are the kit's to change.\n        data-tone={tone}\n        // Arbitrary attributes first — a `data-tour` anchor, a test id, an\n        // `aria-describedby` — then the layout and tone classes, which are merged\n        // through `cn` rather than spread so a caller's `className` refines the box\n        // instead of replacing it.\n        {...rest}\n        ref={ref as Ref<HTMLDivElement>}\n        role={resolvedRole}\n        className={cn(row, frame, TONE_TEXT[tone], className)}\n      >\n        {flow ? (\n          <>\n            <div className={flowRow} data-action-flow=\"\">\n              {/* The glyph rides with the message, on its first line; the two are\n                  centred against the action as one, as the whole-row button is. */}\n              <div className={cn(\"flex min-w-0 flex-1 items-start\", flowBasis, sm ? \"gap-1.5\" : \"gap-2\")}>\n                {glyph}\n                {contentBody}\n              </div>\n              {trailing}\n            </div>\n          </>\n        ) : (\n          <>\n            {content}\n            {trailing}\n          </>\n        )}\n        {dismiss}\n      </div>\n    );\n  }\n\n  const hover = \"cursor-pointer transition-[filter] hover:brightness-[0.97] dark:hover:brightness-110\";\n  // With a dismiss the frame is a wrapper and the row element is stretched over it;\n  // without one the row element IS the frame.\n  const split = dismiss !== null || trailing !== null;\n  const actionClass = split\n    ? cn(\n        \"flex min-w-0 text-start\",\n        grow,\n        flowBasis,\n        sm ? \"gap-1.5\" : \"gap-2\",\n        inlineRow || strip ? \"items-center\" : \"items-start\",\n        \"outline-none after:absolute after:inset-0 after:content-['']\",\n        strip ? \"after:rounded-none\" : \"after:rounded-md\",\n        \"focus-visible:after:ring-focus focus-visible:after:ring-brand\",\n      )\n    : cn(row, !inlineRow && \"w-full\", frame, TONE_TEXT[tone], hover, focusRing, className);\n  // The div's attributes are the row element's: an `id`, a test id or an\n  // `aria-describedby` belongs on the thing that takes focus. The live-region role is\n  // NOT carried over — a button or a link that is also a `status` is neither.\n  const actionRest = split ? {} : rest;\n  // The `ref` goes with the rest: to the row element when it is the frame.\n  const rowRef = split ? undefined : ref;\n\n  const rowAction =\n    href !== undefined ? (\n      <a\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"a\">)}\n        ref={rowRef as Ref<HTMLAnchorElement> | undefined}\n        href={href}\n        className={actionClass}\n      >\n        {content}\n      </a>\n    ) : (\n      <button\n        data-tone={split ? undefined : tone}\n        {...(actionRest as ComponentPropsWithoutRef<\"button\">)}\n        ref={rowRef as Ref<HTMLButtonElement> | undefined}\n        type=\"button\"\n        onClick={onClick}\n        className={actionClass}\n      >\n        {content}\n      </button>\n    );\n\n  if (!split) return rowAction;\n  return (\n    <div\n      data-tone={tone}\n      {...rest}\n      ref={ref as Ref<HTMLDivElement>}\n      role={resolvedRole}\n      className={cn(\"relative\", row, frame, TONE_TEXT[tone], hover, className)}\n    >\n      {flow ? (\n        // Not positioned: the row's stretched `after:` target must still cover the frame.\n        <div className={flowRow} data-action-flow=\"\">\n          {rowAction}\n          {trailing}\n        </div>\n      ) : (\n        <>\n          {rowAction}\n          {trailing}\n        </>\n      )}\n      {dismiss}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/button-look.d.ts

@@ -24,22 +24,7 @@ import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels.js";
  *   same look; a development build warns once per name). They are removed in 0.51, and
  *   `primary` will not come back with another meaning.
  */
-export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link"
-/** @deprecated 0.49 — use `default` (same look); removed in 0.51. */
- | "primary"
-/** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
- | "brand";
-/** @internal A {@link ButtonVariant} without the deprecated aliases. */
-export type CanonicalButtonVariant = Exclude<ButtonVariant, "primary" | "brand">;
-/**
- * @internal A deprecated variant name warns once (per `component` and name) in a
- * development build, then reads as the name it stands for. `component` is the prop's
- * owner in the message ("Button variant", "FormActions submitVariant", …).
- */
-export declare function warnDeprecatedVariant(component: string, name: string, replacement: string): void;
-/** @internal `primary` → `default`, `brand` → `accent` (warning once in development);
- *  every other variant as it is. Runs before every lookup keyed by the variant. */
-export declare function resolveButtonVariant(variant: ButtonVariant, component?: string): CanonicalButtonVariant;
+export type ButtonVariant = "default" | "accent" | "secondary" | "ghost" | "danger" | "link";
 /**
  * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at
  * least 48 px, the size a finger needs whatever the type. In px on purpose, like the
@@ -64,7 +49,7 @@ export type ButtonSize = "sm" | "md";
  * recipe at 12 %.
  */
 export declare const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
-export declare const buttonVariantClasses: Record<CanonicalButtonVariant, string>;
+export declare const buttonVariantClasses: Record<ButtonVariant, string>;
 /**
  * The text colour of a `link` or `ghost` button, over the variant's own.
  *
@@ -110,10 +95,10 @@ export interface ButtonClassesOptions {
  * `{ size, className }` — `buttonClasses("secondary", { size: "sm" })` for keksdose's
  * compact toolbar links.
  */
-export declare function buttonClasses(given?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
+export declare function buttonClasses(variant?: ButtonVariant, classNameOrOptions?: string | ButtonClassesOptions): string;
 export declare const ICON_BUTTON_PRESSED = "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand";
 /** @internal The button look shared by the `<button>` and the `<a>` form. */
-export declare function buttonLook(given: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone): string;
+export declare function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone): string;
 /** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip
  *  do — an inline `renderLink` arrow would otherwise be a new component type every
  *  render. Both buttons' link forms render through it. */

package/dist/components/button-look.js

@@ -1,29 +1,6 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { FOCUS_RING_WIDTH } from "./focus-ring.js";
-const DEPRECATED_BUTTON_VARIANTS = {
-  primary: "default",
-  brand: "accent"
-};
-function devWarnings() {
-  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
-}
-const warnedVariants = /* @__PURE__ */ new Set();
-function warnDeprecatedVariant(component, name, replacement) {
-  if (!devWarnings()) return;
-  const key = `${component}|${name}`;
-  if (warnedVariants.has(key)) return;
-  warnedVariants.add(key);
-  console.warn(
-    `[ui-kit] ${component}="${name}" is deprecated: use "${replacement}" (same look). "${name}" is removed in 0.51.`
-  );
-}
-function resolveButtonVariant(variant, component = "Button variant") {
-  const replacement = DEPRECATED_BUTTON_VARIANTS[variant];
-  if (replacement === void 0) return variant;
-  warnDeprecatedVariant(component, variant, replacement);
-  return replacement;
-}
 const BUTTON_BASE = cn(
   "inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0",
   FOCUS_RING_WIDTH
@@ -77,9 +54,8 @@ const BUTTON_BOXED_DANGER = {
   default: "border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger"
 };
 const BUTTON_LINK_PRESSED = "font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted";
-function buttonClasses(given = "default", classNameOrOptions) {
+function buttonClasses(variant = "default", classNameOrOptions) {
   const { size = "md", className } = typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
-  const variant = resolveButtonVariant(given, "buttonClasses variant");
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
@@ -89,8 +65,7 @@ function buttonClasses(given = "default", classNameOrOptions) {
   );
 }
 const ICON_BUTTON_PRESSED = "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand";
-function buttonLook(given, size, stretch, tone) {
-  const variant = resolveButtonVariant(given);
+function buttonLook(variant, size, stretch, tone) {
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
@@ -118,8 +93,6 @@ export {
   TOUCH_TARGET_LARGE,
   buttonClasses,
   buttonLook,
-  buttonVariantClasses,
-  resolveButtonVariant,
-  warnDeprecatedVariant
+  buttonVariantClasses
 };
 //# sourceMappingURL=button-look.js.map

package/dist/components/button-look.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\n/**\n * A button's look.\n *\n * - `default`: the quiet action — a warm filled chip with a hairline border. What a\n *   Button with no `variant` draws.\n * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one\n *   call to action a view leads with. \"Accent\" is the button's role here, painted in\n *   `--brand`; it is not the palette's second anchor colour, also called `accent`\n *   (theme/palette-derive.ts), which no button paints.\n * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,\n *   for an action that destroys something. `link`: a text link that acts (a `<button>`).\n * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,\n *   same look; a development build warns once per name). They are removed in 0.51, and\n *   `primary` will not come back with another meaning.\n */\nexport type ButtonVariant =\n  | \"default\"\n  | \"accent\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"danger\"\n  | \"link\"\n  /** @deprecated 0.49 — use `default` (same look); removed in 0.51. */\n  | \"primary\"\n  /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */\n  | \"brand\";\n\n/** @internal A {@link ButtonVariant} without the deprecated aliases. */\nexport type CanonicalButtonVariant = Exclude<ButtonVariant, \"primary\" | \"brand\">;\n\n/** The deprecated names and what they stand for — see {@link ButtonVariant}. */\nconst DEPRECATED_BUTTON_VARIANTS: Readonly<Record<string, CanonicalButtonVariant>> = {\n  primary: \"default\",\n  brand: \"accent\",\n};\n\n/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a\n *  production one (the consumer's bundler makes `import.meta.env.DEV` false) and never\n *  under vitest. Read per call so a test can switch it on with `vi.stubEnv`. */\nfunction devWarnings(): boolean {\n  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;\n}\n\nconst warnedVariants = new Set<string>();\n\n/**\n * @internal A deprecated variant name warns once (per `component` and name) in a\n * development build, then reads as the name it stands for. `component` is the prop's\n * owner in the message (\"Button variant\", \"FormActions submitVariant\", …).\n */\nexport function warnDeprecatedVariant(component: string, name: string, replacement: string): void {\n  if (!devWarnings()) return;\n  const key = `${component}|${name}`;\n  if (warnedVariants.has(key)) return;\n  warnedVariants.add(key);\n  console.warn(\n    `[ui-kit] ${component}=\"${name}\" is deprecated: use \"${replacement}\" (same look). ` +\n      `\"${name}\" is removed in 0.51.`,\n  );\n}\n\n/** @internal `primary` → `default`, `brand` → `accent` (warning once in development);\n *  every other variant as it is. Runs before every lookup keyed by the variant. */\nexport function resolveButtonVariant(variant: ButtonVariant, component = \"Button variant\"): CanonicalButtonVariant {\n  const replacement = DEPRECATED_BUTTON_VARIANTS[variant];\n  if (replacement === undefined) return variant as CanonicalButtonVariant;\n  warnDeprecatedVariant(component, variant, replacement);\n  return replacement;\n}\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\n/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's\n *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`\n *  centred on it takes the taps a finger lands round the glyph. Not public. */\nexport const HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (`default` = filled warm chip, secondary =\n// outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`. Keyed by\n// the canonical names: {@link resolveButtonVariant} maps the deprecated ones first.\nexport const buttonVariantClasses: Record<CanonicalButtonVariant, string> = {\n  default:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger:\n    \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  accent:\n    \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's focus ring stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  //\n  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More\n  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0\n  // as text too. Both modes, since `contrast:` does not split them.\n  link:\n    \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `default` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `accent` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or accent button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\n// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,\n// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link\n// stays quiet under More contrast. On `ghost` it reads the same either way.\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<CanonicalButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<CanonicalButtonVariant, string>> = {\n  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary:\n    \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  default:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey. Under\n// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the\n// `link` variant), whatever the tone.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  given: ButtonVariant = \"default\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  const variant = resolveButtonVariant(given, \"buttonClasses variant\");\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(given: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  const variant = resolveButtonVariant(given);\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AA6CjC,MAAM,6BAA+E;AAAA,EACnF,SAAS;AAAA,EACT,OAAO;AACT;AAKA,SAAS,cAAuB;AAC9B,SAAO,QAAQ,YAAY,KAAK,GAAG,KAAK,CAAC,YAAY,KAAK;AAC5D;AAEA,MAAM,iBAAiB,oBAAI,IAAY;AAOhC,SAAS,sBAAsB,WAAmB,MAAc,aAA2B;AAChG,MAAI,CAAC,YAAY,EAAG;AACpB,QAAM,MAAM,GAAG,SAAS,IAAI,IAAI;AAChC,MAAI,eAAe,IAAI,GAAG,EAAG;AAC7B,iBAAe,IAAI,GAAG;AACtB,UAAQ;AAAA,IACN,YAAY,SAAS,KAAK,IAAI,yBAAyB,WAAW,mBAC5D,IAAI;AAAA,EACZ;AACF;AAIO,SAAS,qBAAqB,SAAwB,YAAY,kBAA0C;AACjH,QAAM,cAAc,2BAA2B,OAAO;AACtD,MAAI,gBAAgB,OAAW,QAAO;AACtC,wBAAsB,WAAW,SAAS,WAAW;AACrD,SAAO;AACT;AAcA,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAK3B,MAAM,iBACX;AAgBF,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AASlB,MAAM,uBAA+D;AAAA,EAC1E;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QACE;AAAA,EACF,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaF,MACE;AACJ;AAiCA,MAAM,eAA+D;AAAA,EACnE,OACE;AAAA,EACF,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAA4B,CAAC,QAAQ,OAAO,CAAC;AAKxE,MAAM,sBAAuE;AAAA;AAAA;AAAA;AAAA,EAI3E,OAAO;AAAA,EACP,WACE;AAAA,EACF,SACE;AACJ;AAOO,MAAM,sBACX;AAoBK,SAAS,cACd,QAAuB,WACvB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,QAAM,UAAU,qBAAqB,OAAO,uBAAuB;AACnE,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,OAAsB,MAAkB,SAA8B,MAAkB;AACjH,QAAM,UAAU,qBAAqB,KAAK;AAC1C,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}
+{"version":3,"sources":["../../src/components/button-look.ts"],"sourcesContent":["import { cn } from \"../lib/cn\";\nimport { FOCUS_RING_WIDTH } from \"./focus-ring\";\nimport type { KitLinkComponent, KitLinkProps } from \"../i18n/kit-labels\";\n\n/**\n * The button look, which {@link Button} and {@link IconButton} share (0.34, MOD-2, refactor\n * audit 2026-10). In ui.tsx it was the one knot in an otherwise one-way graph: Button drew\n * IconButton's pressed look, and IconButton drew Button's variant colours, its hover ink\n * and its router link. Both now draw from this module, which renders nothing, so neither\n * imports the other.\n *\n * Public through ./ui by name: `buttonClasses`, `TOUCH_TARGET_LARGE` and the four types.\n * The other exports are the two buttons' shared parts (`@internal`).\n */\n\n/**\n * A button's look.\n *\n * - `default`: the quiet action — a warm filled chip with a hairline border. What a\n *   Button with no `variant` draws.\n * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one\n *   call to action a view leads with. \"Accent\" is the button's role here, painted in\n *   `--brand`; it is not the palette's second anchor colour, also called `accent`\n *   (theme/palette-derive.ts), which no button paints.\n * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,\n *   for an action that destroys something. `link`: a text link that acts (a `<button>`).\n * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,\n *   same look; a development build warns once per name). They are removed in 0.51, and\n *   `primary` will not come back with another meaning.\n */\nexport type ButtonVariant =\n  | \"default\"\n  | \"accent\"\n  | \"secondary\"\n  | \"ghost\"\n  | \"danger\"\n  | \"link\";\n\n// Shared base ring for every button-styled element. Kept as a named const so the\n// <Button> component and the {@link buttonClasses} helper draw from one source and\n// can never drift apart.\n//\n// The ring is the kit's focus frame (§5): {@link FOCUS_RING_WIDTH} wide, on keyboard focus\n// (`focus-visible`) — a tap or a click no longer leaves a ring on the button — in each\n// variant's own colour below.\n//\n// `[&_svg]:shrink-0` (0.32.2, kastlan's 0.32.1 report): an icon beside a label keeps its\n// size when the label wraps at Large. Without it the svg was a flex item like the text,\n// and a two-line label squeezed it to a sliver (\"New invoice\" in a page header at 360 px\n// / Extra large).\nconst BUTTON_BASE = cn(\n  \"inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed [&_svg]:shrink-0\",\n  FOCUS_RING_WIDTH,\n);\n\n/**\n * The touch target at Large and Extra large (docs/text-size-harmonization.md §4): at\n * least 48 px, the size a finger needs whatever the type. In px on purpose, like the\n * field floor ({@link FIELD_TOUCH_TEXT}): it is a physical threshold, not a size that\n * follows the text. Normal keeps the kit's own heights; a `large:` variant, so it costs\n * no render and is right on the first paint.\n */\nexport const TOUCH_TARGET_LARGE = \"large:min-h-[48px] large:min-w-[48px]\";\n\n/** The 48 px target at Large for a control whose BOX cannot grow (a chip's or a tab's\n *  action, IconButton `2xs`; Tabs' overflow cues, 0.48 KS N3): an invisible `::after`\n *  centred on it takes the taps a finger lands round the glyph. Not public. */\nexport const HIT_AREA_LARGE =\n  \"relative large:after:absolute large:after:inset-[calc((100%-48px)/2)] large:after:content-['']\";\n\nexport type ButtonSize = \"sm\" | \"md\";\n\n// Box geometry per size, split out of the base so the two cannot be merged into one\n// string that a size then has to fight. `md` is the pre-0.8.0 look, unchanged. `sm` is\n// the compact secondary action keksdose repeats by hand as `px-2 py-1 text-xs` (and\n// `px-2 py-0.5 text-xs`) on the buttons in a toolbar or a table header; one rung is\n// enough, so the two spellings meet at `py-1`. There is no `lg`: no app has asked for\n// a bigger text button (IconButton's `lg` is a touch target, not a text size). The\n// variant map comes AFTER the size, so `link`'s `p-0` still wins at either size.\n//\n// At Large and above (§4) `sm` grows to `md`'s height — the padding that makes its\n// 1rem line as tall as `md`'s 1.25rem one — and both reach the 48 px touch target. The\n// type stays `sm`'s: the compact button is still the quieter one. Not on `link`, which\n// is a word in a sentence and has no box to grow (see `buttonLook`).\nconst BUTTON_SIZES: Record<ButtonSize, string> = {\n  md: \"gap-2 px-3 py-2 text-sm\",\n  sm: \"gap-1.5 px-2 py-1 text-xs\",\n};\nconst BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {\n  md: \"large:min-h-[48px]\",\n  sm: \"large:min-h-[48px] large:py-2.5\",\n};\n\n/**\n * The hover of a control that may sit on the page, a card or a well (0.33, B′ —\n * docs/colour-roles-harmonization.md §12.1, §12.10): the body ink at 7 %, TRANSLUCENT,\n * so it darkens (in dark, lightens) whatever is under it by the same step — 1.11:1 or\n * more on all three surfaces, both themes, with the label at 7:1 and up. It was\n * `--bg-surface-2`, which since 0.33 is the page itself in light: a ghost button on the\n * page would not have moved at all. Not `--bg-hover` either, which is mixed against the\n * CARD and stands only 1.04:1 from the page. IconButton's `custom` tone uses the same\n * recipe at 12 %.\n */\nexport const HOVER_INK = \"hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]\";\n\n// Warm, palette-token-driven so buttons blend with the fields + cards in every theme.\n// Actions default to a warm bordered look (`default` = filled warm chip, secondary =\n// outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the\n// semantic `--danger` family (destructive semantics), so a consumer can re-point the\n// destructive hue instead of inheriting a hard-coded red. Focus rings follow each\n// variant's own accent: brand for the four neutral ones, danger for `danger`.\nexport const buttonVariantClasses: Record<ButtonVariant, string> = {\n  default:\n    // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the\n    // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.\n    \"border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand\",\n  secondary: `border border-subtle bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,\n  danger:\n    \"bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong\",\n  accent:\n    \"bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand\",\n  // A text link that is still a `<button>` — keksdose's six hand-rolled\n  // `<button className=\"text-brand underline\">` sites (\"Resend code\", \"Show all\",\n  // \"Undo\" in a toast…), which act rather than navigate and so must not be anchors.\n  // The box padding goes (`p-0`) so it sits in a sentence at the text's own size, but\n  // the base's focus ring stays: those copies had `outline-none` and no ring, so\n  // a keyboard user tabbing onto them saw nothing at all. `rounded-sm` keeps that\n  // ring hugging the word instead of drawing a pill round it.\n  //\n  // Under More contrast the word reads `--brand-muted`, the brand AS TEXT (0.36,\n  // colour-roles §13.3 decision 8): `--brand` is solved as a mark (3:1), and on More\n  // contrast's darker light well Moss's read 3.68:1; the derived dark brands sit at 3.0\n  // as text too. Both modes, since `contrast:` does not split them.\n  link:\n    \"rounded-sm p-0 bg-transparent text-brand underline-offset-4 hover:underline focus-visible:ring-brand contrast:text-brand-muted\",\n};\n\n/**\n * The text colour of a `link` or `ghost` button, over the variant's own.\n *\n * `muted` is the QUIET link keksdose hand-rolls in six places (tours-page:321's \"Mark\n * undone\", transaction-fields:176/215's \"Add line\" / \"Fill total\",\n * invoice-lines-table:376, invoice-review:464): secondary text that darkens to the\n * body colour under the pointer, for an action that must be findable but not compete\n * with the brand-coloured one beside it. `danger` is the same quiet look turning\n * `--danger` on hover — transaction-editor:401's \"Remove split\", which is a text\n * action that destroys something.\n *\n * A `tone` rather than a `link-muted` variant, because it is the axis IconButton\n * already has (`tone=\"muted\"`, `tone=\"danger\"`, same quiet-until-hover meaning), and\n * because the same two looks are wanted on `ghost`.\n *\n * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:\n * `secondary` becomes an outlined destructive button (`--danger` text and a\n * `--danger-border` outline, the quiet danger fill on hover) and `default` a soft one\n * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-\n * tab.tsx \"Remove all\" is `variant=\"secondary\" className=\"text-destructive\"` — a\n * destructive action that must sit in a row of secondary buttons without shouting\n * like the solid `variant=\"danger\"` would, and whose red text alone left the border\n * and hover saying \"neutral\". `muted` stays a text look and does nothing on a box, and\n * `danger`, `accent` and `link`'s own colours are left alone: a tone that recoloured a\n * solid danger or accent button would be a second variant under another name.\n */\nexport type ButtonTone = \"default\" | \"muted\" | \"danger\";\n\n// `contrast:text-secondary` restates the tone's own colour under the `contrast:` variant,\n// so tailwind-merge drops the link's `contrast:text-brand-muted` (0.36): a quiet link\n// stays quiet under More contrast. On `ghost` it reads the same either way.\nconst BUTTON_TONES: Record<Exclude<ButtonTone, \"default\">, string> = {\n  muted:\n    \"text-secondary hover:text-primary disabled:hover:text-secondary contrast:text-secondary\",\n  danger:\n    \"text-secondary hover:text-danger focus-visible:ring-danger-strong disabled:hover:text-secondary contrast:text-secondary\",\n};\n\n/** Only the two transparent variants take every tone; see {@link ButtonTone}. */\nconst TONED_VARIANTS = new Set<ButtonVariant>([\"link\", \"ghost\"]);\n\n// `tone=\"danger\"` on the neutral boxed variants — see {@link ButtonTone}. Each string\n// restates every colour the variant sets (border, fill, text, hover, ring) so none of\n// the neutral ones survives the merge.\nconst BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {\n  // Not boxed, but its hover is a fill: the danger wash under the danger text, as\n  // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1\n  // over a light page.\n  ghost: \"hover:bg-danger-soft\",\n  secondary:\n    \"border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong\",\n  default:\n    \"border-danger bg-danger-soft text-danger hover:border-[var(--danger)] hover:bg-danger hover:text-danger-contrast focus-visible:ring-danger-strong disabled:hover:border-danger disabled:hover:bg-danger-soft disabled:hover:text-danger\",\n};\n\n// `pressed` on a `link`: the brand colour and a heavier weight, which is exactly what\n// lenkbank's \"All speeds\" toggle paints by hand (gear/hysteresis-charts.tsx:482). After\n// the tone, so a pressed muted link is brand, and an unpressed one is quiet grey. Under\n// More contrast the brand as text, `--brand-muted`, at rest and hovered (0.36, as the\n// `link` variant), whatever the tone.\nexport const BUTTON_LINK_PRESSED =\n  \"font-medium text-brand hover:text-brand disabled:hover:text-brand contrast:text-brand-muted contrast:hover:text-brand-muted contrast:disabled:hover:text-brand-muted\";\n\n/** The second argument of {@link buttonClasses} in its options form. */\nexport interface ButtonClassesOptions {\n  /** See {@link ButtonProps.size}. */\n  size?: ButtonSize;\n  className?: string;\n}\n\n/**\n * Button classes for the rare case where the styling must land on a non-`<button>`\n * element that {@link Button} can't render — e.g. a router `<Link>` or a Radix\n * AlertDialog Action/Cancel (which must stay the Radix element). Everywhere a real\n * button works, prefer `<Button>`. Draws from the same base, size and variant maps as\n * `<Button>`, so the two stay in lockstep.\n *\n * The second argument is either the extra classes (the pre-0.8.0 form) or\n * `{ size, className }` — `buttonClasses(\"secondary\", { size: \"sm\" })` for keksdose's\n * compact toolbar links.\n */\nexport function buttonClasses(\n  variant: ButtonVariant = \"default\",\n  classNameOrOptions?: string | ButtonClassesOptions,\n): string {\n  const { size = \"md\", className } =\n    typeof classNameOrOptions === \"object\" ? classNameOrOptions : { className: classNameOrOptions };\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    buttonVariantClasses[variant],\n    className,\n  );\n}\n\n// `pressed`: a toggle that is on. The brand glyph on the quiet brand fill — the\n// \"selected\" look of a Chip or a SegmentedControl option, so an on toggle reads as on\n// beside them. After the tone, so a pressed `muted` button is brand, not grey. On hover\n// the glyph turns brand-muted: `--brand` on `--brand-bg-hover` is 2.69–2.80 in four dark\n// presets, under an icon's 3:1 (colour-roles §12.12). Button's `pressed` draws it on its\n// boxed variants too, which is why it lives here and not in ./icon-button.\nexport const ICON_BUTTON_PRESSED =\n  \"bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand\";\n\n/** @internal The button look shared by the `<button>` and the `<a>` form. */\nexport function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {\n  return cn(\n    BUTTON_BASE,\n    BUTTON_SIZES[size],\n    // §4: `sm` at `md`'s height and the 48 px target at Large — not on a `link`. In the\n    // order `buttonClasses` has it, so the two strings stay identical.\n    variant !== \"link\" && BUTTON_SIZES_LARGE[size],\n    // In a flex row next to a taller labelled field, `stretch` makes the button\n    // fill the field's height so the two line up (self-stretch overrides the row's\n    // align-items). No effect outside a flex row / when it's already the tallest.\n    stretch && \"self-stretch\",\n    buttonVariantClasses[variant],\n    tone !== \"default\" && TONED_VARIANTS.has(variant) && BUTTON_TONES[tone],\n    tone === \"danger\" && BUTTON_BOXED_DANGER[variant],\n  );\n}\n\n/** @internal Calls a `renderLink` / provider link as a function, as ListItem and Chip\n *  do — an inline `renderLink` arrow would otherwise be a new component type every\n *  render. Both buttons' link forms render through it. */\nexport function RenderedButtonLink({ render, ...props }: KitLinkProps & { render: KitLinkComponent }) {\n  return render(props);\n}\n"],"mappings":";AAAA,SAAS,UAAU;AACnB,SAAS,wBAAwB;AAiDjC,MAAM,cAAc;AAAA,EAClB;AAAA,EACA;AACF;AASO,MAAM,qBAAqB;AAK3B,MAAM,iBACX;AAgBF,MAAM,eAA2C;AAAA,EAC/C,IAAI;AAAA,EACJ,IAAI;AACN;AACA,MAAM,qBAAiD;AAAA,EACrD,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,YAAY;AAQlB,MAAM,uBAAsD;AAAA,EACjE;AAAA;AAAA;AAAA,IAGE;AAAA;AAAA,EACF,WAAW,oDAAoD,SAAS;AAAA,EACxE,OAAO,+BAA+B,SAAS;AAAA,EAC/C,QACE;AAAA,EACF,QACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAaF,MACE;AACJ;AAiCA,MAAM,eAA+D;AAAA,EACnE,OACE;AAAA,EACF,QACE;AACJ;AAGA,MAAM,iBAAiB,oBAAI,IAAmB,CAAC,QAAQ,OAAO,CAAC;AAK/D,MAAM,sBAA8D;AAAA;AAAA;AAAA;AAAA,EAIlE,OAAO;AAAA,EACP,WACE;AAAA,EACF,SACE;AACJ;AAOO,MAAM,sBACX;AAoBK,SAAS,cACd,UAAyB,WACzB,oBACQ;AACR,QAAM,EAAE,OAAO,MAAM,UAAU,IAC7B,OAAO,uBAAuB,WAAW,qBAAqB,EAAE,WAAW,mBAAmB;AAChG,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA,IACjB,YAAY,UAAU,mBAAmB,IAAI;AAAA,IAC7C,qBAAqB,OAAO;AAAA,IAC5B;AAAA,EACF;AACF;AAQO,MAAM,sBACX;AAGK,SAAS,WAAW,SAAwB,MAAkB,SAA8B,MAAkB;AACnH,SAAO;AAAA,IACL;AAAA,IACA,aAAa,IAAI;AAAA;AAAA;AAAA,IAGjB,YAAY,UAAU,mBAAmB,IAAI;AAAA;AAAA;AAAA;AAAA,IAI7C,WAAW;AAAA,IACX,qBAAqB,OAAO;AAAA,IAC5B,SAAS,aAAa,eAAe,IAAI,OAAO,KAAK,aAAa,IAAI;AAAA,IACtE,SAAS,YAAY,oBAAoB,OAAO;AAAA,EAClD;AACF;AAKO,SAAS,mBAAmB,EAAE,QAAQ,GAAG,MAAM,GAAgD;AACpG,SAAO,OAAO,KAAK;AACrB;","names":[]}

package/dist/components/data-table-fit.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/data-table-fit.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's fit to its own width (0.48, keksdose live #451: \"On expanded sidebar for\n// desktop the table scrolls horizontally. On collapsed sidebar it fits […] Compute the\n// width selectively\"). Two column options, both opt-in:\n//\n// - `grow`: the column takes what the others leave and ellipsises (`w-full max-w-0` on\n//   its cells: in an auto table layout that is \"the rest of the row\", never its content's\n//   width), so one long title can no longer widen the table.\n// - `fitPriority`: while the table is wider than its scroller — or, with a `grow` column,\n//   while that column would get less than {@link GROW_MIN_REM} — the table leaves out\n//   its `fitPriority` columns, the LOWEST number first (ties: the later column first),\n//   and brings them back in the reverse order as soon as the table, as it is NOW, has\n//   room for them (its need re-measured, plus the column's own header width from when\n//   it was left out), so narrower content (a filter, another page) counts as much as a\n//   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a\n//   narrower window, the Columns drawer and Large text all count the same. A column\n//   whose return the very next measure undoes stays out until the table has more room\n//   for it than it had then (0.48.3, keksdose B2: see the bring-back in `measure`).\n\n/** The least a `grow` column keeps before the table starts leaving columns out: about\n *  a sentence of a title. In rem, so Large text asks for more. */\nexport const GROW_MIN_REM = 10;\n\n/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an\n *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The\n *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`\n *  column is left to leave out: the table then scrolls sideways rather than crushing the\n *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */\nexport const GROW_HEAD_CLASS = \"w-full max-w-0 min-w-[10rem]\";\nexport const GROW_CELL_CLASS = \"w-full max-w-0 truncate-until-large\";\n\n/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column\n *  squeezes the rest to their min-content width, so any text with a space broke in two\n *  even at 1920px (\"CHF 2'568.38\", \"Peter Mueller\", a date with its time). One line at\n *  Normal, so a column is never narrower than its text and `fitPriority` measures what\n *  the columns really need; from Large up the cell wraps as before (§10.17). The headers\n *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes\n *  `not-large:whitespace-normal` in its `className`. */\nexport const GROW_PEER_CELL_CLASS = \"not-large:whitespace-nowrap\";\n\n// A cell's own flex-wrap row (chips) is left to wrap beside a `grow` column: a row of\n// badges reads as well stacked, and held to one line it widened the user roster's Status\n// until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).\n\n/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */\nexport function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {\n  return columns\n    .map((col, index) => ({ col, index }))\n    .filter(({ col }) => col.fitPriority != null)\n    .sort((a, b) => a.col.fitPriority! - b.col.fitPriority! || b.index - a.index)\n    .map(({ col }) => col);\n}\n\n/**\n * Which columns the table leaves out for width, and the Columns panel's \"keep it\".\n *\n * A column the user TICKS in the Columns panel is theirs: it is never left out for width\n * again while the table is mounted (`keep`): the table makes room by leaving out the next\n * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and\n * drops the keep. Keeps are not persisted: on the next visit the table fits again.\n */\nexport function useColumnFit<T>({\n  columns,\n  hiddenCols,\n  headRefs,\n  scroller,\n  enabled,\n  content,\n}: {\n  columns: DataTableColumn<T>[];\n  /** The user's hidden columns: never candidates (they are out already). */\n  hiddenCols: Set<string>;\n  headRefs: Map<string, HTMLTableCellElement>;\n  /** The desktop scroller, read after render (it is declared below the call). */\n  scroller: () => HTMLElement | null;\n  /** The wide layout. On a phone (the card list) nothing is left out for width. */\n  enabled: boolean;\n  /**\n   * What can change the columns' widths besides the scroller (0.48.2): the rows on\n   * screen, the columns, the stored widths, the text size. Compared item by item after\n   * each render, and the table is measured only when one changed — a selection tick no\n   * longer forces a layout of the whole table. Without it, every render measures.\n   */\n  content?: readonly unknown[];\n}): {\n  /** The columns left out for width now — empty while off. */\n  autoHidden: Set<string>;\n  /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */\n  keep: (key: string, on: boolean) => void;\n} {\n  const [kept, setKept] = useState<ReadonlySet<string>>(() => new Set());\n  const [hidden, setHidden] = useState<string[]>([]);\n  // A column's own header width, written when it is left out: it comes back once the\n  // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the\n  // whole table's need at hide time, which went stale when the content narrowed).\n  const ownWidth = useRef(new Map<string, number>());\n  // A column whose return the very next measure undid, at the same scroller width: the\n  // room the table had for it when it came back (keksdose B2, 0.48.3). It stays out\n  // until the table has more. Dropped once the column is no longer left out for width.\n  const stuck = useRef(new Map<string, number>());\n  // What the last measure brought back, each column with the room it had then, and at\n  // which scroller width: read (and cleared) by the measure right after it.\n  const lastShown = useRef<{ avail: number; rooms: Map<string, number> } | null>(null);\n\n  const hasFit = columns.some((c) => c.fitPriority != null);\n  const active = enabled && hasFit;\n  const order = useMemo(\n    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),\n    [columns, hiddenCols, kept],\n  );\n  // Only the candidates still in play, in hide order — a column the user hid or kept\n  // since, or one the app dropped, is no longer \"hidden for width\".\n  const current = useMemo(\n    () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),\n    [active, order, hidden],\n  );\n  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;\n\n  // What `measure` reads, refreshed after each render (before the measure below runs):\n  // the ResizeObserver's callback is set up once and must see the current columns.\n  const latest = useRef({ order, current, growKey, active, scroller });\n  useLayoutEffect(() => {\n    latest.current = { order, current, growKey, active, scroller };\n  });\n\n  const measure = useCallback(() => {\n    const { order, current, growKey, active, scroller } = latest.current;\n    // Only the measure right after a bring-back can undo it.\n    const flip = lastShown.current;\n    lastShown.current = null;\n    for (const k of stuck.current.keys()) if (!current.includes(k)) stuck.current.delete(k);\n    const el = scroller();\n    if (!active || !el) return;\n    const table = el.querySelector(\"table\");\n    const avail = el.clientWidth;\n    // Not laid out (display:none, jsdom): nothing to fit to.\n    if (!table || avail <= 0) return;\n    const growTh = growKey ? headRefs.get(growKey) : undefined;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n    let need = growTh\n      ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem\n      : table.offsetWidth;\n    if (!growTh && need <= avail + 0.5 && current.length > 0) {\n      // A `w-full` table is at least the scroller's width, which says nothing about how\n      // much room its content leaves: probe its content's width (what it takes once it\n      // overflows) for the bring-back below. Read and put back in one layout pass.\n      const before = table.style.width;\n      table.style.width = \"min-content\";\n      need = table.offsetWidth;\n      table.style.width = before;\n    }\n    if (need > avail + 0.5) {\n      // Leave out, in order, until the rest fits: each column saves its header's width\n      // (the others are at their content's width while a `grow` column takes the rest).\n      const next = [...current];\n      for (const col of order) {\n        if (need <= avail + 0.5) break;\n        if (next.includes(col.key)) continue;\n        const w = headRefs.get(col.key)?.offsetWidth ?? 0;\n        ownWidth.current.set(col.key, w);\n        need -= w;\n        next.push(col.key);\n      }\n      if (next.length === current.length) return;\n      // The last measure brought these back at this same width, and the table cannot\n      // hold them: their header width fell short of what they cost drawn (see below).\n      if (flip && Math.abs(flip.avail - avail) <= 0.5)\n        for (const k of next.slice(current.length)) {\n          const room = flip.rooms.get(k);\n          if (room != null) stuck.current.set(k, room);\n        }\n      setHidden(next);\n      return;\n    }\n    // Bring back, the last left out first, while the table as it is now has room for\n    // them by their recorded header width. A column that costs more drawn than that is\n    // left out again by the next measure, before paint. That alone does not settle it:\n    // the re-hide records its header's width again, and the header can measure the same\n    // while the column costs more (`virtualize`'s locked widths, keksdose B2, 0.48.3: the\n    // drawn column cost the table ~80–110px more than its header), so it came back, went, came back … until React's\n    // update limit (#185). So a column whose return the next measure undid, at the same\n    // scroller width, waits for more room than it had then: a wider scroller or narrower\n    // content. Whatever the error in its width, that is one invisible flip per room it is\n    // tried at.\n    let n = current.length;\n    const rooms = new Map<string, number>();\n    while (n > 0) {\n      const k = current[n - 1];\n      const w = ownWidth.current.get(k);\n      if (w == null || need + w > avail + 0.5) break;\n      const room = stuck.current.get(k);\n      if (room != null && avail - need <= room + 0.5) break;\n      rooms.set(k, avail - need);\n      need += w;\n      n--;\n    }\n    if (n === current.length) return;\n    lastShown.current = { avail, rooms };\n    setHidden(current.slice(0, n));\n  }, [headRefs]);\n\n  // After a render that changed what is drawn: rows, a filter or a page can widen a\n  // column as much as a resize. Before paint, so a column the table cannot hold is never\n  // drawn first. A render that changed none of it (a ticked box, a focused row) skips the\n  // measure, which forces a layout of the whole table (0.48.2, keksdose dev #632).\n  const lastContent = useRef<readonly unknown[] | null>(null);\n  useLayoutEffect(() => {\n    const now = content ? [...content, order, current, growKey, active] : null;\n    const prev = lastContent.current;\n    lastContent.current = now;\n    if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;\n    measure();\n  });\n\n  useEffect(() => {\n    const el = latest.current.scroller();\n    if (!active || !el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => measure());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [active, measure]);\n\n  const keep = useCallback((key: string, on: boolean) => {\n    setKept((s) => {\n      if (s.has(key) === on) return s;\n      const next = new Set(s);\n      if (on) next.add(key);\n      else next.delete(key);\n      return next;\n    });\n  }, []);\n\n  const autoHidden = useMemo(() => new Set(current), [current]);\n  return { autoHidden, keep };\n}\n"],"mappings":"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","names":["order","current","growKey","active","scroller"]}
+{"version":3,"sources":["../../src/components/data-table-fit.ts"],"sourcesContent":["import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"react\";\nimport type { DataTableColumn } from \"./data-table\";\n\n// DataTable's fit to its own width (0.48, keksdose live #451: \"On expanded sidebar for\n// desktop the table scrolls horizontally. On collapsed sidebar it fits […] Compute the\n// width selectively\"). Two column options, both opt-in:\n//\n// - `grow`: the column takes what the others leave and ellipsises (`w-full max-w-0` on\n//   its cells: in an auto table layout that is \"the rest of the row\", never its content's\n//   width), so one long title can no longer widen the table.\n// - `fitPriority`: while the table is wider than its scroller — or, with a `grow` column,\n//   while that column would get less than {@link GROW_MIN_REM} — the table leaves out\n//   its `fitPriority` columns, the LOWEST number first (ties: the later column first),\n//   and brings them back in the reverse order as soon as the table, as it is NOW, has\n//   room for them (its need re-measured, plus the column's own header width from when\n//   it was left out), so narrower content (a filter, another page) counts as much as a\n//   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a\n//   narrower window, the Columns drawer and Large text all count the same. A column\n//   whose return the very next measure undoes stays out until the table has more room\n//   for it than it had then (0.48.3, keksdose B2: see the bring-back in `measure`).\n\n/** The least a `grow` column keeps before the table starts leaving columns out: about\n *  a sentence of a title. In rem, so Large text asks for more. */\nexport const GROW_MIN_REM = 10;\n\n/** The `<th>`/`<td>` classes of a `grow` column. `truncate-until-large`: one line and an\n *  ellipsis at Normal, a wrap from Large up (text size §10.17), as every kit title. The\n *  header's `min-w-[10rem]` ({@link GROW_MIN_REM}) is the floor once no `fitPriority`\n *  column is left to leave out: the table then scrolls sideways rather than crushing the\n *  column it exists for (Kurvenschmiede S1, 0.48: Subject was 24px at 1100px). */\nexport const GROW_HEAD_CLASS = \"w-full max-w-0 min-w-[10rem]\";\nexport const GROW_CELL_CLASS = \"w-full max-w-0 truncate-until-large\";\n\n/** Every OTHER cell of a table with a `grow` column (kastlan S2, 0.48). A `w-full` column\n *  squeezes the rest to their min-content width, so any text with a space broke in two\n *  even at 1920px (\"CHF 2'568.38\", \"Peter Mueller\", a date with its time). One line at\n *  Normal, so a column is never narrower than its text and `fitPriority` measures what\n *  the columns really need; from Large up the cell wraps as before (§10.17). The headers\n *  are `whitespace-nowrap` already. A column whose prose should wrap anyway passes\n *  `not-large:whitespace-normal` in its `className`. */\nexport const GROW_PEER_CELL_CLASS = \"not-large:whitespace-nowrap\";\n\n// A cell's own flex-wrap row (chips) is left to wrap beside a `grow` column: a row of\n// badges reads as well stacked, and held to one line it widened the user roster's Status\n// until kastlan's admin pane scrolled 21px at 1280px (0.48 build review 2, kastlan S1).\n\n/** The auto-hide order: lowest `fitPriority` first, the later column first on a tie. */\nexport function fitHideOrder<T>(columns: DataTableColumn<T>[]): DataTableColumn<T>[] {\n  return columns\n    .map((col, index) => ({ col, index }))\n    .filter(({ col }) => col.fitPriority != null)\n    .sort((a, b) => a.col.fitPriority! - b.col.fitPriority! || b.index - a.index)\n    .map(({ col }) => col);\n}\n\n/**\n * Which columns the table leaves out for width, and the Columns panel's \"keep it\".\n *\n * A column the user TICKS in the Columns panel is theirs: it is never left out for width\n * again while the table is mounted (`keep`): the table makes room by leaving out the next\n * candidate, and scrolls sideways once none is left — what they asked for. Unticking it hides it as before (the persisted `hiddenCols`) and\n * drops the keep. Keeps are not persisted: on the next visit the table fits again.\n */\nexport function useColumnFit<T>({\n  columns,\n  hiddenCols,\n  headRefs,\n  scroller,\n  enabled,\n  content,\n}: {\n  columns: DataTableColumn<T>[];\n  /** The user's hidden columns: never candidates (they are out already). */\n  hiddenCols: Set<string>;\n  headRefs: Map<string, HTMLTableCellElement>;\n  /** The desktop scroller, read after render (it is declared below the call). */\n  scroller: () => HTMLElement | null;\n  /** The wide layout. On a phone (the card list) nothing is left out for width. */\n  enabled: boolean;\n  /**\n   * What can change the columns' widths besides the scroller (0.48.2): the rows on\n   * screen, the columns, the stored widths, the text size. Compared item by item after\n   * each render, and the table is measured only when one changed — a selection tick no\n   * longer forces a layout of the whole table. Without it, every render measures.\n   */\n  content?: readonly unknown[];\n}): {\n  /** The columns left out for width now — empty while off. */\n  autoHidden: Set<string>;\n  /** The user's choice in the Columns panel: `true` keeps the column in whatever the width. */\n  keep: (key: string, on: boolean) => void;\n} {\n  const [kept, setKept] = useState<ReadonlySet<string>>(() => new Set());\n  const [hidden, setHidden] = useState<string[]>([]);\n  // A column's own header width, written when it is left out: it comes back once the\n  // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the\n  // whole table's need at hide time, which went stale when the content narrowed).\n  const ownWidth = useRef(new Map<string, number>());\n  // A column whose return the very next measure undid, at the same scroller width: the\n  // room the table had for it when it came back (keksdose B2, 0.48.3). It stays out\n  // until the table has more. Dropped once the column is no longer left out for width.\n  const stuck = useRef(new Map<string, number>());\n  // What the last measure brought back, each column with the room it had then, and at\n  // which scroller width: read (and cleared) by the measure right after it.\n  const lastShown = useRef<{ avail: number; rooms: Map<string, number> } | null>(null);\n\n  const hasFit = columns.some((c) => c.fitPriority != null);\n  const active = enabled && hasFit;\n  const order = useMemo(\n    () => fitHideOrder(columns).filter((c) => !hiddenCols.has(c.key) && !kept.has(c.key)),\n    [columns, hiddenCols, kept],\n  );\n  // Only the candidates still in play, in hide order — a column the user hid or kept\n  // since, or one the app dropped, is no longer \"hidden for width\".\n  const current = useMemo(\n    () => (active ? order.filter((c) => hidden.includes(c.key)).map((c) => c.key) : []),\n    [active, order, hidden],\n  );\n  const growKey = columns.find((c) => c.grow && !hiddenCols.has(c.key))?.key;\n\n  // What `measure` reads, refreshed after each render (before the measure below runs):\n  // the ResizeObserver's callback is set up once and must see the current columns.\n  const latest = useRef({ order, current, growKey, active, scroller });\n  useLayoutEffect(() => {\n    latest.current = { order, current, growKey, active, scroller };\n  });\n\n  const measure = useCallback(() => {\n    const { order, current, growKey, active, scroller } = latest.current;\n    // Only the measure right after a bring-back can undo it.\n    const flip = lastShown.current;\n    lastShown.current = null;\n    for (const k of stuck.current.keys()) if (!current.includes(k)) stuck.current.delete(k);\n    const el = scroller();\n    if (!active || !el) return;\n    const table = el.querySelector(\"table\");\n    const avail = el.clientWidth;\n    // Not laid out (display:none, jsdom): nothing to fit to.\n    if (!table || avail <= 0) return;\n    const growTh = growKey ? headRefs.get(growKey) : undefined;\n    const rem = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;\n    let need = growTh\n      ? table.offsetWidth - growTh.offsetWidth + GROW_MIN_REM * rem\n      : table.offsetWidth;\n    if (!growTh && need <= avail + 0.5 && current.length > 0) {\n      // A `w-full` table is at least the scroller's width, which says nothing about how\n      // much room its content leaves: probe its content's width (what it takes once it\n      // overflows) for the bring-back below. Read and put back in one layout pass.\n      const before = table.style.width;\n      table.style.width = \"min-content\";\n      need = table.offsetWidth;\n      table.style.width = before;\n    }\n    if (need > avail + 0.5) {\n      // Leave out, in order, until the rest fits: each column saves its header's width\n      // (the others are at their content's width while a `grow` column takes the rest).\n      const next = [...current];\n      for (const col of order) {\n        if (need <= avail + 0.5) break;\n        if (next.includes(col.key)) continue;\n        const w = headRefs.get(col.key)?.offsetWidth ?? 0;\n        ownWidth.current.set(col.key, w);\n        need -= w;\n        next.push(col.key);\n      }\n      if (next.length === current.length) return;\n      // The last measure brought these back at this same width, and the table cannot\n      // hold them: their header width fell short of what they cost drawn (see below).\n      if (flip && Math.abs(flip.avail - avail) <= 0.5)\n        for (const k of next.slice(current.length)) {\n          const room = flip.rooms.get(k);\n          if (room != null) stuck.current.set(k, room);\n        }\n      setHidden(next);\n      return;\n    }\n    // Bring back, the last left out first, while the table as it is now has room for\n    // them by their recorded header width. A column that costs more drawn than that is\n    // left out again by the next measure, before paint. That alone does not settle it:\n    // the re-hide records its header's width again, and the header can measure the same\n    // while the column costs more (`virtualize`'s locked widths, keksdose B2, 0.48.3: the\n    // drawn column cost the table ~80–110px more than its header), so it came back, went, came back … until React's\n    // update limit (#185). So a column whose return the next measure undid, at the same\n    // scroller width, waits for more room than it had then: a wider scroller or narrower\n    // content. Whatever the error in its width, that is one invisible flip per room it is\n    // tried at. (0.51, keksdose N2: under `virtualize` that excess was the table coming\n    // back at an OLD lock's ratcheted widths, not the ones measured here; the lock now goes\n    // when the columns change, data-table-virtual.ts. The guard stays for the rest: a\n    // column whose drawn cells are wider than its header.)\n    let n = current.length;\n    const rooms = new Map<string, number>();\n    while (n > 0) {\n      const k = current[n - 1];\n      const w = ownWidth.current.get(k);\n      if (w == null || need + w > avail + 0.5) break;\n      const room = stuck.current.get(k);\n      if (room != null && avail - need <= room + 0.5) break;\n      rooms.set(k, avail - need);\n      need += w;\n      n--;\n    }\n    if (n === current.length) return;\n    lastShown.current = { avail, rooms };\n    setHidden(current.slice(0, n));\n  }, [headRefs]);\n\n  // After a render that changed what is drawn: rows, a filter or a page can widen a\n  // column as much as a resize. Before paint, so a column the table cannot hold is never\n  // drawn first. A render that changed none of it (a ticked box, a focused row) skips the\n  // measure, which forces a layout of the whole table (0.48.2, keksdose dev #632).\n  const lastContent = useRef<readonly unknown[] | null>(null);\n  useLayoutEffect(() => {\n    const now = content ? [...content, order, current, growKey, active] : null;\n    const prev = lastContent.current;\n    lastContent.current = now;\n    if (now && prev && prev.length === now.length && prev.every((v, i) => Object.is(v, now[i]))) return;\n    measure();\n  });\n\n  useEffect(() => {\n    const el = latest.current.scroller();\n    if (!active || !el || typeof ResizeObserver === \"undefined\") return;\n    const ro = new ResizeObserver(() => measure());\n    ro.observe(el);\n    return () => ro.disconnect();\n  }, [active, measure]);\n\n  const keep = useCallback((key: string, on: boolean) => {\n    setKept((s) => {\n      if (s.has(key) === on) return s;\n      const next = new Set(s);\n      if (on) next.add(key);\n      else next.delete(key);\n      return next;\n    });\n  }, []);\n\n  const autoHidden = useMemo(() => new Set(current), [current]);\n  return { autoHidden, keep };\n}\n"],"mappings":"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","names":["order","current","growKey","active","scroller"]}

package/dist/components/data-table-virtual.js

@@ -154,6 +154,7 @@ function useRowWindow({
     [model, groups, start, end, pinnedSig]
   );
   const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(",")}`;
+  if (lock !== null && lock.sig !== lockSig) setLock(null);
   const colWidths = lock && lock.sig === lockSig ? lock.widths : null;
   const latest = useRef({ model, colWidths, lockSig, colKeys, lockable, overscan });
   useLayoutEffect(() => {