@eifi1/ui-kit 0.48.2 → 0.49.0

package/src/auth/verify-email.tsx

@@ -119,7 +119,7 @@ function ResendButton({
 }: {
   state: ReturnType<typeof useResend>;
   labels: VerifyEmailLabels;
-  variant: "secondary" | "brand";
+  variant: "secondary" | "accent";
 }) {
   return (
     <Button
@@ -269,7 +269,7 @@ export function VerifyEmailStatus({
   const href = continueHref ?? (signedIn ? "/" : "/login");
   // `replace`: the token is spent, so Back must not land on this page again (keksdose F1).
   const continueButton = (
-    <Button href={href} replace variant={outcome === "verified" ? "brand" : "secondary"}>
+    <Button href={href} replace variant={outcome === "verified" ? "accent" : "secondary"}>
       {labels.continue}
     </Button>
   );
@@ -304,7 +304,7 @@ export function VerifyEmailStatus({
         hint={hint}
         action={
           <>
-            {canResend && <ResendButton state={resend} labels={labels} variant="brand" />}
+            {canResend && <ResendButton state={resend} labels={labels} variant="accent" />}
             {continueButton}
           </>
         }

package/src/billing/plan-card.tsx

@@ -471,7 +471,7 @@ export function PlanPicker({
       <div className="flex justify-end">
         <Button
           type="button"
-          variant="primary"
+          variant="default"
           className="max-sm:w-full"
           disabledReason={blocked}
           pending={pending}
@@ -538,7 +538,7 @@ export function GrantWarningConfirm({ open, onOpenChange, onConfirm, labels: lab
             {common.back}
           </Button>
           <Button
-            variant="primary"
+            variant="default"
             onClick={() => {
               onConfirm();
               onOpenChange(false);

package/src/components/breadcrumbs.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useEffect, useRef, useState } from "react";
+import { Fragment, useContext, useEffect, useRef, useState } from "react";
 import type { ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "../lib/cn";
@@ -6,6 +6,7 @@ import { FOCUS_RING } from "./focus-ring";
 import { useKitLabels, useKitLink, type LabelOverride } from "../i18n/kit-labels";
 import { pickLinkRenderer, RenderedKitLink } from "./text-link";
 import { DEFAULT_BREADCRUMBS_LABELS } from "./breadcrumbs-labels";
+import { PageHeaderTrailContext } from "./page-header-context";
 
 export interface BreadcrumbsLabels {
   /** The `nav` landmark's name — what a screen reader lists it as. */
@@ -24,6 +25,12 @@ export interface BreadcrumbItem {
   href?: string;
   /** A stable React key, when `label` is not a string. */
   key?: string;
+  /**
+   * The app's home entry (0.49 KIT-9). Default: an entry whose `href` is `"/"`. No trail
+   * is drawn when only home entries are left — inside a `PageHeader`, or wherever the
+   * current entry is hidden (`hideCurrent`): "Home" above a page's title says nothing.
+   */
+  home?: boolean;
 }
 
 /** What {@link BreadcrumbsProps.renderLink} is handed. Spread it onto your router's
@@ -57,6 +64,18 @@ export interface BreadcrumbsProps extends Omit<ComponentPropsWithRef<"nav">, "ch
   keepEnd?: number;
   /** Overrides the {@link UiKitProvider}'s `breadcrumbs` labels. */
   labels?: LabelOverride<BreadcrumbsLabels>;
+  /**
+   * Leave out the last entry, the current page (0.49 KIT-9). The entry before it stays a
+   * link, and no entry carries `aria-current`: the page's title names where you are.
+   *
+   * Default `true` inside a `PageHeader`'s `breadcrumbs` (the title is right below, so
+   * the trail would repeat it), `false` elsewhere. With the current entry hidden — and
+   * inside a `PageHeader` either way — the trail is drawn only when at least one entry
+   * that is not home ({@link BreadcrumbItem.home}) is left, so a trail drawn by the
+   * layout above the page shows no lone "Home" link either. `false` keeps the current
+   * entry as text with `aria-current="page"`.
+   */
+  hideCurrent?: boolean;
 }
 
 /**
@@ -69,16 +88,18 @@ export interface BreadcrumbsProps extends Omit<ComponentPropsWithRef<"nav">, "ch
  * the server's first paint is already right.
  */
 export function Breadcrumbs({
-  items,
+  items: allItems,
   renderLink,
   separator,
   collapse = true,
   keepEnd = 2,
   labels: labelsProp,
+  hideCurrent,
   className,
   "aria-label": ariaLabel,
   ...rest
 }: BreadcrumbsProps) {
+  const host = useContext(PageHeaderTrailContext);
   const labels = useKitLabels("breadcrumbs", DEFAULT_BREADCRUMBS_LABELS, labelsProp);
   const kitLink = useKitLink();
   const [expanded, setExpanded] = useState(false);
@@ -92,7 +113,13 @@ export function Breadcrumbs({
     const li = revealedRef.current;
     (li?.querySelector<HTMLElement>("a[href]") ?? li)?.focus();
   }, [expanded]);
-  if (items.length === 0) return null;
+  const hides = hideCurrent ?? host?.titled ?? false;
+  const shown = hides ? allItems.slice(0, -1) : allItems;
+  if (shown.length === 0) return null;
+  // A trail of home entries alone repeats nothing worth a line: in a PageHeader, and
+  // wherever the current entry is hidden (a layout's trail above the page's title).
+  if ((host || hides) && !shown.some((item) => !(item.home ?? item.href === "/"))) return null;
+  const items = shown;
 
   const end = Math.max(1, keepEnd);
   // Crumbs [1, firstKept) are the collapsible middle. Collapsing a single crumb into a
@@ -116,7 +143,8 @@ export function Breadcrumbs({
     <nav {...rest} aria-label={ariaLabel ?? labels.label} className={cn("min-w-0 text-sm", className)}>
       <ol className="m-0 flex min-w-0 list-none flex-wrap items-center gap-x-1.5 gap-y-1 p-0 text-muted">
         {items.map((item, i) => {
-          const last = i === items.length - 1;
+          // With the current entry hidden, the last one shown is a parent: a link.
+          const last = !hides && i === items.length - 1;
           const key = item.key ?? (typeof item.label === "string" ? `${i}-${item.label}` : String(i));
           let content: ReactNode;
           if (last) {

package/src/components/button-look.ts

@@ -13,7 +13,75 @@ import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
  * The other exports are the two buttons' shared parts (`@internal`).
  */
 
-export type ButtonVariant = "primary" | "secondary" | "ghost" | "danger" | "brand" | "link";
+/**
+ * A button's look.
+ *
+ * - `default`: the quiet action — a warm filled chip with a hairline border. What a
+ *   Button with no `variant` draws.
+ * - `accent`: the strong one, solid `--brand` with `--brand-contrast` text — the one
+ *   call to action a view leads with. "Accent" is the button's role here, painted in
+ *   `--brand`; it is not the palette's second anchor colour, also called `accent`
+ *   (theme/palette-derive.ts), which no button paints.
+ * - `secondary`: an outline. `ghost`: text or glyph only. `danger`: solid `--danger`,
+ *   for an action that destroys something. `link`: a text link that acts (a `<button>`).
+ * - `primary` and `brand` are **deprecated** aliases of `default` and `accent` (0.49,
+ *   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">;
+
+/** The deprecated names and what they stand for — see {@link ButtonVariant}. */
+const DEPRECATED_BUTTON_VARIANTS: Readonly<Record<string, CanonicalButtonVariant>> = {
+  primary: "default",
+  brand: "accent",
+};
+
+/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a
+ *  production one (the consumer's bundler makes `import.meta.env.DEV` false) and never
+ *  under vitest. Read per call so a test can switch it on with `vi.stubEnv`. */
+function devWarnings(): boolean {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+
+const warnedVariants = new Set<string>();
+
+/**
+ * @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 function warnDeprecatedVariant(component: string, name: string, replacement: string): void {
+  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.`,
+  );
+}
+
+/** @internal `primary` → `default`, `brand` → `accent` (warning once in development);
+ *  every other variant as it is. Runs before every lookup keyed by the variant. */
+export function resolveButtonVariant(variant: ButtonVariant, component = "Button variant"): CanonicalButtonVariant {
+  const replacement = DEPRECATED_BUTTON_VARIANTS[variant];
+  if (replacement === undefined) return variant as CanonicalButtonVariant;
+  warnDeprecatedVariant(component, variant, replacement);
+  return replacement;
+}
 
 // Shared base ring for every button-styled element. Kept as a named const so the
 // <Button> component and the {@link buttonClasses} helper draw from one source and
@@ -83,13 +151,14 @@ const BUTTON_SIZES_LARGE: Record<ButtonSize, string> = {
 export const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,transparent)]";
 
 // Warm, palette-token-driven so buttons blend with the fields + cards in every theme.
-// Actions default to a warm bordered look (primary = filled warm chip, secondary =
-// outline); `brand` stays the solid accent for the rare strong CTA; `danger` takes the
+// Actions default to a warm bordered look (`default` = filled warm chip, secondary =
+// outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the
 // semantic `--danger` family (destructive semantics), so a consumer can re-point the
 // destructive hue instead of inheriting a hard-coded red. Focus rings follow each
-// variant's own accent: brand for the four neutral ones, danger for `danger`.
-export const buttonVariantClasses: Record<ButtonVariant, string> = {
-  primary:
+// variant's own accent: brand for the four neutral ones, danger for `danger`. Keyed by
+// the canonical names: {@link resolveButtonVariant} maps the deprecated ones first.
+export const buttonVariantClasses: Record<CanonicalButtonVariant, string> = {
+  default:
     // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the
     // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.
     "border border-subtle bg-surface-2 text-primary hover:bg-active focus-visible:ring-brand",
@@ -97,7 +166,7 @@ export const buttonVariantClasses: Record<ButtonVariant, string> = {
   ghost: `bg-transparent text-primary ${HOVER_INK} focus-visible:ring-brand`,
   danger:
     "bg-danger text-danger-contrast hover:bg-danger-hover focus-visible:ring-danger-strong",
-  brand:
+  accent:
     "bg-brand text-brand-contrast hover:bg-brand-hover focus-visible:ring-brand",
   // A text link that is still a `<button>` — keksdose's six hand-rolled
   // `<button className="text-brand underline">` sites ("Resend code", "Show all",
@@ -132,14 +201,14 @@ export const buttonVariantClasses: Record<ButtonVariant, string> = {
  *
  * `danger` also reaches the two NEUTRAL boxed variants, where the box carries it:
  * `secondary` becomes an outlined destructive button (`--danger` text and a
- * `--danger-border` outline, the quiet danger fill on hover) and `primary` a soft one
+ * `--danger-border` outline, the quiet danger fill on hover) and `default` a soft one
  * (the quiet fill at rest, solid `--danger` on hover). kastlan's meeting-invitations-
  * tab.tsx "Remove all" is `variant="secondary" className="text-destructive"` — a
  * destructive action that must sit in a row of secondary buttons without shouting
  * like the solid `variant="danger"` would, and whose red text alone left the border
  * and hover saying "neutral". `muted` stays a text look and does nothing on a box, and
- * `danger`, `brand` and `link`'s own colours are left alone: a tone that recoloured a
- * solid danger or brand button would be a second variant under another name.
+ * `danger`, `accent` and `link`'s own colours are left alone: a tone that recoloured a
+ * solid danger or accent button would be a second variant under another name.
  */
 export type ButtonTone = "default" | "muted" | "danger";
 
@@ -154,19 +223,19 @@ const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
 };
 
 /** Only the two transparent variants take every tone; see {@link ButtonTone}. */
-const TONED_VARIANTS = new Set<ButtonVariant>(["link", "ghost"]);
+const TONED_VARIANTS = new Set<CanonicalButtonVariant>(["link", "ghost"]);
 
 // `tone="danger"` on the neutral boxed variants — see {@link ButtonTone}. Each string
 // restates every colour the variant sets (border, fill, text, hover, ring) so none of
 // the neutral ones survives the merge.
-const BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {
+const BUTTON_BOXED_DANGER: Partial<Record<CanonicalButtonVariant, string>> = {
   // Not boxed, but its hover is a fill: the danger wash under the danger text, as
   // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1
   // over a light page.
   ghost: "hover:bg-danger-soft",
   secondary:
     "border-danger bg-transparent text-danger hover:bg-danger-soft focus-visible:ring-danger-strong",
-  primary:
+  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",
 };
 
@@ -197,11 +266,12 @@ export interface ButtonClassesOptions {
  * compact toolbar links.
  */
 export function buttonClasses(
-  variant: ButtonVariant = "primary",
+  given: ButtonVariant = "default",
   classNameOrOptions?: string | ButtonClassesOptions,
 ): string {
   const { size = "md", className } =
     typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
+  const variant = resolveButtonVariant(given, "buttonClasses variant");
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
@@ -221,7 +291,8 @@ export 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 function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {
+export function buttonLook(given: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {
+  const variant = resolveButtonVariant(given);
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],

package/src/components/button.tsx

@@ -24,6 +24,9 @@ import type { ButtonSize, ButtonTone, ButtonVariant } from "./button-look";
  * link buttons submitting their form).
  */
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** `default` (the quiet action, what a Button without `variant` draws), `accent` (the
+   *  strong call to action, solid brand), `secondary`, `ghost`, `danger` or `link`.
+   *  `primary` / `brand` are deprecated aliases of `default` / `accent`. See {@link ButtonVariant}. */
   variant?: ButtonVariant;
   /** `md` (default) is the page's action button. `sm` is the compact one — 12px text
    *  and `px-2 py-1` — for the secondary actions in a toolbar, a card header or a
@@ -39,7 +42,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   ref?: Ref<HTMLButtonElement>;
   /** Text colour for `link` and `ghost`: `muted` (quiet, body colour on hover) or
    *  `danger` (quiet, `--danger` on hover). `danger` also makes `secondary` an
-   *  outlined destructive button and `primary` a soft one; ignored by the other
+   *  outlined destructive button and `default` a soft one; ignored by the other
    *  variants. See {@link ButtonTone}. */
   tone?: ButtonTone;
   /**
@@ -181,7 +184,7 @@ function ButtonLink({
   replace,
   reloadDocument,
   disabled,
-  variant = "primary",
+  variant = "default",
   size = "md",
   stretch,
   tone = "default",
@@ -257,7 +260,7 @@ function ButtonLink({
 }
 
 function ButtonElement({
-  variant = "primary",
+  variant = "default",
   size = "md",
   stretch,
   tone = "default",

package/src/components/calendar-heatmap.tsx

@@ -9,6 +9,7 @@ import { parseHex } from "../theme/color";
 import { Tooltip } from "./tooltip";
 import type { WeekDay } from "./mini-calendar";
 import { DEFAULT_CALENDAR_HEATMAP_LABELS } from "./calendar-heatmap-labels";
+import { formatWithMinus } from "../lib/minus";
 
 /**
  * Every string the heatmap speaks — the `calendarHeatmap` namespace of
@@ -248,7 +249,7 @@ export function CalendarHeatmap({
   const providerWeekStart = useKitWeekStart();
   const weekStart: WeekDay = weekStartsOn ?? providerWeekStart ?? localeWeekStart(locale);
   const numberFormat = useMemo(() => new Intl.NumberFormat(locale), [locale]);
-  const formatValue = formatValueProp ?? ((v: number) => numberFormat.format(v));
+  const formatValue = formatValueProp ?? ((v: number) => formatWithMinus(numberFormat, v));
 
   const values = useMemo(() => {
     const m = new Map<string, number>();

package/src/components/chart-edge.ts

@@ -0,0 +1,73 @@
+// The live side of `chartEdge` (theme/chart-palette.ts): which colours a FILLED mark is
+// painted with and which grounds it sits on, read off <html> as the page resolves them —
+// so the 1px ink edge follows a theme toggle and a palette switch without the chart
+// knowing either store. Shared by SeriesChart (bars, areas) and Treemap (tiles).
+import { useCallback, useSyncExternalStore } from "react";
+import { chartEdge } from "../theme/chart-palette";
+import { parseHex } from "../theme/color";
+
+/** The tokens a theme or palette change can move, read as ONE string so
+ *  `useSyncExternalStore` compares a primitive (a fresh array would never be equal). */
+const WATCHED = [
+  "--bg-surface",
+  "--bg-page",
+  ...Array.from({ length: 9 }, (_, i) => `--chart-${i + 1}`),
+  "--chart-ink",
+  "--chart-muted",
+  "--money-income",
+  "--money-expense",
+  "--money-net",
+  "--money-neutral",
+  "--brand",
+];
+
+function readWatched(): string {
+  const style = getComputedStyle(document.documentElement);
+  return WATCHED.map((name) => style.getPropertyValue(name).trim()).join(",");
+}
+
+function subscribe(onChange: () => void): () => void {
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ["class", "style", "data-theme", "data-contrast"],
+  });
+  return () => observer.disconnect();
+}
+
+/** Server render: nothing measured, so no edge — the client adds it on hydration. */
+const SERVER = "";
+
+const BARE_VAR = /^var\(\s*(--[A-Za-z0-9_-]+)\s*\)$/;
+
+/** A colour as the page resolves it: a hex as it is, a bare `var(--token)` read off
+ *  <html>, anything else (a `color-mix()`, a var with a fallback) null. */
+export function resolveChartColor(color: string, style: Pick<CSSStyleDeclaration, "getPropertyValue">): string | null {
+  const trimmed = color.trim();
+  if (parseHex(trimmed)) return trimmed;
+  const m = BARE_VAR.exec(trimmed);
+  if (!m) return null;
+  const value = style.getPropertyValue(m[1]).trim();
+  return parseHex(value) ? value : null;
+}
+
+/**
+ * `(fill) => edge`: the ink stroke a filled mark in `fill` needs on this page, or
+ * `undefined` — only for a colour under 3:1 against the card or the page (WCAG 1.4.11).
+ * `fill` may be a hex or a bare `var(--chart-N)` / `var(--money-…)`; anything it cannot
+ * measure gets no edge.
+ */
+export function useChartEdge(): (fill: string | undefined) => string | undefined {
+  const snapshot = useSyncExternalStore(subscribe, readWatched, () => SERVER);
+  return useCallback(
+    (fill: string | undefined) => {
+      if (!fill || snapshot === SERVER || typeof document === "undefined") return undefined;
+      const style = getComputedStyle(document.documentElement);
+      const hex = resolveChartColor(fill, style);
+      if (!hex) return undefined;
+      const surfaces = ["--bg-surface", "--bg-page"].map((n) => style.getPropertyValue(n).trim());
+      return chartEdge(hex, surfaces);
+    },
+    [snapshot],
+  );
+}

package/src/components/chart.tsx

@@ -17,6 +17,7 @@ import {
 } from "recharts";
 import { cn } from "../lib/cn";
 import { isRtl } from "../lib/direction";
+import { TYPOGRAPHIC_MINUS } from "../lib/minus";
 
 export interface ChartSeriesConfig {
   label: ReactNode;
@@ -376,7 +377,8 @@ export function ChartTooltipContent({
     if (inRow && !shown) text = NO_VALUE;
     else if (formatValue) text = formatValue(raw);
     else if (raw == null) text = NO_VALUE;
-    else text = valueFormatter ? valueFormatter(raw) : raw;
+    // The bare number's minus is U+2212, as every kit figure's (0.49, KIT-1).
+    else text = valueFormatter ? valueFormatter(raw) : String(raw).replace(/-/g, TYPOGRAPHIC_MINUS);
     return (
       <div
         key={`${cfgKey}-${i}`}

package/src/components/chip.tsx

@@ -3,6 +3,7 @@ import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from "re
 import { Check, X } from "lucide-react";
 import type { LucideIcon } from "lucide-react";
 import { cn } from "../lib/cn";
+import { statusTone, type StatusKind } from "../lib/status-tone";
 import { TOUCH_TARGET_LARGE } from "./button-look";
 import { FOCUS_RING } from "./focus-ring";
 import { assignRef, LockedReason, type DisabledReasonDisplay } from "./field-parts";
@@ -342,6 +343,12 @@ const REMOVE_HIT_AREA_LARGE =
 interface ChipBaseProps {
   children: ReactNode;
   tone?: ChipTone;
+  /**
+   * What the value means as a status (0.49 KIT-8), instead of a `tone`: `good` (success),
+   * `attention` (warning), `problem` (danger), `active` (info), `inactive` (neutral) —
+   * {@link statusTone}. An explicit `tone` wins. Never `brand` for a status.
+   */
+  status?: StatusKind;
   size?: ChipSize;
   /** See {@link ChipVariant}. Default `soft`. */
   variant?: ChipVariant;
@@ -537,7 +544,8 @@ export type ChipProps = ChipBaseProps &
 export function Chip({
   ref,
   children,
-  tone = "neutral",
+  tone: toneProp,
+  status,
   size = "md",
   variant = "soft",
   shape = "pill",
@@ -563,6 +571,7 @@ export function Chip({
   commit,
   ...rest
 }: ChipProps) {
+  const tone: ChipTone = toneProp ?? (status ? statusTone(status) : "neutral");
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS, { remove: removeLabel });
   const reasonId = useId();
   const disabledReason = useCommitReason(commit, ownDisabledReason);

package/src/components/confirm-context.ts

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+import type { ConfirmFn } from "./confirm-dialog";
+
+/** The nearest `ConfirmProvider`'s `confirm`, or `null`. Internal: its own module so a
+ *  part that may sit outside a provider (`RowActions`, 0.49 KIT-12) can ask without
+ *  `useConfirm()`'s throw, and without adding a name to the barrel. */
+export const ConfirmContext = createContext<ConfirmFn | null>(null);

package/src/components/confirm-dialog.tsx

@@ -1,4 +1,4 @@
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
 import type { ReactNode } from "react";
 
 import { useKitLabels } from "../i18n/kit-labels";
@@ -8,6 +8,7 @@ import { DialogFrame } from "./dialog-frame";
 import { Button } from "./button";
 import { useWriteLock, writeLockFor, type CommitScope } from "./write-lock";
 import { DEFAULT_CONFIRM_DIALOG_LABELS } from "./confirm-dialog-labels";
+import { ConfirmContext } from "./confirm-context";
 
 /**
  * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback
@@ -89,7 +90,6 @@ export interface ConfirmOptions {
 
 export type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
 
-const ConfirmContext = createContext<ConfirmFn | null>(null);
 
 /**
  * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.
@@ -298,7 +298,7 @@ function ConfirmDialogView({
           <Button
             ref={confirmRef}
             type="button"
-            variant={tone === "danger" ? "danger" : "primary"}
+            variant={tone === "danger" ? "danger" : "default"}
             disabled={!matches}
             disabledReason={request.lockReason}
             onClick={() => {

package/src/components/danger-confirm.tsx

@@ -449,14 +449,14 @@ export interface DangerConfirmProps extends Omit<ComponentPropsWithRef<"div">, "
   tone?: "danger" | "warning";
   /**
    * The confirm button's variant, apart from `tone` (0.24, keksdose). Default: what
-   * `tone` picks, as before — `"danger"` for `"danger"`, `"primary"` for `"warning"`.
+   * `tone` picks, as before — `"danger"` for `"danger"`, `"default"` for `"warning"`.
    *
    * `tone` says how bad the outcome is; this says how loud the last press is, and the two
    * need not agree. keksdose's `UserActionConfirm` (an admin resets somebody else's
    * password) asks an AMBER question — what it guards against is mis-targeting, not data
    * loss, so the danger colour stays its one `severe` consequence's — and ends in a RED
    * Go, as its hand-built panel did before it moved onto this tile in 0.23; with only
-   * `tone`, the amber question made Go the neutral primary fill. `tone="warning"
+   * `tone`, the amber question made Go the neutral `default` fill. `tone="warning"
    * confirmVariant="danger"` is that panel again.
    */
   confirmVariant?: ButtonVariant;
@@ -914,7 +914,7 @@ export function DangerConfirm({
           <Button
             id={confirmId}
             type="submit"
-            variant={confirmVariant ?? (tone === "warning" ? "primary" : "danger")}
+            variant={confirmVariant ?? (tone === "warning" ? "default" : "danger")}
             disabled={!canConfirm}
             // Held by a guard (the caller's or a built-in one), or armed and then locked
             // (or rendered armed under a lock): the confirm says why the way Button

package/src/components/data-table-fit.ts

@@ -15,7 +15,9 @@ import type { DataTableColumn } from "./data-table";
 //   room for them (its need re-measured, plus the column's own header width from when
 //   it was left out), so narrower content (a filter, another page) counts as much as a
 //   wider scroller. The scroller's own width, through a ResizeObserver: a sidebar, a
-//   narrower window, the Columns drawer and Large text all count the same.
+//   narrower window, the Columns drawer and Large text all count the same. A column
+//   whose return the very next measure undoes stays out until the table has more room
+//   for it than it had then (0.48.3, keksdose B2: see the bring-back in `measure`).
 
 /** The least a `grow` column keeps before the table starts leaving columns out: about
  *  a sentence of a title. In rem, so Large text asks for more. */
@@ -94,6 +96,13 @@ export function useColumnFit<T>({
   // table's need as it is now, plus this, fits the scroller (keksdose S3, 0.48: not the
   // whole table's need at hide time, which went stale when the content narrowed).
   const ownWidth = useRef(new Map<string, number>());
+  // A column whose return the very next measure undid, at the same scroller width: the
+  // room the table had for it when it came back (keksdose B2, 0.48.3). It stays out
+  // until the table has more. Dropped once the column is no longer left out for width.
+  const stuck = useRef(new Map<string, number>());
+  // What the last measure brought back, each column with the room it had then, and at
+  // which scroller width: read (and cleared) by the measure right after it.
+  const lastShown = useRef<{ avail: number; rooms: Map<string, number> } | null>(null);
 
   const hasFit = columns.some((c) => c.fitPriority != null);
   const active = enabled && hasFit;
@@ -118,6 +127,10 @@ export function useColumnFit<T>({
 
   const measure = useCallback(() => {
     const { order, current, growKey, active, scroller } = latest.current;
+    // Only the measure right after a bring-back can undo it.
+    const flip = lastShown.current;
+    lastShown.current = null;
+    for (const k of stuck.current.keys()) if (!current.includes(k)) stuck.current.delete(k);
     const el = scroller();
     if (!active || !el) return;
     const table = el.querySelector("table");
@@ -150,20 +163,42 @@ export function useColumnFit<T>({
         need -= w;
         next.push(col.key);
       }
-      if (next.length !== current.length) setHidden(next);
+      if (next.length === current.length) return;
+      // The last measure brought these back at this same width, and the table cannot
+      // hold them: their header width fell short of what they cost drawn (see below).
+      if (flip && Math.abs(flip.avail - avail) <= 0.5)
+        for (const k of next.slice(current.length)) {
+          const room = flip.rooms.get(k);
+          if (room != null) stuck.current.set(k, room);
+        }
+      setHidden(next);
       return;
     }
     // Bring back, the last left out first, while the table as it is now has room for
-    // them. Should the column have grown since (wider content), the next measure leaves
-    // it out again before paint and records its new width, so it cannot flicker.
+    // them by their recorded header width. A column that costs more drawn than that is
+    // left out again by the next measure, before paint. That alone does not settle it:
+    // the re-hide records its header's width again, and the header can measure the same
+    // while the column costs more (`virtualize`'s locked widths, keksdose B2, 0.48.3: the
+    // drawn column cost the table ~80–110px more than its header), so it came back, went, came back … until React's
+    // update limit (#185). So a column whose return the next measure undid, at the same
+    // scroller width, waits for more room than it had then: a wider scroller or narrower
+    // content. Whatever the error in its width, that is one invisible flip per room it is
+    // tried at.
     let n = current.length;
+    const rooms = new Map<string, number>();
     while (n > 0) {
-      const w = ownWidth.current.get(current[n - 1]);
+      const k = current[n - 1];
+      const w = ownWidth.current.get(k);
       if (w == null || need + w > avail + 0.5) break;
+      const room = stuck.current.get(k);
+      if (room != null && avail - need <= room + 0.5) break;
+      rooms.set(k, avail - need);
       need += w;
       n--;
     }
-    if (n !== current.length) setHidden(current.slice(0, n));
+    if (n === current.length) return;
+    lastShown.current = { avail, rooms };
+    setHidden(current.slice(0, n));
   }, [headRefs]);
 
   // After a render that changed what is drawn: rows, a filter or a page can widen a