@eifi1/ui-kit 0.33.0 → 0.33.1

package/src/hooks/use-anchored-panel.ts

@@ -21,6 +21,13 @@ import { useTextSize } from "../theme/text-size";
 export interface ViewportBox {
   top: number;
   height: number;
+  /**
+   * The height of the LAYOUT viewport itself, which `position: fixed`'s `bottom` is
+   * measured from. Only {@link anchoredPanelPlacement} reads it, for a flipped panel's
+   * `bottom`. Defaults to `top + height`: the two are the same box whenever no keyboard
+   * and no zoom shrink the visible region.
+   */
+  layoutHeight?: number;
 }
 
 /**
@@ -71,9 +78,21 @@ export function readKeyboardInset({ minimum = MIN_KEYBOARD_PX }: KeyboardInsetOp
 function readViewport(): ViewportBox {
   if (typeof window === "undefined") return { top: 0, height: 0 };
   const vv = window.visualViewport;
+  // The layout viewport's height is `innerHeight`, the reference `readKeyboardInset`
+  // measures the keyboard against. The keyboard leaves it alone (it shrinks only the
+  // VISUAL viewport; under `interactive-widget=resizes-content` it shrinks both, the
+  // fixed box with them), and it follows the mobile URL bar as it slides away, as a
+  // fixed box's `bottom` does. Not `documentElement.clientHeight`: on mobile Chrome and
+  // Safari that stays at the small, URL-bar-shown height, so with the bar scrolled away
+  // a flipped panel would sit that much too low, over its own field. `innerHeight`'s one
+  // error is a desktop page with a horizontal scrollbar, which it counts and the fixed
+  // box does not: the gap widens by the bar's thickness, and never closes.
+  const layoutHeight = window.innerHeight;
   // offsetTop, not 0: with the keyboard up the user can also pan the visual viewport
   // within the layout viewport, which shifts where "visible" starts.
-  return vv ? { top: vv.offsetTop, height: vv.height } : { top: 0, height: window.innerHeight };
+  return vv
+    ? { top: vv.offsetTop, height: vv.height, layoutHeight }
+    : { top: 0, height: window.innerHeight, layoutHeight };
 }
 
 export interface AnchoredPanelOptions {
@@ -90,11 +109,24 @@ export interface AnchoredPanelOptions {
   minHeight?: number;
 }
 
+/**
+ * `top` and `bottom` are the two edges of a panel exactly `maxHeight` tall. A panel is
+ * sized by its content and `maxHeight` only caps it, so apply the edge on the trigger's
+ * side, the one that holds whatever the height: `top` while the panel is below,
+ * `bottom` (and no `top`) once it is flipped `above`.
+ */
 export interface AnchoredPanel {
   /** The trigger's rect, or null while closed/unmeasured. */
   rect: AnchorRect | null;
-  /** Viewport-space `top` for the panel. */
+  /** Viewport-space `top` for the panel — the one to apply while it is below. Flipped,
+   *  it is where a FULL-height panel's top would be, and a three-row list placed by it
+   *  floated far above its field (keksdose K1, live #401); place that one by `bottom`. */
   top: number;
+  /** CSS `bottom` for a `position: fixed` panel: the distance from the layout
+   *  viewport's bottom edge up to the panel's. The one to apply once it is flipped
+   *  `above`: it keeps the panel's foot `gap` above the trigger however short its
+   *  content, and while a filtered list shrinks or grows under the user's typing. */
+  bottom: number;
   /** Cap that keeps the panel inside the VISIBLE viewport — apply as `maxHeight`. */
   maxHeight: number;
   /** Whether the panel was flipped above the trigger. */
@@ -122,6 +154,14 @@ const FLIP_GAIN = 48;
  * returned `maxHeight` is what makes the flip sufficient rather than merely different:
  * without it a tall panel placed above just runs off the top instead of the bottom.
  *
+ * A flipped panel hangs from its BOTTOM edge, `gap` above the trigger, and is placed by
+ * `bottom` (keksdose K1, live #401). It used to be placed by a `top` worked out as
+ * though the panel were `maxHeight` tall, and a panel is only as tall as its content:
+ * a three-row address list under a 256 px cap sat ~176 px above its field, on a phone
+ * with the keyboard up. Only when even the {@link FLOOR} does not fit above does that
+ * edge give way, as `top` always did, so the panel's head (a search box, often) stays
+ * on screen rather than above it.
+ *
  * Split out so the geometry is testable without a DOM and a fake keyboard — @hb/ui has
  * no test runner of its own, so this is exercised from the consuming app.
  */
@@ -140,19 +180,17 @@ export function anchoredPanelPlacement(
       (spaceBelow < preferredHeight && (spaceAbove >= preferredHeight || spaceAbove - spaceBelow >= FLIP_GAIN)));
   const space = Math.max(FLOOR, above ? spaceAbove : spaceBelow);
   const maxHeight = Math.min(preferredHeight, space);
-  return {
-    top: above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap,
-    maxHeight,
-    above,
-  };
+  // Unchanged, for the apps that call the hook and apply it: the edge to use below, and
+  // a full-height panel's top above. In layout-viewport space, like the rect.
+  const top = above ? Math.max(viewTop, rect.top - gap - maxHeight) : rect.bottom + gap;
+  // `bottom` counts up from the LAYOUT viewport's bottom edge, not the visible region's:
+  // `position: fixed` is laid out in the layout viewport, which runs on behind the
+  // keyboard, exactly as the rect is measured in it. The keyboard, the pan and the zoom
+  // are already in `maxHeight`, which keeps the panel's top inside what is on screen.
+  const layoutHeight = viewport.layoutHeight ?? viewport.top + viewport.height;
+  return { top, bottom: layoutHeight - (top + maxHeight), maxHeight, above };
 }
 
-/**
- * Where to put a panel anchored under `ref`, tracking the visible viewport.
- *
- * Callers own horizontal placement — the pickers align to the trigger's left edge, the
- * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
- */
 /**
  * The region actually on screen, tracked while `active` (Keksdose live #328).
  *
@@ -204,6 +242,14 @@ export function useVisualViewport(active: boolean): ViewportBox | null {
   return box;
 }
 
+/**
+ * Where to put a panel anchored under `ref`, tracking the visible viewport.
+ *
+ * Callers own horizontal placement — the pickers align to the trigger's left edge, the
+ * popovers to its right — and must apply `maxHeight` with an internal `overflow-y`.
+ * Vertically, apply `top` while the panel is below and `bottom` (with no `top`) once it
+ * is `above`; see {@link AnchoredPanel}.
+ */
 export function useAnchoredPanel<T extends HTMLElement>(
   ref: RefObject<T | null>,
   open: boolean,
@@ -236,7 +282,7 @@ export function useAnchoredPanel<T extends HTMLElement>(
   }, [open]);
 
   if (!rect) {
-    return { rect: null, top: 0, maxHeight: preferredHeight, above: false };
+    return { rect: null, top: 0, bottom: 0, maxHeight: preferredHeight, above: false };
   }
   return { rect, ...anchoredPanelPlacement(rect, viewport, { ...options, preferredHeight, minHeight }) };
 }

package/src/hooks/use-focus-trap.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 
 /**
  * Keep keyboard focus inside an open overlay, and give it back when it closes.
@@ -23,6 +23,10 @@ import { useEffect, useRef } from "react";
  *     `<body>`, which for a keyboard user means losing their place in the page
  *     entirely. When the target is gone, focus falls back to the nearest thing that
  *     still exists rather than to nothing.
+ *   - **Leaves an app's own autofocus alone** (0.33.1). React honours a child's
+ *     `autoFocus` while it commits, and this hook's effect runs AFTER that commit, so
+ *     focusing the container there took focus straight back off the field the app had
+ *     asked for. See `initialFocus`.
  *   - **Nests.** An overlay can open another — a picker inside a dialog. Only the
  *     innermost trap handles a keystroke, and closing it hands control back to the one
  *     underneath. Innermost is decided by DOM containment rather than by mount order;
@@ -66,29 +70,61 @@ export interface FocusTrapOptions {
    * what `Modal` does and why: focusing the first FIELD pops the software keyboard on
    * a phone the moment a dialog opens, before the user has asked to type.
    * The container needs `tabIndex={-1}` for this to work.
+   *
+   * `"container"` and `"first"` both step aside when focus is ALREADY inside the
+   * container, on something other than the container itself. That is a child the app
+   * focused on purpose — an `autoFocus`, which React honours before this hook's effect
+   * runs — and the keyboard it brings up is the one the user was promised. Moving focus
+   * off it lost keksdose's create card its amount field the instant it got it, and on a
+   * phone the numpad sheet with it, which shows only while the field is focused (live
+   * #402). A function is the caller's explicit choice and is always followed.
    */
   initialFocus?: "container" | "first" | (() => HTMLElement | null);
 }
 
+/** Whatever has focus right now; nothing on the server, where there is no document. */
+function focusedElement(): Element | null {
+  return typeof document === "undefined" ? null : document.activeElement;
+}
+
 export function useFocusTrap(
   containerRef: React.RefObject<HTMLElement | null>,
   { active = true, restoreFocus = true, initialFocus = "container" }: FocusTrapOptions = {},
 ): void {
   // Latest-ref so a caller passing an inline `initialFocus` thunk — which every caller
   // will — does not tear the trap down and re-engage it on each render, stealing focus
-  // back to the top of the panel mid-interaction.
-  const optsRef = useRef({ restoreFocus, initialFocus });
-  useEffect(() => {
-    optsRef.current = { restoreFocus, initialFocus };
+  // back to the top of the panel mid-interaction. Written in a LAYOUT effect so that
+  // the trap's cleanup, which runs after the layout effects of the same commit, reads
+  // this render's `active` rather than the last one's — see the cleanup for why.
+  const optsRef = useRef({ active, restoreFocus, initialFocus });
+  useLayoutEffect(() => {
+    optsRef.current = { active, restoreFocus, initialFocus };
   });
 
+  // Where focus was BEFORE the trap engaged: the element it is given back to on close.
+  //
+  // Read DURING the render that turns the trap on, and that timing is the point. React
+  // honours a child's `autoFocus` while it commits that render, before any effect runs,
+  // so the effect below asking `document.activeElement` would get the child, inside the
+  // overlay. Restoring to that on close aimed focus at the dialog that was closing —
+  // already out of the DOM, so focus fell to <body> rather than going back to the
+  // button that opened it.
+  //
+  // State adjusted during render (the pattern `Modal` uses for `open`) rather than a
+  // ref written there: set once per opening and cleared on release, so a re-render
+  // while open cannot replace it with something inside, and StrictMode's second render
+  // and second effect both see the same element. `undefined` means "not captured";
+  // `null` is a capture that found nothing.
+  const [opener, setOpener] = useState<Element | null | undefined>(undefined);
+  if (active && opener === undefined) setOpener(focusedElement());
+  else if (!active && opener !== undefined) setOpener(undefined);
+
   useEffect(() => {
     if (!active) return;
     const container = containerRef.current;
     if (!container) return;
 
     container.setAttribute(TRAP_ATTR, "");
-    const previouslyFocused = document.activeElement as HTMLElement | null;
 
     /** Is `node` inside a trap nested within this one? */
     const inNestedTrap = (node: Element | null) => {
@@ -106,12 +142,13 @@ export function useFocusTrap(
       );
 
     const { initialFocus: how } = optsRef.current;
+    const focused = document.activeElement;
+    // A child that already has focus was given it on purpose — see `initialFocus`.
+    const childHasFocus = focused !== container && container.contains(focused);
     if (typeof how === "function") {
       (how() ?? container).focus();
-    } else if (how === "first") {
-      (tabbables()[0] ?? container).focus();
-    } else {
-      container.focus();
+    } else if (!childHasFocus) {
+      (how === "first" ? (tabbables()[0] ?? container) : container).focus();
     }
 
     const onKeyDown = (e: KeyboardEvent) => {
@@ -149,12 +186,18 @@ export function useFocusTrap(
       container.removeEventListener("keydown", onKeyDown);
       container.removeAttribute(TRAP_ATTR);
 
+      // Only when the trap is really being released: the container has left the page,
+      // or `active` has turned false. StrictMode runs this cleanup once more right after
+      // mounting, with the overlay still up, and then the effect again — and React does
+      // not re-apply `autoFocus` for that second run. Restoring here would pull focus
+      // out of the autofocused field for good: live #402 again, in development.
+      if (container.isConnected && optsRef.current.active) return;
       if (!optsRef.current.restoreFocus) return;
       // `isConnected` is the whole point: restoring to a node that has been removed
       // sends focus to <body> and the user loses their place entirely. When the
       // original is gone, leave focus where the browser put it rather than moving it
       // somewhere arbitrary — a wrong guess is worse than no move.
-      if (previouslyFocused?.isConnected) previouslyFocused.focus?.();
+      if (opener?.isConnected) (opener as HTMLElement).focus?.();
     };
-  }, [active, containerRef]);
+  }, [active, containerRef, opener]);
 }

package/src/i18n/german.ts

@@ -1573,7 +1573,10 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       keptBeta: "Die Beta behält ihr Ende; nur der Tarif wurde geändert.",
       untilDone: (date) => `Kostenlos bis ${date}.`,
       overLimit: "Über dem Limit des neuen Tarifs: Nichts wird entfernt, neue Einträge sind gesperrt.",
-      usageOf: (used, limit, dimension) => `${used} von ${limit} ${dimension}`,
+      // 0.33.1: the app's word heads the line. After "von" it would want the dative
+      // plural ("von 5 Objekten"), which no app's `one`/`other` form carries; as a
+      // heading it is the nominative, in the form for the limit ("Objekt: 1 von 1").
+      usageOf: (used, limit, dimension) => `${dimension}: ${used} von ${limit}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Darstellung" group.

package/src/i18n/locales/es.ts

@@ -1524,7 +1524,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       keptBeta: "La beta conserva su fin; solo ha cambiado el plan.",
       untilDone: (date) => `Gratis hasta el ${date}.`,
       overLimit: "Por encima del límite del nuevo plan: no se elimina nada, los elementos nuevos quedan bloqueados.",
-      // Figures formatted; "de", as `billing.usage`.
+      // Figures formatted; "de", as `billing.usage`. The app's word follows the limit,
+      // in its form (0.33.1): "1 de 1 presupuesto", "1 de 5 presupuestos".
       usageOf: (used, limit, dimension) => `${used} de ${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in

package/src/i18n/locales/fr.ts

@@ -1561,7 +1561,9 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       untilDone: (date) => `Gratuit jusqu’au ${date}.`,
       overLimit:
         "Au-delà de la limite de la nouvelle formule\u00a0: rien n’est supprimé, les nouveaux éléments sont bloqués.",
-      // Figures formatted; "sur", as `billing.usage`.
+      // Figures formatted; "sur", as `billing.usage`. The app's word follows the limit,
+      // in its form (0.33.1): "1 sur 1 budget", "1 sur 5 budgets" — and French reads 0
+      // as singular, which the forms' `one` covers.
       usageOf: (used, limit, dimension) => `${used} sur ${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in

package/src/i18n/locales/hu.ts

@@ -1531,8 +1531,10 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       keptBeta: "A béta megtartja a lejáratát; csak a csomag változott.",
       untilDone: (date) => `Ingyenes eddig: ${date}.`,
       overLimit: "Az új csomag korlátja felett: semmi sem törlődik, de újak nem hozhatók létre.",
-      // The figures bare, as `billing.usage` (convention 3).
-      usageOf: (used, limit, dimension) => `${dimension}: ${used} / ${limit}`,
+      // The figures bare, as `billing.usage` (convention 3), and the app's word after
+      // them, as `dataTable.filterResults` ("1 / 5 költségvetés"): since 0.33.1 it is the
+      // word as it reads after a number, which stays singular here (convention 2).
+      usageOf: (used, limit, dimension) => `${used} / ${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in
     // the "Megjelenés" group.

package/src/i18n/locales/it.ts

@@ -1541,7 +1541,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       keptBeta: "La beta mantiene la sua scadenza; è cambiato solo il piano.",
       untilDone: (date) => `Gratuito fino al ${date}.`,
       overLimit: "Oltre il limite del nuovo piano: non viene rimosso nulla, i nuovi elementi sono bloccati.",
-      // Figures formatted; "di", as `billing.usage`.
+      // Figures formatted; "di", as `billing.usage`. The app's word follows the limit,
+      // in its form (0.33.1): "1 di 1 budget", "1 di 5 budget".
       usageOf: (used, limit, dimension) => `${used} di ${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in

package/src/i18n/locales/zh.ts

@@ -1464,6 +1464,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       keptBeta: "测试版保留其结束日期；只更改了套餐。",
       untilDone: (date) => `免费至 ${date}。`,
       overLimit: "超出新套餐的上限：不会删除任何内容，但无法新建。",
+      // No plural: the app's word reads the same after any number (0.33.1).
       usageOf: (used, limit, dimension) => `${used}/${limit} ${dimension}`,
     },
     // 0.32.0 — docs/text-size-harmonization.md §6: the text-size and contrast settings in

package/src/i18n/plurals.ts

@@ -52,3 +52,32 @@ function pluralCategories(locale: string, type: Intl.PluralRuleType): readonly s
     return [];
   }
 }
+
+/**
+ * A word in the plural forms a count can ask for, `other` required: an app's
+ * `key_one` / `key_other` pair, or any of CLDR's categories (`zero`, `one`, `two`, `few`,
+ * `many`). A category left out reads `other`, the stand-in {@link withAllPlurals} fills
+ * a catalogue with — so English's two forms serve every language, as in the apps'
+ * catalogues.
+ *
+ *     { one: t("planUsage.budget_one"), other: t("planUsage.budget_other") }
+ */
+export type PluralForms = { other: string } & Partial<Record<Intl.LDMLPluralRule, string>>;
+
+/**
+ * The form of `forms` that `count` takes in `locale` — CLDR's cardinal category for it,
+ * through `Intl.PluralRules`, else `other`. A locale `Intl` cannot read reads as the
+ * runtime's, as everywhere the kit formats (and `undefined` is the runtime's). For the
+ * kit's own parts that put an app's word after a count: `planColumn`'s usage.
+ */
+export function pluralForm(count: number, forms: PluralForms, locale?: string): string {
+  return forms[pluralCategory(count, locale)] ?? forms.other;
+}
+
+function pluralCategory(count: number, locale: string | undefined): Intl.LDMLPluralRule {
+  try {
+    return new Intl.PluralRules(locale).select(count);
+  } catch {
+    return new Intl.PluralRules().select(count);
+  }
+}

package/src/index.ts

@@ -402,8 +402,10 @@ export { kitLabelStrings } from "./i18n/review";
 export type { KitLabelStringsOptions } from "./i18n/review";
 // The seven languages, how an app resolves one, and the kit catalogue loader for it.
 export * from "./i18n/languages";
-// CLDR plural categories for an app's i18next catalogue, filled from `_other`.
+// CLDR plural categories for an app's i18next catalogue, filled from `_other`; and the
+// forms of an app's word a kit part picks from by count (0.33.1, `PlanColumnUsage.label`).
 export { withAllPlurals } from "./i18n/plurals";
+export type { PluralForms } from "./i18n/plurals";
 // Translation review (0.19): one contract for kastlan's and keksdose's review pages —
 // the pure rows/status/placeholder logic and the presentational page parts.
 export {

package/tokens.css

@@ -192,6 +192,24 @@ html[data-text-size="xlarge"] {
   }
 }
 
+/* The same for FIGURES — an amount, a date, a count with its unit (0.33.1, keksdose):
+   `truncate` at Normal, and from Large up a wrap at spaces only (`overflow-wrap: normal`).
+   `truncate-until-large` breaks anywhere, so at Large it split an amount mid-number
+   ("CHF 1’2" over "34.50"), which reads as two numbers. Here "CHF" and "1’234.50" may
+   take two lines, but a number never splits: one wider than its box is cut at its end
+   instead, so give a figure's cell the room for it (`shrink-0`). Prose — a name, a
+   title, a sentence — keeps `truncate-until-large`, where breaking a long word is what
+   keeps the line on the screen. */
+@utility truncate-until-large-words {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  @variant large {
+    white-space: normal;
+    overflow-wrap: normal;
+  }
+}
+
 :root {
   --bg-page: #ede3cf;          /* warm dim sand — low-glare light page */
   --bg-surface: #f6ecd9;       /* warm off-white card/panel (not pure white) */