@cosmicdrift/kumiko-renderer 0.384.0 → 0.386.0

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

@@ -0,0 +1,4 @@
+import { type ReactNode } from "react";
+import type { InputProps } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function DefaultInput(props: InputProps): ReactNode;

package/dist/web/primitives/input.js

@@ -0,0 +1,166 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../lib/cn.js";
+import { Checkbox } from "../ui/checkbox.js";
+import { Input as UiInput } from "../ui/input.js";
+import { Switch } from "../ui/switch.js";
+import { Textarea } from "../ui/textarea.js";
+import { ComboboxInput } from "./combobox.js";
+import { DateInput } from "./date-input.js";
+import { FileUploadInput } from "./file-upload.js";
+import { FilesDropzoneInput } from "./files-dropzone.js";
+import { LocatedTimestampInput } from "./located-timestamp-input.js";
+import { MoneyInput } from "./money-input.js";
+import { NumberInput } from "./number-input.js";
+import { hasDescriptionOrGroup } from "./option-groups.js";
+import { TimestampInput } from "./timestamp-input.js";
+import { TzInput } from "./tz-input.js";
+import "../react-css-custom-properties.js";
+import { FieldDescriptionContext, FieldLayoutContext } from "./contexts.js";
+import { defaultSelectPresentation, FIELD_ICON_CLASS, fieldIconFor, RadioListSelect, SegmentedSelect, textareaMinHeight, unitSuffixId, withFieldIcon, withInlineDisabledHint, withInputAddons, withoutSegmentedSelectPlaceholder, withTrailingAction, } from "./field.js";
+export function DefaultInput(props) {
+    // Vendored ui/input + ui/checkbox style errors via `aria-invalid`
+    // themselves, no manual border-destructive needed anymore.
+    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 consolidation: all selects go through ComboboxInput
+            // (cmdk + Radix popover). Before, there were two paths: Radix
+            // Select for `kind:"select"` and cmdk for `kind:"combobox"`. Three
+            // visually different variants (single select, combobox single, combobox
+            // multi) became unmanageable. With the merge the combobox is the only
+            // implementation: the search input is present even for 4-item status
+            // selects, a deliberately accepted UX consequence for style consistency.
+            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`; we split
+            // TS-side into two branches so ComboboxInput's single/multi variants
+            // render with the right types.
+            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 }) }));
+    }
+}

package/dist/web/primitives/layout-elements.d.ts

@@ -0,0 +1,14 @@
+import { type MouseEvent, type ReactNode } from "react";
+import type { FillContainerProps, GridCellProps, GridProps, HeadingProps, LinkProps, ProgressProps, SectionProps, StepBarProps, TextProps, WizardStepGroupProps } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function DefaultSection({ id, title, subtitle, children, actions, variant, layout, testId, icon, }: SectionProps): ReactNode;
+export declare function DefaultFillContainer({ children, testId, grow }: FillContainerProps): ReactNode;
+export declare function DefaultGrid({ columns, children, testId, maxRows, flow, list, ariaLabelledBy, }: GridProps): ReactNode;
+export declare function DefaultGridCell({ span, width, children }: GridCellProps): ReactNode;
+export declare function DefaultText({ variant, decorative, children, testId, }: TextProps): ReactNode;
+export declare function isPlainPrimaryClick(event: MouseEvent): boolean;
+export declare function DefaultLink({ href, variant, target, rel, onPress, className, children, testId, dataAttributes, }: LinkProps): ReactNode;
+export declare function DefaultProgress({ value, tone, ariaLabel, testId }: ProgressProps): ReactNode;
+export declare function DefaultStepBar({ steps, currentIndex, compactLabel, onStepSelect, doneSteps, selectableSteps, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }: StepBarProps): ReactNode;
+export declare function DefaultWizardStepGroup({ hidden, inset, children, }: WizardStepGroupProps): ReactNode;
+export declare function DefaultHeading({ variant, children, testId }: HeadingProps): ReactNode;

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

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, useContext } from "react";
+import { isSafeHref } from "../../headless/index.js";
+import { Icon } from "../icons.js";
+import { cn } from "../lib/cn.js";
+import { buttonVariants } from "../ui/button.js";
+import { ProgressBar } from "../widgets/progress-bar.js";
+import { StepBar } from "../widgets/step-bar.js";
+import "../react-css-custom-properties.js";
+import { cardSurface } from "./card-styles.js";
+import { DrawerBodyContext, InsideFormContext, ScreenFormContext } from "./contexts.js";
+export function DefaultSection({ id, title, subtitle, children, actions, variant = "default", layout = "stacked", testId, icon, }) {
+    const insideForm = useContext(InsideFormContext);
+    const insideScreenForm = useContext(ScreenFormContext);
+    // h3 instead of CardTitle (= div): keeps the heading semantics for
+    // screen reader navigation. The subtitle flows below (no divider,
+    // shadcn CardTitle+CardDescription pattern).
+    // 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;
+    // Inside a form: divider-less section WITHOUT a card surface of its own.
+    // The separator lines BETWEEN sections come from the divide-y wrapper in
+    // the 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] }) }));
+}
+export function DefaultFillContainer({ children, testId, grow }) {
+    // flex-1 only on request (`grow`, set under fillScreenHeight): without it the
+    // container sizes to its content and only shrinks (min-h-0), so a two-row
+    // table in a non-fixed-height screen does not stretch (fw#2778).
+    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]",
+};
+export 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) stays single-column, from sm on the
+    // author-declared column count applies. The inline style writes a CSS
+    // variable; the Tailwind class reads it with
+    // `grid-template-columns: var(--grid-cols)`. A clean solution because
+    // Tailwind JIT cannot resolve a dynamic `grid-cols-${N}`.
+    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 }));
+}
+export function DefaultGridCell({ span, width, children }) {
+    const insideDrawerBody = useContext(DrawerBodyContext);
+    if (width !== undefined) {
+        return (_jsx("div", { className: cn("min-w-0 max-w-full", insideDrawerBody
+                ? (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 }));
+}
+export 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 with button/muted look) ----
+// isSafeHref lives in @cosmicdrift/kumiko-renderer/headless — shared with
+// page-render's server-side markdown renderer, both take untrusted
+// tenant-authored hrefs.
+// `button` uses the primary button surface on a semantic <a>, the
+// standard for "continue to" navigations after success states (formerly
+// authButtonClass), `muted` is the subtle secondary link (formerly
+// authMutedLinkClass).
+// Modified and middle clicks keep the browser default (new tab/window).
+export function isPlainPrimaryClick(event) {
+    return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
+}
+export 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 }));
+}
+export function DefaultProgress({ value, tone, ariaLabel, testId }) {
+    return _jsx(ProgressBar, { value: value, tone: tone, ariaLabel: ariaLabel, testId: testId });
+}
+export 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 }));
+}
+export 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 }));
+}
+export function DefaultHeading({ variant = "page", children, testId }) {
+    // Page heading = h1, very rare in an app (max 1 per screen).
+    // Section heading = h2 with uppercase + muted-foreground, the same look as
+    // the section header in forms, but usable as a standalone component for
+    // demo pages and custom screens.
+    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 }));
+}

package/dist/web/primitives/modal.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
-import { BareFormProvider } from "./index.js";
+import { BareFormProvider } from "./contexts.js";
 import { ModalShell } from "./modal-shell.js";
 export function DefaultModal({ open, onOpenChange, title, children, testId, }) {
     const t = useTranslation();

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

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import "../react-css-custom-properties.ts";
+export declare const TABLE_FOOTER_BAR_CLASS: string;
+export declare const END_LABEL_MIN_ROWS = 50;
+export declare function InfiniteSentinel({ onReachEnd, loadingMore, hasMore, rowsCount, testId, }: {
+    readonly onReachEnd: () => void;
+    readonly loadingMore: boolean;
+    readonly hasMore: boolean;
+    readonly rowsCount: number;
+    readonly testId?: string;
+}): ReactNode;
+export declare function Pager({ page, limit, total, onPageChange, pageSizeOptions, onPageSizeChange, itemNoun, testId, pinned, }: {
+    readonly page: number;
+    readonly limit: number;
+    readonly total: number;
+    readonly onPageChange: (next: number) => void;
+    readonly pageSizeOptions?: readonly number[];
+    readonly onPageSizeChange?: (next: number) => void;
+    readonly itemNoun?: (count: number) => string;
+    readonly testId?: string;
+    readonly pinned?: boolean;
+}): ReactNode;

package/dist/web/primitives/pager.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDown, ChevronLeft, ChevronRight, Loader2 } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "../../index.js";
+import { cn } from "../lib/cn.js";
+import "../react-css-custom-properties.js";
+export 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");
+// 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;
+export 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) => {
+            // Only fire the first visible event per mount: if the user keeps
+            // scrolling while loading is still in progress, loadingMore=true keeps the
+            // useEffect from remounting the observer at all.
+            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.
+export 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 }));
+}

package/dist/web/primitives/row-actions.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from "react";
+import type { ListRowViewModel } from "../../headless/index.ts";
+import type { DataTableRowAction, DataTableRowActionMode } from "../../index.ts";
+import { type ActionOverflowMenuProps } from "../../index.ts";
+import "../react-css-custom-properties.ts";
+export declare function RowActionsCell({ row, actions, mode, rowIsLink, compact, }: {
+    readonly row: ListRowViewModel;
+    readonly actions: readonly DataTableRowAction[];
+    readonly mode?: DataTableRowActionMode;
+    readonly rowIsLink?: boolean;
+    readonly compact?: boolean;
+}): ReactNode;
+export declare function ActionOverflowMenu({ items, label, testId }: ActionOverflowMenuProps): ReactNode;