@cosmicdrift/kumiko-renderer-web 0.334.0 → 0.336.0

package/dist/primitives/index.js

@@ -1,6 +1,6 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { applyFormatSpec, isSafeHref } from "@cosmicdrift/kumiko-headless";
-import { InsideDrawerProvider, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, useColumnRenderer, useInsideDrawer, useOptionalLocale, useOptionalTranslation, useTranslation, WriteFailedError, } from "@cosmicdrift/kumiko-renderer";
+import { InsideDrawerProvider, needsActionConfirm, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, useColumnRenderer, useInsideDrawer, useOptionalLocale, useOptionalTranslation, useTranslation, WriteFailedError, } from "@cosmicdrift/kumiko-renderer";
 import { cva } from "class-variance-authority";
 import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, ChevronDown, ChevronLeft, ChevronRight, Globe, Hash, KeyRound, Link, Loader2, Lock, Mail, MapPin, MoreHorizontal, Phone, Search, SlidersHorizontal, Tag, Undo2, User, X, } from "lucide-react";
 import QRCode from "qrcode";
@@ -27,12 +27,13 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { EmbeddedListInput } from "./embedded-list-input.js";
 import { FileUploadInput } from "./file-upload.js";
 import { DefaultJsonView } from "./json-view.js";
-import { screenPaddingClassName, screenWidthClassName } from "./layout.js";
+import { screenFormColumnWidthClassName, screenPaddingClassName, screenWidthClassName, } from "./layout.js";
 import { DefaultLightbox } from "./lightbox.js";
 import { LocatedTimestampInput } from "./located-timestamp-input.js";
-import { DefaultMetric, DefaultMetricBand } from "./metric.js";
+import { DefaultMetric, DefaultMetricBand, InsideScreenFormColumnContext } 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";
@@ -44,7 +45,7 @@ import { DefaultTabs } from "./tabs.js";
 import { TimestampInput } from "./timestamp-input.js";
 import { useToast } from "./toast.js";
 import { TzInput } from "./tz-input.js";
-import { useIsNarrowViewport } from "./use-narrow-viewport.js";
+import { useIsBelowSmViewport, useIsNarrowViewport } from "./use-narrow-viewport.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
@@ -84,12 +85,15 @@ const BUTTON_SIZE = {
 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" ? "border-input hover:bg-muted" : "", pressed === true
+        : "", 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;
@@ -196,19 +200,27 @@ function withFieldIcon(icon, input) {
 // Mirrors withFieldIcon on the right side: a muted, non-interactive unit
 // suffix rendered inside the input's visual box. Pure decoration — never
 // focusable, never touches the input's value.
-function withUnitSuffix(unit, input) {
+// 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`;
+}
+function withUnitSuffix(inputId, unit, input) {
     if (unit === undefined)
         return input;
-    return (_jsxs("div", { className: "relative", children: [input, _jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-sm text-muted-foreground", children: unit })] }));
+    return (_jsxs("div", { className: "relative", children: [input, _jsx("span", { id: unitSuffixId(inputId), 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: 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`).
-function withTrailingAction(action, input) {
-    if (action === undefined)
+// `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 = TRAILING_ACTION_ICONS[action.icon];
-    return (_jsxs("div", { className: "relative", children: [input, _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" }) })] }));
+    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
@@ -235,6 +247,9 @@ function withoutSegmentedSelectPlaceholder(options) {
 // segment (or the first when none is checked) sits in the tab order.
 function SegmentedSelect({ id, name, value, onChange, options, disabled, required, hasError, }) {
     const buttonRefs = useRef([]);
+    // An unknown/legacy value checks no segment; the first one must still be tabbable.
+    const selectedIndex = options.findIndex((opt) => opt.value === value);
+    const tabStopIndex = selectedIndex === -1 ? 0 : selectedIndex;
     const selectAt = (index) => {
         const target = options[index];
         if (target === undefined)
@@ -256,7 +271,7 @@ function SegmentedSelect({ id, name, value, onChange, options, disabled, require
                 const checked = opt.value === value;
                 return (_jsx("button", { ref: (node) => {
                         buttonRefs.current[index] = node;
-                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: checked || (value === "" && index === 0) ? 0 : -1, disabled: disabled, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
+                    }, type: "button", role: "radio", "aria-checked": checked, tabIndex: index === tabStopIndex ? 0 : -1, disabled: disabled, "data-testid": `segmented-${id}-${opt.value}`, onClick: () => onChange(opt.value), onKeyDown: (e) => handleKeyDown(e, index), className: cn(
                     // Per-segment top/left border instead of the container's
                     // `divide-x`: divide-x only draws verticals between siblings
                     // in source order, which misplaces borders the moment a
@@ -320,9 +335,9 @@ function DefaultInput(props) {
         case "email":
             return (_jsx(UiInput, { type: "email", ...common, "data-testid": props.testId, value: props.value, onChange: (e) => props.onChange(e.target.value), ...(props.placeholder !== undefined && { placeholder: props.placeholder }), autoComplete: props.autoComplete ?? "email" }));
         case "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 }));
+            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":
-            return withUnitSuffix(props.unit, withFieldIcon(props.icon, _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.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(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) })));
+            return withUnitSuffix(props.id, props.unit, withFieldIcon(props.icon, _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(fieldIconFor(props.icon) !== undefined ? "pl-8" : undefined, props.unit !== undefined ? "pr-8" : undefined) })));
         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":
@@ -416,6 +431,11 @@ function DefaultInput(props) {
                     }),
                     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();
@@ -771,6 +791,7 @@ function isUnlabeledFalse(type, value, renderer) {
     return (typeof renderer === "object" &&
         renderer !== null &&
         "format" in renderer &&
+        renderer.format === "boolean" &&
         !("falseLabel" in renderer));
 }
 // True when the cell would render the default "✓": no renderer, or a boolean
@@ -810,15 +831,6 @@ function FirstCellLink({ enabled, empty, emptyLabel, onOpen, children, }) {
 // (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.
-//
-// The rule: an explicit confirm OR style=danger opens the dialog,
-// everything else fires straight through.
-// `confirmRequired` overrides the danger-implies-confirm default (e.g.
-// schema-driven navigate/drawer actions where the target form is itself
-// the confirmation).
-function needsConfirm(action) {
-    return action.confirm !== undefined || (action.confirmRequired ?? action.style === "danger");
-}
 function useRowActionTrigger(row) {
     const [busy, setBusy] = useState(false);
     const { toast } = useToast();
@@ -869,7 +881,7 @@ function RowActionButton({ row, action, iconOnly = false, asLink = false, }) {
                     : "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 (needsConfirm(action)) {
+                    if (needsActionConfirm(action)) {
                         setConfirmOpen(true);
                     }
                     else {
@@ -890,10 +902,15 @@ function RowActionsKebab({ row, actions, }) {
     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", children: actions.map((action) => (_jsx(DropdownMenuItem, { "data-testid": `row-${row.id}-action-${action.id}`, onSelect: (e) => {
+    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 (needsConfirm(action)) {
+                                if (needsActionConfirm(action)) {
                                     setPendingConfirm(action);
                                 }
                                 else {
@@ -914,7 +931,7 @@ function RowActionsKebab({ row, actions, }) {
 // 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: "border-input hover:bg-muted", "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) => {
+    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();
@@ -1073,6 +1090,8 @@ function isMoneyValue(value) {
 //   - 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
@@ -1290,12 +1309,31 @@ export function ScreenWidthProvider({ width, children, }) {
 // onSubmit instead of activating the real ancestor <form>.
 function FormRoot({ onSubmit, testId, className, children, }) {
     if (useContext(InsideFormContext)) {
-        return (_jsx("div", { onClickCapture: (e) => {
+        return (_jsx("div", { "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("button[type=submit], button:not([type])");
                 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 }));
@@ -1368,10 +1406,18 @@ function flattenActionNodes(node) {
     }
     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();
     if (actions === undefined && secondaryActions === undefined)
         return null;
     // Only split when sticky: the non-sticky (regular, non-wizard) footer must
@@ -1392,16 +1438,20 @@ function FormFooter({ actions, secondaryActions, testId, chromeless, stickyActio
     const hasNonPrimaryOverflow = nonPrimaryActionNodes !== undefined && nonPrimaryActionNodes.length > 0;
     const renderedSecondary = stickyActions === true && hasPrimaryAction ? (_jsxs(_Fragment, { children: [secondaryActions, nonPrimaryActionNodes] })) : (secondaryActions);
     const pinned = isPinnedFooter(stickyActions, fillHeight);
+    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, testId: testId }));
+    }
     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: unsavedCount === 0
-                            ? t("kumiko.form.noUnsavedChanges")
-                            : unsavedCount === 1
-                                ? t("kumiko.form.unsaved.one")
-                                : t("kumiko.form.unsaved.other", { count: unsavedCount }) })] })), (secondaryActions !== undefined || hasNonPrimaryOverflow) && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions-secondary` : undefined, className: cn("flex flex-wrap items-center gap-2 max-sm:[&_button]:text-xs", pinned && hasNonPrimaryOverflow && "mr-auto"), children: renderedSecondary })), renderedActions !== undefined && (_jsx("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: cn("flex items-center gap-2", pinned
+                !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, 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
@@ -1485,7 +1535,7 @@ function DefaultForm({ onSubmit, children, title, subtitle, actions, secondaryAc
     // 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, 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", width !== undefined ? screenWidthClassName[width] : "max-w-[640px]"), children: [headerRegion, _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), sections] }), showsSectionNav && _jsx(FormSectionNav, { items: sectionNav })] }) })] }), footer] }));
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, 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", width !== undefined ? screenFormColumnWidthClassName[width] : "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
@@ -1578,13 +1628,16 @@ const FIELD_CELL_WIDTH_CLASS = {
     // 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 }) {
+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", { "data-testid": testId, className: "flex flex-col divide-y divide-border", children: children }));
+        return (_jsx("div", { ...groupProps, "data-testid": testId, className: "flex flex-col divide-y divide-border", children: children }));
     }
     if (flow === true) {
-        return (_jsx("div", { "data-testid": testId, className: cn("flex gap-4", insideDrawerBody
+        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
@@ -1595,7 +1648,7 @@ function DefaultGrid({ columns, children, testId, maxRows, flow, list }) {
     // 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", { "data-testid": testId, className: "flex flex-wrap items-center gap-4", children: children }));
+        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
@@ -1623,7 +1676,7 @@ function DefaultGrid({ columns, children, testId, maxRows, flow, list }) {
         }),
         // workaround: duplicate @types/react instances break direct CSSProperties cast
     };
-    return (_jsx("div", { "data-testid": testId, className: "grid gap-4 grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
+    return (_jsx("div", { ...groupProps, "data-testid": testId, className: "grid gap-4 grid-cols-1 sm:[grid-template-columns:var(--grid-cols)]", style: style, children: children }));
 }
 function DefaultGridCell({ span, width, children }) {
     const insideDrawerBody = useContext(DrawerBodyContext);
@@ -1680,8 +1733,8 @@ function DefaultLink({ href, variant = "default", target, rel, onPress, classNam
 function DefaultProgress({ value, tone, ariaLabel, testId }) {
     return _jsx(ProgressBar, { value: value, tone: tone, ariaLabel: ariaLabel, testId: testId });
 }
-function DefaultStepBar({ steps, currentIndex, compactLabel, onStepSelect, narrowLayout, orientation, heading, description, subtitles, upNext, testId, compactTestId, }) {
-    return (_jsx(StepBar, { steps: steps, currentIndex: currentIndex, compactLabel: compactLabel, onStepSelect: onStepSelect, narrowLayout: narrowLayout, orientation: orientation, heading: heading, description: description, subtitles: subtitles, upNext: upNext, testId: testId, compactTestId: compactTestId }));
+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";
@@ -1715,7 +1768,7 @@ export function DefaultCard({ slots, options, className, testId, dataAttributes,
         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", { "data-slot": "card", ...dataAttributes, "data-testid": testId, className: cn(framed ? cardSurface({ radius }) : "flex flex-col", "overflow-hidden", 
+    const card = (_jsxs("div", { ...dataAttributes, "data-slot": "card", "data-testid": testId, className: cn(framed ? cardSurface({ radius }) : "flex flex-col", "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.
@@ -1727,7 +1780,7 @@ export function DefaultCard({ slots, options, className, testId, dataAttributes,
                 // FormSections' fillHeight === true && "min-h-0" treatment of the
                 // section it wraps.
                 fillHeight && "min-h-0 flex flex-col"), children: children })), s.footer !== undefined && (_jsx("div", { className: cn(cardFooter, footerBordered && cardFooterBorder, fillHeight && "shrink-0"), children: s.footer }))] }));
-    return screenBody ? _jsx(FormScreenShell, { children: card }) : card;
+    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
@@ -1736,20 +1789,27 @@ export function DefaultCard({ slots, options, className, testId, dataAttributes,
 // violate the rules of hooks.
 function QrSecretValue({ value }) {
     const [svg, setSvg] = useState(null);
+    const [failed, setFailed] = useState(false);
     useEffect(() => {
         let cancelled = false;
+        setFailed(false);
         QRCode.toString(value, { type: "svg", errorCorrectionLevel: "H" })
             .then((result) => {
             if (!cancelled)
                 setSvg(result);
         })
             .catch(() => {
-            // a reveal value always has the plaintext/manual-entry display alongside — QR is just convenience
+            // 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", 

package/dist/primitives/layout.d.ts

@@ -2,6 +2,7 @@ import type { FormWidth } from "@cosmicdrift/kumiko-renderer";
 import type { ReactNode } from "react";
 export type ScreenWidth = FormWidth;
 export declare const screenWidthClassName: Record<ScreenWidth, string>;
+export declare const screenFormColumnWidthClassName: Record<ScreenWidth, string>;
 export declare const screenPaddingClassName = "px-4 pb-6 pt-5 md:px-10 md:pb-10 md:pt-7";
 declare const STACK_GAP: {
     readonly sm: "gap-2";

package/dist/primitives/layout.js

@@ -8,6 +8,13 @@ export const screenWidthClassName = {
     "4xl": "max-w-4xl mx-auto",
     full: "max-w-full",
 };
+// Screen-form column variant: left-aligned (no mx-auto) so the column lines up
+// with the screen's other left-aligned content, e.g. the header region.
+export const screenFormColumnWidthClassName = {
+    "3xl": "max-w-3xl",
+    "4xl": "max-w-4xl",
+    full: "max-w-full",
+};
 // Shared screen padding for every screen container (PageSection,
 // FormScreenShell, list screens and the pinned-footer screen form). The inset
 // is the one the settings screens use, so a list, a dashboard and a form start

package/dist/primitives/metric.d.ts

@@ -1,4 +1,5 @@
 import type { MetricBandProps, MetricProps } from "@cosmicdrift/kumiko-renderer";
 import { type ReactNode } from "react";
+export declare const InsideScreenFormColumnContext: import("react").Context<boolean>;
 export declare function DefaultMetricBand({ lead, subtitle, children, testId, }: MetricBandProps): ReactNode;
 export declare function DefaultMetric({ label, value, testId, onPress }: MetricProps): ReactNode;

package/dist/primitives/metric.js

@@ -2,9 +2,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { cn } from "../lib/cn.js";
 const InsideMetricBandContext = createContext(false);
+// The screen-form column already insets and spaces its children; a band in its
+// header region must not add its own padding on top. DefaultCard resets this
+// to false because a card body is a different inset surface.
+export const InsideScreenFormColumnContext = createContext(false);
 // Column counts follow the board: 2 below md, 3 below lg, 5 from lg.
 export function DefaultMetricBand({ lead, subtitle, children, testId, }) {
-    return (_jsxs("div", { className: "flex shrink-0 flex-col gap-3 px-6 pb-4 pt-3.5", "data-testid": testId, children: [lead !== undefined && _jsx("div", { "data-kumiko-layout": "metric-band-lead", children: lead }), subtitle !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-x-2 text-[13px] text-foreground-secondary [&_a]:text-primary", children: subtitle })), _jsx(InsideMetricBandContext.Provider, { value: true, children: _jsx("dl", { className: "m-0 grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5", children: children }) })] }));
+    const insideScreenFormColumn = useContext(InsideScreenFormColumnContext);
+    return (_jsxs("div", { className: cn("flex shrink-0 flex-col gap-3", !insideScreenFormColumn && "px-6 pb-4 pt-3.5"), "data-testid": testId, children: [lead !== undefined && _jsx("div", { "data-kumiko-layout": "metric-band-lead", children: lead }), subtitle !== undefined && (_jsx("div", { className: "flex flex-wrap items-center gap-x-2 text-[13px] text-foreground-secondary [&_a]:text-primary", children: subtitle })), _jsx(InsideMetricBandContext.Provider, { value: true, children: _jsx("dl", { className: "m-0 grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5", children: children }) })] }));
 }
 export function DefaultMetric({ label, value, testId, onPress }) {
     const insideBand = useContext(InsideMetricBandContext);

package/dist/primitives/narrow-pinned-footer.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/** Pinned footer below `sm`: always one fixed-height row, Back as icon on the left,
+ *  everything else in a "…" popover (hidden while none of it is enabled), the primary
+ *  action filling the rest. */
+export declare function NarrowPinnedFooter({ nodes, overflowLabel, unsavedCount, testId, }: {
+    readonly nodes: readonly ReactNode[];
+    readonly overflowLabel: string;
+    readonly unsavedCount: number | undefined;
+    readonly testId: string | undefined;
+}): ReactNode;

package/dist/primitives/narrow-pinned-footer.js

@@ -0,0 +1,90 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FOOTER_ACTION_ROLE_PROP, NARROW_LABEL_PROP, STICKY_PRIMARY_ACTION_PROP, } from "@cosmicdrift/kumiko-renderer";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { MoreHorizontal } from "lucide-react";
+import { cloneElement, isValidElement, useLayoutEffect, useState, } from "react";
+import { cn } from "../lib/cn.js";
+import { Button as UiButton } from "../ui/button.js";
+function asFooterElement(node) {
+    return isValidElement(node) ? node : undefined;
+}
+function isBackNode(node) {
+    return asFooterElement(node)?.props[FOOTER_ACTION_ROLE_PROP] === "back";
+}
+function isPrimaryNode(node) {
+    const props = asFooterElement(node)?.props;
+    return props?.[FOOTER_ACTION_ROLE_PROP] === "primary" || props?.type === "submit";
+}
+function isStickyMarkedNode(node) {
+    return asFooterElement(node)?.props[STICKY_PRIMARY_ACTION_PROP] === true;
+}
+function lastOf(items) {
+    return items[items.length - 1];
+}
+function splitNarrowFooterNodes(nodes) {
+    const back = nodes.find(isBackNode);
+    const primary = lastOf(nodes.filter(isPrimaryNode)) ?? lastOf(nodes.filter(isStickyMarkedNode));
+    return {
+        back,
+        primary,
+        overflow: nodes.filter((node) => node !== back && node !== primary),
+    };
+}
+function BackIconButton({ node }) {
+    const { children, ariaLabel } = node.props;
+    return cloneElement(node, {
+        size: "icon",
+        ariaLabel: typeof children === "string" ? children : ariaLabel,
+        children: null,
+    });
+}
+function PrimaryButton({ node }) {
+    const element = asFooterElement(node);
+    if (element === undefined || !isPrimaryNode(node)) {
+        return _jsx("div", { className: "min-w-0 flex-1 [&>button]:w-full", children: node });
+    }
+    const narrowLabel = element.props[NARROW_LABEL_PROP];
+    return cloneElement(element, {
+        className: "min-w-0 flex-1",
+        children: _jsx("span", { className: "min-w-0 truncate", children: narrowLabel ?? element.props.children }),
+    });
+}
+// Overflow nodes are arbitrary (slot mounts may render nothing, buttons may be disabled),
+// so "has something to offer" is read from the mounted DOM, not from the elements.
+const ENABLED_ACTION_SELECTOR = "button:not(:disabled):not([aria-disabled='true']), a[href]:not([aria-disabled='true'])";
+function useContainsEnabledAction(container) {
+    const [containsEnabledAction, setContainsEnabledAction] = useState(false);
+    useLayoutEffect(() => {
+        if (container === null)
+            return;
+        const update = () => setContainsEnabledAction(container.querySelector(ENABLED_ACTION_SELECTOR) !== null);
+        update();
+        const observer = new MutationObserver(update);
+        observer.observe(container, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["disabled", "aria-disabled", "href"],
+        });
+        return () => observer.disconnect();
+    }, [container]);
+    return containsEnabledAction;
+}
+function OverflowPopover({ nodes, label, unsavedCount, testId, }) {
+    const [open, setOpen] = useState(false);
+    const [content, setContent] = useState(null);
+    const hasEnabledAction = useContainsEnabledAction(content);
+    const isDirty = unsavedCount !== undefined && unsavedCount > 0;
+    return (_jsxs(PopoverPrimitive.Root, { open: open && hasEnabledAction, onOpenChange: setOpen, children: [_jsx(PopoverPrimitive.Trigger, { asChild: true, children: _jsxs(UiButton, { type: "button", variant: "outline", size: "icon", className: cn("relative shrink-0 border-input hover:bg-muted", !hasEnabledAction && "hidden"), "aria-label": label, "data-testid": testId !== undefined ? `${testId}-overflow` : undefined, children: [_jsx(MoreHorizontal, { className: "size-4", "aria-hidden": "true" }), isDirty && (_jsx("span", { "aria-hidden": "true", "data-testid": testId !== undefined ? `${testId}-overflow-badge` : undefined, className: "absolute top-1 right-1 size-2 rounded-full bg-status-active" }))] }) }), _jsx(PopoverPrimitive.Portal, { forceMount: true, children: _jsx(PopoverPrimitive.Content, { ref: setContent, forceMount: true, side: "top", align: "center", sideOffset: 8, onClick: (event) => {
+                        if (event.target.closest("button") !== null)
+                            setOpen(false);
+                    }, className: cn("z-50 flex w-[calc(100vw-2rem)] flex-col gap-1 rounded-md border border-border bg-card p-1 shadow-md", "[&_button]:w-full [&_button]:justify-start [&_button]:text-left", "data-[state=closed]:hidden"), children: nodes }) })] }));
+}
+/** Pinned footer below `sm`: always one fixed-height row, Back as icon on the left,
+ *  everything else in a "…" popover (hidden while none of it is enabled), the primary
+ *  action filling the rest. */
+export function NarrowPinnedFooter({ nodes, overflowLabel, unsavedCount, testId, }) {
+    const { back, primary, overflow } = splitNarrowFooterNodes(nodes);
+    const backElement = asFooterElement(back);
+    return (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-actions` : undefined, className: "flex h-14 shrink-0 items-center gap-2 border-t border-border bg-card px-4", children: [backElement !== undefined && _jsx(BackIconButton, { node: backElement }), overflow.length > 0 && (_jsx(OverflowPopover, { nodes: overflow, label: overflowLabel, unsavedCount: unsavedCount, testId: testId })), primary !== undefined && _jsx(PrimaryButton, { node: primary })] }));
+}

package/dist/primitives/number-input.d.ts

@@ -13,5 +13,6 @@ export type NumberInputProps = {
     readonly placeholder?: string;
     readonly testId?: string;
     readonly className?: string;
+    readonly ariaDescribedBy?: string;
 };
-export declare function NumberInput({ id, name, value, onChange, locale, grouping, integer, disabled, required, hasError, placeholder, testId, className, }: NumberInputProps): ReactNode;
+export declare function NumberInput({ id, name, value, onChange, locale, grouping, integer, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, }: NumberInputProps): ReactNode;

package/dist/primitives/number-input.js

@@ -11,7 +11,7 @@ import { Input as UiInput } from "../ui/input.js";
 import { parseLocaleNumber, resolveSafeLocale } from "./locale-number.js";
 // 20 is the Intl maximum: the display must never round a stored value.
 const MAX_FRACTION_DIGITS = 20;
-export function NumberInput({ id, name, value, onChange, locale, grouping = true, integer = false, disabled, required, hasError, placeholder, testId, className, }) {
+export function NumberInput({ id, name, value, onChange, locale, grouping = true, integer = false, disabled, required, hasError, placeholder, testId, className, ariaDescribedBy, }) {
     const resolvedLocale = resolveSafeLocale(locale);
     const [focused, setFocused] = useState(false);
     const [draft, setDraft] = useState("");
@@ -41,7 +41,7 @@ export function NumberInput({ id, name, value, onChange, locale, grouping = true
             return;
         onChange(parsed);
     };
-    return (_jsx(UiInput, { ref: inputRef, type: "text", inputMode: integer ? "numeric" : "decimal", autoComplete: "off", id: id, name: name, disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": testId, value: focused ? draft : format(grouping), onFocus: () => {
+    return (_jsx(UiInput, { ref: inputRef, type: "text", inputMode: integer ? "numeric" : "decimal", autoComplete: "off", id: id, name: name, disabled: disabled, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "aria-describedby": ariaDescribedBy, "data-testid": testId, value: focused ? draft : format(grouping), onFocus: () => {
             setDraft(format(false));
             setFocused(true);
         }, onBlur: () => setFocused(false), onChange: (e) => handleChange(e.target.value), ...(placeholder !== undefined && { placeholder }), className: cn("text-left tabular-nums", className) }));

package/dist/primitives/use-narrow-viewport.d.ts

@@ -1 +1,2 @@
 export declare function useIsNarrowViewport(): boolean;
+export declare function useIsBelowSmViewport(): boolean;

package/dist/primitives/use-narrow-viewport.js

@@ -3,14 +3,22 @@ import { useSyncExternalStore } from "react";
 // because that file is vendored shadcn (regenerated via scripts/sync-shadcn.ts)
 // and cannot be imported from without risking a future overwrite.
 const MOBILE_BREAKPOINT = 768;
-function subscribe(callback) {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-    mql.addEventListener("change", callback);
-    return () => mql.removeEventListener("change", callback);
-}
-function getSnapshot() {
-    return window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`).matches;
+const SM_BREAKPOINT = 640;
+// Module-level stores keep subscribe stable, so useSyncExternalStore does not
+// resubscribe on every render (FormFooter re-renders on each keystroke).
+function createBelowBreakpointStore(breakpoint) {
+    const query = `(max-width: ${breakpoint - 1}px)`;
+    return {
+        subscribe: (callback) => {
+            const mql = window.matchMedia(query);
+            mql.addEventListener("change", callback);
+            return () => mql.removeEventListener("change", callback);
+        },
+        getSnapshot: () => window.matchMedia(query).matches,
+    };
 }
+const belowMobileStore = createBelowBreakpointStore(MOBILE_BREAKPOINT);
+const belowSmStore = createBelowBreakpointStore(SM_BREAKPOINT);
 function getServerSnapshot() {
     return false;
 }
@@ -19,5 +27,9 @@ function getServerSnapshot() {
 // render regardless of actual viewport, this reads the real value up front
 // via `useSyncExternalStore` — no wrong-then-corrected first render.
 export function useIsNarrowViewport() {
-    return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+    return useSyncExternalStore(belowMobileStore.subscribe, belowMobileStore.getSnapshot, getServerSnapshot);
+}
+// Tailwind's `sm` boundary: true below 640px.
+export function useIsBelowSmViewport() {
+    return useSyncExternalStore(belowSmStore.subscribe, belowSmStore.getSnapshot, getServerSnapshot);
 }