@cosmicdrift/kumiko-renderer 0.384.0 → 0.385.0

package/dist/web/primitives/index.js

@@ -1,2024 +1,45 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cardColumnRoles } from "@cosmicdrift/kumiko-framework/ui-types";
-import { PII_ERASED_SENTINEL } from "@cosmicdrift/kumiko-types/kms-adapter-types";
-import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { cva } from "class-variance-authority";
-import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, Check, ChevronDown, ChevronLeft, ChevronRight, Globe, Hash, KeyRound, Link, Loader2, Lock, Mail, MapPin, MoreHorizontal, Phone, Search, SlidersHorizontal, Tag, Undo2, User, X, } from "lucide-react";
-import { Children, createContext, Fragment, isValidElement, useContext, useEffect, useId, useRef, useState, } from "react";
-import { fieldIssueText } from "../../field-issue-text.js";
-import { applyFormatSpec, EMPTY_VALUE_PLACEHOLDER, isSafeHref } from "../../headless/index.js";
-import { InsideDrawerProvider, needsActionConfirm, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, useColumnRenderer, useInsideDrawer, useOptionalLocale, useOptionalPrimitives, useOptionalTranslation, useTranslation, WriteFailedError, } from "../../index.js";
-import { Icon, NAV_ICONS } from "../icons.js";
-import { cn } from "../lib/cn.js";
-import { Badge } from "../ui/badge.js";
-import { buttonVariants, Button as UiButton } from "../ui/button.js";
-import { Checkbox } from "../ui/checkbox.js";
-import { Input as UiInput } from "../ui/input.js";
-import { Label as UiLabel } from "../ui/label.js";
-import { Switch } from "../ui/switch.js";
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table.js";
-import { Textarea } from "../ui/textarea.js";
-import { ProgressBar } from "../widgets/progress-bar.js";
-import { StatusBadge } from "../widgets/status-badge.js";
-import { StepBar } from "../widgets/step-bar.js";
-import { inFieldIconButtonClass } from "./calendar-popover.js";
-import { ComboboxInput } from "./combobox.js";
-import { DateInput } from "./date-input.js";
+/// <reference path="../qrcode-browser.d.ts" />
+// Default shadcn + Tailwind primitives for the web renderer. They implement the
+// primitives contract from `@cosmicdrift/kumiko-renderer`; colors come from
+// Tailwind classes that reference the shadcn CSS variables (no useTokens() calls).
+//
+// One Tailwind class composition per primitive, variants via
+// `class-variance-authority`, Radix UI underneath interactive elements.
+import { applyFormatSpec } from "../../headless/index.js";
 import { DefaultDialog } from "./dialog.js";
 import { DefaultDrawer } from "./drawer.js";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "./dropdown-menu.js";
 import { EmbeddedListInput } from "./embedded-list-input.js";
-import { CardLeadingImage, FileDisplayCell } from "./file-thumbnail.js";
-import { FileUploadInput } from "./file-upload.js";
 import { FileValueList } from "./file-value-list.js";
-import { FilesDropzoneInput } from "./files-dropzone.js";
 import { DefaultJsonView } from "./json-view.js";
-import { screenFormColumnWidthClassName, screenPaddingClassName, screenWidthClassName, } from "./layout.js";
 import { DefaultLightbox } from "./lightbox.js";
-import { LocatedTimestampInput } from "./located-timestamp-input.js";
-import { DefaultMetric, DefaultMetricBand, InsideScreenFormColumnContext } from "./metric.js";
+import { DefaultMetric, DefaultMetricBand } from "./metric.js";
 import { DefaultModal } from "./modal.js";
-import { currencyDecimals, formatMoney, MoneyInput } from "./money-input.js";
-import { NarrowPinnedFooter } from "./narrow-pinned-footer.js";
-import { NumberInput } from "./number-input.js";
-import { groupOptions, hasDescriptionOrGroup } from "./option-groups.js";
 import { DefaultPageHeader } from "./page-header.js";
 import { PromoPanel } from "./promo-panel.js";
-import { SegmentedControl } from "./segmented-select.js";
 import { CopyButton, ShareButton } from "./share-actions.js";
 import { DefaultStatusBadge } from "./status-badge.js";
-import { STICKY_FOOTER_SAFE_AREA_CLASS, STICKY_FOOTER_SPACER_CLASS, StickyActionBar, } from "./sticky-action-bar.js";
+import { StickyActionBar } from "./sticky-action-bar.js";
 import { DefaultTabs } from "./tabs.js";
-import { TimestampInput } from "./timestamp-input.js";
-import { useToast } from "./toast.js";
-import { TzInput } from "./tz-input.js";
-import { useKeyboardInset } from "./use-keyboard-inset.js";
-import { useIsBelowSmViewport, useIsNarrowViewport } from "./use-narrow-viewport.js";
 import "../react-css-custom-properties.js";
-// ---- Card-Chrome (eine Definition für Form/Section/Card) ----
-// Die eine Card-Surface. Maße (Padding/Radius/Shadow) kommen aus --card-*
-// CSS-Tokens (Defaults in styles.css), damit eine App sie einmal zentral in
-// ihrer styles.css überschreiben kann — wie die Farben. Radius-Variante:
-// xl = Card/Screen-Fläche (Default, token-getrieben), lg = "innen"-Fläche.
-const cardSurface = cva("flex flex-col border bg-card text-card-foreground shadow-[var(--card-shadow)]", {
-    variants: { radius: { xl: "rounded-[var(--card-radius)]", lg: "rounded-lg" } },
-    defaultVariants: { radius: "xl" },
-});
-// Wraps instead of running off-screen when the row outgrows its container (fw#2528).
-const cardFooter = "flex flex-wrap items-center justify-end gap-2 py-4";
-const cardFooterInset = "px-[var(--card-padding)]";
-// /30 read as nearly invisible against the light-theme card (white card,
-// muted at 94% lightness) — /50 keeps the same token, just a stronger step.
-const cardFooterBorder = "border-t bg-muted/50";
-const cardHeaderBorder = "border-b bg-muted/50";
-// ---- Button (vendored shadcn ui/button) ----
-// Contract-Variant → shadcn-Variant: secondary war schon immer der
-// bordered-bg-background-Look = shadcns `outline`. primary→default,
-// danger→destructive, link→link (kein BG, underline on hover).
-const BUTTON_VARIANT = {
-    primary: "default",
-    secondary: "outline",
-    danger: "destructive",
-    link: "link",
-    "danger-ghost": "ghost",
-    ghost: "ghost",
-};
-const BUTTON_SIZE = {
-    sm: "sm",
-    md: "default",
-    icon: "icon",
-};
-// Closed IconKey vocabulary, checked against the shared NAV_ICONS registry
-// (icons.tsx) — an unknown key (schema data isn't statically typed against
-// IconKey the way this prop is) renders no icon instead of crashing, same
-// fallback shape as fieldIconFor above.
-function actionIconFor(icon) {
-    return icon !== undefined && Object.hasOwn(NAV_ICONS, icon) ? icon : undefined;
-}
-// Shared by DefaultButton's `secondary` variant and triggers that need Radix `asChild`
-// prop forwarding (which DefaultButton does not support), so both stay visually identical.
-const SECONDARY_BUTTON_EXTRA_CLASSES = "border-input hover:bg-muted";
-function DefaultButton({ type = "button", onClick, disabled, loading, variant = "primary", size = "md", ariaLabel, title, pressed, expanded, width = "auto", children, testId, className, ref, icon, iconEnd, dataAttributes, }) {
-    // link-Variant rendert text-artig (Inline-Link im Fließtext/Banner), nicht als
-    // gepolsterte Fläche; width="full" streckt CTA-Buttons in Karten/Panels.
-    const resolvedClassName = cn(variant === "link" ? "h-auto px-0 py-0" : "", variant === "danger-ghost"
-        ? "text-destructive hover:text-destructive hover:bg-destructive/10"
-        : "", variant === "ghost" ? "text-primary hover:text-primary hover:bg-primary/10" : "", variant === "secondary" ? SECONDARY_BUTTON_EXTRA_CLASSES : "", pressed === true
-        ? "border-primary/40 bg-accent text-accent-foreground ring-1 ring-primary/30"
-        : "", width === "full" ? "w-full" : "", className);
-    const IconStart = icon !== undefined ? NAV_ICONS[icon] : undefined;
-    const IconEnd = iconEnd !== undefined ? NAV_ICONS[iconEnd] : undefined;
-    // Loading swaps the leading icon slot for a spinner and keeps `children` —
-    // replacing the label would shift the button's width mid-submit.
-    const leading = loading === true ? (_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" })) : IconStart !== undefined ? (_jsx(IconStart, { className: "size-4", "aria-hidden": "true" })) : null;
-    return (_jsxs(UiButton, { ref: ref, type: type, onClick: onClick, disabled: disabled === true || loading === true, ...dataAttributes, "data-testid": testId, "data-loading": loading === true ? "true" : undefined, variant: BUTTON_VARIANT[variant], size: BUTTON_SIZE[size], "aria-label": ariaLabel, "aria-pressed": pressed, "aria-expanded": expanded, title: title ?? (size === "icon" ? ariaLabel : undefined), className: resolvedClassName, children: [leading, children, IconEnd !== undefined && _jsx(IconEnd, { className: "size-4", "aria-hidden": "true" })] }));
-}
-// ---- Banner (shadcn: Alert) ----
-function DefaultBanner({ variant = "info", title, titleTestId, children, actions, padded, testId, id, }) {
-    const isError = variant === "error";
-    const isWarning = variant === "warning";
-    const isPrimary = variant === "primary";
-    // `id` is set when a <Field> wraps this Banner as its control (see
-    // BannerProps.id). A <div> isn't labelable, so a <label htmlFor> pointing
-    // at it is inert for screen readers — role="group" + aria-labelledby is
-    // the actual mechanism, pointed at the label id Field emits (fieldLabelId).
-    const bannerRole = id !== undefined ? "group" : isError ? "alert" : undefined;
-    const banner = (_jsxs("div", { role: bannerRole, ...(id !== undefined && { "aria-labelledby": fieldLabelId(id) }), "data-testid": testId, "data-variant": variant, className: cn("relative w-full rounded-lg border px-4 py-3 text-sm flex items-center gap-3", 
-        // Viewport breakpoint like the form footer bar; actions drop below the text on phones.
-        isPrimary && "flex-col items-start sm:flex-row sm:items-center", isError
-            ? "border-destructive/50 text-destructive bg-destructive/10 dark:border-destructive"
-            : isWarning
-                ? "border-status-warn/30 bg-status-warn/10 text-status-warn"
-                : isPrimary
-                    ? "border-l-4 border-l-primary bg-card text-card-foreground"
-                    : "bg-card text-card-foreground"), children: [_jsxs("div", { className: "flex-1", children: [title !== undefined && (_jsx("div", { "data-testid": titleTestId, className: "font-semibold", children: title })), children] }), actions !== undefined && _jsx("div", { "data-slot": "actions", children: actions })] }));
-    // Page-State: Banner sitzt alleine im Main (das kein Padding mehr
-    // hat). Wrapper gibt 24px Außenabstand damit der Banner nicht edge-
-    // to-edge an Sidebar/Browser klebt.
-    return padded === true ? _jsx("div", { className: "p-6", children: banner }) : banner;
-}
-// ---- Field (Label + Error) ----
-// Matches DefaultBanner's aria-labelledby target: a non-labelable control
-// (e.g. Banner's <div>) can't take a real htmlFor, so Field always also
-// gives its label a stable id that such controls can point to.
-function fieldLabelId(id) {
-    return `${id}-label`;
-}
-// Boolean optics depend on the surrounding Field layout: layout="inline"
-// (checkbox lists like MultiSelectCheckboxes, the BooleanField widget) keeps
-// the checkbox, the standard form field (layout="stacked"/default) gets the
-// new switch. Pure web-renderer rendering decision, no contract field needed
-// — Field hands its resolved layout down to the nested Input via context.
-const FieldLayoutContext = createContext("stacked");
-// True inside the sections of a card-less screen form: sections then drop their
-// own horizontal padding, the screen form's scroll surface provides it.
-const ScreenFormContext = createContext(false);
-const DrawerBodyContext = createContext(false);
-// aria-labelledby into a Field label that doesn't exist leaves a radiogroup
-// without any accessible name — fall back to the control's name instead.
-const FieldLabelledContext = createContext(false);
-function useFieldLabelProps(id, name) {
-    const insideLabelledField = useContext(FieldLabelledContext);
-    return insideLabelledField ? { "aria-labelledby": fieldLabelId(id) } : { "aria-label": name };
-}
-// The Field description is the control's accessible description; the control
-// is a descendant (not a prop of Field), so the id travels via context. Always
-// provided (undefined without a description) so a nested Field never inherits
-// its parent's description id.
-const FieldDescriptionContext = createContext(undefined);
-function fieldDescriptionId(id) {
-    return `${id}-description`;
-}
-function fieldErrorId(id) {
-    return `${id}-error`;
-}
-function DefaultField(props) {
-    const describedBy = [
-        props.description !== undefined ? fieldDescriptionId(props.id) : undefined,
-        props.issues !== undefined && props.issues.length > 0 ? fieldErrorId(props.id) : undefined,
-    ]
-        .filter((id) => id !== undefined)
-        .join(" ");
-    return (_jsx(FieldLabelledContext.Provider, { value: props.label !== "", children: _jsx(FieldDescriptionContext.Provider, { value: describedBy === "" ? undefined : describedBy, children: _jsx(DefaultFieldBody, { ...props }) }) }));
-}
-function DefaultFieldBody({ id, label, required, issues, labelAppendix, fieldAppendix, appendixPlacement, description, status, children, layout, accent, hideLabel, testId, changed, }) {
-    const t = useTranslation();
-    const hasError = issues !== undefined && issues.length > 0;
-    const labelEl = (_jsxs(UiLabel, { id: fieldLabelId(id), htmlFor: id, className: cn("min-w-0 gap-0 text-[13px]", hasError ? "text-destructive" : "text-foreground", hideLabel === true && "sr-only"), children: [_jsx("span", { className: layout === "inline" ? undefined : "truncate", title: typeof label === "string" ? label : undefined, children: label }), required === true && (_jsx("span", { "data-required": true, className: "ml-0.5 shrink-0 text-destructive", children: "*" }))] }));
-    const errorsEl = hasError ? (_jsx("div", { id: fieldErrorId(id), role: "alert", "data-testid": testId !== undefined ? `${testId}-errors` : undefined, className: "text-xs text-destructive", children: issues.map((issue) => (_jsx("div", { children: fieldIssueText(t, issue) }, `${issue.path}:${issue.code}`))) })) : null;
-    // Inline (boolean/checkbox): Control links, Label rechts — shadcn-Muster.
-    if (layout === "inline") {
-        return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FieldLayoutContext.Provider, { value: "inline", children: children }), labelEl, labelAppendix !== undefined && labelAppendix] }), errorsEl] }));
-    }
-    const changedMarker = changed === true ? (_jsxs("span", { "data-testid": testId !== undefined ? `${testId}-changed` : undefined, className: "inline-flex items-center gap-1 text-xs text-status-active", children: [_jsx("span", { className: "size-1.5 rounded-full bg-current", "aria-hidden": "true" }), t("kumiko.form.changed")] })) : null;
-    const statusEl = status !== undefined ? (_jsx(StatusBadge, { tone: status.tone, testId: status.testId ?? (testId !== undefined ? `${testId}-status` : undefined), children: status.label })) : null;
-    const belowControl = appendixPlacement === "below-control";
-    // Settings row: label/help/origin on the left, control on the right. The
-    // hairlines between rows come from the list Grid, not from the row itself.
-    if (layout === "row") {
-        return (_jsxs("div", { "data-testid": testId, className: cn("group/row relative grid gap-x-6 gap-y-2 py-4 @2xl:grid-cols-[minmax(0,3fr)_minmax(0,2fr)] @2xl:grid-rows-[auto_auto_auto_1fr] @2xl:gap-y-0", 
-            // Switch rows keep label left / switch right when stacked.
-            "@max-2xl:has-[[data-slot=switch]]:grid-cols-[minmax(0,1fr)_auto]", accent === true && "@max-2xl:pl-3"), children: [accent === true && (_jsx("span", { "aria-hidden": "true", "data-testid": testId !== undefined ? `${testId}-accent` : undefined, className: "absolute inset-y-3 w-0.5 bg-status-active @max-2xl:left-0 @2xl:-left-4" })), _jsxs("div", { className: "flex min-w-0 items-center gap-2 @2xl:col-start-1 @2xl:row-start-1", children: [labelEl, changedMarker, labelAppendix !== undefined && labelAppendix, statusEl] }), description !== undefined && (_jsx("div", { id: fieldDescriptionId(id), "data-testid": testId !== undefined ? `${testId}-description` : undefined, className: "min-w-0 text-sm text-muted-foreground @2xl:col-start-1 @2xl:row-start-2 @2xl:mt-1 @max-2xl:group-has-[[data-slot=switch]]/row:col-span-2", children: description })), _jsxs("div", { className: "flex min-w-0 flex-col gap-1.5 has-[[data-slot=switch]]:items-end @2xl:col-start-2 @2xl:row-span-4 @2xl:row-start-1 @max-2xl:group-has-[[data-slot=switch]]/row:col-start-2 @max-2xl:group-has-[[data-slot=switch]]/row:row-start-1", children: [_jsx(FieldLayoutContext.Provider, { value: "row", children: children }), errorsEl] }), fieldAppendix !== undefined && (_jsx("div", { className: "min-w-0 @2xl:col-start-1 @2xl:row-start-3 @2xl:mt-1 @max-2xl:group-has-[[data-slot=switch]]/row:col-span-2", children: fieldAppendix }))] }));
-    }
-    return (_jsxs("div", { "data-testid": testId, ...(belowControl && fieldAppendix !== undefined && { "data-appendix-below": "" }), className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [changedMarker !== null ? (_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [labelEl, changedMarker] })) : (labelEl), labelAppendix !== undefined && labelAppendix, statusEl] }), description !== undefined && (_jsx("div", { id: fieldDescriptionId(id), "data-testid": testId !== undefined ? `${testId}-description` : undefined, className: "text-sm text-muted-foreground", children: description })), !belowControl && fieldAppendix !== undefined && fieldAppendix, children, errorsEl, belowControl && fieldAppendix !== undefined && fieldAppendix] }));
-}
-// ---- Input ----
-// Field-icon registry: `EditFieldSpec.icon`/`InputProps.icon` sets a
-// symbolic key, mapped here to a lucide component. Unknown keys → no
-// icon (clean fallback, no boot-fail). Mirrors NAV_ICONS' pattern
-// (nav-tree.tsx) — a separate, smaller registry instead of a shared
-// import, because field icons cover a different use case (email, phone,
-// location, …) than nav icons (dashboard, tables, …).
-const FIELD_ICONS = {
-    mail: Mail,
-    lock: Lock,
-    hash: Hash,
-    search: Search,
-    user: User,
-    phone: Phone,
-    calendar: CalendarDays,
-    link: Link,
-    tag: Tag,
-    building: Building,
-    globe: Globe,
-    key: KeyRound,
-    "map-pin": MapPin,
-};
-function fieldIconFor(icon) {
-    return icon !== undefined && Object.hasOwn(FIELD_ICONS, 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
-// tailwind-merge) only the left padding of the vendored ui/input.tsx —
-// right padding and other defaults stay untouched.
-const FIELD_ICON_CLASS = "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground";
-function withFieldIcon(icon, input) {
-    const Icon = fieldIconFor(icon);
-    if (Icon === undefined)
-        return input;
-    return (_jsxs("div", { className: "relative", children: [_jsx(Icon, { "aria-hidden": "true", className: FIELD_ICON_CLASS }), input] }));
-}
-const INPUT_AFFIX_CLASS = "inline-flex shrink-0 items-center text-sm text-muted-foreground max-md:min-h-11";
-// Prefix/suffix text and the fill button sit beside the input, not inside it,
-// so the input keeps its own padding contract (icon, unit). The wrapper is
-// only added when an addon exists — a plain input keeps its tree shape.
-function withInputAddons(addons, input) {
-    const { name, prefix, suffix, fill } = addons;
-    if (prefix === undefined && suffix === undefined && fill === undefined)
-        return input;
-    return (_jsxs("div", { "data-slot": "input-addons", className: "flex items-center gap-2", children: [prefix !== undefined && (_jsx("span", { "data-testid": `input-prefix-${name}`, className: INPUT_AFFIX_CLASS, children: prefix })), _jsx("div", { className: "min-w-0 flex-1", children: input }), suffix !== undefined && (_jsx("span", { "data-testid": `input-suffix-${name}`, className: INPUT_AFFIX_CLASS, children: suffix })), fill !== undefined && (_jsx(DefaultButton, { variant: "secondary", size: "sm", onClick: fill.onPress, loading: fill.busy === true, disabled: fill.disabled === true, testId: fill.testId ?? `input-fill-${name}`, children: fill.label }))] }));
-}
-// The unit changes the meaning of the value ("58 mi" vs "58 km"), so it is
-// exposed as the input's description rather than hidden from assistive tech.
-function unitSuffixId(inputId) {
-    return `${inputId}-unit`;
-}
-const TRAILING_ACTION_ICONS = { clear: X, undo: Undo2 };
-// In-field icon button on the right (same look as the date input's calendar
-// trigger). The wrapped input must reserve the room itself (`pr-9`).
-// `keepWrapper` holds the tree shape when the action comes and goes — a
-// write-only input loses its action on the first keystroke, and swapping the
-// wrapper would remount the input and drop focus mid-typing.
-function withTrailingAction(action, input, keepWrapper = false) {
-    if (action === undefined && !keepWrapper)
-        return input;
-    const ActionIcon = action !== undefined ? TRAILING_ACTION_ICONS[action.icon] : undefined;
-    return (_jsxs("div", { className: "relative", children: [input, action !== undefined && ActionIcon !== undefined && (_jsx("button", { type: "button", "aria-label": action.label, title: action.label, "data-testid": action.testId, onClick: action.onPress, className: inFieldIconButtonClass, children: _jsx(ActionIcon, { className: "size-4", "aria-hidden": "true" }) }))] }));
-}
-// 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).
-const SEGMENTED_SELECT_MAX_OPTIONS = 3;
-const SEGMENTED_SELECT_MAX_LABEL_LENGTH = 16;
-function defaultSelectPresentation(options) {
-    if (options.length === 0 || options.length > SEGMENTED_SELECT_MAX_OPTIONS)
-        return "dropdown";
-    return options.every((option) => option.label.length <= SEGMENTED_SELECT_MAX_LABEL_LENGTH)
-        ? "segmented"
-        : "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.
-function withoutSegmentedSelectPlaceholder(options) {
-    return options.filter((option) => option.value !== "");
-}
-function SegmentedSelect(props) {
-    const labelProps = useFieldLabelProps(props.id, props.name);
-    return _jsx(SegmentedControl, { ...props, labelProps: labelProps });
-}
-const RADIO_CARD_CLASS = "flex items-start gap-3 rounded-lg border border-input bg-background px-[15px] py-[13px] text-sm font-normal text-foreground " +
-    "has-[:checked]:border-2 has-[:checked]:border-primary has-[:checked]:bg-primary/5 has-[:checked]:px-[14px] has-[:checked]:py-3 " +
-    "has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:disabled]:opacity-50";
-function RadioListSelect({ id, name, value, onChange, options, variant = "list", disabled, required, hasError, }) {
-    const labelProps = useFieldLabelProps(id, name);
-    const card = variant === "card";
-    // One radiogroup over all sections keeps native arrow-key navigation across groups
-    // (radios share `name` in DOM order).
-    const descriptionIdOf = (opt) => `${id}-option-${options.findIndex((o) => o.value === opt.value)}-description`;
-    return (_jsx("div", { role: "radiogroup", ...labelProps, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `radio-list-${id}`, "data-radio-list": "", className: "flex flex-col gap-2", children: groupOptions(options).map((section) => (_jsxs(Fragment, { children: [section.heading !== undefined && (_jsx("div", { "data-testid": `radio-list-${id}-group-${section.heading}`, className: "mt-1 text-xs font-medium text-muted-foreground", children: section.heading })), section.options.map((opt) => (_jsxs("label", { className: card
-                        ? RADIO_CARD_CLASS
-                        : "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).
-// 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.
-function textareaMinHeight(rows) {
-    return { minHeight: `calc(${rows} * 1lh + 1rem + 2px)` };
-}
-function withInlineDisabledHint(option) {
-    if (option.disabled !== true || option.description === undefined)
-        return option;
-    return {
-        value: option.value,
-        label: `${option.label} (${option.description})`,
-        disabled: true,
-        ...(option.group !== undefined && { group: option.group }),
-    };
-}
-function DefaultInput(props) {
-    // Vendored ui/input + ui/checkbox stylen Fehler über `aria-invalid`
-    // selbst — kein manuelles border-destructive mehr nötig.
-    const booleanLayout = useContext(FieldLayoutContext);
-    const describedBy = useContext(FieldDescriptionContext);
-    const common = {
-        id: props.id,
-        name: props.name,
-        disabled: props.disabled,
-        "aria-describedby": describedBy,
-        "aria-required": props.required,
-        "aria-invalid": props.hasError === true ? true : undefined,
-    };
-    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) })));
-        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":
-            return (_jsx(UiInput, { type: "month", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value) }));
-        case "password":
-            return withTrailingAction(props.trailingAction, _jsx(UiInput, { type: "password", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "current-password", className: props.trailingAction !== undefined ? "pr-9" : undefined }), true);
-        case "number": {
-            const NumberIcon = fieldIconFor(props.icon);
-            // Icon, input and unit share this one box, and the grid cell sizes the
-            // box rather than the bare input: anchored to a wider wrapper, the unit
-            // would sit next to a narrower input instead of inside it.
-            const numberField = (_jsxs("div", { "data-slot": "number-field", className: "relative", children: [NumberIcon !== undefined && (_jsx(NumberIcon, { "aria-hidden": "true", className: FIELD_ICON_CLASS })), _jsx(NumberInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, disabled: props.disabled, required: props.required, hasError: props.hasError, testId: props.testId, ...(props.unit !== undefined && { ariaDescribedBy: unitSuffixId(props.id) }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.grouping !== undefined && { grouping: props.grouping }), ...(props.integer !== undefined && { integer: props.integer }), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), className: cn(NumberIcon !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) }), props.unit !== undefined && (_jsx("span", { id: unitSuffixId(props.id), className: "pointer-events-none absolute right-2.5 top-1/2 max-w-[40%] -translate-y-1/2 truncate text-sm text-muted-foreground", children: props.unit }))] }));
-            return withInputAddons(props, numberField);
-        }
-        case "range":
-            return (_jsx("input", { type: "range", ...common, min: props.min, max: props.max, step: props.step ?? 1, value: props.value, onChange: (e) => props.onChange(Number(e.target.value)), className: "w-full accent-primary" }));
-        case "boolean":
-            // layout="inline" (checkbox lists like MultiSelectCheckboxes, the
-            // BooleanField widget) keeps the checkbox optics; the standard form
-            // field (render-field.tsx, layout="stacked") gets the switch.
-            return booleanLayout === "inline" ? (_jsx(Checkbox, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true) })) : (_jsx(Switch, { id: props.id, name: props.name, disabled: props.disabled, "aria-required": props.required, "aria-invalid": props.hasError === true ? true : undefined, checked: props.value, onCheckedChange: (checked) => props.onChange(checked === true), className: "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40" }));
-        case "file":
-        case "image":
-            return (_jsx(FileUploadInput, { kind: props.kind, id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.entityType !== undefined && { entityType: props.entityType }), ...(props.uploadActionForm !== undefined && {
-                    uploadActionForm: props.uploadActionForm,
-                }), ...(props.entityId !== undefined && { entityId: props.entityId }), ...(props.fieldName !== undefined && { fieldName: props.fieldName }), ...(props.imageVariant !== undefined && { imageVariant: props.imageVariant }), ...(props.capture !== undefined && { capture: props.capture }), ...(props.directory !== undefined && { directory: props.directory }), ...(props.onFilesPicked !== undefined && { onFilesPicked: props.onFilesPicked }), ...(props.pickLabel !== undefined && { pickLabel: props.pickLabel }), ...(props.testId !== undefined && { testId: props.testId }) }));
-        case "files-dropzone":
-            return (_jsx(FilesDropzoneInput, { id: props.id, value: props.value, onChange: props.onChange, ...(props.accept !== undefined && { accept: props.accept }), ...(props.maxSize !== undefined && { maxSize: props.maxSize }), ...(props.maxCount !== undefined && { maxCount: props.maxCount }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.entityType !== undefined && { entityType: props.entityType }), ...(props.uploadActionForm !== undefined && {
-                    uploadActionForm: props.uploadActionForm,
-                }), ...(props.entityId !== undefined && { entityId: props.entityId }), ...(props.fieldName !== undefined && { fieldName: props.fieldName }), ...(props.testId !== undefined && { testId: props.testId }) }));
-        case "date":
-            return (_jsx(DateInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.locale !== undefined && { locale: props.locale }), ...(props.min !== undefined && { min: props.min }), ...(props.max !== undefined && { max: props.max }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "select": {
-            // Visual-Konsolidierung: alle Selects laufen über ComboboxInput
-            // (cmdk + Radix-Popover). Vorher hatten wir zwei Pfade — Radix-
-            // Select für `kind:"select"` und cmdk für `kind:"combobox"`. Drei
-            // visuell unterschiedliche Variants (Single-Select, Combobox-
-            // Single, Combobox-Multi) wurden unhandbar. Mit dem Merge ist die
-            // Combobox die einzige Implementation: Search-Input ist auch bei
-            // 4-Item-Status-Selects vorhanden, das ist eine bewusst akzeptierte
-            // UX-Konsequenz für Style-Konsistenz.
-            const comboOptions = props.options.map((o) => typeof o === "string" ? { value: o, label: o } : o);
-            // The dropdown shows a disabled option's hint inline, so it stays readable in the trigger and search.
-            const dropdownOptions = comboOptions.map(withInlineDisabledHint);
-            // The radio group can't render the unselected placeholder as its own
-            // segment, so it counts and renders on the real options only — the
-            // dropdown below keeps comboOptions (placeholder included) since it
-            // has a genuine "nothing selected" row.
-            // An author who asks for `display: "radio"` explicitly declared the ""
-            // option as a real choice (e.g. "Any"), so it stays a segment.
-            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).
-            const requestedPresentation = props.radioVariant === "card"
-                ? "radioList"
-                : props.display === "radio"
-                    ? "segmented"
-                    : props.display === "dropdown"
-                        ? "dropdown"
-                        : defaultSelectPresentation(radioGroupOptions);
-            // A segmented control has no room for a description line or group headings.
-            const presentation = requestedPresentation === "segmented" && hasDescriptionOrGroup(radioGroupOptions)
-                ? "radioList"
-                : requestedPresentation;
-            if (presentation === "radioList" && radioGroupOptions.length > 0) {
-                return (_jsx(RadioListSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.radioVariant !== undefined && { variant: props.radioVariant }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-            }
-            if (presentation === "segmented" && radioGroupOptions.length > 0) {
-                return (_jsx(SegmentedSelect, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, options: radioGroupOptions, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-            }
-            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` —
-            // wir splittan TS-side in zwei Branches damit ComboboxInput's
-            // Single/Multi-Variants typgerecht gerendert werden.
-            const baseProps = {
-                id: props.id,
-                name: props.name,
-                options: props.options,
-                ...(props.disabled !== undefined && { disabled: props.disabled }),
-                ...(props.required !== undefined && { required: props.required }),
-                ...(props.hasError !== undefined && { hasError: props.hasError }),
-                ...(props.placeholder !== undefined && { placeholder: props.placeholder }),
-                ...(props.searchPlaceholder !== undefined && {
-                    searchPlaceholder: props.searchPlaceholder,
-                }),
-                ...(props.emptyText !== undefined && { emptyText: props.emptyText }),
-                ...(props.onSearchChange !== undefined && { onSearchChange: props.onSearchChange }),
-                ...(props.loading !== undefined && { loading: props.loading }),
-                ...(props.onCreate !== undefined && { onCreate: props.onCreate }),
-                ...(props.createLabel !== undefined && { createLabel: props.createLabel }),
-            };
-            if (props.multiple === true) {
-                return (_jsx(ComboboxInput, { ...baseProps, multiple: true, value: props.value, onChange: props.onChange }));
-            }
-            return _jsx(ComboboxInput, { ...baseProps, value: props.value, onChange: props.onChange });
-        }
-        case "money":
-            return (_jsx(MoneyInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, currency: props.currency ?? "EUR", ...(props.locale !== undefined && { locale: props.locale }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "timestamp":
-            return (_jsx(TimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.wallClock !== undefined && { wallClock: props.wallClock }), ...(props.locale !== undefined && { locale: props.locale }), ...(props.min !== undefined && { min: props.min }), ...(props.max !== undefined && { max: props.max }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "locatedTimestamp":
-            return (_jsx(LocatedTimestampInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.locale !== undefined && { locale: props.locale }), ...(props.min !== undefined && { min: props.min }), ...(props.max !== undefined && { max: props.max }), ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-        case "textarea": {
-            const rows = props.rows;
-            const onSubmitShortcut = props.onSubmitShortcut;
-            const onKeyDown = props.onKeyDown;
-            return (_jsx(Textarea, { ...common, ...props.dataAttributes, readOnly: props.readOnly, value: props.value, onChange: (e) => props.onChange(e.target.value), rows: rows ?? 4, className: "resize-y", ...(props.placeholder !== undefined && { placeholder: props.placeholder }), ...(rows !== undefined && { style: textareaMinHeight(rows) }), ...((onSubmitShortcut !== undefined || onKeyDown !== undefined) && {
-                    ...(onSubmitShortcut !== undefined && {
-                        "aria-keyshortcuts": "Control+Enter Meta+Enter",
-                    }),
-                    onKeyDown: (e) => {
-                        onKeyDown?.(e);
-                        // Lets a caller that already handles Ctrl/Cmd+Enter (e.g. an
-                        // "Enter sends" handler that ignores only Shift) opt out of the
-                        // shortcut instead of submitting twice.
-                        if (e.defaultPrevented)
-                            return;
-                        if (onSubmitShortcut === undefined || e.key !== "Enter" || !(e.metaKey || e.ctrlKey))
-                            return;
-                        e.preventDefault();
-                        onSubmitShortcut();
-                    },
-                }) }));
-        }
-        case "tz":
-            return (_jsx(TzInput, { id: props.id, name: props.name, value: props.value, onChange: props.onChange, ...(props.disabled !== undefined && { disabled: props.disabled }), ...(props.required !== undefined && { required: props.required }), ...(props.hasError !== undefined && { hasError: props.hasError }) }));
-    }
-}
-// ---- DataTable (shadcn: Table) ----
-function sameValueSet(a, b) {
-    return a.length === b.length && a.every((value) => b.includes(value));
-}
-// Single-choice chip row for a facet with `chips`: a chip is pressed while the
-// current selection equals its values, a click replaces the selection.
-function FacetChips({ facet, selected, onChange, }) {
-    const chips = (facet.chips ?? []).filter((chip) => facet.hideEmpty !== true || chip.count !== 0 || sameValueSet(selected, chip.values));
-    return (_jsx("div", { role: "group", "aria-label": facet.label, className: "flex flex-wrap items-center gap-1.5", "data-testid": `facet-${facet.field}`, children: chips.map((chip) => (_jsxs(DefaultButton, { variant: "secondary", size: "sm", pressed: sameValueSet(selected, chip.values), onClick: () => onChange(facet.field, chip.values), testId: `facet-${facet.field}-${chip.id}`, className: "rounded-full", children: [chip.label, facet.showCounts === true && chip.count !== undefined && (_jsx("span", { className: "tabular-nums text-muted-foreground", children: chip.count }))] }, chip.id))) }));
-}
-// Faceted-Filter-Dropdown: Outline-Button (wie shadcns "Columns"-Toggle) +
-// Multi-Select-Checkboxen. Aktive Auswahl → Count-Badge am Button.
-function FacetFilter({ facet, selected, onChange, dense = false, }) {
-    const toggle = (value, checked) => {
-        const next = checked ? [...selected, value] : selected.filter((v) => v !== value);
-        onChange(facet.field, next);
-    };
-    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))) })] }));
-}
-// Time-range filter (fw#3104): 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
-// clamps a typed value on top of that.
-function DateRangeFacetFilter({ facet, onChange, }) {
-    const inputClass = "h-9 rounded-md border border-input bg-transparent px-2 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 max-md:min-h-11";
-    return (_jsxs("div", { className: "flex items-center gap-2", "data-testid": `facet-daterange-${facet.field}`, children: [_jsx("span", { className: "text-sm text-muted-foreground", children: facet.label }), _jsx("input", { type: "date", className: inputClass, value: facet.from, ...(facet.to !== "" && { max: facet.to }), "aria-label": `${facet.label} from`, "data-testid": `facet-daterange-${facet.field}-from`, onChange: (e) => onChange(facet.field, "from", e.target.value) }), _jsx("span", { className: "text-sm text-muted-foreground", children: "\u2013" }), _jsx("input", { type: "date", className: inputClass, value: facet.to, ...(facet.from !== "" && { min: facet.from }), "aria-label": `${facet.label} to`, "data-testid": `facet-daterange-${facet.field}-to`, onChange: (e) => onChange(facet.field, "to", e.target.value) })] }));
-}
-// The vendored Table wraps <table> in an `overflow-x-auto` container, which
-// would become the scrollport of a sticky header. A scrollBody table scrolls
-// in its parent instead, so it renders the bare <table>.
-function FlushTable({ className, ...props }) {
-    return (_jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }));
-}
-// Header cells stick to the scroll surface; the bottom rule is an inset
-// shadow because a border on a sticky cell scrolls away under border-collapse.
-// Column weight (medium vs. semibold for the sorted one) lives on the th itself
-// in SortableHeader: a `[&_th]:font-*` rule here would outrank it.
-// Child selectors only: an expanded row nests a whole table inside a cell, and
-// descendant selectors would make its header sticky and re-pad its cells.
-const FILL_TABLE_CLASS = cn("[&>thead>tr>th]:sticky [&>thead>tr>th]:top-0 [&>thead>tr>th]:z-10 [&>thead>tr>th]:h-9 [&>thead>tr>th]:bg-muted [&>thead>tr>th]:px-2 [&>thead>tr>th]:text-[13px]", "[&>thead>tr>th]:shadow-[inset_0_-1px_0_var(--color-border)] [&>thead>tr>th_button]:text-[13px] [&>tbody>tr>td]:px-2 [&>tbody>tr>td]:py-0", "[&>*>tr>:first-child]:pl-6 [&>*>tr>:last-child]:pr-6");
-// `!`: beats the first/last-child padding of FILL_TABLE_CLASS, which would
-// otherwise widen the narrow toggle column / pad the full-width expansion cell.
-// The nested table's sticky actions cell (last td) gets the muted surface
-// instead of its own md:bg-background, so it blends into the area.
-const EXPAND_TOGGLE_CELL_CLASS = "w-10 px-1! py-0!";
-const EXPANSION_CELL_CLASS = "whitespace-normal bg-muted p-0! align-top md:[&_td:last-child]:bg-muted";
-const EXPANSION_CONTENT_CLASS = "pt-1 pr-4 pb-3.5 pl-[52px]";
-function RowExpandToggle({ expanded, controlsId, label, onToggle, testId, }) {
-    return (_jsx(UiButton, { type: "button", variant: "ghost", size: "icon", className: "size-8 shrink-0 max-md:size-11", "aria-expanded": expanded, ...(expanded && { "aria-controls": controlsId }), "aria-label": label, "data-testid": testId, onClick: (e) => {
-            e.stopPropagation();
-            onToggle();
-        }, onKeyDown: (e) => e.stopPropagation(), children: _jsx(ChevronRight, { className: cn("size-4 transition-transform", expanded && "rotate-90"), "aria-hidden": "true" }) }));
-}
-const TABLE_FOOTER_BAR_CLASS = cn("flex h-15 shrink-0 items-center gap-4 border-t border-border bg-card pl-4 pr-2", "text-[13px] tabular-nums text-foreground-secondary md:h-11 md:px-6");
-function DataTableFooter({ count, itemNoun, testId, }) {
-    const t = useOptionalTranslation();
-    const noun = itemNoun?.(count);
-    const label = noun !== undefined
-        ? (t?.("kumiko.list.count.noun", { count: count.toLocaleString(), noun }) ??
-            `${count.toLocaleString()} ${noun}`)
-        : count === 1
-            ? (t?.("kumiko.list.count.one") ?? "1 entry")
-            : (t?.("kumiko.list.count.other", { count: count.toLocaleString() }) ??
-                `${count.toLocaleString()} entries`);
-    return (_jsx("div", { "data-testid": testId, className: TABLE_FOOTER_BAR_CLASS, children: _jsx("span", { "data-testid": `${testId}-count`, children: label }) }));
-}
-// Cell content is a ReactNode, so the tooltip text is read from the rendered DOM.
-function showFullTextOnHover(event) {
-    const element = event.currentTarget;
-    element.title = element.scrollWidth > element.clientWidth ? (element.textContent ?? "") : "";
-}
-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).
-    // 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
-    // single-mount pattern as EmbeddedListInput/embedded-list-input.tsx.
-    const isNarrow = useIsNarrowViewport();
-    const [facetsOpenNarrow, setFacetsOpenNarrow] = useState(false);
-    const [toggledGroups, setToggledGroups] = useState(new Set());
-    // Toolbar-Wrapper: gemeinsamer Container für Toolbar+Tabelle damit
-    // beide visuell zusammengehören. Toolbar ist NICHT sticky — Lists
-    // scrollen typischerweise mit dem Page-Container, nicht intern.
-    // Sticky würde mit der Topbar konkurrieren.
-    // The row click already runs rowClick actions, so with a clickable row they
-    // must not reappear in the kebab (a list whose only action is the rowClick
-    // one gets no actions column at all).
-    const rowIsLink = onRowClick !== undefined;
-    const menuActions = rowActions !== undefined && rowIsLink
-        ? rowActions.filter((action) => action.rowClick !== true)
-        : rowActions;
-    // The table keeps every action in "inline" mode, and with editable cells the
-    // first cell is not a keyboard link (FirstCellLink is off), so the kebab is
-    // then the only keyboard route to the rowClick action.
-    const tableActions = rowActionMode === "inline" || onCellChange !== undefined ? rowActions : menuActions;
-    const rowClickAction = rowActions?.find((action) => action.rowClick === true);
-    const rowClickLabel = rowClickAction?.label;
-    const rowClickIsHidden = (row) => rowClickAction?.isVisible !== undefined && !rowClickAction.isVisible(row);
-    const hasTableActions = tableActions !== undefined && tableActions.length > 0;
-    const isEmpty = rows.length === 0;
-    const expansionIdPrefix = useId();
-    const isRowExpandable = renderExpandedRow !== undefined && onToggleRowExpanded !== undefined;
-    const rowTestId = (row) => getRowTestId?.(row) ?? `row-${row.id}`;
-    const expansionDomId = (row) => `${expansionIdPrefix}-${row.id}`;
-    // The expand toggle of a row, shared by table and card layout. Named after
-    // the first data column, the one a user recognizes the row by.
-    function renderExpandToggle(row) {
-        if (!isRowExpandable)
-            return null;
-        const expanded = expandedRowIds?.has(row.id) === true;
-        const firstColumn = columns[0];
-        const title = (firstColumn !== undefined ? cellTitle(row.values[firstColumn.field]) : undefined) ?? "";
-        const labelKey = expanded ? "kumiko.list.row.collapse" : "kumiko.list.row.expand";
-        return (_jsx(RowExpandToggle, { expanded: expanded, controlsId: expansionDomId(row), label: tableTranslate?.(labelKey, { title }) ?? `${expanded ? "Collapse" : "Expand"} ${title}`, onToggle: () => onToggleRowExpanded(row.id), testId: `${rowTestId(row)}-toggle` }));
-    }
-    function renderExpansion(row, as, colSpan) {
-        if (!isRowExpandable || expandedRowIds?.has(row.id) !== true)
-            return null;
-        const content = renderExpandedRow(row);
-        if (as === "item") {
-            return (_jsx("li", { id: expansionDomId(row), "data-testid": `${rowTestId(row)}-expansion`, className: "border-b border-border-row bg-muted px-4 pt-1 pb-3.5", children: content }));
-        }
-        return (_jsx(TableRow, { id: expansionDomId(row), "data-testid": `${rowTestId(row)}-expansion`, className: "hover:bg-transparent", children: _jsx(TableCell, { colSpan: colSpan, className: EXPANSION_CELL_CLASS, children: _jsx("div", { className: EXPANSION_CONTENT_CLASS, children: content }) }) }));
-    }
-    const fillsHeight = scrollBody === true;
-    const TableRoot = fillsHeight ? FlushTable : Table;
-    const emptyBlock = (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-empty` : "render-list-empty", className: cn("flex flex-col items-center justify-center p-12 text-sm text-muted-foreground gap-3", chromeless !== true && !fillsHeight && "rounded-md border border-dashed"), children: emptyState ?? _jsx("span", { children: tableTranslate?.("kumiko.list.no-entries") ?? "No entries." }) }));
-    const tableItems = buildTableItems(rows, rowGrouping, toggledGroups);
-    function renderGroupToggle(item) {
-        return (_jsxs("button", { type: "button", "aria-expanded": !item.collapsed, "data-testid": `row-group-${item.key}-toggle`, onClick: () => setToggledGroups((prev) => {
-                const next = new Set(prev);
-                if (!next.delete(item.key))
-                    next.add(item.key);
-                return next;
-            }), className: "flex w-full items-center gap-2 px-4 py-2 text-left text-xs font-medium text-foreground-secondary", children: [item.collapsed ? (_jsx(ChevronRight, { className: "size-3.5" })) : (_jsx(ChevronDown, { className: "size-3.5" })), item.label] }));
-    }
-    function tableInner() {
-        if (isEmpty)
-            return emptyBlock;
-        return (_jsx("div", { className: cn(!fillsHeight && "overflow-hidden", !fillsHeight && chromeless !== true && "rounded-lg border bg-card"), children: _jsxs(TableRoot, { "data-testid": testId, className: fillsHeight ? FILL_TABLE_CLASS : undefined, children: [_jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [isRowExpandable && (_jsx(TableHead, { "data-testid": "column-expand", className: EXPAND_TOGGLE_CELL_CLASS })), columns.map((col) => (_jsx(SortableHeader, { field: col.field, label: col.label, sortable: col.sortable === true, highlighted: col.highlighted === true, numeric: NUMERIC_COLUMN_TYPES.has(col.type), fitContent: col.fileDisplay !== undefined, ...(sort !== undefined && sort !== null && { sort }), ...(onSortChange !== undefined && { onSortChange }) }, col.field))), hasTableActions && (_jsx(TableHead, { "data-testid": "column-actions", 
-                                    // From md: sticky right-0 + bg-muted (= header tone) so the
-                                    // action column stays at the right edge during horizontal
-                                    // scroll on wider screens. Below md, actions scroll in
-                                    // normal flow — sticky there would pin the column over the
-                                    // preceding data column instead of the (already narrow)
-                                    // page edge. No border-l: a permanent divider looks heavy;
-                                    // the sticky bg already sets the column apart during scroll.
-                                    className: "w-px text-right text-muted-foreground md:sticky md:right-0 md:z-10 md:bg-muted", "aria-label": tableTranslate?.("kumiko.list.actions") ?? "Actions" }))] }) }), _jsx(TableBody, { children: tableItems.map((item) => {
-                            if (item.kind === "group") {
-                                return (_jsx(TableRow, { "data-testid": `row-group-${item.key}`, children: _jsx(TableCell, { colSpan: columns.length + (isRowExpandable ? 1 : 0) + (hasTableActions ? 1 : 0), className: "bg-muted/40 p-0", children: renderGroupToggle(item) }) }, `group-${item.key}`));
-                            }
-                            const row = item.row;
-                            const opensOnClick = rowIsLink && !rowClickIsHidden(row);
-                            return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), onClick: opensOnClick ? () => onRowClick(row) : undefined, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", fillsHeight && "h-10 border-border-row hover:bg-muted"), children: [isRowExpandable && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: EXPAND_TOGGLE_CELL_CLASS, children: renderExpandToggle(row) })), columns.map((col, colIndex) => (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, 
-                                                // Text wraps instead of truncating: nowrap cells keep their
-                                                // full width, so a wide table scrolled sideways and its
-                                                // last column slid under the sticky actions column with
-                                                // nothing visibly cut off. max-w-xs bounds a single column;
-                                                // badges and dates stay nowrap by their own classes.
-                                                className: cn(col.fileDisplay === undefined
-                                                    ? "max-w-xs whitespace-normal break-words"
-                                                    : FIT_CONTENT_CELL_CLASS, colIndex === 0
-                                                    ? "font-medium text-foreground"
-                                                    : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40"), title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: colIndex === 0 && opensOnClick && onCellChange === undefined, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: rowClickLabel, children: _jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && {
-                                                            optionLabels: col.optionLabels,
-                                                        }), ...(col.optionTones !== undefined && { optionTones: col.optionTones }), ...(col.grouping !== undefined && { grouping: col.grouping }), ...(col.fileDisplay !== undefined && { fileDisplay: col.fileDisplay }), ...(onCellChange !== undefined && {
-                                                            onChange: (value) => onCellChange(row.id, col.field, value),
-                                                        }), ...cellLinkProp(col, row, !(colIndex === 0 && opensOnClick && onCellChange === undefined)) }) }) }, col.field))), hasTableActions && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "actions") ?? `cell-${row.id}-actions`, 
-                                                // From md: sticky-right so the actions stay visible on the
-                                                // right edge during horizontal scroll. Below md, actions
-                                                // scroll with the row like any other cell — sticky there
-                                                // would hide the neighboring data column on narrow
-                                                // viewports. bg-background sets the column apart during
-                                                // scroll — no border-l (divider too heavy).
-                                                className: cn("whitespace-nowrap text-right md:sticky md:right-0 md:z-10 md:bg-background", fillsHeight && "md:bg-card"), 
-                                                // Action-cell events must not trigger the row click/activation
-                                                // (typically "Open Detail" — the user wanted the action,
-                                                // not navigation). We stopPropagation for mouse and
-                                                // keyboard so a11y stays consistent.
-                                                onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: tableActions, mode: rowActionMode, rowIsLink: rowIsLink }) }))] }), renderExpansion(row, "row", columns.length + (isRowExpandable ? 1 : 0) + (hasTableActions ? 1 : 0))] }, row.id));
-                        }) })] }) }));
-    }
-    // No column headers below the breakpoint, so the click-to-sort affordance
-    // on SortableHeader has nothing to attach to. A single native <select> is
-    // the whole fix — no custom widget, no menu — fed straight from the
-    // columns marked sortable in the ViewModel. Options carry the resolved
-    // {field, dir} directly so onChange can look the pick up by value instead
-    // of parsing/casting the option string back apart.
-    const sortableColumns = columns.filter((col) => col.sortable);
-    const sortOptions = sortableColumns.flatMap((col) => [
-        { value: `${col.field}:asc`, field: col.field, dir: "asc", label: `${col.label} ↑` },
-        { value: `${col.field}:desc`, field: col.field, dir: "desc", label: `${col.label} ↓` },
-    ]);
-    const { image: cardImageColumn, title: cardTitleColumn, status: cardStatusColumn, meta: cardMetaColumns, } = cardColumnRoles(columns);
-    function cardCell(row, col) {
-        // A bare check mark in the subtitle line says nothing without its column.
-        if (showsBareCheckMark(col.type, row.values[col.field], col.renderer))
-            return col.label;
-        return (_jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && { optionLabels: col.optionLabels }), ...(col.optionTones !== undefined && { optionTones: col.optionTones }), ...(col.grouping !== undefined && { grouping: col.grouping }), ...(col.fileDisplay !== undefined && { fileDisplay: col.fileDisplay, compactFile: true }), ...(onCellChange !== undefined && {
-                onChange: (value) => onCellChange(row.id, col.field, value),
-            }), ...cellLinkProp(col, row, !(rowIsLink && !rowClickIsHidden(row))) }));
-    }
-    function renderCard(row) {
-        const metaColumns = cardMetaColumns.filter((col) => !isEmptyCellValue(row.values[col.field]) &&
-            !isUnlabeledFalse(col.type, row.values[col.field], col.renderer));
-        const showStatus = cardStatusColumn !== undefined && !isEmptyCellValue(row.values[cardStatusColumn.field]);
-        const hasMenu = menuActions !== undefined && menuActions.length > 0;
-        const opensOnClick = rowIsLink && !rowClickIsHidden(row);
-        const body = (_jsxs(_Fragment, { children: [cardImageColumn?.fileDisplay !== undefined && (_jsx("div", { "data-testid": `card-image-${row.id}`, className: "shrink-0", children: _jsx(CardLeadingImage, { value: row.values[cardImageColumn.field], display: cardImageColumn.fileDisplay }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [cardTitleColumn !== undefined && (_jsx("span", { "data-testid": getCellTestId?.(row, cardTitleColumn.field) ??
-                                        `cell-${row.id}-${cardTitleColumn.field}`, className: "min-w-0 break-words text-base font-semibold text-foreground", children: cardCell(row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": getCellTestId?.(row, cardStatusColumn.field) ??
-                                        `cell-${row.id}-${cardStatusColumn.field}`, className: "shrink-0", children: cardCell(row, cardStatusColumn) }))] }), metaColumns.length > 0 && (_jsx("div", { className: "min-w-0 overflow-x-clip", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ms-3 flex min-w-0 flex-wrap items-center text-[13px] leading-5 tabular-nums text-foreground-secondary", children: metaColumns.map((col) => (_jsxs("div", { className: "flex h-5 min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("div", { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, className: "min-w-0 truncate leading-5", onPointerEnter: showFullTextOnHover, children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(row, col) })) : (cardCell(row, col)) })] }, col.field))) }) }))] }), opensOnClick && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
-        const rowItem = (_jsxs("li", { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), isRowExpandable ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4"), ...(opensOnClick && { onClick: () => onRowClick(row) }), children: [renderExpandToggle(row), opensOnClick ? (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
-                        if (e.key !== "Enter")
-                            return;
-                        e.preventDefault();
-                        e.stopPropagation();
-                        onRowClick(row);
-                    }, children: body })) : (body), hasMenu && (_jsx("div", { onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: _jsx(RowActionsCell, { row: row, actions: menuActions, mode: rowActionMode, rowIsLink: rowIsLink, compact: true }) }))] }, row.id));
-        if (!isRowExpandable)
-            return rowItem;
-        // The expansion is a sibling <li>, outside the row's click target, so
-        // clicks in the sub-area never navigate the parent row.
-        return (_jsxs(Fragment, { children: [rowItem, renderExpansion(row, "item", 0)] }, row.id));
-    }
-    function cardsInner() {
-        if (isEmpty)
-            return emptyBlock;
-        const sortLabel = sort !== undefined && sort !== null
-            ? (tableTranslate?.("kumiko.list.sort.by", {
-                column: columns.find((col) => col.field === sort.field)?.label ?? sort.field,
-            }) ?? `Sorted by ${sort.field}`)
-            : (tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted");
-        const SortArrow = sort?.dir === "desc" ? ArrowDown : ArrowUp;
-        // URL state can carry a sort on a column that is not sortable; without an
-        // option for it the select would claim "Unsorted" while the list is sorted.
-        const currentSortValue = sort !== undefined && sort !== null ? `${sort.field}:${sort.dir}` : "";
-        const currentSortIsUnlisted = sort !== undefined && sort !== null && !sortOptions.some((o) => o.value === currentSortValue);
-        return (_jsx("div", { "data-testid": testId, className: "contents", children: _jsxs("div", { "data-testid": testId !== undefined ? `${testId}-cards` : "render-list-cards", className: "flex flex-col", children: [onSortChange !== undefined && sortableColumns.length > 0 && (_jsxs("div", { className: "relative flex h-9 items-center gap-1.5 px-4 text-[13px] text-foreground-secondary", children: [_jsx("span", { "aria-hidden": "true", children: sortLabel }), sort !== undefined && sort !== null && (_jsx(SortArrow, { className: "size-3.5", "aria-hidden": "true" })), _jsxs("select", { "aria-label": tableTranslate?.("kumiko.list.sort.label") ?? "Sort", "data-testid": testId !== undefined ? `${testId}-sort` : "render-list-sort", value: currentSortValue, onChange: (e) => {
-                                    const raw = e.target.value;
-                                    if (raw === "") {
-                                        onSortChange(null);
-                                        return;
-                                    }
-                                    const picked = sortOptions.find((o) => o.value === raw);
-                                    if (picked === undefined)
-                                        return;
-                                    onSortChange({ field: picked.field, dir: picked.dir });
-                                }, className: "absolute inset-0 size-full cursor-pointer opacity-0", children: [_jsx("option", { value: "", children: tableTranslate?.("kumiko.list.sort.unsorted") ?? "Unsorted" }), currentSortIsUnlisted && (_jsx("option", { value: currentSortValue, children: `${columns.find((col) => col.field === sort.field)?.label ?? sort.field} ${sort.dir === "desc" ? "↓" : "↑"}` })), sortOptions.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value)))] })] })), _jsx("ul", { className: "m-0 list-none border-t border-border-row p-0", children: tableItems.map((item) => item.kind === "group" ? (_jsx("li", { "data-testid": `row-group-${item.key}`, className: "border-b border-border-row bg-muted/40", children: renderGroupToggle(item) }, `group-${item.key}`)) : (renderCard(item.row))) })] }) }));
-    }
-    const tableContent = isNarrow ? cardsInner() : tableInner();
-    // Pager wird IMMER unter der Tabelle gerendert (auch bei rows=[]),
-    // damit der User bei einem Filter-Hit-of-Zero zurückblättern kann
-    // ohne die Liste zu verlieren. Außer total === 0 — dann gibt's
-    // nichts zu paginieren. Inkompatibel mit Infinite-Scroll: Caller
-    // setzt entweder pager ODER onReachEnd.
-    const pagerElement = pager !== undefined && pager.total > 0 ? (_jsx(Pager, { page: pager.page, limit: pager.limit, total: pager.total, onPageChange: pager.onPageChange, ...(pager.pageSizeOptions !== undefined && { pageSizeOptions: pager.pageSizeOptions }), ...(pager.onPageSizeChange !== undefined && { onPageSizeChange: pager.onPageSizeChange }), ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-pager` : "render-list-pager", pinned: fillsHeight })) : undefined;
-    const sentinelElement = pagerElement === undefined && onReachEnd !== undefined ? (_jsx(InfiniteSentinel, { onReachEnd: onReachEnd, loadingMore: loadingMore === true, hasMore: hasMore !== false, rowsCount: rows.length, testId: testId !== undefined ? `${testId}-sentinel` : "render-list-sentinel" })) : undefined;
-    // With scrollBody the footer (pager, else the entry count) sits OUTSIDE the
-    // scroll surface so it stays put at any row count; the infinite sentinel
-    // stays INSIDE, or it would never intersect the scrollport.
-    const content = fillsHeight ? (_jsxs(_Fragment, { children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : "render-list-scroll", className: "min-h-0 flex-1 overflow-auto border-t border-border bg-card", children: [tableContent, sentinelElement] }), pagerElement ?? (_jsx(DataTableFooter, { count: rows.length, ...(itemNoun !== undefined && { itemNoun }), testId: testId !== undefined ? `${testId}-footer` : "render-list-footer" }))] })) : (_jsxs(_Fragment, { children: [tableContent, pagerElement, sentinelElement] }));
-    const hasFacets = filterFacets !== undefined && filterFacets.length > 0 && onFilterChange !== undefined;
-    const hasDateRangeFacets = dateRangeFacets !== undefined && dateRangeFacets.length > 0 && onDateRangeChange !== undefined;
-    const hasActiveFilters = filterValues !== undefined && Object.values(filterValues).some((v) => v.length > 0);
-    const facetCluster = hasFacets || hasDateRangeFacets ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [hasFacets &&
-                filterFacets.map((facet) => (_jsx(FacetFilter, { facet: facet, selected: filterValues?.[facet.field] ?? [], onChange: onFilterChange, dense: fillsHeight }, facet.field))), hasDateRangeFacets &&
-                dateRangeFacets.map((facet) => (_jsx(DateRangeFacetFilter, { facet: facet, onChange: onDateRangeChange }, facet.field))), hasActiveFilters && onFilterReset !== undefined && (_jsxs(UiButton, { variant: "ghost", size: "sm", className: "h-9 px-2", onClick: onFilterReset, "data-testid": "facet-reset", children: [tableTranslate?.("kumiko.list.filter.reset") ?? "Reset", _jsx(X, {})] }))] })) : undefined;
-    const collapsesFacetsBehindButton = isNarrow && fillsHeight && facetCluster !== undefined;
-    const hasToolbar = toolbarStart !== undefined || toolbarEnd !== undefined || facetCluster !== undefined;
-    // dashboard-01-Muster: die Toolbar (Search + Facets + "+ Neu") sitzt ÜBER
-    // der Tabelle im selben Padding-Block — kein separater bg-Bar, kein Screen-
-    // Titel (der steht im Breadcrumb der Shell).
-    return (_jsxs("div", { className: cn("flex flex-col w-full", 
-        // scrollBody: the wrapper fills its container so the footer sits at the
-        // same spot at 3 and 300 rows; the 24px insets live in toolbar, cells
-        // and footer, so no outer padding.
-        fillsHeight
-            ? "h-full min-h-0"
-            : cn("gap-4", screenPadding === true
-                ? 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
-                    ? 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] }));
-}
-// The primary row action is the one that always stays a visible text
-// button — `edit` if declared, else the first visible action (fw
-// bedienkonzept L3: "Bearbeiten steht in jeder Zeile, immer, als Text").
-function primaryRowAction(actions) {
-    return actions.find((a) => a.id === "edit") ?? actions[0];
-}
-// RowActionsCell renders the row actions depending on `mode`:
-//   - "adaptive" (default): when the row itself is the link (`rowIsLink`)
-//     every action sits in the kebab; otherwise the primary action (see
-//     `primaryRowAction`) is a link-button and the rest goes into the kebab.
-//     A single action never gets a kebab.
-//   - "inline": ALWAYS inline buttons, left-aligned + full-width, even for
-//     >2 (no kebab). `w-full justify-start` pins the first button to the
-//     column's left edge so it sits at the same position across rows
-//     (otherwise it would drift with differently-sized labels).
-// The isVisible filter runs here; an action hidden for a given row never
-// reaches render. If every action is hidden, the cell stays empty (no
-// phantom column).
-function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, compact = false, }) {
-    const visible = actions.filter((a) => a.isVisible === undefined || a.isVisible(row));
-    if (visible.length === 0)
-        return null;
-    const hasExplicitDisplay = visible.some((a) => a.display !== undefined);
-    if (mode === "inline") {
-        // Teil C: >2 actions all carrying an icon collapse to icon-only —
-        // otherwise "inline" is exactly the wall-to-wall text-button problem
-        // this feature exists to fix. An author-set `display` takes that choice over.
-        const iconOnly = !hasExplicitDisplay && shouldRenderActionsIconOnly(visible);
-        return (_jsx("div", { className: "flex w-full items-center gap-1 justify-start", children: visible.map((a) => (_jsx(RowActionButton, { row: row, action: a, iconOnly: iconOnly, compact: compact }, a.id))) }));
-    }
-    if (hasExplicitDisplay) {
-        const inline = visible.filter((a) => a.display !== undefined);
-        const rest = visible.filter((a) => a.display === undefined);
-        return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
-    }
-    if (rowIsLink) {
-        return (_jsx("div", { className: "inline-flex items-center justify-end", children: _jsx(RowActionsKebab, { row: row, actions: visible }) }));
-    }
-    const primary = primaryRowAction(visible);
-    const rest = visible.filter((a) => a.id !== primary?.id);
-    return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [primary !== undefined && _jsx(RowActionButton, { row: row, action: primary, asLink: true }), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
-}
-function isEmptyCellValue(value) {
-    return (value === null || value === undefined || (typeof value === "string" && value.trim() === ""));
-}
-// A boolean false renders as an empty string unless the column's format spec names a falseLabel.
-// Projection lists synthesize every column as type "text", so a boolean format spec
-// marks a boolean column on its own.
-function isBooleanColumn(type, renderer) {
-    if (type === "boolean")
-        return true;
-    return (typeof renderer === "object" &&
-        renderer !== null &&
-        "format" in renderer &&
-        renderer.format === "boolean");
-}
-function isUnlabeledFalse(type, value, renderer) {
-    if (value !== false || !isBooleanColumn(type, renderer))
-        return false;
-    if (renderer === undefined)
-        return true;
-    return (typeof renderer === "object" &&
-        renderer !== null &&
-        "format" in renderer &&
-        renderer.format === "boolean" &&
-        !("falseLabel" in renderer));
-}
-function isUnlabeledBooleanFormat(renderer) {
-    return (typeof renderer === "object" &&
-        renderer !== null &&
-        "format" in renderer &&
-        renderer.format === "boolean" &&
-        !("trueLabel" in renderer) &&
-        !("falseLabel" in renderer));
-}
-function BooleanCell({ value, translate, }) {
-    const label = value
-        ? (translate?.("kumiko.boolean.yes") ?? "Yes")
-        : (translate?.("kumiko.boolean.no") ?? "No");
-    return (_jsxs("span", { "data-boolean-cell": value ? "true" : "false", children: [value ? (_jsx(Check, { "aria-hidden": "true", className: "h-4 w-4" })) : (_jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: EMPTY_VALUE_PLACEHOLDER })), _jsx("span", { className: "sr-only", children: label })] }));
-}
-// True when the cell would render the default "✓": no renderer, or a boolean
-// format spec that names no trueLabel of its own.
-function showsBareCheckMark(type, value, renderer) {
-    if (value !== true || !isBooleanColumn(type, renderer))
-        return false;
-    if (renderer === undefined)
-        return true;
-    return (typeof renderer === "object" &&
-        renderer !== null &&
-        "format" in renderer &&
-        !("trueLabel" in renderer));
-}
-// Badges (select pills, component renderers) must never be clipped by the card's meta truncation.
-function isBadgeColumn(col) {
-    return (col.type === "select" ||
-        col.type === "multiSelect" ||
-        isComponentRendererRef(col.renderer) !== undefined);
-}
-// The first cell is the keyboard-reachable entry point of a clickable row; the
-// row's own onClick keeps serving the mouse. Enter is handled explicitly so
-// it also opens the row where a button does not synthesize a click.
-function FirstCellLink({ enabled, empty, emptyLabel, onOpen, children, }) {
-    if (!enabled || (empty && emptyLabel === undefined))
-        return children;
-    return (_jsx("button", { type: "button", className: "max-w-full cursor-pointer truncate bg-transparent p-0 text-left font-medium text-foreground hover:underline focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: (e) => {
-            e.stopPropagation();
-            onOpen();
-        }, onKeyDown: (e) => {
-            if (e.key !== "Enter")
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            onOpen();
-        }, children: empty ? _jsx("span", { className: "sr-only", children: emptyLabel }) : children }));
-}
-// Shared trigger-State zwischen Inline-Button + Kebab-Item: busy-Flag
-// (während async onTrigger läuft) + confirm-pending-Action. Beide Sub-
-// Components hatten denselben State-Block dupliziert + parallel zur
-// Confirm-Dialog-Render-Logic — der Hook konsolidiert das.
-function useRowActionTrigger(row) {
-    const [busy, setBusy] = useState(false);
-    const { toast } = useToast();
-    const t = useTranslation();
-    const triggerNow = async (action) => {
-        setBusy(true);
-        try {
-            await action.onTrigger(row);
-        }
-        catch (e) {
-            // Surfacing statt schlucken: ein verschluckter Write-Fehler sah für
-            // den User wie "nichts passiert" aus (Prod-Bug 2026-06-07).
-            const dispatcherError = e instanceof WriteFailedError ? e.dispatcherError : undefined;
-            const docsUrl = dispatcherError?.docsUrl;
-            const requestId = dispatcherError?.requestId;
-            toast({
-                title: t("kumiko.rowAction.failed"),
-                description: e instanceof Error ? e.message : String(e),
-                variant: "bad",
-                ...(docsUrl !== undefined && { docsUrl }),
-                ...(requestId !== undefined && { requestId }),
-            });
-        }
-        finally {
-            setBusy(false);
-        }
-    };
-    return { busy, triggerNow };
-}
-// An icon-only form without a resolvable icon would render an empty button.
-// `compact` is the narrow card layout, where "responsive" collapses to its icon.
-function effectiveRowActionDisplay(display, hasIcon, compact) {
-    if (display === "responsive")
-        return hasIcon && compact ? "icon" : "button";
-    if (display === "icon" && !hasIcon)
-        return "link";
-    return display;
-}
-function RowActionButton({ row, action, iconOnly = false, asLink = false, compact = false, }) {
-    const { busy, triggerNow } = useRowActionTrigger(row);
-    const [confirmOpen, setConfirmOpen] = useState(false);
-    const resolvedIcon = actionIconFor(action.icon);
-    const display = effectiveRowActionDisplay(action.display, resolvedIcon !== undefined, compact);
-    const isBorderedButton = display === "button";
-    const showIconOnly = display === "icon" || (display === undefined && iconOnly && resolvedIcon !== undefined);
-    const linkLike = display === "link" || (display === undefined && asLink);
-    const variantClass = isBorderedButton
-        ? action.style === "primary"
-            ? "border border-transparent bg-primary text-primary-foreground hover:bg-primary/90"
-            : action.style === "danger"
-                ? "border border-destructive/40 bg-card text-destructive hover:bg-destructive/10"
-                : "border border-border-strong bg-card text-foreground hover:bg-accent"
-        : action.style === "danger"
-            ? "text-destructive hover:bg-destructive/10"
-            : linkLike
-                ? "font-medium text-primary hover:bg-muted"
-                : action.style === "primary"
-                    ? "text-primary hover:bg-primary/10"
-                    : "text-foreground hover:bg-accent";
-    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "data-testid": `row-${row.id}-action-${action.id}`, disabled: busy, ...(showIconOnly && { "aria-label": action.label, title: action.label }), onClick: (e) => {
-                    e.stopPropagation();
-                    if (needsActionConfirm(action)) {
-                        setConfirmOpen(true);
-                    }
-                    else {
-                        void triggerNow(action);
-                    }
-                }, className: cn("inline-flex items-center justify-center gap-1.5 text-sm", isBorderedButton
-                    ? "h-8 rounded-md px-3 font-medium max-md:h-11"
-                    : linkLike
-                        ? "h-7 rounded-md px-2.5 max-md:h-11"
-                        : "h-8 rounded-sm max-md:h-11", showIconOnly ? "w-8 max-md:w-11" : !linkLike && !isBorderedButton && "px-2", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:opacity-50 disabled:pointer-events-none", variantClass), children: busy ? (_jsx(Loader2, { className: "size-3.5 animate-spin", "aria-hidden": "true" })) : resolvedIcon === undefined || (linkLike && !showIconOnly) ? (action.label) : showIconOnly ? (_jsx(Icon, { name: resolvedIcon, className: "size-4" })) : (_jsxs(_Fragment, { children: [_jsx(Icon, { name: resolvedIcon, className: "size-4" }), action.label] })) }), _jsx(DefaultDialog, { open: confirmOpen, onOpenChange: setConfirmOpen, title: action.label, ...(action.confirm !== undefined && { description: action.confirm }), confirmLabel: action.confirmLabel ?? action.label, ...(action.style === "danger" && { variant: "danger" }), onConfirm: () => triggerNow(action), testId: `row-${row.id}-action-${action.id}-dialog` })] }));
-}
-// Kebab dropdown for >2 actions, one inline confirm dialog per item like
-// the inline-button path. Menu is controlled so it closes explicitly on
-// select, instead of relying on Radix's auto-close, which preventDefault
-// below blocks.
-function RowActionsKebab({ row, actions, }) {
-    const { triggerNow } = useRowActionTrigger(row);
-    const t = useTranslation();
-    const [pendingConfirm, setPendingConfirm] = useState(null);
-    const [menuOpen, setMenuOpen] = useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(DropdownMenu, { open: menuOpen, onOpenChange: setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": t("kumiko.list.row-actions.more"), "data-testid": `row-${row.id}-actions-menu`, className: cn("inline-flex size-7 items-center justify-center rounded-md max-md:size-11", "hover:bg-accent text-muted-foreground hover:text-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"), children: _jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", 
-                        // Radix refocuses the trigger after the exit animation, which by then sits behind the confirm dialog's aria-hidden.
-                        onCloseAutoFocus: (e) => {
-                            if (pendingConfirm !== null)
-                                e.preventDefault();
-                        }, children: actions.map((action) => (_jsx(DropdownMenuItem, { "data-testid": `row-${row.id}-action-${action.id}`, onSelect: (e) => {
-                                e.preventDefault();
-                                setMenuOpen(false);
-                                if (needsActionConfirm(action)) {
-                                    setPendingConfirm(action);
-                                }
-                                else {
-                                    void triggerNow(action);
-                                }
-                            }, className: cn(action.style === "danger" && "text-destructive focus:text-destructive"), children: action.label }, action.id))) })] }), pendingConfirm !== null && (_jsx(DefaultDialog, { open: true, onOpenChange: (open) => {
-                    if (!open)
-                        setPendingConfirm(null);
-                }, title: pendingConfirm.label, ...(pendingConfirm.confirm !== undefined && { description: pendingConfirm.confirm }), confirmLabel: pendingConfirm.confirmLabel ?? pendingConfirm.label, ...(pendingConfirm.style === "danger" && { variant: "danger" }), onConfirm: async () => {
-                    const action = pendingConfirm;
-                    setPendingConfirm(null);
-                    await triggerNow(action);
-                }, testId: `row-${row.id}-action-${pendingConfirm.id}-dialog` }))] }));
-}
-// Header/row-actions overflow menu (A7): the trigger carries the classes of a
-// secondary icon Button so it matches neighbouring icon buttons, including
-// the 44 px touch size on phones. Generic ActionMenuItemSpec items instead of
-// the DataTableRowAction schema (callers own confirm/danger handling per item).
-function ActionOverflowMenu({ items, label, testId }) {
-    const [open, setOpen] = useState(false);
-    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(UiButton, { type: "button", variant: "outline", size: "icon", className: SECONDARY_BUTTON_EXTRA_CLASSES, "aria-label": label, "data-testid": testId ?? "action-overflow-menu-trigger", children: _jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }) }) }), _jsx(DropdownMenuContent, { align: "end", children: items.map((item) => {
-                    const resolvedIcon = actionIconFor(item.icon);
-                    return (_jsxs(DropdownMenuItem, { "data-testid": item.testId ?? `${testId ?? "action-overflow-menu"}-item-${item.id}`, disabled: item.disabled === true, onSelect: (e) => {
-                            e.preventDefault();
-                            setOpen(false);
-                            item.onSelect();
-                        }, className: cn(item.variant === "danger" && "text-destructive focus:text-destructive"), children: [resolvedIcon !== undefined && _jsx(Icon, { name: resolvedIcon, className: "size-4" }), item.label] }, item.id));
-                }) })] }));
-}
-// InfiniteSentinel — empty div at the end of the table that uses
-// IntersectionObserver to detect when the user scrolls near the list end.
-// onReachEnd fires exactly once per "becomes visible" transition; the
-// caller debounces via loadingMore (further visibility events are ignored
-// while a page is loading). No observer during server-side render, no
-// observer when hasMore=false — then the sentinel only shows the
-// end-of-list hint via t("kumiko.list.end-of-list"), which requires a
-// LocaleProvider in the tree (same requirement as Field/useRowActionTrigger).
-// Without one, useTranslation() throws; with one that's missing the framework
-// defaults (fallbackBundles not including kumikoDefaultTranslations), the
-// user sees the raw key instead of translated text.
-// ponytail: threshold mirrors the framework default pageSize (kumiko-screen.tsx
-// `screen.pageSize ?? 50`) rather than the real per-screen pageSize, which isn't
-// threaded down to this component. A screen with a custom pageSize can still
-// under- or over-show the marker; thread pageSize through KumikoScreen →
-// RenderList → DataTable → InfiniteSentinel if that's needed (fw#1713).
-export const END_LABEL_MIN_ROWS = 50;
-function InfiniteSentinel({ onReachEnd, loadingMore, hasMore, rowsCount, testId, }) {
-    const t = useTranslation();
-    const ref = useRef(null);
-    useEffect(() => {
-        if (!hasMore)
-            return;
-        if (loadingMore)
-            return;
-        if (typeof IntersectionObserver === "undefined")
-            return;
-        const node = ref.current;
-        if (node === null)
-            return;
-        const observer = new IntersectionObserver((entries) => {
-            // Nur das erste sichtbar-Event pro Mount auslösen — wenn der
-            // User weiter scrollt während noch geladen wird, hindert
-            // loadingMore=true den useEffect dass er den Observer überhaupt
-            // erst remountet.
-            for (const entry of entries) {
-                if (entry.isIntersecting) {
-                    onReachEnd();
-                    break;
-                }
-            }
-        }, { rootMargin: "200px" });
-        observer.observe(node);
-        return () => observer.disconnect();
-    }, [onReachEnd, loadingMore, hasMore]);
-    const showEndLabel = !hasMore && rowsCount >= END_LABEL_MIN_ROWS;
-    return (_jsx("div", { ref: ref, "data-testid": testId, className: cn("flex items-center justify-center text-sm text-muted-foreground", showEndLabel || loadingMore ? "py-4" : ""), children: showEndLabel ? (_jsx("span", { "data-testid": testId !== undefined ? `${testId}-end` : undefined, children: t("kumiko.list.end-of-list") })) : loadingMore ? (_jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" })) : hasMore ? (_jsx("span", { "aria-hidden": "true", children: "\u00A0" })) : null }));
-}
-// Pager — status text on the left ("X – Y of Z"), "Page X of Y" and the
-// prev/next arrows on the right. No numbered page list: the board shows none.
-// `pinned` renders the footer bar of a scrollBody table (fixed height, top
-// border); unpinned it sits as a plain row below the table.
-//
-// Status text and aria-labels go through t(...), which requires a
-// LocaleProvider in the tree — same requirement as InfiniteSentinel above,
-// already established for DataTable consumers.
-function Pager({ page, limit, total, onPageChange, pageSizeOptions, onPageSizeChange, itemNoun, testId, pinned, }) {
-    const t = useTranslation();
-    const totalPages = Math.max(1, Math.ceil(total / limit));
-    const safePage = Math.max(1, Math.min(page, totalPages));
-    const from = (safePage - 1) * limit + 1;
-    const to = Math.min(safePage * limit, total);
-    return (_jsxs("div", { "data-testid": testId, className: pinned === true
-            ? TABLE_FOOTER_BAR_CLASS
-            : "mt-3 flex items-center gap-4 text-[13px] tabular-nums text-foreground-secondary", children: [_jsx("div", { "data-testid": testId !== undefined ? `${testId}-status` : undefined, className: "flex-1", children: itemNoun !== undefined
-                    ? t("kumiko.pager.status.noun", {
-                        from: from.toLocaleString(),
-                        to: to.toLocaleString(),
-                        total: total.toLocaleString(),
-                        noun: itemNoun(total),
-                    })
-                    : t("kumiko.pager.status", {
-                        from: from.toLocaleString(),
-                        to: to.toLocaleString(),
-                        total: total.toLocaleString(),
-                    }) }), pageSizeOptions !== undefined && onPageSizeChange !== undefined && (_jsxs("div", { className: "relative hidden md:block", children: [_jsx("select", { "aria-label": t("kumiko.pager.pageSizeLabel"), "data-testid": testId !== undefined ? `${testId}-page-size` : undefined, value: limit, onChange: (e) => onPageSizeChange(Number(e.target.value)), className: "h-7 appearance-none rounded-md border border-input bg-card pl-2 pr-7 text-[13px] text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", children: pageSizeOptions.map((size) => (_jsx("option", { value: size, children: t("kumiko.pager.pageSize", { size: size.toLocaleString() }) }, size))) }), _jsx(ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 opacity-50", "aria-hidden": "true" })] })), _jsx("div", { className: "hidden md:block", children: t("kumiko.pager.pageOf", {
-                    page: safePage.toLocaleString(),
-                    pages: totalPages.toLocaleString(),
-                }) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(PagerButton, { ariaLabel: t("kumiko.pager.previousPage"), disabled: safePage <= 1, onClick: () => onPageChange(safePage - 1), testId: testId !== undefined ? `${testId}-prev` : undefined, children: _jsx(ChevronLeft, { className: "size-3.5", "aria-hidden": "true" }) }), _jsx(PagerButton, { ariaLabel: t("kumiko.pager.nextPage"), disabled: safePage >= totalPages, onClick: () => onPageChange(safePage + 1), testId: testId !== undefined ? `${testId}-next` : undefined, children: _jsx(ChevronRight, { className: "size-3.5", "aria-hidden": "true" }) })] })] }));
-}
-function PagerButton({ children, onClick, ariaLabel, disabled, testId, }) {
-    return (_jsx("button", { type: "button", onClick: onClick, disabled: disabled, "aria-label": ariaLabel, "data-testid": testId, className: cn("inline-flex size-11 items-center justify-center rounded-md border border-border md:size-7", "hover:bg-muted focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:text-foreground-disabled"), children: children }));
-}
-// SortableHeader — rendert pro Spalte den th-Header, mit oder ohne
-// Click-Sort. Drei Pfade:
-//   (a) sortable=false ODER kein onSortChange → plain Label, keine
-//       Cursor-Interaktion (DataTable rein als View ohne Sort-Wiring).
-//   (b) sortable=true + onSortChange → Header ist ein Button, klick
-//       cycled asc → desc → null. aria-sort spiegelt den State.
-//   (c) sortable=true im Schema, aber keine onSortChange-Prop → still
-//       label-only, aber data-sortable=true bleibt damit Tests die
-//       Schema-Sicht kennen.
-// w-px on an auto-layout table cell shrinks the column to its content (the
-// actions column relies on the same behaviour).
-const FIT_CONTENT_CELL_CLASS = "w-px";
-function SortableHeader({ field, label, sortable, highlighted, numeric, fitContent, sort, onSortChange, }) {
-    const active = sort?.field === field ? sort : undefined;
-    const ariaSort = active?.dir === "asc" ? "ascending" : active?.dir === "desc" ? "descending" : "none";
-    if (!sortable || onSortChange === undefined) {
-        return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": sortable === true ? true : undefined, "data-highlighted": highlighted === true ? "true" : undefined, className: cn("font-medium whitespace-normal text-muted-foreground", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: label }));
-    }
-    const Icon = active?.dir === "asc" ? ArrowUp : active?.dir === "desc" ? ArrowDown : ArrowUpDown;
-    const next = nextSortState(active?.dir, field);
-    return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": "true", "data-highlighted": highlighted === true ? "true" : undefined, "aria-sort": ariaSort, className: cn(active !== undefined
-            ? "font-semibold text-foreground"
-            : "font-medium text-muted-foreground", "whitespace-normal", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: _jsxs("button", { type: "button", onClick: () => onSortChange(next), className: cn("group/sort inline-flex h-8 items-center gap-1.5 rounded-sm px-2 -mx-2 text-sm [font-weight:inherit]", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active !== undefined && "text-foreground"), children: [_jsx("span", { children: label }), _jsx(Icon, { "data-sort-icon": active === undefined ? "idle" : "active", className: cn("size-3.5", active === undefined &&
-                        "opacity-0 group-hover/sort:opacity-40 group-focus-visible/sort:opacity-40"), "aria-hidden": "true" })] }) }));
-}
-// 3-State-Toggle: kein Sort → asc → desc → kein Sort. Idiomatisch für
-// Power-User-Listen wo "ich will die Server-Default-Order zurück" eine
-// echte Aktion ist (statt unendlich asc↔desc zu togglen).
-function nextSortState(current, field) {
-    if (current === undefined)
-        return { field, dir: "asc" };
-    if (current === "asc")
-        return { field, dir: "desc" };
-    return null;
-}
-// Type-guard für die `{ react: { __component: "Name" } }`-Form, in der
-// PlatformComponent-Renderer im Schema serialisiert ankommen. Schemas
-// reisen über die Wire (Server → Client), echte Component-Refs würden
-// das brechen — der String-Key ist die SSoT.
-export function isComponentRendererRef(renderer) {
-    if (renderer === null || typeof renderer !== "object")
-        return undefined;
-    const reactBranch = propertyOf(renderer, "react");
-    if (reactBranch === null || typeof reactBranch !== "object")
-        return undefined;
-    const component = propertyOf(reactBranch, "__component");
-    if (typeof component !== "string" || component.length === 0)
-        return undefined;
-    return { name: component };
-}
-// applyFormatSpec re-exported from headless (platform-agnostic).
-export { applyFormatSpec };
-function isMoneyValue(value) {
-    const currency = propertyOf(value, "currency");
-    return (typeof value === "object" &&
-        value !== null &&
-        typeof propertyOf(value, "amount") === "number" &&
-        typeof currency === "string" &&
-        /^[A-Za-z]{3}$/.test(currency));
-}
-// Type-spezifische Default-Cell-Renderer. Author kann pro Spalte einen
-// expliziten renderer setzen (FormatSpec oder PlatformComponent); ohne
-// expliziten renderer fällt DataTableCell hier durch.
-//
-//   - boolean → ✓ / leer
-//   - timestamp/date → locale-formatiert (kein roher ISO-String)
-//   - number/decimal/bigInt → locale-formatted via Intl.NumberFormat (fw#2160)
-//   - select/multiSelect → human-readable (kebab-case → Title Case), multiSelect values joined with ", "
-//   - money → { amount, currency } formatted via Intl (not "[object Object]")
-//   - text/else → toString
-const ISO_DATETIME_RE = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d+)?(Z|[+-]\d{2}:\d{2})?$/;
-// Deduplicated per column key only (not per screen): a once-per-field-name
-// hint, so a second screen reusing the same field name stays silent.
-const warnedTimestampColumns = new Set();
-// A raw ISO string in a "text" column means the author forgot `renderer:
-// { format: "timestamp" }` — guessing a format here could be wrong, so we
-// warn and leave the value as-is instead of auto-formatting.
-function warnMissingTimestampFormat(columnKey) {
-    if (typeof process === "undefined" || process.env.NODE_ENV === "production")
-        return;
-    const key = columnKey ?? "<unknown column>";
-    if (warnedTimestampColumns.has(key))
-        return;
-    warnedTimestampColumns.add(key);
-    // biome-ignore lint/suspicious/noConsole: dev-only assertion
-    console.warn(`[kumiko] column "${key}" renders a raw ISO timestamp as text — add renderer: { format: "timestamp" } to its column definition.`);
-}
-export function defaultCellRender(value, type, optionLabels, locale, columnKey, grouping = true) {
-    if (value === null || value === undefined || value === "")
-        return "";
-    if (type === "boolean")
-        return value === true ? "✓" : "";
-    if (type === "timestamp" || type === "date") {
-        return applyFormatSpec({ format: type, locale }, value);
-    }
-    if (type === "number" || type === "decimal" || type === "bigInt") {
-        return applyFormatSpec({ format: type, locale, grouping }, value);
-    }
-    if (type === "money") {
-        if (!isMoneyValue(value))
-            return String(value);
-        // formatMoney expects minor units scaled by currencyDecimals(currency).
-        // rehydrateMoney's `amountMinor` is scaled by a flat MINOR_UNIT_SCALE=100
-        // instead, which disagrees with currencyDecimals for non-2-decimal
-        // currencies (JPY: 0 decimals → 100x too high; BHD: 3 decimals → 10x too
-        // low). Deriving minor units from `amount` keeps this consistent with
-        // render-field.tsx's moneyMinorValue.
-        const minor = Math.round(value.amount * 10 ** currencyDecimals(value.currency));
-        return formatMoney(minor, value.currency, locale);
-    }
-    if (type === "select" || type === "multiSelect") {
-        const values = Array.isArray(value) ? value : [value];
-        return values
-            .map((v) => {
-            const raw = String(v);
-            // Translated label from the view-model builder (convention key
-            // `<feature>:entity:<entity>:field:<field>:option:<value>`).
-            // Fallback to humanizeSlug when no label is registered — same
-            // behavior as before the optionLabels patch.
-            const translated = optionLabels?.[raw];
-            return translated !== undefined && translated !== raw ? translated : humanizeSlug(raw);
-        })
-            .join(", ");
-    }
-    if (type === "text" && typeof value === "string" && ISO_DATETIME_RE.test(value)) {
-        warnMissingTimestampFormat(columnKey);
-    }
-    return typeof value === "string" ? value : String(value);
-}
-function humanizeSlug(slug) {
-    // "degraded-performance" → "Degraded performance". A dotted value such as
-    // "mobile.de" is a domain, not a slug, and must stay as stored.
-    if (slug.includes("."))
-        return slug;
-    const spaced = slug.replace(/[-_]/g, " ");
-    return spaced.charAt(0).toUpperCase() + spaced.slice(1);
-}
-// Tooltip-Text für truncated Cells — bei Hover zeigt der Browser den
-// vollen Text. Skipping für Object/Array (das ist nicht user-readable);
-// Number stringifyt der Browser ohnehin korrekt; booleans get no raw true/false tooltip.
-function cellTitle(value) {
-    if (value === null || value === undefined)
-        return undefined;
-    if (typeof value === "string")
-        return value.length > 0 ? value : undefined;
-    if (typeof value === "number")
-        return String(value);
-    return undefined;
-}
-function selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge) {
-    const label = defaultCellRender(value, "select", optionLabels, locale);
-    const declaredTone = typeof value === "string" && optionTones && Object.hasOwn(optionTones, value)
-        ? optionTones[value]
-        : undefined;
-    const tone = (declaredTone !== undefined ? statusToneForOptionTone(declaredTone) : undefined) ??
-        (typeof value === "string" ? statusToneForValue(value) : undefined);
-    if (tone !== undefined) {
-        // Same registered primitive as the projectionDetail header, so an app-provided badge applies to list cells too.
-        if (RegisteredStatusBadge !== undefined) {
-            return _jsx(RegisteredStatusBadge, { value: label, tone: tone });
-        }
-        return _jsx(StatusBadge, { tone: tone, children: label });
-    }
-    // dashboard-01 pattern: outline badge + muted instead of a filled secondary.
-    return (_jsx(Badge, { variant: "outline", className: "px-1.5 text-muted-foreground", children: label }));
-}
-// A multi reference may list the same id twice; the occurrence count keeps React keys unique.
-function uniqueLinkItemKeys(items) {
-    const seen = new Map();
-    return items.map((item) => {
-        const occurrence = seen.get(item.id) ?? 0;
-        seen.set(item.id, occurrence + 1);
-        return `${item.id}#${occurrence}`;
-    });
-}
-// A link nested in the clickable first-cell button or card button would be an
-// <a> inside a <button>, so those cells stay plain text.
-function cellLinkProp(col, row, allowed) {
-    if (!allowed)
-        return {};
-    const link = col.linkFor?.(row.values[col.field], row.values);
-    const linkItems = col.linkItemsFor?.(row.values[col.field], row.values);
-    return {
-        ...(link !== undefined && { link }),
-        ...(linkItems !== undefined && { linkItems }),
-    };
-}
-function buildTableItems(rows, grouping, toggledGroups) {
-    if (grouping === undefined)
-        return rows.map((row) => ({ kind: "row", row }));
-    const groups = new Map();
-    for (const row of rows) {
-        const key = grouping.keyOf(row);
-        const members = groups.get(key);
-        if (members === undefined)
-            groups.set(key, [row]);
-        else
-            members.push(row);
-    }
-    return [...groups].flatMap(([key, members]) => {
-        const label = grouping.headerLabel(key, members);
-        if (label === undefined)
-            return members.map((row) => ({ kind: "row", row }));
-        const collapsed = grouping.startsCollapsed(key) !== toggledGroups.has(key);
-        return [
-            { kind: "group", key, label, collapsed },
-            ...(collapsed ? [] : members.map((row) => ({ kind: "row", row }))),
-        ];
-    });
-}
-const ROW_TONE_CLASS = {
-    bad: "bg-status-bad/10 hover:bg-status-bad/15",
-    warn: "bg-status-warn/10 hover:bg-status-warn/15",
-    ok: "bg-status-ok/10 hover:bg-status-ok/15",
-    neutral: "",
-};
-function rowToneClass(tone) {
-    return tone === undefined ? "" : ROW_TONE_CLASS[tone];
-}
-const NUMERIC_COLUMN_TYPES = new Set(["number", "decimal", "bigInt", "money"]);
-// Digits stand in columns here, so they need equal-width figures; the body no longer sets tabular-nums.
-const TABULAR_COLUMN_TYPES = new Set([
-    ...NUMERIC_COLUMN_TYPES,
-    "date",
-    "timestamp",
-    "locatedTimestamp",
-]);
-// A plain <a>, not DefaultLink: the click must not reach the row's own click
-// handler, which opens the same record's row action.
-function CellTextLink({ link, children, }) {
-    return (_jsx("a", { href: isSafeHref(link.href) ? link.href : "#", className: "text-primary underline-offset-4 hover:underline", onClick: (event) => {
-            event.stopPropagation();
-            if (!isPlainPrimaryClick(event))
-                return;
-            event.preventDefault();
-            link.onPress();
-        }, children: children }));
-}
-// Cell-Renderer als Component (statt reiner Funktion) damit der
-// useColumnRenderer-Hook aus dem Provider lesen kann. Die vier Pfade:
-//   1. FormatSpec (`{ format: "timestamp" }` etc.) → applyFormatSpec.
-//   2. RuntimeRenderer (Funktion) → direkter Aufruf. Nur für render-list-
-//      interne Reference-Lookup-Closures — niemals aus dem serialisierten Schema.
-//   3. PlatformComponent (`{ react: { __component: "X" } }`) → schaut
-//      "X" über useColumnRenderer auf und rendert `<X value row column/>`.
-//      Nicht registriert → einmalige Warnung + Default-Fallback.
-//   4. Sonst → defaultCellRender (Type-basierter String-Renderer).
-function DataTableCell({ value, row, field, type, renderer, optionLabels, optionTones, onChange, translate, locale, grouping = true, fileDisplay, compactFile = false, link, linkItems, }) {
-    const componentRef = isComponentRendererRef(renderer);
-    const ResolvedComponent = useColumnRenderer(componentRef?.name);
-    const RegisteredStatusBadge = useOptionalPrimitives()?.StatusBadge;
-    if (isEmptyCellValue(value) && typeof renderer !== "function" && componentRef === undefined) {
-        return (_jsx("span", { "data-empty-cell": "true", className: "text-muted-foreground", children: EMPTY_VALUE_PLACEHOLDER }));
-    }
-    if (value === PII_ERASED_SENTINEL && translate !== undefined) {
-        return translate("kumiko.pii.erased");
-    }
-    if (typeof value === "boolean" &&
-        isBooleanColumn(type, renderer) &&
-        (renderer === undefined || isUnlabeledBooleanFormat(renderer))) {
-        return _jsx(BooleanCell, { value: value, translate: translate });
-    }
-    if (isUnlabeledFalse(type, value, renderer)) {
-        return (_jsx("span", { "data-empty-cell": "true", className: "text-muted-foreground", children: EMPTY_VALUE_PLACEHOLDER }));
-    }
-    if (fileDisplay !== undefined) {
-        return (_jsx(FileDisplayCell, { value: value, display: fileDisplay, compact: compactFile, fallbackLabel: translate?.("kumiko.field.file-upload.attached") ?? "File attached" }));
-    }
-    if (typeof renderer === "object" && renderer !== null && "format" in renderer) {
-        const spec = renderer;
-        return applyFormatSpec({ ...spec, locale: spec.locale ?? locale }, value, translate);
-    }
-    if (typeof renderer === "function") {
-        if (linkItems !== undefined) {
-            const linkItemKeys = uniqueLinkItemKeys(linkItems);
-            return (_jsx(_Fragment, { children: linkItems.map((item, index) => (_jsxs(Fragment, { children: [index > 0 && ", ", item.link === undefined ? (item.label) : (_jsx(CellTextLink, { link: item.link, children: item.label }))] }, linkItemKeys[index]))) }));
-        }
-        const fn = renderer;
-        const text = fn(value, row);
-        return link === undefined ? text : _jsx(CellTextLink, { link: link, children: text });
-    }
-    if (componentRef !== undefined) {
-        if (ResolvedComponent !== undefined) {
-            const node = (_jsx(ResolvedComponent, { value: value, row: row, column: { field }, ...(onChange !== undefined && { onChange }) }));
-            // stopPropagation only on the editable branch — plain cells must still
-            // fire row onClick when onCellChange is set for sibling editable cells.
-            if (onChange !== undefined) {
-                return (_jsx("span", { className: "contents", onClick: (e) => e.stopPropagation(), onKeyDown: (e) => e.stopPropagation(), children: node }));
-            }
-            return node;
-        }
-        // Renderer im Schema referenziert, aber client-side kein Map-Eintrag —
-        // typischer Fall: clientFeatures.columnRenderers vergessen oder
-        // Tippfehler im __component-Key. Warnen statt crashen, damit ein
-        // Schema-Boot trotzdem funktioniert (Default-Type-Renderer übernimmt).
-        // biome-ignore lint/suspicious/noConsole: dev-warning für Schema-Konflikte
-        console.warn(`[kumiko] columnRenderer "${componentRef.name}" not registered`);
-    }
-    // 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
-    // keep the neutral outline pill.
-    if (type === "select" && value !== null && value !== undefined && value !== "") {
-        return selectPill(value, optionLabels, optionTones, locale, RegisteredStatusBadge);
-    }
-    // One pill per picked value; a single pill would hold the whole joined list.
-    if (type === "multiSelect" && Array.isArray(value) && value.length > 0) {
-        return (_jsx("span", { className: "flex flex-wrap gap-1", children: value.map((entry) => (_jsx(Fragment, { children: selectPill(entry, optionLabels, optionTones, locale, RegisteredStatusBadge) }, String(entry)))) }));
-    }
-    return defaultCellRender(value, type, optionLabels, locale, field, grouping);
-}
-// ---- Form + Section + Grid + Text ----
-// Setzt DefaultSection in den Inner-Region-Modus: das ganze Form ist EINE
-// Card, Sections sind divider-getrennte Abschnitte darin (shadcn-Muster wie
-// Shipping/Invoice/Profile). Standalone (außerhalb Form) bleibt Section eine
-// eigene Card.
-const InsideFormContext = createContext(false);
-// Eingebettete Forms (z.B. im AuthCard) tragen ihre Card-Fläche schon vom
-// Container — der self-cardende DefaultForm würde sonst eine Card-in-Card
-// erzeugen. BareFormProvider schaltet DefaultForm auf ein nacktes <form>
-// (gestapelte Felder, kein eigener Rahmen/max-width).
-const BareFormContext = createContext(false);
-// Dashboard panels with an embedded settings form (`DashboardScreenPanel.chromeless`):
-// the form renders in the page grid like a standalone screen form, without the
-// card frame, but keeps its own (non-pinned) save bar.
-const EmbeddedFormContext = createContext(false);
-export function EmbeddedFormProvider({ children }) {
-    return _jsx(EmbeddedFormContext.Provider, { value: true, children: children });
-}
-export function BareFormProvider({ children }) {
-    return _jsx(BareFormContext.Provider, { value: true, children: children });
-}
-// App-wide default for FormScreenShell's width when a screen doesn't set its
-// own `layout.width`. Undefined (no `createKumikoApp({ screenWidth })`) lets each
-// shell keep its own default: "4xl" for FormScreenShell, 640px for the
-// screen-form column.
-const ScreenWidthContext = createContext(undefined);
-export function ScreenWidthProvider({ width, children, }) {
-    return _jsx(ScreenWidthContext.Provider, { value: width, children: children });
-}
-// Extension sections that render their own <form> via BareFormProvider
-// (legacy custom-form pattern, e.g. ChangeEmailSection before fw#2703) 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
-// 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 = [
-    "button[type=submit]:not(:disabled)",
-    "button:not([type]):not(:disabled)",
-    "input[type=submit]:not(:disabled)",
-    "input[type=image]:not(:disabled)",
-].join(", ");
-function FormRoot({ onSubmit, testId, className, children, focusFirstErrorKey, }) {
-    const rootRef = useRef(null);
-    useEffect(() => {
-        if (focusFirstErrorKey === undefined || focusFirstErrorKey === 0)
-            return;
-        const firstInvalid = rootRef.current?.querySelector('[aria-invalid="true"]');
-        if (firstInvalid === null || firstInvalid === undefined)
-            return;
-        firstInvalid.focus();
-        firstInvalid.scrollIntoView({ block: "center" });
-    }, [focusFirstErrorKey]);
-    if (useContext(InsideFormContext)) {
-        return (_jsx("div", { ref: (node) => {
-                rootRef.current = node;
-            }, "data-kumiko-form-root": "", onKeyDownCapture: (e) => {
-                // Implicit submission: the section's inputs belong to the OUTER
-                // <form> in the DOM, so the browser would otherwise route Enter to
-                // that form's default button.
-                if (e.key !== "Enter" || e.nativeEvent.isComposing)
-                    return;
-                const field = e.target;
-                if (!(field instanceof HTMLInputElement))
-                    return;
-                if (field.closest("[data-kumiko-form-root]") !== e.currentTarget)
-                    return;
-                if (["checkbox", "radio", "submit", "button"].includes(field.type))
-                    return;
-                e.preventDefault();
-                onSubmit();
-            }, onClickCapture: (e) => {
-                // @cast-boundary dom-event-target: closest() needs an Element, and
-                // click targets are always one in the browser/happy-dom.
-                const submitButton = e.target.closest(SUBMIT_CONTROL_SELECTOR);
-                if (submitButton === null)
-                    return;
-                // React events bubble through portals and nested degraded roots; a
-                // real <form> only reacts to buttons in its own DOM subtree.
-                if (submitButton.closest("[data-kumiko-form-root]") !== e.currentTarget)
-                    return;
-                e.preventDefault();
-                onSubmit();
-            }, "data-testid": testId, className: className, children: children }));
-    }
-    return (_jsx("form", { ref: (node) => {
-            rootRef.current = node;
-        }, onSubmit: (e) => {
-            e.preventDefault();
-            onSubmit(e);
-        }, "data-testid": testId, className: className, children: children }));
-}
-// stickyActions alone pins the primary action with `position: fixed` on
-// narrow viewports; together with fillHeight the flex chain pins the footer
-// on every viewport instead.
-function isPinnedFooter(stickyActions, fillHeight) {
-    return stickyActions === true && fillHeight === true;
-}
-// Sections wrapper for DefaultForm's card and chromeless layouts alike —
-// only the card-derived padding on non-section children differs between
-// them (see `chromeless` doc on FormProps).
-function FormSections({ children, chromeless, stickyActions, fillHeight, screenForm = false, }) {
-    if (screenForm) {
-        return (_jsx("div", { className: "flex flex-col gap-9", children: _jsx(InsideFormContext.Provider, { value: true, children: _jsx(ScreenFormContext.Provider, { value: true, children: children }) }) }));
-    }
-    return (_jsx("div", { className: cn("flex flex-col", 
-        // Section-Children (Auto-UI-Edit) trennt eine Linie ZWISCHEN
-        // ihnen — sie padden sich selbst. Flache Felder (Custom-Screens)
-        // kriegen Padding + Rhythmus, keine Linie zwischen jedem Feld.
-        "[&>section:not(:first-child)]:border-t", 
-        // 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 —
-        // 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, 
-        // Same "no flex-1" reasoning as the card above: this is the
-        // one section allowed to shrink (min-h-0) inside the card, not
-        // one forced to grow past its content.
-        // Chromeless has no card above to hold a floor, so the sections do.
-        fillHeight === true && (chromeless ? "min-h-64" : "min-h-0"), 
-        // The flex chain pins the footer, so the sections are the scroll surface.
-        isPinnedFooter(stickyActions, fillHeight) && "flex-1 overflow-y-auto"), children: _jsx(InsideFormContext.Provider, { value: true, children: children }) }));
-}
-// Title/subtitle block shared by DefaultForm's card and chromeless layouts —
-// RenderEdit already withholds screen.description from `subtitle` in tabs
-// mode (chromeless), so whatever arrives here still renders, just without card chrome.
-function FormTitleBlock({ title, subtitle, titleAction, testId, bordered, fillHeight, }) {
-    if (title === undefined && subtitle === undefined && titleAction === undefined)
-        return null;
-    return (_jsxs("div", { className: cn("flex items-start justify-between gap-4", bordered ? cn(cardHeaderBorder, "px-6 pb-4 pt-5") : "pb-4", fillHeight === true && "shrink-0"), children: [_jsxs("div", { className: "min-w-0", children: [title !== undefined && (_jsx("h2", { "data-testid": testId !== undefined ? `${testId}-title` : undefined, className: "text-lg font-semibold tracking-tight", children: title })), subtitle !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: "mt-1 text-sm text-muted-foreground", children: subtitle }))] }), titleAction !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-title-action` : undefined, className: "flex shrink-0 flex-wrap items-center justify-end gap-2", children: titleAction }))] }));
-}
-// `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
-// 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
-// opts in via `STICKY_PRIMARY_ACTION_PROP` instead (`ScreenSlots.footerPrimary`).
-function isPrimaryStickyAction(node) {
-    if (!isValidElement(node))
-        return false;
-    const props = node.props;
-    return props.type === "submit" || props[STICKY_PRIMARY_ACTION_PROP] === true;
-}
-// `actions` from render-edit.tsx arrives as a single `<>…</>` Fragment
-// element (not spread children) — Children.toArray only flattens fragments
-// nested inside an already-flattened children list, not a Fragment passed
-// as the whole value, so the Fragment's own children are unwrapped first.
-function flattenActionNodes(node) {
-    if (isValidElement(node) && node.type === Fragment) {
-        return Children.toArray(node.props.children);
-    }
-    return Children.toArray(node);
-}
-function unsavedStatusText(t, unsavedCount) {
-    if (unsavedCount === 0)
-        return t("kumiko.form.noUnsavedChanges");
-    if (unsavedCount === 1)
-        return t("kumiko.form.unsaved.one");
-    return t("kumiko.form.unsaved.other", { count: unsavedCount });
-}
-// Footer wrapper for DefaultForm's card and chromeless layouts alike — only
-// the card-derived horizontal padding/border differs between them.
-function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActions, fillHeight, unsavedCount, railed = false, }) {
-    const t = useTranslation();
-    const isBelowSm = useIsBelowSmViewport();
-    const keyboardInset = useKeyboardInset();
-    if (actions === undefined && secondaryActions === undefined)
-        return null;
-    // Only split when sticky: the non-sticky (regular, non-wizard) footer must
-    // reproduce the previous DOM exactly (form-action-bar.test.tsx pins
-    // `-actions`/`-actions-secondary` content 1:1 to the `actions`/
-    // `secondaryActions` props).
-    const actionNodes = stickyActions === true ? flattenActionNodes(actions) : undefined;
-    const primaryActionNodes = actionNodes?.filter(isPrimaryStickyAction);
-    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
-    // behaviour where sticky footers always kept `actions` fixed.
-    const nonPrimaryActionNodes = hasPrimaryAction
-        ? actionNodes?.filter((node) => !isPrimaryStickyAction(node))
-        : undefined;
-    const renderedActions = stickyActions === true ? (hasPrimaryAction ? primaryActionNodes : actions) : actions;
-    const hasNonPrimaryOverflow = nonPrimaryActionNodes !== undefined && nonPrimaryActionNodes.length > 0;
-    const renderedSecondary = stickyActions === true && hasPrimaryAction ? (_jsxs(_Fragment, { children: [secondaryActions, nonPrimaryActionNodes] })) : (secondaryActions);
-    const pinned = isPinnedFooter(stickyActions, fillHeight);
-    const fixedFooterStyle = stickyActions === true && !pinned && isBelowSm && keyboardInset > 0
-        ? { bottom: keyboardInset }
-        : undefined;
-    // Below sm the pinned footer swaps to NarrowPinnedFooter; the subtree remounts, so a
-    // confirm dialog owned by an action button closes on a breakpoint change (rotate, resize).
-    if (pinned && isBelowSm) {
-        return (_jsx(NarrowPinnedFooter, { nodes: [...flattenActionNodes(secondaryActions), ...flattenActionNodes(actions)], overflowLabel: unsavedCount !== undefined && unsavedCount > 0
-                ? `${t("kumiko.list.row-actions.more")}, ${unsavedStatusText(t, unsavedCount)}`
-                : t("kumiko.list.row-actions.more"), unsavedCount: unsavedCount, unsavedStatus: unsavedCount !== undefined && unsavedCount > 0
-                ? unsavedStatusText(t, unsavedCount)
-                : undefined, testId: testId, keyboardInset: keyboardInset }));
-    }
-    return (_jsxs("div", { className: cn(pinned
-            ? cn("flex h-14 shrink-0 items-center justify-end gap-2 border-t border-border bg-card px-6", !railed && "md:pl-10")
-            : "flex flex-col-reverse gap-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:py-4", !pinned && !chromeless && "px-[var(--card-padding)]", !pinned && !chromeless && cardFooterBorder, !pinned && fillHeight === true && "shrink-0"), children: [unsavedCount !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-unsaved` : undefined, className: cn("mr-auto flex min-w-0 items-center gap-2 text-[13px]", 
-                // Only the stacked (flex-col-reverse) footer moves the status above the
-                // actions; the pinned single-row footer keeps it on the left.
-                !pinned && "max-sm:order-last", unsavedCount > 0 ? "text-foreground-secondary" : "text-muted-foreground"), children: [unsavedCount > 0 && (_jsx("span", { className: "size-1.5 shrink-0 rounded-full bg-status-active", "aria-hidden": "true" })), _jsx("span", { className: "truncate", children: unsavedStatusText(t, unsavedCount) })] })), (secondaryActions !== undefined || hasNonPrimaryOverflow) && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions-secondary` : undefined, className: cn(
-                // min-h-11: link-variant buttons (Copy link) are h-auto and would fall
-                // below the 24px touch-target minimum on narrow viewports.
-                "flex flex-wrap items-center gap-2 max-sm:[&_button]:min-h-11 max-sm:[&_button]:px-2 max-sm:[&_button]:text-xs", pinned && hasNonPrimaryOverflow && "mr-auto"), children: renderedSecondary })), renderedActions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, style: fixedFooterStyle, className: cn("flex items-center gap-2", pinned
-                    ? "shrink-0 max-md:[&>button]:min-h-11"
-                    : "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`
-                // escapes the card's `overflow-hidden` (only transform/filter/
-                // contain ancestors trap it, confirmed against
-                // AppLayout/SidebarInset — neither sets those).
-                stickyActions === true &&
-                    !pinned &&
-                    cn("max-sm:fixed max-sm:inset-x-0 max-sm:bottom-0 max-sm:z-20 max-sm:bg-background max-sm:p-4 max-sm:shadow-[0_-4px_12px_-4px_rgb(0_0_0_/_0.15)]", STICKY_FOOTER_SAFE_AREA_CLASS)), children: renderedActions }))] }));
-}
-const SECTION_NAV_MIN_ITEMS = 3;
-// "On this page" navigation next to a screen form. The active entry follows
-// the section nearest the top of the scroll surface; without IntersectionObserver
-// (happy-dom, old engines) the first entry stays active until one is clicked.
-function FormSectionNav({ items }) {
-    const t = useTranslation();
-    const [activeId, setActiveId] = useState(items[0]?.id);
-    useEffect(() => {
-        if (typeof IntersectionObserver === "undefined")
-            return;
-        const visibleIds = new Set();
-        const observer = new IntersectionObserver((entries) => {
-            for (const entry of entries) {
-                if (entry.isIntersecting)
-                    visibleIds.add(entry.target.id);
-                else
-                    visibleIds.delete(entry.target.id);
-            }
-            const firstVisible = items.find((item) => visibleIds.has(item.id));
-            if (firstVisible !== undefined)
-                setActiveId(firstVisible.id);
-        }, { rootMargin: "0px 0px -60% 0px" });
-        for (const item of items) {
-            const target = document.getElementById(item.id);
-            if (target !== null)
-                observer.observe(target);
-        }
-        return () => observer.disconnect();
-    }, [items]);
-    return (_jsxs("nav", { "aria-label": t("kumiko.form.on-this-page"), "data-testid": "form-section-nav", className: "sticky top-0 hidden w-[200px] shrink-0 flex-col gap-0.5 self-start xl:flex", children: [_jsx("span", { className: "pb-1.5 pl-3 text-xs text-muted-foreground", children: t("kumiko.form.on-this-page") }), items.map((item) => {
-                const active = item.id === activeId;
-                return (_jsx("button", { type: "button", "data-testid": `form-section-nav-${item.id}`, ...(active && { "aria-current": "true" }), onClick: () => {
-                        setActiveId(item.id);
-                        document
-                            .getElementById(item.id)
-                            ?.scrollIntoView?.({ behavior: "smooth", block: "start" });
-                    }, className: cn("border-l-2 px-3 py-[5px] text-left text-sm", active
-                        ? "border-primary font-semibold text-primary"
-                        : "border-border text-foreground-secondary hover:text-foreground"), children: item.title }, item.id));
-            })] }));
-}
-// Form inside the Drawer primitive: the drawer header carries the title, so
-// only the description (as help text), the scrolling sections and a pinned
-// footer remain. The scroll area is a sibling of the footer, never its parent.
-function DrawerFormLayout({ onSubmit, focusFirstErrorKey, subtitle, actions, secondaryActions, summary, testId, children, }) {
-    return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 py-5", children: [summary !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-summary` : undefined, className: "flex flex-col gap-0.5 rounded-lg bg-muted px-3.5 py-3", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: summary.title }), summary.subtitle !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: summary.subtitle }))] })), subtitle !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: "text-[13px] text-foreground-secondary", children: subtitle })), _jsx(InsideFormContext.Provider, { value: true, children: _jsx(ScreenFormContext.Provider, { value: true, children: _jsx(InsideDrawerProvider, { value: false, children: _jsx(DrawerBodyContext.Provider, { value: true, children: _jsx("div", { className: "flex flex-col gap-5", children: children }) }) }) }) })] }), (actions !== undefined || secondaryActions !== undefined) && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-footer` : undefined, className: "flex h-16 shrink-0 items-center justify-end gap-2 border-t border-border px-6", children: [secondaryActions, actions] }))] }));
-}
-function DefaultForm({ onSubmit, focusFirstErrorKey, children, title, subtitle, actions, secondaryActions, testId, width, stickyActions, headerRegion, titleAction, fillHeight, chromeless, screenForm, unsavedCount, sectionNav, sideRail, summary, }) {
-    const insideDrawer = useInsideDrawer();
-    const isEmbeddedForm = useContext(EmbeddedFormContext);
-    const contextWidth = useContext(ScreenWidthContext);
-    // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
-    // der Container trägt Card/Titel selbst, sonst Card-in-Card.
-    if (useContext(BareFormContext)) {
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col gap-4", 
-            // Bare forms stack sections without a card; without a divider a
-            // section boundary reads as a layout gap, not structure.
-            "[&>section:not(:first-child)]:border-t"), children: [headerRegion, _jsx(InsideFormContext.Provider, { value: true, children: children }), (secondaryActions !== undefined || actions !== undefined) && (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [secondaryActions, actions] }))] }));
-    }
-    if (insideDrawer) {
-        return (_jsx(DrawerFormLayout, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, subtitle: subtitle, actions: actions, secondaryActions: secondaryActions, summary: summary, testId: testId, children: children }));
-    }
-    if (isEmbeddedForm) {
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex w-full flex-col gap-6", children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), _jsx(FormSections, { chromeless: true, stickyActions: undefined, fillHeight: false, screenForm: true, children: children }), (actions !== undefined || secondaryActions !== undefined) && (_jsx("div", { className: "max-w-4xl border-t border-border", children: _jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: true, stickyActions: undefined, fillHeight: false, ...(unsavedCount !== undefined && { unsavedCount }) }) }))] }));
-    }
-    const isScreenForm = screenForm === true && fillHeight === true && chromeless !== true;
-    const screenFormWidth = width ?? contextWidth;
-    const sections = (_jsx(FormSections, { chromeless: chromeless === true, stickyActions: stickyActions, fillHeight: fillHeight, screenForm: isScreenForm, children: children }));
-    const footer = (_jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: chromeless === true, stickyActions: stickyActions, fillHeight: fillHeight, ...(unsavedCount !== undefined && { unsavedCount }), railed: sideRail !== undefined }));
-    // Screen form: no card. A padded scroll surface holds the form column and,
-    // from xl, the section navigation; the footer stays pinned below it.
-    if (isScreenForm) {
-        const showsSectionNav = sectionNav !== undefined && sectionNav.length >= SECTION_NAV_MIN_ITEMS;
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [sideRail, _jsx("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: cn("min-h-0 flex-1 overflow-y-auto", screenPaddingClassName), children: _jsxs("div", { className: "flex gap-18", children: [_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-9", screenFormWidth !== undefined
-                                            ? screenFormColumnWidthClassName[screenFormWidth]
-                                            : "max-w-[640px]"), children: [_jsx(InsideScreenFormColumnContext.Provider, { value: true, children: headerRegion }), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), sections] }), showsSectionNav && _jsx(FormSectionNav, { items: sectionNav })] }) })] }), footer] }));
-    }
-    // Pinned footer (fillHeight + stickyActions): the footer is a full-bleed
-    // sibling BELOW the padded shell, so the shell's bottom inset does not float
-    // 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
-    // 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
-    // sit directly on the page background, same edge as a standalone list
-    // screen. Title/subtitle still render unbordered: RenderEdit's tabs
-    // caller already blanks the per-section title via hideSectionTitles, but
-    // the screen-level subtitle (screen.description) is independent of that
-    // and must survive tabs mode.
-    if (chromeless === true) {
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { maxWidth: "full", ...(fillHeight === true && { fillHeight: true }), className: cn("!p-0", pinnedShellClassName), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col", fillHeight === true && "shrink-0"), children: headerRegion })), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: fillHeight }), sections, !pinnedFooter && footer] }), pinnedFooter && footer] }));
-    }
-    // One card form: title as header (no divider under it), sections divided
-    // between each other, muted action footer. Shell width comes from
-    // FormScreenShell (layout.width, else the app-wide screenWidth default, else
-    // 4xl).
-    return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { ...(width !== undefined && { maxWidth: width }), ...(fillHeight === true && { fillHeight: true }), ...(pinnedShellClassName !== undefined && { className: pinnedShellClassName }), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col gap-6 mb-8", fillHeight === true && "shrink-0"), children: headerRegion })), _jsxs("div", { "data-slot": "card", className: cn(cardSurface(), "overflow-hidden", 
-                        // No flex-1: a fillHeight card sizes to its content (flex's
-                        // initial 0 1 auto) and only claims more than that once its
-                        // 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).
-                        // 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.
-                        fillHeight === true && "min-h-64 flex flex-col", pinnedFooter && "flex-1"), children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: true, fillHeight: fillHeight }), sections, !pinnedFooter && footer] })] }), pinnedFooter && footer] }));
-}
-export function FormScreenShell({ children, className, testId, maxWidth, fillHeight, }) {
-    const contextWidth = useContext(ScreenWidthContext);
-    const width = maxWidth ?? contextWidth ?? "4xl";
-    return (_jsx("div", { "data-testid": testId, className: cn(screenPaddingClassName, "w-full", screenWidthClassName[width], fillHeight === true && "h-full flex flex-col min-h-0", className), children: children }));
-}
-function DefaultSection({ id, title, subtitle, children, actions, variant = "default", layout = "stacked", testId, icon, }) {
-    const insideForm = useContext(InsideFormContext);
-    const insideScreenForm = useContext(ScreenFormContext);
-    // h3 statt CardTitle (= div): erhält die Heading-Semantik für
-    // Screenreader-Navigation. Subtitle fließt darunter (kein Divider —
-    // shadcn CardTitle+CardDescription-Muster).
-    // icon only renders alongside a title — a title-less section has nothing
-    // for a lone icon to sit next to, so it stays as-is (no heading grows).
-    // actions render top-right in this same title row, never a
-    // footer — a title-less section still draws the row when actions are
-    // present, so a hideTitle tabs-Section with `actions` isn't stranded.
-    const TitleTag = insideScreenForm ? "h2" : "h3";
-    const titleBlock = title !== undefined || subtitle !== undefined ? (_jsxs("div", { className: "flex flex-col gap-1", children: [title !== undefined && (_jsxs(TitleTag, { "data-testid": testId !== undefined ? `${testId}-title` : undefined, className: "flex items-center gap-2 text-base font-semibold leading-none tracking-tight", children: [icon !== undefined && _jsx(Icon, { name: icon, className: "size-4 text-muted-foreground" }), title] })), subtitle !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: cn("text-sm text-muted-foreground", insideScreenForm && "text-[13px] text-foreground-secondary"), children: subtitle }))] })) : null;
-    const header = titleBlock !== null || actions !== undefined ? (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [titleBlock, actions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "ml-auto flex shrink-0 items-center gap-2", children: actions }))] })) : null;
-    // Innerhalb eines Forms: divider-loser Abschnitt OHNE eigene Card-Fläche.
-    // Die Trennlinien ZWISCHEN Sections macht der divide-y-Wrapper im Form.
-    if (insideForm) {
-        return (_jsxs("section", { id: id, "data-testid": testId, className: cn(
-            // py-4 (not the standalone card's py-6): the border-t between
-            // sections already carries the section break, so the vertical
-            // gap only needs to read as roughly double the gap-4 field row
-            // spacing, not triple it.
-            insideScreenForm
-                ? "flex scroll-mt-4 flex-col gap-4 [&:not(:first-of-type)]:border-t [&:not(:first-of-type)]:border-border [&:not(:first-of-type)]:pt-7"
-                : "flex flex-col gap-4 px-6 py-4", variant === "destructive" && "border-l-2 border-destructive/40", layout === "settings-list" && "@container max-w-4xl"), children: [header, children] }));
-    }
-    // Standalone: own card, header flows into the body (no divider).
-    // overflow-hidden clips the card's own corner radius correctly for
-    // portaled overlays (Combobox/Select/Tooltip escape to document.body,
-    // unaffected). A non-portaled overlay (e.g. a custom dropdown built
-    // directly into `children`) WOULD get silently clipped — verify this
-    // against any new standalone-section content that renders its own
-    // non-portaled overlay.
-    return (_jsx("div", { "data-slot": "card", "data-testid": testId, className: cn(cardSurface(), "overflow-hidden", variant === "destructive" && "border-destructive/40"), children: _jsxs("div", { className: "flex flex-col gap-4 px-6 py-6", children: [header, children] }) }));
-}
-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).
-    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 = {
-    money: "w-full sm:w-[200px] [&_label]:whitespace-nowrap",
-    select: "w-full",
-};
-const FIELD_CELL_WIDTH_CLASS = {
-    text: "w-full sm:w-60",
-    number: "w-fit min-w-24 shrink-0 [&_label]:whitespace-nowrap [&_[data-slot=number-field]]:w-32",
-    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",
-    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.
-    toggle: "w-auto min-w-40 shrink-0 self-start [&_[data-slot=switch]]:my-[0.55rem]",
-};
-function DefaultGrid({ columns, children, testId, maxRows, flow, list, ariaLabelledBy, }) {
-    const insideDrawerBody = useContext(DrawerBodyContext);
-    const groupProps = ariaLabelledBy !== undefined
-        ? { role: "group", "aria-labelledby": ariaLabelledBy }
-        : {};
-    if (list === true) {
-        return (_jsx("div", { ...groupProps, "data-testid": testId, className: "flex flex-col divide-y divide-border", children: children }));
-    }
-    if (flow === true) {
-        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
-                    // below-control appendix grows only the one cell and would push its
-                    // neighbours down, so such rows align to the top instead. An error
-                    // line does the same: bottom-aligned, it would lift that field's
-                    // label above its neighbours'.
-                    "flex-wrap items-end has-[[data-appendix-below]]:items-start has-[[role=alert]]:items-start"), children: children }));
-    }
-    // "auto": content-sized items in a wrapping row (e.g. a metrics band of
-    // self-sized tiles) instead of N equal-width, container-stretched tracks.
-    // maxRows/scrolling don't apply — the row just wraps.
-    if (columns === "auto") {
-        return (_jsx("div", { ...groupProps, "data-testid": testId, className: "flex flex-wrap items-center gap-4", children: children }));
-    }
-    // Responsive: Mobile (< sm = 640px) bleibt 1-spaltig, ab sm: greift
-    // die Author-deklarierte Spaltenzahl. Inline-style schreibt
-    // CSS-Variable; Tailwind-Klasse liest die Variable mit
-    // `grid-template-columns: var(--grid-cols)`. Saubere Lösung weil
-    // Tailwind JIT keinen dynamischen `grid-cols-${N}` auflösen kann.
-    const rowCount = Math.ceil(Children.toArray(children).length / columns);
-    const clipped = maxRows !== undefined && rowCount > maxRows;
-    // gridAutoRows is a minmax MIN, not a fixed height, so wrapped labels grow
-    // their row instead of being clipped mid-row. maxHeight is therefore only
-    // an approximation of "maxRows rows tall" — a row taller than the minimum
-    // means fewer than maxRows rows end up visible before scrolling kicks in.
-    // Themes may override --kumiko-grid-row-h (default 2.5rem, set in
-    // styles.css) to change that minimum.
-    // Mobile note: the grid collapses to 1 column below `sm` (see className),
-    // but rowCount above is always computed against the desktop `columns` —
-    // inline styles can't express a media query, so the mobile row count is
-    // an under-count. Known, accepted.
-    const style = {
-        "--grid-cols": `repeat(${columns}, minmax(0, 1fr))`,
-        ...(clipped && {
-            gridAutoRows: "minmax(var(--kumiko-grid-row-h, 2.5rem), auto)",
-            maxHeight: `calc(${maxRows} * var(--kumiko-grid-row-h, 2.5rem) + ${maxRows - 1} * var(--kumiko-grid-gap, 1rem))`,
-            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 }));
-}
-function DefaultGridCell({ span, width, children }) {
-    const insideDrawerBody = useContext(DrawerBodyContext);
-    if (width !== undefined) {
-        return (_jsx("div", { className: cn("min-w-0 max-w-full", insideDrawerBody
-                ? (DRAWER_FIELD_CELL_WIDTH_CLASS[width] ?? FIELD_CELL_WIDTH_CLASS[width])
-                : FIELD_CELL_WIDTH_CLASS[width]), children: children }));
-    }
-    const s = span !== undefined ? Math.min(span, 12) : 1;
-    // Below `sm` the grid has one explicit column (see DefaultGrid); an unconditional
-    // `span N` there would add implicit auto columns that squeeze the fr column.
-    const style = { "--grid-span": s };
-    return (_jsx("div", { className: "min-w-0 sm:[grid-column:span_var(--grid-span)]", style: style, children: children }));
-}
-function DefaultText({ variant = "body", decorative, children, testId }) {
-    switch (variant) {
-        case "code":
-            return (_jsx("code", { "data-testid": testId, className: "relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm", children: children }));
-        case "small":
-            return (_jsx("small", { "data-testid": testId, className: "text-xs text-muted-foreground", children: children }));
-        case "required-mark":
-            return (_jsx("span", { "data-testid": testId, "data-required": true, className: "text-destructive", children: children }));
-        case "muted":
-            return (_jsx("span", { "data-testid": testId, ...(decorative === true && { "aria-hidden": true }), className: "text-sm text-muted-foreground", children: children }));
-        default:
-            return _jsx("span", { "data-testid": testId, children: children });
-    }
-}
-// ---- Link (anchor mit Button-/Muted-Optik) ----
-// isSafeHref lives in @cosmicdrift/kumiko-renderer/headless — shared with
-// page-render's server-side markdown renderer, both take untrusted
-// tenant-authored hrefs.
-// `button` nutzt die Primary-Buttonfläche auf einem semantischen <a> —
-// der Standard für „weiter zu"-Navigationen nach Success-States (ehem.
-// authButtonClass), `muted` der dezente Sekundär-Link (ehem.
-// authMutedLinkClass).
-// Modified and middle clicks keep the browser default (new tab/window).
-function isPlainPrimaryClick(event) {
-    return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
-}
-function DefaultLink({ href, variant = "default", target, rel, onPress, className, children, testId, dataAttributes, }) {
-    const variantClass = variant === "button"
-        ? buttonVariants({ variant: "default" })
-        : variant === "muted"
-            ? "text-sm text-muted-foreground underline-offset-4 hover:text-foreground hover:underline"
-            : "text-primary underline-offset-4 hover:underline";
-    return (_jsx("a", { href: isSafeHref(href) ? href : "#", target: target, rel: rel ?? (target === "_blank" ? "noopener noreferrer" : undefined), ...dataAttributes, "data-testid": testId, className: cn(variantClass, className), onClick: onPress === undefined
-            ? undefined
-            : (event) => {
-                if (!isPlainPrimaryClick(event))
-                    return;
-                event.preventDefault();
-                onPress();
-            }, children: children }));
-}
-function DefaultProgress({ value, tone, ariaLabel, testId }) {
-    return _jsx(ProgressBar, { value: value, tone: tone, ariaLabel: ariaLabel, testId: testId });
-}
-function DefaultStepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }) {
-    return (_jsx(StepBar, { steps: steps, currentIndex: currentIndex, compactLabel: compactLabel, onStepSelect: onStepSelect, doneSteps: doneSteps, selectableSteps: selectableSteps, narrowLayout: narrowLayout, orientation: orientation, heading: heading, description: description, subtitles: subtitles, upNext: upNext, testId: testId, compactTestId: compactTestId }));
-}
-function DefaultWizardStepGroup({ hidden, inset, children }) {
-    const visibleClass = inset === true ? "flex min-w-0 flex-col gap-4 p-6" : "contents";
-    return (_jsx("fieldset", { disabled: hidden, hidden: hidden, className: hidden ? undefined : visibleClass, children: children }));
-}
-function DefaultHeading({ variant = "page", children, testId }) {
-    // Page-Heading = h1, sehr selten in einer App (max 1 pro Screen).
-    // Section-Heading = h2 mit uppercase + muted-foreground — derselbe
-    // Look wie der Section-Header in Forms, aber als Standalone-Component
-    // für Demo-Pages und Custom-Screens nutzbar.
-    if (variant === "section") {
-        return (_jsx("h2", { "data-testid": testId, className: "text-xs font-semibold uppercase tracking-wider text-muted-foreground", children: children }));
-    }
-    return (_jsx("h1", { "data-testid": testId, className: "text-2xl font-semibold tracking-tight", children: children }));
-}
 import { ConfigCascadeView as DefaultConfigCascadeView } from "../components/config-cascade.js";
 import { ConfigSourceBadge as DefaultConfigSourceBadge } from "../components/config-source-badge.js";
-// Generische Card-Chrome (rounded-xl wie die Entity-Card) — slot- + options-
-// basiert, damit der Contract additiv wächst und Consumer nie migriert werden.
-export function DefaultCard({ slots, options, className, testId, dataAttributes, children, }) {
-    const screenBody = options?.screenBody ?? false;
-    const padded = screenBody ? false : (options?.padded ?? true);
-    const radius = options?.radius ?? "xl";
-    const footerBordered = options?.footerBordered ?? true;
-    const footerInset = options?.footerInset ?? true;
-    const fillHeight = options?.fillHeight ?? false;
-    const framed = screenBody ? false : (options?.framed ?? true);
-    const s = slots ?? {};
-    const defaultHeader = s.title !== undefined ||
-        s.subtitle !== undefined ||
-        s.headerContent !== undefined ||
-        s.headerActions !== undefined ? (_jsxs("div", { className: cn("flex flex-col gap-3 px-[var(--card-padding)] pt-6 pb-4", fillHeight && "shrink-0"), children: [(s.title !== undefined || s.subtitle !== undefined || s.headerActions !== undefined) && (_jsxs("div", { className: "flex flex-wrap items-start justify-between gap-3", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [s.title !== undefined && (_jsx("h3", { className: "text-base font-semibold leading-none tracking-tight", children: s.title })), s.subtitle !== undefined && (_jsx("p", { className: "text-sm text-muted-foreground", children: s.subtitle }))] }), s.headerActions] })), s.headerContent] })) : null;
-    const header = s.header ?? defaultHeader;
-    const hasHeader = header !== null && header !== undefined;
-    const card = (_jsxs("div", { ...dataAttributes, "data-slot": "card", "data-testid": testId, className: cn(framed ? cardSurface({ radius }) : "flex flex-col", 
-        // An unframed card has no radius to clip; overflow-hidden would also
-        // zero its flex-item min-height and cut off content inside a scroller.
-        (framed || fillHeight) && "overflow-hidden", 
-        // Same "no flex-1" reasoning as DefaultForm's own fillHeight card
-        // (fw#2722/#2778): sizes to content and only shrinks (min-h-0) once
-        // an ancestor is itself height-constrained.
-        fillHeight && "min-h-0 flex flex-col", className), children: [header, children != null && (_jsx("div", { className: cn("grow", screenBody && "flex flex-col gap-6", padded &&
-                    (hasHeader
-                        ? "px-[var(--card-padding)] pb-[var(--card-padding)]"
-                        : "p-[var(--card-padding)]"), 
-                // The one region allowed to shrink and scroll internally — mirrors
-                // FormSections' fillHeight === true && "min-h-0" treatment of the
-                // section it wraps.
-                fillHeight && "min-h-0 flex flex-col"), children: children })), s.footer !== undefined && s.footer !== null && s.footer !== false && (_jsx("div", { className: cn(cardFooter, footerInset && cardFooterInset, footerBordered && cardFooterBorder, fillHeight && "shrink-0"), children: s.footer }))] }));
-    return (_jsx(InsideScreenFormColumnContext.Provider, { value: false, children: screenBody ? _jsx(FormScreenShell, { children: card }) : card }));
-}
-// otpauth:// enrollment URI → scannable QR (errorCorrectionLevel "H", ~30%
-// redundancy — more resilient to camera/lighting issues than the default, no
-// downside for a code this short-lived). Own component (not inline in
-// values.map) because QRCode.toString is async — a hook inside .map would
-// violate the rules of hooks.
-function QrSecretValue({ value }) {
-    const [svg, setSvg] = useState(null);
-    const [failed, setFailed] = useState(false);
-    useEffect(() => {
-        let cancelled = false;
-        setFailed(false);
-        // Loaded on first QR render, not with the primitives. The main entry pulls
-        // Node-only deps (yargs/pngjs) under bundlers that ignore package.json#browser
-        // (Metro), hence the explicit browser subpath.
-        import("qrcode/lib/browser.js")
-            .then(({ default: QRCode }) => QRCode.toString(value, { type: "svg", errorCorrectionLevel: "H" }))
-            .then((result) => {
-            if (!cancelled)
-                setSvg(result);
-        })
-            .catch(() => {
-            // A generic `qr` field may have no separate text display, so fall back to the plain value.
-            if (!cancelled)
-                setFailed(true);
-        });
-        return () => {
-            cancelled = true;
-        };
-    }, [value]);
-    if (failed) {
-        return (_jsx("code", { className: "flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm", children: value }));
-    }
-    if (svg === null)
-        return null;
-    return (_jsx("div", { className: "h-40 w-40", 
-        // qrcode's own SVG string output, not user input — safe to inline
-        // biome-ignore lint/security/noDangerouslySetInnerHtml: qrcode-generated SVG, no user input
-        dangerouslySetInnerHTML: { __html: svg } }));
-}
-// One-time secret reveal (fw#2548, secretMint confirm phase) — monospaced
-// per-value display with a copy button that flips to `copiedLabel` on
-// success. Silent-catch on clipboard error mirrors the copy-link pattern in
-// create-app.tsx.
-function DefaultSecretReveal({ values, copyLabel, copiedLabel, testId, }) {
-    const [copiedIndex, setCopiedIndex] = useState(null);
-    // Labels are not unique per reveal; suffix repeats so React keys stay distinct.
-    const seenLabels = new Map();
-    const rowKeys = values.map((v) => {
-        const occurrence = seenLabels.get(v.label) ?? 0;
-        seenLabels.set(v.label, occurrence + 1);
-        return `${v.label}#${occurrence}`;
-    });
-    return (_jsx("div", { "data-testid": testId, className: "flex flex-col gap-3", children: values.map((v, i) => (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-sm font-medium text-muted-foreground", children: v.label }), _jsxs("div", { className: "flex items-start gap-2", children: [v.qr === true ? (_jsx(QrSecretValue, { value: v.value })) : v.multiline ? (_jsx("pre", { className: "flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm", children: v.value })) : (_jsx("code", { className: "flex-1 overflow-x-auto whitespace-pre-wrap break-all rounded bg-muted px-3 py-2 font-mono text-sm", children: v.value })), v.copyable && (_jsx(UiButton, { type: "button", variant: "outline", size: "sm", onClick: async () => {
-                                try {
-                                    await navigator.clipboard.writeText(v.value);
-                                    setCopiedIndex(i);
-                                }
-                                catch {
-                                    // clipboard blocked (non-secure context) — no fallback UI needed here
-                                }
-                            }, children: copiedIndex === i ? copiedLabel : copyLabel }))] })] }, rowKeys[i]))) }));
-}
+import { DefaultBanner } from "./banner.js";
+import { DefaultButton } from "./button.js";
+import { DefaultCard } from "./card.js";
+import { DefaultDataTable } from "./data-table.js";
+import { DefaultForm } from "./default-form.js";
+import { DefaultField } from "./field.js";
+import { DefaultInput } from "./input.js";
+import { DefaultFillContainer, DefaultGrid, DefaultGridCell, DefaultHeading, DefaultLink, DefaultProgress, DefaultSection, DefaultStepBar, DefaultText, DefaultWizardStepGroup, } from "./layout-elements.js";
+import { ActionOverflowMenu } from "./row-actions.js";
+import { DefaultSecretReveal } from "./secret-reveal.js";
+export { DefaultCard } from "./card.js";
+export { BareFormProvider, EmbeddedFormProvider, ScreenWidthProvider } from "./contexts.js";
+export { defaultCellRender, isComponentRendererRef } from "./data-table-cell.js";
+export { FormScreenShell } from "./form.js";
+export { END_LABEL_MIN_ROWS } from "./pager.js";
+// applyFormatSpec re-exported from headless (platform-agnostic).
+export { applyFormatSpec };
 export const defaultPrimitives = {
     Button: DefaultButton,
     Banner: DefaultBanner,