@eifi1/ui-kit 0.48.2 → 0.50.0

package/src/i18n/locales/fr.ts

@@ -551,6 +551,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       theme: "Changer de thème",
       palette: "Préréglage d’apparence",
       language: "Langue",
+      languageCurrent: (name) => `Choisir la langue, actuelle\u00a0: ${name}`,
       switchRole: "Changer de rôle",
       role: (value) => `Rôle\u00a0: ${value}`,
     },
@@ -631,6 +632,19 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       awaitClickHint: "Cliquez sur l’élément mis en évidence pour continuer",
       awaitInputHint: "Saisissez une valeur dans le champ mis en évidence pour continuer", // 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: "Laisser vide",
+      optional: "Facultatif",
+      gateHint: "Remplissez le champ mis en évidence pour continuer",
+      gateReady: "Prêt. Appuyez sur Suivant ou sur Entrée pour continuer.",
+      awaitGateHint: "Enregistrez pour continuer",
+      awaitGateRefused: "Ce n’est pas encore enregistré. Vérifiez le formulaire et réessayez.",
+      backToStep: (title) => `Retour à «\u202f${title}\u202f»`,
+    },
+    // 0.50: the form's "Guide me" (TourGuideButton, docs/tours-harmonization.md §11).
+    tourGuide: {
+      label: "Me guider",
+      description: "Vous guide dans ce formulaire, champ par champ",
     },
     // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page. keksdose's reviewed words.
     tourCatalogue: {
@@ -1909,10 +1923,13 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
     rowActions: {
       actions: "Actions",
       actionsFor: (name) => `Actions pour ${name}`,
+      confirmTitle: (action, name) => (name ? `${action} «\u00a0${name}\u00a0»\u00a0?` : `${action}\u00a0?`),
+      confirmBody: "Cette action est irréversible.",
     },
     appShellMore: {
       more: "Plus",
       moreTitle: "Autres pages",
+      overview: "Vue d’ensemble",
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words.
     mailTestCard: {

package/src/i18n/locales/hu.ts

@@ -541,6 +541,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       theme: "Téma váltása",
       palette: "Megjelenési séma",
       language: "Nyelv",
+      languageCurrent: (name) => `Nyelv kiválasztása, jelenlegi: ${name}`,
       switchRole: "Szerepkör váltása",
       role: (value) => `Szerepkör: ${value}`,
     },
@@ -618,6 +619,19 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       awaitClickHint: "A folytatáshoz kattintson a kiemelt elemre",
       awaitInputHint: "A folytatáshoz adjon meg egy értéket a kiemelt mezőben", // 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: "Hagyja üresen",
+      optional: "Nem kötelező",
+      gateHint: "A folytatáshoz töltse ki a kiemelt mezőt",
+      gateReady: "Kész. A folytatáshoz nyomja meg a Tovább gombot vagy az Entert.",
+      awaitGateHint: "A folytatáshoz mentsen",
+      awaitGateRefused: "Ez még nincs mentve. Ellenőrizze az űrlapot, és próbálja újra.",
+      backToStep: (title) => `Vissza ide: „${title}”`,
+    },
+    // 0.50: the form's "Guide me" (TourGuideButton, docs/tours-harmonization.md §11).
+    tourGuide: {
+      label: "Vezessen végig",
+      description: "Mezőről mezőre végigvezeti az űrlapon",
     },
     // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page.
     tourCatalogue: {
@@ -1875,10 +1889,13 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
     rowActions: {
       actions: "Műveletek",
       actionsFor: (name) => `${name} – műveletek`,
+      confirmTitle: (action, name) => (name ? `${action}: „${name}”?` : `${action}?`),
+      confirmBody: "Ez nem vonható vissza.",
     },
     appShellMore: {
       more: "Továbbiak",
       moreTitle: "További oldalak",
+      overview: "Áttekintés",
     },
     // 0.42.0 — docs/admin-harmonization.md §3.1: the admin area's shared words. "Ön", as
     // the rest of the catalogue.

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}`,
     },
@@ -620,6 +621,19 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       awaitClickHint: "Faccia clic sull’elemento evidenziato per continuare",
       awaitInputHint: "Inserisca un valore nel campo evidenziato per continuare", // 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: "Lascia vuoto",
+      optional: "Facoltativo",
+      gateHint: "Compili il campo evidenziato per continuare",
+      gateReady: "Pronto. Prema Avanti o Invio per continuare.",
+      awaitGateHint: "Salvi per continuare",
+      awaitGateRefused: "Non è ancora stato salvato. Controlli il modulo e riprovi.",
+      backToStep: (title) => `Torna a «${title}»`,
+    },
+    // 0.50: the form's "Guide me" (TourGuideButton, docs/tours-harmonization.md §11).
+    tourGuide: {
+      label: "Guidami",
+      description: "La guida in questo modulo, campo per campo",
     },
     // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page. keksdose's reviewed words.
     tourCatalogue: {
@@ -1888,10 +1902,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}`,
     },
@@ -599,6 +600,19 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       awaitClickHint: "点击高亮的元素以继续",
       awaitInputHint: "在高亮的字段中输入一个值以继续", // 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: "留空",
+      optional: "可选",
+      gateHint: "填写高亮的字段以继续",
+      gateReady: "已就绪。按“下一步”或回车键继续。",
+      awaitGateHint: "保存以继续",
+      awaitGateRefused: "尚未保存。请检查表单后重试。",
+      backToStep: (title) => `返回“${title}”`,
+    },
+    // 0.50: the form's "Guide me" (TourGuideButton, docs/tours-harmonization.md §11).
+    tourGuide: {
+      label: "引导我",
+      description: "逐个字段引导您填写此表单",
     },
     // 0.43.0 — docs/tours-harmonization.md §3, §8: the tours page.
     tourCatalogue: {
@@ -1795,10 +1809,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,9 +153,11 @@ 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]],
+  "tour.backToStep": [["{{title}}"]],
   "globalSearch.shortcut": [["{{keys}}"]],
   "pieChart.slice": [["{{label}}", "{{value}}", "{{percent}}"]],
   "sparkline.rising": [["{{first}}", "{{last}}"]],
@@ -279,6 +281,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/data-attributes.ts

@@ -0,0 +1,14 @@
+/**
+ * A component's `data-*` props, for its root element (0.50, keksdose): `data-tour`,
+ * `data-testid` and the like reach the DOM even when the props are not spread there
+ * whole. TypeScript does not check hyphenated JSX attributes, so without this a
+ * `data-tour` on such a component vanished without an error.
+ */
+export type DataAttributes = { [attribute: `data-${string}`]: string | number | boolean | undefined };
+
+/** Only the `data-*` entries of `props`. */
+export function dataAttributes(props: object): DataAttributes {
+  const out: DataAttributes = {};
+  for (const [k, v] of Object.entries(props)) if (k.startsWith("data-")) out[k as `data-${string}`] = v;
+  return out;
+}

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