@cosmicdrift/kumiko-renderer 0.378.0 → 0.379.0

package/dist/web/app/nav.js

@@ -11,7 +11,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // Event-Bus). Hand-rolled Listener-Set ist hier idiomatisch: zwei
 // Notify-Trigger (eigenes pushPath, popstate-Event), nicht generalisierbar.
 import { useCallback, useMemo, useSyncExternalStore, } from "react";
-import { formatPath, parsePath, resolveTarget, useNav, } from "../../index.js";
+import { formatPath, hasUnsavedInput, parsePath, requestLeave, resolveTarget, useNav, } from "../../index.js";
 // basePath erlaubt es, die App unter einem URL-Prefix zu mounten
 // (z.B. `/admin`). Read-Pfad strippt den Prefix vor dem parsePath,
 // Write-Pfad prepend'd ihn vor dem pushState/replaceState/href.
@@ -54,6 +54,12 @@ function prependBasePath(path, basePath) {
 // läuft über einen window-Listener, den wir einmalig verdrahten.
 const listeners = new Set();
 let popstateWired = false;
+// URL the app currently shows; popstate has already moved the browser to the
+// target by the time we can ask, so a declined leave must restore this one.
+let committedUrl = "";
+function readUrl() {
+    return `${window.location.pathname}${window.location.search}${window.location.hash}`;
+}
 // Stable identity for the omitted-features case — `?? []` would create a
 // fresh array every render, busting the useMemo below on every render for
 // every existing useBrowserNavApi() call site (none of which pass features).
@@ -64,13 +70,35 @@ function ensurePopstateWired() {
     if (typeof window === "undefined")
         return;
     window.addEventListener("popstate", () => {
-        for (const l of listeners)
-            l();
+        if (!hasUnsavedInput()) {
+            committedUrl = readUrl();
+            for (const l of listeners)
+                l();
+            return;
+        }
+        const targetUrl = readUrl();
+        window.history.pushState(null, "", committedUrl);
+        requestLeave(() => {
+            // replaceState, not history.back(): the declined entry is already ours
+            // and a forward navigation would otherwise land on the wrong entry.
+            window.history.replaceState(null, "", targetUrl);
+            committedUrl = targetUrl;
+            for (const l of listeners)
+                l();
+        });
+    });
+    window.addEventListener("beforeunload", (event) => {
+        if (!hasUnsavedInput())
+            return;
+        event.preventDefault();
+        event.returnValue = "";
     });
     popstateWired = true;
 }
 function subscribe(listener) {
     ensurePopstateWired();
+    if (typeof window !== "undefined" && listeners.size === 0)
+        committedUrl = readUrl();
     listeners.add(listener);
     return () => {
         listeners.delete(listener);
@@ -118,6 +146,7 @@ function applySearchParamUpdates(updates) {
         return;
     const url = `${window.location.pathname}${nextSearch}${window.location.hash}`;
     window.history.replaceState(null, "", url);
+    committedUrl = readUrl();
     for (const l of listeners)
         l();
 }
@@ -137,9 +166,12 @@ function pushPath(path, search) {
         (search === undefined || window.location.search === search);
     if (unchanged)
         return;
-    window.history.pushState(null, "", `${path}${search ?? ""}`);
-    for (const l of listeners)
-        l();
+    requestLeave(() => {
+        window.history.pushState(null, "", `${path}${search ?? ""}`);
+        committedUrl = readUrl();
+        for (const l of listeners)
+            l();
+    });
 }
 function replacePath(path, search) {
     if (typeof window === "undefined")
@@ -148,9 +180,19 @@ function replacePath(path, search) {
     // to avoid creating a history entry, even when the URL is identical.
     // (pushPath skips no-op pushes; replacePath honors the call so the
     // entry-stack semantics stay predictable.)
-    window.history.replaceState(null, "", `${path}${search ?? ""}`);
-    for (const l of listeners)
-        l();
+    const nextUrl = `${path}${search ?? ""}`;
+    const leavesCurrentPage = window.location.pathname !== path ||
+        (search !== undefined && window.location.search !== search);
+    const apply = () => {
+        window.history.replaceState(null, "", nextUrl);
+        committedUrl = readUrl();
+        for (const l of listeners)
+            l();
+    };
+    if (leavesCurrentPage)
+        requestLeave(apply);
+    else
+        apply();
 }
 /** React-Hook der eine NavApi aus der Browser-History baut. Sollte
  *  einmal im App-Root aufgerufen und als value an den shared

package/dist/web/layout/nav-tree.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDown, ChevronRight, Plus, Search } from "lucide-react";
-import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
 import { resolveNavigation } from "../../headless/index.js";
+import { createLiveRefetchScheduler } from "../../hooks/live-refetch-scheduler.js";
 import { lastSegment, toAppSchema, useLiveEvents, useNav, useTranslation } from "../../index.js";
 import { KumikoLink } from "../app/nav.js";
 import { useNavEntities, useNavProviders } from "../app/nav-providers-context.js";
@@ -205,13 +206,20 @@ function useNavProviderChildren(qn, enabled) {
     const [raw, setRaw] = useState(null);
     const [error, setError] = useState(null);
     const [attempt, setAttempt] = useState(0);
+    // A live refresh keeps the current nodes on screen instead of blanking them.
+    const keepNodesOnRefire = useRef(false);
     useEffect(() => {
         if (!enabled || entities.length === 0)
             return;
-        const unsubs = entities.map((e) => subscribeLive(e, () => setAttempt((n) => n + 1)));
+        const scheduler = createLiveRefetchScheduler(() => {
+            keepNodesOnRefire.current = true;
+            setAttempt((n) => n + 1);
+        });
+        const unsubs = entities.map((e) => subscribeLive(e, scheduler.trigger));
         return () => {
             for (const u of unsubs)
                 u();
+            scheduler.dispose();
         };
     }, [enabled, entities, subscribeLive]);
     // `attempt` triggert SSE-Refresh + erneutes Subscribe — Biome sieht es
@@ -228,7 +236,9 @@ function useNavProviderChildren(qn, enabled) {
             return;
         }
         setError(null);
-        setRaw(null);
+        if (!keepNodesOnRefire.current)
+            setRaw(null);
+        keepNodesOnRefire.current = false;
         try {
             const subscribe = provider();
             try {

package/dist/web/layout/shell-header.js

@@ -61,13 +61,13 @@ export function ShellHeader({ schema, user, headerActions, }) {
         : crumbs !== undefined && recordTitle !== undefined && crumbs.length > 0
             ? [...crumbs.slice(0, -1), { label: recordTitle }, ...crumbs.slice(-1)]
             : crumbs;
-    return (_jsxs("header", { "data-kumiko-layout": "shell-header", className: cn("flex h-14 shrink-0 items-center gap-3 border-b border-border pl-1.5 pr-3 md:pl-4 md:pr-6", compact && "relative"), children: [_jsxs("div", { className: cn("flex min-w-0 items-center gap-3", compact && "flex-1"), children: [_jsx(SidebarTrigger, { label: t("kumiko.sidebar.toggle") }), shownCrumbs !== undefined && shownCrumbs.length > 0 && (_jsx(Breadcrumb, { className: "min-w-0", "aria-label": t("kumiko.breadcrumb.label"), children: _jsx(BreadcrumbList, { className: "flex-nowrap gap-1.5 sm:gap-1.5", children: shownCrumbs.map((crumb, index) => {
+    return (_jsxs("header", { "data-kumiko-layout": "shell-header", className: cn("flex h-14 shrink-0 items-center gap-3 border-b border-border pl-1.5 pr-3 md:pl-4 md:pr-6", compact && "relative"), children: [_jsxs("div", { className: "@container flex min-w-0 flex-1 items-center gap-3", children: [_jsx(SidebarTrigger, { label: t("kumiko.sidebar.toggle") }), shownCrumbs !== undefined && shownCrumbs.length > 0 && (_jsx(Breadcrumb, { className: "min-w-0", "aria-label": t("kumiko.breadcrumb.label"), children: _jsx(BreadcrumbList, { className: "flex-nowrap gap-1.5 sm:gap-1.5", children: shownCrumbs.map((crumb, index) => {
                                 const screenId = crumb.screenId;
                                 const isLast = index === shownCrumbs.length - 1;
-                                return (_jsxs(Fragment, { children: [index > 0 && (_jsx(BreadcrumbSeparator, { className: "hidden text-muted-foreground sm:inline-flex [&>svg]:size-3.5" })), _jsx(BreadcrumbItem, { className: cn("min-w-0", !isLast && "hidden sm:inline-flex"), children: screenId !== undefined && !isLast ? (_jsx(BreadcrumbLink, { href: "#", className: "whitespace-nowrap text-foreground-secondary", onClick: (e) => {
+                                return (_jsxs(Fragment, { children: [index > 0 && (_jsx(BreadcrumbSeparator, { className: "hidden text-muted-foreground @xs:inline-flex [&>svg]:size-3.5" })), _jsx(BreadcrumbItem, { className: cn(isLast ? "min-w-0" : "hidden shrink-0 @xs:inline-flex"), children: screenId !== undefined && !isLast ? (_jsx(BreadcrumbLink, { href: "#", className: "whitespace-nowrap text-foreground-secondary", onClick: (e) => {
                                                     e.preventDefault();
                                                     nav.navigate({ screenId });
-                                                }, children: crumb.label })) : isLast ? (_jsx("h1", { "aria-current": "page", className: "truncate text-lg font-semibold text-foreground", children: titleOverride ?? crumb.label })) : (_jsx(BreadcrumbPage, { className: "whitespace-nowrap text-foreground-secondary", children: crumb.label })) })] }, screenId ?? crumb.label));
+                                                }, children: crumb.label })) : isLast ? (_jsx("h1", { "aria-current": "page", title: titleOverride ?? crumb.label, className: "truncate text-lg font-semibold text-foreground", children: titleOverride ?? crumb.label })) : (_jsx(BreadcrumbPage, { className: "whitespace-nowrap text-foreground-secondary", children: crumb.label })) })] }, screenId ?? crumb.label));
                             }) }) })), _jsx("div", { ref: setStatusElement, "data-kumiko-layout": "page-header-status", className: cn("flex items-center gap-2 empty:hidden", compact ? "min-w-0 overflow-hidden" : "shrink-0") })] }), _jsxs("div", { className: cn("ml-auto flex items-center gap-2", compact ? "min-w-0 max-w-[60%]" : "min-w-0 max-w-[50%] shrink-0 sm:max-w-none"), children: [_jsx("div", { ref: setActionsElement, "data-kumiko-layout": "page-header-actions", className: cn("flex min-w-0 items-center gap-2 empty:hidden [&_*]:min-w-0 [&_*]:max-w-full [&_button]:overflow-hidden [&_button]:whitespace-nowrap", compact && "overflow-hidden") }), !compact && headerActions !== undefined && (_jsx("div", { "data-kumiko-layout": "header-actions", className: "flex items-center gap-2", children: headerActions })), hasOverflow && _jsx(HeaderOverflow, { items: overflowItems, headerActions: headerActions })] })] }));
 }
 // A hand-rolled menu instead of Radix DropdownMenu: app headerActions are opaque

package/dist/web/lib/file-upload-form-data.d.ts

@@ -3,5 +3,7 @@ export type FileUploadFormDataInput = {
     readonly entityType?: string | undefined;
     readonly entityId?: string | undefined;
     readonly fieldName?: string | undefined;
+    /** Screen QN of an actionForm: the upload is pending for that form's field, not for an entity. */
+    readonly actionForm?: string | undefined;
 };
 export declare function buildFileUploadFormData(input: FileUploadFormDataInput): FormData;

package/dist/web/lib/file-upload-form-data.js

@@ -7,5 +7,7 @@ export function buildFileUploadFormData(input) {
         formData.append("entityId", input.entityId);
     if (input.fieldName !== undefined)
         formData.append("fieldName", input.fieldName);
+    if (input.actionForm !== undefined)
+        formData.append("actionForm", input.actionForm);
     return formData;
 }

package/dist/web/lib/upload-error-key.d.ts

@@ -0,0 +1,7 @@
+/** A dropzone refused a file because the field already holds `maxCount` files. */
+export declare class FileCountLimitError extends Error {
+}
+/** i18n key for a failed upload. The server's error string starts with a stable code before
+ *  the first ":"; the text after it is English and never shown, an unknown code gets the
+ *  generic key. */
+export declare function uploadErrorKey(cause: unknown): string;

package/dist/web/lib/upload-error-key.js

@@ -0,0 +1,23 @@
+import { FileUploadFailedError } from "./upload-file-ref.js";
+/** A dropzone refused a file because the field already holds `maxCount` files. */
+export class FileCountLimitError extends Error {
+}
+const SERVER_CODE_KEYS = {
+    file_too_large: "kumiko.widget.upload.too-large",
+    request_too_large: "kumiko.widget.upload.too-large",
+    invalid_file_type: "kumiko.widget.upload.invalid-type",
+    mime_mismatch: "kumiko.widget.upload.invalid-type",
+    content_mismatch: "kumiko.widget.upload.invalid-type",
+};
+/** i18n key for a failed upload. The server's error string starts with a stable code before
+ *  the first ":"; the text after it is English and never shown, an unknown code gets the
+ *  generic key. */
+export function uploadErrorKey(cause) {
+    if (cause instanceof FileCountLimitError)
+        return "kumiko.widget.upload.max-count";
+    if (cause instanceof FileUploadFailedError && cause.fromServer) {
+        const code = cause.message.split(":")[0]?.trim() ?? "";
+        return SERVER_CODE_KEYS[code] ?? "kumiko.widget.upload.error";
+    }
+    return "kumiko.widget.upload.error";
+}

package/dist/web/lib/upload-file-ref.d.ts

@@ -1,5 +1,5 @@
 import { type FileUploadFormDataInput } from "./file-upload-form-data.ts";
-export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName">;
+export type FileRefTarget = Pick<FileUploadFormDataInput, "entityType" | "entityId" | "fieldName" | "actionForm">;
 /** Carries the server's own `error` message when the upload endpoint sent one. */
 export declare class FileUploadFailedError extends Error {
     readonly fromServer: boolean;

package/dist/web/primitives/embedded-list-input.js

@@ -21,6 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // state into a `draftsByCellId` map here that survives the layout swap.
 import { ArrowDown, ArrowUp, Copy, Plus, Trash2 } from "lucide-react";
 import { Fragment, useEffect, useRef, useState, } from "react";
+import { fieldIssueText } from "../../field-issue-text.js";
 import { applyFormatSpec } from "../../headless/index.js";
 import { useLocale, useTranslation } from "../../index.js";
 import { cn } from "../lib/cn.js";
@@ -113,8 +114,8 @@ export function computeScrollAffordance(scrollLeft, scrollWidth, clientWidth) {
     };
 }
 function formatTotalValue(total, columns, currency, locale) {
-    const column = columns.find((c) => c.field === total.field);
-    if (column?.type === "money")
+    const isMoney = total.money ?? columns.find((c) => c.field === total.field)?.type === "money";
+    if (isMoney)
         return formatMoney(total.value, currency, locale);
     return total.value.toLocaleString(locale);
 }
@@ -131,7 +132,7 @@ function IssueMessages({ issues, testId, constrainWidth, }) {
     const t = useTranslation();
     if (issues === undefined || issues.length === 0)
         return null;
-    return (_jsx("div", { role: "alert", "data-testid": testId, className: cn("text-xs text-destructive", constrainWidth === true && "max-w-[16rem] whitespace-normal break-words"), children: issues.map((issue) => (_jsx("div", { children: t(issue.i18nKey, issue.params) }, `${issue.path}:${issue.code}`))) }));
+    return (_jsx("div", { role: "alert", "data-testid": testId, className: cn("text-xs text-destructive", constrainWidth === true && "max-w-[16rem] whitespace-normal break-words"), children: issues.map((issue) => (_jsx("div", { children: fieldIssueText(t, issue) }, `${issue.path}:${issue.code}`))) }));
 }
 function readOnlyCellText(column, value, currency, locale) {
     if (value === null || value === undefined || value === "")
@@ -335,7 +336,7 @@ export function EmbeddedListInput({ id, columns, rows, totals, currency, disable
     };
     const testIdFor = (suffix) => testId !== undefined ? `${testId}-${suffix}` : undefined;
     if (rows.length === 0) {
-        return (_jsxs("div", { ref: containerRef, "data-testid": testId !== undefined ? `${testId}-empty` : "embedded-list-empty", className: "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground", children: [_jsx("span", { children: emptyLabel }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", onClick: onAddRow, "data-testid": testId !== undefined ? `${testId}-empty-add` : "embedded-list-empty-add", children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), emptyCtaLabel] }))] }));
+        return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { ref: containerRef, "data-testid": testId !== undefined ? `${testId}-empty` : "embedded-list-empty", className: "flex flex-col items-center justify-center gap-3 rounded-lg border border-dashed p-10 text-center text-sm text-muted-foreground", children: [_jsx("span", { children: emptyLabel }), showControls && (_jsxs(UiButton, { type: "button", variant: "outline", size: "sm", onClick: onAddRow, "data-testid": testId !== undefined ? `${testId}-empty-add` : "embedded-list-empty-add", children: [_jsx(Plus, { className: "size-4", "aria-hidden": "true" }), emptyCtaLabel] }))] }), _jsx(IssueMessages, { issues: listIssues, testId: testIdFor("list-issues") })] }));
     }
     const hasTotals = totals !== undefined && totals.length > 0;
     return (_jsxs("div", { ref: containerRef, "data-testid": testId, className: "min-w-0", children: [!isMobile && (_jsxs("div", { "data-testid": testIdFor("desktop"), className: "hidden min-w-0 md:block", children: [_jsxs("div", { className: "min-w-0 overflow-hidden rounded-lg border bg-card", children: [_jsxs("div", { className: "relative min-w-0", children: [_jsx("div", { ref: setScrollContainerEl, "data-testid": testIdFor("desktop-scroll"), className: "overflow-x-auto [&_[data-slot=table-container]]:overflow-x-visible", children: _jsxs(Table, { className: "w-full table-fixed", style: { minWidth: `${tableMinWidthRem(columns, showControls)}rem` }, children: [_jsxs("colgroup", { children: [columns.map((column) => (_jsx("col", { style: columnWidthStyle(column.type) }, column.field))), showControls && _jsx("col", { style: { width: `${ACTIONS_COLUMN_REM}rem` } })] }), _jsx(TableHeader, { className: "bg-muted", children: _jsxs(TableRow, { className: "hover:bg-transparent", children: [columns.map((column) => (_jsx(TableHead, { title: column.label, className: cn("truncate", columnAlignClass(column.type)), children: column.label }, column.field))), showControls && (_jsx(TableHead, { className: cn("sticky right-0 z-10 whitespace-nowrap bg-muted px-1 text-right", isHorizontallyScrollable &&

package/dist/web/primitives/file-upload.d.ts

@@ -7,6 +7,7 @@ export type FileUploadInputProps = {
     readonly accept?: readonly string[];
     readonly disabled?: boolean;
     readonly entityType?: string;
+    readonly uploadActionForm?: string;
     readonly entityId?: string;
     readonly fieldName?: string;
     readonly imageVariant?: string;
@@ -18,4 +19,4 @@ export type FileUploadInputProps = {
     readonly pickLabel?: string;
     readonly testId?: string;
 };
-export declare function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }: FileUploadInputProps): ReactNode;
+export declare function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }: FileUploadInputProps): ReactNode;

package/dist/web/primitives/file-upload.js

@@ -9,12 +9,13 @@ import { useRef, useState } from "react";
 import { useTranslation } from "../../index.js";
 import { toAcceptAttr } from "../lib/accept-attr.js";
 import { resizeImageBeforeUpload } from "../lib/resize-image.js";
-import { FileUploadFailedError, uploadFileRef } from "../lib/upload-file-ref.js";
+import { uploadErrorKey } from "../lib/upload-error-key.js";
+import { uploadFileRef } from "../lib/upload-file-ref.js";
 import { Button as UiButton } from "../ui/button.js";
 import { FileNameLink, FileThumbnail } from "./file-thumbnail.js";
 // React's input typings have no `webkitdirectory`; spreading keeps it typed-cast-free.
 const DIRECTORY_INPUT_ATTRS = { webkitdirectory: "", multiple: true };
-export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
+export function FileUploadInput({ kind, id, value, onChange, accept, disabled, entityType, uploadActionForm, entityId, fieldName, imageVariant, capture, directory, onFilesPicked, pickLabel, testId, }) {
     const t = useTranslation();
     const inputRef = useRef(null);
     const [uploading, setUploading] = useState(false);
@@ -33,12 +34,15 @@ export function FileUploadInput({ kind, id, value, onChange, accept, disabled, e
         setError(null);
         try {
             const uploadFile = await resizeImageBeforeUpload(file);
-            onChange(await uploadFileRef(uploadFile, { entityType, entityId, fieldName }));
+            onChange(await uploadFileRef(uploadFile, {
+                entityType,
+                entityId,
+                fieldName,
+                actionForm: uploadActionForm,
+            }));
         }
-        catch (error) {
-            setError(error instanceof FileUploadFailedError && error.fromServer
-                ? error.message
-                : t("kumiko.field.file-upload.failed"));
+        catch (cause) {
+            setError(t(uploadErrorKey(cause)));
         }
         finally {
             setUploading(false);

package/dist/web/primitives/files-dropzone.d.ts

@@ -0,0 +1,16 @@
+import { type ReactNode } from "react";
+export type FilesDropzoneInputProps = {
+    readonly id: string;
+    readonly value: readonly string[];
+    readonly onChange: (fileIds: readonly string[]) => void;
+    readonly accept?: readonly string[];
+    readonly maxSize?: string;
+    readonly maxCount?: number;
+    readonly disabled?: boolean;
+    readonly entityType?: string;
+    readonly uploadActionForm?: string;
+    readonly entityId?: string;
+    readonly fieldName?: string;
+    readonly testId?: string;
+};
+export declare function FilesDropzoneInput({ id, value, onChange, accept, maxSize, maxCount, disabled, entityType, uploadActionForm, entityId, fieldName, testId, }: FilesDropzoneInputProps): ReactNode;

package/dist/web/primitives/files-dropzone.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// Drop zone for a `files` / `images` field with `display: "dropzone"`: one status row per picked
+// file, the field value is the array of FileRef ids of the files that uploaded. Failed files stay
+// out of the value; removing a row removes its id.
+import { useEffect, useRef } from "react";
+import { useTranslation } from "../../index.js";
+import { FileCountLimitError, uploadErrorKey } from "../lib/upload-error-key.js";
+import { uploadFileRef } from "../lib/upload-file-ref.js";
+import { UploadZone } from "../widgets/upload-zone.js";
+export function FilesDropzoneInput({ id, value, onChange, accept, maxSize, maxCount, disabled, entityType, uploadActionForm, entityId, fieldName, testId, }) {
+    const t = useTranslation();
+    // Uploads of one batch finish independently; building each next value from the render's
+    // `value` would drop the ids of the others. Re-synced whenever the owner changes the value.
+    const latestIds = useRef(value);
+    const uploadsRunning = useRef(0);
+    useEffect(() => {
+        latestIds.current = value;
+    }, [value]);
+    const target = {
+        entityType,
+        entityId,
+        fieldName,
+        actionForm: uploadActionForm,
+    };
+    async function uploadOne(file) {
+        if (maxCount !== undefined && latestIds.current.length + uploadsRunning.current >= maxCount) {
+            throw new FileCountLimitError();
+        }
+        uploadsRunning.current += 1;
+        try {
+            const fileId = await uploadFileRef(file, target);
+            latestIds.current = [...latestIds.current, fileId];
+            onChange(latestIds.current);
+            return fileId;
+        }
+        finally {
+            uploadsRunning.current -= 1;
+        }
+    }
+    function removeOne(fileId) {
+        latestIds.current = latestIds.current.filter((existing) => existing !== fileId);
+        onChange(latestIds.current);
+    }
+    const limits = [
+        accept !== undefined && accept.length > 0 ? accept.join(", ").toUpperCase() : undefined,
+        maxSize !== undefined ? t("kumiko.field.dropzone.limit-size", { size: maxSize }) : undefined,
+        maxCount !== undefined
+            ? t("kumiko.field.dropzone.limit-count", { count: maxCount })
+            : undefined,
+    ].filter((part) => part !== undefined);
+    return (_jsx(UploadZone, { testId: testId ?? `${id}-dropzone`, title: t("kumiko.field.dropzone.title"), ...(limits.length > 0 && { hint: limits.join(" · ") }), ...(accept !== undefined && { accept }), ...(disabled !== undefined && { disabled }), doneValues: value, onUpload: uploadOne, onRemove: removeOne, describeError: (cause) => t(uploadErrorKey(cause), { count: maxCount }) }));
+}