@eifi1/ui-kit 0.48.2 → 0.50.0

package/src/components/treemap.tsx

@@ -12,12 +12,14 @@ import { useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
 import type { ComponentProps, ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from "react";
 import { Treemap as RechartsTreemap } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } from "./chart";
-import { PALETTE_HEX, textOn } from "../theme/chart-palette";
+import { PALETTE_HEX, PALETTE_SIZE, textOn } from "../theme/chart-palette";
+import { resolveChartColor, useChartEdge } from "./chart-edge";
 import { parseHex } from "../theme/color";
 import { dirOf, type Direction } from "../lib/direction";
 import { cn } from "../lib/cn";
 import { useTextSize } from "../theme/text-size";
 import { chartHeightProps, type ChartHeight } from "./chart-height";
+import { formatWithMinus } from "../lib/minus";
 
 /**
  * One tile.
@@ -39,7 +41,9 @@ export interface TreemapNode {
   value: number;
   /** Overrides the by-index palette colour for this tile — e.g. to paint every child
    *  in its parent group's colour, so the groups stay legible in one picture. A
-   *  concrete `#rrggbb` or a bare `var(--chart-N)` keeps the label ink measured;
+   *  concrete `#rrggbb` or a bare `var(--chart-N)` keeps the label ink measured — so
+   *  does `CHART_ROLES.other` (`var(--chart-muted)`), the colour for a "rest" bucket,
+   *  which should not wrap round to a hue the reader matches to a real node;
    *  anything else (another var, a `color-mix()`) gets `currentColor` ink, because
    *  there is nothing to measure — set `labelColor` then. */
   fill?: string;
@@ -101,7 +105,8 @@ export interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
   maxTiles?: number;
   /**
    * The categorical ramp tiles take by index, as concrete hex. Default: the page's
-   * live `--chart-1…9` tokens (see `useChartTokenHex`). Pass one when the host
+   * live `--chart-1…8` tokens (see `useChartTokenHex`), cycled after eight like
+   * `paletteFor` (0.49). Pass one when the host
    * already holds the active palette — e.g. `createPaletteStore`'s `useChartHex()` —
    * so a caller colouring a legend beside the map is guaranteed the same list.
    */
@@ -119,7 +124,7 @@ export interface TreemapProps extends Omit<ComponentPropsWithoutRef<"div">, "chi
 // re-read whenever <html>'s class or style changes — which is exactly when a theme
 // toggle or a palette switch lands.
 
-const CHART_TOKENS = 9;
+const CHART_TOKENS = PALETTE_SIZE;
 
 /** The resolved ramp, joined into ONE string so `useSyncExternalStore` compares a
  *  primitive: a fresh array per read would never be `Object.is`-equal to the last and
@@ -163,9 +168,12 @@ const CHART_TOKEN_REF = /^var\(\s*--chart-(\d+)\s*\)$/;
 function measurableFill(fill: string, tokens: readonly string[]): string | null {
   if (parseHex(fill)) return fill;
   const m = CHART_TOKEN_REF.exec(fill.trim());
-  if (!m) return null;
-  const hex = tokens[Number(m[1]) - 1];
-  return hex && parseHex(hex) ? hex : null;
+  const hex = m ? tokens[Number(m[1]) - 1] : undefined;
+  if (hex && parseHex(hex)) return hex;
+  // Any other bare token the page declares — `var(--chart-muted)` for a rest bucket,
+  // `var(--chart-9)`, a money colour — read off <html> as it resolves.
+  if (typeof document === "undefined") return null;
+  return resolveChartColor(fill, getComputedStyle(document.documentElement));
 }
 
 // ── Tile ──────────────────────────────────────────────────────────────────
@@ -241,6 +249,7 @@ export function TreemapCell({
   // Before the early return: a hook has to run on every render of the cell.
   const tokenHex = useChartTokenHex();
   const { scale } = useTextSize();
+  const edgeFor = useChartEdge();
   // Depth 0 is recharts' synthetic root, which spans the whole chart.
   if (!depth) return null;
   // Whole pixels: a rect on a half pixel renders its edge across two half-lit
@@ -252,6 +261,9 @@ export function TreemapCell({
   const tileFill = fill ?? "var(--chart-1)";
   const measured = measurableFill(tileFill, tokenHex);
   const ink = labelColor ?? (measured ? textOn(measured) : "currentColor");
+  // A tile in a hue under 3:1 against the card gets a 1px ink edge inside the gutter
+  // (WCAG 1.4.11, anyplot's rule); a hue that clears it stays bare.
+  const edge = measured ? edgeFor(measured) : undefined;
   // The halo only on an OPAQUE fill we could measure. A translucent fill (a
   // `color-mix(… transparent)`) composited twice — once as the tile, once as the halo
   // over it — draws a darker ring round every glyph, which read as doubled text on the
@@ -310,6 +322,20 @@ export function TreemapCell({
         strokeWidth={2}
         rx={3}
       />
+      {edge && pw > 3 && ph > 3 && (
+        <rect
+          data-edge=""
+          x={px + 1.5}
+          y={py + 1.5}
+          width={pw - 3}
+          height={ph - 3}
+          fill="none"
+          stroke={edge}
+          strokeWidth={1}
+          rx={2}
+          style={{ pointerEvents: "none" }}
+        />
+      )}
       {label != null && (
         <text
           // A plain attribute, so the host's `[data-private]` rule reaches an SVG
@@ -437,7 +463,7 @@ export function Treemap({
   const total = nodes.reduce((acc, n) => acc + n.size, 0);
   const format = (v: number): ReactNode => {
     const share = total > 0 ? v / total : undefined;
-    return valueFormatter ? valueFormatter(v, share) : DEFAULT_NUMBER.format(v);
+    return valueFormatter ? valueFormatter(v, share) : formatWithMinus(DEFAULT_NUMBER, v);
   };
   const Content = redactNames ? RedactedTooltipContent : ChartTooltipContent;
   return (

package/src/components/use-table-state.ts

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { SetStateAction } from "react";
+import * as ReactRouter from "react-router";
 import { useLocation, useSearchParams } from "react-router";
 import { useKitTableStorageKeyPrefix } from "../i18n/kit-labels";
 import { readStored, writeStored } from "../lib/safe-storage";
@@ -103,6 +104,62 @@ function urlKeys(prefix = ""): UrlKeys {
   };
 }
 
+/** What a table reads and writes the URL through: react-router's, or none. */
+interface TableSearch {
+  searchParams: URLSearchParams;
+  setSearchParams: ReturnType<typeof useSearchParams>[1];
+  locationState: unknown;
+}
+
+function useRouterSearch(): TableSearch {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const location = useLocation();
+  return { searchParams, setSearchParams, locationState: location.state };
+}
+
+const NO_ROUTER_SEARCH: TableSearch = {
+  searchParams: new URLSearchParams(),
+  setSearchParams: () => {},
+  locationState: null,
+};
+function useNoRouterSearch(): TableSearch {
+  return NO_ROUTER_SEARCH;
+}
+
+/**
+ * `useInRouterContext`, read off the namespace inside a `try` like
+ * use-search-param-state's probe: a test's `vi.mock("react-router", () => ({ … }))`
+ * without it throws on the read. Missing, a table assumes a Router, as before 0.49.
+ */
+function readInRouterContext(): () => boolean {
+  try {
+    return (ReactRouter as unknown as { useInRouterContext?: () => boolean }).useInRouterContext ?? (() => true);
+  } catch {
+    return () => true;
+  }
+}
+const useInRouterContext = readInRouterContext();
+
+/**
+ * The URL access a table needs (0.49, KIT-3). Without `urlSync` a table needs no Router:
+ * before 0.49 it called `useSearchParams()` unconditionally and threw outside one even
+ * with URL sync off. With `urlSync` and no Router, a development build throws a message
+ * that names the fix; a production build keeps the view in local state rather than
+ * crash the page. Whether a Router is around does not change during a table's life, so
+ * which hook runs is stable from render to render.
+ */
+function useTableSearch(urlSync: boolean, owner: string): TableSearch {
+  const inRouter = useInRouterContext();
+  if (!inRouter && urlSync && import.meta.env?.DEV) {
+    throw new Error(
+      `${owner} urlSync requires a Router: render it inside a react-router Router ` +
+        "(BrowserRouter, a data router or a MemoryRouter), or leave urlSync off.",
+    );
+  }
+  const useSearch = inRouter ? useRouterSearch : useNoRouterSearch;
+  return useSearch();
+}
+
 /** `urlSync` split into "is it on" and "under which prefix". */
 function resolveTableUrlSync(urlSync: TableUrlSync | undefined): { enabled: boolean; prefix: string } {
   if (!urlSync) return { enabled: false, prefix: "" };
@@ -295,10 +352,9 @@ export function useTableState<T>({
 }) {
   const { enabled: urlSync, prefix: urlPrefix } = resolveTableUrlSync(urlSyncOption);
   const keys = useMemo(() => urlKeys(urlPrefix), [urlPrefix]);
-  // Called unconditionally (a Router is required either way — see src/data-table.ts),
-  // and the SAME pair is used to read and to write; see `readTableUrlState`.
-  const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
+  // The SAME pair is used to read and to write; see `readTableUrlState`. No Router is
+  // needed without `urlSync` (0.49, KIT-3; see `useTableSearch`).
+  const { searchParams, setSearchParams, locationState } = useTableSearch(urlSync, "DataTable");
   // Read URL once on mount so URL-encoded views (e.g. shared links, deep links from
   // other pages) populate initial state. After mount, state is local.
   const [urlInitial] = useState<TableUrlState>(() =>
@@ -436,7 +492,7 @@ export function useTableState<T>({
     // `columns` is deliberately not a dependency and does not need to be: the
     // signature above is computed from it, so a column set that would produce a
     // different address produces a different signature first.
-    writeUrlState(setSearchParams, columns, sorts, filters, pageSize, page, defaultPageSize, undefined, location.state, keys);
+    writeUrlState(setSearchParams, columns, sorts, filters, pageSize, page, defaultPageSize, undefined, locationState, keys);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [urlSync, urlSig]);
 
@@ -620,8 +676,7 @@ export function useTableUrlState<T>({
   const urlSync = resolved.enabled;
   const urlPrefix = urlPrefixOption ?? resolved.prefix;
   const keys = useMemo(() => urlKeys(urlPrefix), [urlPrefix]);
-  const [searchParams, setSearchParams] = useSearchParams();
-  const location = useLocation();
+  const { searchParams, setSearchParams, locationState } = useTableSearch(urlSync, "useTableUrlState");
   const [state, setState] = useState<OwnedState>(() => {
     const url = urlSync ? readTableUrlState(searchParams, columns, urlPrefix) : {};
     return {
@@ -653,7 +708,7 @@ export function useTableUrlState<T>({
       state.page,
       defaultPageSize,
       manageSearch ? state.search : undefined,
-      location.state,
+      locationState,
       keys,
     );
     // Keyed on the signature, which is computed from everything the write reads — see

package/src/data-table.ts

@@ -1,8 +1,8 @@
 // `@eifi1/ui-kit/data-table` — the table suite.
 //
-// A re-slicing of the main barrel, not a new API. This entry point requires
-// `react-router`: DataTable calls useSearchParams unconditionally, above any `urlSync`
-// branch, so a Router is needed even with URL sync switched off.
+// A re-slicing of the main barrel, not a new API. This entry point imports
+// `react-router` (a peer dependency), but since 0.49 (KIT-3) a Router is needed only for
+// a table with `urlSync`: without it DataTable keeps its view in local state alone.
 export * from "./components/data-table-labels";
 export * from "./components/data-table-sort";
 export * from "./components/data-table-filters";

package/src/demo/demo-banner.tsx

@@ -116,7 +116,7 @@ export function DemoBanner({
         <>
           {!collapsed && (
             <>
-              <Button href={accessLink.href} variant="brand" size="sm">
+              <Button href={accessLink.href} variant="accent" size="sm">
                 {accessLink.label}
               </Button>
               <Button href={signInHref} variant="secondary" size="sm">

package/src/demo/demo-ended.tsx

@@ -75,7 +75,7 @@ export function DemoEnded({
       </p>
       {children}
       <div className="mt-4 flex w-full flex-col gap-2 sm:w-auto sm:flex-row sm:flex-wrap sm:justify-center">
-        <Button href={restartHref} variant="brand">
+        <Button href={restartHref} variant="accent">
           {labels.restart}
         </Button>
         <Button href={accessLink.href} variant="secondary">

package/src/demo/demo-start.tsx

@@ -139,7 +139,7 @@ export function DemoStart<T>({
       </div>
       {refusal !== null && (
         <div className="flex flex-wrap justify-center gap-3">
-          <Button href={accessLink.href} variant="brand">
+          <Button href={accessLink.href} variant="accent">
             {accessLink.label}
           </Button>
           <Button href={backHref} variant="secondary">

package/src/feedback/feedback-inbox.tsx

@@ -469,7 +469,7 @@ export function FeedbackNoteEditor({
         <Button variant="ghost" onClick={onCancel}>
           {cancelLabel}
         </Button>
-        <Button variant="brand" disabled={pending || blank} commit={commit} onClick={submit}>
+        <Button variant="accent" disabled={pending || blank} commit={commit} onClick={submit}>
           {saveLabel}
         </Button>
       </div>

package/src/hooks/use-dismiss.ts

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useSyncExternalStore } from "react";
 import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from "react";
 import { isComposing } from "../lib/ime";
 
@@ -60,6 +60,9 @@ import { isComposing } from "../lib/ime";
 /** A layer's handler, read through a ref so the stack holds one stable entry per open. */
 interface Layer {
   escape: (e: KeyboardEvent) => void;
+  /** Whether it covers the page — a dialog, a sheet, a popover, a list — rather than
+   *  annotating it (a tooltip). Counted by {@link useOverlayOpen}. */
+  overlay: boolean;
 }
 
 /** What {@link useDismissLayer} hands back: its layer while open, for
@@ -114,11 +117,13 @@ function push(layer: Layer): void {
     document.addEventListener("keydown", onBubble);
   }
   layers.push(layer);
+  if (layer.overlay) notifyOverlays();
 }
 
 function pop(layer: Layer): void {
   const at = layers.indexOf(layer);
   if (at >= 0) layers.splice(at, 1);
+  if (at >= 0 && layer.overlay) notifyOverlays();
   if (layers.length > 0) return;
   document.removeEventListener("keydown", onCapture, true);
   document.removeEventListener("keydown", onBubble);
@@ -135,7 +140,11 @@ function pop(layer: Layer): void {
  * read live, so it need not be memoised; the layer is pushed and popped only when
  * `open` flips. The layer it returns is for the owner's {@link runOwnKeyDown}.
  */
-export function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => void): DismissLayer {
+export function useDismissLayer(
+  open: boolean,
+  onEscape: (e: KeyboardEvent) => void,
+  { overlay = true }: { overlay?: boolean } = {},
+): DismissLayer {
   const handlerRef = useRef(onEscape);
   const layerRef = useRef<Layer | null>(null);
   // Written in an effect, not during render, so it satisfies react-hooks/refs: a
@@ -148,17 +157,47 @@ export function useDismissLayer(open: boolean, onEscape: (e: KeyboardEvent) => v
   });
   useEffect(() => {
     if (!open || typeof document === "undefined") return;
-    const layer: Layer = { escape: (e) => handlerRef.current(e) };
+    const layer: Layer = { escape: (e) => handlerRef.current(e), overlay };
     layerRef.current = layer;
     push(layer);
     return () => {
       pop(layer);
       layerRef.current = null;
     };
-  }, [open]);
+  }, [open, overlay]);
   return layerRef;
 }
 
+/*
+ * Whether an overlay is open (0.49 KIT-11): every layer on the stack but a tooltip's is a
+ * dialog, a sheet, a popover, a hover menu or a list covering part of the page, so the
+ * stack is also the one place that knows. The floating launchers (`hideWhenOverlay`) step
+ * aside while one is open instead of floating over it or beside it.
+ */
+const overlayListeners = new Set<() => void>();
+
+function notifyOverlays(): void {
+  for (const listener of overlayListeners) listener();
+}
+
+function subscribeOverlays(listener: () => void): () => void {
+  overlayListeners.add(listener);
+  return () => {
+    overlayListeners.delete(listener);
+  };
+}
+
+function anyOverlayOpen(): boolean {
+  return layers.some((layer) => layer.overlay);
+}
+
+/** True while a kit dialog, sheet, popover, hover menu or list is open (any layer of the
+ *  Escape stack but a tooltip's). Internal. */
+export function useOverlayOpen(enabled = true): boolean {
+  const open = useSyncExternalStore(subscribeOverlays, anyOverlayOpen, () => false);
+  return enabled && open;
+}
+
 /**
  * For a layer's own element, in its `onKeyDown`: hands an Escape on its way up to the
  * topmost layer — this one, unless something opened over it without taking focus (a

package/src/hooks/use-document-title.ts

@@ -0,0 +1,31 @@
+import { useEffect } from "react";
+import { useKitDocumentTitle } from "../i18n/kit-labels";
+import { DEFAULT_DOCUMENT_TITLE_FORMAT, formatDocumentTitle } from "../lib/document-title";
+
+/**
+ * Writes the window's title (`document.title`) while the calling component is mounted,
+ * and puts back the title it found when it unmounts (0.49 KIT-9).
+ *
+ * `parts` are positional: `[page, section, app]`. The app falls back to the provider's
+ * `appName`, the format to the provider's `documentTitleFormat` (default
+ * "{page} · {section} · {app}"); a missing part drops with its separator
+ * ({@link formatDocumentTitle}). Parts that are ALL empty write nothing — the provider's
+ * app alone is not a page's title.
+ *
+ * `PageHeader` calls it for its `h1` (`documentTitle`); call it yourself for a page
+ * without one.
+ */
+export function useDocumentTitle(parts: ReadonlyArray<string | null | undefined | false>): void {
+  const { format, appName } = useKitDocumentTitle();
+  const [page, section, app] = parts.map((p) => (typeof p === "string" && p.trim() !== "" ? p : undefined));
+  const any = parts.some((p) => typeof p === "string" && p.trim() !== "");
+  const title = any ? formatDocumentTitle(format ?? DEFAULT_DOCUMENT_TITLE_FORMAT, { page, section, app: app ?? appName }) : null;
+  useEffect(() => {
+    if (title === null || title === "") return;
+    const before = document.title;
+    document.title = title;
+    return () => {
+      document.title = before;
+    };
+  }, [title]);
+}

package/src/i18n/defaults.ts

@@ -14,6 +14,7 @@ import {
 import { DEFAULT_WIZARD_LABELS } from "../wizard/wizard-labels";
 import { DEFAULT_TOUR_LABELS } from "../tour/tour-labels";
 import { DEFAULT_TOUR_CATALOGUE_LABELS } from "../tour/tour-catalogue-labels";
+import { DEFAULT_TOUR_GUIDE_LABELS } from "../tour/tour-guide-labels";
 import { DEFAULT_COMMAND_PALETTE_LABELS } from "../search/command-palette-labels";
 import { DEFAULT_GLOBAL_SEARCH_LABELS } from "../search/global-search-labels";
 import { DEFAULT_SERIES_CHART_LABELS } from "../components/series-chart-labels";
@@ -173,6 +174,7 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   wizard: DEFAULT_WIZARD_LABELS,
   tour: DEFAULT_TOUR_LABELS,
   tourCatalogue: DEFAULT_TOUR_CATALOGUE_LABELS,
+  tourGuide: DEFAULT_TOUR_GUIDE_LABELS,
   commandPalette: DEFAULT_COMMAND_PALETTE_LABELS,
   globalSearch: DEFAULT_GLOBAL_SEARCH_LABELS,
   seriesChart: DEFAULT_SERIES_CHART_LABELS,

package/src/i18n/german.ts

@@ -556,6 +556,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       theme: "Theme wechseln",
       palette: "Darstellungsvorlage",
       language: "Sprache",
+      languageCurrent: (name) => `Sprache wählen, aktuell: ${name}`,
       switchRole: "Rolle wechseln",
       role: (value) => `Rolle: ${value}`,
     },
@@ -633,6 +634,19 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       awaitClickHint: "Klicken Sie auf das hervorgehobene Element, um fortzufahren",
       awaitInputHint: "Geben Sie im hervorgehobenen Feld einen Wert ein, um fortzufahren", // 0.46: TourStep.awaitInput (keksdose live #436).
       step: (current, total) => `${n(current)} / ${n(total)}`,
+      // 0.50: guided form tours (docs/tours-harmonization.md §11).
+      leaveEmpty: "Leer lassen",
+      optional: "Optional",
+      gateHint: "Füllen Sie das hervorgehobene Feld aus, um fortzufahren",
+      gateReady: "Bereit. Drücken Sie Weiter oder die Eingabetaste, um fortzufahren.",
+      awaitGateHint: "Speichern Sie, um fortzufahren",
+      awaitGateRefused: "Das ist noch nicht gespeichert. Prüfen Sie das Formular und versuchen Sie es erneut.",
+      backToStep: (title) => `Zurück zu „${title}“`,
+    },
+    // 0.50: the form's "Guide me" (TourGuideButton, docs/tours-harmonization.md §11).
+    tourGuide: {
+      label: "Schritt für Schritt",
+      description: "Führt Sie Feld für Feld durch dieses Formular",
     },
     // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page. keksdose's reviewed words.
     tourCatalogue: {
@@ -1929,10 +1943,13 @@ export function germanLabels(numberLocale: string): UiKitLabels {
     rowActions: {
       actions: "Aktionen",
       actionsFor: (name) => `Aktionen für ${name}`,
+      confirmTitle: (action, name) => (name ? `${action}: «${name}»?` : `${action}?`),
+      confirmBody: "Das lässt sich nicht rückgängig machen.",
     },
     appShellMore: {
       more: "Mehr",
       moreTitle: "Weitere Seiten",
+      overview: "Übersicht",
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words. "Verwaltung"
     // as settings §5 names the page; "mit Administratorrechten" rather than "für

package/src/i18n/kit-labels.tsx

@@ -26,6 +26,7 @@ import type { TabsLabels } from "../components/tabs";
 import type { WizardLabels } from "../wizard/types";
 import type { TourLabels } from "../tour/tour";
 import type { TourCatalogueLabels } from "../tour/tour-catalogue-labels";
+import type { TourGuideLabels } from "../tour/tour-guide-labels";
 import type { CommandPaletteLabels } from "../search/command-palette";
 import type { GlobalSearchLabels } from "../search/global-search";
 import type { MonthPickerLabels } from "../components/month-picker";
@@ -283,6 +284,9 @@ export interface TopBarLabels {
   theme: string;
   palette: string;
   language: string;
+  /** 0.49 KIT-10: the language menu's trigger, given the current language's name —
+   *  "Choose language, current: Deutsch". */
+  languageCurrent: (name: string) => string;
   switchRole: string;
   /** The role switcher's tooltip, given the active role's name. */
   role: (value: string) => string;
@@ -332,6 +336,8 @@ export interface UiKitLabels {
   tour: TourLabels;
   /** 0.43.0: the tours page — `TourCatalogue` and its card (docs/tours-harmonization.md §3). */
   tourCatalogue: TourCatalogueLabels;
+  /** 0.50: the form's "Guide me" — `TourGuideButton` (docs/tours-harmonization.md §11). */
+  tourGuide: TourGuideLabels;
   commandPalette: CommandPaletteLabels;
   globalSearch: GlobalSearchLabels;
   seriesChart: SeriesChartLabels;
@@ -557,6 +563,8 @@ interface KitI18n {
   formatDate?: KitDateFormatter;
   tableStorageKeyPrefix?: string;
   timeZone?: string;
+  documentTitleFormat?: string;
+  appName?: string;
 }
 
 /** What a {@link KitDateFormatter} is told about the date it is formatting. */
@@ -699,6 +707,25 @@ export interface UiKitProviderProps {
    * it names in every zone). Left out, timestamps follow the device, as before.
    */
   timeZone?: string;
+  /**
+   * 0.49 KIT-9: how `useDocumentTitle` and every `PageHeader`'s `h1` write the window's
+   * title, from `{page}`, `{section}` and `{app}`. Default
+   * `"{page} · {section} · {app}"` (`DEFAULT_DOCUMENT_TITLE_FORMAT`); a missing part
+   * drops with its separator.
+   */
+  documentTitleFormat?: string;
+  /** 0.49 KIT-9: the app's name, the `{app}` of the window's title ("Kastlan"). Left
+   *  out, titles end at the page or section. */
+  appName?: string;
+  /**
+   * 0.49 KIT-1b: while a person copies a selection in the page, a U+2212 minus standing
+   * before a number ("−CHF 1,250.50") goes to the clipboard as "-", in `text/plain` and
+   * `text/html` (what Excel pastes), so a spreadsheet reads a number; the page keeps "−".
+   * A copy out of an input, a textarea or an editable element is left alone. Installed
+   * once per document, by the first provider that has it on. Default `true`; `false` on
+   * the outermost provider leaves the clipboard to the browser.
+   */
+  copyAsciiMinus?: boolean;
   children: ReactNode;
 }
 
@@ -719,6 +746,9 @@ export function UiKitProvider({
   formatDate,
   tableStorageKeyPrefix,
   timeZone,
+  documentTitleFormat,
+  appName,
+  copyAsciiMinus = true,
   children,
 }: UiKitProviderProps) {
   const outer = useContext(KitI18nContext);
@@ -732,10 +762,25 @@ export function UiKitProvider({
       formatDate: formatDate ?? outer.formatDate,
       tableStorageKeyPrefix: tableStorageKeyPrefix ?? outer.tableStorageKeyPrefix,
       timeZone: timeZone ?? outer.timeZone,
+      documentTitleFormat: documentTitleFormat ?? outer.documentTitleFormat,
+      appName: appName ?? outer.appName,
     }),
-    [outer, labels, locale, weekStartsOn, linkComponent, chartTooltipPlacement, formatDate, tableStorageKeyPrefix, timeZone],
+    [
+      outer,
+      labels,
+      locale,
+      weekStartsOn,
+      linkComponent,
+      chartTooltipPlacement,
+      formatDate,
+      tableStorageKeyPrefix,
+      timeZone,
+      documentTitleFormat,
+      appName,
+    ],
   );
   useTableViewsJoin(value.tableStorageKeyPrefix ?? DEFAULT_TABLE_STORAGE_KEY_PREFIX);
+  useClipboardMinus(copyAsciiMinus);
   return <KitI18nContext.Provider value={value}>{children}</KitI18nContext.Provider>;
 }
 
@@ -773,6 +818,30 @@ function useTableViewsJoin(prefix: string): void {
   }, [prefix]);
 }
 
+/**
+ * The copy handler (lib/clipboard-minus, 0.49 KIT-1b), through a literal `import()` for
+ * the reason {@link useTableViewsJoin} gives: a catalogue may reach nothing outside i18n/.
+ * It is in place a microtask after the mount — long before a person selects and copies.
+ */
+function useClipboardMinus(on: boolean): void {
+  useEffect(() => {
+    if (!on || typeof document === "undefined") return;
+    let uninstall: (() => void) | undefined;
+    let gone = false;
+    import("../lib/clipboard-minus").then(
+      ({ installClipboardMinus }) => {
+        if (!gone) uninstall = installClipboardMinus(document);
+      },
+      // Not loaded: copying works as the browser does it.
+      () => undefined,
+    );
+    return () => {
+      gone = true;
+      uninstall?.();
+    };
+  }, [on]);
+}
+
 function isRecord(v: unknown): v is Record<string, unknown> {
   return typeof v === "object" && v !== null && !Array.isArray(v);
 }
@@ -892,6 +961,15 @@ export function useKitTimeZone(): string | undefined {
   return useContext(KitI18nContext).timeZone;
 }
 
+/** The nearest provider's `documentTitleFormat` and `appName`, or `undefined` each —
+ *  what `useDocumentTitle` writes with (the format's default is
+ *  `DEFAULT_DOCUMENT_TITLE_FORMAT`, applied there: this module reaches nothing outside
+ *  i18n/). */
+export function useKitDocumentTitle(): { format: string | undefined; appName: string | undefined } {
+  const { documentTitleFormat, appName } = useContext(KitI18nContext);
+  return { format: documentTitleFormat, appName };
+}
+
 /** {@link DEFAULT_FILE_LABELS}, but formatting in the provider's locale. */
 export function useKitFileLabels(prop?: Partial<FileLabels>): FileLabels {
   const locale = useKitLocale();

package/src/i18n/locales/es.ts

@@ -543,6 +543,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       theme: "Cambiar de tema",
       palette: "Ajuste de apariencia",
       language: "Idioma",
+      languageCurrent: (name) => `Elegir idioma, actual: ${name}`,
       switchRole: "Cambiar de rol",
       role: (value) => `Rol: ${value}`,
     },
@@ -616,6 +617,19 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       awaitClickHint: "Haga clic en el elemento resaltado para continuar",
       awaitInputHint: "Introduzca un valor en el campo resaltado para continuar", // 0.46: TourStep.awaitInput (keksdose live #436).
       step: (current, total) => `${n(current)} / ${n(total)}`,
+      // 0.50: guided form tours (docs/tours-harmonization.md §11).
+      leaveEmpty: "Dejar vacío",
+      optional: "Opcional",
+      gateHint: "Rellene el campo resaltado para continuar",
+      gateReady: "Listo. Pulse Siguiente o Intro para continuar.",
+      awaitGateHint: "Guarde para continuar",
+      awaitGateRefused: "Todavía no se ha guardado. Revise el formulario e inténtelo de nuevo.",
+      backToStep: (title) => `Volver a «${title}»`,
+    },
+    // 0.50: the form's "Guide me" (TourGuideButton, docs/tours-harmonization.md §11).
+    tourGuide: {
+      label: "Guíeme",
+      description: "Le guía por este formulario, campo a campo",
     },
     // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page.
     tourCatalogue: {
@@ -1869,10 +1883,13 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
     rowActions: {
       actions: "Acciones",
       actionsFor: (name) => `Acciones de ${name}`,
+      confirmTitle: (action, name) => (name ? `¿${action} «${name}»?` : `¿${action}?`),
+      confirmBody: "Esta acción no se puede deshacer.",
     },
     appShellMore: {
       more: "Más",
       moreTitle: "Más páginas",
+      overview: "Resumen",
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words. "Usted",
     // as the rest of the catalogue.