@cosmicdrift/kumiko-renderer 0.386.0 → 0.388.0

package/dist/web/primitives/combobox.js

@@ -1,18 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// Tier 2.1c: Searchable Select / Combobox.
+// Searchable Select / Combobox.
 //
-// Pattern ist das shadcn-Standard-Combobox: Popover-Trigger als Button
-// (zeigt aktuellen Wert oder Placeholder), Popover-Content enthält
-// cmdk-Command mit Search-Input + filterable Item-List.
+// The pattern follows the shadcn standard: a popover trigger rendered as a
+// button showing the current value or placeholder, with a popover containing
+// a cmdk command with a search input and filterable item list.
 //
-// cmdk ist Radix's Standard-Combobox (Library für Command-K + Searchable
-// Selects), client-side Fuzzy-Match via `Command.Filter` mit Default-
-// Behavior. Server-side Remote-Search (debounced query) ist nicht im
-// MVP — kommt später als zweiter Mode-Schalter.
+// cmdk provides client-side fuzzy matching through `Command.Filter` by
+// default. Server-side remote search with a debounced query is not included
+// in the MVP and can be enabled later as a separate mode.
 //
-// Multi-Mode: `multiple: true` schaltet auf Tag-Anzeige + Mehrfach-
-// Auswahl. Selected-Tags rendern als kleine entfernbare Chips, das
-// Search-Input bleibt offen für weitere Auswahl.
+// Multi-mode: `multiple: true` switches to tag display and multi-selection.
+// Selected values render as small chips, while the search input remains open
+// for additional selections.
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { Command } from "cmdk";
 import { Check, ChevronDown, Loader2, Plus } from "lucide-react";
@@ -31,23 +30,24 @@ const popoverContentClass = "z-50 w-[var(--radix-popover-trigger-width)] rounded
     "data-[state=open]:fade-in-0";
 const tagClass = "inline-flex items-center gap-1 rounded-sm bg-muted px-2 py-0.5 text-xs " +
     "font-medium text-muted-foreground";
-// Debounce-Default lebt zentral (hooks/reference-limits.ts) damit
-// app-weit ein consistentes Tipp-Window gilt.
-// Substring-Filter für cmdk's Local-Mode. cmdk's Default ist
-// `command-score` (fuzzy), das matcht "Ad" auch gegen "Backend" weil 'a'
-// und 'd' irgendwo enthalten sind — für Reference-Lookups irreführend
-// (User erwartet Prefix/Substring-Verhalten, nicht Subsequence-Match).
-// Returns 1 wenn search im value enthalten, 0 sonst — cmdk hidet Items
-// mit Score 0.
+// The debounce default is centralized in hooks/reference-limits.ts so the
+// same typing interval applies throughout the app.
+// Substring filter for cmdk's local mode. cmdk's default is
+// `command-score` (fuzzy), which matches "Ad" against "Backend" because 'a'
+// and 'd' occur somewhere in the text. That is misleading for reference
+// lookups, where users expect prefix or substring matching rather than
+// subsequence matching.
+// Returns 1 when search occurs in value or keywords, and 0 otherwise;
+// cmdk hides items with a score of 0.
 function substringFilter(value, search, keywords) {
     const needle = search.toLowerCase();
     return [value, ...(keywords ?? [])].some((text) => text.toLowerCase().includes(needle)) ? 1 : 0;
 }
 export function ComboboxInput(props) {
     const { id, name, options, disabled, required, hasError, ariaLabel, placeholder, searchPlaceholder, emptyText, onSearchChange, loading, defaultOpen, onCreate, createLabel, } = props;
-    // i18n-Defaults aus dem Framework-Bundle (kumikoDefaultTranslations).
-    // Caller-Override gewinnt; Bundle-Override greift wenn der Caller
-    // den Prop nicht setzt; raw-Key-Fallback wenn weder noch.
+    // i18n defaults come from the framework bundle (kumikoDefaultTranslations).
+    // A caller override takes precedence, followed by the bundle override;
+    // the raw key is used only when neither is available.
     const t = useTranslation();
     const effectivePlaceholder = placeholder ?? t("kumiko.combobox.placeholder");
     const effectiveSearchPlaceholder = searchPlaceholder ?? t("kumiko.combobox.search-placeholder");
@@ -56,10 +56,10 @@ export function ComboboxInput(props) {
     const effectiveCreateLabel = createLabel ?? t("kumiko.actions.create");
     const multiple = props.multiple === true;
     const [open, setOpen] = useState(defaultOpen === true);
-    // Local Search-Buffer für Remote-Mode. Tipps werden mit 300ms
-    // Debounce an onSearchChange weitergereicht, damit pro Tastendruck
-    // nicht ein Server-Roundtrip fliegt. Im Local-Mode ist das State
-    // ungenutzt (cmdk steuert sein Search-Input intern).
+    // Local search buffer for remote mode. Keystrokes are passed to
+    // onSearchChange after a 300ms debounce, avoiding a server round-trip for
+    // every keystroke. In local mode, this state is unused because cmdk
+    // controls its search input internally.
     const [searchTerm, setSearchTerm] = useState("");
     const isRemote = onSearchChange !== undefined;
     useEffect(() => {
@@ -68,15 +68,14 @@ export function ComboboxInput(props) {
         const timer = setTimeout(() => onSearchChange(searchTerm), REFERENCE_SEARCH_DEBOUNCE_MS);
         return () => clearTimeout(timer);
     }, [isRemote, searchTerm, onSearchChange]);
-    // Beim Schließen des Popovers den Suchbegriff zurücksetzen damit
-    // beim nächsten Öffnen nicht der vorherige term hängt. Würde sonst
-    // den Server-State stale halten zwischen Aufrufen.
+    // Reset the search term when the popover closes so the next opening does not
+    // retain the previous term and leave the server state stale between uses.
     useEffect(() => {
         if (!open && searchTerm !== "")
             setSearchTerm("");
     }, [open, searchTerm]);
-    // Discriminated-Union per `multiple`: TS narrowt props.value/onChange
-    // automatisch — Runtime-Cast entfällt.
+    // The discriminated union lets TypeScript narrow props.value and onChange
+    // automatically, so no runtime cast is needed.
     const selectedValues = multiple ? new Set(props.value) : new Set();
     const singleValue = !multiple ? props.value : "";
     const singleLabel = options.find((o) => o.value === singleValue)?.label ?? "";
@@ -93,10 +92,10 @@ export function ComboboxInput(props) {
     };
     const triggerLabel = multiple ? null : singleLabel === "" ? placeholder : singleLabel;
     return (_jsxs(PopoverPrimitive.Root, { open: open, onOpenChange: setOpen, children: [_jsx("input", { type: "hidden", name: name, value: multiple ? props.value.join(",") : props.value }), _jsxs(PopoverPrimitive.Trigger, { id: id, "data-testid": `combobox-${id}`, type: "button", disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-label": ariaLabel, "aria-haspopup": "listbox", "aria-expanded": open, title: !multiple && singleLabel !== "" ? singleLabel : undefined, className: cn(triggerClass, hasError === true && "border-destructive focus-visible:ring-destructive"), children: [multiple ? (_jsx("span", { className: "flex flex-wrap items-center gap-1", children: selectedValues.size === 0 ? (_jsx("span", { className: "text-muted-foreground", children: effectivePlaceholder })) : (
-                        // Tags sind read-only Anzeige (kein nested <button>
-                        // möglich im Trigger-<button>). Entfernen via Re-Click
-                        // im Combobox-Popup — der Item-Toggle deselektiert die
-                        // entsprechende Option (analog shadcn-Standard-Combobox).
+                        // Tags are read-only because the trigger is a <button> and cannot contain a
+                        // nested <button>. Removing a value therefore requires selecting
+                        // it again in the combobox popup, where the item toggle deselects
+                        // the corresponding option.
                         [...selectedValues].map((v) => {
                             const opt = options.find((o) => o.value === v);
                             return (_jsx("span", { className: tagClass, children: opt?.label ?? v }, v));

package/dist/web/primitives/data-table-cell.js

@@ -152,7 +152,7 @@ function isMoneyValue(value) {
 //
 //   - boolean -> check mark / empty
 //   - timestamp/date -> locale-formatted (no raw ISO string)
-//   - number/decimal/bigInt → locale-formatted via Intl.NumberFormat (fw#2160)
+//   - number/decimal/bigInt → locale-formatted via Intl.NumberFormat
 //   - select/multiSelect → human-readable (kebab-case → Title Case), multiSelect values joined with ", "
 //   - money → { amount, currency } formatted via Intl (not "[object Object]")
 //   - text/else -> toString
@@ -390,7 +390,7 @@ export function DataTableCell({ value, row, field, type, renderer, optionLabels,
     // A select value renders as a pill instead of plain text. When the raw
     // value is a known status word, it carries the same tone as the
     // projectionDetail header badge — a status column stayed grey while the
-    // detail view of the same value was coloured (fw#2579). Unknown values
+    // detail view of the same value was coloured. Unknown values
     // keep the neutral outline pill.
     if (type === "select" && value !== null && value !== undefined && value !== "") {
         return selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge);

package/dist/web/primitives/data-table.js

@@ -3,6 +3,7 @@ import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronRight, Search, SlidersHorizontal, X, } from "lucide-react";
 import { Fragment, useId, useState, } from "react";
 import { useOptionalLocale, useOptionalTranslation } from "../../index.js";
+import { UNIFORM_BAR_CONTROLS_CLASSES } from "../layout/uniform-bar-controls.js";
 import { cn } from "../lib/cn.js";
 import { Button as UiButton } from "../ui/button.js";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
@@ -58,13 +59,12 @@ function showFullTextOnHover(event) {
     element.title = element.scrollWidth > element.clientWidth ? (element.textContent ?? "") : "";
 }
 export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, emptyState, toolbarStart, toolbarDescription, toolbarEnd, pager, onReachEnd, loadingMore, hasMore, itemNoun, rowActions, rowActionMode, rowGrouping, rowTone, filterFacets, filterValues, onFilterChange, onFilterReset, dateRangeFacets, onDateRangeChange, testId, onCellChange, getRowTestId, getCellTestId, chromeless, scrollBody, screenPadding, expandedRowIds, onToggleRowExpanded, renderExpandedRow, }) {
-    // One locale/translate subscription per table — not per cell (fw#2345).
+    // One locale/translate subscription per table — not per cell.
     // Optional hooks: a bare DataTable outside LocaleProvider must not crash.
     const tableTranslate = useOptionalTranslation();
     const tableLocale = useOptionalLocale();
     // Below 768px a table scrolls its columns out of reach with no visible
-    // affordance (fw#2159 fixed the desktop case; narrow viewports never had
-    // one). Cards replace the table entirely below the breakpoint — same
+    // affordance. Cards replace the table entirely below the breakpoint — same
     // single-mount pattern as EmbeddedListInput/embedded-list-input.tsx.
     const isNarrow = useIsNarrowViewport();
     const [facetsOpenNarrow, setFacetsOpenNarrow] = useState(false);
@@ -269,11 +269,11 @@ export function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange
                 ? screenPaddingClassName
                 : screenPadding === false
                     ? undefined
-                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", fillsHeight
+                    : "p-6")), children: [hasToolbar && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-toolbar` : "render-list-toolbar", className: cn("flex flex-wrap items-center", UNIFORM_BAR_CONTROLS_CLASSES, fillsHeight
                     ? isNarrow
                         ? "shrink-0 gap-2 p-3"
                         : "min-h-13 shrink-0 gap-2 px-6 py-2 md:py-0"
                     : "gap-3"), children: [toolbarStart !== undefined && (_jsxs("div", { className: cn(fillsHeight
-                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11 md:[&_input]:h-8"
-                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), toolbarEnd !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: toolbarEnd }))] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6")), children: toolbarDescription })), content] }));
+                            ? "relative w-full md:w-[300px] max-md:flex-1 [&_input]:border-border-strong [&_input]:pl-8 [&_input]:max-md:h-11"
+                            : "flex-1 min-w-48 max-w-sm"), children: [fillsHeight && (_jsx(Search, { className: "pointer-events-none absolute left-2.5 top-1/2 z-10 size-4 -translate-y-1/2 text-muted-foreground", "aria-hidden": "true" })), toolbarStart] })), collapsesFacetsBehindButton ? (_jsxs(_Fragment, { children: [_jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: "size-11", "aria-label": tableTranslate?.("kumiko.list.filter.toggle") ?? "Filter", "aria-expanded": facetsOpenNarrow, "data-testid": testId !== undefined ? `${testId}-filter-toggle` : "filter-toggle", onClick: () => setFacetsOpenNarrow((open) => !open), children: _jsx(SlidersHorizontal, { className: "size-4", "aria-hidden": "true" }) }), facetsOpenNarrow && _jsx("div", { className: "w-full", children: facetCluster })] })) : (facetCluster), toolbarEnd !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-2 ml-auto", children: toolbarEnd }))] })), toolbarDescription !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-description` : "render-list-description", className: cn("m-0 pb-2 text-sm text-muted-foreground", fillsHeight && (isNarrow ? "px-3" : "px-6"), fillsHeight && !hasToolbar && "pt-4"), children: toolbarDescription })), content] }));
 }

package/dist/web/primitives/date-field.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // One source for both date primitives: DateInput (kind:"date") is a thin
 // re-export of this, TimestampInput (kind:"timestamp") uses it as the
 // date part next to the time input. So `date` and `timestamp` share the
-// same typing/navigation UX instead of two diverging primitives (#369).
+// same typing/navigation UX instead of two diverging primitives.
 import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
 import { useState } from "react";
 import { useTranslation } from "../../index.js";
@@ -57,7 +57,7 @@ export function DateField({ id, name, value, onChange, disabled, required, hasEr
                 // the app's UI locale via t() — a caller rendering a date in a
                 // locale that differs from the UI locale gets a mixed-locale
                 // placeholder (e.g. German UI + locale="en-US" → "MM/TT/JJJJ").
-                // Accepted for now (fw#1879): a static per-locale letter lookup
+                // Accepted for now: a static per-locale letter lookup
                 // would need its own locale-root resolution and tests for a
                 // placeholder-only, Low-severity mismatch.
                 placeholder: formatDatePlaceholder(resolvedLocale, {

package/dist/web/primitives/date-input.js

@@ -1,5 +1,5 @@
-// DateInput (kind:"date") — die tippbare Datums-Eingabe lebt in DateField,
-// damit `date` und `timestamp` dieselbe Tipp-/Kalender-UX teilen (#369).
-// Diese Datei hält nur das öffentliche Mapping; die Logik ist in
-// date-field.tsx, die Date-Parse-Utils in date-parse.ts.
+// DateInput (kind:"date") — the typeable date input lives in DateField,
+// so `date` and `timestamp` share the same typing/calendar UX.
+// This file only provides the public mapping; the logic is in
+// date-field.tsx, and the date parsing utilities are in date-parse.ts.
 export { DateField as DateInput } from "./date-field.js";

package/dist/web/primitives/default-form.js

@@ -49,7 +49,7 @@ export function DefaultForm({ onSubmit, focusFirstErrorKey, children, title, sub
     // it above the viewport edge; the shell shrinks (`flex-1`) to make room.
     const pinnedFooter = isPinnedFooter(stickyActions, fillHeight);
     const pinnedShellClassName = pinnedFooter ? "h-auto flex-1 pb-6" : undefined;
-    // Tab content (bedienkonzept A1): the head card is the ONLY card on the
+    // Tab content: the head card is the ONLY card on the
     // screen, so a tabbed projectionDetail's tab content must render as a
     // sibling of that card, not nest another one around itself — chromeless
     // skips the card wrapper and its border/padding so sections and footer
@@ -71,7 +71,7 @@ export function DefaultForm({ onSubmit, focusFirstErrorKey, children, title, sub
                         // FormScreenShell ancestor is itself height-constrained and
                         // shrinks it back down via min-h-0 — flex-1 would instead force
                         // it to always fill the remaining height, stretching a short
-                        // relatedList tab to the bottom of the panel (fw#2778).
+                        // relatedList tab to the bottom of the panel.
                         // The min-height floor keeps the card from collapsing to ~0 on short
                         // viewports; the shell then overflows and <main> scrolls instead of
                         // the overflow-hidden card clipping the table.

package/dist/web/primitives/dropdown-menu.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// shadcn-style DropdownMenu auf Radix-Basis. Wrappers um
-// @radix-ui/react-dropdown-menu mit den Tailwind-Token-Klassen die
-// die anderen Primitives auch nutzen — Trigger-Button-Look kommt vom
-// Caller (asChild-Pattern), wir liefern nur Content/Item/Label/
-// Separator/CheckboxItem mit konsistenter Optik.
+// shadcn-style DropdownMenu built on Radix. Wrappers around
+// @radix-ui/react-dropdown-menu use the same Tailwind token classes as
+// the other primitives. The caller provides the trigger-button styling
+// through the asChild pattern; this module supplies only Content, Item,
+// Label, Separator, and CheckboxItem with consistent styling.
 //
-// Vorteile gegenüber dem self-rolled useDropdownMenu-Hook:
-//  - Click-outside, Escape, Focus-Trap, Roving-Tabindex, ARIA-Roles,
-//    Pointer-vs-Keyboard-Subtleties — alles geschenkt von Radix.
-//  - Portal'd Content rendert über Stacking-Context-Grenzen (nützlich
-//    in Dialogs/Popovers).
-//  - Keyboard-Nav (↑↓ + Home/End) funktioniert von Haus aus.
+// Advantages over the custom useDropdownMenu hook:
+// - Click-outside, Escape, focus trapping, roving tabindex, ARIA roles,
+//   and pointer-versus-keyboard subtleties are handled by Radix.
+// - Portaled content renders across stacking-context boundaries, which is
+//   useful in dialogs and popovers.
+// - Keyboard navigation (↑↓ + Home/End) works by default.
 import * as Primitive from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
 import { cn } from "../lib/cn.js";
@@ -33,10 +33,9 @@ const itemClass = "relative flex cursor-default select-none items-center gap-2 r
 export function DropdownMenuItem({ className, ...props }) {
     return _jsx(Primitive.Item, { className: cn(itemClass, className), ...props });
 }
-// CheckboxItem mit Check-Icon links — für "ausgewählter Eintrag in
-// einer Liste"-Patterns (TenantSwitcher, LanguageSwitcher). Radix
-// rendert <ItemIndicator> nur wenn checked=true, kein eigener Branch
-// nötig.
+// CheckboxItem with a check icon on the left for "selected item in a list"
+// patterns (TenantSwitcher, LanguageSwitcher). Radix renders
+// <ItemIndicator> only when checked=true, so no separate branch is needed.
 export function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
     return (_jsxs(Primitive.CheckboxItem, { checked: checked, className: cn(itemClass, "pl-8 pr-2", className), ...props, children: [_jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(Primitive.ItemIndicator, { children: _jsx(Check, { className: "h-3.5 w-3.5" }) }) }), children] }));
 }

package/dist/web/primitives/embedded-list-input.js

@@ -8,7 +8,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Only one of the two layouts (table for md+, cards below md) is mounted
 // at a time, picked via useIsNarrowViewport — mounting both and toggling
 // with `hidden`/`md:hidden` left two live inputs per cell sharing one DOM
-// id (#1854). The `hidden md:block` / `md:hidden` classes stay on the
+// id. The `hidden md:block` / `md:hidden` classes stay on the
 // wrapper divs as a defensive fallback (e.g. SSR/no-JS, where
 // getServerSnapshot forces the desktop layout) even though
 // useIsNarrowViewport — unlike the vendored useIsMobile it replaced —
@@ -211,7 +211,7 @@ function RowActions({ rowIndex, rowsLength, minItems, maxItems, onDuplicateRow,
 }
 export function EmbeddedListInput({ id, columns, rows, totals, currency, disabled, fixedRows, minItems, maxItems, listIssues, rowIssues, cellIssues, onCellChange, onAddRow, onRemoveRow, onDuplicateRow, onMoveRow, onPasteCells, addLabel, actionsLabel, removeLabel, duplicateLabel, moveUpLabel, moveDownLabel, emptyLabel, emptyCtaLabel, testId, }) {
     // Callers that don't wire up the field-currency plumbing (or direct
-    // callers/tests that predate #1839) keep getting the same "EUR" this
+    // callers/tests) keep getting the same "EUR" this
     // component always hardcoded.
     const effectiveCurrency = currency ?? "EUR";
     const t = useTranslation();
@@ -231,7 +231,7 @@ export function EmbeddedListInput({ id, columns, rows, totals, currency, disable
     // notice the desktop table remounting with a fresh DOM node.
     const [scrollContainerEl, setScrollContainerEl] = useState(null);
     // Resetting scrollLeft here is what guarantees the table always opens
-    // scrolled fully left (fw#2159): browsers still auto-scroll a focused
+    // scrolled fully left: browsers still auto-scroll a focused
     // descendant into view even inside an overflow-x-auto container, but
     // that's now a real, user-drivable scroll instead of an invisible one.
     useEffect(() => {

package/dist/web/primitives/facet-filter.js

@@ -26,9 +26,9 @@ export function FacetFilter({ facet, selected, onChange, dense = false, }) {
     if (facet.chips !== undefined) {
         return _jsx(FacetChips, { facet: facet, selected: selected, onChange: onChange });
     }
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "h-8 border-border-strong px-2.5 max-md:h-11"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(UiButton, { variant: "outline", size: "sm", className: cn("h-9", dense && "border-border-strong px-2.5"), "data-testid": `facet-${facet.field}`, children: [facet.label, selected.length > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-1 rounded-sm px-1 font-normal tabular-nums", children: selected.length })), _jsx(ChevronDown, { className: "text-muted-foreground" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: "max-h-[var(--radix-dropdown-menu-content-available-height)] w-44 overflow-y-auto", children: facet.options.map((opt) => (_jsx(DropdownMenuCheckboxItem, { checked: selected.includes(opt.value), onCheckedChange: (checked) => toggle(opt.value, checked), onSelect: (e) => e.preventDefault(), "data-testid": `facet-${facet.field}-${opt.value}`, children: opt.label }, opt.value))) })] }));
 }
-// Time-range filter (fw#3104): two native <input type="date"> instead of a
+// Time-range filter: two native <input type="date"> instead of a
 // dropdown — the browser supplies the calendar, the locale and the keyboard
 // handling, so no date dependency is needed. Each bound constrains the other
 // through min/max so the picker can't offer an inverted span; the caller

package/dist/web/primitives/field.js

@@ -81,10 +81,11 @@ const FIELD_ICONS = {
     key: KeyRound,
     "map-pin": MapPin,
 };
+function isFieldIconKey(key) {
+    return Object.hasOwn(FIELD_ICONS, key);
+}
 export function fieldIconFor(icon) {
-    return icon !== undefined && Object.hasOwn(FIELD_ICONS, icon)
-        ? FIELD_ICONS[icon]
-        : undefined;
+    return icon !== undefined && isFieldIconKey(icon) ? FIELD_ICONS[icon] : undefined;
 }
 // Wraps a text/number input with a left-positioned prefix icon when
 // `icon` carries a known FIELD_ICONS key. `pl-8` overrides (via
@@ -127,7 +128,7 @@ export function withTrailingAction(action, input, keepWrapper = false) {
 // Default presentation for `kind: "select"` without a `display` of its own
 // (board rule): up to 3 short options read as a segmented control, up to 3
 // longer ones as a vertical radio list, everything else as a dropdown. Labels
-// arrive translated, so the widget can differ between UI languages (#2606).
+// arrive translated, so the widget can differ between UI languages.
 const SEGMENTED_SELECT_MAX_OPTIONS = 3;
 const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 16;
 export function defaultSelectPresentation(options) {
@@ -138,9 +139,9 @@ export function defaultSelectPresentation(options) {
         : "radioList";
 }
 // A "" value is the unselected placeholder, not a real choice — a radio
-// group can't render an unchecked-everything state as its own segment
-// (#2606 follow-up). Filtered once so the eligibility count and the
-// rendered segments never drift apart.
+// group can't render an unchecked-everything state as its own segment.
+// Filtered once so the eligibility count and the rendered segments never drift
+// apart.
 export function withoutSegmentedSelectPlaceholder(options) {
     return options.filter((option) => option.value !== "");
 }
@@ -162,7 +163,7 @@ export function RadioListSelect({ id, name, value, onChange, options, variant =
                         : "flex items-start gap-2 text-sm font-normal text-foreground has-[:disabled]:opacity-50", children: [_jsx("input", { type: "radio", name: name, value: opt.value, checked: opt.value === value, disabled: disabled === true || opt.disabled === true, "aria-describedby": opt.description !== undefined ? descriptionIdOf(opt) : undefined, "data-testid": `radio-list-${id}-${opt.value}`, onChange: () => onChange(opt.value), className: cn("size-4 accent-primary", card ? "mt-0.5 shrink-0" : "mt-0.5") }), _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: cn(card && "font-semibold"), children: opt.label }), opt.description !== undefined && (_jsx("span", { id: descriptionIdOf(opt), className: "text-[13px] text-foreground-secondary", children: opt.description }))] })] }, opt.value)))] }, section.heading ?? ""))) }));
 }
 // The vendored shadcn Textarea carries `field-sizing: content`, which derives
-// the box height from the content and makes the `rows` attribute inert (#2677).
+// the box height from the content and makes the `rows` attribute inert.
 // A declared row count therefore only survives as a min-height floor: the field
 // starts at `rows` lines tall and still grows with its content. The addend is
 // the textarea frame — py-2 top+bottom plus the 1px borders.

package/dist/web/primitives/file-thumbnail.d.ts

@@ -12,6 +12,9 @@ type FileMeta = {
     readonly fileName: string;
     readonly mimeType: string | undefined;
 };
+/** File names are per-user data and the server re-checks access per request, so
+ *  the cache must not outlive the session that filled it. */
+export declare function clearFileMetaCache(): void;
 export declare function useFileMeta(fileId: string): FileMeta | null;
 export declare function FileNameLink({ fileId, fallbackLabel, className, }: {
     readonly fileId: string;

package/dist/web/primitives/file-thumbnail.js

@@ -46,6 +46,11 @@ const META_BATCH_SIZE = 100;
 const META_CACHE_LIMIT = 500;
 const metaCache = new Map();
 let pendingMetaIds = new Map();
+/** File names are per-user data and the server re-checks access per request, so
+ *  the cache must not outlive the session that filled it. */
+export function clearFileMetaCache() {
+    metaCache.clear();
+}
 function parseBatchMeta(json) {
     const metaById = new Map();
     if (typeof json !== "object" || json === null || !("files" in json))

package/dist/web/primitives/form.d.ts

@@ -47,7 +47,7 @@ export declare function FormScreenShell({ children, className, testId, maxWidth,
     readonly maxWidth?: FormScreenShellWidth;
     /** Stacks children in a `h-full` flex column instead of normal document
      *  flow, so a `flex-1 min-h-0` child can claim the remaining height below
-     *  the others (fw#2722 — DefaultForm's tabs+relatedList case). Default
+     *  the others (DefaultForm's tabs+relatedList case). Default
      *  false: unchanged, content-sized height. */
     readonly fillHeight?: boolean;
 }): ReactNode;

package/dist/web/primitives/form.js

@@ -11,11 +11,11 @@ import "../react-css-custom-properties.js";
 import { cardFooterBorder, cardHeaderBorder } from "./card-styles.js";
 import { InsideFormContext, ScreenFormContext, ScreenWidthContext } from "./contexts.js";
 // Extension sections that render their own <form> via BareFormProvider
-// (legacy custom-form pattern, e.g. ChangeEmailSection before fw#2703) land
+// (legacy custom-form pattern, e.g. ChangeEmailSection) land
 // inside RenderEdit's host <form> (ExtensionSectionMount, render-edit.tsx) —
 // nested <form> elements are invalid DOM, and real browsers can silently
 // fall back to a native GET submit of the OUTER form, leaking field values
-// into the URL (fw#2312, fw#2705). Degrading to a <div> when already inside
+// into the URL. Degrading to a <div> when already inside
 // a form avoids the nesting; the captured click still routes to THIS form's
 // onSubmit instead of activating the real ancestor <form>.
 const SUBMIT_CONTROL_SELECTOR = [
@@ -95,7 +95,7 @@ export function FormSections({ children, chromeless, stickyActions, fillHeight,
         // Margins, not padding: padding would land inside a child that has its own border/height.
         !chromeless && "[&>:not(section)]:mx-6 [&>:not(section)]:my-3", !chromeless && "[&>:not(section):first-child]:mt-6 [&>:not(section):last-child]:mb-6", 
         // ponytail: fixed footer now pins only the primary action (single
-        // button row + its own p-4, fw#2606) instead of the whole footer —
+        // button row + its own p-4) instead of the whole footer —
         // shrunk from pb-32 accordingly. Widen again if a wizard's primary
         // action ever wraps to two rows.
         stickyActions === true && fillHeight !== true && STICKY_FOOTER_SPACER_CLASS, 
@@ -117,7 +117,7 @@ export function FormTitleBlock({ title, subtitle, titleAction, testId, bordered,
 }
 // `formActions` (render-edit.tsx) mixes a non-submit wizard Back button in
 // with the submit-type Next/Finish button inside one Fragment — only the
-// submit one is the "primary" action that fw#1918 needs pinned above a
+// submit one is the "primary" action that needs pinned above a
 // virtual keyboard. Back reads as `type="button"`, same as `secondaryActions`
 // (Cancel/Delete/…), so it can safely join that group on mobile. A footer-slot
 // mount can't expose `type="submit"` (its button is opaque app code), so it
@@ -162,7 +162,7 @@ export function FormFooter({ actions, secondaryActions, testId, chromeless, stic
     const hasPrimaryAction = primaryActionNodes !== undefined && primaryActionNodes.length > 0;
     // No primary node found among `actions` (e.g. a wizard step with only
     // secondary buttons): fall back to pinning the whole, unpartitioned
-    // `actions` node instead of splitting it — matches the pre-split fw#1918
+    // `actions` node instead of splitting it — matches the previous
     // behaviour where sticky footers always kept `actions` fixed.
     const nonPrimaryActionNodes = hasPrimaryAction
         ? actionNodes?.filter((node) => !isPrimaryStickyAction(node))
@@ -196,7 +196,7 @@ export function FormFooter({ actions, secondaryActions, testId, chromeless, stic
                     : "flex-wrap max-sm:w-full max-sm:[&>button]:flex-1 max-sm:[&>button]:min-h-11 sm:ml-auto", 
                 // Below sm (640px): pin only the primary action to the viewport
                 // bottom instead of normal flow, so a virtual keyboard shrinking
-                // the viewport can't push it out of reach (fw#1918). `fixed`
+                // the viewport can't push it out of reach. `fixed`
                 // escapes the card's `overflow-hidden` (only transform/filter/
                 // contain ancestors trap it, confirmed against
                 // AppLayout/SidebarInset — neither sets those).

package/dist/web/primitives/input.js

@@ -5,6 +5,7 @@ import { Checkbox } from "../ui/checkbox.js";
 import { Input as UiInput } from "../ui/input.js";
 import { Switch } from "../ui/switch.js";
 import { Textarea } from "../ui/textarea.js";
+import { CodeInput } from "./code-input.js";
 import { ComboboxInput } from "./combobox.js";
 import { DateInput } from "./date-input.js";
 import { FileUploadInput } from "./file-upload.js";
@@ -15,6 +16,7 @@ import { NumberInput } from "./number-input.js";
 import { hasDescriptionOrGroup } from "./option-groups.js";
 import { TimestampInput } from "./timestamp-input.js";
 import { TzInput } from "./tz-input.js";
+import { useFocusOnMount } from "./use-focus-on-mount.js";
 import "../react-css-custom-properties.js";
 import { FieldDescriptionContext, FieldLayoutContext } from "./contexts.js";
 import { defaultSelectPresentation, FIELD_ICON_CLASS, fieldIconFor, RadioListSelect, SegmentedSelect, textareaMinHeight, unitSuffixId, withFieldIcon, withInlineDisabledHint, withInputAddons, withoutSegmentedSelectPlaceholder, withTrailingAction, } from "./field.js";
@@ -23,6 +25,7 @@ export function DefaultInput(props) {
     // themselves, no manual border-destructive needed anymore.
     const booleanLayout = useContext(FieldLayoutContext);
     const describedBy = useContext(FieldDescriptionContext);
+    const textInputRef = useFocusOnMount(props.kind === "text" ? props.autoFocus : undefined);
     const common = {
         id: props.id,
         name: props.name,
@@ -33,7 +36,9 @@ export function DefaultInput(props) {
     };
     switch (props.kind) {
         case "text":
-            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+            return withInputAddons(props, withFieldIcon(props.icon, _jsx(UiInput, { type: "text", ref: textInputRef, ...common, ...props.dataAttributes, "data-testid": props.testId, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), onKeyDown: props.onKeyDown, ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(props.autoComplete !== undefined && { autoComplete: props.autoComplete }), className: cn(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined) })));
+        case "code":
+            return _jsx(CodeInput, { ...props });
         case "email":
             return (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
         case "month":
@@ -86,7 +91,7 @@ export function DefaultInput(props) {
             const radioGroupOptions = props.display === "radio" ? comboOptions : withoutSegmentedSelectPlaceholder(comboOptions);
             // An explicit `display` is an author decision and outranks the
             // heuristic in both directions — a requested radio group renders as
-            // one even when the options outnumber the heuristic's threshold (#2711).
+            // one even when the options outnumber the heuristic's threshold.
             const requestedPresentation = props.radioVariant === "card"
                 ? "radioList"
                 : props.display === "radio"
@@ -107,7 +112,7 @@ export function DefaultInput(props) {
             return (_jsx(ComboboxInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: dropdownOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
         }
         case "combobox": {
-            // Tier 2.1c + tier 2.7e: discriminated union per `multiple`; we split
+            // Discriminated union per `multiple`; we split
             // TS-side into two branches so ComboboxInput's single/multi variants
             // render with the right types.
             const baseProps = {

package/dist/web/primitives/layout-elements.js

@@ -48,7 +48,7 @@ export function DefaultSection({ id, title, subtitle, children, actions, variant
 export function DefaultFillContainer({ children, testId, grow }) {
     // flex-1 only on request (`grow`, set under fillScreenHeight): without it the
     // container sizes to its content and only shrinks (min-h-0), so a two-row
-    // table in a non-fixed-height screen does not stretch (fw#2778).
+    // table in a non-fixed-height screen does not stretch.
     return (_jsx("div", { "data-testid": testId, className: cn("flex min-h-0 flex-col", grow === true && "flex-1"), children: children }));
 }
 const DRAWER_FIELD_CELL_WIDTH_CLASS = {
@@ -61,7 +61,7 @@ const FIELD_CELL_WIDTH_CLASS = {
     money: "w-40 shrink-0 [&_label]:whitespace-nowrap",
     date: "w-full sm:w-[200px]",
     timestamp: "w-full sm:w-[328px]",
-    select: "w-full sm:w-auto sm:min-w-[200px] sm:has-[[data-radio-list]]:w-full",
+    select: "w-full sm:w-60 sm:has-[[data-radio-list]]:w-full",
     full: "w-full",
     // self-start: the label shares the top line with neighbouring labels. The
     // switch (1.15rem) gets (h-9 input − switch) / 2 margin to sit on the input line.
@@ -75,7 +75,8 @@ export function DefaultGrid({ columns, children, testId, maxRows, flow, list, ar
     if (list === true) {
         return (_jsx("div", { ...groupProps, "data-testid": testId, className: "flex flex-col divide-y divide-border", children: children }));
     }
-    if (flow === true) {
+    const declaresColumns = typeof columns === "number" && columns >= 2;
+    if (flow === true && (insideDrawerBody || !declaresColumns)) {
         return (_jsx("div", { ...groupProps, "data-testid": testId, className: cn("flex gap-4", insideDrawerBody
                 ? "flex-col items-start"
                 : // items-end aligns inputs when labels wrap to different heights; a
@@ -116,12 +117,13 @@ export function DefaultGrid({ columns, children, testId, maxRows, flow, list, ar
             overflowY: "auto",
         }),
     };
-    return (_jsx("div", { ...groupProps, "data-testid": testId, className: "grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
+    return (_jsx("div", { ...groupProps, "data-testid": testId, className: cn("grid gap-[var(--kumiko-grid-gap,1rem)] grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", flow === true &&
+            "items-end has-[[data-appendix-below]]:items-start has-[[role=alert]]:items-start"), style: style, children: children }));
 }
 export function DefaultGridCell({ span, width, children }) {
     const insideDrawerBody = useContext(DrawerBodyContext);
     if (width !== undefined) {
-        return (_jsx("div", { className: cn("min-w-0 max-w-full", insideDrawerBody
+        return (_jsx("div", { className: cn("min-w-0 max-w-full", width === "full" && "sm:[grid-column:1/-1]", insideDrawerBody
                 ? (DRAWER_FIELD_CELL_WIDTH_CLASS[width] ?? FIELD_CELL_WIDTH_CLASS[width])
                 : FIELD_CELL_WIDTH_CLASS[width]), children: children }));
     }

package/dist/web/primitives/layout.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
 // Shared 3xl/4xl/full → max-w-*/mx-auto map. FormScreenShell
 // (primitives/index.tsx) reuses this instead of keeping its own copy —
-// same width tokens must render the same class everywhere (fw#2640).
+// same width tokens must render the same class everywhere.
 export const screenWidthClassName = {
     "3xl": "max-w-3xl mx-auto",
     "4xl": "max-w-4xl mx-auto",
@@ -19,7 +19,7 @@ export const screenFormColumnWidthClassName = {
 // FormScreenShell, list screens and the pinned-footer screen form). The inset
 // is the one the settings screens use, so a list, a dashboard and a form start
 // at the same edge. The bottom inset keeps the last field or table row off the
-// viewport edge (fw#2640).
+// viewport edge.
 export const screenPaddingClassName = "px-4 pb-6 pt-5 md:px-10 md:pb-10 md:pt-7";
 const STACK_GAP = { sm: "gap-2", md: "gap-4", lg: "gap-6" };
 export function Stack({ gap = "md", className, children, testId }) {

package/dist/web/primitives/located-timestamp-input.js

@@ -7,10 +7,10 @@ export function LocatedTimestampInput({ id, name, value, onChange, locale, min,
     const t = useTranslation();
     const at = value === "" ? "" : value.at;
     const tz = value === "" ? "" : value.tz;
-    // `at` ist Minuten-Wallclock (z.iso.datetime({local:true}) akzeptiert das);
-    // tz ein IANA-Name. Solange beides leer ist gilt das Feld als leer; sobald
-    // eines gesetzt ist, fließt das Paar — die Vollständigkeit erzwingt die
-    // Required-/Zod-Validierung beim Submit (so bleibt eine halbe Eingabe sichtbar).
+    // `at` is a minute-precision wall-clock value (z.iso.datetime({local:true}) accepts it);
+    // tz is an IANA name. The field is empty while both are empty; once either
+    // is set, the pair is emitted — Required/Zod validation on submit enforces
+    // completeness (so a partial input remains visible).
     function emit(nextAt, nextTz) {
         if (nextAt === "" && nextTz === "") {
             onChange(undefined);