@cosmicdrift/kumiko-renderer 0.378.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";
@@ -33,6 +34,7 @@ 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";
@@ -170,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] }));
@@ -353,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": {
@@ -616,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 && {
@@ -636,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
@@ -671,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")
@@ -785,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() === ""));
@@ -1088,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
@@ -1427,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.
@@ -1458,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 }));
@@ -1637,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;
@@ -1666,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] }));
     }
@@ -1685,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
@@ -1778,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.

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/upload-zone.d.ts

@@ -3,7 +3,7 @@ export type UploadZoneProps = {
     /** Uploads a single file (POST + optional follow-up mutation). Throws on
      *  failure — the message ends up in the row's error line. Runs in
      *  parallel per file within a batch (no sequential waiting). */
-    readonly onUpload: (file: File) => Promise<void>;
+    readonly onUpload: (file: File) => Promise<string | undefined | void>;
     readonly title: ReactNode;
     readonly hint?: ReactNode;
     readonly accept?: readonly string[];
@@ -14,6 +14,15 @@ export type UploadZoneProps = {
     readonly capture?: "environment" | "user";
     readonly disabled?: boolean;
     readonly testId?: string;
+    /** Turns a failed upload into the row's error text. Default: the error's own message. */
+    readonly describeError?: (cause: unknown) => string;
+    /** Controlled use, for a form field: a string returned by `onUpload` becomes the row's value
+     *  and done rows get a remove button that calls this with it. The zone does not drop the row;
+     *  the owner removes the value from `doneValues`, which the zone then follows. */
+    readonly onRemove?: (value: string) => void;
+    /** The values the owner currently holds. Done rows whose value left the list disappear, and
+     *  going from some to none (an external reset) clears every row, error rows included. */
+    readonly doneValues?: readonly string[];
 };
 export declare function matchesAccept(file: File, accept?: readonly string[]): boolean;
 /** Drop zone + multi-file picker with a per-file status row (uploading/done/
@@ -21,4 +30,4 @@ export declare function matchesAccept(file: File, accept?: readonly string[]): b
  *  independently — unlike `FileField` (single file, FileRef value inside a
  *  form field). `onUpload` decides what "upload" means (storage POST, ingest
  *  mutation, or both); the zone only tracks uploading/done/error. */
-export declare function UploadZone({ onUpload, title, hint, accept, multiple, capture, disabled, testId, }: UploadZoneProps): ReactNode;
+export declare function UploadZone({ onUpload, title, hint, accept, multiple, capture, disabled, testId, describeError, onRemove, doneValues, }: UploadZoneProps): ReactNode;

package/dist/web/widgets/upload-zone.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload } from "lucide-react";
-import { useId, useRef, useState } from "react";
+import { CheckCircle2, FileUp, Loader2, TriangleAlert, Upload, X } from "lucide-react";
+import { useEffect, useId, useRef, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { toAcceptAttr } from "../lib/accept-attr.js";
 import { cn } from "../lib/cn.js";
@@ -44,7 +44,7 @@ function partitionByAccept(files, accept) {
  *  independently — unlike `FileField` (single file, FileRef value inside a
  *  form field). `onUpload` decides what "upload" means (storage POST, ingest
  *  mutation, or both); the zone only tracks uploading/done/error. */
-export function UploadZone({ onUpload, title, hint, accept, multiple = true, capture, disabled, testId, }) {
+export function UploadZone({ onUpload, title, hint, accept, multiple = true, capture, disabled, testId, describeError, onRemove, doneValues, }) {
     const t = useTranslation();
     const inputId = useId();
     const inputRef = useRef(null);
@@ -54,16 +54,31 @@ export function UploadZone({ onUpload, title, hint, accept, multiple = true, cap
     // preview leaves it undefined. These ids are React keys/row ids, not
     // globally unique identifiers, so a per-instance counter is enough.
     const nextRowId = useRef(0);
+    const previousDoneCount = useRef(0);
+    const doneCount = doneValues?.length;
+    useEffect(() => {
+        if (doneCount === undefined)
+            return;
+        if (doneCount === 0 && previousDoneCount.current > 0)
+            setRows([]);
+        previousDoneCount.current = doneCount;
+    }, [doneCount]);
     async function uploadOne(file) {
         const rowId = String(nextRowId.current++);
         const uploadFile = await resizeImageBeforeUpload(file);
         setRows((prev) => [...prev, { id: rowId, fileName: uploadFile.name, status: "uploading" }]);
         try {
-            await onUpload(uploadFile);
-            setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "done" } : row)));
+            const value = await onUpload(uploadFile);
+            setRows((prev) => prev.map((row) => row.id === rowId
+                ? { ...row, status: "done", ...(typeof value === "string" && { value }) }
+                : row));
         }
         catch (cause) {
-            const message = cause instanceof Error ? cause.message : t("kumiko.widget.upload.error");
+            const message = describeError !== undefined
+                ? describeError(cause)
+                : cause instanceof Error
+                    ? cause.message
+                    : t("kumiko.widget.upload.error");
             setRows((prev) => prev.map((row) => (row.id === rowId ? { ...row, status: "error", error: message } : row)));
         }
     }
@@ -95,6 +110,10 @@ export function UploadZone({ onUpload, title, hint, accept, multiple = true, cap
             return;
         void uploadFiles(e.dataTransfer.files);
     }
+    function removeRow(row) {
+        if (row.value !== undefined)
+            onRemove?.(row.value);
+    }
     const acceptAttr = toAcceptAttr(accept);
     return (_jsxs("div", { "data-testid": testId, className: "flex flex-col gap-4", children: [_jsxs("label", { htmlFor: inputId, onDragOver: (e) => {
                     e.preventDefault();
@@ -104,5 +123,9 @@ export function UploadZone({ onUpload, title, hint, accept, multiple = true, cap
                     if (!(e.relatedTarget instanceof Node) || !e.currentTarget.contains(e.relatedTarget)) {
                         setDragOver(false);
                     }
-                }, onDrop: handleDrop, "data-testid": testId !== undefined ? `${testId}-dropzone` : undefined, className: cn("flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed p-10 text-center transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", dragOver ? "border-primary bg-muted/40" : "border-border", disabled === true && "cursor-not-allowed opacity-50"), children: [_jsx(Upload, { className: "size-8 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-sm", children: title }), hint !== undefined && _jsx("span", { className: "text-sm text-muted-foreground", children: hint }), _jsx("input", { ref: inputRef, id: inputId, type: "file", multiple: multiple, className: "sr-only", "data-testid": testId !== undefined ? `${testId}-input` : undefined, disabled: disabled, ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(capture !== undefined && { capture }), onChange: (e) => void uploadFiles(e.target.files) })] }), rows.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: rows.map((row) => (_jsxs("li", { "data-testid": testId !== undefined ? `${testId}-row` : undefined, className: "flex items-center justify-between gap-3 rounded-md border border-border px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileUp, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate text-sm", children: row.fileName })] }), _jsxs("output", { className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground", children: [STATUS_ICON[row.status], _jsx("span", { className: "sr-only", children: t(STATUS_LABEL_KEY[row.status]) }), row.status === "error" && row.error !== undefined && _jsx("span", { children: row.error })] })] }, row.id))) }))] }));
+                }, onDrop: handleDrop, "data-testid": testId !== undefined ? `${testId}-dropzone` : undefined, className: cn("flex w-full cursor-pointer flex-col items-center gap-3 rounded-lg border-2 border-dashed p-10 text-center transition-colors has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring has-[:focus-visible]:ring-offset-2", dragOver ? "border-primary bg-muted/40" : "border-border", disabled === true && "cursor-not-allowed opacity-50"), children: [_jsx(Upload, { className: "size-8 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "text-sm", children: title }), hint !== undefined && _jsx("span", { className: "text-sm text-muted-foreground", children: hint }), _jsx("input", { ref: inputRef, id: inputId, type: "file", multiple: multiple, className: "sr-only", "data-testid": testId !== undefined ? `${testId}-input` : undefined, disabled: disabled, ...(acceptAttr !== undefined && { accept: acceptAttr }), ...(capture !== undefined && { capture }), onChange: (e) => void uploadFiles(e.target.files) })] }), rows.length > 0 && (_jsx("ul", { className: "flex flex-col gap-2", children: rows
+                    .filter((row) => row.value === undefined ||
+                    doneValues === undefined ||
+                    doneValues.includes(row.value))
+                    .map((row) => (_jsxs("li", { "data-testid": testId !== undefined ? `${testId}-row` : undefined, className: "flex items-center justify-between gap-3 rounded-md border border-border px-4 py-2", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx(FileUp, { className: "size-4 shrink-0 text-muted-foreground", "aria-hidden": "true" }), _jsx("span", { className: "truncate text-sm", children: row.fileName })] }), _jsxs("output", { className: "flex shrink-0 items-center gap-1.5 text-xs text-muted-foreground", children: [STATUS_ICON[row.status], _jsx("span", { className: "sr-only", children: t(STATUS_LABEL_KEY[row.status]) }), row.status === "error" && row.error !== undefined && _jsx("span", { children: row.error }), row.value !== undefined && onRemove !== undefined && disabled !== true && (_jsx("button", { type: "button", className: "rounded-sm p-0.5 text-muted-foreground hover:text-foreground", "aria-label": t("kumiko.widget.upload.remove"), "data-testid": testId !== undefined ? `${testId}-remove` : undefined, onClick: () => removeRow(row), children: _jsx(X, { className: "size-3.5", "aria-hidden": "true" }) }))] })] }, row.id))) }))] }));
 }