@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/button.tsx

@@ -1,339 +0,0 @@
-import { useId } from "react";
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
-import { cn } from "../lib/cn";
-import { DEFAULT_COMMON_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels";
-import type { KitLinkComponent, KitLinkProps } from "../i18n/kit-labels";
-import { pickLinkRenderer, replacingClick, routerLinkNavigation } from "./text-link";
-import { useCommitReason } from "./write-lock";
-import type { CommitScope } from "./write-lock";
-import { hasContent } from "../lib/presence";
-import { LockedReason, type DisabledReasonDisplay } from "./field-parts";
-import { Spinner } from "./spinner";
-import { BUTTON_LINK_PRESSED, ICON_BUTTON_PRESSED, RenderedButtonLink, buttonLook } from "./button-look";
-import type { ButtonSize, ButtonTone, ButtonVariant } from "./button-look";
-
-// The kit's text button, and `<Button href>`, the link that looks like one. Its look —
-// the variant, size and tone maps, and `buttonClasses` — is ./button-look, which
-// IconButton shares (0.34, MOD-2, refactor audit 2026-10).
-
-/**
- * ⚠️ No default `type`: like a native `<button>`, a `Button` inside a `<form>` SUBMITS
- * it unless you pass `type="button"`. Kept native on purpose — a form's own submit
- * button relies on it, and changing the default would silently stop those forms from
- * submitting. Pass `type="button"` for every other action in a form (keksdose had six
- * 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`. 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
-   *  table's header row (keksdose writes `px-2 py-1 text-xs` over `secondary` by hand
-   *  there). Every variant takes either size. */
-  size?: ButtonSize;
-  /** In a flex row next to a taller labelled field, fill the field's height so the
-   *  two line up. No effect outside a flex row. */
-  stretch?: boolean;
-  /** The `<button>` element. React 19 passes `ref` to a function component as an
-   *  ordinary prop, so it rides `...rest` onto the element with no `forwardRef` —
-   *  declared here only because `ButtonHTMLAttributes` does not carry it. */
-  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 `default` a soft one; ignored by the other
-   *  variants. See {@link ButtonTone}. */
-  tone?: ButtonTone;
-  /**
-   * Make it a toggle button, as {@link IconButton}'s `pressed` does. `true` sets
-   * `aria-pressed="true"` and draws the "on" look — on a `link`, the brand colour and a
-   * medium weight; on the boxed variants, the quiet brand fill IconButton uses — and
-   * `false` sets `aria-pressed="false"` with the ordinary look. Left out, no
-   * `aria-pressed` (or the caller's own). For lenkbank's "All speeds" text toggle
-   * (gear/hysteresis-charts.tsx:482), which is a hand-rolled `<button aria-pressed>`
-   * swapping two class strings; with `variant="link" tone="muted"` it is this.
-   */
-  pressed?: boolean;
-  /**
-   * Why the action is not available — the button's half of DangerConfirm's
-   * `lockedReason` (kastlan handover-detail-page.tsx:197 locks a signed handover).
-   *
-   * A disabled button that cannot say why is a dead end: the native `disabled` takes it
-   * out of the tab order, so a keyboard user never lands on it, and a pointer gets a
-   * `not-allowed` cursor and nothing else. With a reason the button is `aria-disabled`
-   * instead — still focusable, still hoverable — clicks (and the Enter/Space and form
-   * submission they stand for) do nothing, and the reason is shown in the kit
-   * {@link Tooltip} and attached with `aria-describedby`, so a screen reader hears it
-   * on focus. It wins over `disabled`: passing both keeps the button reachable, which is
-   * the point of giving a reason.
-   *
-   * The description is a `hidden` copy of the reason rather than the bubble itself: the
-   * bubble exists only while hovered or focused once it is portalled, and a description
-   * that comes and goes is read inconsistently. The bubble is kept visual, the way
-   * DangerConfirm keeps its own.
-   */
-  disabledReason?: ReactNode;
-  /**
-   * Where `disabledReason` shows (0.32, §4 "No fact only in a tooltip"): by default a
-   * line under the button at Large and on a touch screen, the tooltip otherwise. See
-   * {@link DisabledReasonDisplay}.
-   */
-  disabledReasonDisplay?: DisabledReasonDisplay;
-  /**
-   * This button COMMITS — it saves, creates, deletes. Under a locked
-   * {@link WriteLockProvider} it is disabled the `disabledReason` way, with the lock's
-   * reason (which wins over a `disabledReason` of its own). No provider, or an
-   * unlocked one: no effect. See {@link WriteLockProvider}; a {@link CommitScope} since
-   * 0.33 (`COMMIT_EXCEPT_BILLING`: every lock but a lapsed plan's).
-   */
-  commit?: CommitScope;
-  /**
-   * Busy — the save is in flight: a spinner, `aria-busy`, and no second submit.
-   *
-   * kastlan's FormActions (form-actions.tsx:50) disables its submit and swaps in a
-   * `submittingLabel`, so the button jumps width mid-click and a screen reader hears
-   * the name change instead of "busy". Here the label STAYS — it is still the
-   * accessible name and still holds the button's width — and the spinner is drawn over
-   * it in the text colour, so nothing beside the button moves.
-   *
-   * The same prop {@link FileButton} has (`pending`), with one difference: this one is
-   * `aria-disabled`, not `disabled`. The button being pressed is the one that has focus,
-   * and a native `disabled` drops that focus to `<body>` the moment the save starts;
-   * clicks, and the Enter that submits a form through it, are swallowed instead.
-   */
-  pending?: boolean;
-  /** Only on the link form — see {@link ButtonLinkProps}. */
-  href?: never;
-  renderLink?: never;
-  external?: never;
-  replace?: never;
-  reloadDocument?: never;
-}
-
-/**
- * `<Button href>`: a link that looks like a button — for an action that NAVIGATES.
- *
- * kastlan paints `buttonClasses(…)` onto router Links by hand in six places (the
- * invoice / lease / unit preview dialogs' "Open" at invoice-preview-dialog.tsx:36,
- * platform-companies-page.tsx:111, verify-email-page.tsx:86's "Log in",
- * billing-history-page.tsx:85's PDF download), and has 26 `<Button onClick={() =>
- * navigate(…)}>` that are links in all but markup: no middle-click, no "open in new
- * tab", no URL on hover, and a screen reader announces a button that then changes the
- * page. With `href` it is an `<a>`: the provider's router link
- * ({@link UiKitProvider}'s `linkComponent`), or `renderLink` if given, else a plain one.
- *
- * `type` and `form` are typed out: they are a `<button>`'s, and a link never submits.
- */
-export interface ButtonLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "type" | "href"> {
-  href: string;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  stretch?: boolean;
-  tone?: ButtonTone;
-  /** The in-app router link, over the provider's `linkComponent` (see
-   *  {@link KitLinkComponent}). Ignored when `external`. */
-  renderLink?: KitLinkComponent;
-  /** Leaves the app: a plain `<a target="_blank" rel="noopener noreferrer">`, never the
-   *  router link, and "(opens in a new tab)" read after the label — billing-history's
-   *  Stripe PDF. A `target="_blank"` of your own is announced the same way. */
-  external?: boolean;
-  /**
-   * Navigate by replacing the current history entry, so Back does not return here —
-   * keksdose F1: the "Continue" out of a one-shot page (an emailed confirmation link, a
-   * payment return URL) that must not be landed on again. Handed to the router link as
-   * `replace` (see `KitLinkProps.replace` for mapping it); on a plain `<a>` a plain click
-   * becomes `location.replace(href)`. Ignored when `external`.
-   */
-  replace?: boolean;
-  /**
-   * A plain `<a>` for an in-app `href`, so the browser loads the whole document instead
-   * of the router swapping the view — keksdose F1: a route the SPA does not own (a
-   * server-rendered export, a logout that must drop every in-memory cache). Wins over
-   * `renderLink` and the provider's `linkComponent`.
-   */
-  reloadDocument?: boolean;
-  /** A link cannot be `disabled`, so this renders an `<a>` with NO `href` —
-   *  `role="link"` and `aria-disabled`, out of the tab order like a disabled button,
-   *  with the disabled look. The router link is not used: it needs somewhere to go. */
-  disabled?: boolean;
-  ref?: Ref<HTMLAnchorElement>;
-  type?: never;
-  form?: never;
-  pending?: never;
-  pressed?: never;
-  disabledReason?: never;
-  disabledReasonDisplay?: never;
-  commit?: never;
-}
-
-// Declared link-first so `<Button href>` picks the link props; the LAST signature is
-// what `ComponentProps<typeof Button>` reads, so wrappers (FileButton) still see the
-// `<button>` props they always did.
-export function Button(props: ButtonLinkProps): ReactElement;
-export function Button(props: ButtonProps): ReactElement;
-export function Button(props: ButtonProps | ButtonLinkProps): ReactElement {
-  if (props.href !== undefined) return <ButtonLink {...(props as ButtonLinkProps)} />;
-  return <ButtonElement {...(props as ButtonProps)} />;
-}
-
-function ButtonLink({
-  href,
-  renderLink,
-  external,
-  replace,
-  reloadDocument,
-  disabled,
-  variant = "default",
-  size = "md",
-  stretch,
-  tone = "default",
-  className,
-  children,
-  target,
-  rel,
-  onClick,
-  ...rest
-}: ButtonLinkProps) {
-  const kitLink = useKitLink();
-  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
-  // The same rule as every kit link (`pickLinkRenderer`): an external `href` or an
-  // in-page `#anchor` is never handed to the provider's router link, even without
-  // `external`.
-  // `reloadDocument` is the caller saying "not the router" for this one link.
-  const Link = reloadDocument ? undefined : pickLinkRenderer<KitLinkProps>(renderLink, kitLink, href);
-  const newTab = !disabled && (external || target === "_blank");
-  const cls = cn(
-    buttonLook(variant, size, stretch, tone),
-    // `relative` holds the sr-only note (see sr-only-containment.test).
-    newTab && "relative",
-    // BUTTON_BASE's `disabled:` classes never match an `<a>`; no pointer events also
-    // keeps the hover fill from lighting up on something that refuses the click.
-    disabled && "pointer-events-none cursor-not-allowed opacity-50",
-    className,
-  );
-  const body = (
-    <>
-      {children}
-      {/* The space OUTSIDE the sr-only span: a name computation trims each child's
-          text, so one inside it was lost ("Download(opens…"). In a flex box a bare
-          space draws nothing. */}
-      {newTab && " "}
-      {newTab && <span className="sr-only">({common.opensInNewTab})</span>}
-    </>
-  );
-  if (disabled) {
-    return (
-      <a {...rest} role="link" aria-disabled="true" className={cls}>
-        {body}
-      </a>
-    );
-  }
-  if (external || !Link) {
-    return (
-      <a
-        {...rest}
-        href={href}
-        target={external ? "_blank" : target}
-        rel={external ? (rel ?? "noopener noreferrer") : rel}
-        onClick={external ? onClick : replacingClick(onClick, href, replace, target)}
-        className={cls}
-      >
-        {body}
-      </a>
-    );
-  }
-  return (
-    <RenderedButtonLink
-      render={Link}
-      {...rest}
-      {...routerLinkNavigation(replace)}
-      href={href}
-      target={target}
-      rel={rel}
-      onClick={onClick}
-      className={cls}
-    >
-      {body}
-    </RenderedButtonLink>
-  );
-}
-
-function ButtonElement({
-  variant = "default",
-  size = "md",
-  stretch,
-  tone = "default",
-  pressed,
-  disabledReason: ownDisabledReason,
-  disabledReasonDisplay,
-  commit,
-  pending,
-  className,
-  onClick,
-  children,
-  href: _href,
-  renderLink: _renderLink,
-  external: _external,
-  replace: _replace,
-  reloadDocument: _reloadDocument,
-  ...rest
-}: ButtonProps) {
-  const reasonId = useId();
-  const disabledReason = useCommitReason(commit, ownDisabledReason);
-  const locked = hasContent(disabledReason);
-  const inert = locked || Boolean(pending);
-  const ownDescribedBy = rest["aria-describedby"];
-  const button = (
-    <button
-      {...rest}
-      disabled={inert ? undefined : rest.disabled}
-      aria-disabled={inert || rest["aria-disabled"]}
-      aria-busy={pending || rest["aria-busy"]}
-      aria-describedby={locked ? (ownDescribedBy ? `${ownDescribedBy} ${reasonId}` : reasonId) : ownDescribedBy}
-      aria-pressed={pressed ?? rest["aria-pressed"]}
-      onClick={(e) => {
-        // `preventDefault` as well as not calling through: a locked submit button must
-        // not submit its form, and the browser does that after this handler returns.
-        if (inert) {
-          e.preventDefault();
-          return;
-        }
-        onClick?.(e);
-      }}
-      className={cn(
-        buttonLook(variant, size, stretch, tone),
-        pressed && (variant === "link" ? BUTTON_LINK_PRESSED : ICON_BUTTON_PRESSED),
-        // The disabled look for the focusable kind of disabled.
-        locked && "cursor-not-allowed opacity-50",
-        // No dimming while pending: the spinner IS the state, and at half opacity it
-        // would be the faintest thing on the button. `relative` anchors it.
-        pending && "relative cursor-progress",
-        className,
-      )}
-    >
-      {pending ? (
-        <>
-          {/* Transparent, not hidden: it keeps the width AND stays the accessible
-              name (`visibility: hidden` would drop it from the name). `gap-[inherit]`
-              keeps an icon + text spaced as the button spaces them. */}
-          <span className="inline-flex items-center justify-center gap-[inherit] opacity-0">{children}</span>
-          {/* Decorative: `aria-busy` says it, as on FileButton. */}
-          <Spinner label={null} className="absolute inset-0 m-auto size-4 border-current/30 border-t-current" />
-        </>
-      ) : (
-        children
-      )}
-    </button>
-  );
-  if (!locked) return button;
-  return (
-    <LockedReason
-      lock={{ reason: disabledReason, reasonId }}
-      display={disabledReasonDisplay}
-      className={stretch ? "self-stretch" : undefined}
-    >
-      {button}
-    </LockedReason>
-  );
-}

package/src/components/calculator.tsx

@@ -1,341 +0,0 @@
-import { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
-import type { RefObject } from "react";
-import { Calculator as CalculatorIcon, Delete } from "lucide-react";
-import { Popover } from "./popover";
-import { cn } from "../lib/cn";
-import { FIELD_TOUCH_TEXT } from "./field-base";
-import { FOCUS_RING } from "./focus-ring";
-import { evaluateExpression, formatResult, isBareAmount, splitLeadingSign } from "../lib/calc";
-import { DEFAULT_CALCULATOR_LABELS, useKitLabels, type CalculatorLabels } from "../i18n/kit-labels";
-
-/** Screen-reader names for the calculator panel's own controls — any part of the
- *  kit's `calculator` namespace. Once three optional keys of its own; widened, not
- *  replaced, so every object that type-checked before still does. */
-export type CalculatorButtonLabels = Partial<CalculatorLabels>;
-
-interface CalculatorButtonProps {
-  /** Current field text — seeds the keypad so the user can keep calculating
-   * from what's already entered. */
-  value: string;
-  /**
-   * Called with the evaluated result whenever the running expression resolves
-   * to a number, so the host field tracks the keypad live.
-   *
-   * `expression` is the TEXT that result came out of — `"-42+50"` for an 8 — and
-   * is omitted when there was no calculation (a cleared pad). A host that keeps
-   * the sign of its figure OUTSIDE the text (see `AmountInput`'s `negative` /
-   * `onNegativeChange`, where a direction toggle owns it) cannot otherwise tell
-   * that 8 from a freshly typed one: the first is a sum that came out positive
-   * and has to take the direction with it, the second is a magnitude that must
-   * leave the direction alone. Hosts whose text carries its own sign can take
-   * the one argument and ignore this.
-   */
-  onChange: (value: string, expression?: string) => void;
-  /**
-   * Called ONCE per calculator session, with the result the host should keep: on "="
-   * (the key, or Enter in the display), and when the panel closes — Escape, a press
-   * outside, the trigger — on a result `onChange` reported after the last commit. Never
-   * per keystroke: `onChange` is the live channel, this is the one to save on.
-   *
-   * Not called when the button goes away with its panel open (a lock or `disabled`
-   * arriving, the field unmounting): those say the value must not move, and the result
-   * stays where `onChange` put it.
-   *
-   * Refactor audit 2026-10-30, INP-1: the pad had no commit point of its own, and the
-   * two field engines guessed in opposite directions. NumberInput never committed a
-   * result, so Kurvenschmiede's dialogs saved the number from before the calculation;
-   * AmountInput committed every keystroke that resolved, so "100+50" saved 105 on its way
-   * to 150, and keksdose's threshold field, `disabled` while it saves, lost its pad to the
-   * first of them.
-   */
-  onCommit?: (value: string) => void;
-  className?: string;
-  /** The trigger's accessible name; wins over `calculator.open` from the provider. */
-  "aria-label"?: string;
-  /** Screen-reader names for the panel's own controls. `aria-label` above already
-   *  covers the trigger; these three were hardcoded English inside the popover,
-   *  which a translating host had no way to reach. */
-  labels?: CalculatorButtonLabels;
-}
-
-/** Keypad layout (4 columns). The final C/= row is rendered separately. `name` is
- *  the key of the {@link CalculatorLabels} entry that names a non-digit key; a digit
- *  is named by its own glyph. */
-type Key = { kind: "ins"; label: string; ins: string; accent?: boolean; name?: KeyName } | { kind: "back" };
-
-type KeyName = "plus" | "minus" | "times" | "divide" | "decimal";
-
-const KEYS: Key[] = [
-  { kind: "ins", label: "7", ins: "7" },
-  { kind: "ins", label: "8", ins: "8" },
-  { kind: "ins", label: "9", ins: "9" },
-  { kind: "ins", label: "÷", ins: "÷", accent: true, name: "divide" },
-  { kind: "ins", label: "4", ins: "4" },
-  { kind: "ins", label: "5", ins: "5" },
-  { kind: "ins", label: "6", ins: "6" },
-  { kind: "ins", label: "×", ins: "×", accent: true, name: "times" },
-  { kind: "ins", label: "1", ins: "1" },
-  { kind: "ins", label: "2", ins: "2" },
-  { kind: "ins", label: "3", ins: "3" },
-  { kind: "ins", label: "−", ins: "−", accent: true, name: "minus" },
-  { kind: "ins", label: "0", ins: "0" },
-  { kind: "ins", label: ".", ins: ".", name: "decimal" },
-  { kind: "back" },
-  { kind: "ins", label: "+", ins: "+", accent: true, name: "plus" },
-];
-
-// The kit's one focus frame (text-size §5). Until 0.34 the keys rang in `ring-strong` on
-// `focus:`, so a pointer click left a grey ring on the key it pressed (DOC-7).
-const KEY_BASE = `flex h-9 items-center justify-center rounded-md text-sm font-medium transition-colors ${FOCUS_RING}`;
-// Two key families, two fills: digits sit on the inset surface and darken on
-// hover, operators sit a step down on `--bg-active` and lift toward that surface —
-// the same split `NumberPadSheet` uses for this keypad on a phone. The tokens
-// flip with the theme, so neither needs a `dark:` twin.
-//
-// 0.33 (docs/colour-roles-harmonization.md §12.2, §12.9): the digits hover onto
-// `--bg-active`, 1.11–1.18:1 from the key — `--bg-hover` is mixed against the card and
-// sat only 1.04:1 from the well, which in light is the page. The operators rest on
-// `--bg-active` rather than `--border`: More contrast steps the border until it is a
-// 3:1 LINE, and as a fill under the label that left 2.2–2.7:1.
-const KEY_DIGIT = "bg-surface-2 text-primary hover:bg-active";
-const KEY_ACCENT = "bg-active text-secondary hover:bg-surface-2";
-
-function seed(initial: string): string {
-  const t = initial.trim();
-  return t === "-" ? "" : t;
-}
-
-function CalculatorPanel({
-  initial,
-  onChange,
-  onEquals,
-  labels,
-}: {
-  initial: string;
-  onChange: (value: string, expression?: string) => void;
-  /** "=" was pressed on a result: the session's commit point. */
-  onEquals: () => void;
-  labels: CalculatorLabels;
-}) {
-  const [expr, setExpr] = useState(() => seed(initial));
-  const inputRef = useRef<HTMLInputElement>(null);
-  // What the pad SHOWS. Normally the expression it holds — but when the host owns
-  // the sign of the figure, the magnitude it hands back is not the whole number:
-  // type 50 into a pad opened on an outflow and the host answers "-50". Derived
-  // rather than stored, so there is no echo to guard against and a host that
-  // ignores `onChange` entirely (a static `value`) still sees its own keystrokes:
-  // the pad only defers when the host's text is character-for-character its own
-  // last number with a minus in front.
-  const host = splitLeadingSign(initial.trim());
-  const text = host.sign === "-" && isBareAmount(expr) && host.rest === expr.trim() ? initial.trim() : expr;
-  const result = evaluateExpression(text);
-
-  // Focus the display on open so the user can type or hit Enter immediately.
-  useEffect(() => {
-    inputRef.current?.focus();
-  }, []);
-
-  // Update the host field whenever the expression resolves to a number; an
-  // incomplete expression (e.g. "12+") simply leaves the field untouched. The
-  // expression rides along with the result — see `onChange` above.
-  const apply = (next: string) => {
-    setExpr(next);
-    const n = evaluateExpression(next);
-    if (n !== null) onChange(formatResult(n), next);
-  };
-
-  const clearAll = () => {
-    setExpr("");
-    onChange("");
-  };
-
-  const equals = () => {
-    if (result === null) return;
-    const out = formatResult(result);
-    setExpr(out);
-    onChange(out, text);
-    onEquals();
-  };
-
-  return (
-    <div className="space-y-2">
-      <input
-        ref={inputRef}
-        aria-label={labels.calculation}
-        value={text}
-        inputMode="decimal"
-        onChange={(e) => apply(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-            equals();
-          }
-        }}
-        // Arithmetic reads left to right in every script, and a calculator display
-        // is right-aligned in every script too — so both stay physical, pinned
-        // with `dir="ltr"` rather than mirrored in a right-to-left form.
-        dir="ltr"
-        className={cn(
-          "block w-full rounded-md border border-subtle bg-surface px-2 py-1.5 text-right font-mono text-sm text-primary focus:border-strong focus:ring-strong",
-          FIELD_TOUCH_TEXT,
-        )}
-      />
-      <div dir="ltr" className="h-4 pr-1 text-right font-mono text-xs text-placeholder">
-        {result !== null && formatResult(result) !== text.trim() ? `= ${formatResult(result)}` : ""}
-      </div>
-      <div className="grid grid-cols-4 gap-1.5">
-        {KEYS.map((key, i) =>
-          key.kind === "back" ? (
-            <button
-              key="back"
-              type="button"
-              aria-label={labels.backspace}
-              onClick={() => apply(text.slice(0, -1))}
-              className={cn(KEY_BASE, KEY_ACCENT)}
-            >
-              <Delete className="size-4" />
-            </button>
-          ) : (
-            <button
-              key={`${key.ins}-${i}`}
-              type="button"
-              aria-label={key.name ? labels[key.name] : undefined}
-              onClick={() => apply(text + key.ins)}
-              className={cn(KEY_BASE, key.accent ? KEY_ACCENT : KEY_DIGIT)}
-            >
-              {key.label}
-            </button>
-          ),
-        )}
-        <button
-          type="button"
-          // "C" is a convention, not a name: read aloud it is the letter.
-          aria-label={labels.clear}
-          onClick={clearAll}
-          className={cn(KEY_BASE, "col-span-2", KEY_ACCENT)}
-        >
-          C
-        </button>
-        <button
-          type="button"
-          aria-label={labels.equals}
-          onClick={equals}
-          className={cn(
-            KEY_BASE,
-            // The one chip that inverts against the page. There is no hover token for
-            // an inverted fill, so the hover is the chip mixed back toward the
-            // surface — a step quieter in either theme, and still a colour, so
-            // KEY_BASE's `transition-colors` carries it.
-            "col-span-2 bg-inverse text-inverse hover:bg-[color-mix(in_oklab,var(--bg-inverse)_88%,var(--bg-surface))]",
-          )}
-        >
-          =
-        </button>
-      </div>
-    </div>
-  );
-}
-
-/**
- * The trigger, and the place a session ends. The render in which `open` turns false is
- * the panel closing, however it closed — Escape, a press outside, this button — and
- * that is when a result the pad left unsettled is committed. A component of its own
- * because `open` lives in Popover and reaches only the trigger.
- *
- * Not the panel's unmount: the panel also goes when a lock or `disabled` takes the
- * calculator away, and nothing may commit then. Those unmount this button with it, so no
- * render ever sees `open` turn false.
- */
-function CalculatorTrigger({
-  open,
-  onToggle,
-  onClosed,
-  buttonRef,
-  label,
-  className,
-}: {
-  open: boolean;
-  onToggle: () => void;
-  onClosed: () => void;
-  buttonRef: RefObject<HTMLButtonElement | null>;
-  label: string;
-  className?: string;
-}) {
-  const closed = useEffectEvent(onClosed);
-  const wasOpen = useRef(open);
-  useEffect(() => {
-    if (wasOpen.current && !open) closed();
-    wasOpen.current = open;
-  }, [open]);
-  return (
-    <button
-      ref={buttonRef}
-      type="button"
-      tabIndex={-1}
-      onClick={onToggle}
-      aria-label={label}
-      aria-expanded={open}
-      className={cn(
-        "flex items-center justify-center text-placeholder transition-colors hover:text-secondary",
-        className,
-      )}
-    >
-      <CalculatorIcon className="size-4" />
-    </button>
-  );
-}
-
-/**
- * A calculator icon that opens a small keypad popover anchored to its host
- * field. Designed as a trailing-edge adornment: render it inside the field's
- * `relative` wrapper, positioned absolutely. The keypad seeds from the current
- * field value and writes evaluated results straight back through `onChange`, and
- * commits the session once through `onCommit`.
- */
-export function CalculatorButton({
-  value,
-  onChange,
-  onCommit,
-  className,
-  "aria-label": ariaLabel,
-  labels: labelsProp,
-}: CalculatorButtonProps) {
-  // prop > provider > English, with the name prop folded in as the `open` key it has
-  // always been.
-  const fromProps = useMemo(
-    () => (ariaLabel === undefined ? labelsProp : { ...labelsProp, open: ariaLabel }),
-    [ariaLabel, labelsProp],
-  );
-  const labels = useKitLabels("calculator", DEFAULT_CALCULATOR_LABELS, fromProps);
-  // The last result `onChange` reported that no commit has covered yet — what closing
-  // the panel commits. Written by the pad's handlers and read when it closes; never
-  // rendered, so a ref.
-  const unsettled = useRef<string | null>(null);
-  const change = (next: string, expression?: string) => {
-    unsettled.current = next;
-    onChange(next, expression);
-  };
-  const settle = () => {
-    const next = unsettled.current;
-    unsettled.current = null;
-    if (next !== null) onCommit?.(next);
-  };
-  return (
-    <Popover
-      width="14rem"
-      labels={{ panel: labels.panel }}
-      trigger={({ open, toggle, ref }) => (
-        <CalculatorTrigger
-          open={open}
-          onToggle={toggle}
-          onClosed={settle}
-          buttonRef={ref}
-          label={labels.open}
-          className={className}
-        />
-      )}
-    >
-      {() => <CalculatorPanel initial={value} onChange={change} onEquals={settle} labels={labels} />}
-    </Popover>
-  );
-}