@eifi1/ui-kit 0.48.2 → 0.50.0

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/combobox-core.tsx

@@ -1064,6 +1064,8 @@ export function ComboboxPanel<V extends string | number>({
       // `aria-describedby` has nothing to collide with.
       {...rest}
       ref={panelRef}
+      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).
+      data-kit-layer=""
       dir={dir}
       onKeyDown={onKeyDown}
       // A press in a panel opened from a row is inside this list for the core's outside

package/src/components/combobox-suggestions.tsx

@@ -92,6 +92,8 @@ export function SuggestionList({
   return createPortal(
     <div
       ref={panelRef}
+      // A kit layer, for the tour's layer order (0.50, docs/tours-harmonization.md §11.6).
+      data-kit-layer=""
       // z-50, not the old z-30: the list is a child of <body> now, so it is
       // competing with the app's own overlays rather than with its own siblings.
       className="fixed z-50"

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/currency-select.tsx

@@ -2,7 +2,16 @@ import { useCallback, useId } from "react";
 import type { ComponentPropsWithoutRef, ReactNode, Ref } from "react";
 import { FieldChevron, FIELD_TRIGGER, FIELD_INVALID, FIELD_FLOATING_PAD } from "./field-base";
 import { FieldLabel } from "./field-parts";
-import { assignRef, EndHintRow, useFieldMessages, type FieldHelpProps } from "./field-parts";
+import {
+  assignRef,
+  EndHintRow,
+  LockedReason,
+  useFieldMessages,
+  useLockReason,
+  type DisabledReasonDisplay,
+  type FieldHelpProps,
+} from "./field-parts";
+import type { CommitScope } from "./write-lock";
 import { cn } from "../lib/cn";
 import { useComboboxCore } from "./combobox-core";
 import {
@@ -90,6 +99,31 @@ export interface CurrencySelectProps extends Omit<ComponentPropsWithoutRef<"div"
    * filter that only matches the hidden English name is worse than no filter.
    */
   currencyNames?: Record<string, string>;
+  /** As {@link Select}'s: no focus, no list, the settled look, no chevron. */
+  disabled?: boolean;
+  /**
+   * Why the currency cannot be changed — {@link Select}'s `disabledReason` (keksdose,
+   * 2026-10-23: a budget's currency for a guest or a viewer, and while offline, which
+   * keksdose drew as a one-option `Select` to keep the reason and lost the flag). The
+   * trigger stays focusable and `aria-disabled` (never the `disabled` attribute), keeps
+   * its flag and code, opens nothing, and `onChange` is never called; the reason is a
+   * line under the field at Large and on a touch screen, else in the kit
+   * {@link Tooltip} (`disabledReasonDisplay`), and on the trigger's `aria-describedby`
+   * (after a caption, before an error). It wears the settled look of a disabled field
+   * and drops its chevron, as a locked Select does. It wins over `disabled`.
+   */
+  disabledReason?: ReactNode;
+  /** Where the reason shows — {@link Select}'s `disabledReasonDisplay`: a line under the
+   *  field at Large and on a touch screen by default, the tooltip otherwise. */
+  disabledReasonDisplay?: DisabledReasonDisplay;
+  /**
+   * This picker COMMITS — choosing saves. Under a locked {@link WriteLockProvider} it is
+   * locked the `disabledReason` way with the lock's reason (which wins over its own).
+   * No provider, or an unlocked one: no effect. {@link Select}'s `commit`. A currency
+   * field inside a form with its own Save stays editable under the lock — leave this off
+   * there, and put `commit` on the Save.
+   */
+  commit?: CommitScope;
   /** The TRIGGER — the focusable `<button>` — as a React 19 ref prop, as on
    *  {@link MultiSelect} and {@link CountrySelect}: react-hook-form's focus-on-error
    *  calls `focus()` on it (0.34, API-3, refactor audit 2026-10). Not the wrapper. */
@@ -109,6 +143,10 @@ export function CurrencySelect({
   help,
   labels,
   currencyNames,
+  disabled,
+  disabledReason,
+  disabledReasonDisplay,
+  commit,
   "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-invalid": ariaInvalid,
@@ -137,6 +175,15 @@ export function CurrencySelect({
 
   const selected = getCurrency(value);
 
+  // The lock — Select's (`useLockReason`): the WriteLock's reason under `commit`, else
+  // the caller's own. Locked or `disabled`, nothing opens the list or picks a value.
+  const lock = useLockReason(commit, disabledReason);
+  const locked = lock.locked;
+  const inert = locked || Boolean(disabled);
+  // A lock (or `disabled`) arriving while the list is up closes it — adjusted while
+  // rendering, as CountrySelect does, so no frame shows a list that cannot be used.
+  if (inert && open) setOpen(false);
+
   const listboxId = `${useId()}-listbox`;
   // Text is a caption under the field; anything else (a FieldHint) rides the label
   // line — and a FieldHint is that caption at Large and on touch (§4). See `hint`. On
@@ -152,6 +199,8 @@ export function CurrencySelect({
     invalid,
     describedBy: ariaDescribedBy,
     ariaInvalid,
+    // A lock's reason sits between the caption and the error, as on Select.
+    reasonId: locked && lock.reasonId,
   });
   const { labelHint, describedBy, isInvalid } = field;
 
@@ -169,10 +218,21 @@ export function CurrencySelect({
       ref={setTrigger}
       type="button"
       aria-label={name}
-      onClick={() => setOpen((v) => !v)}
+      // The focusable kind of disabled while locked (Select's rule): native `disabled`
+      // would take the field out of the tab order, and the reason with it.
+      disabled={locked ? undefined : disabled}
+      aria-disabled={locked || undefined}
+      onClick={(e) => {
+        if (inert) {
+          e.preventDefault();
+          return;
+        }
+        setOpen((v) => !v);
+      }}
       // Down/Up opens the list from the closed trigger, per the APG; Enter and Space
       // already do through the button's own click.
       onKeyDown={(e) => {
+        if (inert) return;
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
           e.preventDefault();
           setOpen(true);
@@ -191,12 +251,27 @@ export function CurrencySelect({
       aria-expanded={open}
       aria-invalid={isInvalid || undefined}
       aria-describedby={describedBy}
-      className={cn(FIELD_TRIGGER, "pe-9", label !== undefined && FIELD_FLOATING_PAD, isInvalid && FIELD_INVALID)}
+      className={cn(
+        FIELD_TRIGGER,
+        "pe-9",
+        label !== undefined && FIELD_FLOATING_PAD,
+        // FIELD_BASE's `disabled:` look, for a trigger locked without being `disabled`
+        // (the `:disabled` variants cannot match it) — Select's FIELD_LOCKED. No hover:
+        // nothing here answers a press.
+        locked && "cursor-not-allowed bg-surface-2 text-muted hover:bg-surface-2",
+        isInvalid && FIELD_INVALID,
+      )}
     >
       {/* The trigger stays COMPACT — flag + code only — so it never clips in a
           narrow field; the full names live in the (wider) popup (feedback
           #308). */}
-      <span className={cn("flex items-center gap-2 min-w-0", selected ? "text-primary" : "text-placeholder")}>
+      <span
+        className={cn(
+          "flex items-center gap-2 min-w-0",
+          // The settled look reaches the code too: `text-primary` here would outweigh it.
+          !selected ? "text-placeholder" : inert ? "text-muted" : "text-primary",
+        )}
+      >
         {selected ? (
           <>
             <CurrencyFlag country={selected.country} />
@@ -206,10 +281,23 @@ export function CurrencySelect({
           placeholder ?? text.currency
         )}
       </span>
-      <FieldChevron />
+      {/* No menu to drop while disabled or locked, so no chevron — the arrow is the one
+          thing on the control that promises a choice (dev#474, as on Select). */}
+      {!inert && <FieldChevron />}
     </button>
   );
 
+  // Select's frame: the line under the trigger, or the Tooltip with a hidden copy for
+  // `aria-describedby`. The wrapper `<div>` keeps `className`, so the layout holds.
+  // `flex w-full items-stretch`: the trigger keeps the field's full width in it.
+  const control = locked ? (
+    <LockedReason lock={lock} display={disabledReasonDisplay} className="flex w-full items-stretch">
+      {trigger}
+    </LockedReason>
+  ) : (
+    trigger
+  );
+
   return (
     // The wrapper takes `rest`; the trigger takes the name. This field's label is a
     // floating <span> rather than a <label for>, so a caller who wants the control to
@@ -230,7 +318,7 @@ export function CurrencySelect({
         ))}
       {/* No label line to ride: at the field's end edge, outside the box, as an
           unlabelled Select places its FieldHint. */}
-      <EndHintRow hint={label === undefined ? labelHint : undefined}>{trigger}</EndHintRow>
+      <EndHintRow hint={label === undefined ? labelHint : undefined}>{control}</EndHintRow>
       {field.below}
       {/* Portalled to <body> and anchored to the trigger (dev#548), so where it stands
           in the flow no longer moves it. */}
@@ -246,6 +334,7 @@ export function CurrencySelect({
         // to say what it asks for (live #200).
         sheetTitle={label ?? text.currency}
         onChoose={(code) => {
+          if (inert) return;
           onChange(code);
           // Back to the trigger: the panel holding focus is about to unmount, and a
           // keyboard user who has answered the field should stand on it, ready to Tab on.

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