@eifi1/ui-kit 0.50.1 → 0.51.0

package/src/components/button-look.ts

@@ -34,54 +34,7 @@ export type ButtonVariant =
   | "secondary"
   | "ghost"
   | "danger"
-  | "link"
-  /** @deprecated 0.49 — use `default` (same look); removed in 0.51. */
-  | "primary"
-  /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
-  | "brand";
-
-/** @internal A {@link ButtonVariant} without the deprecated aliases. */
-export type CanonicalButtonVariant = Exclude<ButtonVariant, "primary" | "brand">;
-
-/** The deprecated names and what they stand for — see {@link ButtonVariant}. */
-const DEPRECATED_BUTTON_VARIANTS: Readonly<Record<string, CanonicalButtonVariant>> = {
-  primary: "default",
-  brand: "accent",
-};
-
-/** The kit's dev switch, as `lib/logger.ts` reads it: a development build, never a
- *  production one (the consumer's bundler makes `import.meta.env.DEV` false) and never
- *  under vitest. Read per call so a test can switch it on with `vi.stubEnv`. */
-function devWarnings(): boolean {
-  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
-}
-
-const warnedVariants = new Set<string>();
-
-/**
- * @internal A deprecated variant name warns once (per `component` and name) in a
- * development build, then reads as the name it stands for. `component` is the prop's
- * owner in the message ("Button variant", "FormActions submitVariant", …).
- */
-export function warnDeprecatedVariant(component: string, name: string, replacement: string): void {
-  if (!devWarnings()) return;
-  const key = `${component}|${name}`;
-  if (warnedVariants.has(key)) return;
-  warnedVariants.add(key);
-  console.warn(
-    `[ui-kit] ${component}="${name}" is deprecated: use "${replacement}" (same look). ` +
-      `"${name}" is removed in 0.51.`,
-  );
-}
-
-/** @internal `primary` → `default`, `brand` → `accent` (warning once in development);
- *  every other variant as it is. Runs before every lookup keyed by the variant. */
-export function resolveButtonVariant(variant: ButtonVariant, component = "Button variant"): CanonicalButtonVariant {
-  const replacement = DEPRECATED_BUTTON_VARIANTS[variant];
-  if (replacement === undefined) return variant as CanonicalButtonVariant;
-  warnDeprecatedVariant(component, variant, replacement);
-  return replacement;
-}
+  | "link";
 
 // Shared base ring for every button-styled element. Kept as a named const so the
 // <Button> component and the {@link buttonClasses} helper draw from one source and
@@ -155,9 +108,8 @@ export const HOVER_INK = "hover:bg-[color-mix(in_srgb,var(--text-primary)_7%,tra
 // outline); `accent` is the solid brand fill for the rare strong CTA; `danger` takes the
 // semantic `--danger` family (destructive semantics), so a consumer can re-point the
 // destructive hue instead of inheriting a hard-coded red. Focus rings follow each
-// variant's own accent: brand for the four neutral ones, danger for `danger`. Keyed by
-// the canonical names: {@link resolveButtonVariant} maps the deprecated ones first.
-export const buttonVariantClasses: Record<CanonicalButtonVariant, string> = {
+// variant's own accent: brand for the four neutral ones, danger for `danger`.
+export const buttonVariantClasses: Record<ButtonVariant, string> = {
   default:
     // Hovers onto `--bg-active`, not `--border` (0.33, §12.9): More contrast steps the
     // border until it is a 3:1 LINE, and as a fill under the label that left 2.7:1.
@@ -223,12 +175,12 @@ const BUTTON_TONES: Record<Exclude<ButtonTone, "default">, string> = {
 };
 
 /** Only the two transparent variants take every tone; see {@link ButtonTone}. */
-const TONED_VARIANTS = new Set<CanonicalButtonVariant>(["link", "ghost"]);
+const TONED_VARIANTS = new Set<ButtonVariant>(["link", "ghost"]);
 
 // `tone="danger"` on the neutral boxed variants — see {@link ButtonTone}. Each string
 // restates every colour the variant sets (border, fill, text, hover, ring) so none of
 // the neutral ones survives the merge.
-const BUTTON_BOXED_DANGER: Partial<Record<CanonicalButtonVariant, string>> = {
+const BUTTON_BOXED_DANGER: Partial<Record<ButtonVariant, string>> = {
   // Not boxed, but its hover is a fill: the danger wash under the danger text, as
   // IconButton's danger tone (0.33). On B′'s translucent ink `--danger` fell to 4.2:1
   // over a light page.
@@ -266,12 +218,11 @@ export interface ButtonClassesOptions {
  * compact toolbar links.
  */
 export function buttonClasses(
-  given: ButtonVariant = "default",
+  variant: ButtonVariant = "default",
   classNameOrOptions?: string | ButtonClassesOptions,
 ): string {
   const { size = "md", className } =
     typeof classNameOrOptions === "object" ? classNameOrOptions : { className: classNameOrOptions };
-  const variant = resolveButtonVariant(given, "buttonClasses variant");
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],
@@ -291,8 +242,7 @@ export const ICON_BUTTON_PRESSED =
   "bg-brand-soft text-brand hover:bg-brand-soft-hover hover:text-brand-muted disabled:hover:bg-brand-soft disabled:hover:text-brand";
 
 /** @internal The button look shared by the `<button>` and the `<a>` form. */
-export function buttonLook(given: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {
-  const variant = resolveButtonVariant(given);
+export function buttonLook(variant: ButtonVariant, size: ButtonSize, stretch: boolean | undefined, tone: ButtonTone) {
   return cn(
     BUTTON_BASE,
     BUTTON_SIZES[size],

package/src/components/data-table-fit.ts

@@ -183,7 +183,10 @@ export function useColumnFit<T>({
     // update limit (#185). So a column whose return the next measure undid, at the same
     // scroller width, waits for more room than it had then: a wider scroller or narrower
     // content. Whatever the error in its width, that is one invisible flip per room it is
-    // tried at.
+    // tried at. (0.51, keksdose N2: under `virtualize` that excess was the table coming
+    // back at an OLD lock's ratcheted widths, not the ones measured here; the lock now goes
+    // when the columns change, data-table-virtual.ts. The guard stays for the rest: a
+    // column whose drawn cells are wider than its header.)
     let n = current.length;
     const rooms = new Map<string, number>();
     while (n > 0) {

package/src/components/data-table-virtual.ts

@@ -30,7 +30,9 @@ import type { RefObject } from "react";
 // nothing). Re-measured from scratch when the data, the columns, a user width, the text
 // size or the scroller's width change — and when a grown column would push the table
 // past its scroller, which it fit before. A `grow` column and a user-resized one are not
-// locked (the first takes the rest, the second is pinned already).
+// locked (the first takes the rest, the second is pinned already). A lock replaced is
+// gone: changing back (a column the fit leaves out and brings back) measures again
+// (0.51, keksdose N2).
 
 /** {@link DataTableProps.virtualize}'s options. */
 export interface DataTableVirtualize {
@@ -302,6 +304,17 @@ export function useRowWindow<T>({
   );
 
   const lockSig = `${resetKey}|${scrollerWidth}|${colKeys.join(",")}`;
+  // A lock is the table it was measured on, so it goes as soon as the signature moves on
+  // — not merely set aside until the signature comes BACK (0.51, keksdose N2). The fit
+  // leaves a column out and, measuring the table afresh without it, brings it back in the
+  // same frame, before this hook measures anything: the signature was then the old one
+  // again, and the column came back at the widths that had ratcheted up while rows
+  // scrolled (a wider cell widens its column once), 80–110px more than the fit had just
+  // measured (606 + 93 estimated, 778–812 drawn, at 757), and B2's guard kept it out
+  // although it fitted. Dropped here, the table it comes back to is drawn as measured,
+  // and the next frame locks that. Adjusted during render, as React's "storing
+  // information from previous renders": an effect would draw the stale widths first.
+  if (lock !== null && lock.sig !== lockSig) setLock(null);
   const colWidths = lock && lock.sig === lockSig ? lock.widths : null;
 
   // What the scroll handler and the frame's measure read: this render's model and lock.

package/src/components/field-base.tsx

@@ -21,7 +21,8 @@ import { DEFAULT_CHARACTER_COUNT_LABELS, DEFAULT_PASSWORD_REVEAL_LABELS } from "
  * `useFieldError`, every field's.
  *
  * Public through ./ui by name. `FieldGroup`, the counter and the placeholder helpers are
- * the three fields' shared parts (`@internal`).
+ * the three fields' shared parts (`@internal`), as are the Select's own classes and its
+ * `SelectWidthFloor` (0.51).
  */
 
 /**
@@ -197,6 +198,57 @@ export function FieldChevron({ className, ...rest }: FieldChevronProps) {
   );
 }
 
+/** A native dropdown Select's dress: no native arrow, and `pe-9`, the room the
+ *  {@link FieldChevron} takes. Shared with {@link SelectWidthFloor}. `@internal` */
+export const SELECT_MENU_DRESS = "appearance-none pe-9";
+
+/** The compact Select (`size="sm"`): the field's colours, a toolbar button's height.
+ *  `py-0` and a fixed height rather than a smaller padding, so the box is 28px whatever
+ *  line height the caller's type brings with it. Shared with {@link SelectWidthFloor}.
+ *  `@internal` */
+export const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
+
+/**
+ * The width an UNLABELLED Select needs to show the widest of `values` whole: an invisible,
+ * zero-height line under it, in the select's own type, padding, chevron room and border
+ * (the same classes), one value per line. Placed beside the Select in the box that sizes
+ * it, it holds that box to the widest value, and the `w-full` select fills it. `@internal`
+ *
+ * Why it takes a sizer (0.51, Kurvenschmiede N5). A `<select>` with a percentage width
+ * is a "compressible" element: its min-content contribution is ZERO (CSS Sizing 3
+ * §5.2.2), so the auto table layout squeezes its column to the header, and beside a
+ * `grow` column every other column IS squeezed to its min-content (data-table-fit.ts).
+ * The user roster's role select stood 92px and read "Meml…" and "Admi…" (KS review,
+ * 0.49 and 0.50). `min-width: max-content` on the select would hold it instead — but to
+ * its widest OPTION, and an unavailable role's option carries its reason ("Customer (owns
+ * work)", RoleSelect's `optionDisabledReason`): the column would widen for a text that is
+ * never the selected value. So the caller says which values can be selected, in the
+ * current language.
+ */
+export function SelectWidthFloor({ values, size = "md" }: { values: readonly string[]; size?: "sm" | "md" }) {
+  if (values.length === 0) return null;
+  return (
+    <span
+      aria-hidden
+      data-select-floor=""
+      className={cn(
+        FIELD_BASE,
+        SELECT_MENU_DRESS,
+        size === "sm" && SELECT_SM,
+        // The horizontal box only: no height, no vertical padding or border, not painted.
+        "invisible h-0 overflow-hidden border-y-0 py-0 whitespace-nowrap shadow-none",
+      )}
+    >
+      {values.map((value, i) => (
+        // The value as generated content, not as text: it is laid out (and so measured)
+        // the same, but a test's `getByText("Member")` still finds the one option, and a
+        // find-in-page or a copied row does not meet a word nobody sees.
+        <span key={i} data-value={value} className="block before:content-[attr(data-value)]" />
+      ))}
+    </span>
+  );
+}
+
 // Animated label that starts centred (as a placeholder) in an empty field and
 // floats up INSIDE the top strip on focus or once the field has a value. Sits on
 // the field's own surface, so no background chip and nothing to mismatch the card.

package/src/components/floating-panel.tsx

@@ -15,7 +15,6 @@ import { X } from "lucide-react";
 
 import { cn } from "../lib/cn";
 import { FOCUS_RING } from "./focus-ring";
-import { warnDeprecatedVariant } from "./button-look";
 import { dirOf, type Direction } from "../lib/direction";
 import { registerFloating } from "../lib/floating-stack";
 import { useFloatClearance } from "../lib/float-clearance";
@@ -142,14 +141,9 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
    * `accent`. `surface`: the page's surface with a hairline border — for a FAB that is a
    * status rather than a call to action, as kastlan's offline pill is (a brand pill would
    * shout "press me" at a user who is merely offline). Ignored while `pressed` is set; a
-   * toggle has its own two looks. `primary` is a deprecated alias of `accent` (0.49; a
-   * development build warns once), removed in 0.51.
+   * toggle has its own two looks.
    */
-  variant?:
-    | "accent"
-    | "surface"
-    /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
-    | "primary";
+  variant?: "accent" | "surface";
   /**
    * Hover and focus label in the kit {@link Tooltip}, instead of the native `title` —
    * keksdose has ONE tooltip (dev#523) and wrapped its assistant launcher by hand,
@@ -173,14 +167,6 @@ export interface FloatingActionButtonProps extends Omit<ButtonHTMLAttributes<HTM
   ref?: Ref<HTMLButtonElement>;
 }
 
-/** FloatingActionButton's and FloatingAction's `primary` was always the solid brand
- *  fill: it reads as `accent` (warning once in development), never as Button's
- *  `default`. */
-function deprecatedPrimary(component: string): "accent" {
-  warnDeprecatedVariant(component, "primary", "accent");
-  return "accent";
-}
-
 /**
  * A round, icon-only button pinned to a corner of the viewport — the trigger of a
  * {@link FloatingPanel}, and usable alone for a page's one primary action.
@@ -215,7 +201,7 @@ export function FloatingActionButton({
   pressed,
   extended = false,
   live = false,
-  variant: givenVariant = "accent",
+  variant = "accent",
   tooltip,
   tooltipSide = "top",
   hideWhenOverlay = true,
@@ -230,7 +216,6 @@ export function FloatingActionButton({
   const overlay = useOverlayOpen(hideWhenOverlay);
   const hidden = hiddenProp || overlay || undefined;
   const [marker, dir] = usePortalDir();
-  const variant = givenVariant === "primary" ? deprecatedPrimary("FloatingActionButton variant") : givenVariant;
   const toggle = pressed !== undefined;
   const tip = tooltip === true ? label : tooltip === false || tooltip === "" ? undefined : tooltip;
   const wrapped = tip !== undefined && tip !== null;
@@ -700,15 +685,9 @@ export interface FloatingActionProps extends Omit<ButtonHTMLAttributes<HTMLButto
   pressedStyle?: "tint" | "plain";
   /**
    * `accent`: the brand-filled member, for the group's main action (the /transactions
-   * "+"), as Button's `accent`. `default` (default): the quiet one. `primary` is a
-   * deprecated alias of `accent` (0.49; a development build warns once), removed no
-   * earlier than 0.51.
+   * "+"), as Button's `accent`. `default` (default): the quiet one.
    */
-  variant?:
-    | "default"
-    | "accent"
-    /** @deprecated 0.49 — use `accent` (same look); removed in 0.51. */
-    | "primary";
+  variant?: "default" | "accent";
   /**
    * A count in a dot at the member's top end corner — the /transactions invoices link's
    * pending count. Nothing is drawn for `0` or less; above 99 it reads `99+`. The count
@@ -754,7 +733,7 @@ export function FloatingAction({
   icon,
   pressed,
   pressedStyle = "tint",
-  variant: givenVariant = "default",
+  variant = "default",
   badge,
   badgeLabel,
   badgeTone = "warning",
@@ -773,7 +752,6 @@ export function FloatingAction({
   const counted = badge !== undefined && badge > 0;
   const name = counted ? `${label}, ${badgeLabel ?? labels.badge(badge)}` : label;
   const isLink = href !== undefined;
-  const variant = givenVariant === "primary" ? deprecatedPrimary("FloatingAction variant") : givenVariant;
   const look = cn(
     "relative flex size-12 items-center justify-center transition-colors",
     "outline-none focus-visible:ring-inset",

package/src/components/icon-button.tsx

@@ -28,9 +28,8 @@ import {
   HIT_AREA_LARGE,
   TOUCH_TARGET_LARGE,
   buttonVariantClasses,
-  resolveButtonVariant,
 } from "./button-look";
-import type { ButtonVariant, CanonicalButtonVariant } from "./button-look";
+import type { ButtonVariant } from "./button-look";
 
 // Canonical square icon-only button. <Button> carries TEXT geometry — px-3 py-2
 // gap-2 — so rendering a bare glyph through it gives a small icon in a wide,
@@ -200,7 +199,7 @@ function iconButtonToneClass(tone: IconButtonTone, quiet: boolean | undefined):
 // and would out-rank a caller's plain `hover:` override), each variant pins its
 // RESTING look under `disabled:hover:`, which out-ranks any `hover:` by specificity
 // and only ever matches a disabled button.
-const ICON_BUTTON_DISABLED_REST: Record<CanonicalButtonVariant | "overlay" | "shutter", string> = {
+const ICON_BUTTON_DISABLED_REST: Record<ButtonVariant | "overlay" | "shutter", string> = {
   default: "disabled:hover:bg-surface-2",
   secondary: "disabled:hover:bg-transparent",
   ghost: "disabled:hover:bg-transparent",
@@ -634,7 +633,6 @@ function iconButtonLook({
   /** The label is drawn beside the glyph (see `labelVisible`). */
   withText?: boolean;
 }) {
-  const look = variant === "overlay" || variant === "shutter" ? variant : resolveButtonVariant(variant, "IconButton variant");
   return cn(
     ICON_BUTTON_BASE,
     withText
@@ -646,13 +644,13 @@ function iconButtonLook({
     withText ? TOUCH_TARGET_LARGE : ICON_BUTTON_TOUCH_LARGE[size],
     glyphSize !== undefined && ICON_BUTTON_GLYPH_SIZES[glyphSize],
     // After the size, so the overlay's `rounded-full` beats the small sizes' `rounded`.
-    look === "overlay"
+    variant === "overlay"
       ? ICON_BUTTON_OVERLAY
-      : look === "shutter"
+      : variant === "shutter"
         ? ICON_BUTTON_SHUTTER
-        : buttonVariantClasses[look],
+        : buttonVariantClasses[variant],
     shape === "round" && "rounded-full",
-    ICON_BUTTON_DISABLED_REST[look],
+    ICON_BUTTON_DISABLED_REST[variant],
     iconButtonToneClass(tone, quiet),
     toneColor !== undefined && typeof toneColor !== "string" && ICON_BUTTON_TONE_PAIR,
   );

package/src/components/select.tsx

@@ -18,6 +18,8 @@ import {
   FieldChevron,
   FieldGroup,
   FloatingField,
+  SELECT_MENU_DRESS,
+  SELECT_SM,
   fieldBelow,
 } from "./field-base";
 
@@ -88,11 +90,6 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   ref?: Ref<HTMLSelectElement>;
 }
 
-// The compact select: the field's colours, a toolbar button's height. `py-0` and a
-// fixed height rather than a smaller padding, so the box is 28px whatever line
-// height the caller's type brings with it.
-const SELECT_SM = "h-7 py-0 ps-2 pe-7 text-xs";
-
 /** Keys a locked select still answers: leaving it, and dismissing its tooltip. Every
  *  other key would open the list or step the value. */
 const LOCKED_SELECT_KEYS = new Set(["Tab", "Escape", "Shift"]);
@@ -171,7 +168,7 @@ export function Select(props: SelectProps) {
   // moves onto the rows instead (option padding counts toward the row height the
   // browser sizes the box by), and the box keeps no bottom padding: exactly `size`
   // whole rows, at any width.
-  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : "appearance-none pe-9";
+  const dress = listBox ? "overflow-y-auto [&_option]:py-1" : SELECT_MENU_DRESS;
   // Locked: focusable, but nothing opens the list or moves the value, and nothing is
   // reported. The no-op `onChange` keeps a controlled select's value where React put
   // it (and keeps React from warning about a `value` with no handler).

package/src/components/stat-tile.tsx

@@ -209,8 +209,15 @@ export interface StatTileProps
    * the whole list up to bring one row with it would put them between the headline
    * and its delta. Same shape as a sub-value, so the `tone` rules are the same.
    * Withheld while `loading`, like the sub-values.
+   *
+   * 0.51: or several, in order (keksdose #633). Its figure tiles carry two forward rows,
+   * "Committed <date>" (today plus what is scheduled) and "Projected <date>" (that plus the
+   * usual variable money), both of which belong with the headline and neither with the
+   * history below. The tile draws what it is given; which rows to give is the app's rule
+   * (keksdose shows both on every tile, live #455, even where Committed equals the figure
+   * so far).
    */
-  projection?: StatTileSubValue;
+  projection?: StatTileSubValue | readonly StatTileSubValue[];
   /**
    * Smaller figures under the headline, label left and figure right.
    *
@@ -349,6 +356,9 @@ export function StatTile({
   const valueId = `${id}-value`;
   const deltaId = `${id}-delta`;
   const priv = sensitive ? "" : undefined;
+  // One projection or several (0.51), as a list either way.
+  const projections: readonly StatTileSubValue[] =
+    projection === undefined ? [] : isFigureList(projection) ? projection : [projection];
 
   const fmt =
     format ??
@@ -543,9 +553,11 @@ export function StatTile({
 
       {/* At Large the delta and description follow the figure at once, and the
           projection moves down with the other figures (see `subValues`). */}
-      {!large && !loading && projection && (
-        <dl className="mt-0.5">
-          <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} />
+      {!large && !loading && projections.length > 0 && (
+        <dl className="mt-0.5 space-y-0.5">
+          {projections.map((p, i) => (
+            <FigureRow key={i} figure={p} tileTone={tone} show={show} priv={priv} />
+          ))}
         </dl>
       )}
 
@@ -553,11 +565,12 @@ export function StatTile({
       {description != null && <div className="mt-1 text-xs text-muted">{description}</div>}
       {!large && graphic && <div className="mt-2">{graphic}</div>}
 
-      {!loading && ((large && projection) || (subValues && subValues.length > 0)) && (
+      {!loading && ((large && projections.length > 0) || (subValues && subValues.length > 0)) && (
         <dl data-slot="stat-tile-figures" className={cn("mt-1.5", large ? "space-y-1.5" : "space-y-0.5")}>
-          {large && projection && (
-            <FigureRow figure={projection} tileTone={tone} show={show} priv={priv} stacked />
-          )}
+          {large &&
+            projections.map((p, i) => (
+              <FigureRow key={`projection-${i}`} figure={p} tileTone={tone} show={show} priv={priv} stacked />
+            ))}
           {subValues?.map((sv, i) => (
             <FigureRow key={i} figure={sv} tileTone={tone} show={show} priv={priv} stacked={large} />
           ))}
@@ -575,7 +588,12 @@ export function StatTile({
   );
 }
 
-/** One label/value row of a `<dl>`: a sub-value, or the projection. */
+/** `Array.isArray` narrows a readonly array to `any[]`; this keeps the element type. */
+function isFigureList(p: StatTileSubValue | readonly StatTileSubValue[]): p is readonly StatTileSubValue[] {
+  return Array.isArray(p);
+}
+
+/** One label/value row of a `<dl>`: a sub-value, or a projection. */
 function FigureRow({
   figure,
   tileTone,

package/src/i18n/german.ts

@@ -2036,6 +2036,8 @@ export function germanLabels(numberLocale: string): UiKitLabels {
         saving: "Wird gespeichert…",
       },
       dev: {
+        menu: "Dev-Werkzeuge",
+        overridesOn: "Überschreibungen aktiv",
         roleHeading: "Dev · Rolle",
         switchPlan: "Tarif wechseln",
         plan: (value) => `Tarif: ${value}`,

package/src/i18n/kit-labels.tsx

@@ -498,8 +498,8 @@ export interface UiKitLabels {
    *  403 page, the shared sections, the overview's tiles and the Tools list
    *  (docs/admin-harmonization.md §3.1). */
   adminArea: AdminAreaLabels;
-  /** 0.42.0: the top bar's shared parts — `TourMenu`, `SyncStatusIndicator`, `DevSwitchers`
-   *  (docs/top-bar-harmonization.md §3.1). */
+  /** 0.42.0: the top bar's shared parts — `TourMenu`, `SyncStatusIndicator`, `DevMenu`
+   *  (0.42's `DevSwitchers`; docs/top-bar-harmonization.md §3.1, §2.7.1). */
   topBarParts: TopBarPartsLabels;
   /** 0.45.0: "Send a test mail to me" (docs/admin-harmonization.md §9.2.4). */
   mailTestCard: MailTestCardLabels;

package/src/i18n/locales/es.ts

@@ -1972,6 +1972,8 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
         saving: "Guardando…",
       },
       dev: {
+        menu: "Herramientas de desarrollo",
+        overridesOn: "Anulaciones activas",
         roleHeading: "Dev · rol",
         switchPlan: "Cambiar de plan",
         plan: (value) => `Plan: ${value}`,

package/src/i18n/locales/fr.ts

@@ -2011,6 +2011,8 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
         saving: "Enregistrement…",
       },
       dev: {
+        menu: "Outils de dev",
+        overridesOn: "Forçages actifs",
         roleHeading: "Dev · rôle",
         switchPlan: "Changer de formule",
         plan: (value) => `Formule\u00a0: ${value}`,

package/src/i18n/locales/hu.ts

@@ -1976,6 +1976,8 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
         saving: "Mentés…",
       },
       dev: {
+        menu: "Fejlesztői eszközök",
+        overridesOn: "Felülbírálások bekapcsolva",
         roleHeading: "Dev · szerepkör",
         switchPlan: "Csomag váltása",
         plan: (value) => `Csomag: ${value}`,

package/src/i18n/locales/it.ts

@@ -1991,6 +1991,8 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
         saving: "Salvataggio…",
       },
       dev: {
+        menu: "Strumenti di sviluppo",
+        overridesOn: "Override attivi",
         roleHeading: "Dev · ruolo",
         switchPlan: "Cambia piano",
         plan: (value) => `Piano: ${value}`,

package/src/i18n/locales/zh.ts

@@ -1894,6 +1894,8 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
         saving: "正在保存…",
       },
       dev: {
+        menu: "开发工具",
+        overridesOn: "覆盖已开启",
         roleHeading: "开发 · 角色",
         switchPlan: "切换套餐",
         plan: (value) => `套餐：${value}`,

package/src/index.ts

@@ -1075,7 +1075,10 @@ export type {
   PublicFooterProps,
 } from "./landing/landing-sections";
 export { usePageSeo, seoCopyProblems, metaContent } from "./landing/page-seo";
-export type { SeoCopy, SeoCopyLimits, SeoCopyProblem, SeoCopyProblemCode } from "./landing/page-seo";
+export type { PageSeo, SeoCopy, SeoCopyLimits, SeoCopyProblem, SeoCopyProblemCode } from "./landing/page-seo";
+// 0.51.0 (Marcel 2026-10-26): the frame of a public page that is not the landing or a legal page.
+export { PublicPage } from "./landing/public-page";
+export type { PublicPageProps } from "./landing/public-page";
 
 // ── demo ─────────────────────────────────────────────────────────────────────
 // 0.31.0 (docs/landing-demo-harmonization.md): the demo's start, banner, countdown and end.

package/src/landing/page-seo.ts

@@ -6,6 +6,19 @@ import { useEffect } from "react";
  * and the two pure helpers each app's SEO test is built from.
  */
 
+/** What {@link usePageSeo} declares for a page. */
+export interface PageSeo {
+  canonicalPath: string;
+  title?: string;
+  description?: string;
+  /** Structured data for this page, as the object (not a string). Injected as an
+   *  `application/ld+json` DATA BLOCK — a script element the browser never executes,
+   *  which is also why it can be added here rather than in `index.html`: the CSP
+   *  carries a HASH of the one inline script that file is allowed to have, and
+   *  `csp-inline-script.test.ts` fails the build on a second one (live #250). */
+  jsonLd?: Record<string, unknown>;
+}
+
 /**
  * Declares the current page's canonical URL — and optionally its title and meta
  * description — while the calling component is mounted (feedback #129).
@@ -28,23 +41,22 @@ import { useEffect } from "react";
  * landing calls it with `canonicalPath: "/"` on both `/` and `/welcome`, so the two URLs
  * of one page are one result; there are no per-language URLs and no hreflang.
  */
-export function usePageSeo({
-  canonicalPath,
-  title,
-  description,
-  jsonLd,
-}: {
-  canonicalPath: string;
-  title?: string;
-  description?: string;
-  /** Structured data for this page, as the object (not a string). Injected as an
-   *  `application/ld+json` DATA BLOCK — a script element the browser never executes,
-   *  which is also why it can be added here rather than in `index.html`: the CSP
-   *  carries a HASH of the one inline script that file is allowed to have, and
-   *  `csp-inline-script.test.ts` fails the build on a second one (live #250). */
-  jsonLd?: Record<string, unknown>;
-}): void {
+export function usePageSeo(seo: PageSeo): void {
+  usePageSeoIf(seo);
+}
+
+/**
+ * @internal {@link usePageSeo}, or nothing for `null` — for a component that declares a
+ * page only sometimes (`PublicPage`'s `seo`): hooks cannot be called conditionally, so the
+ * switch is the argument, as `useNoIndex(active)` has it.
+ */
+export function usePageSeoIf(seo: PageSeo | null): void {
+  const canonicalPath = seo?.canonicalPath;
+  const title = seo?.title;
+  const description = seo?.description;
+  const jsonLd = seo?.jsonLd;
   useEffect(() => {
+    if (canonicalPath === undefined) return;
     const link = document.createElement("link");
     link.rel = "canonical";
     link.href = new URL(canonicalPath, window.location.origin).toString();