@cosmicdrift/kumiko-renderer 0.384.0 → 0.385.0

package/dist/web/primitives/field.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Building, CalendarDays, Globe, Hash, KeyRound, Link, Lock, Mail, MapPin, Phone, Search, Tag, Undo2, User, X, } from "lucide-react";
+import { Fragment, useContext, } from "react";
+import { fieldIssueText } from "../../field-issue-text.js";
+import { useTranslation, } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { Label as UiLabel } from "../ui/label.js";
+import { StatusBadge } from "../widgets/status-badge.js";
+import { inFieldIconButtonClass } from "./calendar-popover.js";
+import { groupOptions } from "./option-groups.js";
+import { SegmentedControl } from "./segmented-select.js";
+import "../react-css-custom-properties.js";
+import { DefaultButton } from "./button.js";
+import { FieldDescriptionContext, FieldLabelledContext, FieldLayoutContext } from "./contexts.js";
+// ---- 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.
+export function fieldLabelId(id) {
+    return `${id}-label`;
+}
+function useFieldLabelProps(id, name) {
+    const insideLabelledField = useContext(FieldLabelledContext);
+    return insideLabelledField ? { "aria-labelledby": fieldLabelId(id) } : { "aria-label": name };
+}
+function fieldDescriptionId(id) {
+    return `${id}-description`;
+}
+function fieldErrorId(id) {
+    return `${id}-error`;
+}
+export 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,
+};
+export 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.
+export const FIELD_ICON_CLASS = "pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground";
+export 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.
+export 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.
+export 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.
+export 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;
+export 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.
+export function withoutSegmentedSelectPlaceholder(options) {
+    return options.filter((option) => option.value !== "");
+}
+export 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";
+export 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.
+export function textareaMinHeight(rows) {
+    return { minHeight: `calc(${rows} * 1lh + 1rem + 2px)` };
+}
+export 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 }),
+    };
+}

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

@@ -0,0 +1,53 @@
+import { type ReactNode } from "react";
+import { type FormProps, type FormSectionNavItem, type FormWidth } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function FormRoot({ onSubmit, testId, className, children, focusFirstErrorKey, }: {
+    readonly onSubmit: FormProps["onSubmit"];
+    readonly testId?: string;
+    readonly className?: string;
+    readonly children: ReactNode;
+    readonly focusFirstErrorKey?: number | undefined;
+}): ReactNode;
+export declare function isPinnedFooter(stickyActions: boolean | undefined, fillHeight: boolean | undefined): boolean;
+export declare function FormSections({ children, chromeless, stickyActions, fillHeight, screenForm, }: {
+    readonly children: ReactNode;
+    readonly chromeless: boolean;
+    readonly stickyActions: boolean | undefined;
+    readonly fillHeight: boolean | undefined;
+    readonly screenForm?: boolean;
+}): ReactNode;
+export declare function FormTitleBlock({ title, subtitle, titleAction, testId, bordered, fillHeight, }: {
+    readonly title: ReactNode;
+    readonly subtitle: ReactNode;
+    readonly titleAction: ReactNode;
+    readonly testId: string | undefined;
+    readonly bordered: boolean;
+    readonly fillHeight: boolean | undefined;
+}): ReactNode;
+export declare function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActions, fillHeight, unsavedCount, railed, }: {
+    readonly actions: ReactNode;
+    readonly secondaryActions: ReactNode;
+    readonly testId: string | undefined;
+    readonly chromeless: boolean;
+    readonly stickyActions: boolean | undefined;
+    readonly fillHeight: boolean | undefined;
+    readonly unsavedCount?: number;
+    /** Footer sits under a step rail: symmetric px-6 instead of the form column's left inset. */
+    readonly railed?: boolean;
+}): ReactNode;
+export declare const SECTION_NAV_MIN_ITEMS = 3;
+export declare function FormSectionNav({ items, }: {
+    readonly items: readonly FormSectionNavItem[];
+}): ReactNode;
+export type FormScreenShellWidth = FormWidth;
+export declare function FormScreenShell({ children, className, testId, maxWidth, fillHeight, }: {
+    readonly children: ReactNode;
+    readonly className?: string;
+    readonly testId?: string;
+    readonly maxWidth?: FormScreenShellWidth;
+    /** Stacks children in a `h-full` flex column instead of normal document
+     *  flow, so a `flex-1 min-h-0` child can claim the remaining height below
+     *  the others (fw#2722 — DefaultForm's tabs+relatedList case). Default
+     *  false: unchanged, content-sized height. */
+    readonly fillHeight?: boolean;
+}): ReactNode;

package/dist/web/primitives/form.js

@@ -0,0 +1,252 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, Fragment, isValidElement, useContext, useEffect, useRef, useState, } from "react";
+import { STICKY_PRIMARY_ACTION_PROP, useTranslation, } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import { screenPaddingClassName, screenWidthClassName } from "./layout.js";
+import { NarrowPinnedFooter } from "./narrow-pinned-footer.js";
+import { STICKY_FOOTER_SAFE_AREA_CLASS, STICKY_FOOTER_SPACER_CLASS } from "./sticky-action-bar.js";
+import { useKeyboardInset } from "./use-keyboard-inset.js";
+import { useIsBelowSmViewport } from "./use-narrow-viewport.js";
+import "../react-css-custom-properties.js";
+import { cardFooterBorder, cardHeaderBorder } from "./card-styles.js";
+import { InsideFormContext, ScreenFormContext, ScreenWidthContext } from "./contexts.js";
+// Extension sections that render their own <form> via BareFormProvider
+// (legacy custom-form pattern, e.g. ChangeEmailSection before fw#2703) land
+// 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(", ");
+export 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.
+export 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).
+export 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", 
+        // For section children (auto-UI edit) a line separates THEM — they pad
+        // themselves. Flat fields (custom screens) get padding + rhythm, no line
+        // between every field.
+        "[&>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.
+export 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.
+export 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 }))] }));
+}
+export 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.
+export 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));
+            })] }));
+}
+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 }));
+}

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

@@ -1,34 +1,11 @@
-import { type ReactNode } from "react";
 import { applyFormatSpec } from "../../headless/index.ts";
-import { type CardProps, type CorePrimitives, type FormWidth } from "../../index.ts";
+import type { CorePrimitives } from "../../index.ts";
 import "../react-css-custom-properties.ts";
-export declare const END_LABEL_MIN_ROWS = 50;
-export declare function isComponentRendererRef(renderer: unknown): {
-    readonly name: string;
-} | undefined;
+export { DefaultCard } from "./card.tsx";
+export { BareFormProvider, EmbeddedFormProvider, ScreenWidthProvider } from "./contexts.tsx";
+export { defaultCellRender, isComponentRendererRef } from "./data-table-cell.tsx";
+export type { FormScreenShellWidth } from "./form.tsx";
+export { FormScreenShell } from "./form.tsx";
+export { END_LABEL_MIN_ROWS } from "./pager.tsx";
 export { applyFormatSpec };
-export declare function defaultCellRender(value: unknown, type: string, optionLabels?: Readonly<Record<string, string>>, locale?: string, columnKey?: string, grouping?: boolean): string;
-export declare function EmbeddedFormProvider({ children }: {
-    children: ReactNode;
-}): ReactNode;
-export declare function BareFormProvider({ children }: {
-    children: ReactNode;
-}): ReactNode;
-export declare function ScreenWidthProvider({ width, children, }: {
-    readonly width: FormWidth | undefined;
-    readonly children: ReactNode;
-}): ReactNode;
-export type FormScreenShellWidth = FormWidth;
-export declare function FormScreenShell({ children, className, testId, maxWidth, fillHeight, }: {
-    readonly children: ReactNode;
-    readonly className?: string;
-    readonly testId?: string;
-    readonly maxWidth?: FormScreenShellWidth;
-    /** Stacks children in a `h-full` flex column instead of normal document
-     *  flow, so a `flex-1 min-h-0` child can claim the remaining height below
-     *  the others (fw#2722 — DefaultForm's tabs+relatedList case). Default
-     *  false: unchanged, content-sized height. */
-    readonly fillHeight?: boolean;
-}): ReactNode;
-export declare function DefaultCard({ slots, options, className, testId, dataAttributes, children, }: CardProps): ReactNode;
 export declare const defaultPrimitives: CorePrimitives;