@eifi1/ui-kit 0.12.0 → 0.13.1

package/src/feedback/feedback-thread.tsx

@@ -1,9 +1,11 @@
-import { useEffect, useRef, useState, useSyncExternalStore } from "react";
-import type { ReactNode } from "react";
+import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, useSyncExternalStore } from "react";
+import type { ReactNode, Ref } from "react";
 import { Paperclip, Send } from "lucide-react";
 import { cn } from "../lib/cn";
+import { formatRelativeTime } from "../lib/format";
 import { Button, EmptyState, Spinner, Textarea } from "../components/ui";
 import { Skeleton } from "../components/skeleton";
+import { Tooltip } from "../components/tooltip";
 import { useKitFileLabels, useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { FeedbackAttachmentField } from "./feedback-attachment";
 import type { FeedbackNoteAttachment } from "./feedback-inbox";
@@ -190,13 +192,19 @@ export function FeedbackThread({
                   </span>
                 )}
                 {date && (
-                  <time
-                    dateTime={date.toISOString()}
-                    title={new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(date)}
-                    className="tabular-nums"
-                  >
-                    {formatRelativeTime(date, reference, locale)}
-                  </time>
+                  // The kit's Tooltip, not a native title: one tooltip look app-wide
+                  // (keksdose F0 / dev#523).
+                  <Tooltip label={new Intl.DateTimeFormat(locale, { dateStyle: "full", timeStyle: "short" }).format(date)}>
+                    <time dateTime={date.toISOString()} className="tabular-nums">
+                      {formatRelativeTime(date, {
+                        now: reference,
+                        locale,
+                        // Past the kit's day steps it is a date: "2 weeks ago" makes
+                        // the reader do arithmetic the date already did.
+                        absoluteAfterDays: 6.5,
+                      })}
+                    </time>
+                  </Tooltip>
                 )}
               </header>
               {message.body && (
@@ -287,27 +295,6 @@ function toDate(value: Date | string | number): Date | null {
   return Number.isNaN(date.getTime()) ? null : date;
 }
 
-const MINUTE = 60_000;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-
-/**
- * "just now", "5 minutes ago", "yesterday", "3 days ago" — `Intl.RelativeTimeFormat`
- * in `locale`, so the grammar is the language's. Past a week it is a date: "12 days
- * ago" makes the reader do arithmetic that the date already did. The full date and
- * time are on the `<time>`'s title.
- */
-function formatRelativeTime(date: Date, now: number, locale: string | undefined): string {
-  const diff = date.getTime() - now;
-  const abs = Math.abs(diff);
-  const rtf = new Intl.RelativeTimeFormat(locale, { numeric: "auto" });
-  if (abs < 45_000) return rtf.format(0, "second");
-  if (abs < 45 * MINUTE) return rtf.format(Math.round(diff / MINUTE), "minute");
-  if (abs < 22 * HOUR) return rtf.format(Math.round(diff / HOUR), "hour");
-  if (abs < 7 * DAY) return rtf.format(Math.round(diff / DAY), "day");
-  return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date);
-}
-
 /* ── Composer ─────────────────────────────────────────────────────────────── */
 
 /** What the composer's attach control takes — {@link FeedbackNoteAttachment} with the
@@ -332,10 +319,51 @@ export interface FeedbackComposerProps {
    *  reader. */
   disabledReason?: ReactNode;
   rows?: number;
+  /**
+   * The box's hint, over the `placeholder` label — keksdose F9: an admin answering a
+   * support ticket is asked something else ("Reply to Anna…") than a member adding to
+   * their own report, and one provider-wide label cannot say both.
+   */
+  placeholder?: string;
+  /**
+   * The draft, controlled — for a host that keeps it itself (saves it per ticket,
+   * prefills a template). Left out, the composer keeps its own. Either way a send
+   * that resolves clears only what was sent: controlled, that is an
+   * `onValueChange("")` the host receives like any keystroke, and only if the draft
+   * is still the one that went out.
+   */
+  value?: string;
+  /** Every change to the draft — typing, {@link FeedbackComposerHandle.insertText}, the
+   *  clear after a send. Required to change a controlled `value`. */
+  onValueChange?: (value: string) => void;
+  /** {@link FeedbackComposerHandle}: put text into the draft from outside (canned-reply
+   *  chips) or focus the box. */
+  ref?: Ref<FeedbackComposerHandle>;
   labels?: Partial<FeedbackComposerLabels>;
   className?: string;
 }
 
+/**
+ * What a {@link FeedbackComposer} `ref` holds.
+ *
+ * keksdose F9: the support admin answers the same five questions all day and wants
+ * chips above the box ("Thanks, fixed in the next release") that drop their text in
+ * where the caret is. A controlled `value` alone cannot do that well — the host sees
+ * the string, not the caret, so it could only append — so the composer, which owns
+ * the textarea, does the splice.
+ */
+export interface FeedbackComposerHandle {
+  /**
+   * Insert `text` at the caret, replacing any selection (the caret the box last had:
+   * a click on a chip blurs it, and the selection survives the blur), then focus the
+   * box with the caret after the inserted text so the reply can go on. Nothing is
+   * added around it — put a space or a newline in `text` if the reply needs one. A
+   * no-op while `disabledReason` replaces the box.
+   */
+  insertText: (text: string) => void;
+  focus: () => void;
+}
+
 const noSubscribe = () => () => {};
 const isApple = () =>
   typeof navigator !== "undefined" && /Mac|iPhone|iPad|iPod/i.test(navigator.platform || navigator.userAgent);
@@ -352,13 +380,60 @@ export function FeedbackComposer({
   attachment,
   disabledReason,
   rows = 3,
+  placeholder,
+  value,
+  onValueChange,
+  ref,
   labels: labelsProp,
   className,
 }: FeedbackComposerProps) {
   const labels = useKitLabels("feedbackComposer", DEFAULT_FEEDBACK_COMPOSER_LABELS, labelsProp);
-  const [draft, setDraft] = useState("");
+  const [ownDraft, setOwnDraft] = useState("");
+  const controlled = value !== undefined;
+  const draft = controlled ? value : ownDraft;
   const [file, setFile] = useState<File | null>(null);
   const root = useRef<HTMLDivElement>(null);
+  const box = useRef<HTMLTextAreaElement>(null);
+  // The draft as of the last commit. The send's `.then` and `insertText` run after
+  // renders their closure did not see — text typed while the send was in flight, a
+  // second chip clicked before the first one's render — and must not act on a stale
+  // string (for a controlled draft there is no updater function to lean on).
+  const latest = useRef(draft);
+  useLayoutEffect(() => {
+    latest.current = draft;
+  });
+  // Where the caret goes once an inserted text has rendered.
+  const caret = useRef<number | null>(null);
+  useLayoutEffect(() => {
+    const el = box.current;
+    if (caret.current === null || !el) return;
+    el.focus();
+    el.setSelectionRange(caret.current, caret.current);
+    caret.current = null;
+  });
+
+  const setDraft = (next: string) => {
+    latest.current = next;
+    if (!controlled) setOwnDraft(next);
+    onValueChange?.(next);
+  };
+
+  useImperativeHandle(ref, () => ({
+    insertText: (text) => {
+      const el = box.current;
+      if (!el) return;
+      const current = latest.current;
+      // A second insert before the first has rendered goes after the first, not at the
+      // textarea's not-yet-moved caret. Otherwise the textarea's selection, which may
+      // be past the end of a controlled value the host has just shortened: clamp it.
+      const pending = caret.current;
+      const start = Math.min(pending ?? el.selectionStart ?? current.length, current.length);
+      const end = pending ?? Math.max(start, Math.min(el.selectionEnd ?? start, current.length));
+      caret.current = start + text.length;
+      setDraft(current.slice(0, start) + text + current.slice(end));
+    },
+    focus: () => box.current?.focus(),
+  }));
   // The server snapshot is "Ctrl"; the client corrects it after hydration.
   const modifier = useSyncExternalStore(
     noSubscribe,
@@ -377,7 +452,7 @@ export function FeedbackComposer({
     const sentFile = file;
     Promise.resolve(onSend(draft.trim(), file))
       .then(() => {
-        setDraft((current) => (current === sentDraft ? "" : current));
+        if (latest.current === sentDraft) setDraft("");
         setFile((current) => (current === sentFile ? null : current));
       })
       .catch(() => {});
@@ -391,7 +466,8 @@ export function FeedbackComposer({
         rows={rows}
         dir="auto"
         aria-label={labels.field}
-        placeholder={labels.placeholder}
+        ref={box}
+        placeholder={placeholder ?? labels.placeholder}
         value={draft}
         onChange={(event) => setDraft(event.target.value)}
         onKeyDown={(event) => {

package/src/i18n/kit-labels.tsx

@@ -423,10 +423,26 @@ interface KitI18n {
  * What every kit link receives: the anchor attributes the kit decided (href, class,
  * aria-current, handlers, children, ref). An app's router link maps them —
  * `({ href, ...p }) => <Link to={href} {...p} />` — ONCE, on the provider.
+ *
+ * `replace` is the one prop that is not an anchor attribute: see there. Map it
+ * explicitly if your router link is not react-router's —
+ * `({ href, replace, ...p }) => <Link to={href} replace={replace} {...p} />` — and never
+ * spread it onto a DOM `<a>`, where React warns about an unknown attribute.
  */
 export type KitLinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   href: string;
   ref?: Ref<HTMLAnchorElement>;
+  /**
+   * Navigate by REPLACING the current history entry, so Back skips it — keksdose F1:
+   * a one-shot URL (a magic-link landing, `?checkout=done`, a wizard's "finish" hop)
+   * that must not come back when the user presses Back. Present ONLY when the kit link
+   * was given `replace` (`true`), so a provider link that spreads its props onto a
+   * plain `<a>` keeps working for every link that never asks for it. react-router's
+   * `<Link>` takes the same prop, so `({ href, ...p }) => <Link to={href} {...p} />`
+   * honours it with no change; any other router maps it to its own replace option.
+   * The kit never puts it on a DOM element itself.
+   */
+  replace?: boolean;
 };
 export type KitLinkComponent = (props: KitLinkProps) => ReactElement;
 

package/src/i18n/locales/de.ts

@@ -553,6 +553,14 @@ export function uiKitLabelsDe(numberLocale = "de-DE"): UiKitLabels {
       message: "Dieser Teil der Seite konnte nicht angezeigt werden. Bitte erneut versuchen oder die Seite neu laden.",
       retry: "Erneut versuchen",
       details: "Fehlerdetails",
+      reload: "Neu laden",
+      updateTitle: "Eine neue Version ist verfügbar",
+      updateMessage: "Ein Teil der App hat sich seit dem Laden dieser Seite geändert. Zum Aktualisieren die Seite neu laden.",
+      offlineTitle: "Keine Internetverbindung",
+      offlineMessage: "Diese Seite konnte ohne Verbindung nicht geladen werden. Nach dem Wiederherstellen der Verbindung die Seite neu laden.",
+      copyReport: "Fehlerbericht kopieren",
+      reported: "Der Fehler wurde automatisch gemeldet.",
+      reportedAs: (reference) => `Gemeldet unter ${reference}`,
     },
     authedImage: {
       loading: "Bild wird geladen…",

package/src/i18n/locales/es.ts

@@ -543,6 +543,14 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       message: "No se pudo mostrar esta parte de la página. Inténtelo de nuevo o recargue la página.",
       retry: "Reintentar",
       details: "Detalles del error",
+      reload: "Recargar",
+      updateTitle: "Hay una nueva versión disponible",
+      updateMessage: "Una parte de la aplicación ha cambiado desde que se cargó esta página. Recárguela para obtener la nueva versión.",
+      offlineTitle: "Sin conexión",
+      offlineMessage: "No se pudo cargar esta página sin conexión. Vuelva a conectarse y recargue la página.",
+      copyReport: "Copiar informe de error",
+      reported: "El error se ha notificado automáticamente.",
+      reportedAs: (reference) => `Notificado con la referencia ${reference}`,
     },
     authedImage: {
       loading: "Cargando imagen…",

package/src/i18n/locales/fr.ts

@@ -559,6 +559,14 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       message: "Cette partie de la page n’a pas pu s’afficher. Réessayez ou rechargez la page.",
       retry: "Réessayer",
       details: "Détails de l’erreur",
+      reload: "Recharger",
+      updateTitle: "Une nouvelle version est disponible",
+      updateMessage: "Une partie de l’application a changé depuis le chargement de cette page. Rechargez-la pour obtenir la nouvelle version.",
+      offlineTitle: "Vous êtes hors ligne",
+      offlineMessage: "Cette page n’a pas pu être chargée sans connexion. Reconnectez-vous, puis rechargez la page.",
+      copyReport: "Copier le rapport d’erreur",
+      reported: "L’erreur a été signalée automatiquement.",
+      reportedAs: (reference) => `Signalée sous la référence ${reference}`,
     },
     authedImage: {
       loading: "Chargement de l’image…",

package/src/i18n/locales/hu.ts

@@ -545,6 +545,14 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       message: "Az oldal ezen része nem jeleníthető meg. Próbálja újra, vagy töltse be újra az oldalt.",
       retry: "Újrapróbálás",
       details: "Hiba részletei",
+      reload: "Újratöltés",
+      updateTitle: "Új verzió érhető el",
+      updateMessage: "Az alkalmazás egy része megváltozott az oldal betöltése óta. Az új verzióhoz töltse be újra az oldalt.",
+      offlineTitle: "Nincs internetkapcsolat",
+      offlineMessage: "Az oldal kapcsolat nélkül nem tölthető be. A kapcsolat helyreállása után töltse be újra az oldalt.",
+      copyReport: "Hibajelentés másolása",
+      reported: "A hibát automatikusan jelentettük.",
+      reportedAs: (reference) => `Bejelentés azonosítója: ${reference}`,
     },
     authedImage: {
       loading: "Kép betöltése…",

package/src/i18n/locales/it.ts

@@ -546,6 +546,14 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       message: "Impossibile mostrare questa parte della pagina. Riprova o ricarica la pagina.",
       retry: "Riprova",
       details: "Dettagli dell’errore",
+      reload: "Ricarica",
+      updateTitle: "È disponibile una nuova versione",
+      updateMessage: "Una parte dell’app è cambiata da quando questa pagina è stata caricata. Ricarica per ottenere la nuova versione.",
+      offlineTitle: "Sei offline",
+      offlineMessage: "Impossibile caricare questa pagina senza connessione. Riconnettiti, poi ricarica la pagina.",
+      copyReport: "Copia il rapporto di errore",
+      reported: "L’errore è stato segnalato automaticamente.",
+      reportedAs: (reference) => `Segnalato con riferimento ${reference}`,
     },
     authedImage: {
       loading: "Caricamento immagine…",

package/src/i18n/locales/zh.ts

@@ -533,6 +533,14 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       message: "无法显示页面的这一部分。请重试或重新加载页面。",
       retry: "重试",
       details: "错误详情",
+      reload: "重新加载",
+      updateTitle: "有新版本可用",
+      updateMessage: "自此页面加载以来，应用的部分内容已更新。请重新加载以获取新版本。",
+      offlineTitle: "当前处于离线状态",
+      offlineMessage: "没有网络连接，无法加载此页面。请恢复连接后重新加载页面。",
+      copyReport: "复制错误报告",
+      reported: "此错误已自动报告。",
+      reportedAs: (reference) => `报告编号：${reference}`,
     },
     authedImage: {
       loading: "正在加载图片…",

package/src/lib/format.ts

@@ -37,7 +37,8 @@ interface BaseOptions {
   empty?: string;
 }
 
-export interface FormatNumberOptions extends BaseOptions {
+/** The options every number formatter shares (money and percent carry their own unit). */
+export interface FormatNumberBaseOptions extends BaseOptions {
   digits?: FormatDigits;
   /** Compact notation: 12 400 → "12K". */
   compact?: boolean;
@@ -47,12 +48,33 @@ export interface FormatNumberOptions extends BaseOptions {
   options?: Intl.NumberFormatOptions;
 }
 
-export interface FormatMoneyOptions extends FormatNumberOptions {
+/** The options {@link formatNumber} takes: the shared ones plus a free-text `unit`. */
+export interface FormatNumberOptions extends FormatNumberBaseOptions {
+  /**
+   * A unit printed after the figure, joined by a narrow no-break space (U+202F):
+   * "3.400 N", "12 kg", "4,5 m²". lenkbank (P8) prints forces, masses and lengths in
+   * every table and summary, and each call site glued `${n} N` together with a plain
+   * space — which wraps the "N" onto the next line in a narrow column and reads loose
+   * beside the digit grouping. The narrow no-break space is the SI brochure's and the
+   * Swiss typesetting rule's separator between value and unit, and it never breaks.
+   *
+   * Free text, not `Intl`'s `style: "unit"`: that one only knows the ECMA-402
+   * sanctioned units (no "N", no "kN", no "m³/h"), so an app would still be gluing.
+   * A missing value prints `empty` ALONE — "— N" says there is a newton-shaped
+   * nothing, which is noise in a column that already heads its unit.
+   */
+  unit?: string;
+}
+
+/** Narrow no-break space (U+202F): between a figure and its {@link FormatNumberOptions.unit}. */
+const UNIT_SEPARATOR = "\u202F";
+
+export interface FormatMoneyOptions extends FormatNumberBaseOptions {
   /** `"symbol"` (default), `"narrowSymbol"`, `"code"` ("CHF 12.00") or `"name"`. */
   currencyDisplay?: Intl.NumberFormatOptions["currencyDisplay"];
 }
 
-export interface FormatPercentOptions extends FormatNumberOptions {
+export interface FormatPercentOptions extends FormatNumberBaseOptions {
   /**
    * `true` (default): `value` is a RATIO, as `Intl` and `StatTile`'s percent delta read
    * it — `0.12` is 12 %. `false`: it is already a percentage — `12` is 12 %
@@ -83,7 +105,7 @@ function digitOptions(digits: FormatDigits | undefined): Intl.NumberFormatOption
   };
 }
 
-function numberOptions(o: FormatNumberOptions): Intl.NumberFormatOptions {
+function numberOptions(o: FormatNumberBaseOptions): Intl.NumberFormatOptions {
   return {
     ...digitOptions(o.digits),
     ...(o.compact ? { notation: "compact" } : null),
@@ -93,13 +115,16 @@ function numberOptions(o: FormatNumberOptions): Intl.NumberFormatOptions {
 }
 
 function isMissing(value: number | null | undefined): value is null | undefined {
-  return value === null || value === undefined || Number.isNaN(value);
+  // ±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);
 }
 
-/** A number in `locale`: "1,234.5", "1.234,5", "1’234.5". */
+/** 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;
-  return numberFormatter(options.locale, numberOptions(options)).format(value);
+  const figure = numberFormatter(options.locale, numberOptions(options)).format(value);
+  return options.unit ? `${figure}${UNIT_SEPARATOR}${options.unit}` : figure;
 }
 
 /** An amount of `currency` (ISO 4217) in `locale`: "CHF 1’234.50", "1.234,50 €". */