@eifi1/ui-kit 0.50.0 → 0.51.0

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/inline-entity-combobox.tsx

@@ -8,6 +8,7 @@ import { cn } from "../lib/cn";
 import { useDropdown } from "./dropdown";
 import { takeEscape, useDismissLayer } from "../hooks/use-dismiss";
 import { isImeEnter } from "../lib/ime";
+import { isQuietFocus } from "../lib/quiet-focus";
 import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { PickerSheet, SHEET_ROW_CLASS } from "./picker-sheet";
 import {
@@ -255,6 +256,8 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
   // Escape layer is this field's own.
   const { open, setOpen, wrapperRef, panelRef } = useDropdown({ backCloses: !isPhone, escapeLayer: false });
   const primaryOnly = usePrimaryPressOnly();
+  // The field took the tour's quiet focus (§11.8) and has not opened since.
+  const quietRef = useRef(false);
   const [active, setActive] = useState(-1);
   // null = not editing → the input shows the selected option's label.
   const [text, setText] = useState<string | null>(null);
@@ -508,13 +511,27 @@ export function InlineEntityCombobox<V extends string | number, C extends ComboC
                 // say why, and opens nothing.
                 if (primaryOnly.fromAuxButton() || locked) return;
                 setText(shown);
+                // The tour's focus on arrival (§11.8) opens nothing: the list would cover
+                // its card (0.50.1). A click, ArrowDown or typing opens it.
+                if (isQuietFocus(e.currentTarget)) {
+                  quietRef.current = true;
+                  return;
+                }
                 e.currentTarget.select();
                 setOpen(true);
                 // The sheet has its own input; the field behind it must not also pull up
                 // the keyboard and scroll the page under the dialog.
                 if (isPhone) sheetInputRef.current?.focus();
               }}
+              // After a quiet focus, the person's click on the already-focused field
+              // fires no `focus`: the click is their "open" instead.
+              onClick={() => {
+                if (!quietRef.current || locked) return;
+                quietRef.current = false;
+                setOpen(true);
+              }}
               onBlur={() => {
+                quietRef.current = false;
                 // On a phone the blur is the SHEET taking focus, not the user leaving the
                 // field — reconciling there would close the sheet the instant it opened.
                 if (!isPhone) reconcile();

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();

package/src/landing/public-page.tsx

@@ -0,0 +1,106 @@
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import { cn } from "../lib/cn";
+import { useNoIndex } from "../hooks/use-noindex";
+import { PublicFooter } from "./landing-sections";
+import { usePageSeoIf, type PageSeo } from "./page-seo";
+
+export interface PublicPageProps extends Omit<ComponentPropsWithRef<"div">, "title" | "children"> {
+  /** The app's public header — the one a signed-out visitor already sees on the landing
+   *  (`PublicHeader`, keksdose's `LandingHeader`, Kurvenschmiede's). */
+  header?: ReactNode;
+  /** Default: `<PublicFooter />`, the three legal links (§3.3: one click away from every
+   *  page a visitor can reach). Pass your own `PublicFooter` for a tagline; `null` for none. */
+  footer?: ReactNode;
+  /** The page's heading. */
+  title: ReactNode;
+  /** One or two sentences under the title: what the page is. */
+  description?: ReactNode;
+  /** Above the title — the app's "← Back" link (`<TextLink icon={ArrowLeft}>`). */
+  back?: ReactNode;
+  /** Beside the title from `sm` up, under it on a phone: the page's own controls (a
+   *  region and a month picker on keksdose's /prices). */
+  actions?: ReactNode;
+  /**
+   * What search engines are told, and it has no default on purpose: a public page is
+   * either one to find — then it names its canonical path (and title, description,
+   * structured data), through {@link usePageSeo} — or one to keep out of the index
+   * (`"noindex"`: a 404, a page a link was sent for). `null` declares nothing, for a page
+   * that is not the page: a preview inside another (the showcase).
+   */
+  seo: PageSeo | "noindex" | null;
+  /** The column. `"wide"` (default) is the landing's sections' width, for tiles and
+   *  tables; `"prose"` the legal pages' reading column. */
+  width?: "wide" | "prose";
+  /** Default `h1`; a lower level for a page shown inside another (a preview), as the
+   *  landing's sections take one. */
+  headingAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+  /** `false` draws the column as a `<div>` instead of `<main>`, for a host that has its
+   *  own `<main>`. Default true. */
+  landmark?: boolean;
+  children: ReactNode;
+}
+
+const WIDTH = { wide: "max-w-6xl", prose: "max-w-3xl" } as const;
+
+/**
+ * A public page that is not the landing and not a legal page (0.51, Marcel 2026-10-26):
+ * keksdose's regional price snapshot at /prices, and Kurvenschmiede's public pages. The
+ * frame every public page has — the app's public header, a column, the public footer — is
+ * {@link LegalPage}'s, without the legal parts: no numbered sections, no beta notice, no
+ * "Back to home" of its own, and indexed unless it says otherwise.
+ *
+ * keksdose was about to compose it by hand (`PublicHeader` + a column + `PublicFooter` +
+ * `usePageSeo`) for /prices, and Kurvenschmiede will have its next public page outside the
+ * shell; each app would have drawn the frame its own way. (KS's visitor pages — /dashboard,
+ * /control, /dynamics, /steering — are working screens and stay in the app shell, with
+ * `VisitorLegalFooter`; this frame is not for them.)
+ * The width is the landing's (`max-w-6xl`), so a link from a feature row lands on a page
+ * whose edges line up with the one it came from.
+ *
+ * `seo` is required: a public page is found or it is not, and forgetting the canonical on
+ * a page meant to be found is silent. The kit's words are none — the title, the copy and
+ * the back link are the app's.
+ */
+export function PublicPage({
+  header,
+  footer,
+  title,
+  description,
+  back,
+  actions,
+  seo,
+  width = "wide",
+  headingAs: Heading = "h1",
+  landmark = true,
+  className,
+  children,
+  ...rest
+}: PublicPageProps) {
+  useNoIndex(seo === "noindex");
+  usePageSeoIf(seo === "noindex" ? null : seo);
+  const Main = landmark ? "main" : "div";
+  return (
+    <div {...rest} data-slot="public-page" className={cn("flex min-h-full flex-col", className)}>
+      {header}
+      <Main className="flex-1">
+        <div data-slot="public-page-column" className={cn("mx-auto w-full px-4 py-12", WIDTH[width])}>
+          {back != null && <div className="mb-4 text-sm">{back}</div>}
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+            <div className="min-w-0">
+              <Heading className="text-3xl font-bold tracking-tight break-words text-primary">{title}</Heading>
+              {description != null && <p className="mt-3 max-w-2xl text-lg text-secondary">{description}</p>}
+            </div>
+            {actions != null && (
+              <div data-slot="public-page-actions" className="flex shrink-0 flex-wrap items-center gap-2">
+                {actions}
+              </div>
+            )}
+          </div>
+          <div className="mt-8 space-y-8">{children}</div>
+        </div>
+      </Main>
+      {footer === undefined ? <PublicFooter /> : footer}
+    </div>
+  );
+}

package/src/lib/quiet-focus.ts

@@ -0,0 +1,32 @@
+/**
+ * Focus that is not a request to open anything (0.50.1, keksdose B1).
+ *
+ * A guided tour focuses a field step's first control on arrival (tours §11.8). The kit's
+ * pickers that open their list on focus — Combobox (and the category pickers built on it),
+ * Autocomplete, InlineEntityCombobox — opened it then too, and the list, a later layer
+ * (§11.6), covered the tour card with its Next and "Leave empty".
+ *
+ * {@link focusQuietly} marks the element for the length of its synchronous `focus()` call;
+ * a picker's `onFocus` asks {@link isQuietFocus} and, when it is, takes the focus without
+ * opening. React dispatches `onFocus` inside the native `focusin`, which `focus()` fires
+ * synchronously, so the mark is seen by exactly that focus and by no later one. A click or
+ * Tab of the person's own opens as before; from a quiet focus, ArrowDown, typing or a click
+ * opens the list.
+ */
+let quiet: Element | null = null;
+
+/** `el.focus(options)`, telling the kit's open-on-focus pickers not to open. */
+export function focusQuietly(el: HTMLElement, options?: FocusOptions): void {
+  const before = quiet;
+  quiet = el;
+  try {
+    el.focus(options);
+  } finally {
+    quiet = before;
+  }
+}
+
+/** True while `el` is being focused by {@link focusQuietly}. */
+export function isQuietFocus(el: Element): boolean {
+  return quiet === el;
+}