@eifi1/ui-kit 0.48.1 → 0.49.0

package/src/i18n/locales/it.ts

@@ -546,6 +546,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       theme: "Cambia tema",
       palette: "Preset di aspetto",
       language: "Lingua",
+      languageCurrent: (name) => `Scegli la lingua, attuale: ${name}`,
       switchRole: "Cambia ruolo",
       role: (value) => `Ruolo: ${value}`,
     },
@@ -1888,10 +1889,13 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
     rowActions: {
       actions: "Azioni",
       actionsFor: (name) => `Azioni per ${name}`,
+      confirmTitle: (action, name) => (name ? `${action} «${name}»?` : `${action}?`),
+      confirmBody: "Questa azione non può essere annullata.",
     },
     appShellMore: {
       more: "Altro",
       moreTitle: "Altre pagine",
+      overview: "Panoramica",
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words. "Lei", as
     // the rest of the catalogue.

package/src/i18n/locales/zh.ts

@@ -529,6 +529,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       theme: "切换主题",
       palette: "外观预设",
       language: "语言",
+      languageCurrent: (name) => `选择语言，当前：${name}`,
       switchRole: "切换角色",
       role: (value) => `角色：${value}`,
     },
@@ -1795,10 +1796,13 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
     rowActions: {
       actions: "操作",
       actionsFor: (name) => `${name} 的操作`,
+      confirmTitle: (action, name) => (name ? `${action}“${name}”？` : `${action}？`),
+      confirmBody: "此操作无法撤销。",
     },
     appShellMore: {
       more: "更多",
       moreTitle: "更多页面",
+      overview: "概览",
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words.
     mailTestCard: {

package/src/i18n/review.ts

@@ -153,6 +153,7 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "tabs.remove": [["{{tab}}"]],
   "appShell.toggleGroup": [["{{group}}"]],
   "topBar.role": [["{{role}}"]],
+  "topBar.languageCurrent": [["{{name}}"]],
   "file.size": [[2_500_000]],
   "wizard.step": [[2, 4]],
   "tour.step": [[2, 4]],
@@ -279,6 +280,7 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "signChip.direction": [["{{current}}", "{{next}}"]],
   "signChip.switchTo": [["{{next}}"]],
   "rowActions.actionsFor": [["{{name}}"]],
+  "rowActions.confirmTitle": [["{{action}}", "{{name}}"], ["{{action}}"]],
   "columnMapper.readError": [["{{name}}"]],
   "columnMapper.summary": [
     [1, 1],

package/src/i18n/shared-labels.ts

@@ -106,6 +106,7 @@ export const DEFAULT_TOP_BAR_LABELS: TopBarLabels = {
   theme: "Toggle theme",
   palette: "Appearance preset",
   language: "Language",
+  languageCurrent: (name) => `Choose language, current: ${name}`,
   switchRole: "Switch role",
   role: (value) => `Role: ${value}`,
 };

package/src/index.ts

@@ -154,6 +154,12 @@ export { useCloseTransition, OVERLAY_EXIT_MS } from "./hooks/use-close-transitio
 export { useRowSwipe } from "./hooks/use-row-swipe";
 // 0.28: keksdose's noindex marker, for the legal and auth pages of every app.
 export { useNoIndex } from "./hooks/use-noindex";
+// 0.49 KIT-9: the window's title from page, section and app, in the provider's format.
+export { useDocumentTitle } from "./hooks/use-document-title";
+// 0.49 KIT-1b: U+2212 before a number as "-", the copy handler's rule, for an app's text.
+export { asciiMinusInNumbers } from "./lib/clipboard-minus";
+export { DEFAULT_DOCUMENT_TITLE_FORMAT, formatDocumentTitle } from "./lib/document-title";
+export type { DocumentTitleParts } from "./lib/document-title";
 export type { SwipeStage, RowSwipeOptions, RowSwipeReturn } from "./hooks/use-row-swipe";
 // Any element as a file drop target, screened like FileButton (kastlan).
 export { useFileDrop, dragHasFiles } from "./hooks/use-file-drop";
@@ -381,10 +387,15 @@ export * from "./components/alert-banner";
 export * from "./components/toggle-group";
 // A wrapping set of links/buttons marked `aria-current` — Tabs-like looks, not tabs.
 export * from "./components/nav-pills";
+// 0.49.0 (KIT-6): a section's pages on the phone, one scrolling row of pills.
+export * from "./components/section-nav";
 // A pill carrying one VALUE — inert, a link, or a toggle, depending on which prop it is
 // given — and the list field built from it. Distinct from Button on purpose: a row of
 // buttons reads as "choose an action", a row of chips as "here are the things".
 export * from "./components/chip";
+// 0.49.0 (KIT-8): five domain-free status kinds and their tones — Chip/StatusDot `status`.
+export { statusTone, STATUS_KINDS } from "./lib/status-tone";
+export type { StatusKind, StatusTone } from "./lib/status-tone";
 // ChipInput's own module since MOD-9: it renders Chip, so chip.tsx re-exports only its types.
 export * from "./components/chip-input";
 export * from "./components/wizard-stepper";
@@ -589,6 +600,8 @@ export type {
   RowActionsColumnOptions,
   RowActionsHeadProps,
   RowActionTone,
+  // 0.49 KIT-12: a danger action's confirmation words.
+  RowActionConfirm,
 } from "./components/row-actions";
 // 0.22.0: the inputs round (kastlan's, keksdose's and Kurvenschmiede's audits).
 export * from "./components/checkbox-group";

package/src/landing/landing-actions.tsx

@@ -77,12 +77,12 @@ export function LandingActions({
       className={cn("flex flex-col gap-3 sm:flex-row", align === "center" && "sm:justify-center", className)}
     >
       {session === "user" ? (
-        <Button href={openAppHref} variant="brand" size={buttonSize} className={extra}>
+        <Button href={openAppHref} variant="accent" size={buttonSize} className={extra}>
           {labels.openApp}
         </Button>
       ) : (
         <>
-          <Button href={accessLink.href} variant="brand" size={buttonSize} className={extra}>
+          <Button href={accessLink.href} variant="accent" size={buttonSize} className={extra}>
             {accessLink.label}
           </Button>
           {demoHref !== null && (

package/src/landing/public-header.tsx

@@ -82,7 +82,7 @@ export function PublicHeader({
 
   const actions =
     session === "user" ? (
-      <Button href={openAppHref} variant="brand" size={size}>
+      <Button href={openAppHref} variant="accent" size={size}>
         {labels.openApp}
       </Button>
     ) : (
@@ -96,7 +96,7 @@ export function PublicHeader({
             {labels.signIn}
           </Button>
         )}
-        <Button href={accessLink.href} variant="brand" size={size}>
+        <Button href={accessLink.href} variant="accent" size={size}>
           {accessLink.label}
         </Button>
       </>

package/src/lib/clipboard-minus.ts

@@ -0,0 +1,94 @@
+/**
+ * The copy handler for the one minus sign (0.49 KIT-1b, Marcel's follow-up to KIT-1).
+ *
+ * The kit prints a negative with U+2212 (lib/minus.ts). A spreadsheet does not read that
+ * as a number: a figure copied out of a kit table and pasted into Excel landed as text.
+ * So while a selection inside the page is copied, every U+2212 standing directly before a
+ * number — optionally after a currency code or symbol and spaces: "−CHF 1,250.50",
+ * "−€2,000", "−12%" — becomes the ASCII "-" in the clipboard, in `text/plain` AND in
+ * `text/html` (Excel pastes the HTML flavour, as cells). The page keeps "−".
+ *
+ * A copy with no such minus is left to the browser untouched, and so is any copy out of an
+ * input, a textarea or an editable element: what the person typed is theirs.
+ *
+ * Installed once per document by `UiKitProvider` (`copyAsciiMinus`, default `true`) —
+ * the one part every app mounts, the signed-out pages included.
+ */
+
+/** U+2212, then (optionally) a currency code or symbol, then spaces, then a digit. */
+const MINUS_BEFORE_NUMBER = /\u2212(?=(?:[A-Z]{3}|\p{Sc})?[\s\u00a0\u202f]*\d)/gu;
+
+/**
+ * `text` with each U+2212 that stands before a number (in the sense above) as the ASCII
+ * hyphen-minus, every other character as it was — for text an app hands a machine that
+ * did not come from a formatter's `minus: "ascii"`.
+ */
+export function asciiMinusInNumbers(text: string): string {
+  return text.replace(MINUS_BEFORE_NUMBER, "-");
+}
+
+function hasMinusBeforeNumber(text: string): boolean {
+  MINUS_BEFORE_NUMBER.lastIndex = 0;
+  const found = MINUS_BEFORE_NUMBER.test(text);
+  MINUS_BEFORE_NUMBER.lastIndex = 0;
+  return found;
+}
+
+/** An input, a textarea or an editable element: a copy there is the person's own text. */
+function isEditable(node: Node | null | undefined): boolean {
+  const el = node instanceof Element ? node : node?.parentElement;
+  if (!el) return false;
+  if (el.closest("input, textarea, select")) return true;
+  return (el as HTMLElement).isContentEditable === true || el.closest('[contenteditable=""], [contenteditable="true"]') !== null;
+}
+
+/** Table parts copied alone are wrapped back into a table, which Excel reads as cells. */
+function wrapTableParts(container: HTMLElement): string {
+  const first = container.firstElementChild?.tagName;
+  const html = container.innerHTML;
+  if (first === "TD" || first === "TH") return `<table><tbody><tr>${html}</tr></tbody></table>`;
+  if (first === "TR") return `<table><tbody>${html}</tbody></table>`;
+  if (first === "TBODY" || first === "THEAD" || first === "TFOOT") return `<table>${html}</table>`;
+  return html;
+}
+
+function onCopy(event: ClipboardEvent): void {
+  if (event.defaultPrevented || !event.clipboardData) return;
+  const doc = (event.target as Node | null)?.ownerDocument ?? document;
+  if (isEditable(event.target as Node | null) || isEditable(doc.activeElement)) return;
+  const selection = doc.getSelection();
+  if (!selection || selection.rangeCount === 0 || selection.isCollapsed) return;
+  if (isEditable(selection.anchorNode) || isEditable(selection.focusNode)) return;
+  const text = selection.toString();
+  if (!hasMinusBeforeNumber(text)) return;
+
+  const container = doc.createElement("div");
+  for (let i = 0; i < selection.rangeCount; i++) container.appendChild(selection.getRangeAt(i).cloneContents());
+  const walker = doc.createTreeWalker(container, NodeFilter.SHOW_TEXT);
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    node.nodeValue = asciiMinusInNumbers(node.nodeValue ?? "");
+  }
+  event.clipboardData.setData("text/plain", asciiMinusInNumbers(text));
+  event.clipboardData.setData("text/html", wrapTableParts(container));
+  event.preventDefault();
+}
+
+const installs = new WeakMap<Document, number>();
+
+/**
+ * Listen for copies on `doc` until the returned function is called. Counted: nested
+ * providers install it once, and the last one to go removes it.
+ */
+export function installClipboardMinus(doc: Document = document): () => void {
+  const count = installs.get(doc) ?? 0;
+  if (count === 0) doc.addEventListener("copy", onCopy);
+  installs.set(doc, count + 1);
+  let done = false;
+  return () => {
+    if (done) return;
+    done = true;
+    const left = (installs.get(doc) ?? 1) - 1;
+    installs.set(doc, left);
+    if (left === 0) doc.removeEventListener("copy", onCopy);
+  };
+}

package/src/lib/document-title.ts

@@ -0,0 +1,41 @@
+/**
+ * The window's title from its parts (0.49 KIT-9): `{page}`, `{section}` and `{app}` in a
+ * format, by default "{page} · {section} · {app}" — "Invoices · Finance · Kastlan".
+ *
+ * A part that is missing (undefined, null, empty or blank) is dropped WITH the separator
+ * before it, so "Invoices · Kastlan" never reads "Invoices ·  · Kastlan". The text between
+ * two parts is the separator; text before the first part and after the last is kept as
+ * written ("[{page} – {app}]" → "[KS]"). No part at all gives "".
+ */
+export const DEFAULT_DOCUMENT_TITLE_FORMAT = "{page} · {section} · {app}";
+
+/** The parts {@link formatDocumentTitle} fills in. */
+export interface DocumentTitleParts {
+  page?: string | null;
+  section?: string | null;
+  app?: string | null;
+}
+
+const PLACEHOLDER = /\{(page|section|app)\}/g;
+
+export function formatDocumentTitle(format: string, parts: DocumentTitleParts): string {
+  let prefix = "";
+  let out = "";
+  let pending = "";
+  let last = 0;
+  let seen = false;
+  for (const m of format.matchAll(PLACEHOLDER)) {
+    const literal = format.slice(last, m.index!);
+    last = m.index! + m[0].length;
+    if (!seen) prefix = literal;
+    else pending = out === "" ? "" : literal || pending;
+    seen = true;
+    const value = parts[m[1] as keyof DocumentTitleParts]?.trim();
+    if (!value) continue;
+    out += (out === "" ? "" : pending) + value;
+    pending = "";
+  }
+  if (!seen) return format;
+  if (out === "") return "";
+  return prefix + out + format.slice(last);
+}

package/src/lib/float-clearance.ts

@@ -2,7 +2,8 @@ import { useEffect } from "react";
 
 /**
  * The room the floating launchers take above the bottom nav, published as
- * `--app-float-clearance` on `<html>` so `AppShell` can pad `<main>` past them.
+ * `--app-float-clearance` on `<html>` so `AppShell` can pad `<main>` past them, and with
+ * the nav included as `--kit-floating-inset` (0.49 KIT-11, below).
  *
  * keksdose dev#612 (UX-1.3, "the help button covers content"): the shell padded `<main>`
  * for the nav plus 1.5rem, so on a phone the last row of every page ended under the help
@@ -23,12 +24,27 @@ import { useEffect } from "react";
 
 const claims = new Map<symbol, string>();
 
+/**
+ * 0.49 KIT-11: `--kit-floating-inset` is the same room measured from the screen's bottom
+ * edge — the phone's bottom nav (`--app-nav-h`, 0px from `md` up) or the home indicator,
+ * whichever is taller, plus `--app-float-clearance` — so a page's own fixed or sticky
+ * footer, or its last row, can clear the launchers with one length at every width.
+ * Unset while no launcher is mounted, like `--app-float-clearance`: write
+ * `var(--kit-floating-inset, var(--app-nav-h, 0px))`.
+ */
+const NAV_OR_HOME_INDICATOR = "max(var(--app-nav-h, 0px), env(safe-area-inset-bottom, 0px))";
+
 function publish() {
   if (typeof document === "undefined") return;
   const root = document.documentElement;
   const values = [...claims.values()];
-  if (values.length === 0) root.style.removeProperty("--app-float-clearance");
-  else root.style.setProperty("--app-float-clearance", values.length === 1 ? values[0] : `max(${values.join(", ")})`);
+  if (values.length === 0) {
+    root.style.removeProperty("--app-float-clearance");
+    root.style.removeProperty("--kit-floating-inset");
+    return;
+  }
+  root.style.setProperty("--app-float-clearance", values.length === 1 ? values[0] : `max(${values.join(", ")})`);
+  root.style.setProperty("--kit-floating-inset", `calc(${NAV_OR_HOME_INDICATOR} + var(--app-float-clearance))`);
 }
 
 /** Claim `value` (a CSS length: the launcher's top edge above the nav, plus a gap) until

package/src/lib/format.ts

@@ -1,8 +1,11 @@
 import { useMemo } from "react";
 import { useKitLocale, useKitTimeZone } from "../i18n/kit-labels";
 import { parseIsoDate } from "./dates";
+import { formatWithMinus, type MinusStyle } from "./minus";
 import { roundHalfAway } from "./round";
 
+export type { MinusStyle } from "./minus";
+
 /**
  * Number, money, percentage, date and relative-time formatting — `Intl`, in one place,
  * for the figures an app prints OUTSIDE a kit component.
@@ -19,9 +22,18 @@ import { roundHalfAway } from "./round";
  * functions bound to the `<UiKitProvider locale>`, so a page formats exactly like the
  * kit components on it.
  *
- * A missing value — `null`, `undefined`, `NaN`, an unparseable date — formats as
- * `empty` (default "—", the dash `StatTile` shows for no value), never as "NaN" or
- * "Invalid Date".
+ * A missing value — `null`, `undefined`, an unparseable date — formats as `empty`
+ * (default "—", the dash `StatTile` shows for no value), never as "NaN" or "Invalid
+ * Date". A number may also arrive as a numeric STRING (0.49, KIT-2) — "1850.00", "-12.5",
+ * "0": a Decimal field off a Python API — and is formatted like the number. Anything
+ * else (a non-numeric string, an object, `NaN`, ±`Infinity`) prints `empty` too, but is
+ * a bug upstream rather than a gap in the data, so a development build says so on the
+ * console, once per call site. Zero is a figure: `0` and `"0"` print "CHF 0.00", never
+ * the dash.
+ *
+ * A negative figure carries the typographic minus, U+2212 (0.49, KIT-1), in every
+ * locale — `Intl` writes a hyphen in most. `minus: "ascii"` for text a machine reads
+ * back (a CSV, the clipboard).
  */
 
 /** What every formatter here prints for a missing value, unless told otherwise. */
@@ -47,6 +59,14 @@ export interface FormatNumberBaseOptions extends BaseOptions {
   signDisplay?: Intl.NumberFormatOptions["signDisplay"];
   /** Any further `Intl.NumberFormat` options, merged over the ones above. */
   options?: Intl.NumberFormatOptions;
+  /**
+   * The minus sign of a negative figure (0.49, KIT-1). `"typographic"` (default):
+   * U+2212, as wide as "+" and the digits, as `SignedAmount` prints it — in every
+   * locale, also where `Intl` writes a hyphen. `"ascii"`: U+002D, for an export a
+   * machine parses back (a CSV download, the clipboard) — there, also pass
+   * `options: { useGrouping: false }` or write the raw number.
+   */
+  minus?: MinusStyle;
 }
 
 /** The options {@link formatNumber} takes: the shared ones plus a free-text `unit`. */
@@ -115,44 +135,113 @@ function numberOptions(o: FormatNumberBaseOptions): Intl.NumberFormatOptions {
   };
 }
 
-function isMissing(value: number | null | undefined): value is null | undefined {
-  // ±Infinity too (lenkbank, adopting 0.13): a division by zero upstream is a missing
-  // figure, and "∞" printed in a money or measurement column reads like data.
-  return value === null || value === undefined || !Number.isFinite(value);
+/**
+ * What the number formatters take (0.49, KIT-2): a number, a numeric string ("1850.00",
+ * "-12.5", "1e3" — what a Decimal arrives as in JSON), or `null` / `undefined` for no
+ * value. A string is read with `Number()`, so a figure with more significant digits than
+ * a double holds (about 15–17) is printed as its nearest double.
+ */
+export type FormattableNumber = number | string | null | undefined;
+
+/** A plain decimal: optional sign, digits with an optional point, an optional exponent.
+ *  No grouping marks, no decimal comma, no currency — those are formatted text, and
+ *  reading them back is a locale's guess. */
+const NUMERIC_STRING = /^[+-]?(?:\d+\.?\d*|\.\d+)(?:[eE][+-]?\d+)?$/;
+
+/** 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 warnedSites = new Set<string>();
+/** This module's own frames, skipped to find the caller ("Object.formatMoney" is a
+ *  `useKitFormat` wrapper). */
+const OWN_FRAME = /\b(?:formatNumber|formatMoney|formatPercent|toFormattable|warnInvalid|callSite)\b/;
+
+/** The first stack frame outside the formatters: where the bad value was passed. */
+function callSite(): string {
+  const frames = (new Error().stack ?? "").split("\n").slice(1);
+  return frames.find((frame) => !OWN_FRAME.test(frame))?.trim() ?? "";
+}
+
+function describeValue(value: unknown): string {
+  if (typeof value === "number" || typeof value === "bigint" || typeof value === "boolean") return String(value);
+  try {
+    return JSON.stringify(value) ?? String(value);
+  } catch {
+    return Object.prototype.toString.call(value);
+  }
+}
+
+/** A development build's console note about an invalid value — once per call site. */
+function warnInvalid(fn: string, value: unknown): void {
+  if (!devWarnings()) return;
+  const site = callSite();
+  const key = `${fn}|${site || typeof value}`;
+  if (warnedSites.has(key)) return;
+  warnedSites.add(key);
+  const type = Array.isArray(value) ? "array" : typeof value;
+  console.warn(
+    `[ui-kit] ${fn} got ${describeValue(value)} (${type}), which is not a number: printed the empty value. ` +
+      "Pass a number, a numeric string, or null/undefined for a missing value." +
+      (site ? `\n  at ${site.replace(/^at /, "")}` : ""),
+  );
+}
+
+/**
+ * `value` as a finite number to format, or `undefined` to print `empty`. `null` and
+ * `undefined` are a missing value and pass quietly; anything that is neither a finite
+ * number nor a numeric string is an invalid one — ±Infinity included (lenkbank, adopting
+ * 0.13: a division by zero upstream; "∞" in a money column reads like data) — and a
+ * development build warns. `-0` is folded into `0`: zero carries no sign.
+ */
+function toFormattable(fn: string, value: unknown): number | undefined {
+  if (value === null || value === undefined) return undefined;
+  let n: number | undefined;
+  if (typeof value === "number") n = value;
+  else if (typeof value === "string" && NUMERIC_STRING.test(value.trim())) n = Number(value.trim());
+  if (n === undefined || !Number.isFinite(n)) {
+    warnInvalid(fn, value);
+    return undefined;
+  }
+  return n + 0;
 }
 
 /** A number in `locale`: "1,234.5", "1.234,5", "1’234.5" — with `unit`, "3.400 N". */
-export function formatNumber(value: number | null | undefined, options: FormatNumberOptions = {}): string {
-  if (isMissing(value)) return options.empty ?? EMPTY_FORMATTED_VALUE;
-  const figure = numberFormatter(options.locale, numberOptions(options)).format(value);
+export function formatNumber(value: FormattableNumber, options: FormatNumberOptions = {}): string {
+  const n = toFormattable("formatNumber", value);
+  if (n === undefined) return options.empty ?? EMPTY_FORMATTED_VALUE;
+  const figure = formatWithMinus(numberFormatter(options.locale, numberOptions(options)), n, options.minus);
   return options.unit ? `${figure}${UNIT_SEPARATOR}${options.unit}` : figure;
 }
 
 /** An amount of `currency` (ISO 4217) in `locale`: "CHF 1’234.50", "1.234,50 €". */
-export function formatMoney(
-  value: number | null | undefined,
-  currency: string,
-  options: FormatMoneyOptions = {},
-): string {
-  if (isMissing(value)) return options.empty ?? EMPTY_FORMATTED_VALUE;
-  return numberFormatter(options.locale, {
+export function formatMoney(value: FormattableNumber, currency: string, options: FormatMoneyOptions = {}): string {
+  const n = toFormattable("formatMoney", value);
+  if (n === undefined) return options.empty ?? EMPTY_FORMATTED_VALUE;
+  const formatter = numberFormatter(options.locale, {
     style: "currency",
     currency,
     ...(options.currencyDisplay ? { currencyDisplay: options.currencyDisplay } : null),
     ...numberOptions(options),
-  }).format(value);
+  });
+  return formatWithMinus(formatter, n, options.minus);
 }
 
 /** A percentage in `locale` ("12%", "12 %", "+1.25%"). See {@link FormatPercentOptions.ratio}
  *  for what `value` means. Default digits: at most one. */
-export function formatPercent(value: number | null | undefined, options: FormatPercentOptions = {}): string {
-  if (isMissing(value)) return options.empty ?? EMPTY_FORMATTED_VALUE;
-  const ratio = options.ratio === false ? value / 100 : value;
-  return numberFormatter(options.locale, {
+export function formatPercent(value: FormattableNumber, options: FormatPercentOptions = {}): string {
+  const n = toFormattable("formatPercent", value);
+  if (n === undefined) return options.empty ?? EMPTY_FORMATTED_VALUE;
+  const ratio = options.ratio === false ? n / 100 : n;
+  const formatter = numberFormatter(options.locale, {
     style: "percent",
     ...(options.digits === undefined ? { maximumFractionDigits: 1 } : null),
     ...numberOptions(options),
-  }).format(ratio);
+  });
+  return formatWithMinus(formatter, ratio, options.minus);
 }
 
 /* ── Dates ─────────────────────────────────────────────────────────────────── */
@@ -327,13 +416,9 @@ type WithoutLocale<T> = Omit<T, "locale"> & { locale?: string };
 export interface KitFormat {
   /** The locale they format in — the provider's, or `undefined` (runtime default). */
   locale: string | undefined;
-  formatNumber: (value: number | null | undefined, options?: WithoutLocale<FormatNumberOptions>) => string;
-  formatMoney: (
-    value: number | null | undefined,
-    currency: string,
-    options?: WithoutLocale<FormatMoneyOptions>,
-  ) => string;
-  formatPercent: (value: number | null | undefined, options?: WithoutLocale<FormatPercentOptions>) => string;
+  formatNumber: (value: FormattableNumber, options?: WithoutLocale<FormatNumberOptions>) => string;
+  formatMoney: (value: FormattableNumber, currency: string, options?: WithoutLocale<FormatMoneyOptions>) => string;
+  formatPercent: (value: FormattableNumber, options?: WithoutLocale<FormatPercentOptions>) => string;
   formatDate: (
     value: DateInput,
     style?: FormatDateStyle | Intl.DateTimeFormatOptions,

package/src/lib/minus.ts

@@ -0,0 +1,40 @@
+/**
+ * The one minus sign (0.49, KIT-1). `Intl.NumberFormat` writes a negative with the
+ * HYPHEN-MINUS (U+002D) in nearly every locale — en, de-CH, fr, it, es, hu, zh — and
+ * with the typographic MINUS SIGN (U+2212) in a few (sv, fi). The kit prints U+2212
+ * everywhere, as `SignedAmount` always has: it is as wide as "+" and the tabular
+ * digits, so a column of signed figures lines up, and it does not break a line the way
+ * a hyphen may.
+ *
+ * `"ascii"` is the other way round, for text a machine reads back — a CSV, the
+ * clipboard: every minus becomes U+002D, whatever the locale wrote, so `Number()` and a
+ * spreadsheet parse it.
+ */
+export type MinusStyle = "typographic" | "ascii";
+
+/** U+2212 MINUS SIGN. */
+export const TYPOGRAPHIC_MINUS = "\u2212";
+
+/** The parts `formatToParts` writes a minus in (the exponent's, under `notation:
+ *  "scientific"`, too). */
+const MINUS_PARTS: ReadonlySet<string> = new Set(["minusSign", "exponentMinusSign"]);
+
+/**
+ * `formatter.format(value)` with every minus sign in `minus` style. Only the parts
+ * `Intl` marks as a minus are touched — a hyphen inside a currency's name
+ * ("Bosnia-Herzegovina convertible marks") stays — and only when the text holds the
+ * other sign at all, so a positive figure costs no `formatToParts`.
+ */
+export function formatWithMinus(
+  formatter: Intl.NumberFormat,
+  value: number,
+  minus: MinusStyle = "typographic",
+): string {
+  const text = formatter.format(value);
+  const [wanted, other] = minus === "ascii" ? ["-", TYPOGRAPHIC_MINUS] : [TYPOGRAPHIC_MINUS, "-"];
+  if (!text.includes(other)) return text;
+  return formatter
+    .formatToParts(value)
+    .map((part) => (MINUS_PARTS.has(part.type) ? wanted : part.value))
+    .join("");
+}

package/src/lib/status-tone.ts

@@ -0,0 +1,43 @@
+/**
+ * What a status means, in five domain-free words, and the tone that says it (0.49 KIT-8).
+ *
+ * Every app paints its statuses by hand: kastlan's ~15 enums each carry a Chip tone
+ * (`shared/enums/enum-meta.ts`), keksdose's job and transaction states theirs, and the
+ * same meaning drifted into different colours — "unpaid" amber in one table, brand in
+ * the next. The kind is the decision ("does the reader have to act?"), the tone only
+ * its colour, so an app maps each of its states to a kind once and the colours agree
+ * everywhere:
+ *
+ * | kind | tone | for |
+ * |---|---|---|
+ * | `good` | `success` | done, settled, healthy: nothing to do (Paid, Verified) |
+ * | `attention` | `warning` | needs a look or an action soon, nothing broken yet (Unpaid, Due soon) |
+ * | `problem` | `danger` | something is wrong or late and needs action now (Overdue, Failed) |
+ * | `active` | `info` | in progress or current, neither good nor bad (Running, Sent) |
+ * | `inactive` | `neutral` | over, paused or not started: out of the way (Draft, Archived) |
+ *
+ * `brand` is not a status tone: it is the app's own colour, and a status in it reads as
+ * "this is the app" rather than as a state. Money (`income` / `expense`) is not one
+ * either: it says which way an amount flows, not how a record stands.
+ */
+export type StatusKind = "good" | "attention" | "problem" | "active" | "inactive";
+
+/** The tones a {@link StatusKind} maps to — a subset of `ChipTone` and `StatusDotTone`. */
+export type StatusTone = "success" | "warning" | "danger" | "info" | "neutral";
+
+/** The five kinds, in the order the table above lists them. */
+export const STATUS_KINDS: readonly StatusKind[] = ["good", "attention", "problem", "active", "inactive"];
+
+const TONES: Readonly<Record<StatusKind, StatusTone>> = {
+  good: "success",
+  attention: "warning",
+  problem: "danger",
+  active: "info",
+  inactive: "neutral",
+};
+
+/** The tone for a status kind: good → success, attention → warning, problem → danger,
+ *  active → info, inactive → neutral. See {@link StatusKind}. */
+export function statusTone(kind: StatusKind): StatusTone {
+  return TONES[kind];
+}

package/src/settings/settings-layout.tsx

@@ -323,6 +323,7 @@ export function SettingsLayout<G extends string>({
       <div className={pageClass} data-settings-view="group">
         <PageHeader
           size="compact"
+          documentTitle={false}
           title={open.title}
           description={open.help}
           breadcrumbs={
@@ -347,7 +348,7 @@ export function SettingsLayout<G extends string>({
       </div>
     ) : (
       <div className={pageClass} data-settings-view="list">
-        <PageHeader size="compact" title={pageTitle} />
+        <PageHeader size="compact" documentTitle={false} title={pageTitle} />
         {searchField}
         {searching ? (
           results
@@ -409,7 +410,7 @@ export function SettingsLayout<G extends string>({
       );
     body = (
       <div className={pageClass} data-settings-view="desktop">
-        <PageHeader size="compact" title={pageTitle} />
+        <PageHeader size="compact" documentTitle={false} title={pageTitle} />
         {searchField}
         <div className="md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6">
           {withSidebarFooter(