@cosmicdrift/kumiko-renderer 0.377.0 → 0.379.0

package/dist/web/primitives/index.js

@@ -8,6 +8,7 @@ import { ArrowDown, ArrowUp, ArrowUpDown, Building, CalendarDays, Check, Chevron
 // package.json#browser (Metro), hence the explicit browser subpath.
 import QRCode from "qrcode/lib/browser.js";
 import { Children, createContext, Fragment, isValidElement, useContext, useEffect, useId, useRef, useState, } from "react";
+import { fieldIssueText } from "../../field-issue-text.js";
 import { applyFormatSpec, EMPTY_VALUE_PLACEHOLDER, isSafeHref } from "../../headless/index.js";
 import { InsideDrawerProvider, needsActionConfirm, STICKY_PRIMARY_ACTION_PROP, shouldRenderActionsIconOnly, statusToneForOptionTone, statusToneForValue, useColumnRenderer, useInsideDrawer, useOptionalLocale, useOptionalPrimitives, useOptionalTranslation, useTranslation, WriteFailedError, } from "../../index.js";
 import { Icon, NAV_ICONS } from "../icons.js";
@@ -32,6 +33,8 @@ import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMe
 import { EmbeddedListInput } from "./embedded-list-input.js";
 import { CardLeadingImage, FileDisplayCell } from "./file-thumbnail.js";
 import { FileUploadInput } from "./file-upload.js";
+import { FileValueList } from "./file-value-list.js";
+import { FilesDropzoneInput } from "./files-dropzone.js";
 import { DefaultJsonView } from "./json-view.js";
 import { screenFormColumnWidthClassName, screenPaddingClassName, screenWidthClassName, } from "./layout.js";
 import { DefaultLightbox } from "./lightbox.js";
@@ -169,14 +172,23 @@ const FieldDescriptionContext = createContext(undefined);
 function fieldDescriptionId(id) {
     return `${id}-description`;
 }
+function fieldErrorId(id) {
+    return `${id}-error`;
+}
 function DefaultField(props) {
-    return (_jsx(FieldLabelledContext.Provider, { value: props.label !== "", children: _jsx(FieldDescriptionContext.Provider, { value: props.description !== undefined ? fieldDescriptionId(props.id) : undefined, children: _jsx(DefaultFieldBody, { ...props }) }) }));
+    const describedBy = [
+        props.description !== undefined ? fieldDescriptionId(props.id) : undefined,
+        props.issues !== undefined && props.issues.length > 0 ? fieldErrorId(props.id) : undefined,
+    ]
+        .filter((id) => id !== undefined)
+        .join(" ");
+    return (_jsx(FieldLabelledContext.Provider, { value: props.label !== "", children: _jsx(FieldDescriptionContext.Provider, { value: describedBy === "" ? undefined : describedBy, children: _jsx(DefaultFieldBody, { ...props }) }) }));
 }
 function DefaultFieldBody({ id, label, required, issues, labelAppendix, fieldAppendix, appendixPlacement, description, status, children, layout, accent, hideLabel, testId, changed, }) {
     const t = useTranslation();
     const hasError = issues !== undefined && issues.length > 0;
     const labelEl = (_jsxs(UiLabel, { id: fieldLabelId(id), htmlFor: id, className: cn("min-w-0 gap-0 text-[13px]", hasError ? "text-destructive" : "text-foreground", hideLabel === true && "sr-only"), children: [_jsx("span", { className: layout === "inline" ? undefined : "truncate", title: typeof label === "string" ? label : undefined, children: label }), required === true && (_jsx("span", { "data-required": true, className: "ml-0.5 shrink-0 text-destructive", children: "*" }))] }));
-    const errorsEl = hasError ? (_jsx("div", { role: "alert", "data-testid": testId !== undefined ? `${testId}-errors` : undefined, className: "text-xs text-destructive", children: issues.map((issue) => (_jsx("div", { children: t(issue.i18nKey, issue.params) }, `${issue.path}:${issue.code}`))) })) : null;
+    const errorsEl = hasError ? (_jsx("div", { id: fieldErrorId(id), role: "alert", "data-testid": testId !== undefined ? `${testId}-errors` : undefined, className: "text-xs text-destructive", children: issues.map((issue) => (_jsx("div", { children: fieldIssueText(t, issue) }, `${issue.path}:${issue.code}`))) })) : null;
     // Inline (boolean/checkbox): Control links, Label rechts — shadcn-Muster.
     if (layout === "inline") {
         return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FieldLayoutContext.Provider, { value: "inline", children: children }), labelEl, labelAppendix !== undefined && labelAppendix] }), errorsEl] }));
@@ -352,7 +364,13 @@ function DefaultInput(props) {
             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.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 }) }));
+            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": {
@@ -615,13 +633,13 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
                             const row = item.row;
                             const opensOnClick = rowIsLink && !rowClickIsHidden(row);
                             return (_jsxs(Fragment, { children: [_jsxs(TableRow, { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), onClick: opensOnClick ? () => onRowClick(row) : undefined, className: cn(rowToneClass(rowTone?.(row)), opensOnClick && "cursor-pointer", fillsHeight && "h-10 border-border-row hover:bg-muted"), children: [isRowExpandable && (_jsx(TableCell, { "data-testid": getCellTestId?.(row, "expand") ?? `cell-${row.id}-expand`, className: EXPAND_TOGGLE_CELL_CLASS, children: renderExpandToggle(row) })), columns.map((col, colIndex) => (_jsx(TableCell, { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, "data-highlighted": col.highlighted === true ? "true" : undefined, 
-                                                // Cells truncate long values with ellipsis instead of
-                                                // wrapping — lists stay single-line + scannable (Linear
-                                                // pattern). max-w-xs gives a sensible default upper
-                                                // bound; the table container scrolls horizontally
-                                                // if the sum of the columns gets too wide.
+                                                // Text wraps instead of truncating: nowrap cells keep their
+                                                // full width, so a wide table scrolled sideways and its
+                                                // last column slid under the sticky actions column with
+                                                // nothing visibly cut off. max-w-xs bounds a single column;
+                                                // badges and dates stay nowrap by their own classes.
                                                 className: cn(col.fileDisplay === undefined
-                                                    ? "max-w-xs truncate"
+                                                    ? "max-w-xs whitespace-normal break-words"
                                                     : FIT_CONTENT_CELL_CLASS, colIndex === 0
                                                     ? "font-medium text-foreground"
                                                     : "text-foreground-secondary", NUMERIC_COLUMN_TYPES.has(col.type) && "text-right", TABULAR_COLUMN_TYPES.has(col.type) && "tabular-nums", col.highlighted === true && "bg-accent/40"), title: cellTitle(row.values[col.field]), children: _jsx(FirstCellLink, { enabled: colIndex === 0 && opensOnClick && onCellChange === undefined, onOpen: () => onRowClick?.(row), empty: isEmptyCellValue(row.values[col.field]), emptyLabel: rowClickLabel, children: _jsx(DataTableCell, { value: row.values[col.field], row: row.values, field: col.field, type: col.type, renderer: col.renderer, translate: tableTranslate, locale: tableLocale, ...(col.optionLabels !== undefined && {
@@ -635,7 +653,7 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
                                                 // would hide the neighboring data column on narrow
                                                 // viewports. bg-background sets the column apart during
                                                 // scroll — no border-l (divider too heavy).
-                                                className: cn("text-right md:sticky md:right-0 md:z-10 md:bg-background", fillsHeight && "md:bg-card"), 
+                                                className: cn("whitespace-nowrap text-right md:sticky md:right-0 md:z-10 md:bg-background", fillsHeight && "md:bg-card"), 
                                                 // Action-cell events must not trigger the row click/activation
                                                 // (typically "Open Detail" — the user wanted the action,
                                                 // not navigation). We stopPropagation for mouse and
@@ -670,7 +688,7 @@ function DefaultDataTable({ columns, rows, onRowClick, sort, onSortChange, empty
         const hasMenu = menuActions !== undefined && menuActions.length > 0;
         const opensOnClick = rowIsLink && !rowClickIsHidden(row);
         const body = (_jsxs(_Fragment, { children: [cardImageColumn?.fileDisplay !== undefined && (_jsx("div", { "data-testid": `card-image-${row.id}`, className: "shrink-0", children: _jsx(CardLeadingImage, { value: row.values[cardImageColumn.field], display: cardImageColumn.fileDisplay }) })), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-2", children: [cardTitleColumn !== undefined && (_jsx("span", { "data-testid": getCellTestId?.(row, cardTitleColumn.field) ??
-                                        `cell-${row.id}-${cardTitleColumn.field}`, className: "min-w-0 truncate text-base font-semibold text-foreground", children: cardCell(row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": getCellTestId?.(row, cardStatusColumn.field) ??
+                                        `cell-${row.id}-${cardTitleColumn.field}`, className: "min-w-0 break-words text-base font-semibold text-foreground", children: cardCell(row, cardTitleColumn) })), showStatus && (_jsx("span", { "data-testid": getCellTestId?.(row, cardStatusColumn.field) ??
                                         `cell-${row.id}-${cardStatusColumn.field}`, className: "shrink-0", children: cardCell(row, cardStatusColumn) }))] }), metaColumns.length > 0 && (_jsx("div", { className: "min-w-0 overflow-x-clip", children: _jsx("div", { "data-testid": `card-meta-${row.id}`, className: "-ms-3 flex min-w-0 flex-wrap items-center text-[13px] leading-5 tabular-nums text-foreground-secondary", children: metaColumns.map((col) => (_jsxs("div", { className: "flex h-5 min-w-0 max-w-full items-center", children: [_jsx("span", { "aria-hidden": "true", className: "w-3 shrink-0 text-center", children: "\u00B7" }), _jsx("div", { "data-testid": getCellTestId?.(row, col.field) ?? `cell-${row.id}-${col.field}`, className: "min-w-0 truncate leading-5", onPointerEnter: showFullTextOnHover, children: isBadgeColumn(col) ? (_jsx("span", { className: "inline-flex align-middle", children: cardCell(row, col) })) : (cardCell(row, col)) })] }, col.field))) }) }))] }), opensOnClick && (_jsx(ChevronRight, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }))] }));
         const rowItem = (_jsxs("li", { "data-testid": rowTestId(row), "data-tone": rowTone?.(row), className: cn("flex min-h-[72px] items-center gap-2 border-b border-border-row py-3", rowToneClass(rowTone?.(row)), isRowExpandable ? "pl-2" : "pl-4", hasMenu ? "pr-2" : "pr-4"), ...(opensOnClick && { onClick: () => onRowClick(row) }), children: [renderExpandToggle(row), opensOnClick ? (_jsx("button", { type: "button", className: "flex min-w-0 flex-1 cursor-pointer items-center gap-2 bg-transparent p-0 text-left", onKeyDown: (e) => {
                         if (e.key !== "Enter")
@@ -784,14 +802,14 @@ function RowActionsCell({ row, actions, mode = "adaptive", rowIsLink = false, co
     if (hasExplicitDisplay) {
         const inline = visible.filter((a) => a.display !== undefined);
         const rest = visible.filter((a) => a.display === undefined);
-        return (_jsxs("div", { className: "inline-flex items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+        return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [inline.map((a) => (_jsx(RowActionButton, { row: row, action: a, compact: compact }, a.id))), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
     }
     if (rowIsLink) {
         return (_jsx("div", { className: "inline-flex items-center justify-end", children: _jsx(RowActionsKebab, { row: row, actions: visible }) }));
     }
     const primary = primaryRowAction(visible);
     const rest = visible.filter((a) => a.id !== primary?.id);
-    return (_jsxs("div", { className: "inline-flex items-center gap-1 justify-end", children: [primary !== undefined && _jsx(RowActionButton, { row: row, action: primary, asLink: true }), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
+    return (_jsxs("div", { className: "inline-flex flex-wrap items-center gap-1 justify-end", children: [primary !== undefined && _jsx(RowActionButton, { row: row, action: primary, asLink: true }), rest.length > 0 && _jsx(RowActionsKebab, { row: row, actions: rest })] }));
 }
 function isEmptyCellValue(value) {
     return (value === null || value === undefined || (typeof value === "string" && value.trim() === ""));
@@ -1087,13 +1105,13 @@ function SortableHeader({ field, label, sortable, highlighted, numeric, fitConte
     const active = sort?.field === field ? sort : undefined;
     const ariaSort = active?.dir === "asc" ? "ascending" : active?.dir === "desc" ? "descending" : "none";
     if (!sortable || onSortChange === undefined) {
-        return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": sortable === true ? true : undefined, "data-highlighted": highlighted === true ? "true" : undefined, className: cn("font-medium text-muted-foreground", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: label }));
+        return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": sortable === true ? true : undefined, "data-highlighted": highlighted === true ? "true" : undefined, className: cn("font-medium whitespace-normal text-muted-foreground", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: label }));
     }
     const Icon = active?.dir === "asc" ? ArrowUp : active?.dir === "desc" ? ArrowDown : ArrowUpDown;
     const next = nextSortState(active?.dir, field);
     return (_jsx(TableHead, { "data-testid": `column-${field}`, "data-sortable": "true", "data-highlighted": highlighted === true ? "true" : undefined, "aria-sort": ariaSort, className: cn(active !== undefined
             ? "font-semibold text-foreground"
-            : "font-medium text-muted-foreground", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: _jsxs("button", { type: "button", onClick: () => onSortChange(next), className: cn("group/sort inline-flex h-8 items-center gap-1.5 rounded-sm px-2 -mx-2 text-sm [font-weight:inherit]", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active !== undefined && "text-foreground"), children: [_jsx("span", { children: label }), _jsx(Icon, { "data-sort-icon": active === undefined ? "idle" : "active", className: cn("size-3.5", active === undefined &&
+            : "font-medium text-muted-foreground", "whitespace-normal", numeric === true && "text-right", fitContent === true && FIT_CONTENT_CELL_CLASS, highlighted === true && "bg-accent/40"), children: _jsxs("button", { type: "button", onClick: () => onSortChange(next), className: cn("group/sort inline-flex h-8 items-center gap-1.5 rounded-sm px-2 -mx-2 text-sm [font-weight:inherit]", "hover:bg-accent hover:text-accent-foreground", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", active !== undefined && "text-foreground"), children: [_jsx("span", { children: label }), _jsx(Icon, { "data-sort-icon": active === undefined ? "idle" : "active", className: cn("size-3.5", active === undefined &&
                         "opacity-0 group-hover/sort:opacity-40 group-focus-visible/sort:opacity-40"), "aria-hidden": "true" })] }) }));
 }
 // 3-State-Toggle: kein Sort → asc → desc → kein Sort. Idiomatisch für
@@ -1426,9 +1444,21 @@ const SUBMIT_CONTROL_SELECTOR = [
     "input[type=submit]:not(:disabled)",
     "input[type=image]:not(:disabled)",
 ].join(", ");
-function FormRoot({ onSubmit, testId, className, children, }) {
+function FormRoot({ onSubmit, testId, className, children, focusFirstErrorKey, }) {
+    const rootRef = useRef(null);
+    useEffect(() => {
+        if (focusFirstErrorKey === undefined || focusFirstErrorKey === 0)
+            return;
+        const firstInvalid = rootRef.current?.querySelector('[aria-invalid="true"]');
+        if (firstInvalid === null || firstInvalid === undefined)
+            return;
+        firstInvalid.focus();
+        firstInvalid.scrollIntoView({ block: "center" });
+    }, [focusFirstErrorKey]);
     if (useContext(InsideFormContext)) {
-        return (_jsx("div", { "data-kumiko-form-root": "", onKeyDownCapture: (e) => {
+        return (_jsx("div", { ref: (node) => {
+                rootRef.current = node;
+            }, "data-kumiko-form-root": "", onKeyDownCapture: (e) => {
                 // Implicit submission: the section's inputs belong to the OUTER
                 // <form> in the DOM, so the browser would otherwise route Enter to
                 // that form's default button.
@@ -1457,7 +1487,9 @@ function FormRoot({ onSubmit, testId, className, children, }) {
                 onSubmit();
             }, "data-testid": testId, className: className, children: children }));
     }
-    return (_jsx("form", { onSubmit: (e) => {
+    return (_jsx("form", { ref: (node) => {
+            rootRef.current = node;
+        }, onSubmit: (e) => {
             e.preventDefault();
             onSubmit(e);
         }, "data-testid": testId, className: className, children: children }));
@@ -1636,26 +1668,26 @@ function FormSectionNav({ items }) {
 // Form inside the Drawer primitive: the drawer header carries the title, so
 // only the description (as help text), the scrolling sections and a pinned
 // footer remain. The scroll area is a sibling of the footer, never its parent.
-function DrawerFormLayout({ onSubmit, subtitle, actions, secondaryActions, summary, testId, children, }) {
-    return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 py-5", children: [summary !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-summary` : undefined, className: "flex flex-col gap-0.5 rounded-lg bg-muted px-3.5 py-3", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: summary.title }), summary.subtitle !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: summary.subtitle }))] })), subtitle !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: "text-[13px] text-foreground-secondary", children: subtitle })), _jsx(InsideFormContext.Provider, { value: true, children: _jsx(ScreenFormContext.Provider, { value: true, children: _jsx(InsideDrawerProvider, { value: false, children: _jsx(DrawerBodyContext.Provider, { value: true, children: _jsx("div", { className: "flex flex-col gap-5", children: children }) }) }) }) })] }), (actions !== undefined || secondaryActions !== undefined) && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-footer` : undefined, className: "flex h-16 shrink-0 items-center justify-end gap-2 border-t border-border px-6", children: [secondaryActions, actions] }))] }));
+function DrawerFormLayout({ onSubmit, focusFirstErrorKey, subtitle, actions, secondaryActions, summary, testId, children, }) {
+    return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: "flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto px-6 py-5", children: [summary !== undefined && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-summary` : undefined, className: "flex flex-col gap-0.5 rounded-lg bg-muted px-3.5 py-3", children: [_jsx("span", { className: "text-sm font-semibold text-foreground", children: summary.title }), summary.subtitle !== undefined && (_jsx("span", { className: "text-[13px] text-foreground-secondary", children: summary.subtitle }))] })), subtitle !== undefined && (_jsx("p", { "data-testid": testId !== undefined ? `${testId}-subtitle` : undefined, className: "text-[13px] text-foreground-secondary", children: subtitle })), _jsx(InsideFormContext.Provider, { value: true, children: _jsx(ScreenFormContext.Provider, { value: true, children: _jsx(InsideDrawerProvider, { value: false, children: _jsx(DrawerBodyContext.Provider, { value: true, children: _jsx("div", { className: "flex flex-col gap-5", children: children }) }) }) }) })] }), (actions !== undefined || secondaryActions !== undefined) && (_jsxs("div", { "data-testid": testId !== undefined ? `${testId}-footer` : undefined, className: "flex h-16 shrink-0 items-center justify-end gap-2 border-t border-border px-6", children: [secondaryActions, actions] }))] }));
 }
-function DefaultForm({ onSubmit, children, title, subtitle, actions, secondaryActions, testId, width, stickyActions, headerRegion, titleAction, fillHeight, chromeless, screenForm, unsavedCount, sectionNav, sideRail, summary, }) {
+function DefaultForm({ onSubmit, focusFirstErrorKey, children, title, subtitle, actions, secondaryActions, testId, width, stickyActions, headerRegion, titleAction, fillHeight, chromeless, screenForm, unsavedCount, sectionNav, sideRail, summary, }) {
     const insideDrawer = useInsideDrawer();
     const isEmbeddedForm = useContext(EmbeddedFormContext);
     const contextWidth = useContext(ScreenWidthContext);
     // Eingebettet (AuthCard etc.): nacktes <form>, gestapelte Felder mit gap —
     // der Container trägt Card/Titel selbst, sonst Card-in-Card.
     if (useContext(BareFormContext)) {
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: cn("flex flex-col gap-4", 
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col gap-4", 
             // Bare forms stack sections without a card; without a divider a
             // section boundary reads as a layout gap, not structure.
             "[&>section:not(:first-child)]:border-t"), children: [headerRegion, _jsx(InsideFormContext.Provider, { value: true, children: children }), (secondaryActions !== undefined || actions !== undefined) && (_jsxs("div", { className: "flex items-center justify-end gap-2", children: [secondaryActions, actions] }))] }));
     }
     if (insideDrawer) {
-        return (_jsx(DrawerFormLayout, { onSubmit: onSubmit, subtitle: subtitle, actions: actions, secondaryActions: secondaryActions, summary: summary, testId: testId, children: children }));
+        return (_jsx(DrawerFormLayout, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, subtitle: subtitle, actions: actions, secondaryActions: secondaryActions, summary: summary, testId: testId, children: children }));
     }
     if (isEmbeddedForm) {
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: "flex w-full flex-col gap-6", children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), _jsx(FormSections, { chromeless: true, stickyActions: undefined, fillHeight: false, screenForm: true, children: children }), (actions !== undefined || secondaryActions !== undefined) && (_jsx("div", { className: "max-w-4xl border-t border-border", children: _jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: true, stickyActions: undefined, fillHeight: false, ...(unsavedCount !== undefined && { unsavedCount }) }) }))] }));
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex w-full flex-col gap-6", children: [_jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), _jsx(FormSections, { chromeless: true, stickyActions: undefined, fillHeight: false, screenForm: true, children: children }), (actions !== undefined || secondaryActions !== undefined) && (_jsx("div", { className: "max-w-4xl border-t border-border", children: _jsx(FormFooter, { actions: actions, secondaryActions: secondaryActions, testId: testId, chromeless: true, stickyActions: undefined, fillHeight: false, ...(unsavedCount !== undefined && { unsavedCount }) }) }))] }));
     }
     const isScreenForm = screenForm === true && fillHeight === true && chromeless !== true;
     const screenFormWidth = width ?? contextWidth;
@@ -1665,7 +1697,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", screenFormWidth !== undefined
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: "flex h-full min-h-0 w-full flex-col", children: [_jsxs("div", { className: "flex min-h-0 flex-1 flex-col lg:flex-row", children: [sideRail, _jsx("div", { "data-testid": testId !== undefined ? `${testId}-scroll` : undefined, className: cn("min-h-0 flex-1 overflow-y-auto", screenPaddingClassName), children: _jsxs("div", { className: "flex gap-18", children: [_jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-9", screenFormWidth !== undefined
                                             ? screenFormColumnWidthClassName[screenFormWidth]
                                             : "max-w-[640px]"), children: [_jsx(InsideScreenFormColumnContext.Provider, { value: true, children: headerRegion }), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: false }), sections] }), showsSectionNav && _jsx(FormSectionNav, { items: sectionNav })] }) })] }), footer] }));
     }
@@ -1684,13 +1716,13 @@ function DefaultForm({ onSubmit, children, title, subtitle, actions, secondaryAc
     // the screen-level subtitle (screen.description) is independent of that
     // and must survive tabs mode.
     if (chromeless === true) {
-        return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { maxWidth: "full", ...(fillHeight === true && { fillHeight: true }), className: cn("!p-0", pinnedShellClassName), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col", fillHeight === true && "shrink-0"), children: headerRegion })), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: fillHeight }), sections, !pinnedFooter && footer] }), pinnedFooter && footer] }));
+        return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { maxWidth: "full", ...(fillHeight === true && { fillHeight: true }), className: cn("!p-0", pinnedShellClassName), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col", fillHeight === true && "shrink-0"), children: headerRegion })), _jsx(FormTitleBlock, { title: title, subtitle: subtitle, titleAction: titleAction, testId: testId, bordered: false, fillHeight: fillHeight }), sections, !pinnedFooter && footer] }), pinnedFooter && footer] }));
     }
     // One card form: title as header (no divider under it), sections divided
     // between each other, muted action footer. Shell width comes from
     // FormScreenShell (layout.width, else the app-wide screenWidth default, else
     // 4xl).
-    return (_jsxs(FormRoot, { onSubmit: onSubmit, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { ...(width !== undefined && { maxWidth: width }), ...(fillHeight === true && { fillHeight: true }), ...(pinnedShellClassName !== undefined && { className: pinnedShellClassName }), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col gap-6 mb-8", fillHeight === true && "shrink-0"), children: headerRegion })), _jsxs("div", { "data-slot": "card", className: cn(cardSurface(), "overflow-hidden", 
+    return (_jsxs(FormRoot, { onSubmit: onSubmit, focusFirstErrorKey: focusFirstErrorKey, testId: testId, className: cn("flex flex-col w-full", fillHeight === true && "h-full min-h-0"), children: [_jsxs(FormScreenShell, { ...(width !== undefined && { maxWidth: width }), ...(fillHeight === true && { fillHeight: true }), ...(pinnedShellClassName !== undefined && { className: pinnedShellClassName }), children: [headerRegion !== undefined && (_jsx("div", { className: cn("flex flex-col gap-6 mb-8", fillHeight === true && "shrink-0"), children: headerRegion })), _jsxs("div", { "data-slot": "card", className: cn(cardSurface(), "overflow-hidden", 
                         // No flex-1: a fillHeight card sizes to its content (flex's
                         // initial 0 1 auto) and only claims more than that once its
                         // FormScreenShell ancestor is itself height-constrained and
@@ -1777,8 +1809,10 @@ function DefaultGrid({ columns, children, testId, maxRows, flow, list, ariaLabel
                 ? "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.
-                    "flex-wrap items-end has-[[data-appendix-below]]:items-start"), children: children }));
+                    // 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.
@@ -1920,7 +1954,7 @@ export function DefaultCard({ slots, options, className, testId, dataAttributes,
                 // The one region allowed to shrink and scroll internally — mirrors
                 // FormSections' fillHeight === true && "min-h-0" treatment of the
                 // section it wraps.
-                fillHeight && "min-h-0 flex flex-col"), children: children })), s.footer !== undefined && (_jsx("div", { className: cn(cardFooter, footerInset && cardFooterInset, footerBordered && cardFooterBorder, fillHeight && "shrink-0"), children: s.footer }))] }));
+                fillHeight && "min-h-0 flex flex-col"), children: children })), s.footer !== undefined && s.footer !== null && s.footer !== false && (_jsx("div", { className: cn(cardFooter, footerInset && cardFooterInset, footerBordered && cardFooterBorder, fillHeight && "shrink-0"), children: s.footer }))] }));
     return (_jsx(InsideScreenFormColumnContext.Provider, { value: false, children: screenBody ? _jsx(FormScreenShell, { children: card }) : card }));
 }
 // otpauth:// enrollment URI → scannable QR (errorCorrectionLevel "H", ~30%
@@ -2011,6 +2045,7 @@ export const defaultPrimitives = {
     MetricBand: DefaultMetricBand,
     PageHeader: DefaultPageHeader,
     JsonView: DefaultJsonView,
+    FileValueList,
     FillContainer: DefaultFillContainer,
     ActionOverflowMenu,
     SecretReveal: DefaultSecretReveal,

package/dist/web/primitives/segmented-select.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { cn } from "../lib/cn.js";
+const EQUAL_WIDTH_MAX_SEGMENTS = 4;
 // WAI-ARIA radiogroup pattern (role="radiogroup" + role="radio" children):
 // arrow keys move focus AND selection in the same step, only the checked
 // segment (or the first when none is checked) sits in the tab order.
@@ -35,7 +36,12 @@ export function SegmentedControl({ id, name, value, onChange, options, disabled,
             selectAt(nextEnabledIndex(index, -1));
         }
     };
-    return (_jsxs("div", { role: "radiogroup", ...labelProps, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `segmented-${id}`, className: cn("inline-flex min-h-9 w-fit flex-wrap overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
+    return (_jsxs("div", { role: "radiogroup", ...labelProps, "aria-required": required, "aria-invalid": hasError === true ? true : undefined, "data-testid": `segmented-${id}`, className: cn(
+        // Few segments share one row at equal width so labels wrap inside
+        // their segment instead of leaving one tall and its siblings short.
+        options.length <= EQUAL_WIDTH_MAX_SEGMENTS
+            ? "inline-grid max-w-full grid-flow-col auto-cols-fr"
+            : "inline-flex w-fit flex-wrap", "min-h-9 overflow-hidden rounded-md border", hasError === true ? "border-destructive" : "border-input"), children: [_jsx("input", { type: "hidden", name: name, value: value }), options.map((opt, index) => {
                 const checked = opt.value === value;
                 return (_jsx("button", { ref: (node) => {
                         buttonRefs.current[index] = node;
@@ -55,7 +61,7 @@ export function SegmentedControl({ id, name, value, onChange, options, disabled,
                     // and the next row's top border cut a notch into the row above.
                     // Harmless on a single-row layout: there's no leftover space to
                     // grow into, so `w-fit` on the container still holds.
-                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", checked
+                    "-ml-px -mt-px grow border-l border-t px-3 py-1.5 text-center text-sm transition-colors", "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", "disabled:pointer-events-none disabled:opacity-50", hasError === true ? "border-destructive/50" : "border-border", checked
                         ? "bg-primary/10 font-semibold text-primary"
                         : "bg-transparent font-medium text-foreground hover:bg-accent"), children: opt.label }, opt.value));
             })] }));

package/dist/web/sse/live-events.d.ts

@@ -8,7 +8,20 @@ export type CreateEventSourceLiveEventsOptions = {
      *  handshake, or opened the stream with a `session-ended` frame (stale auth
      *  cookie downgraded to anonymous). Same codes as the dispatcher path. */
     readonly onSessionEnded?: () => void;
+    /** Reconnect-timer seam; defaults to the global setTimeout/clearTimeout. */
+    readonly timers?: LiveEventTimers;
+    /** Jitter source in [0, 1); defaults to Math.random. */
+    readonly random?: () => number;
+    /** Clock for synthetic resync events; defaults to Date.now. */
+    readonly now?: () => number;
 };
+export type LiveEventTimers = {
+    /** Schedules the callback and returns a function that cancels it. */
+    readonly set: (callback: () => void, delayMs: number) => () => void;
+};
+export declare const RECONNECT_BASE_DELAY_MS = 1000;
+export declare const RECONNECT_MAX_DELAY_MS = 30000;
+export declare function reconnectDelayMs(attempt: number, random: number): number;
 /** Liefert einen `LiveEventSubscriber` der EventSource-backed ist.
  *  Normalerweise einmal im App-Bootstrap gerufen und als value an
  *  `<LiveEventsProvider>` durchgereicht — createKumikoApp tut das. */

package/dist/web/sse/live-events.js

@@ -1,5 +1,20 @@
+import { Temporal } from "@cosmicdrift/kumiko-types/temporal";
 import { propertyOf } from "@cosmicdrift/kumiko-types/type-guards";
-import { isSessionEndedError } from "../../index.js";
+import { isSessionEndedError, LIVE_RESYNC_EVENT_TYPE, } from "../../index.js";
+export const RECONNECT_BASE_DELAY_MS = 1_000;
+export const RECONNECT_MAX_DELAY_MS = 30_000;
+const defaultTimers = {
+    set: (callback, delayMs) => {
+        const handle = setTimeout(callback, delayMs);
+        return () => clearTimeout(handle);
+    },
+};
+// Equal jitter: half the exponential delay is fixed, half random, so a server
+// restart doesn't make every tab reconnect in the same instant.
+export function reconnectDelayMs(attempt, random) {
+    const ceiling = Math.min(RECONNECT_MAX_DELAY_MS, RECONNECT_BASE_DELAY_MS * 2 ** attempt);
+    return Math.floor(ceiling / 2 + (random * ceiling) / 2);
+}
 // Wire name of the first frame on a stream downgraded from a stale auth cookie (sse-route.ts).
 const SESSION_ENDED_EVENT = "session-ended";
 function sessionEndedFrameCode(event) {
@@ -27,7 +42,7 @@ function hasErrorCode(body) {
 async function isSessionEndedRejection(url) {
     const controller = new AbortController();
     try {
-        // guard-allow: same-origin fetch — url is the app's own SSE endpoint, probed with same-origin credentials
+        // kumiko-lint-ignore direct-fetch url is the app's own SSE endpoint, probed with same-origin credentials
         const res = await fetch(url, {
             credentials: "same-origin",
             headers: { Accept: "text/event-stream" },
@@ -51,9 +66,15 @@ async function isSessionEndedRejection(url) {
  *  `<LiveEventsProvider>` durchgereicht — createKumikoApp tut das. */
 export function createEventSourceLiveEvents(options = {}) {
     const url = options.url ?? "/api/sse";
+    const timers = options.timers ?? defaultTimers;
+    const random = options.random ?? Math.random;
+    const now = options.now ?? Date.now;
     const subscribers = new Set();
     let source;
     const wiredEntities = new Set();
+    let cancelReconnect;
+    let reconnectAttempt = 0;
+    let needsResync = false;
     // `subscribers` is a flat Set across all entities — the browser-side
     // addEventListener(entityName, ...) gate below only filters which frames
     // arrive at all, not which subscriber a given frame is for. Without this
@@ -73,61 +94,104 @@ export function createEventSourceLiveEvents(options = {}) {
                 sub.listener(event);
         }
     };
-    const ensureConnected = () => {
-        // skip: EventSource already connected
-        if (source !== undefined)
+    const emitResync = () => {
+        const createdAt = Temporal.Instant.fromEpochMilliseconds(now()).toString();
+        for (const sub of [...subscribers]) {
+            sub.listener({
+                type: sub.entityName,
+                data: { aggregateType: sub.entityName, eventType: LIVE_RESYNC_EVENT_TYPE, createdAt },
+            });
+        }
+    };
+    const wireEntity = (connection, entityName) => {
+        // skip: already wired for this entity on this connection
+        if (wiredEntities.has(entityName))
             return;
+        connection.addEventListener(entityName, (e) => {
+            const data = propertyOf(e, "data");
+            if (typeof data === "string")
+                handleEvent(data);
+        });
+        wiredEntities.add(entityName);
+    };
+    const connect = () => {
         // skip: no window/EventSource available (SSR/non-browser), nothing to connect
         if (typeof window === "undefined" || typeof EventSource === "undefined")
             return;
         const connection = new EventSource(url);
         source = connection;
+        wiredEntities.clear();
+        for (const sub of subscribers)
+            wireEntity(connection, sub.entityName);
         const { onSessionEnded } = options;
-        // skip: no session-end consumer, a refused handshake needs no probe
-        if (onSessionEnded === undefined)
-            return;
         let sessionEndedSignalled = false;
         const signalSessionEnded = () => {
             // skip: the frame and the error probe can both report the same session end
             if (sessionEndedSignalled)
                 return;
             sessionEndedSignalled = true;
-            onSessionEnded();
+            onSessionEnded?.();
         };
+        connection.addEventListener("open", () => {
+            reconnectAttempt = 0;
+            // skip: first connect, nothing was missed
+            if (!needsResync)
+                return;
+            needsResync = false;
+            emitResync();
+        });
         connection.addEventListener(SESSION_ENDED_EVENT, (e) => {
             const code = sessionEndedFrameCode(e);
             if (code !== undefined && isSessionEndedError({ code, httpStatus: 401 }))
                 signalSessionEnded();
         });
         connection.addEventListener("error", () => {
+            needsResync = true;
             // skip: CONNECTING means a dropped stream the browser retries itself;
             // only a refused handshake (non-200) closes the EventSource for good.
             if (connection.readyState !== EventSource.CLOSED)
                 return;
-            void isSessionEndedRejection(url).then((sessionEnded) => {
-                if (sessionEnded)
+            void (onSessionEnded === undefined ? Promise.resolve(false) : isSessionEndedRejection(url)).then((sessionEnded) => {
+                // skip: closeIfEmpty or a newer connection took over while probing
+                if (source !== connection)
+                    return;
+                if (sessionEnded) {
                     signalSessionEnded();
+                    // skip: the session ended, reconnecting would only be refused again
+                    return;
+                }
+                scheduleReconnect();
             });
         });
     };
-    const ensureListenersForEntity = (entityName) => {
-        // skip: not connected yet, listeners get wired once ensureConnected runs
-        if (source === undefined)
+    const scheduleReconnect = () => {
+        // skip: a reconnect is already pending
+        if (cancelReconnect !== undefined)
             return;
-        // skip: already wired for this entity
-        if (wiredEntities.has(entityName))
+        const delay = reconnectDelayMs(reconnectAttempt, random());
+        reconnectAttempt += 1;
+        cancelReconnect = timers.set(() => {
+            cancelReconnect = undefined;
+            source = undefined;
+            connect();
+        }, delay);
+    };
+    const ensureConnected = () => {
+        // skip: connected, or waiting for the backoff timer to reconnect
+        if (source !== undefined || cancelReconnect !== undefined)
             return;
-        source.addEventListener(entityName, (e) => {
-            const data = propertyOf(e, "data");
-            if (typeof data === "string")
-                handleEvent(data);
-        });
-        wiredEntities.add(entityName);
+        connect();
     };
     const closeIfEmpty = () => {
         // skip: subscribers remain, connection still needed
         if (subscribers.size > 0)
             return;
+        if (cancelReconnect !== undefined) {
+            cancelReconnect();
+            cancelReconnect = undefined;
+        }
+        reconnectAttempt = 0;
+        needsResync = false;
         // skip: already closed, nothing to close
         if (source === undefined)
             return;
@@ -137,7 +201,8 @@ export function createEventSourceLiveEvents(options = {}) {
     };
     return (entityName, listener) => {
         ensureConnected();
-        ensureListenersForEntity(entityName);
+        if (source !== undefined)
+            wireEntity(source, entityName);
         const sub = { entityName, listener };
         subscribers.add(sub);
         return () => {

package/dist/web/widgets/bounded-load-cache.d.ts

@@ -0,0 +1 @@
+export declare function createBoundedLoadCache<T>(max: number, dispose: (value: T) => void): (key: string, load: () => Promise<T>) => Promise<T>;

package/dist/web/widgets/bounded-load-cache.js

@@ -0,0 +1,25 @@
+// Evicts the oldest entry once `max` is exceeded and disposes only that one,
+// so several documents on one page keep their own loading tasks alive.
+export function createBoundedLoadCache(max, dispose) {
+    const entries = new Map();
+    return (key, load) => {
+        const cached = entries.get(key);
+        if (cached !== undefined)
+            return cached;
+        const loading = load();
+        entries.set(key, loading);
+        // A failed load must not stick: the next mount retries instead of replaying the rejection.
+        loading.catch(() => {
+            if (entries.get(key) === loading)
+                entries.delete(key);
+        });
+        if (entries.size > max) {
+            const [oldestKey, oldest] = entries.entries().next().value ?? [];
+            if (oldestKey !== undefined && oldest !== undefined) {
+                entries.delete(oldestKey);
+                void oldest.then(dispose);
+            }
+        }
+        return loading;
+    };
+}

package/dist/web/widgets/drawer.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Maximize2Icon, Minimize2Icon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { clamp } from "../lib/clamp.js";
 import { cn } from "../lib/cn.js";
@@ -78,6 +78,39 @@ function sidePanelClass(side, narrow, variant, belowHeader) {
             return `inset-y-8 right-8 h-auto ${WIDTH_CLASS} rounded-[2rem] border shadow-2xl overflow-hidden`;
     }
 }
+const DRAWER_INSET_PROPERTY = {
+    left: "--kumiko-drawer-inset-left",
+    right: "--kumiko-drawer-inset-right",
+};
+// Publishes the width a non-modal side drawer occupies so the shell content (styles.css) can
+// narrow instead of sitting underneath it. Read from the layout box (offsetLeft/offsetWidth), not
+// getBoundingClientRect: the slide-in animation moves the painted rect, and the observer would
+// not fire again once it settles.
+// ponytail: one owner per side, so two non-modal drawers open on the same side overwrite each
+// other's value; a registry that takes the max is needed once a screen stacks them.
+function usePublishDrawerInset(sheet, side, active) {
+    useEffect(() => {
+        if (!active || sheet === null || (side !== "left" && side !== "right"))
+            return;
+        const property = DRAWER_INSET_PROPERTY[side];
+        const root = document.documentElement;
+        const publish = () => {
+            const inset = side === "right"
+                ? window.innerWidth - sheet.offsetLeft
+                : sheet.offsetLeft + sheet.offsetWidth;
+            root.style.setProperty(property, `${Math.max(0, Math.round(inset))}px`);
+        };
+        publish();
+        const observer = new ResizeObserver(publish);
+        observer.observe(sheet);
+        window.addEventListener("resize", publish);
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("resize", publish);
+            root.style.removeProperty(property);
+        };
+    }, [sheet, side, active]);
+}
 /** Slide-in panel beside a list (e.g. mail reader next to the inbox) —
  *  thin wrapper over the Sheet primitive with header/body/footer slots
  *  so screens skip per-route Radix boilerplate. */
@@ -95,6 +128,8 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
         : Math.min(maxWidthPx, Math.round(window.innerWidth * 0.9));
     const [resizedWidthPx, setResizedWidthPx] = useState(() => clamp(resize?.defaultWidthPx ?? defaultWidthFromViewport(), minWidthPx, effectiveMaxWidthPx()));
     const [maximized, setMaximized] = useState(false);
+    const [sheet, setSheet] = useState(null);
+    usePublishDrawerInset(sheet, side, open && !modal && !narrow);
     const blurPx = backdrop?.blurPx ?? DEFAULT_BLUR_PX;
     const dimPercent = backdrop?.dimPercent ?? DEFAULT_DIM_PERCENT;
     const overlayStyle = {
@@ -134,7 +169,7 @@ export function Drawer({ open, onOpenChange, side = "right", title, description,
         // instead of resizing relative to what's on screen.
         setResizedWidthPx((current) => clamp((maximized ? effectiveWidthPx : current) + delta, minWidthPx, effectiveMaxWidthPx()));
     };
-    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, modal: modal, children: _jsxs(DrawerSheetContent, { side: side, "data-testid": testId, overlayStyle: overlayStyle, 
+    return (_jsx(Sheet, { open: open, onOpenChange: onOpenChange, modal: modal, children: _jsxs(DrawerSheetContent, { ref: setSheet, side: side, "data-testid": testId, overlayStyle: overlayStyle, 
             // Radix already drops the overlay and the focus trap for a
             // non-modal Root; only the dismiss-on-outside-interaction is left
             // to suppress, so a click into the page behind keeps the panel open.